/* ── フォント ── */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap');

/* ── リセット ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { overflow-x: hidden; }

/* ── カレンダーカード背景（通常 / 管理者） ── */
.glass {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 40px rgba(108, 99, 255, 0.10);
}
.admin-glass {
    background: rgba(255, 249, 237, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(251, 191, 36, 0.38);
    box-shadow: 0 8px 40px rgba(251, 191, 36, 0.14);
}

/* ── ボタン基本 ── */
.btn {
    border: none;
    border-radius: 11px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }
.btn-sm       { padding: 7px 13px; font-size: 12px; border-radius: 9px; }

/* ボタン色バリアント */
.btn-purple        { background: linear-gradient(135deg, #6c63ff, #a855f7); color: #fff; box-shadow: 0 3px 12px rgba(108, 99, 255, 0.30); }
.btn-purple:hover  { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(108, 99, 255, 0.44); }
.btn-amber         { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; box-shadow: 0 3px 12px rgba(245, 158, 11, 0.30); }
.btn-amber:hover   { transform: translateY(-2px); box-shadow: 0 7px 20px rgba(245, 158, 11, 0.44); }
.btn-green         { background: linear-gradient(135deg, #10b981, #059669); color: #fff; box-shadow: 0 3px 12px rgba( 16, 185, 129, 0.30); }
.btn-green:hover   { transform: translateY(-2px); box-shadow: 0 7px 18px rgba( 16, 185, 129, 0.44); }
.btn-red           { background: linear-gradient(135deg, #ff6584, #ff4757); color: #fff; box-shadow: 0 3px 10px rgba(255, 101, 132, 0.30); }
.btn-red:hover     { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255, 101, 132, 0.44); }
.btn-ghost         { background: rgba(108, 99, 255, 0.06); color: #6c63ff; border: 1.5px solid rgba(108, 99, 255, 0.17); }
.btn-ghost:hover   { background: rgba(108, 99, 255, 0.12); }
.btn-ghost-amber       { background: rgba(245, 158, 11, 0.07); color: #b45309; border: 1.5px solid rgba(245, 158, 11, 0.22); }
.btn-ghost-amber:hover { background: rgba(245, 158, 11, 0.14); }

/* ── フォームパーツ ── */
.lbl {
    font-size: 11px; font-weight: 800; color: #9ca3af;
    letter-spacing: 0.6px; text-transform: uppercase;
    margin-bottom: 5px; display: block;
}
/* 通常モード入力欄 */
/* font-size:16px はスマホでフォーカス時の自動ズームを防ぐ（iOS は 16px 未満でズームする） */
.inp {
    background: rgba(108, 99, 255, 0.04);
    border: 1.5px solid rgba(108, 99, 255, 0.14);
    color: #2d2d3a; border-radius: 10px;
    padding: 9px 11px; font-size: 16px;
    outline: none; width: 100%; font-family: inherit; transition: all 0.2s;
}
.inp:focus { border-color: #6c63ff; box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.10); }
/* 管理者モード入力欄（同様にズーム防止） */
.inp-a {
    background: rgba(245, 158, 11, 0.04);
    border: 1.5px solid rgba(245, 158, 11, 0.20);
    color: #2d2d3a; border-radius: 10px;
    padding: 9px 11px; font-size: 16px;
    outline: none; width: 100%; font-family: inherit; transition: all 0.2s;
}
.inp-a:focus { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12); }
/* PC では 13px に戻す */
@media (min-width: 600px) {
    .inp, .inp-a { font-size: 13px; }
}
/* セレクトのドロップダウン背景 */
select.inp option, select.inp-a option { background: white; color: #2d2d3a; }

/* ── カレンダー内の予定ブロック ── */
.blk {
    position: absolute; left: 2px; right: 2px;
    border: none; border-radius: 8px; padding: 5px 7px;
    overflow: hidden; cursor: pointer;
    transition: transform 0.14s, box-shadow 0.14s;
}
.blk:hover { transform: scale(1.03); z-index: 20; }

/* ── カレンダー列・グリッド線 ── */
.day-col { flex: 1; min-width: 0; position: relative; }
.gl-mj   { position: absolute; left: 0; right: 0; height: 1.5px; pointer-events: none; } /* 偶数時間線（太） */
.gl-mn   { position: absolute; left: 0; right: 0; height: 1px;   pointer-events: none; } /* 奇数時間線（細） */

/* ── カレンダー本体の高さ（スマホ: 画面幅に合わせる / PC: 固定） ── */
.cal-body { height: clamp(400px, calc(100vw - 28px), 700px); overflow-y: hidden; }
@media (min-width: 600px) { .cal-body { height: 600px; overflow-y: hidden; } }

/* ── モーダル・オーバーレイ ── */
/* スマホ・PC ともに画面中央に表示 */
.overlay {
    position: fixed; inset: 0;
    background: rgba(45, 45, 58, 0.28);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    flex-direction: column;
    z-index: 1000; padding: 12px;
    animation: fi 0.15s ease;
}
@media (min-width: 600px) { .overlay { padding: 16px; } }
.modal {
    background: white;
    border-radius: 20px; /* 常に全角丸 */
    padding: 22px 20px; width: 100%; max-width: 520px;
    box-shadow: 0 8px 40px rgba(45, 45, 58, 0.18);
    animation: su 0.2s ease; max-height: 88vh; overflow-y: auto;
}
@media (min-width: 600px) {
    .modal {
    padding: 26px 28px;
    box-shadow: 0 24px 64px rgba(45, 45, 58, 0.15), 0 0 0 1px rgba(108, 99, 255, 0.06);
    }
}
/* ドラッグバーは廃止（不要） */
.drag-bar { display: none; }

/* ── 右クリック コンテキストメニュー ── */
.ctx {
    position: fixed; z-index: 2000; background: white;
    border-radius: 13px; padding: 5px; min-width: 160px;
    box-shadow: 0 8px 36px rgba(45, 45, 58, 0.17), 0 0 0 1px rgba(108, 99, 255, 0.08);
    animation: ci 0.13s cubic-bezier(.34, 1.56, .64, 1);
}
.ci {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 13px; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
    color: #2d2d3a; font-family: inherit;
    border: none; background: transparent; width: 100%; text-align: left;
    transition: background 0.1s;
}
.ci:hover          { background: rgba(108, 99, 255, 0.07); color: #6c63ff; }
.ci.red            { color: #ef4444; }
.ci.red:hover      { background: rgba(239, 68, 68, 0.07); color: #dc2626; }
.cdiv              { height: 1px; background: rgba(108, 99, 255, 0.08); margin: 3px 0; }

/* ── メッセージボックス（エラー赤 / 警告黄 / 成功緑） ── */
.wbox   { background: linear-gradient(135deg, #fff5f5, #fff0f3); border: 1.5px solid #fca5a5; border-radius: 10px; padding: 10px 13px; color: #dc2626; font-size: 13px; font-weight: 600; }
.wbox-a { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1.5px solid #fbbf24; border-radius: 10px; padding: 10px 13px; color: #92400e; font-size: 13px; font-weight: 600; }
.sbox   { background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1.5px solid #86efac; border-radius: 10px; padding: 10px 13px; color: #166534; font-size: 13px; font-weight: 600; }

/* ── 詳細モーダルの情報行 ── */
.irow {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 13px; border-radius: 11px;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.04), rgba(168, 85, 247, 0.03));
    border: 1px solid rgba(108, 99, 255, 0.08);
}

/* ── バッジ ── */
.today-b { display: inline-block; background: linear-gradient(135deg, #6c63ff, #a855f7); color: white; border-radius: 20px; padding: 2px 8px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; }
.adm-b   { display: inline-flex; align-items: center; background: linear-gradient(135deg, #f59e0b, #d97706); color: white; border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 800; }

/* ── 週ナビゲーションボタン（管理者） ── */
.wkbtn       { background: rgba(245, 158, 11, 0.09); color: #b45309; border: 1.5px solid rgba(245, 158, 11, 0.20); border-radius: 9px; padding: 6px 11px; font-size: 12px; cursor: pointer; font-family: inherit; font-weight: 700; transition: all 0.14s; white-space: nowrap; }
.wkbtn:hover { background: rgba(245, 158, 11, 0.17); }

/* ── PIN入力ボックス ── */
.pin-wrap { display: flex; gap: 8px; justify-content: center; margin: 8px 0; }
.pin-d {
    width: 52px; height: 54px; border-radius: 12px;
    border: 2px solid rgba(108, 99, 255, 0.18); background: rgba(108, 99, 255, 0.04);
    text-align: center; font-size: 22px; font-weight: 800; color: #2d2d3a;
    outline: none; font-family: inherit; transition: all 0.18s;
}
.pin-d:focus { border-color: #6c63ff; box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12); }
.pin-d.err   { border-color: #fca5a5; background: rgba(255, 101, 132, 0.04); }

/* ── 予定追加フォームの行カード（通常 / 管理者） ── */
.row-card        { background: rgba(108, 99, 255, 0.03); border: 1.5px solid rgba(108, 99, 255, 0.12); border-radius: 14px; padding: 14px; position: relative; }
.row-card-a      { background: rgba(245, 158, 11, 0.03); border: 1.5px solid rgba(245, 158, 11, 0.15); border-radius: 14px; padding: 14px; position: relative; }
.row-card.warn-row   { border-color: #fca5a5; background: rgba(255, 101, 132, 0.04); }
.row-card-a.warn-row { border-color: #fbbf24; background: rgba(245, 158, 11, 0.06); }

/* ── アニメーション ── */
@keyframes fi    { from { opacity: 0; }                                          to { opacity: 1; }                                       }
@keyframes su    { from { opacity: 0; transform: translateY(14px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1);    } }
@keyframes su-mb { from { opacity: 0; transform: translateY(40px);              } to { opacity: 1; transform: translateY(0);             } }
@keyframes ci    { from { opacity: 0; transform: scale(0.86) translateY(-5px);  } to { opacity: 1; transform: scale(1) translateY(0);   } }
@keyframes bi    { from { opacity: 0; transform: scaleY(0.6);                   } to { opacity: 1; transform: scaleY(1);                } }
.ba { animation: bi 0.25s cubic-bezier(.34, 1.56, .64, 1) forwards; transform-origin: top; }

/* ── 操作ボタン行：スマホのみ横スクロール ── */
@media (max-width: 767px) {
    .btn-scroll-wrap {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .btn-scroll-wrap::-webkit-scrollbar { display: none; }
    .btn-scroll-wrap > * { flex-shrink: 0; }
}