/* body와 main 부분 수정 */



body {
    background-color: rgb(10, 10, 10);
}

main {
    width:100%;
    margin: 0 auto;
}

.main_whole_area6 {
    background-color: rgb(10, 10, 10);
    width:100%;
    padding-bottom:150px;
    margin-left:auto;
    margin-right: auto;
    min-height: calc(100vh - 390px); /* 630px은 헤더 높이 + 푸터 높이 값 --> 최종 헤더 높이 변경 시 값 변경 필요 */
    max-width: 1200px;
}

.slot_frame {
    border: none;
    position: absolute;
    top:0;
    left: 0;
}

.iframe_wrap {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 55%;
}

.iframe_veil {
    position: absolute;
    top:0;
    left: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 100;
    width: 100%;
    height: 100%;
    /* 초기에는 보이지 않도록 설정 */
    opacity: 0; /* 투명도를 0으로 */
    visibility: hidden; /* 시각적으로 숨김 */
    transition: opacity 0.45s ease-in-out; /* 부드러운 전환 효과 추가 */
}

.iframe_veil.show {
    opacity: 1;
    visibility: visible;
}

.veil_wrap {
    width: 100%;
    height: 100%;
    padding-left: auto;
    padding-right: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.3%;
}

.i_btn1_wrap {
    position: relative;
    width: 100%;
    max-width: 240px;
    height: 70px;
    border-radius: 6px;
    border: 1px solid #705199;
    background: linear-gradient(180deg, #7B47C3 0%, #472A70 100%);
    overflow: hidden; /* 내부 요소가 넘치지 않도록 설정 */
}

.i_btn1_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #662eb3 0%, #3f1b71 100%);
    opacity: 0;
    transition: opacity 0.2s linear;
    z-index: 1;
}

.i_btn1_wrap:hover::before {
    opacity: 1;
}

.i_btn1 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2; /* 내용이 가상 요소 위에 보이도록 설정 */
}



.ibt_area1 {
    width: 100%;
    height: 100%;
    padding: 8px 25px;
    display: flex;
    align-items: center;
    text-align: left;
}

.ibt_left1 {
    width: 38px;
    height: 39px;
    background-image: url("../img/play_icon.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.ibt_right1 {
    flex-grow: 1;
    padding-left: 10px;
}

.ibt_right1 h2 {
    font-size: 20px;
    color:#fff;
    font-family: 'SUIT';
    font-weight: 700;
}

.ibt_right1 h5 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    font-family: 'SUIT';
    font-weight: 300;
}

.ibt_area2 {
    width: 100%;
    height: 100%;
    padding: 8px 25px;
    display: flex;
    align-items: center;
    text-align: left;
}

.i_btn2 {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 2; /* 내용이 가상 요소 위에 보이도록 설정 */
}

.i_btn2_wrap {
    position: relative;
    width: 100%;
    max-width: 240px;
    height: 70px;
    border-radius: 6px;
    border: 1px solid #528186;
    background: linear-gradient(180deg, #33BDB1 0%, #2A6370 100%);
    overflow: hidden;
}

.i_btn2_wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #068f85 0%, #14353e 100%);
    opacity: 0;
    transition: opacity 0.2s linear;
    z-index: 1;
}

.i_btn2_wrap:hover::before {
    opacity: 1;
}

.ibt_left2 {
    width: 18px;
    height: 16px;
    background-image: url("../img/homepage.png");
    background-size: contain;
    background-repeat: no-repeat;
}

.ibt_right2 {
    padding-left: 10px;
}

.ibt_right2 {
    font-size: 16px;
    color:#fff;
    font-family: 'SUIT';
    font-weight: 600;
    flex-grow: 1;
}


/* 상세 페이지 영역 */

.board4 {
    width:100%;
    max-width: 1200px;
    margin-right:auto;
    margin-left:auto;
    padding-top: 50px;
}

.board5 {
    width:100%;
    max-width: 1200px;
    margin-right:auto;
    margin-left:auto;
    padding-top: 40px;
}

.board5_title {
    text-align: left;
    padding-left: 10px;
    margin-bottom: 20px;
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.board5_title h2 {
    font-size: 13px;
    color: #BD8CFF;
}

.board5_title h5 {
    font-size: 18px;
    color: #fff;
}

.b5t_up {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
}

.b5t_up h4 {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'SUIT';
    font-weight: 700;
    display: none;
}

.usn {
    display: flex;
    align-items: center;
}

.usn span {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    font-family: 'SUIT';
    margin-left: 6px;
    display: none;
}

.board4_wrap {
    width:100%;
    max-width: 1200px;
    margin:0 auto;
}

.board4_title {
    display: flex;
    width:100%;
    height:26px;
    margin-bottom:19px;
    align-items: center;
    padding-left:13px;
    gap:33px;
}

/* 상세 페이지 타이틀 영역 */

.title1 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 22px;
    font-weight: 700;
    line-height: 24px;
}

.arrow {
    width: 5px;
    height: 10px;
    background-image: url(../img/arrow_right.png);
    background-size: contain;
    background-repeat: no-repeat;
}

.sub_title1 {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 18px;
    font-weight: 400;
}

.board_whole_body {
    width:100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    /*height:100%;*/
}

/* 상세 페이지 작성 글 본문 영역 */

.bd_title_area {
    width:100%;
    height:83px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

.bd_title_area2 {
    width:100%;
    height:auto;
    border-bottom: 1px solid #fff;
}

.bdt_up {
    width:1174px;
    margin-top:14px;
    margin-left:13px;
    margin-right:13px;
    margin-bottom: 9px;
    display: flex;
    align-items: center;
}

.info_ctgry {
    color: #BD8CFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.bdt_up h2 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    margin-right: 35px;
}

.bdt_down {
    width:1174px;
    margin-left:13px;
    margin-right:13px;
    display: block;
}

.bdt_info1 {
    display: flex;
    align-items: center;
    float: left;
}

.bdt_info3 {
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #fff;
}

.info_id {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    padding-right: 15px;
    position:relative;
    border-right: 1px solid #666;
    display: flex;
    align-items: center;
}

.info_id2 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    padding-right: 15px;
    position:relative;
    border-right: 1px solid #666;
}

.info_id3 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    padding-right: 15px;
    position:relative;
}


.info_time {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 15px;
    padding-left:15px;
}

.bdt_info2 {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.45);
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 15px;
    gap:15px;
    float: right;
}

.bdt_info2 li:not(:last-child)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    background: #666;
    margin: 0 3px 0 3px;
    vertical-align: -1px;
}

.bdt_info2 span {
    padding-right:15px;
    padding-left:5px;
}

/* 실제 본문 글 보여지는 영역 */

.bd_main_area {
    width:100%;
    /*height:100%;*/
}

.bd_body {
    margin-top:45px;
    margin-left:13px;
    margin-right:13px;
    width:1174px;
    /*height:100%;*/
}

.img_area {
    width: 100%;
    height:100%;
}

.img_area img {
    max-width:850px;
}

.text_area {
    max-width:1174px;
    margin-top:35px;
}

.text_area p {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.reaction_area {
    width:502px;
    height:129px;
    margin-top: 60px;
    margin-left: 325px;
    margin-right:325px;
    border-radius: 11px;
    margin-bottom:90px;
    display: flex;
    align-items: center;
    padding-left: 87px;
    padding-right: 87px;
    justify-content: center;
}

.good_sum {
    color: #BD8CFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    margin-right:30px;
}

.good_bt {
    width: 102px;
    height: 68px;
    border-radius: 8px;
    border: 1px solid #BD8CFF;
    background: #8850D6;
    margin-right:14px;
    display: flex;
    justify-content: center;
    transition:all 0.15s linear;
}

.good_bt:hover {
    background:#7336c9;
}

.good img {
    width:21px;
    height:20px;
    margin-top:12px;
    margin-bottom:5px;
}

.good p {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.bad_bt {
    width: 102px;
    height: 68px;
    border-radius: 8px;
    border: 1px solid #3D3D3D;
    background: #1C1C1C;
    display: flex;
    justify-content: center;
    transition:all 0.15s linear;
}

.bad_bt:hover {
    background: #111111;
}

.bad img {
    width:21px;
    height:20px;
    margin-top:12px;
    margin-bottom:5px;
}

.bad p {
    color: rgba(255, 255, 255, 0.37);
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.bad_sum {
    color: #848385;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-left:30px;
}

.bd_move {
    width:100%;
    margin-top:30px;
    margin-bottom:33px;
}

.move {
    display: flex;
    align-items: center;
    gap:8px;
    justify-content: flex-end;
}

.list {
    width: 75px;
    height: 35px;
    border-radius: 6px;
    border: 0.6px solid #3D3D3D;
    background: #1C1C1C;
    color: #7E7E7E;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s linear;
}

.list:hover {
    background:#111111;
}

.before {
    width: 98px;
    height: 35px;
    border-radius: 6px;
    border: 0.6px solid #3D3D3D;
    background: #1C1C1C;
    color: #adadad;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s linear;
}

.before:hover {
    background:#111111;
}

.after {
    width: 98px;
    height: 35px;
    border-radius: 6px;
    border: 0.6px solid #3D3D3D;
    background: #1C1C1C;
    color: #adadad;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s linear;
}

.after:hover {
    background:#111111;
}


/* 상세 페이지 댓글 영역 */

.bd_comment_area {
    width:100%;
    /*height:100%;*/
    margin-top:75px;
    border-top: 1px solid #505050;
}

.comment_sum_area {
    height:60px;
    width:100%;
    padding-top:15px;
    padding-bottom:15px;
    padding-left:25px;
    padding-right:25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #505050;
}

.comment_sum_area p {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
}

.comment_sum_area span {
    color: #BD8CFF;
    font-family: 'SUIT';
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    padding-left: 5px;
}

.cmt_area {
    /*width:100%;*/
    /*height:100%;*/
    list-style: none;
    padding-left: 0;
    margin: 0;
}

/* 각 댓글 아이템 (공통 스타일) */
.cmt {
    padding: 15px 25px; /* HTML의 padding-left:25px; 등과 일치하도록 조정 */
    background-color: #181818; /* 기본 댓글 배경 (댓글 작성 영역과 동일하게 통일) */
    color: #FFF; /* 기본 폰트 색상 */
    /* height는 콘텐츠에 따라 늘어나도록 고정 제거 권장 */
    /* height:130px; */
}

/*.cmt {*/
/*    width:100%;*/
/*    height:130px;*/
/*    border-top: 1px solid #a5a5a5;*/
/*}*/

/* 댓글 깊이별 들여쓰기 및 스타일 (가장 중요!) */
.comment-depth-0 {
    /* 최상위 댓글 (기본) */
    margin-left: 0;
    /* 최상위 댓글 아래에 대댓글이 있을 경우, 시각적 여백 추가 */
    margin-bottom: 10px; /* 대댓글 그룹과의 시각적 분리 */
}

.comment-depth-1 {
    /* 1단계 대댓글 (대댓글) */
    padding-left: 20px; /* 막대와 내용 사이 간격 */
    background-color: #1e1e1e; /* 배경색으로 구분 */
    margin-top: 10px; /* 위쪽 여백 */
    margin-bottom: 10px; /* 아래쪽 여백 */
    position: relative;
    margin-left: 40px;
}

.comment-depth-1 .cmt_wrap::after {
    content:'';
    display: block;
    width: 15px;
    height: 10px;
    position: absolute;
    left:-25px;
    top:20px;
    background-image: url(../img/reply_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.comment-depth-2 {
    /* 2단계 대대댓글 (대댓글의 대댓글) */
    padding-left: 20px;
    background-color: #232323; /* 더 진한 배경색 */
    margin-top: 10px;
    margin-bottom: 10px;
    position: relative;
    margin-left: 80px;
}


.comment-depth-2 .cmt_wrap::after {
    content:'';
    display: block;
    width: 15px;
    height: 10px;
    position: absolute;
    left:-25px;
    top:20px;
    background-image: url(../img/reply_icon.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.comment-depth-2 .modify {
    margin-left: 15px;
}

/*.cmt_wrap {*/
/*    width:100%;*/
/*    height:100%;*/
/*    padding-top: 23px;*/
/*    padding-left:25px;*/
/*    padding-right:25px;*/
/*    padding-bottom: 15px;*/
/*}*/

.cmt_info {
    width:100%;
    height:24px;
    margin-bottom: 15px;
    align-items: center;
}

.left {
    float:left;
    display: flex;
    align-items: center;
}

.left h2 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 16.5px;
    font-weight: 500;
    margin-right: 18px;
    display: flex;
    align-items: center;
}

.left h5 {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    margin-right: 15px;
}

.cmt_info .right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.modify, .delete, .btn_reply_comment {
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    text-decoration: none; /* 밑줄 제거 */
    white-space: nowrap; /* 텍스트 줄바꿈 방지 */
}

.btn_reply_comment {
    margin-left: 15px;
}

.modify {
    color: rgba(255, 255, 255, 0.79);
}

.delete {
    color: rgba(255, 255, 255, 0.49);
}

.btn_reply_comment { /* 답글 달기 버튼 */
    color: #BD8CFF; /* 강조 색상 */
}

.cmt_body {
    width:100%;
    /*max-height:48px;*/
    /*overflow: hidden;*/
    margin-top: 10px; /* 정보 영역과 내용 영역 분리 */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

.cmt_body .replied-nickname{
    color: #9797A6;
    flex-shrink: 0;
}

.cmt_body p {
    color: #FFF;
    font-family: SUIT;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    word-wrap: break-word; /* 긴 단어 강제 줄바꿈 */
    margin-left: 10px;
}

.cmt_modify {
    border-top: 1px solid #a5a5a5;
    height:240px;
}

.cmtm_area {
    height: auto;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    background: #1C1C1C;
    border-radius: 10px;
}

.cmtm_info {
    display: flex;
    height:40px;
    padding-top: 25px;
    margin-bottom: 22px;
    color:#BD8CFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-weight: 600;
    margin-left: 0;
    padding-left: 10px;
}

.cmtm_info img {
    width:18px;
    height:17px;
    margin-right: 10px;
}

.cmtm_write_area {
    width:100%;
    height: 50px;
    border-radius: 6px;
    background: #242424;
    display: flex;
}

.input_text {
    width:900px;
    background:transparent;
    border:none;
    margin-left:20px;
    margin-right:44px;
    color:#fff;
    font-size:14px;
    font-weight:400;
    font-family: 'SUIT';
    flex-grow:1;
}

.cancle {
    width: 68px;
    height: 50px;
    border-radius: 6px 0px 0px 6px;
    background: #535353;
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: SUIT;
    font-size: 15px;
    font-weight: 700;
    border:none;
    transition: all 0.1s linear;
}

.cancle:hover {
    background:#3d3d3d;
}

.save {
    width: 68px;
    height: 50px;
    border-radius: 0px 6px 6px 0px;
    background: #8850D6;
    color:white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: SUIT;
    font-size: 15px;
    font-weight: 700;
    border:none;
    transition: all 0.1s linear;
}

.save:hover {
    background:#7d3cd8;
}

.cmt_write_area {
    margin-top:40px;
    height: 160px;
    background: #131313;
    padding-left:15px;
    padding-right:15px;
    border-radius:8px;
}

.cmtw_info {
    display: flex;
    margin-left:26px;
    height:40px;
    padding-top: 30px;
    margin-bottom: 32px;
    color:#BD8CFF;
    font-family: 'SUIT';
    font-size: 16px;
    font-weight: 600;
}

.cmtw_info img {
    width:18px;
    height:17px;
    margin-right: 10px;
}

.cmt_write {
    margin-left:26px;
    margin-right:26px;
    width:1098px;
    height: 50px;
    border-radius: 6px;
    background: #242424;
    display: flex;
}

.input_text2 {
    width:900px;
    background:transparent;
    border:none;
    margin-left:20px;
    margin-right:130px;
    color:#fff;
    font-size:14px;
    font-weight:400;
    font-family: 'SUIT';
}

/* 대댓글 작성 폼 영역 (기본적으로는 display: none;) */
.reply_form_area {
    margin-top: 15px; /* 댓글 본문과의 간격 */
    margin-bottom: 15px;
    padding: 15px;
    background: #1C1C1C; /* .cmtm_area와 동일한 배경색 */
    border-radius: 10px; /* .cmtm_area와 동일한 둥근 모서리 */
    /* border: 1px solid #333; */ /* 선택적 테두리 */
}

.reply_form_area .reply_write_area {
    display: flex; /* flexbox 레이아웃 */
    width: 100%;
    height: auto; /* 내용에 따라 높이 조절 */
    border-radius: 6px;
    background: #242424; /* .cmtm_write_area와 동일한 배경색 */
    /* overflow: hidden; */ /* flex item에 영향 줄 수 있으므로 제거 고려 */
}

/*.reply_form_area textarea.reply_content {*/
/*    flex-grow: 1; !* 남은 공간을 textarea가 채우도록 *!*/
/*    background: transparent;*/
/*    border: none;*/
/*    padding: 10px 20px; !* 넉넉한 패딩 *!*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*    font-weight: 400;*/
/*    font-family: 'SUIT';*/
/*    resize: vertical; !* 사용자가 세로 크기 조절 가능 *!*/
/*    min-height: 50px; !* 최소 높이 *!*/
/*}*/

.reply_content_editable {
    flex-grow: 1;
    min-height: 50px;
    padding: 10px 20px;
    border: 1px solid #ccc; /* 테두리 */
    background-color: transparent; /* 배경 */
    color: #fff; /* 기본 글자색 */
    font-family: 'SUIT';
    font-size: 14px;
    line-height: 1.5;
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤바 */
}

/* @닉네임 하이라이팅 스타일 */
.highlight-nickname {
    color: #888; /* 회색 */
    font-weight: bold;
}

/* 답글 등록/취소 버튼 - 기존 .cancle, .save 클래스 재활용 */
.reply_form_area .btn_submit_reply {
    /* .save 클래스와 함께 사용 (예: class="btn_submit_reply save") */
    /* width와 height는 .save 클래스에서 이미 정의되어 있을 것입니다. */
    border-radius: 0px 6px 6px 0px; /* 오른쪽 버튼만 둥글게 */
    flex-shrink: 0; /* 버튼이 줄어들지 않도록 */
}

.reply_form_area .btn_cancel_reply {
    /* .cancle 클래스와 함께 사용 (예: class="btn_cancel_reply cancle") */
    /* width와 height는 .cancle 클래스에서 이미 정의되어 있을 것입니다. */
    border-radius: 6px 0px 0px 6px; /* 왼쪽 버튼만 둥글게 */
    flex-shrink: 0;
    margin-right: 0; /* flexbox 사용 시 마진 조정 */
    margin-left: auto; /* 오른쪽으로 자동 이동 (save 버튼 옆에 붙도록) */
}

/* 글 작성 영역 시작 */

.notice_area {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    background: #181818;
    display: flex;
    align-items: center;
}

.notice {
    display: flex;
}

.notice img {
    width:18px;
    height: 18px;
    margin-left:20px;
    margin-right: 22px;
}

.notice p {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.table_body {
    width:100%;
    max-width: 1200px;
    margin-left:auto;
    margin-right: auto;
    margin-top: 40px;
}

td {
    padding-left: 20px;
}

table {
    width:100%;
    height: 558px;
    table-layout: fixed;
}

colgroup {
    width: 800px;
}

.first_th2 {
    border-top: solid 1px #2A2A2A;
    height: 70px;
}

.first_td2 {
    border-top: solid 1px #2A2A2A;
    padding-left: 20px;
}

.first_th {
    height: 70px;
}

.first_td {
    padding-left: 20px;
}


.title_write_wrap {
    border-radius: 6px;
    border: 0.5px solid #3D3D3D;
    background: #101010;
    height: 40px;
    width:100%;
    display: flex;
    align-items: center;
}

.filter_area {
    width:76px;
    height:30px;
    background-color: rgba(99, 51, 167, 1);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.filter:hover {
    cursor: pointer;
}

.filter {
    background-color: transparent;
    border: transparent;
    appearance: none;
    width: 76px;
    height:30px;
    /*padding-left: 18px;*/
    color:white;
    font-family: 'SUIT';
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

.filter option {
    background-color: #0f0911;
    border:transparent;
    color:white;
    font-family: 'SUIT';
    font-size: 15px;
    font-weight: 400;
}

.title_write {
    border:none;
    background:transparent;
    padding-left:10px;
    color:#fff;
    font-size:15px;
    font-weight:400;
    font-family: 'SUIT';
    width: 100%;
}

.title_write::placeholder {
    color:#757575;
    font-size:15px;
    font-weight:400;
    font-family: 'SUIT';
}

th {
    border-bottom: 1px solid #2A2A2A;
    background: #0D0D0D;
    color:#fff;
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}

td {
    border-bottom: 1px solid #2A2A2A;
}


.second_th {
    height:500px;
}

.title_write_wrap2 {
    border-radius: 6px;
    width: 100%;
    height: 500px;
    display: flex;
}


.contents_write {
    border:none;
    background:transparent;
    width: 1008px;
    height: 150px;
    margin-left:10px;
    margin-right:10px;
    margin-top:10px;
    color:#fff;
    font-size:15px;
    font-weight:400;
    font-family: 'SUIT';
}

.contents_write::placeholder {
    color:#757575;
    font-size:15px;
    font-weight:400;
    font-family: 'SUIT';
}

.third_th {
    height:278px;
}

.file_upload_area {
    border-radius: 6px;
    border: 0.5px solid #3D3D3D;
    background: #101010;
    width:100%;
    height:40px;
    display: flex;
    align-items: center;
}


.file_upload {
    color: #c4c4c4;
    font-family: SUIT;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    display: flex;
    align-items: center;
    width: 100%;
}

input[type=file]::file-selector-button {
    border-radius: 6px 0px 0px 6px;
    border: 0.5px solid #3D3D3D;
    background: #282828;
    width: 112px;
    height: 40px;
    margin-right: 15px;
    cursor: pointer;
    color: #FFF;
    font-family: SUIT;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.file_list1 {
    width: 1000px;
    height: 25px;
    margin-top:40px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.file_list1 li span {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.file_list2 {
    width: 1000px;
    height: 25px;
    margin-left: 20px;
    margin-top:10px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.file_list2 li span {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.btn_delete {
    background:transparent;
    border: none;
    width:16px;
    height:16px;
}

.btn_delete img {
    width:16px;
    height:16px;
}

.file_info {
    margin-top: 60px;
    display: flex;
    align-items: center;
    gap:53px;
    margin-bottom:25px;
}

.file_info li {
    color: #616161;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

/* 취소 및 등록 버튼 영역 */

.button_area {
    width: 100%;
    height: 45px;
    margin-top: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

.bt_cancle {
    width: 79px;
    height: 45px;
    border-radius: 6px;
    border: 0.5px solid #3D3D3D;
    background: #101010;
    transition: all 0.15s linear;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bt_cancle:hover {
    background:#161616;
}

.bt_cancle p {
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.bt_register {
    width: 104px;
    height: 45px;
    border-radius: 6px;
    border: 0.5px solid #BD8CFF;
    background: #8850D6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s linear;
}

.bt_register:hover {
    background: #7135c5;
}

.bt_register img {
    width:16px;
    height:11px;
    margin-right:9px;
}

.bt_register p {
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

/* 마이 페이지 영역 */

.my_info {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
    /*height: 100%;*/
}

/* 내 정보 */

.info_wrap {
    width: 100%;
    height: auto;
    border-radius: 15px;
    border: 1px solid rgba(240, 240, 240, 0.30);
    background: rgba(255, 255, 255, 0.08);
    padding-left: 25px;
    padding-right: 25px;
}

.my_title {
    width: 100%;
    margin-top: 30px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.30);
    height: 41px;
    display: flex;
    align-items: center;
}

.my_title2 {
    width: 100%;
    margin-top: 30px;
    border-bottom: 1px solid rgba(240, 240, 240, 0.30);
    height: 41px;
    display: flex;
    align-items: center;
    gap: 4%;
    padding-left: 11px;
}

.my_title2 a {
    margin-bottom: 19px;
}

.my_title span {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 19px;
    padding-left: 11px;
}

.data_area {
    width: 100%;
    padding-left: 15px;
    margin-top: 32px;
    height: auto;
}

.da_0 {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.level_area6 {
    width: 32px;
    height: 32px;
}

.level_area6 img {
    width: 32px;
    height: 31px;
}

.class_level {
    display: flex;
    margin-top: 10px;
    margin-bottom: 10px;
    align-items: center;
    gap: 30px;
}

.my_class {
    display: flex;
    align-items: center;
}

.my_class h5 {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    margin-right: 4px;
}

.my_class span {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.my_level {
    display: flex;
    align-items: center;
}

.my_level h5 {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    margin-right: 4px;
}

.my_level span {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.exp_info {
    display: flex;
    align-items: center;
}

.exp_bar2 {
    width: 238px;
    height: 20px;
    border-radius: 6px;
    background: rgb(40, 40, 43);
    display: flex;
    align-items: center;
    padding-left: 10px;
    justify-content: space-between;
    padding-right: 10px;
    margin-bottom: 10px;
}

.exp_info h6 {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    margin-left: 6px;
}

.da_1 {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}


.da_2 {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}

.da_3 {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}

.da_4 {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}

.da_5 {
    width: 100%;
    height: 66px;
    margin-bottom: 50px;
}

.da_title {
    color: #d3d3d3;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 12px;
}

.da_info_wrap {
    display: flex;
    width: 100%;
    height: 36px;
}

.da_info {
    width: 238px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #4A494B;
    display: flex;
    align-items: center;
    padding-left: 14px;
    justify-content: space-between;
    padding-right: 14px;
}

.da_info span {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
}

.da_info h5 {
    color: rgba(255, 255, 255, 0.60);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.sub_info {
    display: flex;
    width: 200px;
    height: 36px;
    align-items: center;
    padding-left: 20px;
}

.sub_info h5 {
    color: rgba(255, 255, 255, 0.51);
    font-family: 'SUIT';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    padding-right: 5px;
}

.sub_info span {
    color: rgba(255, 255, 255, 0.51);
    font-family: SUIT;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.pt_charge {
    width: 90px;
    height: 32px;
    border-radius: 4px;
    background: #3888A6;
    border: none;
    color: #FFF;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    transition: all 0.2s linear;
}

.pt_charge:hover {
    background: #296d86;
}

.withdraw {
    width: 90px;
    height: 32px;
    border-radius: 4px;
    background: #7140B5;
    border: none;
    color: #FFF;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    transition: all 0.2s linear;
}

.withdraw:hover {
    background: #5f359b;
}

/* 비밀번호 변경 영역 */

.pw_change {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 35px;
}

.pw_wrap {
    width: 100%;
    height: 354px;
    border-radius: 15px;
    border: 1px solid rgba(240, 240, 240, 0.30);
    background: rgba(255, 255, 255, 0.08);
    padding-left: 25px;
    padding-right: 25px;
}

.pw_area {
    width: 100%;
    padding-left: 15px;
    margin-top: 32px;
    height: 202px;
}

.pw_now {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}

.pw_title {
    color: #d3d3d3;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 12px;
}

.now_pw {
    width: 238px;
    height: 36px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #4A494B;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    color: #fff;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.pw_after {
    width: 100%;
    height: 66px;
    margin-bottom: 20px;
}

.new_pw {
    width: 238px;
    height: 36px;
    border-radius: 4px;
    background-color: transparent;
    border: 1px solid #4A494B;
    align-items: center;
    padding-left: 14px;
    padding-right: 14px;
    color: #fff;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
}

.pw_btn {
    width: 90px;
    height: 32px;
    border-radius: 4px;
    background: #7140B5;
    border: none;
    color: #FFF;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    transition: all 0.2s linear;
}

.pw_btn:hover {
    background: #5f359b;
}

.exit_btn_wrap {
    width: 100%;
    height: 36px;
    margin-top: 35px;
    display: flex;
    justify-content: flex-end;
    padding-right: 10px;
    padding-left: 10px;
}

.exit_btn {
    width: 93px;
    height: 36px;
    border-radius: 4px;
    background: #302F2F;
    color: #9D9D9D;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    border: none;
    transition: all 0.2s linear;
}

.exit_btn:hover {
    background: #222121;
}


/* 푸터 영역 */

footer {
    width:100%;
}

.footer_area5 {
    width:100%;
    margin:0 auto;
    height:180px;
    background-color:#0f0911;
}

.footer_area2 {
    width:100%;
    margin:0 auto;
    height:180px;
    background-color:#0f0911;
}

.footer_wrap {
    width:100%;
    height:180px;
    justify-content: center;
    float:left;
    margin:0 auto;
}

.footer_up {
    width: 100%;
    max-width: 690px;
    height: 30px;
    display: flex;
    align-items: center;
    margin-top:58px;
    margin-left:auto;
    margin-right:auto;
    justify-content: center;
}

.footer_down {
    width: 690px;
    height: 24px;
    margin-top:30px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.logo_gray {
    width:122px;
    height:27px;
    background-image: url(../img/arena_logo_gray.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 70px;
}

.footer_text {
    display: flex;
    gap:70px;
}

.footer_text a{
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;

}

.footer_down {
    color: rgba(255, 255, 255, 0.50);
    text-align: center;
    font-family: 'SUIT';
    font-size: 12px;
    font-weight: 300;
    line-height: 24px;
}

/* 새로 추가되는 css */

.bd_body2 {
    margin-top:45px;
    width: 100%;
}

.move2 {
    display: flex;
    align-items: center;
    gap:8px;
    justify-content: flex-end;
    padding-right: 13px;
    margin-top: 80px;
}

.ranking_wrap {
    width: 100%;
}

.top_my {
    width: 100%;
    display: flex;
    gap: 10px;
    height: 52px;
}

.top_info {
    display: flex;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #7B47C3 0%, rgba(71, 42, 112, 0.30) 100%);
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
}

.notp {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    margin-right: 23px;
}

.notp::after {
    content: '';
    display: block;
    background-image: url(../img/arrow_right.png);
    width: 8px;
    height: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 80px;
}

.left_info {
    width: 100%;
    display: flex;
}

.price_data3 {
    display: flex;
    align-items: center;
}

.top_user_id {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.t_price {
    text-align: right;
    font-family: 'SUIT';
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(90deg, #8EE1FF 0%, #B9D7FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 5px;
}

.price_data3 h5 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}


.my_infor {
    display: flex;
    width: 100%;
    border-radius: 6px;
    background: linear-gradient(90deg, #33BDB1 0%, rgba(42, 99, 112, 0.30) 100%);
    align-items: center;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
}

.my_rank {
    display: flex;
    align-items: center;
}

.mymy {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    margin-right: 23px;
}

.mymy::after {
    content: '';
    display: block;
    background-image: url(../img/arrow_right.png);
    width: 8px;
    height: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 22px;
    left: 75px;
}

.mrank_num {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    margin-right: 5px;
}

.my_rank h4 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.t_price2 {
    text-align: right;
    font-family: 'SUIT';
    font-size: 16px;
    font-style: normal;
    font-weight: 800;
    background: linear-gradient(90deg, #1bf094 0%, #9DFFC6 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-right: 5px;
}


.all_rank {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 6px;
    margin-top: 10px;
}

.rank_1_wrap {
    border-radius: 6px;
    background: rgba(23, 19, 31, 0.77);
    height: auto;
}

.rank_2_wrap {
    border-radius: 6px;
    background: rgba(23, 19, 31, 0.77);
    height: auto;
}

.rank_3_wrap {
    border-radius: 6px;
    background: rgba(23, 19, 31, 0.77);
    height: auto;
}

.rank_1_wrap h2 {
    width: 100%;
    color: #C4C4C4;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 15px;
}

.rank_2_wrap h2 {
    width: 100%;
    color: #C4C4C4;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 15px;
}

.rank_3_wrap h2 {
    width: 100%;
    color: #C4C4C4;
    font-family: SUIT;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    padding-left: 24px;
    padding-top: 16px;
    padding-bottom: 15px;
}

.ranking_1 {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap:6px;
}

.ranking_2 {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap:6px;
}

.ranking_3 {
    width: 100%;
    padding-left: 6px;
    padding-right: 6px;
    display: flex;
    flex-direction: column;
    gap:6px;
}

.ranking_item {
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    height: 50px;
    align-items: center;
    padding-left: 18px;
    padding-right: 18px;
}

.all_price_data {
    display: flex;
    align-items: center;
}

.all_user_id {
    width: 100%;
}

.ranking_item span {
    color: #BD8CFF;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    margin-right: 10px;
}

.all_user_id {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.all_price_data span {
    color: #FFF;
    text-align: right;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    text-align: right;
}

.all_price_data h6 {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

.page_btn_area {
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    height: 24px;
    justify-content: center;
    gap: 6px;
}

.left_pg_btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #3D3D3D;
    background-color: #1C1C1C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s linear;
}

.left_pg_btn:hover {
    background-color: #252525;
}

.left_pg_btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-right: 5px solid white;
}

.right_pg_btn {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 1px solid #3D3D3D;
    background-color: #1C1C1C;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s linear;
}

.right_pg_btn:hover {
    background-color: #252525;
}

.right_pg_btn::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 5px solid white;
}

/* 페이지네이션 관련 추가 CSS */
.ranking_1, .ranking_2, .ranking_3 {
    min-height: 224px; /* 4개 항목의 높이(50px) + 간격(6px*3) = 224px */
}

/* 비활성화된 버튼 스타일 */
.left_pg_btn.disabled, .right_pg_btn.disabled {
    opacity: 0.5;
    cursor: default;
}

/* 처음에는 첫 4개만 표시, 나머지는 숨김 */
.ranking_item {
    display: none;
}

.ranking_item.active {
    display: flex;
}

/* 반응형 break point 1 - 1200px */

/* 마이페이지 */

@media all and (max-width:1200px) {
    .board4 {
        max-width: 800px;
        padding-top: 50px;
    }

    .main_whole_area6 {
        min-width: 100%;
    }

    .title1 {
        font-size: 20px;
        font-weight: 700;
    }

    .my_title span {
        font-size: 18px;
    }
}

/* 게시판 상세 */

@media all and (max-width:1200px) {
    .bdt_up {
        width: 100%;
        padding-top: 14px;
        padding-left: 13px;
        padding-right: 13px;
        padding-bottom: 9px;
        margin: 0;
    }

    .bdt_down {
        width: 100%;
        height: 15px;
        padding-left: 13px;
        padding-right: 13px;
        margin: 0;
        margin-bottom: 14px;
    }

    .bd_title_area {
        height: auto;
    }

    .bd_body {
        width: 100%;
        padding-left: 13px;
        padding-right: 13px;
        margin-left: 0;
        margin-right: 0;
    }

    .reaction_area {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        gap:2%;
        height: auto;
    }

    .good_bt {
        margin-right: 0;
    }

    .good_sum {
        margin-right: 0;
    }

    .bad_sum {
        margin-left: 0;
    }

    .cmtw_info {
        margin-left: 0;
        margin-bottom: 32px;
        height: auto;
    }

    .cmt_write {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .text_area p img {
        max-width: 90%;
        height: auto;
    }

    .input_text2 {
        margin-right: 0;
        margin-left: 0;
        padding-left: 20px;
        width: 100%;
    }
}

/* 슬롯 상세 */

@media all and (max-width:1200px) {
    .board5 {
        max-width: 800px;
    }
}
/* 게시판 글 작성 */

@media all and (max-width:1200px) {
    .file_info {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 4%;
        margin-bottom: 20px;
        align-items: flex-start;
    }
}
@media all and (max-width:840px) {
    .ranking_item {
        padding-left: 14px;
        padding-right: 14px;
    }

    .ranking_item span {
        margin-right: 8px;
    }

    .rank_1_wrap h2 {
        padding-left: 20px;
    }

    .rank_2_wrap h2 {
        padding-left: 20px;
    }

    .rank_3_wrap h2 {
        padding-left: 20px;
    }
}

/* 게시판 글 작성 */

@media all and (max-width:840px) {
    .second_th {
        height: auto;
    }

}

@media all and (max-width:800px) {
    .board4 {
        max-width: 640px;
        padding-top: 40px;
    }

    .main_whole_area6 {
        min-height: calc(100vh - 300px);
    }
}

@media all and (max-width:800px) {
    .all_rank {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 6px;
    }
}

/* 게시판 상세 */

@media all and (max-width:800px) {
    .text_area p img {
        max-width: 100%;
        height: auto;
    }

    .board4_title {
        gap:5%;
    }

    .input_text {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0;
        margin-right: 0;
    }

    .save {
        font-weight: 500;
        font-size: 14px;
    }

    .cancle {
        font-weight: 500;
        font-size: 14px;
    }

    .cmtm_area {
        height: auto;
        padding-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .cmtm_info {
        margin-left: 0;
        padding-left: 10px;
        padding-top: 20px;
    }

    .cmtm_write_area {
        margin-left: 0;
        margin-right: 0;
    }

    .comment-depth-1 {
        margin-left: 20px;
    }

    .comment-depth-2 {
        margin-left: 40px;
    }

    .comment-depth-1 .cmt_wrap::after {
        left: -18px
    }

    .comment-depth-2 .cmt_wrap::after {
        left: -18px;
    }

}

@media all and (max-width:800px) {
    .board5 {
        max-width: 640px;
    }

    .iframe_wrap {
        padding-bottom: 80%;
    }

    .board5_title h5 {
        font-size: 16px;
        color: #fff;
    }

    .ibt_right1 h2 {
        font-size: 18px;
    }

    .ibt_right1 h5 {
        font-size: 12px;
    }

    .b5t_up h4 {
        display: block;
    }

    .usn span {
        display: block;
    }

}

@media all and (max-width:640px) {
    .main_whole_area6 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media all and (max-width:640px) {
    .iframe_wrap {
        padding-bottom: 0;
        height: 70%;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }
}

@media all and (max-width:640px) {
    .top_my {
        flex-direction: column;
        height: auto;
    }

    .top_info {
        height: 52px;
    }

    .my_infor {
        height: 52px;
    }
}

@media all and (max-width:500px) {
    .all_rank {
        grid-template-columns: repeat(1, 1fr);
        row-gap: 6px;
    }

    .top_info {
        padding-left: 14px;
        padding-right: 14px;
    }

    .my_infor {
        padding-left: 14px;
        padding-right: 14px;
    }

    .notp {
        margin-right: 15px;
    }

    .mymy {
        margin-right: 15px;
    }

    .notp::after {
        display: none;
    }

    .mymy::after {
        display: none;
    }


}

/* 게시판 상세 */

@media all and (max-width:500px) {
    .bdt_down {
        display: flex;
        flex-direction: column;
        gap: 11px;
        height: auto;
    }

    .save {
        flex-shrink: 0;
        width: auto;
    }

    .cancle {
        flex-shrink: 0;
        width: auto;
    }

    .cmt_info {
        display: flex;
    }

    .comment-depth-0 {
        padding-left: 15px;
        padding-right: 15px;
    }


    .comment-depth-1 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .comment-depth-2 {
        padding-left: 15px;
        padding-right: 15px;
    }

    .comment_sum_area p {
        font-size: 16px;
    }

    .comment_sum_area span {
        font-size: 15px;
    }

    .left h2 {
        font-size: 14px;
    }

    .left h5 {
        font-size: 13px;
    }

    .modify, .delete, .btn_reply_comment {
        font-size: 12.5px;
    }

    .comment_sum_area {
        padding-left: 15px;
        padding-right: 15px;
    }

    .cmt_body p {
        font-size: 14px;
    }

    .cmt_body .replied-nickname {
        font-size: 13px;
    }

    .cmtm_info {
        font-size: 13px;
    }

    .cmtm_info img {
        width: 14px;
        height: 13px;
    }

    .text_area p {
        font-size: 14px;
    }

    .bdt_info2 {
        font-size: 12.5px;
    }

    .cmt_info {
        flex-direction: column;
        align-items: normal;
        gap: 8px;
    }

    .cmt_ifno .right {
        align-items: normal;
    }

    .btn_reply_comment {
        margin-left: 0;
    }

    .comment-depth-2 .modify {
        margin-left: 0;
    }

    .cmt_wrap {
        height: auto;
    }

    .cmt_body {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .cmt_body p {
        margin-left: 0;
    }

    .cmt_body .replied-nickname {
        margin-right: 4px;
    }

    .reply_form_area {
        margin:0;
        padding: 0;
    }

    .sub_title1 {
        font-size: 16px;
    }

    .cmtm_area {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
        background: transparent;
    }

    .cmtm_info {
        margin-bottom: 11px;
    }

    .comment-depth-2 {
        background-color: #2a2a2b;
        margin-left: 20px;
    }

    .input_text {
        width: 100%;
        height: 60%;
    }

    .cmtw_info img {
        width: 15px;
        height: 14px;
    }

    .cmtw_info {
        font-size: 15px;
        align-items: center;
        padding-top: 20px;
    }

}
@media all and (max-width:530px) {
    .bdt_info3 {
        flex-direction: column;
        align-items: normal;
        gap: 5px;
    }

    .info_id2 {
        color: #FFF;
        font-family: 'SUIT';
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        position:relative;
        border-right: none;
    }

    .info_id3 {
        color: #FFF;
        font-family: 'SUIT';
        font-size: 14px;
        font-style: normal;
        font-weight: 300;
        position:relative;
    }
}



@media all and (max-width:430px) {
    .info_wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

    .pw_wrap {
        padding-left: 10px;
        padding-right: 10px;
    }

    .data_area {
        padding-left: 10px;
    }

    .pw_area {
        padding-left: 10px;
    }

}

@media all and (max-width:430px) {
    .title1 {
        font-size: 18px;
    }

    .col_1 {
        width: 20% !important;
    }

    .col_2 {
        width: 80% !important;
    }

    th {
        font-size: 14px;
    }

    .table_body {
        margin-top: 20px;
    }

    .file_info li {
        font-size: 14px;
    }

    .file_list1 li span {
        font-size: 13px;
    }

}



@media all and (max-width:430px) {
    .all_user_id {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 190px;
    }

    .bdt_up h2 {
        font-size: 16px;
    }

    .top_info {
        height: 42px;
    }

    .my_infor {
        height: 42px;
    }

    .board4_title {
        padding-left: 8px;
    }
}

@media all and (max-width:430px) {
    .iframe_wrap {
        height: 60%;
    }

    .notice p{
        padding-left: 13px;
    }

    .notice img {
        display: none;
    }

}

@media all and (max-width:375px) {
    .da_info_wrap {
        flex-direction: column;
        height: auto;
    }

    .sub_info {
        padding-left: 0;
        height: auto;
        margin-top: 15px;
    }

    .da_1 {
        height: auto;
    }

    .da_4 {
        height: auto;
    }
}

@media all and (max-width:340px) {

    .col_1 {
        width: 12% !important;
    }

    .col_2 {
        width: 85% !important;
    }
}

/* 새로 추가할 css 마이 페이지 내 활동 관련 */

.title1_off {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;
    transition: all 0.3s linear;
}

.title1_off:hover {
    color: #fff;
}

.search_area2 {
    width:306px;
    height:35px;
    display: flex;
    border-radius: 6px;
    border: 0.5px solid #3D3D3D;
    align-items: center;
}

.s_filter2 {
    border: none;
    background: transparent;
    margin-left:5px;
    margin-right:10px;
    width:66px;
    height:28px;
    padding-left:6px;
    padding-right:3px;
    appearance: none;
    background-image:url(../img/down_arrow.png);
    background-repeat: no-repeat;
    background-position: 96% center;
    background-size: 8px;
    font-family: 'SUIT';
    color:#fff;
    font-size:14px;
    font-weight: 400;
}

.s_filter2 option {
    background-color: #0f0911;
    color:#fff;
    font-family: 'SUIT';
    font-size:14px;
    font-weight:400;
}

.input {
    border: none;
    background: transparent;
    color:#fff;
    font-family: 'SUIT';
    font-size:14px;
    font-weight: 400;
    width: 180px;
}

.search_input2 button {
    border:none;
    background: transparent;
    background-image:url(../img/search_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width:13px;
    height:13px;
    margin-bottom: 3px;
}

.my_act_wrap {
    width: 100%;
    padding-left: 15px;
    margin-top: 32px;
    height: auto;
    margin-bottom: 20px;
}

.my_post {
    height: auto;
}

.my_post_wrap {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.my_post th {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    padding-bottom: 10px;
}


.pagination {
    margin-bottom: 50px;
    margin-top: 50px;
}


/* 댓글 알림 관련 CSS 시작 */
.mttl_on {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 19px;
}

.mttl_off {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    margin-bottom: 19px;
    transition: all 0.25s linear;
}

.mttl_off:hover {
    color: #fff;
}

.my_comment_wrap {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.my_comment_list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.mcm_whole {
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #131212;
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 25px;
    padding-right: 25px;
    transition: all 0.25s linear;
}

.mcm_whole:hover {
    background: #171717;
}

.mcm_1 {
    display: flex;
    flex:1;
    align-items: center;
}

.mcm_no {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    width: 4%;
}

.mcm_body {
    display: flex;
    width: 100%;
}

.mcm_body h4 {
    color: rgba(255, 255, 255, 0.76);
    font-family: SUIT;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
}

.mcm {
    color: #FFF;
    font-family: SUIT;
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
    max-width: 625px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mcm_date {
    color: rgba(255, 255, 255, 0.37);
    text-align: center;
    font-family: SUIT;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    width: 10%;
}

@media all and (max-width:1200px) {
    .mttl_on {
        color: #FFF;
        font-family: 'SUIT';
        font-size: 18px;
    }

    .mttl_off {
        font-size: 18px;
    }

    .mcm_body {
        flex-direction: column;
        gap: 3px;
    }

    .mcm {
        margin-left: 0;
        margin-right: 0;
        max-width: 550px;
    }

    .mcm_date {
        width: 15%;
    }

    .mcm_no {
        width: 6%;
    }
}

@media all and (max-width:800px) {
    .mcm_1 {
        flex-direction: column;
    }

    .mcm_body {
        justify-content: center;
        align-items: center;
        margin-top: 8px;
    }

    .mcm_no {
        display: none;
    }

    .mcm_date {
        margin-top: 10px;
        margin-bottom: 4px;
    }

    .mcm {
        max-width: 500px;
        text-align: center;
        white-space: wrap;
    }

    .mcm_date {
        width: 100%;
    }

    .mcm_whole {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media all and (max-width:430px) {
    .mcm {
        max-width: 240px;
        text-align: center;
        white-space: wrap;
    }
}




/* 댓글 알림 관련 CSS 종료 */

.mth1 {
    width: 10%;
}

.mth2 {
    width: 60%;
}

.mth3 {
    width: 20%;
}

.mtd1 {
    width: 10%;
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.mtd2 {
    padding-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
}

.mtd2 a {
    width: 100%;
    color: #FFF;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all 0.2s linear;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mtd2 a:hover {
    color: #b1b1b1;
}

.mtd3 {
    width: 30%;
    color: rgba(255, 255, 255, 0.719);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}

.file_dw {
    margin-bottom: 20px;
}

.file_dw span {
    font-size: 13px;
    font-weight: 400;
    font-family: 'SUIT';
    color:rgba(255, 255, 255, 0.4) !important;
}


/* 새로 추가할 css 마이 페이지 내 활동 - 반응형 */

@media all and (max-width:1200px) {
    .title1_off {
        font-size: 20px;
    }
}

@media all and (max-width:430px) {
    .title1_off {
        font-size: 18px;
    }

    .search_area2 {
        width: 100%;
    }

    .input {
        width: 100%;
    }

    .search_input2 {
        width: 100%;
        padding-right: 20px;
        display: flex;
        align-items: center;
        padding-right: 10px;
    }

    .my_act_wrap {
        padding-left: 0;
    }
}

@media all and (max-width:504px) {
    .mth3 {
        display: none;
    }

    .mtd3 {
        display: none;
    }
}


@media all and (max-width:340px) {
    .mth1 {
        width: 15% !important;
    }

    .mtd1 {
        width: 15% !important;
    }
}

/* 새로 추가할 css 마이 페이지 내 활동 관련 */

.file_dw a {
    color: #d8d8d8;
    font-family: 'SUIT';
    font-size: 14px;
    font-weight: 400;
}

.title1_off {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 22px;
    font-weight: 500;
    line-height: 24px;
    transition: all 0.3s linear;
}

.title1_off:hover {
    color: #fff;
}

.search_area2 {
    width:306px;
    height:35px;
    display: flex;
    border-radius: 6px;
    border: 0.5px solid #3D3D3D;
    align-items: center;
}

.s_filter2 {
    border: none;
    background: transparent;
    margin-left:5px;
    margin-right:10px;
    width:66px;
    height:28px;
    padding-left:6px;
    padding-right:3px;
    appearance: none;
    background-image:url(../img/down_arrow.png);
    background-repeat: no-repeat;
    background-position: 96% center;
    background-size: 8px;
    font-family: 'SUIT';
    color:#fff;
    font-size:14px;
    font-weight: 400;
}

.s_filter2 option {
    background-color: #0f0911;
    color:#fff;
    font-family: 'SUIT';
    font-size:14px;
    font-weight:400;
}

input {
    border: none;
    background: transparent;
    color:#fff;
    font-family: 'SUIT';
    font-size:14px;
    font-weight: 400;
    width: 180px;
}

.search_input2 button {
    border:none;
    background: transparent;
    background-image:url(../img/search_icon.png);
    background-size: contain;
    background-repeat: no-repeat;
    width:13px;
    height:13px;
    margin-bottom: 3px;
}

.my_act_wrap {
    width: 100%;
    padding-left: 15px;
    margin-top: 32px;
    height: auto;
    margin-bottom: 20px;
}

.my_post {
    height: auto;
}

.my_post_wrap {
    width: 100%;
    height: auto;
    margin-top: 20px;
}

.my_post th {
    background-color: transparent;
    color: rgba(255, 255, 255, 0.42);
    text-align: center;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 300;
    padding-bottom: 10px;
}


.pagination {
    margin-bottom: 50px;
    margin-top: 50px;
}


.mth1 {
    width: 10%;
}

.mth2 {
    width: 60%;
}

.mth3 {
    width: 30%;
}

.mtd1 {
    width: 10%;
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.mtd2 {
    padding-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    justify-content: center;
}

.mtd2 a {
    width: 100%;
    color: #FFF;
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    transition: all 0.2s linear;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.mtd2 a:hover {
    color: #b1b1b1;
}

.mtd3 {
    width: 30%;
    color: rgba(255, 255, 255, 0.719);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    padding-left: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
}



/* 게시글 번호 및 넘기기 - 페이지네이션 교체 후 삭제 가능 */

.pg_num_area {
    width:100%;
    height:35px;
    margin-top: 50px;
    margin-left: auto;
    margin-right: auto;
}

.pg_num {
    width:105px;
    height:35px;
    margin:0 auto;
    display: flex;
}

.num_click1 {
    width: 35px;
    height:35px;
    border-radius: 4px 0px 0px 4px;
    border-top: 1px solid #3D3D3D;
    border-bottom: 1px solid #3D3D3D;
    border-left: 1px solid #3D3D3D;
    background: #1C1C1C;
    position:relative;
    transition: all 0.2s linear;
}

.num_click1:hover {
    background:#141414;
}

.num_click1::after {
    content: '';
    display: block;
    background-image: url(../img/num_left.png);
    background-repeat: no-repeat;
    background-size: contain;
    width:8px;
    height:8px;
    position: absolute;
    top:13px;
    left:14px;
}

.num_click2 {
    width: 35px;
    height:35px;
    border: 1px solid #3D3D3D;
    background: #1C1C1C;
    justify-content: center;
    align-items: center;
    display: flex;
    transition: all 0.2s linear;
}

.num_click2:hover {
    background:#141414;
}

.num_click2 span {
    color:#fff;
    font-family: 'SUIT';
    font-size:15px;
    font-weight:400;
}

.num_click3 {
    width: 35px;
    height:35px;
    border-radius: 0px 4px 4px 0px;
    border-top: 1px solid #3D3D3D;
    border-right: 1px solid #3D3D3D;
    border-bottom: 1px solid #3D3D3D;
    background: #1C1C1C;
    position: relative;
    transition: all 0.2s linear;
}

.num_click3:hover {
    background:#141414;
}

.num_click3::after {
    content: '';
    display: block;
    background-image: url(../img/num_right.png);
    background-repeat: no-repeat;
    background-size: contain;
    width:8px;
    height:8px;
    position: absolute;
    top:13px;
    left:14px;
}


/* 새로 추가할 css 마이 페이지 내 활동 - 반응형 */

@media all and (max-width:1200px) {
    .title1_off {
        font-size: 20px;
    }
}

@media all and (max-width:430px) {
    .title1_off {
        font-size: 18px;
    }

    .search_area2 {
        width: 100%;
    }

    .input {
        width: 100%;
    }

    .search_input2 {
        width: 100%;
        padding-right: 20px;
        display: flex;
        align-items: center;
        padding-right: 10px;
    }

    .my_act_wrap {
        padding-left: 0;
    }
}

@media all and (max-width:375px) {
    .mth3 {
        display: none;
    }

    .mtd3 {
        display: none;
    }
}

/* 출석체크 페이지 - 새로 추가할 css */

.main_whole_area8 {
    background-color: transparent;
    width:100%;
    padding-bottom:150px;
    margin-left:auto;
    margin-right: auto;
    min-height: calc(100vh - 390px); /* 630px은 헤더 높이 + 푸터 높이 값 --> 최종 헤더 높이 변경 시 값 변경 필요 */
    max-width: 1200px;
}

@media all and (max-width:1200px) {
    .main_whole_area8 {
        min-width: 100%;
    }
}

@media all and (max-width:800px) {
    .main_whole_area8 {
        min-height: calc(100vh - 300px);
    }
}

@media all and (max-width:640px) {
    .main_whole_area8 {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.checkin_bg {
    background-image: url(../img/daily_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    max-width: 1920px;
    margin:0 auto;
}

.da_ca_head {
    width: 100%;
    max-width: 800px;
    margin:0 auto;
}

.dch_up {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 338px;
    margin: 0 auto;
    gap: 15px;
}

.dch_main {
    background-image: url(../img/daily_title.png);
    width: 266px;
    height: 100px;
    background-size: cover;
    background-repeat: no-repeat;
}

.dch_sub {
    background-image: url(../img/daily_subttl.png);
    width: 338px;
    height: 18px;
    background-size: cover;
    background-repeat: no-repeat;
}

.dch_bt {
    margin-top: 28px;
    border-top: 1px solid rgba(240, 240, 240, 0.30);
    border-bottom: 1px solid rgba(240, 240, 240, 0.30);
    padding-top:12px;
    padding-bottom: 12px;
}

.check_count {
    display: flex;
    align-items: center;
    justify-content: center;
}

.check_count h5 {
    color: #FFF;
    font-family: 'SUIT';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
}

.check_count span {
    color: #BD8CFF;
    font-family: 'SUIT';
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    margin-left: 5px;
    margin-right: 3px;
}


.da_ca_body {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    align-items: center;
}


.dc_month {
    display: flex;
    align-items: center;
}

.mleft {
    background: transparent;
    border: none;
    background-image: url(../img/left_bt.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 11px;
    height: 12px;
}

.mright {
    background: transparent;
    border: none;
    background-image: url(../img/right_bt.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 11px;
    height: 12px;
}

.ym {
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    margin-left: 27px;
    margin-right: 27px;
}

.dcb_bt {
    width: 100%;
    max-width: 1062px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
}

.week_ttl2_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    gap:2px;
}

.week_ttl2_wrap li {
    flex:1;
    background: rgba(78, 36, 162, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
}

.cday_area {
    width: 100%;
}

.sun2 {
    background: rgba(173, 52, 41, 0.85) !important;
}

.week_ttl2_wrap li span {
    color: #FFF;
    text-align: center;
    font-family: 'SUIT';
    font-size: 15px;
    font-style: normal;
    font-weight: 800;
}

.whole_day_wrap {
    display: flex;
    flex-wrap: wrap; /* 여러 줄로 감싸기 */
    width: 100%;
    margin: 0; /* 불필요한 마진 제거 */
    padding: 0; /* 불필요한 패딩 제거 */
}

.wk_first, .wk_second, .wk_third, .wk_fourth, .wk_fifth  {
    display: flex;
    width: 100%;
    gap: 2px;
}

.day_cell {
    flex-basis: calc((100% - 12px) / 7);
    max-width: calc((100% - 12px) / 7);
    height: 130px;
    background: var(--black-gd, linear-gradient(180deg, rgba(13, 13, 13, 0.65) 0%, rgba(0, 0, 0, 0.30) 100%));
    padding: 14px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-right: 2px;
    margin-bottom: 2px;
    display: flex;
    flex-direction: column; /* 세로 방향 정렬 */
    justify-content: space-between; /* 날짜는 위, 스탬프는 아래 혹은 가운데로 (옵션) */
    align-items: center; /* 가로 중앙 정렬 */
    position: relative; /* 스탬프 절대 위치 지정을 위해 */
    overflow: hidden; /* 스탬프가 day_cell 밖으로 나가지 않도록 */
    border:0.2px solid #c5c5c517;
}


.whole_day_wrap .day_cell:nth-child(7n) {
    margin-right: 0;
}


.week_ttl2_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    padding: 0;
    margin: 0;
    width: 100%;
}

.week_ttl2_wrap li {
    flex: 0 0 calc((100% - 12px) / 7);
    background: rgba(78, 36, 162, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px;
    list-style: none;
}

.day_cell.other_month .day_number {
    color: rgba(255, 255, 255, 0.30);
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.day_cell.current_month .day_number {
    color: #fff;
    font-family: 'SUIT';
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

.day_cell.today .day_number {
    padding: 3px;
    font-weight: 700;
    background-color: #5f26b9;
    border-radius: 5px;
}

/* day_number는 여전히 좌측 상단에 위치 */
.day_cell .day_number {
    align-self: flex-start; /* day_cell의 왼쪽 상단에 배치 */
}

/* ⭐ 출석 스탬프 이미지 스타일 ⭐ */
.attendance-stamp {
    position: absolute; /* day_cell 내에서 절대 위치 */
    top: 30%;
    width: 75px; /* 기본 크기 */
    height: 75px; /* 기본 크기 */
    object-fit: contain; /* 이미지 비율 유지하며 셀에 맞춤 */
    pointer-events: none; /* 스탬프 위에 마우스 클릭 이벤트가 발생하지 않도록 */
}

/* --- 모바일 반응형 고려 (부가사항 1) --- */
@media all and (max-width: 768px) {
    .attendance-stamp {
        top:35%;
    }
}


@media (max-width: 480px) { /* 480px 이하 화면에서는 스탬프 크기 조절 */
    .attendance-stamp {
        width: 50px;
        height: 50px;
        top: 45% !important;
    }

    .day_cell {
        height: 100px;
    }

    .dch_main {
        width: 218px;
        height: 82px;
    }

    .dch_sub {
        width: 278px;
        height: 15px;
    }

    .check_count h5 {
        font-size: 16px;
    }

    .check_count span {
        font-size: 18px;
    }

    .ym {
        font-size: 22px;
    }

    .week_ttl2_wrap li span {
        font-size: 14px;
    }

    .day_cell.current_month .day_number {
        font-size: 13px;
    }

    .day_cell.other_month .day_number {
        font-size: 13px;
    }

}

@media all and (max-width: 420px) {
    .day_cell {
        padding: 10px;
        height: 85px;
    }

    .attendance-stamp {
        width: 40px;
        height: 40px;
        top: 48% !important;
    }
}

.da_ca_foot {
    display: flex;
    justify-content: center;
    padding-top: 50px;
    align-items: center;
}

.dcheck {
    width: 200px;
    height: 50px;
    border-radius: 8px;
    background: #632BB1;
    color: #FFF;
    font-family: 'SUIT';
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    border: none;
    transition: all 0.25s linear;
}

.dcheck:hover {
    background: #502092;
}

.dcf_wrap h5 {
    color: rgba(255, 255, 255, 0.45);
    font-family: 'SUIT';
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    margin-top: 26px;
    text-align: center;
}