/* 전역 변수 */
:root { --scroll-thumb-color: #999; --main-color: #0d62ff; --sub-color: #AFDDFF; --gray-color: #DBDBDB; --alret-color: #f8d7da; --alret-txt-color: #fc1a2d; --fff: #fff; --btn-txt-color: #fff; --txt-color: #333; --curvature: 5px; --bsh: 0 0 10px #00000020; } 

/* 라이트 모드 */
:root[color-theme='light'] { --color: #333; --surface-default: #fff; --mode-btn-default: #FFFFFF; --btn-svg-hover: #FFA500; } 

/* 다크 모드 */
:root[color-theme='dark'] {--img-filter: invert(100%); --color: #fff; --surface-default: #17171C; --mode-btn-default: #23232B; --btn-svg-hover: gold; } 

/* */

body { color: var(--color); transition: .3s; background: var(--surface-default); } 
body a { color: var(--color); transition: .3s; } 
/* body { height: 150vh; } */
.bx { box-shadow: var(--bsh); height: fit-content; padding: 24px; border-radius: var(--curvature); background: #fff; display: flex; width: fit-content; } 
.ds_bbx { align-content: flex-start; padding: 20px; display: flex; gap: 20px; flex-wrap: wrap; } 

/* */
/* */
/* */

/* logo */
header .logo{filter: var(--img-filter);}

/* icon start */
.icon { width: 16px; height: 16px; } 
.icon.arrow.left { transform: rotate(180deg); } 
.icon.arrow.top { transform: rotate(-90deg); } 
.icon.arrow.bottom { transform: rotate(90deg); } 
.icon img { width: 100%; height: 100%; object-fit: contain; object-position: center; } 
/* icon end */

/* btn start */
.btn_bbx { display: flex; gap: 10px; flex-wrap: wrap; } 
button,
.btn { height: 40px; justify-content: center; background: var(--main-color); border: 2px solid var(--main-color); width: fit-content; user-select: none; cursor: pointer; transition: .2s; display: flex; align-items: center; padding: 10px 12px; border-radius: var(--curvature); gap: 8px; } 
button:hover,
.btn:hover { filter: contrast(120%); } 
button,
.btn,
.btn .txt { white-space: nowrap; font-size: 16px; font-weight: 500; color: var(--btn-txt-color); } 
.btn.min { height: 34px; padding: 8px 10px; gap: 6px; } 
.btn.min .txt { font-size: 14px; font-weight: 400; } 
.btn.min .icon { width: 14px; height: 14px; } 
.btn.big { padding: 12px 14px; gap: 10px; } 
.btn.big .txt { font-size: 18px; } 
.btn.big .icon { width: 18px; height: 18px; } 
.btn.line { background: var(--fff); } 
.btn.line:hover { filter: contrast(0.9); } 
.btn.line .txt { color: var(--txt-color); } 
.btn.tp { background: transparent; border: 2px solid transparent; } 
.btn.tp:hover { filter: contrast(0.5); } 
.btn.tp .txt { color: var(--txt-color); } 
.btn.disable { background: var(--gray-color); border: 2px solid var(--gray-color); color: var(--btn-txt-color-reverse); pointer-events: none; } 
.btn.disable .icon { filter: grayscale(1); } 

.btn.alert { background: var(--alret-color); border: 2px solid var(--alret-color); } 
.btn.alert .txt { color: var(--alret-txt-color); } 
/* btn end */

/* drop start */
.drop_bbx { display: flex; flex-wrap: wrap; gap: 10px; height: fit-content; } 
.drop_bx { position: relative; user-select: none; } 
.drop_bx .tit_bx { border: 2px solid #eee; justify-content: space-between; min-width: 200px; display: flex; align-items: center; gap: 20px; background: #fff; padding: 10px; border-radius: var(--curvature); } 
.drop_bx.on .tit_bx { border: 2px solid var(--sub-color); box-shadow: var(--bsh); } 
.drop_bx .arrow { transition: .3s; } 
.drop_bx.on .arrow { transform: rotate(-90deg); } 
.drop_bx .tit_bx .tit { display: flex; align-items: center; gap: 6px; } 
.drop_bx .tit_bx .tit .txt { font-size: 16px; } 
.drop_bx .drop_menu_bx { box-shadow: var(--bsh); display: none; padding: 5px 0; border-radius: var(--curvature); overflow: hidden; width: 100%; position: absolute; top: calc(100% + 5px); flex-direction: column; background: #fff; } 
.drop_bx.on .drop_menu_bx { display: flex; } 
.drop_bx .drop_menu_bx .menu { padding: 10px 11px; display: flex; align-items: center; gap: 6px; } 
.drop_bx .drop_menu_bx .menu:hover { background: #eee; } 
.drop_bx .drop_menu_bx .menu .icon { width: 14px; height: 14px; } 
.drop_bx .drop_menu_bx .menu .txt { font-size: 14px; } 
/* drop end */

/* toast start */
.toast_bbx { pointer-events: none; user-select: none; z-index: 99999; position: absolute; width: 100%; display: flex; justify-content: center; } 
.toast_bbx .toast_bx { opacity: 0; position: fixed; bottom: 20px; transition: .3s ease-in-out; } 
.toast_bbx.on .toast_bx { bottom: 50px; opacity: 1; } 
.toast_bbx .toast { border-radius: var(--curvature); display: flex; align-items: center; gap: 10px; padding: 10px; background: #fff; border: 2px solid var(--sub-color); } 
.toast_bbx .toast .icon { width: 14px; height: 14px; } 
.toast_bbx .toast .txt { font-size: 14px; font-weight: 500; } 
/* toast end */

/* toggle start */
.toggle_bbx { display: flex; flex-wrap: wrap; gap: 10px; } 
.toggle_bbx .toggle_bx { overflow: hidden; position: relative; } 
.toggle_bbx .toggle_bx input { cursor: pointer; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.toggle_bbx .toggle { border-radius: 100px; background: var(--main-color); width: 34px; height: 20px; position: relative; } 
.toggle_bbx .toggle .cir { transition: .1s ease-in-out; left: 3px; top: 3px; position: relative; height: calc(100% - 6px); aspect-ratio: 1/1; background: #fff; border-radius: 50%; } 
.toggle_bbx .toggle_bx:has(input:checked) .cir { left: 17px; } 
/* toggle end */

/* check_bx start */
.check_bbx { display: flex; gap: 10px; } 
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--main-color); margin: 0; padding: 0; } 
/* check_bx end */

/* radio start */
.radio_bbx { display: flex; gap: 10px; } 
input[type='radio'] { margin: 0; padding: 0; flex-shrink:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 16px; height: 16px; border: 1px solid #767676; border-radius: 50%; outline: none; cursor: pointer; } 
input[type='radio']:hover { border: 1px solid #444; } 
input[type='radio']:checked { background-color: var(--main-color); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--main-color); } 
/* radio end */

/* dark-light btn start */
.dark_light_bbx { z-index: 999; position: fixed; right: 20px; bottom: 20px; } 
.dark_light_bbx .dark-light-toggle { box-shadow: var(--bsh); display: flex; justify-content: center; align-items: center; position: relative; width: 56px; height: 56px; background-color: var(--mode-btn-default); border: none; border-radius: 10px; overflow: hidden; cursor: pointer; transition: background-color 0.5s; } 
.dark_light_bbx .icon30 { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; position: absolute; } 
.dark_light_bbx .icon30>svg { transition: fill 0.5s, transform 0.5s ease; } 
.dark_light_bbx .sun { animation: rise-animation 1s forwards; transform-origin: 50% 200% } 
.dark_light_bbx .moon { animation: set-animation 1s forwards; transform-origin: 50% 200%; } 
[color-theme='dark'] .dark-light-toggle .sun { animation: set-animation 1s forwards; } 
[color-theme='dark'] .dark-light-toggle .moon { animation: rise-animation 1s forwards; } 
.dark_light_bbx .dark-light-toggle:hover svg { fill: var(--btn-svg-hover); transform: scale(1.2); } 
@keyframes rise-animation { 
 from { transform: rotate(180deg); } 
 to { transform: rotate(360deg); } 
 }
@keyframes set-animation { 
 from { transform: rotate(0deg); } 
 to { transform: rotate(180deg); } 
 }
/* dark-light btn end */

/* modal start */
.modal_bbx { opacity: 0; pointer-events: none; transition: .3s; display: flex; align-items: center; justify-content: center; z-index: 99999; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; } 
.modal_bbx.on { opacity: 1; pointer-events: all; } 
body:has(.modal_bbx.on) { overflow: hidden; } 
.modal_bbx .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #00000033; } 
.modal_bbx .modal_bx { position: relative; padding: 20px; width: 300px; max-width: calc(100% - 32px); height: fit-content; box-shadow: var(--bsh); background: #fff; border-radius: var(--curvature); position: relative; z-index: 1; } 
.modal_bbx .tbx { display: flex; flex-direction: column; gap: 10px; } 
.modal_bbx .tit { font-size: 24px; font-weight: 600; line-height: 1.4; } 
.modal_bbx .desc { font-size: 15px; font-weight: 500; line-height: 1.4; } 
.modal_bbx .btn_bbx { margin-top: 24px; flex-wrap: nowrap; } 
.modal_bbx .btn_bbx .btn { width: 100%; } 
.modal_bbx .modal_bx .x_btn { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; aspect-ratio: 1/1; position: absolute; right: 7px; top: 7px; } 
.modal_bbx .modal_bx .x_btn span { background: #333; transform: rotate(45deg); position: absolute; width: 2px; height: 16px; border-radius: 10px; } 
.modal_bbx .modal_bx .x_btn span:last-child { transform: rotate(-45deg); } 
/* modal end */

/* input start */
textarea,
input[type="tel"],
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"] { color: var(--txt-color); line-height: 1.4; width: 100%; border: none; font-size: 16px; font-family: "Pretendard"; height: 100%; padding-block: 0; padding-inline: 0; padding: 10px; } 
textarea::-webkit-scrollbar { width: 4px; height:0; } 
textarea::-webkit-scrollbar-thumb { border-radius: 20px; background-color: var(--scroll-thumb-color); } 
textarea::-webkit-scrollbar-track { background-color: transparent; } 
textarea,
input:focus { outline: none; } 
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus { outline: none; } 
input::placeholder { color: var(--txt-color); font-size: 16px; font-family: "Pretendard"; } 
textarea,
.input_bx { height: 40px; border: 2px solid #eee; transition: .2s; width: 100%; position: relative; overflow: hidden; display: flex; align-items: center; border-radius: var(--curvature); } 
textarea { resize: none; height: 100px; overflow-y: auto; } 
.input_bx .eye_bx { padding: 10px; padding-left: 0; right: 0; cursor: pointer; } 
.input_bx .eye_bx img:last-child { display: none; } 
textarea:focus,
.input_bx:has(input:focus) { border: 2px solid var(--sub-color); } 
.input_bx .icon { flex-shrink: 0; } 
.input_bx .search_icon { width: 20px; height: 20px; margin: 10px 0 10px 10px; } 

.input_bbx { display: flex; flex-direction: column; gap: 5px; width: 100%; } 
.input_bbx .alert_txt { display: none; font-size: 12px; color:var(--alret-txt-color); } 
.input_bbx.alert .alert_txt { display: flex; } 
.input_bbx .alert_txt::before { content: '*'; margin-right: 3px; top: 1px; position: relative; } 
/* input end */

/* search_bbx start */
.search_bbx { display: flex; align-items: center; gap: 10px; } 
.search_bbx .input_bx { width: 200px; flex-shrink: 0; } 
.search_bbx input { } 
/* search_bbx end */

/* form start */
.form_bbx { padding: 20px; width: 100%; background: #fff; border-radius: var(--curvature); display: flex; flex-direction: column; gap: 10px; } 
.form_bbx .btn { width: 100%; } 
/* form end */

/* comment_bbx start */
.comment_bbx { display: none; flex-direction: column; gap: 20px; margin-top: 10px; padding: 20px; width: 100%; background: #fff; border-radius: var(--curvature); } 
.comment_bbx:has(.comment_bx) { display: flex; } 
.comment_bbx .comment_bx { display: flex; gap: 8px; flex-direction: column; } 
.comment_bbx .user_info { display: flex; align-items: center; gap: 10px; } 
.comment_bbx .user_info .icon { width: 24px; height: 24px; } 
.comment_bbx .comment_bx .date,
.comment_bbx .user_info .txt { font-size: 14px; font-weight: 500; color: #333; } 
.comment_bbx .content { color: #333; line-height: 1.4; word-break: break-all; font-size: 14px; padding: 10px; border: 1px solid #eee; border-radius: var(--curvature); } 

.comment_bbx .comment_bx .btn_bbx { flex-wrap: nowrap; justify-content: end; } 
.comment_bbx .comment_bx .btn_bbx .input_bbx { width: 200px; } 
.comment_bbx .comment_bx .x_btn { cursor: pointer; width: 14px; height: 14px; position: relative; } 
.comment_bbx .comment_bx .x_btn span { border-radius: var(--curvature); width: 2px; height: 14px; background: var(--txt-color); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(45deg); } 
.comment_bbx .comment_bx .x_btn span:last-child { transform: translate(-50%,-50%) rotate(-45deg); } 
/* comment_bbx end */

/* txtarea_bbx start */
.txtarea_bbx { display: flex; flex-direction: column; gap: 5px; } 
.txtarea_bbx .info_bx { display: flex; align-items: center; justify-content: space-between; } 
.txtarea_bbx .info_bx .txt_num { color: var(--txt-color); display: flex; align-items: center; font-size: 12px; font-weight: 500; } 
.txtarea_bbx .info_bx .txt_num.red { color: var(--alret-txt-color); } 
/* txtarea_bbx end */

/* tbx start */
.tbx { color: var(--txt-color); } 
/* tbx end */

/* public start */
.fbx { gap: 10px; width: 100%; display: flex; } 
.fdc { flex-direction: column; } 
.jcsb { justify-content: space-between; } 
.aic { align-items: center; } 
.w100p { width: 100%; } 
/* public end */










/* @media (max-width: 900px) {
}; */


@media (max-width: 600px){
    .dark_light_bbx .dark-light-toggle { width: 40px; height: 40px; } 
    .dark_light_bbx .icon30{width: 20px; height: 20px;}
}