@charset "utf-8";

.chulsuk_title {font-size:34px; text-align:center; font-weight:bold; letter-spacing:-0.05rem; margin-bottom:10px;}
.chulsuk_title span {color:#007fff;}

.chulsuk_date_info_wrap {border-bottom:3px solid #333; margin-bottom:10px;}
.chulsuk_date_info_inner {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 0;}
.chulsuk_live_datetime {color:#333;}
.chulsuk_live_datetime span {display:inline-block; vertical-align:middle;}
.chulsuk_live_datetime .time_wrap {font-size:24px; letter-spacing:-0.05rem; margin-right:8px;}
.chulsuk_live_datetime .time_wrap .time {font-weight:bold;}
.chulsuk_info .gray_box {position:relative; display:inline-block; background:#eaeaeb; padding:5px 10px 5px 48px; font-size:13px; color:#888; border-radius:5px; text-align:left;}
.chulsuk_info .gray_box > span:first-child {position:absolute; top:6px; left:5px; background:#007fff; color:#fff; font-size:14px; font-weight:bold; padding:4px 6px; border-radius:3px; line-height:1;}

.chulsuk_calendar_top {position:relative; text-align:center; margin-top:2.5rem; margin-bottom:1.5rem;}
.chulsuk_calendar_top .year {position:absolute; top:50%; left:0; transform:translateY(-50%); font-size:28px; text-align:center; font-weight:bold; letter-spacing:-0.05rem;}
.chulsuk_calendar_top .month {position:relative; display:inline-block; font-size:34px; text-align:center; font-weight:bold; letter-spacing:-1px;}
.chulsuk_calendar_top .month img {position:absolute; top:-4px; right:-58px;}
.chulsuk_calendar_top .month_ctrl {position:absolute; top:50%; right:0; transform:translateY(-50%);}
.chulsuk_calendar_top .month_ctrl a {display:inline-block; background:#333; color:#fff; padding:0 8px; height:30px; line-height:30px; border-radius:5px; transition:background .2s; text-decoration:none; margin-left:4px;}
.chulsuk_calendar_top .month_ctrl a:hover {background:#000; color:#fff;}

.chulsuk_calendar_wrap {position:relative; margin-bottom:20px; overflow:visible;}

#calendar_tbl {width:100%; border-collapse:collapse; table-layout:fixed; background:#fff;}
#calendar_tbl tr th {background:#4e5461; color:#fff; border:1px solid #656566; font-weight:normal; padding:0.5rem 0; text-align:center;}
#calendar_tbl tr th:first-child {border-left:0;}
#calendar_tbl tr th:last-child {border-right:0;}
#calendar_tbl tr th.red {color:#ffb3b3;}
#calendar_tbl tr th.blue {color:#9fd6ff;}
#calendar_tbl tr td {border:1px solid #e8e9eb; padding:0; height:72px; vertical-align:top; background:#fafbfc;}
#calendar_tbl tr td:first-child {border-left:0;}
#calendar_tbl tr td:last-child {border-right:0;}
#calendar_tbl tr td.active {background:#fff; box-shadow:inset 0 0 0 2px #007fff;}
#calendar_tbl tr td a {position:relative; display:block; padding:0.6rem; line-height:1; font-size:14px; letter-spacing:-1px; color:#333; text-decoration:none; min-height:60px;}
#calendar_tbl tr td a:hover div {color:crimson !important;}
#calendar_tbl tr td span {color:#333;}
#calendar_tbl tr td .red {color:#ff4646;}
#calendar_tbl tr td .blue {color:#009cff;}
#calendar_tbl tr td .cnday_wrap {margin-top:20px; text-align:right;}
#calendar_tbl tr td .cnday_wrap .cnday {font-size:18px; letter-spacing:-1px; color:#007fff;}
#calendar_tbl tr td .icon_chulsuk_stamp {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:36px; height:36px; line-height:36px; text-align:center; border-radius:50%; background:rgba(227,48,48,0.85); color:#fff !important; font-size:18px; font-weight:bold; opacity:0.85; pointer-events:none;}

.chulsuk_popup {display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); border:3px solid #e33030; padding:26px 27px 36px 27px; width:340px; max-width:100%; background:#fff; border-radius:30px; box-shadow:8px 8px 20px rgb(50 60 70 / 30%); z-index:1050;}
.chulsuk_popup > div {position:relative;}
.chulsuk_popup .btn_close {position:absolute; top:-30px; right:-20px; width:50px; height:50px; border-radius:50px; background:rgba(90, 90, 91, 0.8); text-align:center; line-height:49px; cursor:pointer; border:0;}
.chulsuk_popup .btn_close img {vertical-align:middle;}
.chulsuk_popup .title {font-size:28px; color:#e33030; font-weight:bold; letter-spacing:-0.05rem; text-align:center;}
.chulsuk_popup .text {line-height:1.3; text-align:center; color:#888; margin-top:5px; font-size:13px;}
.chulsuk_popup .text span {color:#333; text-decoration:underline;}
.chulsuk_popup .tabs {margin-top:10px; display:flex;}
.chulsuk_popup .tabs span {display:inline-block; width:50%; height:40px; line-height:38px; border:1px solid #e8e9eb; color:#666; text-align:center; font-size:16px; cursor:pointer;}
.chulsuk_popup .tabs span:first-child {border-radius:10px 0 0 10px;}
.chulsuk_popup .tabs span:last-child {border-radius:0 10px 10px 0;}
.chulsuk_popup .tabs span.active {background:#e33030; color:#fff; border:1px solid #e33030;}
.chulsuk_popup .tbl_wrap {display:none; margin-top:10px; border-radius:10px; overflow:hidden;}
.chulsuk_popup .tbl_wrap.active {display:block;}
.chulsuk_popup table {width:100%; border-spacing:0; padding:0; border-collapse:collapse;}
.chulsuk_popup table tr th {background:#4d5360; color:#fff; text-align:center; font-size:12px; font-weight:normal; padding-top:3px; padding-bottom:3px; letter-spacing:-0.02rem;}
.chulsuk_popup table tr td {background:#f7f8fa; color:#333; text-align:center; font-size:12px; border-bottom:1px solid #e8e9eb; padding-top:2px; padding-bottom:1px; letter-spacing:-0.02rem;}
.chulsuk_popup table tr td.red {color:#e33030; font-weight:bold;}
.chulsuk_popup table tr:last-child td {border-bottom:0;}

.chulsuk_my_info_wrap {position:relative; margin-bottom:20px; min-height:36px;}
.chulsuk_wr_time {font-weight:bold; font-size:18px;}
.chulsuk_my_info {margin-top:6px;}
.chulsuk_my_info span {margin-right:15px;}
.chulsuk_my_info a {color:#007fff; text-decoration:underline;}
.chulsuk_rank_point_info {position:absolute; top:50%; transform:translateY(-50%); right:0;}
.chulsuk_rank_point_info span {display:inline-block; border-radius:8px; background:#fff; height:36px; line-height:34px; padding:0 12px 0 10px; cursor:pointer; box-shadow:2px 2px 5px #d9d9d9; transition:background .2s;}
.chulsuk_rank_point_info span img {vertical-align:middle; margin-top:-2px; margin-right:2px;}
.chulsuk_rank_point_info #chulsuk_rank_info {border:1px solid #85ccff;}
.chulsuk_rank_point_info #chulsuk_rank_info:hover {background:#f8fcff;}
.chulsuk_rank_point_info #chulsuk_point_info {border:1px solid #eebd3a; margin-left:5px;}
.chulsuk_rank_point_info #chulsuk_point_info:hover {background:#fdfbf5;}

.chulsuk_submit_wrap {padding-top:30px; margin-bottom:30px; border-top:3px solid #e33030; position:relative;}
.chulsuk_submit_wrap:after {display:block; content:''; visibility:hidden; clear:both;}
.chulsuk_submit_wrap input#wr_content {float:left; border:0; box-shadow:5px 5px 8px #e1e1e1; width:calc(100% - 230px); height:60px; line-height:60px; border-radius:10px 0 0 10px; font-size:20px; color:#333; padding:0 20px; letter-spacing:-0.05rem; outline:none; background:#fff; box-sizing:border-box;}
.chulsuk_submit_wrap #btn_chulsuk_submit {float:left; width:230px; height:60px; line-height:60px; border-radius:0 10px 10px 0; background:#e33030; font-size:20px; color:#fff; border:0; letter-spacing:-0.05rem; text-align:center; transition:background .2s; cursor:pointer;}
.chulsuk_submit_wrap #btn_chulsuk_submit:hover {background:#c82828;}
.chulsuk_submit_wrap #btn_chulsuk_submit:disabled {opacity:0.7; cursor:default;}

.chulsuk_complete_wrap {display:flex; justify-content:center; align-items:center; padding-top:30px; margin-bottom:30px; border-top:3px solid #e33030;}
.chulsuk_complete_wrap .chulsuk_complete_text {text-align:center; line-height:1.3;}
.chulsuk_complete_wrap .chulsuk_complete_text > div:first-child {font-size:28px; text-align:center; font-weight:bold; letter-spacing:-0.05rem;}
.chulsuk_complete_wrap .chulsuk_complete_text > div:first-child span.red {color:#e33030;}
.chulsuk_complete_wrap .chulsuk_complete_text > div:last-child {color:#666; font-weight:bold; font-size:15px; margin-top:6px;}

.chulsuk_list_wrap {overflow:visible; margin-bottom:15px;}
.chulsuk_list_wrap table {width:100%; border-collapse:collapse;}
.chulsuk_list_wrap table tr th {border:0; text-align:center; background:#4e5461; color:#fff; font-weight:normal; vertical-align:middle; letter-spacing:-0.05rem; padding:12px 8px;}
.chulsuk_list_wrap table tr th:first-child {border-radius:10px 0 0 0;}
.chulsuk_list_wrap table tr th:last-child {border-radius:0 10px 0 0;}
.chulsuk_list_wrap table tr td {border:0; border-bottom:1px solid #e8e9eb; text-align:center; background:#fcfdff; font-size:14px; color:#333 !important; vertical-align:middle; letter-spacing:-0.05rem; font-weight:normal; padding:10px 8px;}
.chulsuk_list_wrap table tr:last-child td {border-bottom:0;}
.chulsuk_list_wrap table tr:last-child td:first-child {border-radius:0 0 0 10px;}
.chulsuk_list_wrap table tr:last-child td:last-child {border-radius:0 0 10px 0;}
.chulsuk_list_wrap table tr td b {font-weight:bold;}
.chulsuk_list_wrap table tr:nth-child(even) td {background:#f7f8fa;}
.chulsuk_list_wrap table tr td .att_rank_img {max-height:28px; vertical-align:middle;}
.chulsuk_list_wrap .empty_table {padding:30px 0; text-align:center; color:#888;}

.attendance_board_wrap {width:100%;}
#bo_list.attendance_list_section {width:100% !important;}
.attendance_list_section #bo_btn_top {margin:0 0 15px; display:flex; justify-content:space-between; align-items:center;}
.attendance_list_section #bo_list_total {float:none; line-height:34px; font-size:0.92em; color:#4e546f;}
.attendance_list_section .btn_bo_user {float:none; margin:0; padding:0; list-style:none;}
.attendance_list_section .pg_wrap {text-align:center; margin:15px 0;}

@media (max-width:992px) {
    .chulsuk_title {font-size:24px;}
    .chulsuk_date_info_inner {flex-direction:column; align-items:flex-start;}
    .chulsuk_live_datetime {font-size:14px; text-align:center; width:100%;}
    .chulsuk_live_datetime .time_wrap {font-size:16px;}
    .chulsuk_info {width:100%;}
    .chulsuk_info .gray_box {display:block;}
    .chulsuk_calendar_top {margin-top:1.2rem;}
    .chulsuk_calendar_top .year {font-size:20px; display:none;}
    .chulsuk_calendar_top .month {font-size:24px;}
    .chulsuk_calendar_top .month img {width:34px; top:-3px; right:-42px;}
    .chulsuk_calendar_top .month_ctrl {display:block; position:static; transform:none; margin-top:10px; text-align:center;}
    .chulsuk_wr_time {font-size:14px;}
    .chulsuk_calendar_top .month_ctrl a {font-size:13px;}
    .chulsuk_my_info span {display:block; font-size:13px;}
    .chulsuk_rank_point_info {position:static; transform:none; text-align:right; margin-top:10px;}
    .chulsuk_rank_point_info #chulsuk_rank_info,
    .chulsuk_rank_point_info #chulsuk_point_info {margin-top:10px;}
    .chulsuk_rank_point_info span {font-size:13px;}
    #calendar_tbl tr th,
    #calendar_tbl tr td {font-size:13px;}
    #calendar_tbl tr td {height:56px;}
    #calendar_tbl tr td a {padding:0.3rem; min-height:48px;}
    #calendar_tbl tr td .cnday_wrap {margin-top:10px;}
    #calendar_tbl tr td .cnday_wrap .cnday {font-size:13px;}
    #calendar_tbl tr td .icon_chulsuk_stamp {width:28px; height:28px; line-height:28px; font-size:14px;}
    .chulsuk_popup {padding:16px 17px 26px 17px;}
    .chulsuk_popup .btn_close {top:-11px; right:-12px; width:40px; height:40px; line-height:39px;}
    .chulsuk_popup .title {font-size:20px;}
    .chulsuk_popup .text {font-size:14px;}
    .chulsuk_submit_wrap {padding-top:20px; margin-bottom:20px;}
    .chulsuk_submit_wrap input#wr_content {width:calc(100% - 80px); font-size:16px;}
    .chulsuk_submit_wrap #btn_chulsuk_submit {width:80px; font-size:14px;}
    .chulsuk_complete_wrap {padding-top:20px; margin-bottom:20px;}
    .chulsuk_complete_wrap .chulsuk_complete_text > div:first-child {font-size:20px;}
    .chulsuk_complete_wrap .chulsuk_complete_text > div:last-child {font-size:13px; margin-top:5px;}
    .chulsuk_list_wrap table tr th,
    .chulsuk_list_wrap table tr td {font-size:13px; padding-left:5px; padding-right:5px;}
    .chulsuk_list_wrap table tr th.chulsuk_list_comment,
    .chulsuk_list_wrap table tr td.chulsuk_list_comment {display:none;}
}

@media (max-width:576px) {
    .chulsuk_popup {max-width:calc(100% - 30px); position:absolute; top:3.5rem; left:50%; transform:translateX(-50%);}
}