@charset "utf-8";

/* =========================
   GLOBAL VARIABLES
========================= */
:root{
    --card-radius: 18px;
    --card-shadow: 0 10px 28px rgba(0,0,0,.14);
    --card-bg-front: rgba(255,255,255,.92);
    --card-bg-back: #fff;

    /* 세로형 카드 */
    --card-aspect: 4 / 5;

    /* 퍼센트바 연한 하늘 → 진한 파랑 */
    --progress-gradient-start: #81D4FA;
    --progress-gradient-end: #1565C0;
}

/* =========================
   GRID LAYOUT (한 줄 4개)
========================= */
.list_todo{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:16px;
    padding:16px 0;
}

.list_todo > li.todo{
    position:relative;
    perspective:1400px;
}

/* =========================
   CARD CORE
========================= */
.todo_inner{
    position:relative;
    width:100%;
    aspect-ratio: var(--card-aspect);
    transform-style: preserve-3d;
    transition: transform .65s cubic-bezier(.4,.2,.2,1);
    transform-origin: center;
}

.todo.check .todo_inner{
    transform: rotateY(-180deg);
}

/* =========================
   FRONT / BACK
========================= */
.todo_front,
.todo_back{
    position:absolute;
    inset:0;
    border-radius: var(--card-radius);
    backface-visibility:hidden;
    box-shadow: var(--card-shadow);
    display:flex;
    flex-direction:column;
}

.todo_front{
    background: var(--card-bg-front);
    padding:16px 16px 22px;
}

.todo_back{
    background: var(--card-bg-back);
    padding:18px;
    transform: rotateY(180deg);
}

/* hover flip 차단 */
.list_todo > li.todo:hover .todo_inner{
    transform:none !important;
}

/* =========================
   THUMB IMAGE
========================= */
.thumb_img{
    border-radius:14px;
    overflow:hidden;
    margin-bottom:14px;
}

.thumb_img_wrap{
    aspect-ratio: 16 / 11; /* 아래 폭 넓힘 */
    background:#eee;
}

.thumb_img img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* =========================
   TITLE / PROGRESS
========================= */
.todo_name{
    font-family:'WarhavenB';
    font-size:20px;
    margin-bottom:8px;
}

.todo_progress{
    margin-bottom:10px;
}

.progress_bar{
    position:relative;
    height:18px;
    padding:3px;
    border-radius:6px;
    background:#1e2940;
}

.progress_bar .bar_inner{
    height:100%;
    border-radius:5px;
    background: linear-gradient(90deg, var(--progress-gradient-start), var(--progress-gradient-end)) !important;
}

.progress_bar span{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    color:#fff;
}

/* =========================
   MEMO (위로 조금 올림)
========================= */
.todo_memo{
    margin-top:10px;
    padding-top:6px;
    border-top:1px dashed rgba(0,0,0,.18);
    font-size:14px;
}

/* =========================
   MANAGE ICON / WRITE BUTTON (오른쪽 고정)
========================= */
.btn_manage{
    position:absolute;
    right:12px;
    bottom:12px;
    display:flex;
    gap:10px;
}

.btn_manage a{
    font-size:15px;
    color:#666;
}

.btn_manage a:hover{
    color:#000;
}

/* 오른쪽 상단 글쓰기 버튼 */
.bo_fx.todo-btns{
    position:absolute;
    top:16px;
    right:16px;
    display:flex;
    gap:8px;
    z-index:10;
}

.bo_fx.todo-btns .ui-btn{
    padding:6px 12px !important;
    font-size:13px !important;
    border-radius:6px;
}

/* =========================
   BACK CHECKLIST
========================= */
.theme-box{
    height:100%;
    display:flex;
    flex-direction:column;
}

.back-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}

.back-checklist{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.back-checklist li{
    padding:12px 14px;
    border-radius:12px;
    border:1px solid rgba(0,0,0,.15);
}

.back-checklist label{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.back-checklist span{
    line-height:1.55;
}

/* =========================
   CUSTOM CHECKBOX
========================= */
.back-checklist input{
    appearance:none;
    width:16px;
    height:16px;
    margin-top:3px;
    border-radius:50%;
    border:2px solid #d6a3a3;
    cursor:pointer;
}

.back-checklist input:checked{
    background:#81D4FA; /* 체크 시 색상 */
    border-color:#81D4FA;
}

/* =========================
   COMPLETE STATE
========================= */
.todo.complete .todo_front{
    filter: grayscale(1);
    opacity:.6;
}

.todo_front::after{
    content:'';
    position:absolute;
    inset:0;
    background:url('./complete.png') center/80% no-repeat;
    opacity:0;
    pointer-events:none;
}

.todo.complete .todo_front::after{
    opacity:1;
}