/* =========================
   ■ レイヤー構造（最重要）
   ========================= */

/* ① 背景（ベース） */
body.bg1 { background: radial-gradient(circle at top, #25345c, #050711); }
body.bg2 { background: linear-gradient(#0a3d62, #1e90ff); }
body.bg3 { background: linear-gradient(#0b6623, #013220); }
body.bg4 { background: linear-gradient(#2c3e50, #000000); }
body.bg5 { background: #111; }

/* ② 時間フィルター（色補正・フェード対応） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* ←ここを変数化 */
  background: rgba(
    var(--t-r, 0),
    var(--t-g, 0),
    var(--t-b, 50),
    var(--t-a, 0.4)
  );

  transition: background 1s linear; /* 小刻み更新をなめらかに */
}
/* =========================
   ■ カード背景（設定UI用）
   ========================= */
/* 背景5種類と連動 */
.bg-card.bg1 { background: radial-gradient(circle, #25345c, #050711); }
.bg-card.bg2 { background: linear-gradient(#0a3d62, #1e90ff); }
.bg-card.bg3 { background: linear-gradient(#0b6623, #013220); }
.bg-card.bg4 { background: linear-gradient(#2c3e50, #000000); }
.bg-card.bg5 { background: #111; }


/* =========================
   ■ Modal
========================= */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  background: rgba(5, 10, 20, 0.85);
  backdrop-filter: blur(12px);

  opacity: 1;
  transition: 0.3s;
  z-index: 9999;
}

.modal.hide {
  opacity: 0;
  pointer-events: none;
}

.modal.hidden {
  display: none;
}

.modal-box {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  padding: 20px;
  border-radius: 20px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  max-width: 400px;
  height: 90vh;        /* ← 固定 */
}

/* 上固定 */
.modal-header{
  flex-shrink:0;
  margin-bottom: 10px;   /* ←追加 */
}

/* 中だけスクロール */
.modal-body{
  flex:1;
  overflow-y: scroll;   /* ←これが本体 */
  min-height:0;  /* ←これ超重要 */
  margin-top:10px;
  margin: 0;             /* ←リセット */
  padding-right: 4px;  /* スクロール余白 */
}

.modal-body::-webkit-scrollbar{
  width:6px;
}

.modal-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.2);
  border-radius:10px;
}

/* 下固定 */
.modal-footer{
  flex-shrink:0;
  margin-top:12px;
}

.modal-box input,
.modal-box select {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  border: none;
}

.modal-box h3 {
  position: static;
  top: 0;
  background: rgba(255,255,255,0.12);
}

/* =========================
   ■ Accordion
========================= */
.setting-section {
  margin-top: 12px;
}

.setting-title {
  font-weight: bold;
  cursor: pointer;
  padding: 8px 0;
}

.setting-content {
  display: none;
  margin-top: 6px;
  padding-left: 10px;
}

.setting-section.open .setting-content {
  display: block;
}

.setting-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
	flex-direction:column;
  flex-shrink:0;
}

/* =========================
   ■ Tabs
========================= */
.tab {
  flex: 1;
  padding: 8px;
  border-radius: 10px;
	height:35px;   /* ←固定 */
  display:flex;
  align-items:center;
  justify-content:center;	
  background: rgba(255,255,255,0.1);
  color: white;
  border: none;
  cursor: pointer;
}

.tab-row{
  display:flex;
  gap:6px;
}

.tab.active {
  background: rgba(255,255,255,0.25);
}

.tab-content{
  opacity:0;
  transform: translateY(6px);
  transition: opacity 0.2s;
  width:100%;
  box-sizing:border-box;
  display:none;
}

.tab-content.active{
  display:block;
  opacity:1;
  transform: translateY(0);
}

/* =========================
   ■ Sidebar
========================= */
.sidebar{
  width:220px;
  min-width:220px;
  padding:18px 14px;
  border-radius:0 24px 24px 0;
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(16px);
  position:sticky;
  top:0;
  height:100vh;
  transition:0.3s ease;
  z-index:100;
}

.sidebar-title{
  font-size:34px;
  font-weight:bold;
  margin-bottom:20px;
  color:#9be7ff;
}

.sidebar button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  border:none;
  border-radius:16px;
  padding:14px 16px;
  background:rgba(255,255,255,0.08);
  color:white;
  font-size:16px;
  text-align:left;
  cursor:pointer;
  transition:0.2s;
}

.sidebar button:hover{
  background:rgba(0,198,255,0.25);
  transform:translateX(4px);
	box-shadow:0 0 20px rgba(0,198,255,0.25);
}

.sidebar.closed{
  width:72px;
  min-width:72px;
  overflow:hidden;
}

.sidebar.closed .sidebar-title{
  display:none;
}

.sidebar.closed .nav-text{
  display:none;
}

.sidebar.closed button{
  justify-content:center;
  padding:14px 0;
}

/* =========================
   ■ Cards
========================= */
.bg-card {
  padding: 14px;
  margin-top: 8px;
  border-radius: 12px;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  border: 2px solid transparent;
  transition: 0.2s;
  width:100%;
  box-sizing:border-box;
}

/* ホバー */
.bg-card:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,0.15);
}

/* =========================
   ■ タグ
========================= */
.tag{
  font-size:11px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(255,255,255,0.15);
  cursor:pointer;
  transition:0.2s;
}

.tag:hover{
  background:#7c3aed;
}

.tag.ai{ background:#7c3aed; }
.tag.health{ background:#16a34a; }
.tag.city{ background:#0ea5e9; }
.tag.rehab{ background:#f59e0b; }


/* =========================
   ⑤ 共通パネル
========================= */
.panel, .history-card{
  margin-top:18px;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.16);
}

/* ===== 戻るボタン ===== */
.back-city {
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: white;
  text-decoration: none;
  position: relative;
  z-index: 10;
}

.back-city:hover{
  background: rgba(255,255,255,0.18);
  color:#fff;
}


/* ラジオ隠す */
.bg-option input {
  display: none;
}

/* 選択状態 */
.bg-option input:checked + .bg-card {
  border: 2px solid #00d4ff;
  background: rgba(0,212,255,0.15);
  box-shadow: 0 0 10px rgba(0,212,255,0.4);
}

/* リセットボタン（BEM） */
.reset-btn {
  margin-top: 14px;
  background: rgba(255, 80, 80, 0.2);
  color: #ff8080;
  position: relative;
  overflow: hidden;
}

.reset-btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0%;
  background: red;
  transition: width 2s linear;
}

.reset-btn.active::after {
  width: 100%;
}

/* 編集ボタン */
.edit-btn {
  background: transparent;
  border: none;
  color: #ccc;
  cursor: pointer;
}

/* 音量スライダー */
.volume-box{
  margin-top:20px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,0.05);
}

.volume-label{
  margin-bottom:8px;
  font-size:14px;
}

#volume {
  width: 100%;
}

#volumeBox{
  display:none;
}

input[type="range"]{
  width:100%;
  -webkit-appearance:none;
  height:6px;
  border-radius:10px;
  background:linear-gradient(90deg,#00c6ff,#0072ff);
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:white;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.3);
}


/* お知らせ */
.notice {
  margin-top: 12px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  font-size: 14px;
}

/* 天気 */
.weather-box {
  margin-top: 12px;
  padding: 10px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
}

.weather-loading{

  opacity:0.7;

  animation:
    weatherPulse 1.5s infinite;
}

@keyframes weatherPulse{

  0%{
    opacity:0.4;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.4;
  }
}

/* progress bar */
#loading_overlay{
  position:fixed;
  inset:0;
  z-index:9999;

  background:
    radial-gradient(circle at center,
    rgba(0,180,255,0.12),
    rgba(0,0,0,0.92));

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:24px;

  transition:0.5s;
}

.loading-orb{
  width:90px;
  height:90px;
  border-radius:50%;

  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,255,255,0.9),
      rgba(255,255,255,0.1) 35%,
      rgba(0,180,255,1));

  box-shadow:
    0 0 50px rgba(0,180,255,0.5);

  animation:
    orbBreath 2s infinite ease-in-out;
}

@keyframes orbBreath{

  0%{
    transform:scale(1);
  }

  50%{
    transform:scale(1.08);
  }

  100%{
    transform:scale(1);
  }
}

.loading-text{
  color:white;
  font-size:20px;
  opacity:0.9;
}

.loading-bar{
  width:180px;
  height:6px;
  border-radius:999px;

  background:
    rgba(255,255,255,0.1);

  overflow:hidden;
}

.loading-bar-inner{
  width:40%;
  height:100%;

  background:
    linear-gradient(90deg,
      rgba(0,180,255,0.2),
      rgba(0,220,255,1));

  animation:
    loadingMove 1.2s infinite;
}

@keyframes loadingMove{

  0%{
    transform:translateX(-120%);
  }

  100%{
    transform:translateX(320%);
  }
}