@charset "UTF-8";

@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url('/public/fonts/PretendardVariable.woff2') format('woff2-variations');
}

:root {
/*
    --navy: #1a2b4c;
    --navy-soft: #384d73;
    --navy-pale: #e6eaf0;

    --blue: #587ec7;
    --blue-soft: #7ea0e0;
    --blue-pale: #e6ebf5;

    --green: #19935b;
    --green-soft: #47b282;
    --green-pale: #e7f5ef;
    
    --amber: #d99600;
    --amber-soft: #f2b935;
    --amber-pale: #fff8e6;

    --red: #cc5a5a;
    --red-soft: #e07575;
    --red-pale: #fae6e6;
    
    --gray: #7a8494;
    --gray-soft: #a3acb9;
    --gray-pale: #eef1f5;
*/
    --purple: #5543ff;
    --purple-soft: #4331e8;
    --purple-pale: #efedff;

    /* Blue */
    --blue: #2f80ed;
    --blue-soft: #1f6fe0;
    --blue-pale: #eaf3ff;

    /* Green */
    --green: #06aa72;
    --green-soft: #118555;
    --green-pale: #e9f8f1;

    /* Amber */
    --amber: #e6a100;
    --amber-soft: #c98700;
    --amber-pale: #fff8e5;

    /* Red */
    --red: #e14d5f;
    --red-soft: #c63b4c;
    --red-pale: #ffecee;

    /* Gray */
    --gray: #6d7686;
    --gray-soft: #596273;
    --gray-pale: #f2f4f7;
    --width : 1200px;

    /* 1. 본문 텍스트 (가장 많이 사용) */
    --text-main: #333336; 

    /* 2. 보조 텍스트 (부연 설명, 도움말 등) */
    --text-sub: #666669;

    /* 3. 더 연한 텍스트 (아이콘 설명, 저작권, 약한 가이드) */
    --text-muted: #99999c;

    /* 4. 헤더용 화이트 (네이비 배경에 대비되는 색) */
    --text-fff: #ffffff;
}

@keyframes loader-effect {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

*, *::before, *::after { box-sizing: border-box; }
/*
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
*/

html { -webkit-font-smoothing: antialiased; }
html, body { padding: 0; margin: 0; border: 0; min-height: 100%; min-height: 100vh; min-height: 100dvh; font-size: 16px; font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Malgun Gothic', '맑은 고딕', sans-serif; color: var(--text-main); }

div, p, h1, h2, h3, h4, h5, h6, form, img, header, ul, ol, li, nav, dl, dt, dd, i, header { padding: 0; margin: 0; border: 0; font-family: inherit; }
input { font-family: inherit; }
button { touch-action: manipulation; outline: 0; border: 0; cursor: pointer; font-weight: 500; white-space: nowrap; font-family: inherit; font-size: inherit; }
a,
a:link,
a:hover,
a:active { color: inherit; text-decoration: none; -webkit-user-select: none; outline: none; }

button.purple, a.purple { color: #fff; background: var(--purple); transition: all .1s ease-in-out; }
button.blue, a.blue { color: #fff; background: var(--blue); transition: all .1s ease-in-out; }
button.green, a.green { color: #fff; background: var(--green); transition: all .1s ease-in-out; }
button.amber, a.amber { color: #fff; background: var(--amber); transition: all .1s ease-in-out; }
button.red, a.red { color: #fff; background: var(--red); transition: all .1s ease-in-out; }
button.gray, a.gray { color: #fff; background: var(--gray); transition: all .1s ease-in-out; }

ul { list-style: none; }

.sr-only{ position: absolute; top:auto; left: auto; margin: -1px; padding: 0; width: 1px; height: 1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.modal { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100dvh; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0, .5); backdrop-filter: blur(2px); }
.modal > .wrap { padding: 30px; max-height: 80vh; display: grid; grid-template-rows: auto 1fr auto; border-radius: 24px; background: #fff; overflow: hidden; }
.modal > .wrap > .head { padding-bottom: 14px; border-bottom: 1px solid #e3e3e3; }
.modal > .wrap > .head header { display: flex; justify-content: space-between; align-items: center; }
.modal > .wrap > .head header button { width: 40px; height: 40px; background: transparent url('/public/images/icon/close_x.svg') no-repeat center center / 26px; }
.modal > .wrap > .body { padding: 16px 0; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid #e3e3e3; overflow: hidden; }
.modal > .wrap > .body > .content { flex: 1; overflow-y: auto; }
.modal > .wrap > .foot { margin-top: 20px; height: 40px; display: flex; justify-content: flex-end; gap: 8px; }
.modal > .wrap > .foot button { height: 40px; padding: 0 16px; border-radius: 8px; font-size: 1rem; }

.modal[data-active="off"] { display: none; }
.modal[data-active="on"] { display: flex; }

.modal-terms .foot .agree[data-active="off"] { display: none; }


/* 개인정보취급방침 */
.modal .legalterms { line-height: 1.5; font-size: 14px; color:#444; overflow: auto; scrollbar-width: none; }
.modal .legalterms .section { margin-top: 12px; }
.modal .legalterms .introduce { margin-top: 4px; text-indent: 8px; }
.modal .legalterms .subsection { margin-top: 4px; }
.modal .legalterms .paragraph { padding-left: 8px; }
.modal .legalterms .note { padding-left: 8px; }

.modal .legalterms .scroll-x { width:100%; overflow-x: auto; }
.modal .legalterms .marker::before { position: relative; content: "•"; font-size: 14px; }

.modal .legalterms table { width: 100%; border-collapse: collapse; }
.modal .legalterms table th { height: 30px; border : 1px solid #e3e3e3; }
.modal .legalterms table td { padding: 5px; text-align: center; border : 1px solid #e3e3e3; }
.modal .legalterms table td.text-left { text-align: left; }

.modal .legalterms .tbl-item .col-type { min-width: 110px; width: 80px; }
.modal .legalterms .tbl-item .col-item { min-width: 170px; width: 100px; }
.modal .legalterms .tbl-item .col-purpose { min-width: 400px; width: auto; max-width: 100%; }
.modal .legalterms .tbl-decree .col-decree { min-width: 300px; width: auto; }
.modal .legalterms .tbl-decree .col-info { min-width: 200px; width: auto; }
.modal .legalterms .tbl-decree .col-period { min-width: 70px; width: auto; }
.modal .legalterms .tbl-entrust .col-biz { min-width: 150px; width: auto; }
.modal .legalterms .tbl-entrust .col-work { min-width: 470px; width: auto; }
.modal .legalterms .tbl-contact .col-type { min-width: 150px; width: auto; }
.modal .legalterms .tbl-contact .col-name { min-width: 80px; width: auto; }
.modal .legalterms .tbl-contact .col-role { min-width: 80px; width: auto; }
.modal .legalterms .tbl-contact .col-tel { min-width: 120px; width: auto; }
.modal .legalterms .tbl-contact .col-email { min-width: 180px; width: auto; }
.modal .legalterms .tbl-gov .col-agency { min-width: 200px; width: auto; }
.modal .legalterms .tbl-gov .col-link { min-width: 240px; width: auto; }
.modal .legalterms .tbl-gov .col-tel { min-width: 200px; width: auto; }

.load-mask { position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; background: rgba(0,0,0, .6); backdrop-filter: blur(2px); }
.load-mask .load-body { position:relative; width: 140px; height: 140px; display: flex; justify-content: center; align-items: center; }
.load-mask .load-body .spinner { position: absolute; width: 140px; height: 140px; border-radius: 70px; animation: loader-effect 1s ease-in-out infinite; }
.load-mask .load-body .text { color: #fff; text-shadow: #000 1px 0 5px; font-weight: 600; letter-spacing: .5px; }

.load-mask[data-active="on"] { display: flex; }

@media (pointer: coarse) {
    .modal .legalterms .scroll-x { scrollbar-width: none; }
    .modal .legalterms .scroll-x::-webkit-scrollbar { display: none; }
}

/* 모바일 */
@media screen and (max-width: 1024px) {

    button.purple:active, a.purple:active { background: var(--purple-soft); }
    button.blue:active, a.blue:active { background: var(--blue-soft); }
    button.green:active, a.green:active { background: var(--green-soft); }
    button.amber:active, a.amber:active { background: var(--amber-soft); }
    button.red:active, a.red:active { background: var(--red-soft); }
    button.gray:active, a.gray:active { background: var(--gray-soft); }

    .load-mask .load-body .spinner { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; }

    .modal > .wrap { padding: 16px; width: 95vw; min-width: 290px; max-width: 600px; }
    .modal > .wrap .body { margin-top: 8px; }
    .modal > .wrap .foot { margin-top: 12px; }

    .modal .legalterms .caption { margin: 4px 0; padding-left: 4px; height: 21px; line-height: 21px; font-size: 12px; background: #e6ebf5; }
}

/* PC */
@media screen and (min-width: 1025px) {

    button.purple:hover, a.purple:hover { background: var(--purple-soft); }
    button.blue:hover, a.blue:hover { background: var(--blue-soft); }
    button.green:hover, a.green:hover { background: var(--green-soft); }
    button.amber:hover, a.amber:hover { background: var(--amber-soft); }
    button.red:hover, a.red:hover { background: var(--red-soft); }
    button.gray:hover, a.gray:hover { background: var(--gray-soft); }

    .load-mask .load-body .spinner { border: 10px solid #f3f3f3; border-top: 10px solid #3498db; }

    .modal > .wrap { padding: 30px; max-width: 1000px; max-height: 800px; }
    .modal .legalterms .caption { display: none; }

}