/* ==========================================================================
   COMELUCK TASK DASHBOARD - HEROバナー分離＆Apple完全版 style.css (1 / 2)
   ========================================================================== */
:root {
    --bg-main: #F5F5F7;          /* Apple公式ライトグレー */
    --card-bg: #FFFFFF;
    --text-main: #1D1D1F;        /* Apple標準漆黒 */
    --text-muted: #86868B;       /* Apple標準サブテキストグレー */
    --border: #E5E5EA;           /* Apple標準ライトボーダー */
    --accent-blue: #0071E3;      /* Appleシステムブルー */
    --accent-pink: #FF2D55;      /* 優先度高：システムピンク */
    --accent-orange: #FF9500;    /* 優先度中：システムオレンジ */
    --accent-green: #34C759;     /* 優先度低：システムグリーン */
    --accent-red: #FF3B30;       /* 削除・警告：Appleシステムレッド */
    --font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Noto Sans JP", sans-serif;
    --shadow-apple: 0 4px 24px rgba(0, 0, 0, 0.04);
    --shadow-apple-hover: 0 12px 36px rgba(0, 0, 0, 0.08);
    --transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main) !important; }
html { scroll-behavior: smooth; }
body { 
    background-color: var(--bg-main); 
    color: var(--text-main); 
    line-height: 1.6; 
    padding-bottom: 80px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- 1. 純粋なHEROビジュアルバナー（★写真の美しさと笑顔を100%見せる★） --- */
.hero-visual-banner {
    width: 100%;
    /* 写真がしっかり見える高さに設定 */
    height: clamp(320px, 42vw, 460px);
    background-color: #1D1D1F;
    background-image: url('images/hero.webp');
    /* 目元・笑顔・手元のPCが一番美しく収まる位置に調整 */
    background-position: center 25%;
    background-size: cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* --- 2. 写真の下に配置するApple風クリーンヘッダー --- */
.app-header-clean {
    text-align: center;
    padding: 40px 20px 25px;
}
.header-inner { max-width: 960px; margin: 0 auto; }

.logo-badge {
    display: inline-block;
    background: #E5E5EA;
    color: #1D1D1F;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.25em;
    padding: 5px 16px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.app-header-clean h1 {
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-main);
}
.app-header-clean h1 span { color: var(--accent-blue); }

.header-sub { 
    font-size: 14px; 
    color: var(--text-muted); 
    margin-top: 8px; 
    font-weight: 500; 
    letter-spacing: 0.01em; 
}

/* --- 3. メインコンテナ ＆ ミニマル入力カード --- */
.app-container {
    max-width: 960px !important;
    margin: 10px auto 0;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}

.card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 40px 35px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-apple);
    transition: var(--transition);
    margin-bottom: 25px;
}
.card:hover { box-shadow: var(--shadow-apple-hover); }

.card-title-group { margin-bottom: 25px; }
.section-badge {
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    display: block;
    margin-bottom: 4px;
}
.card-title-group h2 { font-size: 22px; font-weight: 800; color: var(--text-main); letter-spacing: -0.02em; }

/* フォーム装飾 */
.form-group { margin-bottom: 22px; }
.form-group label {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 8px;
}
.req-tag {
    background: #F2F2F7;
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
    font-weight: 700;
}

.form-group input, .form-group select {
    width: 100%;
    padding: 15px 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    font-size: 15px;
    outline: none;
    transition: var(--transition);
    background: #FAFAFC;
    color: var(--text-main);
}
.form-group input:focus, .form-group select:focus {
    border-color: var(--accent-blue) !important;
    background: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.12) !important;
}

.form-row { display: flex; gap: 20px; }
.flex-1 { flex: 1; }

/* Apple公式風 シルバーメタリックボタン (.btn-add) */
.btn-add {
    width: 100%;
    background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%) !important;
    color: #1D1D1F !important;
    border: 1px solid #C7C7CC !important;
    padding: 16px;
    border-radius: 100px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    transition: var(--transition);
    margin-top: 10px;
    letter-spacing: 0.02em;
}
.btn-add:hover {
    background: linear-gradient(180deg, #FFFFFF 0%, #D1D1D6 100%) !important;
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}
.btn-add:active { transform: translateY(0) scale(0.99); }
/* --- 4. フィルター＆統計カウンターバー --- */
.filter-stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    padding: 0 5px;
    flex-wrap: wrap;
    gap: 15px;
}

.filter-group { display: flex; gap: 8px; }
.filter-btn {
    background: #FFFFFF;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 100px;
    cursor: pointer;
    transition: var(--transition);
}
.filter-btn.active, .filter-btn:hover {
    background: var(--text-main);
    color: #FFFFFF;
    border-color: var(--text-main);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.stats-group {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 700;
}
.stats-group strong { color: var(--text-main); font-size: 16px; }
.active-stats strong { color: var(--accent-blue); }

/* --- 5. タスク一覧カード ＆ 洗練されたアクションボタン --- */
.task-list-section { margin-bottom: 50px; }
.task-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.task-item {
    background: var(--card-bg);
    border-radius: 18px;
    padding: 20px 24px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-apple);
    display: flex;
    align-items: center;
    gap: 18px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.task-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-apple-hover);
    border-color: #D1D1D6;
}

/* 優先度別の左側縦アクセント線（Appleカラー） */
.task-item.priority-high { border-left: 5px solid var(--accent-pink) !important; }
.task-item.priority-medium { border-left: 5px solid var(--accent-orange) !important; }
.task-item.priority-low { border-left: 5px solid var(--accent-green) !important; }

/* チェックボックス装飾 (Appleスタイル丸型) */
.checkbox-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
}
.checkbox-container input { opacity: 0; width: 0; height: 0; position: absolute; }
.checkmark {
    position: absolute;
    top: 0; left: 0;
    height: 24px; width: 24px;
    background-color: #FAFAFC;
    border: 2px solid #C7C7CC;
    border-radius: 50%;
    transition: var(--transition);
}
.checkbox-container:hover input ~ .checkmark { 
    border-color: var(--accent-blue);
    background-color: #F0F7FF;
}
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
    left: 8px; top: 4px;
    width: 5px; height: 11px;
    border: solid white;
    border-width: 0 2.2px 2.2px 0;
    transform: rotate(45deg);
}
.checkbox-container input:checked ~ .checkmark:after { display: block; }

/* タスク本文 ＆ 打ち消し線 */
.task-body { flex: 1; }
.task-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 5px;
    transition: var(--transition);
    letter-spacing: -0.01em;
}
.task-item.completed .task-title {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.45;
}

/* パステル優先度バッジ */
.task-meta { display: flex; align-items: center; gap: 10px; }
.badge {
    font-size: 10px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
}
.priority-badge-high { background: #FFEBEE; color: var(--accent-pink); }
.priority-badge-med { background: #FFF3E0; color: var(--accent-orange); }
.priority-badge-low { background: #E8F5E9; color: var(--accent-green); }

.task-date { font-size: 12px; color: var(--text-muted); font-weight: 500; }

/* アクションボタンエリア */
.task-actions { display: flex; align-items: center; gap: 10px; }

/* ⚡実行ボタン（漆黒×Appleブルーホバー） */
.btn-run {
    background: var(--text-main) !important;
    color: #FFFFFF !important;
    border: none;
    padding: 7px 15px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: var(--transition);
    white-space: nowrap;
}
.btn-run:hover {
    transform: scale(1.05);
    background: var(--accent-blue) !important;
    box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35);
}

/* ★★★ Apple公式クオリティ：極上ミニマルゴミ箱ボタン ★★★ */
.btn-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #F2F2F7;           /* Apple純正ライトグレー背景 */
    border: 1px solid transparent;
    color: #8E8E93;                /* Apple SFシンボル標準グレー */
    cursor: pointer;
    border-radius: 50%;             /* Appleスタイルの美しい正円 */
    transition: var(--transition);
    padding: 0;
    outline: none;
    flex-shrink: 0;
}
.btn-delete svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-delete:hover {
    background: #FFE5E9;           /* Appleレッドの淡い背景 */
    color: var(--accent-red);      /* Apple公式システムレッド */
    border-color: #FFCCD3;
    transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(255, 59, 48, 0.18);
}
.btn-delete:hover svg {
    transform: rotate(-10deg) scale(1.1); /* ゴミ箱のフタが少し浮くような小粋なアニメーション */
}
.btn-delete:active {
    transform: scale(0.94);
    background: #FFD1D8;
}

/* --- 6. フッター --- */
.app-footer {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 50px;
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-visual-banner { height: 260px; background-position: center 20%; }
    .app-header-clean { padding: 30px 15px 15px; }
    .form-row { flex-direction: column; gap: 0; }
    .card { padding: 25px 20px; border-radius: 20px; }
    .task-item { padding: 16px 18px; gap: 12px; }
    .filter-stats-bar { flex-direction: column; align-items: flex-start; }
}