/* 預設是手機 (小螢幕) 的樣式 */
body { font-size: 16px; }

/* 當螢幕寬度超過 768px (平板/桌面) 時，套用以下樣式 */
@media (min-width: 768px) {
  body { font-size: 18px; }
  .container { max-width: 960px; }
}

/* 預設樣式：手機 (Mobile First) */
.tool-container {
    display: flex;
    flex-direction: column; /* 預設：垂直堆疊 */
    padding: 10px;
}

.tool-card {
    background-color: #f4f4f4;
    padding: 20px;
    margin-bottom: 15px; /* 垂直間距 */
    border-radius: 8px;
    text-align: center;
}

/* 響應式：當螢幕寬度達到 768px (平板/桌面) 時 */
@media (min-width: 768px) {
    .tool-container {
        flex-direction: row; /* 改變為：水平並排 */
        flex-wrap: wrap;     /* 允許項目換行 */
        justify-content: space-between; /* 均勻分佈間距 */
    }

    .tool-card {
        /* 在較大螢幕上，讓每張卡片佔用接近 33.33% 的寬度，並扣除邊距 */
        width: calc(33% - 10px); 
        margin-bottom: 20px; /* 保持垂直間距 */
    }
}

/* 預設樣式：手機 (單一垂直欄位) */
.page-layout {
    display: grid;
    /* 定義一個單一的欄位 */
    grid-template-columns: 1fr; 
    /* 定義內容的順序：頁首 -> 側邊欄 -> 主內容 -> 頁尾 */
    grid-template-areas: 
        "header"
        "aside" 
        "main"
        "footer";
    gap: 10px; /* 項目間距 */
    min-height: 100vh;
}

header { grid-area: header; }
aside { grid-area: aside; background-color: #ddd; }
main { grid-area: main; }
footer { grid-area: footer; }

/* 響應式：當螢幕寬度達到 992px (桌面) 時 */
@media (min-width: 992px) {
    .page-layout {
        /* 定義兩個欄位：左邊側邊欄佔 25%，右邊主內容佔 75% */
        grid-template-columns: 1fr 3fr; 
        /* 定義佈局區域：*/
        grid-template-areas: 
            "header header"  /* 頁首橫跨兩欄 */
            "aside main"     /* 側邊欄在左，主內容在右 */
            "footer footer"; /* 頁尾橫跨兩欄 */
        gap: 20px; /* 項目間距增加 */
        max-width: 1200px;
        margin: 0 auto; /* 置中 */
    }
}

/* 在手機上 */
body { font-size: 16px; } 

/* 在桌面上調整根元素字體大小，所有使用 rem 的文字都會自動縮放 */
@media (min-width: 992px) {
    body { font-size: 18px; } 
}

h1 { font-size: 2.5rem; } /* 相對於 body 的 16px/18px 縮放 */

img {
    max-width: 100%; /* 圖片最大寬度不超過其父容器 */
    height: auto;    /* 保持圖片的原始比例 */
    display: block;  /* 移除圖片底部可能出現的空白行 */
}

/* ---- 待辦事項清單樣式 ---- */

#tool-todo-list {
    background-color: #ffffff; /* 工具卡片背景 */
}

.todo-input-group {
    display: flex;
    margin-bottom: 20px;
}

#todo-input {
    flex-grow: 1; /* 輸入框佔據大部分空間 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px 0 0 4px; /* 圓角只在左側 */
    font-size: 16px;
}

#add-todo-btn {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0; /* 圓角只在右側 */
    cursor: pointer;
    transition: background-color 0.3s;
}

#add-todo-btn:hover {
    background-color: #0056b3;
}

#todo-list-container {
    list-style: none; /* 移除預設的點 */
    padding: 0;
}

.todo-item {
    display: flex;
    justify-content: space-between; /* 內容和按鈕分開 */
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background-color: #f9f9f9;
    border-left: 5px solid #007bff; /* 左側藍色標籤 */
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, opacity 0.3s;
}

.todo-item:hover {
    background-color: #eeeeee;
}

/* 已完成的樣式 */
.todo-item.completed {
    background-color: #d4edda;
    border-left: 5px solid #28a745; /* 左側綠色標籤 */
    opacity: 0.7; /* 稍微變淡 */
}

.todo-item.completed span {
    text-decoration: line-through; /* 劃掉文字 */
    color: #6c757d;
}

.delete-btn {
    background: none;
    border: none;
    color: #dc3545; /* 紅色 */
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
    font-size: 16px;
}

.todo-hint {
    text-align: center;
    color: #6c757d;
    font-size: 0.9em;
    margin-top: 20px;
}