/* ============================================================
   types.css — 型1〜型7 個別スタイル
   ============================================================ */

/* session type -> color mapping (共通) */
.badge-ORIGINAL, .tl-badge--ORIGINAL { background: #e6ebf3; color: var(--c-original); }
.badge-KEYNOTE,  .tl-badge--KEYNOTE  { background: #ede4fa; color: var(--c-keynote); }
.badge-SPONSOR,  .tl-badge--SPONSOR  { background: #e2f4ec; color: var(--c-sponsor); }
.badge-PITCH_PARK, .tl-badge--PITCH_PARK { background: #fbe6dd; color: var(--c-pitch); }
.badge-MEDIA,    .tl-badge--MEDIA    { background: #dfeaf9; color: var(--c-media); }
.badge-PITCH_CONTEST, .tl-badge--PITCH_CONTEST { background: #fbe6dd; color: var(--c-pitch); }
.badge-BREAK,    .tl-badge--BREAK    { background: var(--c-break-bg); color: var(--c-break-ink); }

/* ================================================================
   型1 タイムグリッド
   ================================================================ */
.grid-hint {
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-bottom: 12px;
}

.grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  position: relative;
}

/* PC: CSS grid — DOM順は時刻順、視覚位置は grid-row / grid-column で決める */
.timegrid {
  display: grid;
  /* columns set inline via JS: [time-col] track1 track2 ... */
  position: relative;
  min-width: 720px;
}

.tg-corner {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 5;
  background: var(--c-navy-900);
  grid-column: 1;
  grid-row: 1;
}

.tg-track-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--c-navy-900);
  color: #fff;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  border-left: 1px solid rgba(255,255,255,0.15);
  line-height: 1.3;
}
.tg-track-head__building {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: #b7c2da;
  margin-top: 2px;
}

.tg-time-label {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--c-navy-50);
  border-top: 1px solid var(--c-border-soft);
  font-size: 11px;
  color: var(--c-ink-soft);
  text-align: right;
  padding: 2px 8px 0 0;
  font-variant-numeric: tabular-nums;
}

.tg-block {
  position: relative;
  margin: 1px 3px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--c-navy-100);
  border-left: 3px solid var(--c-navy-600);
  font-size: 11.5px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 26px;
}
.tg-block:hover { filter: brightness(0.97); box-shadow: var(--shadow-sm); }
.tg-block__time { font-size: 10px; color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.tg-block__title {
  font-weight: 700;
  color: var(--c-ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}
.tg-block--break {
  background: repeating-linear-gradient(45deg, var(--c-break-bg), var(--c-break-bg) 6px, #e4e7ec 6px, #e4e7ec 12px);
  border-left-color: #b7bfcd;
  cursor: default;
}
.tg-block--break .tg-block__title { color: var(--c-break-ink); font-weight: 500; }
.tg-block--keynote { background: #ede4fa; border-left-color: var(--c-keynote); }
.tg-block--sponsor { background: #e2f4ec; border-left-color: var(--c-sponsor); }
.tg-block--pitch_park, .tg-block--pitch_contest { background: #fbe6dd; border-left-color: var(--c-pitch); }
.tg-block--media { background: #dfeaf9; border-left-color: var(--c-media); }
.tg-block--featured {
  background: var(--c-featured-bg);
  border-left-color: var(--c-featured-border);
  box-shadow: inset 0 0 0 1px var(--c-featured-border);
}
.tg-block__star { color: var(--c-featured-border); font-size: 10px; }

/* ---- SP: transform grid -> timeline-like single column ----
   1トラックあたり最低160pxを基準に判定した結果、幅が足りない画面では
   type1のグリッドを維持せず、単一カラムのタイムライン相当に変形する。
   （DOMはそのまま。CSSのみで変形＝指針08-01, 08-04 準拠） */
@media (max-width: 700px) {
  .grid-scroll {
    overflow-x: visible;
    border: none;
    box-shadow: none;
    background: transparent;
  }
  .timegrid {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .tg-corner { display: none; }
  .tg-track-head { display: none; }
  .tg-time-label {
    position: static;
    background: none;
    border-top: none;
    text-align: left;
    padding: 14px 2px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--c-navy-700);
  }
  .tg-block {
    margin: 4px 0;
    min-height: 0;
  }
  .tg-block__title { -webkit-line-clamp: initial; }
  .tg-block__track-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: rgba(255,255,255,0.6);
    border-radius: 999px;
    padding: 1px 7px;
    margin-top: 3px;
    color: var(--c-navy-700);
    width: fit-content;
  }
}
@media (min-width: 701px) {
  .tg-block__track-tag { display: none; }
}

/* ================================================================
   型2 スロット表
   ================================================================ */
.slot-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.slot-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 640px;
}
.slot-table caption {
  text-align: left;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--c-ink-soft);
  border-bottom: 1px solid var(--c-border);
}
.slot-table th, .slot-table td {
  border: 1px solid var(--c-border-soft);
  padding: 8px 10px;
  vertical-align: top;
  text-align: left;
}
.slot-table thead th {
  background: var(--c-navy-900);
  color: #fff;
  position: sticky;
  top: 0;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.slot-table tbody th[scope="row"] {
  background: var(--c-navy-50);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
  color: var(--c-navy-700);
  font-size: 12px;
}
.slot-cell-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: var(--radius-sm);
}
.slot-cell-btn:hover { background: var(--c-navy-100); }
.slot-cell__title { font-weight: 700; font-size: 12.5px; line-height: 1.35; }
.slot-cell__sub { font-size: 11px; color: var(--c-ink-soft); margin-top: 2px; }
.slot-cell--break { background: var(--c-break-bg); color: var(--c-break-ink); }
.slot-cell--empty { background: var(--c-navy-50); }
.slot-cell--featured { background: var(--c-featured-bg); }
td.slot-cell--keynote { background: #ede4fa; }
td.slot-cell--sponsor { background: #e2f4ec; }
td.slot-cell--pitch_park, td.slot-cell--pitch_contest { background: #fbe6dd; }
td.slot-cell--media { background: #dfeaf9; }

/* ================================================================
   型3 タイムライン
   ================================================================ */
.timeline-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.btn-now {
  background: var(--c-navy-900);
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.btn-now:hover { background: var(--c-navy-700); }

.timeline {
  max-width: 760px;
  margin: 0 auto;
  border-left: 2px solid var(--c-border);
  padding-left: 20px;
}
.tl-hour-mark {
  font-size: 12px;
  font-weight: 800;
  color: var(--c-navy-700);
  margin: 22px 0 6px -29px;
  padding-left: 8px;
  position: relative;
}
.tl-hour-mark::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-navy-700);
  transform: translateY(-50%);
}
.tl-item {
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin: 8px 0;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.tl-item::before {
  content: "";
  position: absolute;
  left: -25px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-navy-600);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--c-border);
}
.tl-item:hover { border-color: var(--c-navy-600); }
.tl-item--break {
  background: var(--c-break-bg);
  cursor: default;
  box-shadow: none;
}
.tl-item--break::before { background: #b7bfcd; }
.tl-item--featured { background: var(--c-featured-bg); border-color: var(--c-featured-border); }
.tl-item--current { outline: 2px solid var(--c-accent); }

.tl-item__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.tl-item__time {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--c-navy-900);
  font-size: 13px;
}
.tl-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.tl-item__track {
  font-size: 11px;
  color: var(--c-ink-soft);
  background: var(--c-navy-100);
  padding: 2px 8px;
  border-radius: 999px;
}
.tl-item__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--c-ink);
}
.tl-item--break .tl-item__title { color: var(--c-break-ink); font-weight: 500; }
.tl-item__speakers {
  font-size: 12px;
  color: var(--c-ink-soft);
  margin-top: 4px;
}
.tl-item__star { color: var(--c-featured-border); margin-right: 3px; }

/* ================================================================
   型4 トラック別
   ================================================================ */
.track-select {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.track-chip {
  background: #fff;
  border: 1px solid var(--c-border);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--c-ink-soft);
  line-height: 1.3;
}
.track-chip small { display: block; font-weight: 400; font-size: 10px; color: #9aa4b8; }
.track-chip.is-active {
  background: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: #fff;
}
.track-chip.is-active small { color: #b7c2da; }

/* ================================================================
   型5 ファセット検索
   ================================================================ */
.facet-bar {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
.facet-search input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--c-border);
  font-size: 14px;
  margin-bottom: 14px;
}
.facet-search input:focus { border-color: var(--c-navy-600); }

.facet-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
.facet-group__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-navy-700);
  margin-bottom: 6px;
}
.facet-group__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.facet-opt {
  background: var(--c-navy-50);
  border: 1px solid var(--c-border-soft);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--c-ink-soft);
}
.facet-opt.is-selected {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}
.facet-active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.facet-active:empty { display: none; }
.facet-active-chip {
  background: var(--c-navy-100);
  color: var(--c-navy-700);
  font-size: 11px;
  padding: 3px 8px 3px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.facet-active-chip button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--c-navy-700);
}
.facet-clear-all {
  background: none;
  border: none;
  color: var(--c-accent-dark);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 3px 4px;
}

.facet-count {
  font-size: 12.5px;
  color: var(--c-ink-soft);
  margin: 4px 2px 12px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.session-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
}
.session-card:hover { border-color: var(--c-navy-600); box-shadow: var(--shadow-md); }
.session-card--break { background: var(--c-break-bg); cursor: default; }
.session-card--featured { background: var(--c-featured-bg); border-color: var(--c-featured-border); }
.session-card__top {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--c-ink-soft);
}
.session-card__day-track {
  background: var(--c-navy-100);
  color: var(--c-navy-700);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.session-card__title { font-weight: 700; font-size: 14px; color: var(--c-ink); line-height: 1.4; }
.session-card--break .session-card__title { color: var(--c-break-ink); font-weight: 500; }
.session-card__desc {
  font-size: 12px;
  color: var(--c-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.session-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
}
.session-card__tag {
  font-size: 10.5px;
  background: var(--c-navy-50);
  color: var(--c-navy-700);
  padding: 2px 7px;
  border-radius: 999px;
}
.facet-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-ink-soft);
  font-size: 13px;
}

/* ================================================================
   型6 プラットフォーム委譲
   ================================================================ */
.pf-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.pf-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.pf-card h3 {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-navy-900);
  margin-bottom: 6px;
}
.pf-card p { font-size: 12.5px; color: var(--c-ink-soft); }
.pf-note {
  background: var(--c-navy-100);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--c-navy-700);
  max-width: 800px;
}

/* ================================================================
   型7 静的配布型
   ================================================================ */
.print-day-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.print-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.btn-print {
  background: var(--c-accent);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}
.btn-print:hover { background: var(--c-accent-dark); }
.print-updated { font-size: 12px; color: var(--c-ink-soft); }
.print-note {
  font-size: 12.5px;
  color: var(--c-ink-soft);
  background: var(--c-navy-100);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 20px;
  max-width: 800px;
}

.print-preview {
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px;
  background: #fbfbfc;
  overflow-x: auto;
}
.pp-sheet {
  background: #fff;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--c-border-soft);
  font-size: 11px;
}
.pp-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--c-navy-900);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.pp-sheet__title { font-size: 16px; font-weight: 800; color: var(--c-navy-900); }
.pp-sheet__meta { font-size: 10px; color: var(--c-ink-soft); text-align: right; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.pp-table th, .pp-table td {
  border: 1px solid #ccc;
  padding: 3px 4px;
  vertical-align: top;
  text-align: left;
}
.pp-table thead th { background: var(--c-navy-100); font-size: 9px; }
.pp-table th[scope="row"] { white-space: nowrap; font-weight: 700; background: #f5f6f8; }
.pp-break { background: #eee; color: #888; }
.pp-sheet__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ccc;
  font-size: 9px;
  color: #888;
}