.site-title{
  display: flex;
  align-items: center;
  gap: 10px; /* ロゴと文字の間隔 */
}


/* 画面にはほぼ見せないけどスクリーンリーダーには読ませる用 */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}


.logo-small{
  width: 32px;      /* ← ロゴの大きさ（好きに変えられる） */
  height: 32px;
  object-fit: contain;
  border-radius: 6px;  /* 丸めるなら。不要なら消してOK */
}


/* 「このアイテムで制作可能」列のセル全体のスタイル */
.craft-cell{
  width: 260px;          /* 列の最大幅をある程度固定 */
  max-width: 260px;
  vertical-align: top;   /* 上寄せにして行頭と揃える */
}

/* 制作可能アイコンのグリッド */
.craft-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 常に2列 */
  gap: 6px;
}

/* 各アイコンボタン */
.craft-btn{
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;                  /* セル幅いっぱいを使う */
  padding: 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #11141b;
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;      /* 長い名前は「…」で省略 */
}

.craft-btn img{
  width: 26px;
  height: 26px;
  border-radius: 6px;
  object-fit: cover;
}

.craft-btn span{
  flex: 1;
  text-align: left;
}

/* ホバーしたときちょっとだけ光らせる */
.craft-btn:hover{
  background:#171c25;
  border-color:var(--accent);
}
.item-table th:last-child,
.item-table td:last-child{
  width: 260px;
}


    :root{
      --bg:#0f1013;
      --card:#17181e;
      --text:#ffffff;
      --muted:#9aa4b2;
      --line:#2a2c35;
      --accent:#7c3aed;
    }
/* ---------- グローバル読み込みインジケーター ---------- */
.loading-indicator{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--muted);
}

.loading-indicator .spinner-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  animation:pulse 0.8s ease-in-out infinite alternate;
}

@keyframes pulse{
  0%{opacity:.3; transform:scale(.7);}
  100%{opacity:1; transform:scale(1);}
}

    *{box-sizing:border-box;}
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
      background:var(--bg);
      color:var(--text);
    }
    .page{
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    header{
      padding:18px 16px 8px;
      border-bottom:1px solid var(--line);
      background:linear-gradient(135deg,#111827,#020617);
    }
    .header-inner{
      max-width:1100px;
      margin:0 auto;
    }
    h1{
      margin:0 0 6px;
      font-size:24px;
    }
    .lead{
      margin:0;
      font-size:14px;
      color:var(--muted);
      line-height:1.6;
    }
    main{
      flex:1;
    }
    .container{
      max-width:1100px;
      margin:20px auto 32px;
      padding:0 16px;
    }
    .row{
      display:flex;
      gap:10px;
      align-items:center;
      margin-bottom:12px;
      flex-wrap:wrap;
    }
    .note{
      font-size:12px;
      color:var(--muted);
      margin-bottom:4px;
    }
    input{
      background:#0f1115;
      color:var(--text);
      border:1px solid var(--line);
      padding:10px 12px;
      border-radius:8px;
      outline:none;
      width:100%;
    }
    input:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 1px rgba(124,58,237,.4);
    }
    button{
      font-family:inherit;
      cursor:pointer;
    }
    .btn-primary{
      min-width:110px;
      padding:10px 14px;
      border-radius:10px;
      border:none;
      color:#fff;
      background:var(--accent);
      font-weight:600;
      transition:transform .05s ease, box-shadow .05s ease, background .15s;
    }
    .btn-primary:active{
      transform:translateY(1px);
      box-shadow:0 0 0;
      background:#5b21b6;
    }
    .btn-secondary{
      padding:8px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#111827;
      color:var(--muted);
      font-size:12px;
    }
    .btn-secondary:hover{
      background:#1f2933;
    }
  .btn-secondary.active{
    background:#1f2933;
    color:#e5e7eb;
    border-color:var(--accent);
  }

    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:12px;
      padding:16px;
      margin-top:16px;
    }
    .section-title{
      font-weight:700;
      margin:0 0 10px;
      font-size:15px;
    }
    .item-wrap{
      display:flex;
      gap:16px;
      flex-wrap:wrap;
    }
    .item-img{
      width:110px;
      height:110px;
      border-radius:12px;
      border:1px solid var(--line);
      object-fit:cover;
      background:#020617;
    }
    .placeholder{
      background:radial-gradient(circle at 30% 20%,#1e293b,#020617);
    }
    .item-main{
      flex:1;
      min-width:220px;
    }
    .item-title-row{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:6px;
      flex-wrap:wrap;
    }
    .item-name{
      font-size:20px;
      font-weight:800;
    }
    .chip{
      display:inline-block;
      padding:.25rem .6rem;
      border-radius:999px;
      font-weight:700;
      font-size:.8rem;
      white-space:nowrap;
    }
    .rar-common{background:#ffffff;color:#111827;}
    .rar-uncommon{background:#16a34a;color:#fff;}
    .rar-rare{background:#2563eb;color:#fff;}
    .rar-epic{background:#7c3aed;color:#fff;}
    .rar-legendary{background:#eab308;color:#111827;}
    .info-grid{
      display:grid;
      grid-template-columns:1fr 260px;
      gap:18px;
      align-items:flex-start;
    }
    @media(max-width:800px){
      .info-grid{grid-template-columns:1fr;}
    }
    .grid{
      display:grid;
      grid-template-columns:110px 1fr;
      gap:6px 10px;
      font-size:13px;
    }
    .muted{color:var(--muted);}
    .topmaps{
      margin:0;
      padding-left:1.2rem;
      font-size:13px;
    }
    .topmaps li{margin-bottom:4px;}
    table{
      width:100%;
      border-collapse:collapse;
      font-size:13px;
    }
    th,td{
      border-bottom:1px solid var(--line);
      padding:.5rem .6rem;
      vertical-align:top;
    }
    th{
      text-align:left;
      color:var(--muted);
      font-weight:600;
      font-size:12px;
    }
    tr:hover td{
      background:#1b1d24;
    }
    .img-40{
      width:40px;
      height:40px;
      border-radius:8px;
      border:1px solid var(--line);
      object-fit:cover;
      background:#020617;
    }
    .tag{
      display:inline-block;
      padding:.2rem .5rem;
      border-radius:999px;
      border:1px solid var(--line);
      font-size:11px;
      color:var(--muted);
    }
    .clickable-line span{
      cursor:pointer;
      text-decoration:underline;
      text-decoration-style:dotted;
    }
    .clickable-line span:hover{
      color:#e5e7eb;
    }
    /* モーダル共通 */
    .modal-backdrop{
      position:fixed;
      inset:0;
      background:rgba(15,23,42,.7);
      display:none;
      align-items:center;
      justify-content:center;
      z-index:50;
    }
    .modal{
      background:#020617;
      border-radius:16px;
      border:1px solid var(--line);
      max-width:560px;
      width:90%;
      max-height:80vh;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .modal-header{
      padding:10px 14px;
      border-bottom:1px solid var(--line);
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }
    .modal-title{
      font-size:14px;
      font-weight:600;
    }
    .modal-body{
      padding:8px 14px 12px;
      overflow:auto;
    }
    .modal-footer{
      padding:8px 14px 10px;
      border-top:1px solid var(--line);
      text-align:right;
    }
    .close-btn{
      background:none;
      border:none;
      color:var(--muted);
      font-size:16px;
      cursor:pointer;
    }
    .candidate-list{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
    }
.candidate-item{
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#020617;
  font-size:12px;
  cursor:pointer;
  color:#fff;                /* ← 白文字 */
  display:flex;
  align-items:center;
  gap:6px;
}

.candidate-item img{
  width:16px;
  height:16px;
  object-fit:cover;
  border-radius:3px;
  border:1px solid var(--line);
}


    .candidate-item:hover{
      background:#111827;
    }
    .itemlist-grid{
      width:100%;
      border-collapse:collapse;
    }
    .itemlist-grid th,.itemlist-grid td{
      border-bottom:1px solid var(--line);
      padding:.4rem .5rem;
      font-size:12px;
    }
    .pager{
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:12px;
      gap:8px;
      flex-wrap:wrap;
    }
    .pager button{
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#020617;
      color:var(--muted);
      font-size:11px;
    }
    .pager button:disabled{
      opacity:.4;
      cursor:default;
    }
    .select{
      padding:4px 8px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#020617;
      color:var(--muted);
      font-size:11px;
    }
    footer{
      border-top:1px solid var(--line);
      padding:10px 16px 14px;
      font-size:11px;
      color:var(--muted);
      text-align:center;
    }
/* ▼ フッターリンクの可視性改善 */
.footer-links a {
  color: #ffffff !important;      /* 白文字に強制 */
  text-decoration: underline;      /* 常に下線 */
  font-size: 12px;
  margin-right: 14px;
}

.footer-links a:hover {
  color: #38bdf8 !important;       /* 明るい水色に変化（好みで変更可） */
  text-decoration: underline;
}
/* お問い合わせ欄のリンク（開発者Xアカウント）の見やすさ改善 */
a.footer-link {
  color: #ffffff !important;          /* 白文字に強制 */
  text-decoration: underline;         /* 常に下線 */
}

a.footer-link:hover {
  color: #38bdf8 !important;          /* ホバー時はサイトのアクセント色に */
  text-decoration: underline;
}