@charset "utf-8";

/** Notice Box **/
.board-notice   { width: 100%; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box;
    background: transparent !important; /* 배경 투명하게 */
    background-color: transparent !important; /* 혹시 모를 배경색 강제 제거 */
    border: none !important; /* 테두리(보더) 제거 */
    outline: none !important; /* 외곽선(아웃라인) 제거 */
    box-shadow: none !important; /* 그림자 제거 (테두리처럼 보일 수 있음) */
}

/** Category List **/
#navi_category  { width: 100%; text-align: center; padding: 20px 0;}
#navi_category ul {background: var(--default-box-color); border-radius: 15px; display: inline-block; color: var(--default-txt-color);}
#navi_category ul a {color: var(--default-txt-color); }
#navi_category ul a:hover {color: #A3CCA2; }
#navi_category li   { display: inline-block;}
#navi_category li + li:before {content: '|'; padding: 0 15px;}
/* 현재 선택된 카테고리 (그누보드 자동 생성 ID) */
#navi_category #bo_cate_on {
    color: #A3CCA2 !important;
    cursor: default;
    pointer-events: none;
}

.list_todo {
    justify-content: center; display: flex; flex-wrap: wrap; gap: 10px; 
    margin: 35px 0;}
.list_todo * {box-sizing: border-box;}
.list_todo > li {overflow: hidden; position: relative; padding: 10px; width: 320px; transition: transform 0s;}
/* --- .list_todo .thumb_img (중앙 정렬을 위한 Flexbox는 유지) --- */
.list_todo .thumb_img {
overflow: hidden;
margin-bottom: 10px;
border-radius: 5px;
/* 중앙 정렬 Flexbox */
display: flex;
justify-content: center;
align-items: center;
}
.list_todo .thumb_img .thumb_img_wrap {
/* 크기 고정 */
width: 300px;
height: 200px;
background: rgba(255,255,255,0.15);
}
.list_todo .thumb_img img {width: 100%; height: 100%; object-fit: cover;}
.list_todo .thumb_img.thumb_img_no .thumb_img_wrap {display: flex; justify-content: center; align-items: center; font-size: 75px; opacity: 25%}
.list_todo .todo_cate {margin-bottom: 5px;}
.list_todo .todo_cate span {display: inline-block; padding: 0px 5px; margin: 0px 0px 5px;border-radius: 5px; background: #A3CCA2; color: #ffffff;}
.list_todo .todo_name {margin-bottom: 5px; font-size: 16px; font-weight: bold; line-height: 1.45;word-break:keep-all;}
.list_todo .todo_memo {margin-bottom: 5px; color: rgba(255,255,255,.7); font-size: 12px; font-family: dotum; line-height: 1.65; word-break:keep-all; }
.list_todo .progress_bar {margin: 10px 0; padding:2.5px; position: relative; border-radius: 5px; height: 20px; background: rgba(0,0,0,.5); color: #fff;}
.list_todo .progress_bar .bar_inner {border-radius: 3px; /* 부모의 곡률을 그대로 상속 */ width: 0%; max-width: 100%; height: 100%;}
.list_todo .progress_bar span {position: absolute; top: 50%; left: 50%; width: 100%; text-align: center; transform: translate(-50%, -50%); font-size: 12px;}
.list_todo .date {color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.5;}

.list_todo .btn_manage {position: absolute; right: 10px; bottom: 10px; text-align: right; height: 18px;}
.list_todo .btn_manage a {margin-left: 5px;}

/* ▼ 수정: no_check 조건 제거 → 체크리스트 유무 관계없이 complete면 흑백처리 */
.list_todo > li.complete > div {filter: grayscale(1); opacity: 0.5;}
.list_todo > li.complete:after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: url('./img/complete.png') center center/100% no-repeat; z-index: 1; pointer-events: none;}
/* ▼ btn_manage, todo_is_check, todo_check 는 complete 오버레이 위에서 클릭 가능 */
.list_todo > li.complete .btn_manage {opacity: 1; filter: none; z-index: 2; position: absolute;}
.list_todo > li.complete .todo_is_check {filter: none; opacity: 1; position: relative; z-index: 2;}
.list_todo > li.complete .todo_check {z-index: 4;}


.board-write    {  padding: 0 10px; }
.board-write > dl {position:relative;margin: 10px 0;}
.board-write > dl > dt { width:70px;position:absolute;line-height:30px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:30px;}
.board-write input.frm_input.full   { width: 100%; display:block;}
.board-write input {padding: 0 10px; height: 30px; box-sizing: border-box;}
.board-write input::placeholder {opacity: 0.7;}
.board-write input[type="radio"]+label {margin-right: 5px;}
.board-write input[type="number"] {width: 100px; display:inline-block}
.board-write .btn_confirm {margin-top: 20px;}
.board-write .btn_thumb {margin-bottom: 5px;}
.board-write .btn_thumb.active {opacity: 1;}

#ca_name option[value="공지"] {display: none;}

.pro_edit.on {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 100;}
.pro_edit #progress_edit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; width: 90%;}


/* 체크리스트 */
.list_todo > li.check {transform: rotateY(180deg);}
.list_todo > li > a {display: block; width: 100%; height: 100%; color: inherit;}
.list_todo .todo_check {position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(180deg); z-index: 3; opacity: 0; transition: all 0s; visibility: hidden; 
    background-image:
    linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #a3cca2 100%);

}
.list_todo .todo_check .theme-box {position: relative; width: 320px; height: 100%; border: none;}

/* 비밀글 레이어 스타일 */
    .list_todo li.is_lock { position: relative; overflow: hidden; }
    
    .list_todo li.is_lock .lock_overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #a3cca2;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 흑백필터가 lock_overlay에 안 걸리도록 예외 추가 */
.list_todo > li.complete > div {filter: grayscale(1); opacity: 0.5;}
/* ▼ 이 줄 추가 */
.list_todo > li.complete > .lock_overlay {filter: none; opacity: 1;}

    .list_todo li.is_lock .lock_overlay img {
        width: auto; /* 원본 크기 유지 */
        height: auto;
    }

    /* 비밀글일 때 내부 콘텐츠 클릭 방지 (선택 사항) */
    .list_todo li.is_lock > a { pointer-events: none; }
    .list_todo .todo_is_check a:hover{
        opacity: 0.7;
    }
.list_todo > li.check .todo_check {opacity: 1; visibility: visible; }
.list_todo .todo_check li {background-color: rgba(0,0,0,.5);position: relative; margin-top: 5px; 
    padding: 0 5px; border: 1px solid #a3cca2; border-radius: 5px; line-height: 1.5; font-size: 12px;}
.list_todo .todo_check li:first-child {margin: 0;}
.list_todo .todo_check {
    display: flex;
    flex-direction: column;
}

.list_todo .todo_check li:hover{
    opacity: 0.7;
}

.list_todo .todo_check ul {
    flex: 1;
    overflow-y: auto;
    max-height: 255px;
    margin-top:10px;
}

.list_todo .todo_check .todo_check_btn {
    position: static;
}


.list_todo .todo_check input[type="checkbox"] {
    margin-top: 5px;
    vertical-align: top;
    width: 18px;
    height: 18px;
    appearance: none;
    border-radius: 30px;
    background-color: transparent;

    &::before {
        content: '';
        color: transparent;
        display: block;
        width: 16px;
        height: 16px;
        border-radius: inherit;
        border: 1px solid #a3cca2;
        background-color: transparent;
        background-size: contain;
    }

    /* 🔥 hover 추가 */
    &:hover::before {
        border: 1px solid rgba(255, 255, 255);
        background-color: rgba(255, 255, 255, .5);
        cursor: pointer;
    }

    &:checked::before {
        box-shadow: none;
        background-color: <?=$point_color['cs_value']?>; /* 선택시 배경 유지 */
        background-image: url("data:image/svg+xml,%3Csvg   xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
    }
}

.list_todo .todo_check label {display: inline-block; padding: 5px 5px; width: calc(100% - 25px); font-family: dotum; line-height: 1.65; word-break: keep-all;}

.list_todo .todo_check .todo_check_btn {position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding-top: 10px; text-align: center;}

.list_todo .todo_is_check {color: #ffffff !important;margin-top: 5px; position: static !important; /* 절대 위치를 해제하여 흐름에 편입 */ bottom: 10px;}
/* 기본 상태: 권한이 없는 일반 사용자는 기본 화살표 */
.todo_is_check .no_access {
    cursor: default !important;
    text-decoration: none;
}

/* 관리자일 때: a_check 클래스가 붙으면 손가락 모양 커서 */
.todo_is_check .a_check {
    cursor: pointer !important;
}

/* 아이콘과 텍스트 전체가 클릭 영역임을 명시 */
.todo_is_check a {
    display: inline-block;
    color: inherit;
}

.board-write .add_pro_3 {margin-bottom: 5px;}

/* --- 게시글 수 줄이기 미디어 쿼리 --- */

/* 태블릿 및 중간 크기 화면 (최대 1200px) */
/* 한 줄에 2개 표시 (각 49% 너비) */
@media screen and (max-width: 1000px) {
    .list_todo {
        gap: 20px; /* 간격을 2%로 조정 */
        justify-content: center; 
    }
    .list_todo > li {
        /* 49% 너비가 300px을 수용할 수 있도록 
           최소 너비를 310px로 설정하여 썸네일이 튀어나오는 것을 방지 */
        min-width: 320px;
    }
}

/* 모바일 및 작은 화면 (최대 768px) */
/* 한 줄에 1개 표시 (100% 너비) */
@media screen and (max-width: 500px) {
    .list_todo {
        gap: 20px;
        justify-content: center; 
    }
    .list_todo > li {
        width: 100%;
        max-width: 320px; /* 너무 커지는 것을 방지 */
    }
}