/* web */
:root {
  /* light */
  /* color */
    --bd-brand:#1c1c3a;
    --bd-primary:#e8e8e8;
    --bd-secondary:#767676;
    --bg-brand:#1c1c3a;
    --bg-dim:#00000026;
    --bg-disabled:#c3c9cd;
    --bg-primary:#ffffff;
    --bg-secondary:#f7f7f8;
    --divider-light:#f2f2f2;
    --ic-cancel:#c7c7cc;
    --ic-gray:#b5b5b5;
    --tx-accent:#6a84ed;
    --tx-brand:#1c1c3a;
    --tx-caption:#7d8995;
    --tx-inverse:#ffffff;
    --tx-placeholder:#c3c9cd;
    --tx-primary:#141414;
    --tx-secondary: #4a4a4a;
}
/* font */
@font-face {
    font-family: 'Pretendard Variable';
    font-weight: 100 900;/*세팅 : 100~900 범위, 실사용 : 400,500,600,700*/
    font-style: normal;
    font-display: block;
    src: url('/Content/font/PretendardVariable.woff2') format('woff2-variations'),
        url('/Content/font/PretendardVariable.ttf') format('truetype');
}

/* 프로젝트 세팅값 */
*{margin:0;padding:0;}
html {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
*, *::before, *::after {-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit;}
body, input, select, textarea, button {
	font-family:'Pretendard Variable', Malgun Gothic, "맑은 고딕", Arial, sans-serif, '돋움', dotum;
    font-weight: normal;
	font-size:14px;
    line-height:140%;
    word-spacing:normal;
    letter-spacing: 0;
    color:var(--tx-primary);
    -webkit-font-smoothing: antialiased;/*글씨 깨짐 완화*/
    -moz-osx-font-smoothing: grayscale;
    font-smooth: never;
    outline:none;
    border:0 none;
}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;cursor:pointer;text-decoration:none;}
a:active{color:var(--semantic-text-tx-primary);text-decoration:none;}
li{list-style:none;}

.hide{display:none !important;}
.txt-gray{color:var(--tx-secondary) !important;}
.txt-accent{color:var(--tx-accent) !important}
.txt-caption{color:var(--tx-caption) !important}
.normal{font-weight:400 !important;}
.semibold{font-weight:500 !important;}
.bold{font-weight:700 !important;}
.f14{font-size:14px !important;}
.f15{font-size:15px !important;}
.f16{font-size:16px !important;}

/*--------------------------------------------------------------*/
/* 아이콘 */
/*--------------------------------------------------------------*/
/* 아이콘 > 크기별 프리셋 ------------------------------*/
.icon20{display:inline-block;width:20px;height:20px;vertical-align:middle;}
.icon20.tx-delete{background:url('/Content/Images/input-delete-20.svg') no-repeat center;}

/***************************************************************** 
    Input Components > Input-base
*****************************************************************/
/*--------------------------------------------------------------*/
/* Input-base 피그마 컴포넌트 */
/*--------------------------------------------------------------*/
/* ▶ input[type=text], input[type=password] > normal크기(디폴트height:46px) */
.custom-inputbase{position:relative;}
.custom-inputbase input[type=number],
.custom-inputbase input[type=text],
.custom-inputbase input[type=password] {width:100%;height:46px;background-color:var(--bg-primary);border:1px solid var(--bd-primary);border-radius:6px;padding:0 36px 0 16px;font-weight:500;}
.custom-inputbase input[type=number]{padding:0 15px;}/*number pd 예외처리*/
.custom-inputbase input[type=password] {padding:0 77px 0 15px;}
.custom-inputbase input[type=text]::placeholder,
.custom-inputbase input[type=password]::placeholder {color:var(--tx-placeholder);font-size:14px;font-weight:400;}
.custom-inputbase:focus-within input[type=number],
.custom-inputbase:focus-within input[type=text],
.custom-inputbase:focus-within input[type=password]{border:1px solid var(--bd-brand);}

/*--------------------------------------------------------------*/
/* Checkbox 피그마 컴포넌트 */
/*--------------------------------------------------------------*/
.custom-checkbox {position:relative; display:flex;}
.custom-checkbox input[type=checkbox]{position:absolute;cursor: pointer; appearance: none; -moz-appearance: none;-webkit-appearance: none;width:auto;height:auto;padding:0;border:0;}/*input 기본스타일 제거*/
.custom-checkbox input[type=checkbox] + label {position: relative;padding: 3px 0 3px 24px;vertical-align:middle;display:flex;align-items:center;}
.custom-checkbox input[type=checkbox] + label .text{font-size:15px;font-weight:500;}
.custom-checkbox input[type=checkbox] + label::before {position: absolute;top: 50%; transform: translateY(-50%); left: 3px;display:inline-block;content:'';width:18px;height:18px;border:1.4px solid var(--bd-secondary);background-color:var(--bg-primary);border-radius:3px;}
.custom-checkbox input[type=checkbox] + label::after {display: inline-block;content:'';width:16px;height:16px;position: absolute;top: 50%; transform: translateY(-50%); left:4px;}
.custom-checkbox input[type=checkbox]:checked + label::before {border:1.4px solid var(--bg-brand);background-color:var(--bg-brand);}
.custom-checkbox input[type=checkbox]:checked + label::after {background: url(/Content/Images/checkbox-check-bold-wh.svg) no-repeat center;left:4px;}

/* 아이콘 1) 기본 스타일 세팅*/
.custom-inputbase input[type=text] ~ .option-include,
.custom-inputbase input[type=number] ~ .option-include,
.custom-inputbase input[type=password] ~ .option-include {position:absolute;top:50%;transform:translateY(-50%);right:13px;display:flex;align-items:center;justify-content:flex-end;column-gap:8px;outline:none;}
.custom-inputbase input[type=text] ~ .option-include .icon20.tx-delete,
.custom-inputbase input[type=number] ~ .option-include .icon20.tx-delete,
.custom-inputbase input[type=password] ~ .option-include .icon20.tx-delete{display:none;width:20px;height:20px;}
/* 아이콘 2) 입력값 감지될 때 -> 삭제버튼 숨김해제*/
.custom-inputbase:focus-within input[type=text]:not(:placeholder-shown) ~ .option-include .icon20.tx-delete,
.custom-inputbase:focus-within input[type=password]:not(:placeholder-shown) ~ .option-include .icon20.tx-delete{display:block;text-indent:-9999px;cursor:pointer;}

/* input-box (라벨) */
.input-box-wrap{display:flex;flex-direction:column;row-gap:20px;padding-top:24px;}
.input-box .label-caption {font-size:13px;font-weight:600;color:var(--tx-caption);}
.input-box .label-caption + .custom-inputbase{margin-top:6px;}

/* button 스타일 > lg, Fill */
.btn{text-align:center;}
.btn.btn-lg{display:flex;align-items:center;justify-content:center;width:100%;height:46px;font-size:16px;font-weight:600;cursor:pointer;}
.btn.fill-primary {border-radius:6px;background-color:var(--bg-brand);color:var(--tx-inverse);}
.btn.fill-primary.disabled, .btn.fill-primary:disabled{background-color:var(--bg-disabled);}

/* 기본형 */
.comment-area{padding-top:30px;word-break:keep-all;}
.comment-area.f13{font-size:13px;}
.comment-area .comment-list{position:relative;display:block;padding-left:12px;color:var(--tx-caption);}
.comment-area .comment-list:before{position:absolute;top:8px;left:0;content:'';display:inline-block;width:2px;height:2px;background-color:var(--tx-caption);border-radius:50%;}
.comment-area .comment-list:first-child{margin-top:0}
/* 기본형 > bullet 없음 */
.comment-area.no-bullet{text-align:center;}
.comment-area.no-bullet .comment-list:before{content:none;}
.comment-area.no-bullet .comment-list{padding-left:0;}
.comment-area.no-bullet .comment-list a{color:var(--tx-caption);text-decoration:underline;text-underline-offset:2px;}

/* style */
.wrap{margin:auto;}
h1{border-bottom:1px solid var(--divider-light);background:url(/Content/Images/bg-retamin2025.svg) no-repeat center;width:100%;height:143px;text-indent:-9999px;}
/*h1 a{background:url(/Content/Images/img-nav-logo.svg);width:120px;height:50px;margin:24px auto 30px;display:block;}*/
.bnr-app{background-color:var(--bg-brand);display:flex;justify-content:center;gap:12px;font-size:15px;padding:12px 0;color:var(--tx-inverse);font-size:16px;font-weight:700;letter-spacing:-0.7px;}
.bnr-app:before{content:'';display:inline-block;background:url(/Content/Images/app-icon.svg) no-repeat 0 center;width:20px;height:20px;}
.container{min-height:610px;}

.result-box{border:1px solid var(--bd-primary);background:var(--bg-secondary);border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;padding:15px 30px;margin-bottom:24px;text-align:center;gap:4px;line-height:140%;}
.result-box p{font-weight:500;}
.result-box p > strong{font-weight:800;}
.result-box p > strong > span{font-size:13px;}
.step{max-width:767px;margin:30px auto 0;padding:0 24px;}
.step .txt{font-size:15px;text-align:center;}
.step .txt-accent{text-align:center;}
.step h2{padding:8px 0;display:flex;align-items:center;gap:4px;font-size:17px;margin-bottom:4px;}
.step h2:before{content:'';display:inline-block;background:url(/Content/Images/title-bullet.svg) no-repeat 0 center;width:24px;height:24px;}
.step .info-box dl{display:flex;font-size:16px;letter-spacing:-0.5px;padding-top:8px;line-height:140%;}
.step .info-box dl:first-child{padding-top:0;}
.step .info-box dl dt{font-weight:700;flex-shrink:0;}
.step .info-box dl dt:before{content:'';display:inline-block;background:url(/Content/Images/bullet-12.svg) no-repeat 4px 0;width:3px;height:5px;padding-right:14px;vertical-align:middle;}
.step .info-box dl dd span{color:var(--tx-secondary);}
.step .btn{margin-top:30px;}

.step2 .agree-box{border:1px solid var(--bd-primary);border-radius:6px;background-color:var(--bg-secondary);padding:30px;margin-top:24px;line-height:20px;display:flex;flex-direction:column;gap:24px;}
.step2 .agree-box h3{text-align:center;font-weight:700;font-size:16px;}
.step2 .agree-box li{display:flex;min-height:20px;margin-top:4px;color:var(--tx-secondary);}
.step2 .agree-box li:first-child{margin-top:6px;}
.step2 .agree-box li:before{content:'';display:inline-block;background:url(/Content/Images/bullet-12.svg) no-repeat 4px 0;width:3px;height:3px;padding-right:14px;margin-top:8px;}
.step2 .agree-box li strong, .step2 .agree-box li strong a{color:var(--tx-secondary);font-weight:700;}
.step2 .agree-box li strong a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}

.step3 .info-box dl{line-height:24px;}

/* alert */
.jconfirm .jconfirm-holder{padding:0;}
.jconfirm .jconfirm-box{padding:30px 20px 10px;max-width:360px;width:87%;letter-spacing:-0.5px;}
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue, .jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue:hover{background-color:var(--bg-brand);}
.jconfirm .jconfirm-box div.jconfirm-content-pane{margin-bottom:30px;}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{font-size:15px;word-break:break-all;}

.dimmed{position:fixed;left:0;top:0;width:100%;height:100%;background-color:var(--bg-dim);}


.footer{background-color:#13132c;margin-top:80px;}
.footer .inner{display:flex;flex-direction:column;justify-content:center;min-height:180px;max-width:767px;margin:auto;gap:27px;padding:0 27px;}
.footer .info{display:flex;flex-direction:column;gap:16px;}
.footer .info h2{background:url("/Content/Images/logo-footer.svg") no-repeat 0 0;width:120px;height:26px;text-indent:-9999px;}
.footer .info p{color:#fff;font-size:14px;}
.footer .link{display:flex;line-height:160%;letter-spacing:-0.15px;}
.footer .link ul{display:flex;}
.footer .link ul:first-child{margin-top:0;}
.footer .link ul li{position:relative;margin-left:17px;padding-left:17px;}
.footer .link ul li:before{content:'';display:inline-block;width:1px;height:12px;background-color:#fff;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.footer .link ul li:first-child{margin-left:0;padding-left:0;}
.footer .link ul li:first-child:before{content:none;}
.footer .link ul li a{color:#fff;font-size:16px;}
.footer .link ul li a.txt-point{color:#4bc9bb !important;text-decoration:underline;text-underline-offset:3px;font-weight:600;}
.footer .link ul:nth-child(2) li:first-child:before{content:'';}
.footer .link ul:nth-child(2) li:first-child{margin-left:17px;padding-left:17px;}

@media (max-width:540px) {
    h1{background-size:96%}
    .footer{padding:26px 0 50px;height:inherit;line-height:inherit;}
    .footer .inner{justify-content:flex-start;gap:20px;}
    .footer .info{align-self:baseline;}
    .footer .link{margin-top:0;display:block;}
    .footer .link ul{flex-wrap:wrap;gap:0;margin-top:10px;}
    .footer .link ul li a{font-size:14px;white-space:normal;word-break:keep-all;}
    .footer .link ul li:last-child a{word-break: break-all;overflow-wrap: anywhere;}
    .footer .link ul:nth-child(2) li:first-child{margin-left:0;}
}