:root { --row-h:60px; --label-w:220px; }
.table{
    display:grid;
    grid-template-columns: var(--label-w) repeat(var(--hours), var(--hour-w));
    gap: 8px; column-gap:0;
    width:max(100%, calc(var(--label-w) + var(--hours)*var(--hour-w)));
}
.row{display:contents}
.label{
    position:sticky; left:0; z-index:2; padding:8px 8px 0 0; font-weight:700;
    border-right:1px solid var(--border, #ddd); background:var(--bg, #fff); color:var(--fg, #111);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; height:var(--row-h); line-height:var(--row-h);
}
.lane{
    position:relative; height:var(--row-h); border-bottom:1px dashed var(--border, #ccc);
    grid-column: 2 / span var(--hours);
    background-image:
        linear-gradient(to right, var(--gridWeak, rgba(0,0,0,.06)) 1px, transparent 1px),
        linear-gradient(to right, var(--gridStrong, rgba(0,0,0,.14)) 1px, transparent 1px);
    background-size: calc(var(--hour-w)/4) 100%, var(--hour-w) 100%;
    background-repeat: repeat-x, repeat-x;
    background-position: 0 0, 0 0;
}
.slot{
    position:absolute;
    height:calc(var(--row-h) - 12px);
    border:2px solid var(--slotBorder, #5ba2a2);
    border-radius:10px;
    background:var(--slotBg, rgba(0,128,128,.10));
    font-size:12px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.slot:hover{ background:var(--slotBgHover, rgba(0,128,128,.18)); }
.t{ font-size:12px; }

/* テーマ */
:root[data-theme="light"]{
    --bg:#ffffff; --fg:#0b1220; --muted:#475569; --border:#d1d5db;
    --gridWeak:rgba(0,0,0,0.06); --gridStrong:rgba(0,0,0,0.14);
    --slotBorder:#5ba2a2; --slotBg:rgba(0,128,128,.10); --slotBgHover:rgba(0,128,128,.18);
}
:root[data-theme="dark"]{
    --bg:#0f172a; --fg:#e2e8f0; --muted:#a3b2c4; --border:#334155;
    --gridWeak:rgba(255,255,255,0.06); --gridStrong:rgba(255,255,255,0.12);
    --slotBorder:#22d3ee; --slotBg:rgba(34,211,238,.16); --slotBgHover:rgba(34,211,238,.28);
}
html,body{ background:var(--bg); color:var(--fg); font:14px/1.5 system-ui,"Noto Sans JP",sans-serif; margin:0 }

/* 時刻ヘッダー */
.timehead{
    position:sticky; top:0; z-index:5;
    height:24px; line-height:24px; color:var(--muted);
    background:var(--bg); border-bottom:1px solid var(--border);
    text-align:left; padding-left:4px; transform:translateX(-15%);
    font-variant-numeric:tabular-nums;
}

/* 現在時刻バー */
.now-line{
    position:absolute; top:0; bottom:0; width:2px;
    background:var(--slotBorder); box-shadow:0 0 8px var(--slotBorder);
    pointer-events:none; transform:translateX(-1px);
}
.now-badge{
    position:absolute; top:-16px; left:-16px; font-size:11px; padding:1px 6px; border-radius:6px;
    background:var(--slotBorder); color:#0b1220;
}
:root[data-theme="dark"] .now-badge{ color:#031016; }

/* レスポンシブ */
@media (max-width:640px)
{
    :root{ --label-w:120px; --row-h:52px; }
    .timehead{ font-size:12px; }
    .label{ padding:6px 6px 0 0; font-size:12px; }
    .slot{ font-size:11px; padding:4px 6px; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.25); }
    .t{ font-size:12px; }
    .now-badge{ font-size:10px; top:-14px; left:-14px; }
}

/* 通常リンク */
a {
    color: var(--link-color);
    text-decoration: none;
}

/* ダークモード */
[data-theme="dark"] a {
    color: #7fcfff;  /* 明るい青で視認性を確保 */
}

/* ライトモード */
[data-theme="light"] a {
    color: #0056b3;  /* 落ち着いた濃い青 */
}

/* ===== 1週間カレンダー（ダーク/ライトは既存のCSS変数に追従） ===== */
.dp
{
    position:relative;
    display:inline-block;
    margin-inline:8px
}
.dp-toggle
{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border:1px solid var(--border); border-radius:10px;
    background:color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); color:var(--fg);
    font:inherit; cursor:pointer; box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.dp-toggle svg{ width:18px; height:18px; opacity:.8 }
.dp-pop{
    position:absolute; inset:auto auto 0 0; transform:translateY(calc(100% + 8px));
    min-width: 320px; padding:10px; border:1px solid var(--border); border-radius:12px;
    background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.25);
    display:none; z-index:60;
}
.dp[aria-expanded="true"] .dp-pop{ display:block; }
.dp-week{
    display:grid; grid-template-columns: repeat(7, 1fr); gap:8px;
}
.dp-day{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:10px 6px; border:1px solid var(--border); border-radius:10px;
    background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%);
    cursor:pointer; user-select:none;
}
.dp-day:hover{ filter:brightness(1.06) }
.dp-day[aria-current="date"]{ outline:2px solid var(--slotBorder); outline-offset:-2px }
.dp-day[aria-selected="true"]{
    border-color:var(--slotBorder);
    background:color-mix(in oklab, var(--slotBg) 60%, var(--bg) 40%);
}
.dp-dow{ font-size:12px; color:var(--muted) }
.dp-date{ font-variant-numeric:tabular-nums; font-weight:700 }
.dp-help{ margin-top:8px; font-size:12px; color:var(--muted) }
/* ===== ダークモードでの文字コントラスト改善 ===== */
html[data-theme="dark"] .dp-toggle,
html[data-theme="dark"] .dp-day,
html[data-theme="dark"] .dp-date {
    color: #e8f0ff; /* やや青みを帯びた明るい白 */
}

html[data-theme="dark"] .dp-dow {
    color: #9fb6d6; /* 曜日ラベルを控えめなブルーグレーに */
}

html[data-theme="dark"] .dp-day[aria-selected="true"] {
    color: #ffffff;
    background: color-mix(in oklab, var(--slotBg) 80%, #0a1a2f 20%);
    border-color: #3fbfff;
}

/* モバイル幅では横スクロール型に（親のmin-width制約を外す） */
@media (max-width:640px){
    .dp-pop{ min-width:unset; width:min(92vw, 440px) }
    .dp-week{ grid-auto-flow:column; grid-auto-columns: minmax(68px,1fr); overflow-x:auto; padding-bottom:4px }
}

/* 見た目は日付UIと統一（ダーク/ライトは既存CSS変数に追従） */
.pf{ position:relative; display:inline-block; margin-inline:8px }
.pf-toggle{
    display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
    border:1px solid var(--border); border-radius:10px;
    background:color-mix(in oklab, var(--bg) 92%, var(--fg) 8%); color:var(--fg); font:inherit; cursor:pointer;
}
.pf-toggle svg{ width:18px; height:18px; opacity:.8 }

.pf-pop{
    position:absolute; inset:auto auto 0 0; transform:translateY(calc(100% + 8px));
    min-width: 420px; border:1px solid var(--border); border-radius:12px;
    background:var(--bg); box-shadow:0 12px 32px rgba(0,0,0,.25); display:none; z-index:60; padding:10px;
}
.pf[aria-expanded="true"] .pf-pop{ display:block; }

.pf-tabs{ display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap }
.pf-tab{
    padding:6px 10px; border:1px solid var(--border); border-radius:20px; cursor:pointer;
    background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%); color:var(--fg); font-size:13px;
}
.pf-tab[aria-selected="true"]{ border-color:var(--slotBorder); color:var(--slotBorder) }

.pf-grid{
    display:grid; grid-template-columns: repeat(4, minmax(90px,1fr)); gap:8px;
}
.pf-chip{
    padding:8px 10px; border:1px solid var(--border); border-radius:10px; cursor:pointer;
    background:color-mix(in oklab, var(--bg) 94%, var(--fg) 6%); color:var(--fg); text-align:center;
}
.pf-chip:hover{ filter:brightness(1.06) }
.pf-chip[aria-selected="true"]{ border-color:var(--slotBorder); color:var(--slotBorder) }

.pf-actions{ margin-top:8px; display:flex; justify-content:flex-end }

/* モバイル：横スクロールのチップ群に */
@media (max-width:640px){
    .pf-pop{ min-width:unset; width:min(92vw, 480px) }
    .pf-grid{ grid-template-columns: repeat(2, minmax(120px,1fr)); }
}