@charset "utf-8";
/* 디자인 시스템 */
/* 다른 페이지도 리뉴얼하면서 디자인 시스템 사용하게 되면 따로 파일 빼서 사용하면 될 것 같아요. - sujung.kim */
/* 배경색상 */
.bg-default {
    background: #313131;
}
.bg-white {
    background: #fff;
}
.bg-gray-light {
    background: #FAFAFAFA;
}
.bg-table-black {
    background: #000;
}
.bg-table-blue {
    background: #0087f5;
}
.bg-table-blue-opacity {
    background: #F4FAFE;
}
.bg-table-pink-default {
    background: #FF6491;
}
.bg-table-pink-light {
    background: #FFC8C2;
}
.bg-table-pink-dark {
    background: #FD3796;   
}
/* 폰트색상 */
.fontcolor-default {
    color: #1D1D1F;
}
.fontcolor-error {
    color: #F3213B;
}
.fontcolor-notice {
    color: #FF5A13;
}
.fontcolor-white {
    color: #F5F5F7;
}
.fontcolor-gray {
    color: #979798;
}
.fontcolor-caption {
    color: #757575;   
}
.fontcolor-blue {
    color: #0087f5;
}
.fontcolor-disabled {
    color: #979798;
}
.fontcolor-pink {
    color: #eb8ea5;
}
/* 폰트 사이즈 */
.fs-headline1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-headline2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-title-h1 {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-title-h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-title-h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-title-h4 {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
}
.fs-body-bold {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}
.fs-body {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}
.fs-caption1-m {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}
.fs-caption1-r {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}
.fs-caption2-m {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.fs-caption2-r {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
}
.fs-caption-label {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.fw-bold {
    font-weight: 700;
}
/* 버튼 */
.tb-button-fs1 {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 4px;
    padding: 1rem 1.5rem;
}
.tb-button-fs2 {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 4px;
    padding: 0.8rem 1.2rem;
}
.tb-button-fs3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    border-radius: 4px;
    padding: 0.5rem 0.9rem;
}
.tb-chip-fs1 {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 10em;
    padding: 0.55rem 1.2rem;
}
.tb-chip-fs2 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 10em;
    padding: 0.35rem 0.9rem;
}
.tb-chip-fs3 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 10em;
    padding: 0.3rem 0.75rem;
}
.tb-button-primary {
    background: #1d1d1f;
    color: #f5f5f7;
    border: 2px solid #1d1d1f;
}
.tb-button-primary:hover {
    background: #686869;
    color: #F5F5F7;
    border: 2px solid #686869;
}
.tb-button-primary:disabled,
.tb-button-primary.disabled {
    background: #EDEDED;
    color: #979798;
    user-select: none;
    pointer-events:none;
    border: 2px solid #EDEDED;
}
.tb-button-secondary {
    background: #fff;
    color: #1d1d1f;
    border: 2px solid #1d1d1f;
}
.tb-button-secondary:hover{
    background: #F0F0F0;
}
.tb-button-secondary:disabled,
.tb-button-secondary.disabled{
    background: #FFF;
    border-color: #B9B9BA;
    color: #979798;
    user-select: none;
}
.tb-button-tertiary {
    background: #fff;
    color: #1d1d1f;
    border: 1px solid #b9b9ba;
}
.tb-button-tertiary:hover {
    background: #F0F0F0;
}
.tb-button-tertiary:disabled,
.tb-button-tertiary.disabled {
    background: #FFF;
    border-color: #B9B9BA;
    color: #979798;
    user-select: none;
    pointer-events:none;
}
.tb-button-pink {
    background: #FFF0F4;
    color: #FF6491;
}
.tb-button-blue {
    background: #fff;
    border: 2px solid #0087F5;
    border-radius: 0.25rem;
    color: #0087f5;
}
.tb-button-transparent {
    background: none;
}
.tb-button-border0 {
    border: 0;
}
.tb-button-underline {
    text-decoration: underline;
}
.tb-button-underline:hover,
.tb-button-underline:disabled,
.tb-button-underline.disabled {
    color: #979798;
    text-decoration: underline;
}
.tb-button-underline:disabled,
.tb-button-underline.disabled {
    user-select: none;
    pointer-events:none;
}
.tb-button-mt {
    margin-top: 10px;
}
.tb-button-round {
    border-radius: 10em;
}
.tb-button-shadow {
    box-shadow: 1px 3px 7px 0px rgba(115, 115, 115, 0.20);
}
/* 뱃지, 라벨 */
.tb-badge-fs1 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.25rem 0.5rem;
}
.tb-badge-fs2 {
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 0.3rem 0.5rem;
}
.tb-badge-fs3 {
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    padding: 0.3rem 0.35rem;
}
.tb-badge-primary {
    background: #F0F0F0;
    border-radius: 0.25rem;
    border: 0.5px solid #1D1D1F;
}
.tb-badge-secondary {
    border-radius: 0.25rem;
    background: #F0F0F0;
}
.tb-badge-disabled {
    border-radius: 0.25rem;
    background: #F0F0F0;
    color: #979798;
}
.tb-badge-tertiary {
    background: #FFFFFF;
    border-radius: 0.25rem;
    border: 1px solid #fff;
}
.tb-badge-point-blue {
    background: #F4FAFE;
    border: 0.5px solid #0087f5;
    border-radius: 0.25rem;
    color: #0087F5;
}
.tb-badge-point-pink {
    background: #FFF0F4;
    border: 0.5px solid #FD3796;
    border-radius: 0.25rem;
    color: #FD3796;
}
.tb-badge-point-purple {
    background: #FEFBFF;
    border: 0.5px solid #CB59FF;
    border-radius: 0.25rem;
    color: #CB59FF;
}
.tb-badge-point-cyan {
    background: #DEFAFF;
    border: 0.5px solid #0098B2;
    border-radius: 0.25rem;
    color: #0098B2;
}
.tb-badge-point-green {
    background: #F2FFF6;
    border: 0.5px solid #00BF40;
    border-radius: 0.25rem;
    color: #00BF40;
}
/* 레이아웃 */
.flex_div {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 0.5rem;
}
.flex_div_between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.flex_wrap {
    flex-wrap: wrap;
}
.flex_column {
    display: flex;
    flex-direction: column;
}
.flex_end {
    justify-content: flex-end;
}
.grid_row {
    display: grid;
}
.w_100 {
    width: 100%;
}
.w_90 {
    width: 90%;
}
.w_80 {
    width: 80%;
}
.w_70 {
    width: 70%;
}
.w_60 {
    width: 60%;
}
.w_50 {
    width: 50%;
}
.w_40 {
    width: 40%;
}
.text-ellipsis {
    max-width: 90%;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* input 시스템 */
.tb_input_line {
    width: 90%;
    border-bottom: 1px solid #c7c8c9;
    padding: 0.5rem 1.5rem;
    background: transparent;
    color: #1d1d1f;
}
.tb_input_line:focus,
.tb_input_line.focus {
    border-bottom: 2px solid #1d1d1f;
}
.tb_input_line:disabled,
.tb_input_line.disabled {
    border-bottom: 1px solid #C7C8C9;
    color: #979798;
    background: #f4f4f5;
}
input.tb_input_line:read-only {
    user-select: none;
    pointer-events: none;
}
.tb_input_line.error {
    border-bottom: 1px solid #e52222;
}
.tb_input_bg {
    width: 100%;
    padding: 0.5rem 1.5rem;
    background: #f4f4f5;
    color: #1d1d1f;
}
.tb_input_bg:disabled,
.tb_input_bg.disabled {
    color: #979798;
}
input.tb_input_bg:read-only {
    user-select: none;
    pointer-events: none;
}
.tb_input_checkbox,
.tb_input_checkbox2 {
    display: block;
    width: 24px;
    height: 24px;
    border: 1px solid #1d1d1f;
    border-radius: 4px;
    background: #fff url('/_asset/img_v2/mytable/checkbox_default.png') center center no-repeat;
    background-size: contain;
    cursor: pointer;
}
.tb_input_checkbox:checked,
.tb_input_checkbox.checked,
.tb_input_checkbox2.on {
    background: #1D1D1F url('/_asset/img_v2/mytable/checkbox_checked.png') center center no-repeat;
    background-size: contain;
}
.tb_input_checkbox:disabled {
    border: 1px solid #979798;
    background: url('/_asset/img_v2/mytable/checkbox_disabled.png') center center no-repeat;
    background-size: contain;
}
.tb_input_checkbox.checked:disabled,
.tb_input_checkbox:checked:disabled {
    background: #979798 url('/_asset/img_v2/mytable/checkbox_checked.png') center center no-repeat;
    background-size: contain;
}
.warning-alert {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    color: #F3213B;
    column-gap: 0.25rem;
}
.warning-alert img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.toggle-button {
    position: relative;
}
.toggle-checkbox {
    display: none;
}
.toggle-label {
    width: 48px;
    height: 26px;
    background-color: #D9D9D9;
    display: block;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
}
.toggle-label::after {
    content: '';
    width: 18px;
    height: 18px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 4px;
    left: 4px;
    transition: transform 0.3s;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #1d1d1f;
}
.toggle-checkbox:checked + .toggle-label::after {
    transform: translateX(22px);
}
/* 디자인 시스템 end */