/* =====================================================================
 * OKPOS 통합 가맹점 인증(전환) 모달
 * Figma 2687:57268 (#12_가맹점 통합모달_PC) 기준.
 * 디자인 시스템(global-style.css) 토큰 기반. 모든 biz 페이지에서 global-style.css
 * 가 항상 로드되므로 var(--*) 사용 가능. PC·모바일 공용(반응형).
 * @see www/biz/_components/okpos_conversion_modal.php
 * ===================================================================== */

.okpos-conv-overlay{
    position:fixed; inset:0; z-index:9999;
    display:none; align-items:center; justify-content:center;
    background:rgba(17,24,39,.45);
    padding:var(--spacing-20);
}
.okpos-conv-modal{
    position:relative; width:100%; max-width:520px; max-height:90vh;
    overflow:hidden;
    background:var(--color-surface-default);
    border:1px solid #f1f2fb;
    border-radius:var(--radius-20);
    padding:var(--spacing-24) var(--spacing-24) 0;
    box-shadow:0 4px 38px rgba(0,0,0,.25);
    display:flex; flex-direction:column;
}
.okpos-conv-close{
    position:absolute; top:var(--spacing-24); right:var(--spacing-24);
    width:40px; height:40px;
    border:0; background:transparent; cursor:pointer;
    color:var(--color-content-muted);
    display:flex; align-items:center; justify-content:center;
    z-index:1;
}
.okpos-conv-body{
    flex:1; min-height:0;
    overflow-y:auto;
    display:flex; flex-direction:column; gap:var(--spacing-24);
    padding-bottom:var(--spacing-24);
}
.okpos-conv-head{
    display:flex; flex-direction:column; gap:var(--spacing-8);
    text-align:center;
    padding-top:var(--spacing-12);
    padding-bottom:var(--spacing-24);
}
.okpos-conv-eyebrow{
    color:var(--color-content-brand);
    font-size:var(--body-m-size); font-weight:600; line-height:var(--body-m-line);
    margin:0;
}
.okpos-conv-title{
    font-size:24px; font-weight:500; line-height:32px; letter-spacing:-1px;
    color:var(--color-content-strong);
    margin:0;
}
.okpos-conv-store{
    background:var(--color-surface-wash);
    border-radius:var(--radius-12);
    padding:var(--spacing-16);
    display:flex; flex-direction:column; gap:var(--spacing-8);
}
.okpos-conv-store__name{
    font-size:var(--body-m-size); font-weight:500; line-height:var(--body-m-line);
    color:var(--color-content-default); margin:0;
}
.okpos-conv-section{
    display:flex; flex-direction:column; gap:var(--spacing-8);
}
.okpos-conv-section-title{
    font-size:var(--body-s-size); font-weight:500; line-height:var(--body-s-line);
    color:var(--color-content-subtle); margin:0;
}
.okpos-conv-benefits{
    display:flex; flex-direction:column; gap:var(--spacing-12);
}
.okpos-conv-benefit{ display:flex; gap:var(--spacing-16); align-items:center; }
.okpos-conv-benefit__ic{
    width:48px; height:48px; border-radius:var(--radius-full);
    display:flex; align-items:center; justify-content:center;
}
.okpos-conv-benefit__ic--green{ background:var(--color-status-success-subtle); }
.okpos-conv-benefit__ic--pink{ background:var(--color-accent-subtle); }
.okpos-conv-benefit__ic--wash{ background:var(--color-surface-wash); }
.okpos-conv-benefit__t{
    font-size:var(--body-l-size); font-weight:500; line-height:30px;
    color:var(--color-content-default); margin:0;
}
.okpos-conv-benefit__d{
    font-size:var(--body-s-size); font-weight:400; line-height:var(--body-s-line);
    color:var(--color-content-subtle); margin:0;
}
.okpos-conv-terms{ display:flex; flex-direction:column; }
.okpos-conv-term{
    display:flex; align-items:flex-start; gap:var(--spacing-12);
    padding:var(--spacing-8) 0; cursor:pointer;
}
.okpos-conv-term--all{
    padding:var(--spacing-8) 0 var(--spacing-16);
    border-bottom:1px solid var(--color-border-subtle);
    margin-bottom:var(--spacing-8);
}
.okpos-conv-term__cb{ width:24px; height:24px; flex-shrink:0; position:relative; }
.okpos-conv-term__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--spacing-4); }
.okpos-conv-term__line{ display:flex; align-items:flex-start; gap:var(--spacing-8); }
.okpos-conv-term__label{
    flex:1; min-width:0;
    font-size:var(--body-s-size); font-weight:500; line-height:var(--body-s-line);
    color:var(--color-content-default); padding-top:1px;
}
.okpos-conv-term--all .okpos-conv-term__label{ flex:1; }
.okpos-conv-term__badge{
    display:flex; align-items:center; justify-content:center;
    height:24px; padding:0 var(--spacing-8); flex-shrink:0;
    font-size:var(--caption-m-size); font-weight:500; line-height:var(--caption-m-line);
    color:var(--color-content-muted);
    background:var(--color-surface-default);
    border:1px solid var(--color-border-subtle);
    border-radius:var(--radius-4);
}
.okpos-conv-term__more{
    display:flex; align-items:center; gap:5px; flex-shrink:0;
    border:0; background:transparent; cursor:pointer; padding:2px 0;
    font-size:var(--caption-m-size); font-weight:500; line-height:var(--caption-m-line);
    color:var(--color-content-brand);
}
.okpos-conv-term__more svg{ transition:transform .2s ease; }
.okpos-conv-term--open .okpos-conv-term__more svg{ transform:rotate(180deg); }
.okpos-conv-term__content{
    display:none; cursor:auto;
    max-height:160px; overflow-y:auto;
    margin-top:var(--spacing-4); padding:var(--spacing-12);
    background:var(--color-surface-wash); border-radius:var(--radius-8);
    font-size:var(--caption-m-size); line-height:var(--caption-m-line);
    color:var(--color-content-subtle);
    white-space:normal; word-break:break-all;
}
.okpos-conv-modal .okpos-conv-term__content,
.okpos-conv-modal .okpos-conv-term__content *{
    font-size:var(--caption-m-size); line-height:var(--caption-m-line);
    color:var(--color-content-subtle);
    font-family:inherit; font-weight:inherit;
}
.okpos-conv-term--open .okpos-conv-term__content{ display:block; }
.okpos-conv-mk-note{
    font-size:var(--caption-m-size); font-weight:500; line-height:var(--caption-m-line);
    color:var(--color-content-muted); margin:0;
}
.okpos-conv-actions{
    display:flex; gap:var(--spacing-12);
    padding:var(--spacing-16) 0 var(--spacing-32);
    background:var(--color-surface-default);
}
.okpos-conv-btn{
    flex:1; height:56px; border-radius:var(--radius-8); border:0;
    font-size:var(--body-l-size); font-weight:500; cursor:pointer;
}
.okpos-conv-btn--cancel{
    background:var(--color-surface-default);
    border:1px solid var(--color-border-medium);
    color:var(--color-content-strong);
}
.okpos-conv-btn--submit{ background:#36B7C5; color:var(--color-content-inverse); }
.okpos-conv-btn--submit:disabled{ background:var(--color-surface-brand-muted); cursor:not-allowed; }
.okpos-conv-cb-on,.okpos-conv-cb-off{ display:block; width:24px; height:24px; }
.okpos-conv-term[data-checked="1"] .okpos-conv-cb-off{ display:none; }
.okpos-conv-term[data-checked="0"] .okpos-conv-cb-on{ display:none; }

@media (max-width:480px){
    /* 오버레이: 하단 정렬 (바텀시트) */
    .okpos-conv-overlay{ align-items:flex-end; padding:0; }

    /* 모달 → 바텀시트 */
    .okpos-conv-modal{
        max-width:none; max-height:85vh;
        border-radius:var(--radius-16) var(--radius-16) 0 0;
        padding:36px var(--spacing-16) 0;
        box-shadow:0 4px 26px rgba(0,0,0,.15);
    }

    /* 닫기 버튼 */
    .okpos-conv-close{ top:var(--spacing-8); right:var(--spacing-8); }

    /* 헤더 */
    .okpos-conv-head{ gap:var(--spacing-4); padding-top:0; padding-bottom:var(--spacing-16); }
    .okpos-conv-eyebrow{ font-size:var(--body-s-size); line-height:var(--body-s-line); }
    .okpos-conv-title{ font-size:var(--title-s-size); line-height:var(--title-s-line); letter-spacing:-1px; }

    /* 바디 스크롤 영역 */
    .okpos-conv-body{ padding-bottom:var(--spacing-16); }

    /* 섹션 내부 갭 축소 */
    .okpos-conv-section{ gap:var(--spacing-4); }
    .okpos-conv-section-title{
        font-size:var(--caption-m-size); line-height:var(--caption-m-line);
    }

    /* 매장 박스 */
    .okpos-conv-store{ padding:var(--spacing-12); }

    /* 혜택 아이콘 축소 */
    .okpos-conv-benefit{ gap:var(--spacing-8); }
    .okpos-conv-benefit__ic{ width:40px; height:40px; }
    .okpos-conv-benefit__t{ font-size:var(--body-m-size); line-height:var(--body-m-line); }
    .okpos-conv-benefit__d{ font-size:var(--caption-m-size); line-height:var(--caption-m-line); }

    /* 하단 버튼 */
    .okpos-conv-actions{ padding:var(--spacing-12) 0 var(--spacing-16); }
    .okpos-conv-btn{ height:48px; font-size:var(--body-s-size); }
    .okpos-conv-btn--cancel{ flex:none; width:88px; }
}