*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:sans-serif;

    min-height:100vh;

    background-image:url("background.png");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

}

header{

    height:95px;

    background:white;

    border-bottom:2px solid #c8a77f;

    padding:10px clamp(15px,2vw,25px);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    align-items:center;

}

.logo-image{

    width:clamp(150px,12vw,200px);

    height:auto;

}

main{

    width:100%;

    max-width:1820px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        minmax(250px,300px)
        1fr
        minmax(250px,300px);

    gap:20px;

    padding:20px;

    height:calc(100vh - 180px);

}

.left-panel,
.right-panel{

    display:flex;

    flex-direction:column;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(18px);

    min-height:0;
    height:100%;

    padding:20px;

    border-radius:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.left-panel{

    gap:18px;

}

.right-panel{

    gap:15px

}

.card{

    background:white;

    border-radius:15px;

    padding:15px;

}

.left-panel .card{

    margin-top:0;

}

.right-panel .card{

    margin-top:-10px;

}

.days{

    font-size:50px;

    font-weight:bold;

    margin:15px 0;
}

.progress{

    width:100%;
    height:14px;
    background:#ece8df;
    border-radius:30px;
    overflow:hidden;
    margin:18px 0;

}

.progress-fill{

    width:0%;
    height:100%;
    background:#8daa6b;
    border-radius:30px;
    transition:.4s;

}

.center-panel{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.timer{

    position:absolute;

    top:35px;

    left:50%;

    transform:translateX(-50%);

    font-size:clamp(60px,6vw,100px);

    font-weight:bold;

    color:#355c30;

    background:rgba(255,255,255,.85);

    padding:15px 60px;

    border-radius:30px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    z-index:20;

}



.timer-buttons{

    position:absolute;

    bottom:90px;

    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:30px;

    z-index:20;

}

.timer-buttons button{

    width:clamp(130px,10vw,170px);

    height:clamp(50px,4vw,60px);

    border:none;

    border-radius:15px;

    background:#9bb47f;

    color:white;

    font-size:clamp(18px,1.4vw,22px);

    font-weight:bold;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.share-btn{

    width:100%;

    height:50px;      /* ← ボタンの高さ */

    padding:0;         /* ← paddingは消す */

    margin-top:10px;   /* ← 上の余白を小さく */

    border:none;

    border-radius:10px;

    background:#8da96d;

    color:white;

    cursor:pointer;

}

footer{

    display:flex;

    justify-content:center;

    align-items:center;

    margin:2px auto;

    gap:20px;

    position:relative;
    z-index:1000;

}

.footer-btn{

    width:220px;

    height:60px;

    border:1px solid #c8a77f;

    border-radius:15px;

    background:white;

    font-size:18px;

    cursor:pointer;

}



.todo-input-area{

    display:flex;

    gap:10px;

    margin-bottom:15px;
}

.todo-input-area input{

    flex:1;

    padding:8px;

    border:1px solid #ccc;

    border-radius:8px;
}

.todo-input-area button{

    padding:8px 15px;

    border:none;

    border-radius:8px;

    background:#9bb47f;

    color:white;

    cursor:pointer;
}

#todoList{

    list-style:none;
}

.todo-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

    padding:10px;

    background:#f8f8f8;

    border-radius:8px;
}

.delete-btn{

    background:#e86c6c;

    color:white;

    border:none;

    border-radius:6px;

    padding:5px 10px;

    cursor:pointer;
}

/* =========================
   キャラクター
========================= */



.character{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;

    pointer-events:none;
}


#character{

    width:clamp(340px,28vw,520px);

    position:absolute;

    left:24%;

    bottom:130px;

    transform:translateX(-50%);

    z-index:10;

    transform-origin:center bottom;

    animation:idle 4s ease-in-out infinite;

    filter:drop-shadow(0 18px 25px rgba(0,0,0,.2));

}

/* =========================
   雀魂風待機モーション
========================= */

@keyframes idle{

    0%{
        transform:translateY(0px);
    }

    25%{
        transform:translateY(-3px);
    }

    50%{
        transform:translateY(-10px);
    }

    75%{
        transform:translateY(-3px);
    }

    100%{
        transform:translateY(0px);
    }

}

/* =========================
   喜びモーション
========================= */

.happy{

    animation:
        happy 0.8s ease,
        idle 4s ease-in-out infinite;

}

@keyframes happy{

    0%{

        transform:
            translateY(0);

    }

    25%{

        transform:
            translateY(-35px);

    }

    50%{

        transform:
            translateY(0);

    }

    75%{

        transform:
            translateY(-20px);

    }

    100%{

        transform:
            translateY(0);

    }

}



button{

    transition:
    transform .15s,
    box-shadow .15s;

    box-shadow:
    0 4px 8px
    rgba(0,0,0,.15);

}

button:hover{

    transform:
    translateY(-2px);

}

button:active{

    transform:
    translateY(3px);

    box-shadow:
    0 1px 3px
    rgba(0,0,0,.2);

}



.character-stage{

    position:relative;

    width:100%;

    height:780px;

    border-radius:30px;

    overflow:hidden;

    background:none;

}

.next-evolution{

    margin-top:15px;

    font-size:18px;

    font-weight:bold;

    color:#555;

    text-align:center;

}


#longestFocus{

    margin-top:10px;

    font-size:18px;

    font-weight:bold;

    color:#4d6b39;

}

/*==========================
 集中時間カード
==========================*/

#longestFocus,
#todayFocus,
#weekFocus{

    font-size:20px;

    font-weight:bold;

    margin-top:18px;

    color:#4d6b39;

}

.todo-card{

    flex:1.6;

    display:flex;

    flex-direction:column;

    margin-top:0;

    overflow:hidden;

}

#todoList{

    flex:1;

    overflow-y:auto;

    overflow-x:hidden;

    padding-right:5px;

}

#longestFocus,
#todayFocus,
#weekFocus{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #e8e8e8;

}

.focus-card p{

    font-size:20px;

    padding:12px 0;

    border-bottom:1px solid #ddd;

}

.growth-card{

    min-height:180px;

}

.share-card{

    display:flex;

    flex-direction:column;

    margin-top:10px;

    height:363px;

}

.share-card h3{

    text-align:left;

    margin-bottom:20px;

}

.share-card p{

    font-size:20px;

    padding:3px 0;

    border-bottom:1px solid #ddd;

}

#shareLevel{

    font-size:45px;

    font-weight:bold;

    text-align:center;

    margin-top:10px;

}

#shareForm{

    text-align:center;

    border:none;

    font-size:26px;

    color:#666;

    margin-bottom:20px;

}

.right-panel h2{

    font-size:24px;

    font-weight:bold;

    margin:0;

}

.help-btn{

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:white;

    font-size:26px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:0 4px 10px rgba(0,0,0,.15);

}

.help-btn:hover{

    background:#f3f3f3;

}

.right-section{

    display:flex;

    flex-direction:column;

}

.right-section h2{

    margin-bottom:10px;

}

#todoList::-webkit-scrollbar{

    width:6px;

}

#todoList::-webkit-scrollbar-track{

    background:#eeeeee;

    border-radius:10px;

}

#todoList::-webkit-scrollbar-thumb{

    background:#9bb47f;

    border-radius:10px;

}

#todoList::-webkit-scrollbar-thumb:hover{

    background:#7f9b61;

}

.complete-message{

    position:absolute;

    top:150px;

    left:50%;

    transform:translateX(-50%);

    background:rgba(64,120,50,.92);

    color:white;

    padding:15px 35px;

    border-radius:18px;

    font-size:24px;

    font-weight:bold;

    opacity:0;

    pointer-events:none;

    transition:.4s;

    z-index:100;

}

.complete-message.show{

    opacity:1;

}