@charset "UTF-8";

:root {

    --main : #2029ff;
    --main-soft : #7377fa;
    --main-pale : #e6e7fa;

    --red : #cc5a5a;
    --red-soft : #e07575;
    --red-pale : #fae6e6;

    --gray : #969699;
    --gray-soft : #c8c8cc;
    --gray-pale : #e8e8eb;

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

    --coral : #cc5a5a;
    --coral-soft : #e07575;
    --coral-pale : #fae6e6;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; min-height: 100vh; min-height: 100dvh; font-size: 16px; color: #444; background: #f2f3f7; }
body { font-family: 'Noto Sans KR', sans-serif; }
html, body, section, div, p, ul, ol, dl, li, dt, dd, nav, code
, h1, h2, h3, h4, h5, h6, address, small, span, i, time, table, th, td
, form, fieldset, label, img, button { margin: 0; padding: 0; border: 0; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

body.fixed { width: 100%; height: 100%; overflow: hidden; }

abbr, address, i { text-decoration: none; font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; }
ul, ol { list-style: none; }
a,
a:link,
a:visited,
a:hover,
a:active { color: inherit; font-size: inherit; font-family: inherit; text-decoration: none; appearance: none; -webkit-user-select: none; outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { outline: none; cursor: pointer; appearance: none; -webkit-user-select: none; }
button:focus {outline: none; appearance: none; -webkit-user-select: none; }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance:none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

button.main { font-weight: 500; color: #fff; background: var(--main); }
button.main:disabled { color: #bdb8b5; background: var(--main-pale); }

button.gray { font-weight: 500; color: #fff; background: var(--gray); }
button.gray:disabled { color: #bdb8b5; background: var(--gray-pale); }

button.cobalt { font-weight: 500; color: #fff; background: var(--cobalt); }
button.cobalt:disabled { color: #bdb8b5; background: var(--cobalt-pale); }

button.red { font-weight: 500; color: #fff; background: var(--red); }
button.red:disabled { color: #bdb8b5; background: var(--red-pale); }

a.main { font-weight: 500; color: #fff; background: var(--main); }
a.main:disabled { color: #bdb8b5; background: var(--main-pale); }

a.gray { font-weight: 500; color: #fff; background: var(--gray); }
a.gray:disabled { color: #bdb8b5; background: var(--gray-pale); }

a.cobalt { font-weight: 500; color: #fff; background: var(--cobalt); }
a.cobalt:disabled { color: #bdb8b5; background: var(--cobalt-pale); }

textarea { border: 1px solid #e7e7e9; outline: none; resize: none; }
input[type="text"]
, input[type="number"]
, input[type="password"]
, input[type="tel"] { border: 1px solid #e7e7e9; outline: none; }

input[type="text"]::placeholder
, input[type="number"]::placeholder
, input[type="password"]::placeholder
, input[type="tel"]::placeholder
, textarea::placeholder { font-size: 13px; color: #808285; }

input[type="text"]:focus
, input[type="number"]:focus
, input[type="password"]:focus
, input[type="tel"]:focus
, textarea:focus { color: #444; border: 1px solid var(--main); }

input[type="text"]:disabled
, input[type="number"]:disabled
, input[type="password"]:disabled
, input[type="tel"]:disabled { color: #444; border: 1px solid #c8cacc; background: #f5f8fa; }

input[type="text"]:read-only
, input[type="number"]:read-only
, input[type="password"]:read-only
, input[type="tel"]:read-only { border: 1px solid #c8cacc; background: #f5f8fa; }


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

/* 모달 공통 */
.layout-modal { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100dvh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); }
.layout-modal.active { display: flex; }
.layout-modal .modal-wrap { border-radius: 24px; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.layout-modal .modal-head { flex-shrink: 0; height: 48px; }
.layout-modal .modal-head header { position: relative; height: 48px; display: flex; justify-content: center; align-items: center; }
.layout-modal .modal-head header button { position: absolute; top: 50%; right: 0; width: 40px; height: 40px; display: block; border-radius: 50%; background: transparent url('./images/icon/close_x_626466.svg') no-repeat center center / 26px; transform: translateY(-50%); }
.layout-modal .modal-wrap header button:hover { background-color: #f0f0f0; }
.layout-modal .modal-foot { flex-shrink: 0; height: 48px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; font-size: 0; }
.layout-modal .modal-body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
.layout-modal .modal-body::-webkit-scrollbar { display: none; }
.layout-modal .modal-foot button { padding: 0 16px; height:32px; border-radius: 16px; font-size: 14px; }
.layout-modal .modal-foot .confirm { display: none; }
.layout-modal.confirm .modal-foot .confirm { display: block; }
/* end 모달 공통*/

/* 개인정보취급방침 */

.modal-body .legalterms{max-height: calc(100% - 48px - 48px); line-height: 1.5; font-size: 14px; color:#444;}
.modal-body .legalterms .section{margin-top: 12px;}
.modal-body .legalterms .introduce{margin-top: 4px; text-indent: 8px;}
.modal-body .legalterms .subsection{margin-top: 4px;}
.modal-body .legalterms .paragraph{padding-left: 8px;}
.modal-body .legalterms .note{padding-left: 8px;}

.modal-body .legalterms .scroll-x{width:100%; overflow-x: auto;}

.modal-body .legalterms .marker::before{position: relative; content: "•"; font-size: 14px;}

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

.modal-body .legalterms .tbl-item .col-type{min-width: 110px; width: 80px;}
.modal-body .legalterms .tbl-item .col-item{min-width: 170px; width: 100px;}
.modal-body .legalterms .tbl-item .col-purpose{min-width: 400px; width: auto; max-width: 100%;}

.modal-body .legalterms .tbl-decree .col-decree{min-width: 300px; width: auto;}
.modal-body .legalterms .tbl-decree .col-info{min-width: 200px; width: auto;}
.modal-body .legalterms .tbl-decree .col-period{min-width: 70px; width: auto;}

.modal-body .legalterms .tbl-entrust .col-biz{min-width: 150px; width: auto;}
.modal-body .legalterms .tbl-entrust .col-work{min-width: 470px; width: auto;}

.modal-body .legalterms .tbl-contact .col-type{min-width: 150px; width: auto;}
.modal-body .legalterms .tbl-contact .col-name{min-width: 80px; width: auto;}
.modal-body .legalterms .tbl-contact .col-role{min-width: 80px; width: auto;}
.modal-body .legalterms .tbl-contact .col-tel{min-width: 120px; width: auto;}
.modal-body .legalterms .tbl-contact .col-email{min-width: 180px; width: auto;}

.modal-body .legalterms .tbl-gov .col-agency{min-width: 200px; width: auto;}
.modal-body .legalterms .tbl-gov .col-link{min-width: 240px; width: auto;}
.modal-body .legalterms .tbl-gov .col-tel{min-width: 200px; width: auto;}

.custom-select{position: relative; width: 100%;}
.custom-select button{width: 100%; display: block; background: transparent;}
.custom-select .custom-label{position: relative; padding: 0 24px 0 12px; width: 100%; height: 48px; display: block; border: 1px solid #d3d4db; border-radius: 8px; background: #f7f8fa;}
.custom-select .custom-label::after{position: absolute; top: 50%; right: 12px;  content: ""; width: 24px; height: 24px; background: url('../images/icon/arrow_down.svg') no-repeat right center / 24px; transform: translateY(-47%);}
.custom-select .custom-label:disabled{color: #969899;}
.custom-select .custom-options{position: absolute; margin-top: -1px; z-index: 1; width: 100%; height: auto; max-height: 200px; display: none; overflow: hidden; border: 1px solid #d3d4db; border-radius: 12px; background: #fff;}
.custom-select .custom-options li{padding: 5px; width: 100%;}
.custom-select .custom-options .item{padding: 0 12px; width: 100%; height: 48px; display: block; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: break-word; background: #fff;}
.custom-select .custom-options .item:hover{background: #f7f8fa;}
.custom-select .custom-options .item.selected{background: #f7f8fa;}
.custom-select.selected .custom-label::after{background-image: url('../images/icon/arrow_up.svg');}
.custom-select.selected .custom-options{display: block;}

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

/* 모바일 */
@media screen and (max-width: 1024px) {
    fieldset, label { min-width: 0; }

    button { -webkit-tap-highlight-color: transparent; }
    button.main:active { font-weight: 500; background: var(--main-soft); }
    button.gray:active { font-weight: 500; background: var(--gray-soft); }
    button.cobalt:active { font-weight: 500; background: var(--cobalt-soft); }
    button.red:active { font-weight: 500; background: var(--red-soft); }
    
    a.main:active { font-weight: 500; background: var(--main-soft); }
    a.gray:active { font-weight: 500; background: var(--gray-soft); }
    a.cobalt:active { font-weight: 500; background: var(--cobalt-soft); }

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

@media screen and (min-width: 1025px) {
    button.main:hover {font-weight: 500; background: var(--main-soft); }
    button.gray:hover {font-weight: 500; background: var(--gray-soft); }
    button.cobalt:hover {font-weight: 500; background: var(--cobalt-soft); }
    button.red:hover {font-weight: 500; background: var(--red-soft); }
    
    a.main:hover { font-weight: 500; background: var(--main-soft); }
    a.gray:hover { font-weight: 500; background: var(--gray-soft); }
    a.cobalt:hover { font-weight: 500; background: var(--cobalt-soft); }
    .layout-modal .modal-wrap { padding: 30px; max-width: 1000px; max-height: 800px; }
    .layout-modal .modal-body { margin-top: 20px; }
}