@charset "UTF-8";
:root {
    --background-color: #1F1F1F;
    --dark: #1B1B1B;
    --light: #272727;
    --light-100: #2e2f30;
    --gray-50: rgba(46, 46, 46, 0.5);
    --gray-100: #E7ECF5;
    --gray-200: #83868B;
    --gray-300: #606267;
    --gray-400: #697183;
    --gray-500: #2e2e2e;
    --gray-700: #E9E9E9;
    --red: #ff2252;
    --blue: #5CBEEF;
    --primary: #E49C12;
    --primary-light: #ffbf44;
    --disabled-bg: #3C3C3C;
    --disabled-color: rgba(231, 236, 245, 0.5);
    --inner: 1440px;
    --inner-padding: 0 26px;
    --border: 1px solid var(--gray-500);
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

*::after,
*::before {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    width: 100%;
    min-width: 1600px;
    height: auto;
    font-size: 16px;
    font-family: 'Pretendard', sans-serif;
    background-color: #1f1f1f;
}

h1,
h2,
h3,
h4,
h5 {
    font-size: 1rem;
}

a {
    font-size: 1rem;
    font-weight: 400;
    color: #bbb;
    text-decoration: none;
}

ul {
    list-style: none;
}

input {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #fff;
}

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
}

input::-webkit-input-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d7d7d;
}

input:-moz-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d7d7d;
}

input::-moz-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d7d7d;
}

input:-ms-input-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d7d7d;
}

input::-ms-input-placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: #7d7d7d;
}

input::placeholder {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gray-200);
}

button {
    font-size: 0.875rem;
    font-weight: 400;
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
}

table {
    font-size: 1rem;
    border-collapse: collapse;
}

select {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    background: url(/assets/Pc/img/select_arrows.png) no-repeat right 15px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #bbb;
}

select::-ms-expand {
    display: none;
}

textarea {
    font-family: 'Pretendard', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: #bbb;
}

textarea::-webkit-input-placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

textarea:-moz-placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

textarea::-moz-placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

textarea:-ms-input-placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

textarea::-ms-input-placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

textarea::placeholder {
    font-size: 0.875rem;
    font-weight: 300;
    color: #7d7d7d;
}

button:disabled {
    color: var(--disabled-color) !important;
    background: var(--disabled-bg) !important;
    cursor: default;
}

.bold { font-weight: 700 !important; }
.smbold { font-weight: 600 !important; }
.medium { font-weight: 500 !important; }
.primary { color: var(--primary) !important; }
.gray { color: var(--gray-500) !important; }
.blue { color: var(--blue) !important; }
.red { color: var(--red) !important; }
.icon_star { 
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: transparent !important;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/star_off.png);
    background-size: cover;
}
.icon_star:after {
    content: "";
    color: transparent !important;
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/star_on.png);
    background-size: 16px;
    opacity: 0;
}
.icon_star_half:after {
    width: 50%;
} 
.icon_star.active:after {
    opacity: 1;
}
.icon_chat {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: transparent !important;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_chat.png);
    background-size: cover;
}

.icon_info {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    color: transparent !important;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_info.png);
    background-size: cover;
}

.icon__ {
    display: inline-flex;
}
.icon_particle {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_particle.png);
    background-size: cover;
    background-position: center;
}
.icon_back {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_back.png);
    background-size: cover;
    background-position: center;
}

.icon_eye {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_eye.png);
    background-size: cover;
    background-position: center;
}

.icon_like {
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-image: url(/assets/Pc/img/icon_like.png);
    background-size: cover;
    background-position: center;
}
/* modal */
.alert_modal_wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;

    transition: all 0.3s;
    -webkit-transition: all 0.3s;
    visibility: hidden;
    opacity: 0;
}
.alert_modal_wrap.show {
    visibility: visible;
    opacity: 1;
}
.alert_modal_wrap .dim {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.alert_modal_con {
    position: relative;
    z-index: 10;
    margin: auto;
    min-width: 360px;
    background: rgba(46, 46, 46, 1);
    border-radius: 10px;
    overflow: hidden;
    padding: 15px;
    text-align: center;
}
.alert_modal_buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.alert_modal_buttons button {
    flex: 1;
    height: 50px;
    background: var(--primary);
    border: 1px solid transparent;
    border-color: var(--primary);
    border-radius: 5px;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}
.alert_modal_buttons button:hover {
    background: var(--primary-light);
}
.alert_modal_buttons button.confirm_cancel {
    background: #606267;
    border-color: #606267;
    color: var(--gray-100);
}
.alert_modal_buttons button.confirm_cancel:hover {
    background: #6b6b6b;
    border-color: #6b6b6b;   
}

.alert_modal_icon {
    display: none;
    width: 40px;
    margin: 0 auto 15px;
}
.alert_modal_icon.show {
    display: block;
}
.alert_modal_icon img {
    width: 100%;
}
.alert_modal_txt {
    padding: 15px 0 40px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--gray-200);
}
.alert_modal_txt h2 {
    font-size: 18px;
    font-weight: 700;
    line-height: 26px;
    color: var(--gray-100);
    margin-bottom: 10px;
}


/* */
input,
.join_input,
.comtbox,
.comt_txt { outline: 1px solid transparent !important; outline-offset: -1px; transition: all 0.3s; -webkit-transition: all 0.3s; overflow: hidden; }

.comtbox,
.comt_txt { outline-offset: 0px; }

input:focus,
.join_input:focus-within,
.comtbox:focus-within,
.comt_txt:focus-within { outline-color: var(--primary) !important; }
.join_input input:focus { outline-color: transparent !important; }

.name_option .option_box a,
.view_comtlist .comt_stat > li > a,
.mypage_userbox_right a { transition: all 0.3s; -webkit-transition: all 0.3s; }

.name_option .option_box a:hover,
.view_comtlist .comt_stat > li > a:hover,
.mypage_userbox_right a:hover { background: var(--primary) !important; border-color: var(--primary) !important; color: #1b1b1b !important; }