/* ---- 必要最小限のスタイル ---- */
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif;background:#0b1020;color:#e8eef6}
a{color:#6ea8fe}
.wrap{max-width:1100px;margin:0 auto;padding:16px}
h1{margin:0 0 8px;font-size:20px}
.row{display:flex;flex-wrap:wrap;gap:12px}
.card{background:#121831;border:1px solid #202a4a;border-radius:12px;padding:12px}
label{font-size:12px;color:#99a3b3}
input,select,button,textarea{background:#0f1731;border:1px solid #273154;color:#e8eef6;border-radius:8px;padding:8px 10px;font-size:14px}
input:focus,select:focus,button:focus{outline:2px solid #6ea8fe;outline-offset:0}
button{cursor:pointer}
.btn{background:#1a2447}
.btn.primary{background:#2a54ff;border:none}
.small{font-size:12px;color:#99a3b3}
.w-100{width:100%}.w-66{width:66%}.w-50{width:50%}.w-33{width:33%}.w-25{width:25%}
.right{margin-left:auto}.flex{display:flex;gap:8px;align-items:center}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}
.tag{background:#1c274a;border:1px solid #2f3a67;border-radius:8px;padding:6px 8px}
.error{color:#ffd2d2}
.loader{width:16px;height:16px;border:2px solid #3a4b7c;border-top-color:#8fb3ff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* 表は横スクロール可、見出しだけ画面上部に吸着 */
.table-wrap{overflow:auto;max-height:70vh;border:1px solid #202a4a;border-radius:10px}
table{width:100%;border-collapse:separate;border-spacing:0}
thead{position:sticky;top:0;z-index:1;background:#0e152d}
th,td{padding:10px;border-bottom:1px solid #263058;vertical-align:top;text-align:left; font-size: 12px; }
/* ---- 折り返し調整（ここから追記） ---- */

/* セル幅を安定させて横伸びを抑える */
.table-wrap table{
  table-layout: fixed;
}

/* 文章は気持ちよく折り返す */
th, td{
  white-space: normal;
  overflow-wrap: anywhere; /* 連続文字でも折る */
  word-break: break-word;  /* レガシー互換 */
  hyphens: auto;           /* 対応ブラウザでハイフネーション */
}

/* URLはどこでも折る（長いクエリ対策） */
td a{
  word-break: break-all;
}

/* 数値セルは折り返さず右寄せ（JSで class="num" を付与） */
td.num{
  white-space: nowrap;
  text-align: right;
}
tr:hover td{background:#111a35}
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border:1px solid #304072;border-radius:999px;font-size:12px}
.section-title{font-size:13px;color:#c9d6ff;margin-bottom:6px}
.star{font-size:18px;line-height:1;border:none;background:transparent;color:#d5def7}
.star[data-active="true"]{color:#ffda6b}
.toolbar{display:flex;gap:8px;flex-wrap:wrap}

/* ---- セクション（開閉） ---- */
details.section{
  border:1px solid #2f3a67;
  border-radius:10px;
  background:#0e152d;
}
details.section > summary{
  cursor:pointer;
  padding:10px 12px;
  font-weight:600;
  color:#c9d6ff;
  list-style:none;
  user-select:none;
}
details.section > summary::-webkit-details-marker{ display:none; }
details.section[open] > summary{ border-bottom:1px solid #2f3a67; }
details.section .section-body{ padding:10px 12px; }
details.section:hover{ border-color:#3a4b7c; }

/* details をカードとして使う時のレイアウト調整 */
details.section.card{ display:block; padding:0; }
details.section.card > summary{ padding:12px; }
details.section.card .section-body{ padding:12px; }

.url-ellipsis{
  display: inline-block;
  max-width: 30px;        /* ★適宜調整：省略前の最大幅 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}


/* ================================
   スマホ時はテーブルをカード表示に
   ================================ */
   @media (max-width: 640px){
    .table-wrap{
      overflow: visible;
      max-height: none;
      border: none;
    }
  
    /* テーブル構造をブロック化 */
    table,
    thead,
    tbody,
    th,
    td,
    tr{
      display: block;
    }
  
    /* theadは非表示（カード内で各セルにラベルを出す） */
    thead{
      position: static;
      height: 0;
      overflow: hidden;
      border: 0;
      clip: rect(0 0 0 0);
      padding: 0;
      margin: 0;
    }
  
    /* 行全体をカードに */
    tbody{
      display: grid;
      gap: 12px;
    }
    tr{
      background: #121831;
      border: 1px solid #202a4a;
      border-radius: 12px;
      padding: 10px 12px;
    }
    tr:hover td{
      background: transparent; /* PC時のホバー色は無効化 */
    }
  
    /* セルは「ラベル：値」の2カラム */
    td{
      border: 0;
      padding: 8px 0;
      display: grid;
      grid-template-columns: 42% 58%;
      align-items: start;
      gap: 8px;
    }
    /* 区切り線（行内のセル間） */
    td + td{
      border-top: 1px solid #263058;
    }
  
    /* ラベル（th相当）は疑似要素で表示。JSで入れた data-label を使用 */
    td::before{
      content: attr(data-label);
      color: #c9d6ff;
      font-weight: 600;
      font-size: 12px;
    }
  
    /* 数値セルは折り返しOK・左寄せに変更 */
    td.num{
      white-space: normal;
      text-align: left;
    }
  
    /* 先頭セル（★ボタン）はラベル不要＆レイアウト調整 */
    tr > td:first-child{
      grid-template-columns: 1fr;
      justify-content: flex-start;
      padding-top: 0;
      padding-bottom: 6px;
    }
    tr > td:first-child::before{
      content: none; /* ラベル非表示 */
    }
  
    /* URLは全文表示でOK（折り返し優先） */
    .url-ellipsis{
      max-width: 100%;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      word-break: break-all;
    }
  }