/* =======================================================================
   policy.css
======================================================================= */

/* ============================================================
   1. 페이지 공통
============================================================ */
.policy-page {background-color: var(--color-bg-white);}

.policy-page-header {
    position: relative;
    overflow: hidden;
    padding: var(--spacing-80) 0 var(--spacing-64);
    border-bottom: 1px solid var(--color-border-light);
    background-color: #F5F8FC;
}
.policy-page-header .container {position: relative; z-index: 1;}

/* ============================================================
   2. Tab
============================================================ */
.policy-section {padding: var(--spacing-64) 0 var(--section-padding-y-tablet);}

.policy-tab-wrap {margin-bottom: var(--spacing-64);}
.policy-tab-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-8);
}
.policy-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 var(--spacing-20);
    border: 1px solid var(--color-gray-30);
    border-radius: var(--radius-full);
    background-color: var(--color-gray-5);
    color: var(--color-gray-70);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}
.policy-tab-button:hover {
    border-color: var(--color-primary-30);
    background-color: var(--color-bg-white);
    color: var(--color-primary);
}
.policy-tab-button:focus-visible {outline: 0; box-shadow: 0 0 0 3px var(--color-primary-10);}
.policy-tab-button.is-active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: var(--font-weight-semibold);
}
.policy-tab-button.is-active:hover {color: var(--color-text-white);}
.policy-tab-panel[hidden] {display: none;}

/* ============================================================
   3. 약관 본문
============================================================ */
.policy-content {
    width: 100%;
    max-width: 1040px;
    margin-right: auto;
    margin-left: auto;
    color: var(--color-text-primary);
    font-size: var(--font-size-body);
    line-height: var(--line-height-loose);
}

.policy-chapter {margin-top: var(--spacing-64);}
.policy-chapter:first-child {margin-top: 0;}

.policy-chapter-title {
    margin: 0 0 var(--spacing-24);
    padding-bottom: var(--spacing-16);
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

.policy-chapter-addendum {
    margin-top: var(--spacing-80);
    padding-top: var(--spacing-24);
    border-top: 1px solid var(--color-border-light);
}

.policy-article {margin-top: var(--spacing-40);}
.policy-article:first-child {margin-top: 0;}

.policy-article-title {
    margin: 0 0 var(--spacing-16);
    color: var(--color-text-primary);
    font-size: var(--font-size-h6);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-base);
}

.policy-article-body {margin: 0;}

.policy-standalone-section .policy-intro {margin-bottom: var(--spacing-64);}
.policy-standalone-section .policy-intro p {margin: 0;}
.policy-standalone-section .policy-intro p + p,
.policy-standalone-section .policy-article-body + .policy-article-body {margin-top: var(--spacing-8);}
.policy-standalone-section .policy-article-body + .policy-list,
.policy-standalone-section .policy-list + .policy-article-body {margin-top: var(--spacing-16);}
.policy-standalone-section .policy-list-item-level-1 {padding-left: var(--spacing-24);}
.policy-standalone-section .policy-list-item-level-2 {padding-left: var(--spacing-48);}

.privacy-policy-content .privacy-policy-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-12);
    margin: var(--spacing-12) 0 0;
    padding: 0;
    list-style: none;
}
.privacy-policy-content .privacy-policy-list-level-2 {
    gap: var(--spacing-16);
    margin-left: calc(var(--spacing-12) * -1);
}
.privacy-policy-content .privacy-policy-list-level-3 {
    gap: var(--spacing-12);
    margin-top: var(--spacing-8);
    margin-left: calc(var(--spacing-16) * -1);
}
.privacy-policy-content .privacy-policy-item {
    display: grid;
    grid-template-columns: 1.25em minmax(0, 1fr);
    column-gap: var(--spacing-8);
    align-items: start;
}
.privacy-policy-content .privacy-policy-item-level-2 {grid-template-columns: 1.5em minmax(0, 1fr);}
.privacy-policy-content .privacy-policy-marker {width: 100%;}
.privacy-policy-content .privacy-policy-item-content {min-width: 0;}
.privacy-policy-content .privacy-policy-item-text {display: block;}
.privacy-policy-content .privacy-policy-item-level-1 > .privacy-policy-item-content > .privacy-policy-item-text {
    font-weight: var(--font-weight-semibold);
}
.privacy-policy-content .privacy-policy-item-level-2 > .privacy-policy-item-content > .privacy-policy-item-text {
    font-weight: var(--font-weight-medium);
}
.privacy-policy-content .privacy-policy-description {
    margin: var(--spacing-8) 0 0;
    font-weight: var(--font-weight-regular);
}

.policy-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-16);
    margin: 0;
    padding: 0;
    list-style: none;
}
.policy-list-item {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-8);
    row-gap: var(--spacing-8);
    align-items: flex-start;
}
.policy-list-marker {
    flex: 0 0 auto;
    width: auto;
    color: var(--color-text-primary);
}
.policy-list-text {flex: 1 1 0%; min-width: 0;}

.policy-sublist {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    gap: var(--spacing-8);
    margin: var(--spacing-8) 0 0;
    padding-left: var(--spacing-24);
    list-style: none;
}
.policy-sublist-item {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-8);
    row-gap: var(--spacing-8);
    align-items: flex-start;
}

/* ============================================================
   3-1. 지난 약관 버전 선택 (전자금융거래 이용약관)
============================================================ */
.policy-version-switch {
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    margin-bottom: var(--spacing-32);
}

.policy-version-label {
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-medium);
}

.policy-version-select {
    min-width: 160px;
    height: var(--form-control-height-sm);
    padding: 0 var(--spacing-40) 0 var(--spacing-16);
    border: 1px solid var(--color-gray-30);
    border-radius: var(--radius-md);
    background: var(--color-bg-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236B7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right var(--spacing-12) center / 16px 16px;
    appearance: none;
    -webkit-appearance: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    font-weight: var(--font-weight-regular);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.policy-version-select:hover {border-color: var(--color-primary-30);}
.policy-version-select:focus {
    outline: 0;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-10);
}

/* 마케팅 수신 동의: 짧은 정보 요약 */
.marketing-consent-page .policy-section {padding-top: var(--spacing-64);}
.marketing-consent-page .marketing-consent-notice {
    margin: var(--spacing-24) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-base);
}
.marketing-consent-page .marketing-consent-summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    margin: 0;
    color: var(--color-text-primary);
    font-size: var(--font-size-ui);
    line-height: var(--line-height-base);
}
.marketing-consent-page .marketing-consent-group dt {font-weight: var(--font-weight-semibold);}
.marketing-consent-page .marketing-consent-group dd {margin: var(--spacing-8) 0 0; font-weight: var(--font-weight-regular);}

/* ============================================================
   4. Responsive
============================================================ */
@media (max-width: 1024px) {
    .policy-page-header {text-align: center;}

    .policy-tab-wrap {margin-bottom: var(--spacing-48);}

    .policy-chapter-title {font-size: var(--font-size-h2-tablet);}
}

@media (max-width: 768px) {
    .policy-section {padding: var(--spacing-48) 0 var(--section-padding-y-mobile);}

    .policy-tab-wrap {margin: 0 calc(var(--container-padding-x-mobile) * -1) var(--spacing-32); overflow: hidden;}
    .policy-tab-list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding: 0 var(--container-padding-x-mobile);
        scroll-padding: var(--container-padding-x-mobile);
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .policy-tab-list::after {content: ""; flex: 0 0 max(var(--spacing-16), calc(100% - 152px));}
    .policy-tab-list::-webkit-scrollbar {display: none;}
    .policy-tab-button {
        flex: 0 0 auto;
        min-height: var(--touch-target-min);
        padding: 0 var(--spacing-16);
    }

    .policy-chapter-title {font-size: var(--font-size-h5);}
    .policy-article-title {font-size: var(--font-size-body-lg);}
}

@media (min-width: 470px) and (max-width: 768px) {
    .policy-tab-list {justify-content: center;}
    .policy-tab-list::after {display: none;}
}

@media (max-width: 480px) {
    .policy-page-header.page-header {padding: var(--spacing-40) 0 var(--spacing-32);}

    .policy-chapter {margin-top: var(--spacing-48);}
    .policy-chapter-addendum {margin-top: var(--spacing-64);}
    .policy-article {margin-top: var(--spacing-32);}
    .policy-sublist {padding-left: var(--spacing-16);}
    .policy-standalone-section .policy-intro {margin-bottom: var(--spacing-48);}
    .policy-standalone-section .policy-list-item-level-1 {padding-left: var(--spacing-16);}
    .policy-standalone-section .policy-list-item-level-2 {padding-left: var(--spacing-32);}
    .privacy-policy-content .privacy-policy-list-level-2 {margin-left: calc(var(--spacing-16) * -1);}
    .privacy-policy-content .privacy-policy-list-level-3 {margin-left: calc(var(--spacing-20) * -1);}

    .policy-version-switch {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-8);
    }
    .policy-version-select {width: 100%;}
}

@media (prefers-reduced-motion: reduce) {
    .policy-tab-button {transition: none;}
}