@charset "UTF-8";

:root {
  /* ベースカラー */
  --bg-dark: #363e4f;      /* 全体の背景（ネイビー） */
  --card-bg: #f4e9d8;      /* カードの背景（ベージュ） */
  --card-inner: #ece0ce;   /* 内側の枠の背景 */
  
  /* テキストカラー */
  --text-main: #4d453e;    /* 基本の文字色（濃茶） */
  --text-sub: #8a8279;     /* 補足情報の文字色 */
  --border-color: #d3bc8e; /* 枠線 */

  
  /* レアリティ・アクセント */
  --rarity-5: #d9a65d;     /* 金（星5） */
  --rarity-4: #9c7ec5;     /* 紫（星4） */
  --rarity-3: #5196b0;     /* 青（星3） */
  --accent-gold: #cdbc91;  /* ボタン等の装飾金 */

  /* 完了済みラベル（グレー）：落ち着いたグレートーン */
  --chara_label-bg-done: linear-gradient(180deg, #c3c5c8 0%, #929496 100%);
  /* 極限候補ラベル（紫）：深みのあるミスティックパープル */
  --chara_label-bg-candidate: linear-gradient(180deg, #b9a2d8 0%, #9c7ec5 100%);
  /* 覚醒待ちラベル（青）：透明感のあるスカイブルー */
  --chara_label-bg-awaiting: linear-gradient(180deg, #74b1c9 0%, #5196b0 100%);
}

.main_v2{
  /* background-color: rgba(244, 239, 232, 0.9);
  padding: 10px; */
}


.filter_get_type li label{
  font-size: 1.3rem;
  padding: 5px 2px;
}



.charalist_v2 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px 8px;
  padding: 4px;
  list-style: none;
}
.charalist_v2 li {
  padding: 0;
  text-align: center;
  border-radius: 4px;
  font-size: 12px; 
}
.charalist_v2 li img{
  width: 100%;
  height: auto !important;
  min-height: auto !important;
  object-fit: cover;
  border-radius: 4px;
}

.charalist_v2 .chara_icon{
  aspect-ratio: 1 / 1;
}

.charalist_v2 .chara_label{
  background: var(--chara_label-bg-candidate);
  border-radius: 4px;
  font-size: 10px;
  color: #fff;
}
.charalist_v2 .chara_label.done{
  background: var(--chara_label-bg-done);
}
.charalist_v2 .chara_label.awaiting{
  background: var(--chara_label-bg-awaiting);
}

.filter_segment li{
  padding: 3px 0;
}

.filter_segment li label{
  border-radius: 0;
}
.filter_segment li:first-child label{
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.filter_segment li:last-child label{
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}


/* メインカード */
.card {
  background-color: var(--card-bg);
  border-radius: 12px;
  border: 2px solid var(--border-color);
  padding: 20px;
  color: var(--text-main);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.card__header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 15px;
}

.weapon-icon {
  width: 60px;
  height: 60px;
  background-color: var(--rarity-5);
  border-radius: 8px;
  margin-right: 15px;
}

.weapon-info h2 {
  margin: 0;
  font-size: 1.2rem;
}

/* 素材リストエリア */
.material-list {
  background-color: var(--card-inner);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.material-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.material-item {
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  position: relative;
  background-size: cover;
}

/* レアリティ別の背景指定 */
.m-gold {
  background-color: var(--rarity-5);
  border: 1px solid #ffebbb;
}

.m-purple {
  background-color: var(--rarity-4);
  border: 1px solid #e2d2ff;
}

.m-blue {
  background-color: var(--rarity-3);
  border: 1px solid #cfefff;
}

.material-count {
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 10px;
  padding: 1px 4px;
  width: 100%;
  text-align: center;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}

/* ボタンデザイン */
.btn-action {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 12px;
  text-align: center;
  background-color: var(--card-inner);
  border: 2px solid var(--border-color);
  border-radius: 25px;
  color: var(--text-main);
  font-weight: bold;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-action:hover {
  background-color: var(--border-color);
  color: white;
}