/*
 * where: tmas-app/rpg-sidequests.css
 * what: JOBSボード、依頼カード、サブケース画面の専用スタイル
 * why: 既存STORIESの視覚言語を保ちつつ、日常仕事を一覧で判断しやすくする
 */
.rpg-jobs {
  /* #rpg-view は overflow:hidden の固定高。JOBS本体側でスクロールを担わせる。 */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: clamp(84px, 10vw, 132px) clamp(18px, 5vw, 72px) 90px;
  color: #e9e8f0;
  background: radial-gradient(circle at 80% 0, rgba(201, 168, 76, .12), transparent 38%), #080b12;
}

.rpg-jobs__head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(222, 188, 117, .3);
  padding-bottom: 18px;
}

/* バッジ/セクション見出しは MISSION 一覧のラベル書体に合わせる（rpg-missions__head span 相当）。 */
.rpg-jobs__head span,
.rpg-jobs__section > h3,
.rpg-job-card > span { color: var(--rpg-gold, #c9a84c); font: 700 .56rem 'JetBrains Mono', monospace; letter-spacing: .14em; }
.rpg-jobs__head h2 { margin: 4px 0 0; font-size: clamp(2rem, 5vw, 4.4rem); }
.rpg-jobs__earn { text-align: right; }
.rpg-jobs__earn strong { display: block; color: #e4c66f; font-size: 1.4rem; }
.rpg-jobs__section { margin-top: 30px; }
.rpg-jobs__section > h3 { margin: 0 0 10px; }
.rpg-jobs__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 9px; }
.rpg-jobs__notice { max-width: 1100px; margin: 0 0 14px; padding: 9px 12px; border-left: 2px solid var(--rpg-gold, #c9a84c); border-radius: 2px; background: rgba(201, 168, 76, .07); color: var(--text, #e8e4dc); font-size: .68rem; line-height: 1.5; }

/* ── JOB CARD: rpg-mission と同じ枠・角丸・背景・hover言語に統一（.rpg-mission 参照） ── */
.rpg-job-card {
  position: relative;
  display: flex;
  min-height: 180px;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border, #2A2A3A);
  border-radius: 8px;
  background: rgba(6, 8, 14, .86);
  transition: .18s;
}
.rpg-job-card:hover { border-color: var(--rpg-gold, #c9a84c); transform: translateY(-1px); }

.rpg-job-card h4 { margin: 0; font-size: .82rem; font-weight: 700; color: var(--text, #e8e4dc); }
.rpg-job-card p { margin: 0; color: var(--text-muted, #b9bcc9); font-size: .68rem; line-height: 1.6; flex: 1; }
.rpg-job-card small { display: block; color: var(--text-dim, #848897); font: .58rem 'JetBrains Mono', monospace; letter-spacing: .02em; }

/* ボタンは .rpg-link と同じ見た目（枠線ボタン＋hoverでgold縁＋浮き上がり、disabledは薄く） */
.rpg-job-card button,
.rpg-sidecase__back {
  border: 1px solid var(--border, #2A2A3A);
  border-radius: 7px;
  padding: 8px 10px;
  font-size: .65rem;
  color: var(--text, #e8e4dc);
  background: rgba(10, 13, 21, .92);
  cursor: pointer;
  transition: .18s;
}
.rpg-job-card button:hover:not(:disabled),
.rpg-sidecase__back:hover { border-color: var(--rpg-gold, #c9a84c); transform: translateY(-1px); }
.rpg-job-card button:disabled { opacity: .6; cursor: not-allowed; }

/* カテゴリ差分は rpg-mission の状態表現（数字バッジのgold/dim）に倣い、枠全体ではなく左辺アクセントとバッジ色のみで示す。 */
.rpg-job-card--street { border-left: 3px solid rgba(172, 81, 62, .65); }
.rpg-job-card--street > span { color: #df806a; }
.rpg-job-card--case { border-left: 3px solid rgba(93, 137, 166, .55); }
.rpg-job-card--case > span { color: #8fc4df; }

/* 進行度バー: rpg-hp と同じピル角丸＋gold塗り */
.rpg-job-progress { height: 5px; border-radius: 3px; overflow: hidden; background: var(--border, #1a1f2c); }
.rpg-job-progress i { display: block; height: 100%; background: var(--rpg-gold, #c9a84c); transition: width .3s; }
.rpg-jobs__empty { color: var(--text-dim, #8f897d); font-size: .68rem; }

.rpg-sidecase {
  position: relative;
  min-height: 100%;
  display: grid;
  place-items: end stretch;
  overflow: hidden;
  background: #080b12;
}

.rpg-sidecase__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48; }
.rpg-sidecase__panel {
  position: relative;
  z-index: 1;
  margin: clamp(100px, 17vh, 180px) clamp(16px, 5vw, 72px) 56px;
  padding: clamp(20px, 4vw, 42px);
  background: linear-gradient(110deg, rgba(7, 10, 16, .96), rgba(11, 14, 21, .84));
  border-left: 3px solid #c9a84c;
}

.rpg-sidecase__panel > span { color: #c9a84c; letter-spacing: .16em; font-size: .72rem; }
.rpg-sidecase__panel h2 { margin: 5px 0 14px; font-size: clamp(1.8rem, 4vw, 3.4rem); }
.rpg-sidecase__speaker { color: #e2c976; font-weight: 700; }
.rpg-sidecase__panel p { max-width: 900px; line-height: 1.9; color: #e7e0d4; }
.rpg-sidecase__choices { display: grid; gap: 9px; margin-top: 22px; }
.rpg-sidecase__choices button { text-align: left; }
.rpg-sidecase__ending { font-size: 1.04rem; }

@media (max-width: 620px) {
  .rpg-jobs__head { align-items: start; flex-direction: column; }
  .rpg-jobs__earn { text-align: left; }
  .rpg-jobs__grid { grid-template-columns: 1fr; }
  .rpg-job-card { min-height: 0; padding: 12px 14px; }
  .rpg-sidecase__panel { margin-inline: 10px; margin-bottom: 20px; }
}