/* ===== GW Gantt – v6.5 ===== */
/* ベース変数 */
:root{
  --gw-cell: 52px;
  --gw-bar-h: 22px;
  --gw-row-pad: 10px;
  --gw-label: 200px;
  --gw-bg:#f7f9fd; --gw-panel:#ffffff; --gw-text:#0b1220; --gw-subtext:#364152;
  --gw-border:#e5eaf3; --gw-grid:#e8edf7; --gw-grid-top:#eef2fb; --gw-grid-row:#ffffff;
  --gw-today:#2f7dff22; --gw-weekline:#d6def1; --gw-monthline:#b6c2e6; --gw-hover:#0069ff;
  --media-max-h: min(60vh, 420px);
}
body.dark-theme{
  --gw-bg:#0f131a; --gw-panel:#141a23; --gw-text:#e8eef9; --gw-subtext:#cbd7eb;
  --gw-border:#1f2430; --gw-grid:#182031; --gw-grid-top:#171c26; --gw-grid-row:#141923;
  --gw-today:#4da3ff55; --gw-weekline:#22314a; --gw-monthline:#3a4b6a; --gw-hover:#9bd;
  --media-max-h: min(60vh, 360px);
}

/* === ページ横スクロールを殺す（安全） === */
html, body { width:100%; max-width:100%; overflow-x:hidden; }

/* 全体 */
.gantt-wrapper{ margin:10px 0 20px; color:var(--gw-text); font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Noto Sans JP',Helvetica,Arial; max-width:100%; }

/* Toolbar */
.gw-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 0 10px; }
.gw-toolbar .gw-nav, .gw-toolbar select{ border:1px solid var(--gw-border); background:var(--gw-panel); color:var(--gw-text); border-radius:8px; padding:6px 10px; cursor:pointer; }
.gw-toolbar .gw-nav:hover{ border-color:var(--gw-hover); color:var(--gw-hover); }

/* Canvas（横スクロールはここだけ） */
#gw-gantt{
  position:relative; border:1px solid var(--gw-border); background:var(--gw-panel); border-radius:10px;
  overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; touch-action:auto; cursor:grab; contain:paint; box-sizing:border-box; max-width:100%;
}
#gw-gantt.is-dragging{ cursor:grabbing; }
#gw-gantt .gw-sheet{ --gw-days:31; min-width:calc(var(--gw-label) + (var(--gw-days) * var(--gw-cell))); }

/* 2段スケール（上=曜 / 下=日） */
#gw-scale{ position:sticky; top:0; z-index:4; background:var(--gw-panel); border-bottom:1px solid var(--gw-border); }
.gw-scale-monthbar{ display:grid; grid-template-columns:var(--gw-label) repeat(var(--gw-days), var(--gw-cell)); background:linear-gradient(180deg,var(--gw-grid-top),var(--gw-panel)); height:28px; }
.gw-scale-left{ position:sticky; left:0; z-index:5; background:linear-gradient(180deg,var(--gw-grid-top),var(--gw-panel)); border-right:2px solid var(--gw-monthline); }
.gw-month{ grid-column:2 / span var(--gw-days); display:flex; align-items:center; padding-left:8px; font-weight:700; }

.gw-scale-daybar{ display:grid; grid-template-columns:var(--gw-label) repeat(var(--gw-days), var(--gw-cell)); height:44px; }
.gw-day{
  border-right:1px solid var(--gw-grid);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; color:var(--gw-subtext);
  font-variant-numeric:tabular-nums; line-height:1.1; pointer-events:none; gap:2px;
}
.gw-day .w{ font-size:10px; line-height:1; }
.gw-day .d{ font-size:12px; line-height:1.1; font-weight:600; }
.gw-day.is-week{ border-right:2px solid var(--gw-weekline); }
.gw-day.is-today{ background:var(--gw-today); color:var(--gw-text); font-weight:700; }

/* Rows */
#gw-rows{ position:relative; z-index:1; background:var(--gw-panel); }
.gw-group{ border-bottom:1px solid var(--gw-border); background:linear-gradient(180deg,var(--gw-grid-row),var(--gw-panel)); }
.gw-group__title{ display:grid; grid-template-columns:var(--gw-label) 1fr; align-items:center; height:32px; border-bottom:1px dashed var(--gw-border); }
.gw-group__title .label{ position:sticky; left:0; z-index:3; background:linear-gradient(180deg,var(--gw-grid-row),var(--gw-panel)); padding:6px 10px; font-weight:700; border-right:2px solid var(--gw-monthline); }
.gw-group__title .grid{ display:grid; grid-template-columns:repeat(var(--gw-days), var(--gw-cell)); height:100%; border-left:2px solid var(--gw-monthline); }
.gw-group__title .grid > i{ border-right:1px solid var(--gw-grid); pointer-events:none; }
.gw-group__title .grid > i.is-week{ border-right:2px solid var(--gw-weekline); }

.gw-row{ display:grid; grid-template-columns:var(--gw-label) 1fr; gap:0; padding:var(--gw-row-pad) 0; }
.gw-row + .gw-row{ border-top:1px solid var(--gw-border); }
.gw-label{ position:sticky; left:0; z-index:2; background:var(--gw-panel); padding:4px 10px 0 10px; cursor:pointer; border-right:2px solid var(--gw-monthline); }
.gw-label .title{ font-weight:600; display:block; }
.gw-label .meta{ font-size:12px; color:var(--gw-subtext); }

.gw-grid{ display:grid; grid-template-columns:repeat(var(--gw-days), var(--gw-cell)); position:relative; min-height:calc(var(--gw-bar-h) + 8px); align-items:center; border-left:2px solid var(--gw-monthline); }
.gw-grid > i{ height:100%; border-right:1px solid var(--gw-grid); pointer-events:none; }
.gw-grid > i.is-week{ border-right:2px solid var(--gw-weekline); }
.gw-row:hover .gw-grid{ background:linear-gradient(180deg,transparent,rgba(127,127,127,.03),transparent); }

/* Bar */
.gw-bar{ height:var(--gw-bar-h); border-radius:999px; display:flex; align-items:center; padding:0 10px; font-size:12px; color:#0b1220;
  background:linear-gradient(180deg,#a8d8ff,#74baff); border:1px solid #6aaef7; box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 6px 20px rgba(49,93,158,.25);
  cursor:pointer; overflow:hidden; user-select:none; transform:translateZ(0); }
.gw-bar:hover{ outline:2px solid var(--gw-hover); }
.gw-bar[data-item="character"]{ background:linear-gradient(180deg,#ffd2f0,#ff9cdc); border-color:#ff78ca; }
.gw-bar[data-item="weapon"]{    background:linear-gradient(180deg,#ffe5a8,#ffd071); border-color:#f3b04b; }
.gw-bar[data-item="event"]{     background:linear-gradient(180deg,#c7ffcc,#8ef3a1); border-color:#76da89; }
.gw-bar[data-item="quest"]{     background:linear-gradient(180deg,#e2d4ff,#c1b0ff); border-color:#a390ff; }
.gw-bar[data-item="story"]{     background:linear-gradient(180deg,#c5f1ff,#8dd8f3); border-color:#75c2dc; }
.gw-bar[data-item="other"]{     background:linear-gradient(180deg,#e9eef6,#d2dbe7); border-color:#c3ccda; }

/* Modal */
.gw-modal{ position:fixed; inset:0; z-index:2147483000; display:none; }
.gw-modal.is-open{ display:block; }
.gw-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.60); }
.gw-modal__dialog{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(900px,95vw); max-height:90vh; overflow:auto;
  background:var(--gw-panel); color:var(--gw-text); border:1px solid var(--gw-border); border-radius:12px; box-shadow:0 10px 50px rgba(0,0,0,.4); padding:16px 16px 22px;
}
.gw-modal.is-onecol .gw-modal__dialog{ width:min(calc(var(--media-max-h) * 1.7778 + 48px),92vw); max-width:760px; }
.gw-modal__close{ position:absolute; top:8px; right:8px; font-size:22px; width:36px; height:36px; border-radius:999px; border:1px solid var(--gw-border); background:var(--gw-panel); color:var(--gw-text); cursor:pointer; }
.gw-modal__title{ margin:0 40px 8px 0; overflow-wrap:anywhere; word-break:break-word; }
.gw-modal__content{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
.gw-meta{ margin-top:6px; }
.gw-meta__row{ margin:6px 0; color:var(--gw-subtext); }
.gw-remain{ margin-left:8px; color:var(--gw-text); font-weight:600; }
.gw-clock span{ margin-right:8px; }

/* Modal Media */
#gw-media{ display:grid; gap:10px; margin:8px 0 6px; }
.gw-modal.is-twocol #gw-media{ grid-template-columns:1fr 1fr; }
.gw-modal.is-onecol #gw-media{ grid-template-columns:1fr; }
#gw-media .media-box{ border:1px solid var(--gw-border); border-radius:10px; overflow:hidden; background:#000; aspect-ratio:16/9; max-height:var(--media-max-h); }
#gw-media img, #gw-media lite-youtube{ width:100%; height:100%; display:block; object-fit:cover; }

/* Slider (mobile only) */
.gw-media-slider{ display:none; }
.gw-media-track{ display:flex; gap:0; will-change:transform; transition:transform .35s ease; }
.gw-media-slide{ flex:0 0 100%; padding:2px; box-sizing:border-box; }
.gw-media-nav{ position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:999px; border:1px solid var(--gw-border); background:var(--gw-panel); color:var(--gw-text); cursor:pointer; }
.gw-media-prev{ left:8px; } .gw-media-next{ right:8px; }
.gw-media-dots{ display:flex; gap:6px; justify-content:center; padding:6px 0 2px; }
.gw-media-dots button{ width:8px; height:8px; border-radius:999px; border:0; background:#9aa6bf; opacity:.5; }
.gw-media-dots button.is-active{ opacity:1; background:#4c84ff; }

/* 背景ロック */
body.gw--lock{ position:fixed; width:100%; overflow:hidden; inset:0; }
/* Mobile（全画面モーダル + スライダーのみ） */
/* Mobile（コンテンツ量に応じた高さ／中央寄せ） */
@media (max-width: 640px){
  :root{ --gw-label:160px; --gw-cell:44px; --gw-bar-h:20px; }

  /* ← ここを置換 */
  .gw-modal__dialog{
    /* フルスクリーンをやめて “内容ぶんだけ” のカードに */
    position: fixed;
    left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: min(96vw, 640px);
    height: auto; /* ← これが肝：コンテンツに応じて伸びる */
    max-height: calc(
      92svh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)
    ); /* はみ出し上限だけ用意 */
    padding: 12px;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: auto;               /* はみ出したらモーダル内だけスクロール */
    -webkit-overflow-scrolling: touch;
    display: block;
  }

  /* PC/タブのグリッドは隠す（モバイルはスライダーのみ） */
  #gw-media{ display:none; }

  /* スライダーは16:9で “必要なだけ” 高さをとる。大きすぎを抑制 */
  .gw-media-slider{ position:relative; display:block; margin:8px 0 6px; }
  .gw-media-slide .media-box{ aspect-ratio:16/9; background:#000; max-height:45svh; }
  .gw-media-slide img, .gw-media-slide lite-youtube{
    width:100%; height:100%; display:block; object-fit:cover;
  }
  .gw-media-dots{ padding:4px 0 0; }

  /* テキスト領域は必要時のみスクロール。余計に伸ばさない */
  .gw-meta{ margin-top:6px; }
  .gw-modal__content{
    max-height:40svh; /* 長文でもモーダル全体が膨らみ過ぎない */
    overflow:auto; -webkit-overflow-scrolling:touch;
  }
}