@charset "utf-8";
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 101%;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}

[hidden] {
    display: none
}

body {
    line-height: 1;
}

menu,
ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}
* { box-sizing: border-box; margin: 0; padding: 0; line-height: 130%; font-family: "Pretendard", sans-serif;}
html,
body {
    font-size: 20px;
    width: 100%;
    min-width: 320px;
    height: 100%;
    font-family: "Pretendard", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500;
    line-height: 130%;
    color: #111;
    letter-spacing: -1px;
}

:root {
    /*color*/
    --blue: #007bff;
    --lightblue: #3c8dbc;
    --navy: #001f3f;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --fuchsia: #f012be;
    --maroon: #d81b60;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --olive: #3d9970;
    --cyan: #17a2b8;
    --lime: #01ff70;
    --white: #fff;
    --dark: #464C53;
    --black: #000000;
    --gray: #6c757d;
    --lightgray: #e9e9e9;
    --darkgray: #343a40;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --primary: #F5D747;
    --primary10: #EDE9DC;
    --primary20: #fff9e5;
    --primary30: #FFF8D5;
    --primary40: #C89600;
    --secondary: #69747a;
    --secondary10: #256EF4;
    --danger60: #D50136;
    --accent5: #FDF2F3;
    --point: #E71825;
    --point5: #FDF2F3;
    --point10: #FAD1D3;
    --point20: #F5A3A8;
    --point30: #F1747C;
    --point40: #EC4651;
    --point60: #B9131E;
    --point70: #8B0E16;
    --point80: #5C0A0F;
    --point90: #2E0507;
    --gray5: #F9f9f9;
    --gray10: #F4F5F6;
    --gray20: #eeeeee;
    --gray30: #d7dadb;
    --gray40: #cccccc;
    --gray50: #bcbcbc;
    --gray60: #878787;
    --gray70: #666666;
    --gray80: #333333;
    --gray90: #1D1D1D;

    --bd-round00: 0.32rem;
    --bd-round01: 0.4rem;
    --bd-round02: 0.6rem;

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

[class^=bg-].disabled {
    opacity: .65;
}

[class^=hover_] {
    transition: all .3s ease
}

[class^=hover_]:hover,
[class^=hover_].active {
    background-color: var(--primary10);
    color: var(--primary)
}

a {
    color: var(--black)
}

[class^=hover_]:hover {
    text-decoration: underline;
    text-underline-position: under;
}

button {
    background-color: transparent;
    border: 1px solid transparent;
}

img {
    display: inline-block
}
::placeholder { font-size: 0.72rem; color: var(--gray50); font-weight: 500}
input,
select,
textarea {
    border: 1px solid var(--gray40);
    border-radius: 0.4rem;
    font-size: 0.8rem;
    padding: 0 0.8rem;
    color: var(--gray80);
    height: 2.4rem;
}
select {
    padding-right: 1.6rem;
    background: var(--white);
    appearance: none; /* 브라우저 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
}
:focus { outline: 2px dashed #256ef4; outline-offset: 2px; transition: none}
.select_box_wrap{ display: inline-flex; align-items: center}
.select_box { position: relative; display: inline-block; max-width: 100%;}
.select_box:after { content: ""; width: 0.56rem; height: 0.28rem; background-color: var(--gray70); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; mask-image: url(../../img/user_new/icon/ic_angle_02.svg); position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none;}

.select_box.sz_md select { height: 1.8rem; border-color: var(--gray40); font-size: 0.64rem; font-weight: 500; padding-right: 1.2rem; color: var(--gray60); border-radius: var(--bd-round00)}
.select_box.sz_md:after { width: 0.44rem; height: 0.2rem; background-color: var(--gray60); right: 0.56rem}

.form_check_wrap{ display: flex; flex-wrap: wrap; gap: 0.5rem 1rem}

.form_check {display: inline-flex;align-items: flex-start}
.form_check input[type=checkbox] { position: absolute !important; width: 1px !important; height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip-path: inset(50%) !important;white-space: nowrap !important;border: 0 !important}
.form_check label { display: flex; gap: 0.2rem; position: relative}
.form_check label:after { background: #fff; mask-image: url("../../img/user_new/icon/ic_check.svg"); mask-repeat: no-repeat; mask-size: 60% auto; mask-position: center; position: absolute; left: 0; top: 0; display: none}
.form_check label:after,
.form_check label:before { flex-shrink: 0}

.form_check.ty_01 label{ gap: 0.5rem; font-size: 0.8rem; font-weight: 400; align-items: center; line-height: 100%;}
.form_check.ty_01 label:before,
.form_check.ty_01 label:after { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 0.16rem; border: solid 1px transparent}
.form_check.ty_01 label:before { border: solid 1px var(--gray40); background: var(--white)}
.form_check.ty_01 input[type=checkbox]:checked + label:before { background: var(--gray70); border-color: transparent}
.form_check.ty_01 input[type=checkbox]:checked + label:after { display: block}

.form_check.ty_02 label { gap: 0.5rem; font-size: 0.72rem; font-weight: 600; align-items: center}
.form_check.ty_02 label:before,
.form_check.ty_02 label:after { content: ""; width: 0.9rem; height: 0.9rem; border-radius: 50%}
.form_check.ty_02 label:before { background: var(--gray20)}
.form_check.ty_02 input[type=checkbox]:checked + label:before { background: var(--gray70)}
.form_check.ty_02 input[type=checkbox]:checked + label:after { display: block}

.form_check.ty_03 label { font-size: 0.72rem; font-weight: 500; color: var(--gray70); line-height: 1.2rem}
.form_check.ty_03 label:before,
.form_check.ty_03 label:after { content: ""; width: 1.2rem; height: 1.2rem; border-radius: 50%}
.form_check.ty_03 label:before { background: var(--gray20)}
.form_check.ty_03 input[type=checkbox]:checked + label:before { background: var(--gray70)}
.form_check.ty_03 input[type=checkbox]:checked + label:after { display: block}

.form_check.ty_04 label { height: 2.4rem; border-radius: var(--bd-round01); padding: 0 0.8rem; display: inline-flex; align-items: center; justify-content: center; flex-flow: row-reverse; gap: 0.32rem; font-size: 0.72rem; font-weight: 600; color: var(--white); background: var(--gray60)}
.form_check.ty_04 label:before,
.form_check.ty_04 label:after { content: ""; width: 0.85rem; height: 0.85rem; border-radius: 50%}
.form_check.ty_04 label:before { background: white;}
.form_check.ty_04 label:after { left: auto; right: 0.8rem; top: 50%; transform: translateY(-50%); background: var(--black)}
.form_check.ty_04 input[type=checkbox]:checked + label { background: var(--black); color: #fff}
.form_check.ty_04 input[type=checkbox]:checked + label:before { background: var(--white); border-color: var(--white)}
.form_check.ty_04 input[type=checkbox]:checked + label:after { display: block;}

.form_radio_wrap{ display: flex; flex-wrap: wrap; align-items: center}
.form_radio_wrap.ty_01{ gap: 2rem}

.form_radio {display: inline-flex;align-items: center; flex-shrink: 0}
.form_radio.full { width: 100%; flex-shrink: 1}
.form_radio.full label{ flex-shrink: 0}
.form_radio.full input[type='text']{ width: 100%; flex-shrink: 1}
.form_radio input[type=radio] { position: absolute !important; width: 1px !important; height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip-path: inset(50%) !important;white-space: nowrap !important;border: 0 !important}
.form_radio label { display: flex; gap: 0.25rem; position: relative}
.form_radio label:after { position: absolute; left: 0; top: 0; display: none}
.form_radio label:after,
.form_radio label:before { flex-shrink: 0}
.form_radio input[type='text'] { margin-left: 1rem}

.form_radio.ty_01 label{ font-size: 0.7rem; font-weight: 600; color: var(--gray80);}
.form_radio.ty_01 label:before,
.form_radio.ty_01 label:after { content: ""; border-radius: 50%; border: solid 1px transparent;}
.form_radio.ty_01 label:before { width: 0.9rem; height: 0.9rem; border: solid 1px var(--gray40); background: var(--white)}
.form_radio.ty_01 label:after { width: 0.5rem; height: 0.5rem; background: #5d5d5d; left: 0.2rem; top: 0.2rem}
.form_radio.ty_01 input[type=radio]:checked + label:before { border-color: #5d5d5d}
.form_radio.ty_01 input[type=radio]:checked + label:after { display: block}

.calendar_custom .flatpickr-calendar.inline {border: none;box-shadow: none;width: 360px;font-family: 'Pretendard', sans-serif;}
.calendar_custom .flatpickr-months {justify-content: center;font-weight: 600;font-size: 1.2rem;margin-bottom: 0.5rem;}
.calendar_custom .flatpickr-weekdays {margin-bottom: 0.3rem;}
.calendar_custom .flatpickr-weekday {font-weight: 500;color: #555;}
.calendar_custom .flatpickr-days {gap: 0.2rem;}
.calendar_custom .flatpickr-day {border-radius: 0.75rem;font-size: 1rem;height: 2.6rem;line-height: 2.6rem;width: 2.6rem;margin: 0.1rem;}
.calendar_custom .flatpickr-day.today {background-color: #f8d94a;color: #000;font-weight: 600;}
.calendar_custom .flatpickr-day.selected {background-color: #f8d94a;color: #000;}
.calendar_custom .flatpickr-day.nextMonthDay,
.calendar_custom .flatpickr-day.prevMonthDay {color: #ccc;}
.calendar_custom .flatpickr-day.weekend {color: #000;}
.calendar_custom .flatpickr-day.sun {color: #e74c3c;}

@media (prefers-reduced-motion: reduce) {
    .form_check * {transition: none !important}
}

button { cursor: pointer; display: inline-block}
select[disabled="disabled"],
input[readonly="readonly"],
input[readonly],
input[disabled="disabled"],
input[disabled],
select[readonly],
textarea[readonly] {
    background-color: #F6F7FA !important;
    color: #667183 !important;
}

@media (max-width: 768px) {

    html, body {
        font-size: 0.9rem;
    }
}