/*
 * app.css — Yoteru のデザイントークンと共通コンポーネント。
 *
 * Tailwind CSS（CDN）はレイアウト用ユーティリティとして併用する。
 * 本ファイルは「Tailwind で表現しづらいもの」と「重複しがちな組み合わせ」だけを担当し、
 * ここで定義したクラス（.btn / .field / .card 等）を付けた要素には
 * padding・角丸・背景色系のユーティリティを重ねない（特異度の衝突を避けるため）。
 */

:root {
    /* ベース */
    --c-bg: #F5F7F8;
    --c-card: #FFFFFF;
    --c-line: #E4E9EC;
    --c-ink: #12212F;
    --c-ink-2: #5C6B7A;
    --c-ink-3: #8D9AA6;

    /*
     * ブランドカラー（Yoteru ブルー）。
     *
     * iOS / Notion / Linear のような「彩度を抑えた落ち着いた青」に寄せている（S 84%→54%）。
     * ボタン・タブ・リンク・アイコン・フォーカスリング・ホバーはすべてこの 3 つから引くこと。
     * --c-accent は白文字とのコントラスト 4.8:1、--c-accent-d は白背景に対して 6.5:1 で
     * どちらも WCAG AA を満たす（以前の #2F80ED は白文字で 3.9:1 と不足していた）。
     */
    --c-accent: #3B72C4;
    --c-accent-d: #2F5DA3;
    --c-accent-s: #EDF3FB;

    /* 状態色（淡色背景 + 濃色文字。色だけに頼らずラベルを必ず添える） */
    --c-done-bg: #E9F5EE;
    --c-done-fg: #1C7A4C;
    --c-warn-bg: #FDF1E3;
    --c-warn-fg: #A25B12;
    --c-danger-bg: #FCECEA;
    --c-danger-fg: #B3251C;
    --c-info-bg: #E9F1FA;
    --c-info-fg: #1A5C9E;
    --c-neutral-bg: #EEF1F3;

    /* 形 */
    --r-card: 16px;
    --r-xl: 20px;
    --r-control: 10px;
    --r-pill: 999px;
    --shadow-card: 0 1px 2px rgba(18, 33, 47, .04), 0 1px 3px rgba(18, 33, 47, .06);
    --shadow-pop: 0 4px 6px -1px rgba(18, 33, 47, .08), 0 12px 24px -8px rgba(18, 33, 47, .18);

    /* コントロール寸法（ボタン・入力欄で共通） */
    --control-h: 44px;
    --icon-btn: 40px;
}

/* ---------------------------------------------------------------- base */

/*
 * font-family は html ではなく body に指定する。
 * Tailwind の Preflight が html に font-family を当てるため、
 * body 自身の宣言にしておくと読み込み順に関係なくこちらが優先される。
 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
        "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* 時刻・日付・件数は桁を揃える */
.tnum {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* フォーカスリングは消さない */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* モーダルを開いている間は背面をスクロールさせない */
body.is-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------- appbar */

.appbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--c-card);
    border-bottom: 1px solid var(--c-line);
}

/*
 * ヘッダーの中身。ロゴを「ヘッダーの中央」に置くための 3 カラム。
 *
 * 左右を 1fr にすると 2 列が必ず同じ幅になるので、右端にボタンがある画面（404）でも
 * 中央列のロゴが押しのけられず、ボタンの有無に関わらず同じ位置に出る。
 * flex + justify-content: space-between だと、ボタンが無い画面とある画面でロゴの
 * 位置が変わってしまう。
 */
.appbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: .75rem;
    height: 64px;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.appbar__brand {
    grid-column: 2;
    justify-self: center;
}

.appbar__action {
    grid-column: 3;
    justify-self: end;
}

/*
 * ブランドロゴ「Yoteru ヨテル」。
 *
 * アイコンを持たない文字だけのロゴ。ワードマークの右に読みのカナを小さく添えた横並びで、
 * ベースラインを揃えて 1 つのロゴとして読ませる。
 * 色はワードマーク・カナともブランド色にして 1 つの塊に見せ、上下関係はサイズだけで付ける
 * （カナを別色にすると 2 つの要素が並んでいるように見えてしまう）。
 * 寸法はスマホを基準に決め、640px 以上で少しだけ大きくする。
 */
.brand {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    color: var(--c-accent);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * 欧文ワードマークだけを斜体にする。和文フォントに真の斜体は無く、カナに font-style を
 * 当てると合成の疑似斜体になって字面が崩れるため、カナは立体のままにする。
 */
.brand__name {
    font-size: 24px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: -.01em;
    /* 斜体で右に倒れる分、読みとの間隔が詰まって見えるのを補う */
    padding-right: .06em;
}

.brand__kana {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
}

@media (min-width: 640px) {
    .brand__name {
        font-size: 26px;
    }

    .brand__kana {
        font-size: 14px;
    }
}

/* ----------------------------------------------------------- typography */

.page-title {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.35;
}

@media (min-width: 640px) {
    .page-title {
        font-size: 28px;
    }
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.01em;
}

.eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--c-ink-3);
}

.muted {
    color: var(--c-ink-2);
}

/* ----------------------------------------------------------------- card */

.card {
    background-color: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-card);
    padding: 20px;
}

@media (min-width: 640px) {
    .card {
        padding: 28px;
    }
}

.card--tight {
    padding: 16px;
}

@media (min-width: 640px) {
    .card--tight {
        padding: 20px;
    }
}

.hairline {
    height: 1px;
    background-color: var(--c-line);
    border: 0;
}

/* -------------------------------------------------------------- buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    height: var(--control-h);
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--r-control);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn--primary {
    background-color: var(--c-accent);
    color: #FFFFFF;
}

.btn--primary:hover {
    background-color: var(--c-accent-d);
}

.btn--quiet {
    background-color: var(--c-card);
    border-color: var(--c-line);
    color: var(--c-ink);
}

.btn--quiet:hover {
    border-color: var(--c-ink-3);
}

/* 削除は常時強調しない。hover で初めて危険色になる */
.btn--danger {
    background-color: var(--c-card);
    border-color: var(--c-line);
    color: var(--c-ink-2);
}

.btn--danger:hover {
    background-color: var(--c-danger-bg);
    border-color: var(--c-danger-bg);
    color: var(--c-danger-fg);
}

/* 小さめ（カード内・行内の補助アクション） */
.btn--sm {
    height: 32px;
    padding: 0 .75rem;
    font-size: 13px;
    border-radius: 8px;
}

.btn--block {
    width: 100%;
}

/*
 * .btn / .link は display を持つため、hidden 属性の UA スタイル（[hidden]{display:none}）に
 * 特異度で勝ってしまう。JS で出し分けるボタンがあるので明示的に打ち消す。
 */
.btn[hidden],
.link[hidden] {
    display: none;
}

.btn[aria-disabled="true"] {
    background-color: var(--c-neutral-bg);
    border-color: transparent;
    color: var(--c-ink-3);
    cursor: not-allowed;
    pointer-events: none;
}

/* 行内のアイコンのみボタン。aria-label を必ず付ける */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--icon-btn);
    height: var(--icon-btn);
    flex-shrink: 0;
    border: 0;
    border-radius: var(--r-control);
    background-color: transparent;
    color: var(--c-ink-3);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.btn-icon:hover {
    background-color: var(--c-neutral-bg);
    color: var(--c-ink);
}

.btn-icon--danger:hover {
    background-color: var(--c-danger-bg);
    color: var(--c-danger-fg);
}

/* 点線枠の「追加」ボタン。日カードの下の「やりたいことから追加」用 */
.btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    width: 100%;
    height: 40px;
    padding: 0 .75rem;
    border: 1px dashed var(--c-line);
    border-radius: var(--r-control);
    background-color: var(--c-card);
    color: var(--c-accent-d);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.btn-add:hover {
    background-color: var(--c-accent-s);
    border-color: var(--c-accent);
}

/* テキストリンク（アクセント） */
.link {
    color: var(--c-accent);
    font-weight: 500;
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.link:hover {
    color: var(--c-accent-d);
    text-decoration: underline;
}

/* ----------------------------------------------------------------- pill */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 26px;
    padding: 0 .625rem;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.pill--live {
    background-color: var(--c-accent-s);
    color: var(--c-accent-d);
}

.pill--info {
    background-color: var(--c-info-bg);
    color: var(--c-info-fg);
}

.pill--done {
    background-color: var(--c-done-bg);
    color: var(--c-done-fg);
}

.pill--muted {
    background-color: var(--c-neutral-bg);
    color: var(--c-ink-2);
}

/* ---------------------------------------------------------------- forms */

.label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink);
    margin-bottom: .375rem;
}

/* 「予定期間」のような親ラベルに従属する補助ラベル（例: 開始日 / 終了日）。
   一段階小さく・軽い階層として見せる */
.label-sub {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--c-ink-2);
    margin-bottom: .375rem;
}

.field {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: var(--control-h);
    padding: .5rem .75rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background-color: var(--c-card);
    color: var(--c-ink);
    /* 16px 未満だと iPhone Safari がフォーカス時に自動ズームしてしまう */
    font-size: 16px;
    line-height: 1.6;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* iOS Safari は input[type=date] の内部レイアウトに独自のパディングを持つため、
   モバイル幅では左右パディングを少し絞ってカレンダーアイコンまで収める */
@media (max-width: 639px) {
    input[type="date"].field {
        padding-left: .625rem;
        padding-right: .625rem;
    }
}

.field::placeholder {
    color: var(--c-ink-3);
}

.field:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-s);
}

.field:disabled {
    background-color: var(--c-neutral-bg);
    color: var(--c-ink-3);
}

.field[aria-invalid="true"] {
    border-color: var(--c-danger-fg);
}

textarea.field {
    resize: vertical;
}

.field-error {
    margin-top: .375rem;
    font-size: 13px;
    color: var(--c-danger-fg);
}

.form-alert {
    border-radius: var(--r-control);
    background-color: var(--c-danger-bg);
    color: var(--c-danger-fg);
    font-size: 14px;
    padding: .75rem 1rem;
}

/* -------------------------------------------------------------- checkbox */

.check {
    width: 20px;
    height: 20px;
    accent-color: var(--c-accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* チェックボックス + ラベルで 44px のタップ領域を作る行（モーダル内の選択リスト） */
.check-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .25rem .5rem;
    border-radius: var(--r-control);
    cursor: pointer;
}

.check-row:hover {
    background-color: var(--c-neutral-bg);
}

.check-row__label {
    min-width: 0;
    flex: 1;
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* インラインの「時間未定」トグル */
.check-inline {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 14px;
    color: var(--c-ink);
    cursor: pointer;
}

/* ----------------------------------------------------- 時刻入力（時 / 分） */

/*
 * 「時」と「分」を並べる行。
 * 基本は 1 行に収め、モーダルの幅に入りきらないときだけ折り返す。
 */
.time-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.time-row__pair {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* 中身は 2 桁だけなので、.field の幅いっぱいから内容に見合う幅へ絞る */
.field--time {
    width: auto;
    min-width: 4.75rem;
    padding-right: .5rem;
}

.time-row__unit {
    font-size: 14px;
    color: var(--c-ink-2);
}

/* 時間未定のあいだは単位まで沈める（select だけ灰色だと消し忘れに見えるため） */
.time-row.is-disabled .time-row__unit {
    color: var(--c-ink-3);
}

/*
 * プルダウンを下向きに揃える。
 *
 * 「時」は 24 件あってモーダル内では下に収まらないため、ブラウザが選択肢を上向きへ
 * 反転させる。12 件の「分」は収まるので下向きに出る。結果として 2 つの向きが揃わず、
 * 上向きのときはモーダル全体を覆ってしまう。
 * ネイティブのプルダウンは位置も高さも指定できないので、対応ブラウザに限って
 * appearance: base-select（選択肢が DOM 要素として描画される）へ切り替え、
 * 下向き固定と高さの上限を自分で指定する。未対応のブラウザは従来どおりで、
 * select 要素そのものは置き換えない（自前のドロップダウンは作らない）。
 *
 * スマートフォンは対象外にしている（pointer: coarse）。iOS / Android は選択肢を
 * ホイールやダイアログで出すため向きの問題が無く、OS 標準の操作感を残す方がよい。
 */
@media (pointer: fine) {
    @supports (appearance: base-select) {
        .field--time,
        .field--time::picker(select) {
            appearance: base-select;
        }

        /*
         * base-select にすると select は「選択中の値 + 矢印」を並べる箱になる。
         * .field の display: block のままだと矢印が値の下へ回り込むので、
         * ここだけ横並びに戻して閉じた状態の見た目を保つ。
         */
        .field--time {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: .375rem;
        }

        .field--time::picker(select) {
            /* 常に select の真下へ。上向きへの反転をやめさせる */
            position-area: block-end span-inline-end;
            position-try: none;
            min-width: anchor-size(width);
            max-height: 13.5rem;
            margin-block-start: .25rem;
            padding: .25rem;
            overflow-y: auto;
            border: 1px solid var(--c-line);
            border-radius: var(--r-control);
            background-color: var(--c-card);
            box-shadow: var(--shadow-pop);
        }

        .field--time option {
            display: block;
            padding: .375rem .625rem;
            border-radius: 6px;
            color: var(--c-ink);
            cursor: pointer;
        }

        /*
         * 未選択を表す "--" を一覧から外す。
         * hidden 属性の display: none はユーザーエージェント側の弱い指定なので、
         * 上の .field--time option に負けて一覧へ出てしまう。ここで戻す。
         */
        .field--time option[hidden] {
            display: none;
        }

        /* 選択中は背景で示すので、幅が揺れるチェックマークは出さない */
        .field--time option::checkmark {
            display: none;
        }

        .field--time option:hover {
            background-color: var(--c-neutral-bg);
        }

        .field--time option:checked {
            background-color: var(--c-accent-s);
            color: var(--c-accent-d);
            font-weight: 600;
        }

        /* base-select は矢印も自前になるので、閉じた状態の見た目を元に戻す */
        .field--time::picker-icon {
            color: var(--c-ink-3);
            transition: transform .15s ease;
        }

        .field--time:open::picker-icon {
            transform: rotate(180deg);
        }
    }
}

/* ----------------------------------------------------------------- tabs */

.tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    border-bottom: 1px solid var(--c-line);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
    height: 46px;
    padding: 0 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    background: none;
    color: var(--c-ink-2);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.tab:hover {
    color: var(--c-ink);
}

.tab[aria-selected="true"] {
    color: var(--c-accent-d);
    border-bottom-color: var(--c-accent);
    font-weight: 600;
}

.tab__count {
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--c-ink-3);
}

.tab[aria-selected="true"] .tab__count {
    color: var(--c-accent);
}

/* ------------------------------------------------------------ URL 共有 */

/*
 * 「このURLを共有するとみんなで編集できます」＋コピーボタン。
 * ログインが無い代わりにこの1箱が共同編集の入口なので、予定名の直下に必ず置く。
 */
.share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    padding: 12px 14px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background-color: var(--c-card);
}

.share__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: var(--r-pill);
    background-color: var(--c-accent-s);
    color: var(--c-accent-d);
}

.share__text {
    min-width: 0;
    flex: 1;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-ink-2);
}

/* 共有 URL 自体（作成完了カードで見せる読み取り専用の値） */
.share__url {
    display: block;
    width: 100%;
    padding: .5rem .75rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    background-color: var(--c-bg);
    color: var(--c-ink);
    font-size: 13px;
    overflow-wrap: anywhere;
}

/* -------------------------------------------------------------- banner */

.banner {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: 12px 14px;
    border-radius: var(--r-card);
    font-size: 14px;
}

.banner--success {
    background-color: var(--c-done-bg);
    color: var(--c-done-fg);
}

.banner--error {
    background-color: var(--c-danger-bg);
    color: var(--c-danger-fg);
}

.banner svg {
    flex-shrink: 0;
    margin-top: 3px;
}

/* --------------------------------------------------- やりたいこと1行 */

.wish {
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    padding: 14px 0;
    border-bottom: 1px solid var(--c-line);
}

.wish:last-child {
    border-bottom: 0;
}

/*
 * カード本体そのものがボタン。押すと配置済みならその日へ移動し、
 * 未追加なら「予定表に追加」モーダルが開く（同じ操作のボタンをカード内に重ねない）。
 * 行の左端を揃えたいので、内側の padding は負の margin で相殺する。
 */
.wish__body {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    flex: 1;
    padding: 6px 8px;
    margin: -6px -8px;
    border: 0;
    border-radius: var(--r-control);
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.wish__body:hover {
    background-color: var(--c-neutral-bg);
}

.wish__main {
    min-width: 0;
    flex: 1;
}

/* 押せることを示す山括弧。装飾なので単独のボタンにはしない */
.wish__chevron {
    flex-shrink: 0;
    color: var(--c-ink-3);
}

.wish__title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* 「予定表：2件」。0件のときは muted 表示に切り替える */
.wish__count {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-top: 6px;
    padding: 0 .5rem;
    border-radius: 6px;
    background-color: var(--c-done-bg);
    color: var(--c-done-fg);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wish__count--none {
    background-color: var(--c-neutral-bg);
    color: var(--c-ink-3);
}

/* 配置先（「2日目 10:00, 3日目 (未定)」） */
.wish__places {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
}

.wish__actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-shrink: 0;
}

/* ------------------------------------------------------- ドロップダウン */

.menu {
    position: relative;
}

.menu__list {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 40;
    min-width: 200px;
    padding: 6px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background-color: var(--c-card);
    box-shadow: var(--shadow-pop);
}

.menu__list[hidden] {
    display: none;
}

.menu__item {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .5rem .625rem;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--c-ink);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.menu__item:hover {
    background-color: var(--c-neutral-bg);
}

.menu__item--accent {
    color: var(--c-accent-d);
}

.menu__item--accent:hover {
    background-color: var(--c-accent-s);
}

.menu__item--danger {
    color: var(--c-danger-fg);
}

.menu__item--danger:hover {
    background-color: var(--c-danger-bg);
}

.menu__item[aria-disabled="true"] {
    color: var(--c-ink-3);
    cursor: not-allowed;
    pointer-events: none;
}

.menu__sep {
    height: 1px;
    margin: 4px 2px;
    background-color: var(--c-line);
}

/* ------------------------------------------------------------- 日カード */

.day {
    padding: 16px;
    border: 1px solid var(--c-line);
    border-radius: var(--r-card);
    background-color: var(--c-card);
    box-shadow: var(--shadow-card);
    /* ヘッダーの sticky 位置合わせと、リンクジャンプ時に見出しが隠れないための余白 */
    scroll-margin-top: 80px;
}

.day__head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: 12px;
}

.day__number {
    font-size: 15px;
    font-weight: 600;
}

.day__date {
    font-size: 13px;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
}

/*
 * 日カード下部のアクション。「新しい予定を追加」は画面上部の 1 つに集約したので、
 * ここに残るのは追加先の日がこの日カードで決まる「やりたいことから追加」だけ。
 */
.day__actions {
    margin-top: 12px;
}

/* -------------------------------------------------------------- 予定行 */

.plan-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/*
 * 予定 1 件。カード全体がボタンで、押すと予定詳細モーダルが開く
 * （コメントと URL はカードに出さず、詳細でのみ見せる仕様）。
 */
.plan {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--c-line);
    border-radius: 12px;
    background-color: var(--c-card);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.plan:hover {
    border-color: var(--c-accent);
    background-color: var(--c-accent-s);
}

.plan__time {
    font-size: 13px;
    font-weight: 600;
    color: var(--c-ink-2);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

.plan__time--undecided {
    font-size: 11px;
    font-weight: 600;
    color: var(--c-ink-3);
    letter-spacing: 0;
}

.plan__title {
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* コメント・URL があることだけを示す小さな手がかり */
.plan__hints {
    display: flex;
    align-items: center;
    gap: .375rem;
    margin-top: 2px;
    color: var(--c-ink-3);
}

/* --------------------------------------------------------- empty state */

.empty {
    padding: 1.25rem 0;
    color: var(--c-ink-3);
    font-size: 14px;
    text-align: center;
}

/* ヒント（画面下部の補足） */
.hint {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding: 14px 16px;
    border-radius: var(--r-control);
    background-color: var(--c-warn-bg);
    color: var(--c-warn-fg);
    font-size: 13px;
    line-height: 1.7;
    max-width: 32rem;
}

.hint svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* -------------------------------------------------------------- モーダル */

/*
 * モーダルは常にサーバー側で描画しておき、JS で hidden を外して見せる。
 * スマホでは下から出るシート、640px 以上では中央のダイアログになる。
 */
.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 50;
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background-color: rgba(18, 33, 47, .45);
    cursor: pointer;
}

.modal__panel {
    /*
     * .modal の flex 中央寄せに委ねると、"auto 高さの flex item を max-height で
     * 頭打ちにし、それを内部の flex-shrink へ伝える" という経路になり、body 側が
     * 実際に縮むかどうかがブラウザの解釈にぶれる（縮まずカードごと画面外へ
     * はみ出すケースがあった）。position: fixed + transform でビューポートへ
     * 直接固定し、max-height を「単独の箱の上限」として素直に効かせる。
     */
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    /* それでも body 側が縮み切らなかったときに内容がカードの外へ突き抜けるのを防ぐ保険 */
    overflow: hidden;
    width: 100%;
    /*
     * dvh はモバイルのアドレスバー分の伸縮を反映した実際の表示領域を使う。
     * 未対応ブラウザ向けに vh を先に書いておき、対応ブラウザでは dvh で上書きする。
     * これが無いと、アドレスバー表示中は 90vh が実際の表示領域より大きくなり、
     * フッターのボタンが画面下からはみ出して押せなくなる。
     */
    max-height: 90vh;
    max-height: 90dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    background-color: var(--c-card);
    box-shadow: var(--shadow-pop);
}

/*
 * .modal__panel の実の子要素は .modal__head / __body / __foot ではなく、それらを
 * まとめて包む <form> 1 個だけ（CSRF の hidden input も同じ階層にある）。
 * display: grid を .modal__panel に置いても、実際にグリッド行へ配置されるのは
 * この <form> という「1個の箱」でしかなく、中の head/body/foot には一切効いて
 * いなかった（これが今まで4回試したレイアウトが軒並み効かなかった実の原因）。
 * <form> を display: contents にして箱としての存在を消し、head/body/foot を
 * .modal__panel の直接のグリッドアイテムとして扱わせる。DOM 上は form の子の
 * ままなので、送信対象やバリデーションには影響しない。
 */
.modal__panel > form {
    display: contents;
}

@media (min-width: 640px) {
    .modal__panel {
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        /* .modal に padding が無くなった分、左右の余白をここで確保する */
        width: calc(100% - 48px);
        max-width: 480px;
        border-radius: var(--r-xl);
        /* 上下の余白も含めて画面に収めるため、100dvh 全体より少し控えめにする */
        max-height: 85vh;
        max-height: 85dvh;
    }
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 16px 16px 12px;
    border-bottom: 1px solid var(--c-line);
}

.modal__title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.modal__body {
    /* grid 行の minmax(0, 1fr) と揃えて、この要素自身も 0 まで縮んでよいと明示する */
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
}

.modal__foot {
    display: flex;
    gap: .625rem;
    padding: 12px 16px;
    border-top: 1px solid var(--c-line);
}

/*
 * モーダル内の長くなりがちな一覧（追加先の日、やりたいこと一覧）専用のスクロール領域。
 * 一覧だけをここで区切ることで、他の項目（時間・コメント・URL）やフッターのボタンは
 * 常にモーダルの通常の位置に留まる。件数が少なく収まる場合は見た目上ただの箱になり、
 * スクロールは発生しない。
 */
.scroll-list {
    max-height: 16rem;
    overflow-y: auto;
    border: 1px solid var(--c-line);
    border-radius: var(--r-control);
    padding: 4px;
}

.modal__foot .btn {
    flex: 1;
}

/*
 * 表示だけ先頭へ回すボタン。予定モーダルの「削除」は Enter の既定送信ボタンに
 * ならないよう DOM 上は最後に置いているので、見た目の位置をここで戻す。
 */
.modal__foot-lead {
    order: -1;
}

/* 追加先の日付など、モーダル内の説明文 */
.modal__note {
    font-size: 13px;
    color: var(--c-ink-2);
}