@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
    --primary: #10b981; /* 시각적으로 편안한 그린 계열 (건강/돌봄) */
    --primary-dark: #059669;
    --bg-color: #f1f5f9;
    --surface: #ffffff;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --border: #cbd5e1;
    --danger: #ef4444;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Pretendard', sans-serif; 
}

body { 
    background-color: var(--bg-color); 
    color: var(--text-primary); 
    font-size: 18px; /* 시니어/지원사 친화적 최소 18px */
    -webkit-font-smoothing: antialiased; 
    word-break: keep-all;
}

#app { 
    max-width: 480px; 
    margin: 0 auto; 
    background: var(--bg-color); 
    min-height: 100vh; 
    position: relative; 
    overflow-x: hidden; 
    box-shadow: 0 0 20px rgba(0,0,0,0.1); 
    display: flex; 
    flex-direction: column; 
}

header { 
    background: var(--primary); 
    color: white; 
    padding: 24px 20px; 
    text-align: center; 
    font-size: 26px; /* 타이틀 24px 이상 */
    font-weight: 700; 
    position: sticky; 
    top: 0; 
    z-index: 10; 
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.back-btn { 
    position: absolute; 
    left: 20px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: none; 
    border: none; 
    color: white; 
    font-size: 32px; 
    cursor: pointer; 
    padding: 10px; 
}

.container { 
    padding: 20px; 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

/* Progress bar */
.progress-card { 
    background: var(--surface); 
    padding: 24px; 
    border-radius: 20px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
}
.progress-header { 
    display: flex; 
    justify-content: space-between; 
    margin-bottom: 16px; 
    font-weight: 700; 
    font-size: 22px;
}
.progress-bar-bg { 
    background: var(--bg-color); 
    height: 20px; 
    border-radius: 10px; 
    overflow: hidden; 
    border: 1px solid var(--border);
}
.progress-bar-fill { 
    background: var(--primary); 
    height: 100%; 
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); 
}

/* List */
.elder-list { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}
.elder-item { 
    background: var(--surface); 
    padding: 24px 20px; 
    border-radius: 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    cursor: pointer; 
    transition: transform 0.1s; 
    border: 2px solid transparent; 
}
.elder-item:active { 
    transform: scale(0.98); 
}
.elder-item.completed { 
    border-color: var(--primary); 
    background: #f0fdf4; 
}
.elder-name { 
    font-size: 24px; 
    font-weight: 700; 
}
.elder-status { 
    font-size: 18px; 
    color: var(--text-secondary); 
    font-weight: 600; 
    padding: 8px 16px; 
    border-radius: 30px; 
    background: var(--bg-color); 
}
.elder-status.done { 
    color: var(--primary-dark); 
    background: #d1fae5; 
}
.delete-btn { 
    font-size: 24px; 
    color: var(--danger); 
    background: none; 
    border: none; 
    padding: 10px; 
    cursor: pointer; 
}

/* Add button */
.btn-add { 
    background: var(--primary); 
    color: white; 
    border: none; 
    border-radius: 20px; 
    padding: 24px; 
    font-size: 22px; 
    font-weight: 700; 
    cursor: pointer; 
    width: 100%; 
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2); 
    transition: background 0.2s; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    margin-top: 10px;
}
.btn-add:active { 
    background: var(--primary-dark); 
}

/* Checklist specific */
.section-title { 
    font-size: 24px; 
    font-weight: 700; 
    margin: 32px 0 16px; 
    color: var(--primary-dark); 
    border-bottom: 3px solid var(--border); 
    padding-bottom: 12px; 
}
.check-item { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 20px 0; 
    border-bottom: 1px solid var(--border); 
    cursor: pointer; 
    min-height: 80px; /* 누르기 편하도록 최소 높이 확보 */
}
.check-item:last-child { 
    border-bottom: none; 
}

/* Custom Checkbox */
.checkbox-wrapper { 
    position: relative; 
    min-width: 40px; 
    height: 40px; 
}
.check-item input[type="checkbox"] { 
    opacity: 0; 
    width: 0; 
    height: 0; 
    position: absolute; 
}
.checkmark { 
    width: 40px; 
    height: 40px; 
    border: 3px solid var(--border); 
    border-radius: 12px; 
    display: inline-block; 
    transition: all 0.2s; 
    position: relative; 
    background: var(--surface); 
}
.check-item input[type="checkbox"]:checked + .checkmark { 
    background: var(--primary); 
    border-color: var(--primary); 
}
.check-item input[type="checkbox"]:checked + .checkmark::after { 
    content: ''; 
    position: absolute; 
    left: 12px; 
    top: 5px; 
    width: 10px; 
    height: 20px; 
    border: solid white; 
    border-width: 0 4px 4px 0; 
    transform: rotate(45deg); 
}
.check-text { 
    font-size: 22px; 
    line-height: 1.5; 
    font-weight: 600; 
    flex: 1; 
}

/* Inputs */
textarea, input[type="date"] { 
    width: 100%; 
    padding: 20px; 
    border: 3px solid var(--border); 
    border-radius: 16px; 
    font-size: 20px; 
    margin-top: 12px; 
    resize: vertical; 
    min-height: 160px; 
    outline: none; 
    transition: border-color 0.2s; 
    background: var(--surface);
}
textarea:focus, input[type="date"]:focus { 
    border-color: var(--primary); 
}
input[type="date"] { 
    min-height: auto; 
    font-family: inherit;
}

/* Actions */
.action-group { 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
    margin-top: 40px; 
    margin-bottom: 50px; 
}
.btn { 
    padding: 24px; 
    border-radius: 20px; 
    font-size: 22px; 
    font-weight: 700; 
    cursor: pointer; 
    text-align: center; 
    border: none; 
    transition: all 0.2s; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 10px; 
}
.btn-primary { 
    background: var(--primary); 
    color: white; 
    box-shadow: 0 8px 16px rgba(16, 185, 129, 0.2); 
}
.btn-secondary { 
    background: var(--surface); 
    color: var(--text-primary); 
    border: 3px solid var(--border); 
}
.btn-primary:active { 
    background: var(--primary-dark); 
}
.btn-secondary:active { 
    background: var(--bg-color); 
}

/* Toast */
.toast { 
    position: fixed; 
    bottom: -100px; 
    left: 50%; 
    transform: translateX(-50%); 
    background: #1e293b; 
    color: white; 
    padding: 20px 32px; 
    border-radius: 40px; 
    font-size: 20px; 
    font-weight: 600; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); 
    transition: bottom 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); 
    z-index: 100; 
    white-space: nowrap; 
}
.toast.show { 
    bottom: 40px; 
}

/* Empty state */
.empty-state { 
    text-align: center; 
    padding: 80px 20px; 
    color: var(--text-secondary); 
    font-size: 22px; 
    line-height: 1.6;
}
.empty-icon { 
    font-size: 80px; 
    margin-bottom: 24px; 
    opacity: 0.8; 
}