/* Base */
.tsumk-wrap{max-width:960px;margin:0 auto;padding:8px}
.tsumk-card{background:#fff;border-radius:14px;box-shadow:0 2px 10px rgba(0,0,0,.06);padding:14px;margin:12px 0}
.tsumk-card-title{font-weight:700;margin-bottom:8px}
.tsumk-header{display:flex;justify-content:space-between;align-items:center}
.tsumk-row{display:flex;gap:8px;align-items:center;margin:10px 0;flex-wrap:wrap}
.tsumk-row label{min-width:80px}
.tsumk-row input{padding:10px 12px;border:1px solid #ddd;border-radius:10px}
.tsumk-actions{display:flex;gap:8px;flex-wrap:wrap}
.tsumk-btn{padding:10px 14px;border-radius:10px;border:1px solid #ddd;background:#f8f8f8;cursor:pointer}
.tsumk-btn.primary{background:#007cba;color:#fff;border-color:#007cba}
.tsumk-btn.ghost{background:#fff}
.tsumk-btn.chip{font-size:.9rem}
.tsumk-btn-sm{padding:6px 10px;font-size:.9rem}
.tsumk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tsumk-kv{font-size:1.2rem;font-weight:700}
.tsumk-kv-label{color:#666}
.tsumk-result{margin-top:10px}
.tsumk-sub{color:#666;margin-bottom:8px}
.tsumk-warning{background:#fff3cd;border:1px solid #ffeeba;border-radius:8px;padding:10px}

/* Collapsible */
.tsumk-summary-head{display:flex;align-items:center;gap:.5rem;cursor:pointer;user-select:none;padding:6px 0}
.tsumk-period{color:#007cba;font-weight:700}
.tsumk-collapsible-body{padding-top:10px}

/* Table */
.tsumk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tsumk-table{width:100%;border-collapse:collapse}
.tsumk-table th,.tsumk-table td{border-bottom:1px solid #eee;padding:8px;text-align:left;white-space:nowrap}

/* Colors */
.tsumk-val.pos{color:#007cba;font-weight:700}
.tsumk-val.neg{color:#d11;font-weight:700}

/* Ranking */
.tsumk-rank .tsumk-rank-tabs{margin:4px 0 8px}
.tsumk-rank-self table thead th{background:#f7fbff}

/* ==============================
   マイページのプロフィール編集グリッド
   ============================== */
.tsumk-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PCでは2列 */
  gap: 16px 24px;                /* 行と列の余白 */
}

.tsumk-profile-grid .tsumk-row {
  display: block; /* flexを無効化して縦積みにする */
}

.tsumk-profile-grid .tsumk-row label {
  display: block;
  margin-bottom: 6px;
}

.tsumk-profile-grid .tsumk-row input {
  width: 100%;
  box-sizing: border-box;
}

/* スマホ幅では1列表示 */
@media (max-width: 768px) {
  .tsumk-profile-grid {
    grid-template-columns: 1fr; /* 1列に落とす */
  }
}

/* バッジ列 */
.tsumk-rank-table td.badge-cell {
  text-align: center;
  vertical-align: middle;
  width: 48px;
  padding: 2px 4px;
  line-height: 0; /* ← これが重要！テキストの余白を消して画像の中央を揃える */
}

/* バッジ画像 */
.tsumk-rank-table td.badge-cell img {
  display: block;              /* inline-block ではなく block に */
  margin: 0 auto;              /* 中央寄せ */
  max-width: 2.5rem;
  max-height: 2.5rem;
  object-fit: contain;
}