/*  ==========================================================================
    ToDo List - Move Down
    --------------------------------------------------------------------------

    設計方針：
    - 1カラムで見やすく、幅が変わっても破綻しにくいレイアウト
    - 数値はできるだけCSS変数に寄せて、見た目の調整を一箇所で済ませる
    - フォームは input + button を横並びにし、狭い幅でもはみ出しにくくする
    ========================================================================== */

/*  --------------------------------------------------------------------------
    共通トークン（色・角丸・余白）
    - UI全体の「統一感」を作るための変数
    - 変更頻度が高いので、まずここを見る
    -------------------------------------------------------------------------- */
:root {
    --item-color: #eeeeee60;      /* カード風の薄い背景色（透過あり） */
    --item-border-radius: 3px;      /* 角丸（小さめ） */
    --item-padding: 6px;            /* 要素内余白（全体に共通） */
    --text-muted: #333;           /* メインではない文字の少し薄い色設定 */
}

/*  --------------------------------------------------------------------------
    ページ全体の土台
    - 600pxで打ち止めにして読みやすい幅に固定（中央寄せ）
    - 背景が真っ白は明るすぎて目が痛いので薄く入れて、カード（item）との差を出す
    -------------------------------------------------------------------------- */
body {
    max-width: 600px;
    margin: auto;                  /* 画面中央へ */
    padding: 24px;                 /* 端末の狭い幅でも余白が残る（スマホの誤操作対策） */
    background-color: #eeeeee30;
    color: #111;
}

/* 見出し直下の説明文：左だけ少しインデントしてitemと頭を揃える */
header p {
    color: var(--text-muted);
    margin-left: 6px;
}

/*  ==========================================================================
    追加フォーム（input + button）
    --------------------------------------------------------------------------
    目的：横並びを「幅に依存しない」形で成立させる

    ここは崩れやすい箇所なので、意図を明記：
    - display:flex によって「横並び」をレイアウト仕様として保証
    - input は残り幅を全部使う（flex:1）
    - min-width:0 が重要：長い文字やプレースホルダがあるときに、
      input が縮まずにはみ出すのを防ぐ（Flexの定番ハマりどころ）
    ========================================================================== */
#addForm {
    background-color: var(--item-color);
    border-radius: var(--item-border-radius);
    padding: var(--item-padding);

    display: flex;                 /* 横並びの土台 */
    gap: 6px;                      /* input と button の間隔 */
    align-items: flex-end;         /* 下端を揃えて見た目を整える */
}

/* 入力欄：残り幅を担当する。狭い画面ではここが優先的に縮む */
#addInput {
    flex: 1 1 auto;                /* 伸びる・縮む・基準は内容 */
    min-width: 0;                  /* ★重要：縮むことを許可し、はみ出しを防止 */

    border-style: none none solid; /* 下線だけ（最小UI） */
    border-color: #ddd;
    padding: var(--item-padding);
    background-color: transparent; /* 親のカード背景を活かす */
}

/* 追加ボタン：クリック可能であることが伝わる最低限のUI */
#addForm button {
    color: var(--text-muted);
    border: 1px solid var(--text-muted);
    border-radius: var(--item-border-radius);
    background-color: #eeeeee80;
    padding: 3px 6px;
    cursor: pointer;
    user-select: none;             /* 連打やドラッグで文字選択されるのを防ぐ */
}

#addForm button:hover {
    background-color: #dddddd80;
}

/*  ==========================================================================
    リスト本体（ToDo項目）
    ========================================================================== */

/* ul/olの標準スタイル（黒点や左インデント）を消して、カード一覧にする */
#todoList {
    list-style-type: none;         /* 箇条書きマーカーを消す */
    padding: 0;                    /* 標準の左余白を消す */
    margin: 18px 0;                /* 上下の余白（フォームとの距離） */
}

/* 各ToDo項目：カード風。余白と角丸で「押せる/触れる」雰囲気を出す */
#todoList li {
    background-color: var(--item-color);
    border-radius: var(--item-border-radius);
    padding: var(--item-padding);
    margin: 6px 0;                 /* 項目間の間隔 */
    display: flex;                 /* テキストと×を横並び固定 */
    gap: 6px;                      /* 近すぎ防止 */
    align-items: center;           /* ×を上下中央へ */
}

.todoText {
    flex: 1 1 auto;                /* テキストが残り幅を担当 */
    /* ★重要：flexアイテムは既定で内容幅を優先しがちなので、min-width:0 で「縮めて折り返す」を許可する */
    min-width: 0;
    /* スペースなしの長文（URL/連続文字）でも強制的に折り返し、×を押せる位置に残す */
    overflow-wrap: anywhere;
}

/* ホバー：ほんの少しだけ強調して、操作対象だと分かるようにする */
#todoList li:hover {
    background-color: #eeeeee78;
}

/*  ==========================================================================
    削除ボタン（×）
    --------------------------------------------------------------------------
    実装方針：最小UI
    - 画像やボタン装飾は使わず、×記号を右寄せしてクリック可能にする
    - li を flex にして「テキストは残り幅」「×は必要幅」を分担（狭い画面でも崩れにくい）
    - 将来的に「押しやすさ」を上げるなら padding や hover を追加検討
    - ×を上下中央に揃えるのは li 側の align-items:center による（ボタン側で頑張らない）
    ========================================================================== */
.todoDelete {
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 6px;                /* タップ領域を少し増やす（最低限） */
    user-select: none;
    flex: 0 0 auto;                /* ×は必要幅だけ */
    line-height: 1;                /* 見た目の縦ズレを減らす */
}

/* 補足テキスト（注意書き等）：本文より弱く、itemと頭を揃える */
.notice {
    margin: 3em 6px;
    font-size: smaller;
    color: var(--text-muted);
}

/*  ======================================================================
    Reset（notice直下） - 目立たせすぎない最小UI
    目的：
    - 主役はフォーム/リスト。Resetは「控えめなテキストボタン」にして誤タップ誘因を減らす
    理由：
    - スマホ利用時、左右どちらの手でも端のスクロール操作に近づきすぎないよう中央配置にする
    ====================================================================== */
.resetArea {
    margin-bottom: 2.2em;    /* footer/adsへ行く前に呼吸を作る */
    display: flex;
    justify-content: center; /* 中央配置（左右どちらの手でも端の誤タップを避ける） */
    text-align: center;
}

.resetButton {
    font: inherit;
    font-size: smaller;      /* notice と同じ温度感 */
    color: var(--text-muted);
    background: transparent;
    border: none;            /* ボタン感を消す */
    padding: 0;              /* 余白も消して控えめに */
    cursor: pointer;
    user-select: none;
    opacity: 0.75;           /* 常時はさらに控えめ */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.resetButton:hover {
    opacity: 1;              /* ホバーで「押せる」を出す */
}

.resetButton:focus-visible {
    outline: 1px solid var(--text-muted);
    outline-offset: 4px;     /* キーボード操作の見失い防止（最小限） */
    border-radius: 4px;
}

/*  */
footer {
    text-align: center;
    color: var(--text-muted);
}

/* Google AdSenseの位置調整 */
#ads {
	text-align: center;
    margin-top: 5em;
}

/*  ======================================================================
    重複確認モーダル（最小UI）
    - デザインは今後差し替え前提
    ====================================================================== */
.modalBackdrop {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

/*  hidden属性が付いている間は必ず非表示にする
    - JSは hidden を切り替えるだけにして、表示制御を単純化する
    - display指定があっても確実に消えるよう !important を使う（事故防止） */
.modalBackdrop[hidden] {
    display: none !important;
}

.modalPanel {
    width: fit-content;          /* 中身（テキスト/ボタン）の幅に合わせる */
    max-width: min(92vw, 420px); /* ただし画面幅・上限は超えない（安全装置） */

    background: #ffffff99;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.modalTitle {
    font-weight: bold;
}

.modalActions {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
}

/*  ======================================================================
    既存itemを目立たせる（暫定：赤背景）
    - 目的：重複追加をキャンセルしたときに「既にある場所」を即座に理解できるようにする
    - 色やアニメーションは挙動が固まってから再検討（いまは最小UI優先）
    ====================================================================== */
.dupHighlight {
    background: #ffcccc !important;
}