@charset "UTF-8";

/* =========================================
   最上部固定バー＆コントロール調整（干渉除去版）
   ========================================= */

/* スライドモード切替ボタン（左端） */
.btn-slide-mode {
  background-color: #555 !important;
  color: #fff !important;
  border: 1px solid #888 !important;
  border-radius: 4px !important;
  padding: 4px 6px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  height: 28px !important;
  box-sizing: border-box !important;
}

/* スライドモードON（点灯時） */
.btn-slide-mode.active {
  background-color: #ff3366 !important;
  color: #ffffff !important;
  border-color: #ff99bb !important;
  box-shadow: 0 0 6px rgba(255, 51, 102, 0.8);
}

/* 秒数選択セレクトボックス */
.slide-timer-select {
  background-color: #222 !important;
  color: #fff !important;
  border: 1px solid #666 !important;
  border-radius: 4px !important;
  padding: 2px 4px !important;
  font-size: 13px !important;
  font-weight: bold !important;
  cursor: pointer;
  height: 28px !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   ■ サムネイル表示サイズ設定（XS / S / M / L / XL）
   ========================================================================== */

.link-group a:has(img) {
  width: auto !important;
  max-width: none !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 4px 6px !important;
}

.link-group a img {
  width: auto !important;
  object-fit: contain !important;
}

/* XSサイズ（超小） */
body.view-xs .link-group a img { height: 36px !important; }
body.view-xs .link-group a:has(img) { font-size: 9px !important; }

/* Sサイズ（小） */
body.view-s .link-group a img { height: 70px !important; }
body.view-s .link-group a:has(img) { font-size: 11px !important; }

/* Mサイズ（中：標準） */
body.view-m .link-group a img { height: 110px !important; }
body.view-m .link-group a:has(img) { font-size: 12px !important; }

/* Lサイズ（大） */
body.view-l .link-group a img { height: 200px !important; }
body.view-l .link-group a:has(img) { font-size: 13px !important; }

/* XLサイズ（特大） */
body.view-xl .link-group a img { height: 540px !important; }
body.view-xl .link-group a:has(img) { font-size: 16px !important; }

/* ボタン選択時ハイライト（アクティブ状態＝緑色表示） */
.size-controls .size-btn.active {
  background-color: #00cc66 !important;
  color: #ffffff !important;
  border-color: #88ffe0 !important;
  font-weight: bold !important;
  box-shadow: 0 0 6px rgba(0, 204, 102, 0.8) !important;
}

/* =========================================
   全画面スライドショー オーバーレイ (黒画面)
   ========================================= */
#slideshow-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000;
  z-index: 10000;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

#slide-header {
  background-color: rgba(30, 30, 30, 0.95);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid #444;
}

.header-row-upper {
  font-size: 14px;
  font-weight: bold;
  color: #ffcc00;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-row-lower {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.slide-header-nav {
  display: flex;
  gap: 4px;
}

.nav-btn-rect {
  background: #444;
  color: #fff;
  border: 1px solid #777;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.nav-btn-rect.is-playing {
  background-color: #00cc66 !important;
  color: #fff !important;
  border-color: #88ffe0 !important;
}

.nav-btn-rect.is-paused {
  background-color: #ff3366 !important;
  color: #fff !important;
  border-color: #ff99bb !important;
}

.close-btn {
  background: #cc0033;
  color: #fff;
  border: none;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
}

#slide-body {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

#slide-content-wrapper {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#slide-content-wrapper img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.text-slide-card {
  background-color: #1a1a2e;
  color: #ffffff;
  padding: 30px 20px;
  border-radius: 12px;
  max-width: 85%;
  max-height: 80%;
  box-sizing: border-box;
  text-align: center;
  border: 2px solid #ff4477;
  box-shadow: 0 4px 15px rgba(255, 68, 119, 0.3);
  overflow-y: auto;
  pointer-events: auto;
}

.text-slide-title {
  font-size: 22px;
  font-weight: bold;
  color: #ff88a0;
  margin-bottom: 15px;
  border-bottom: 1px dashed #ff88a0;
  padding-bottom: 8px;
}

.text-slide-body {
  font-size: 18px;
  line-height: 1.6;
  word-break: break-all;
}

.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: #ffffff;
  opacity: 0.15;
  padding: 20px 15px;
  cursor: pointer;
  user-select: none;
  z-index: 10;
  transition: opacity 0.2s ease;
}
.nav-left { left: 5px; }
.nav-right { right: 5px; }
.nav-arrow:hover { opacity: 0.8; }