/* =====================================================================
   style.css — MIMEタイプ・拡張子早見 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 件数表示 */
.mt-count {
  margin: 0 0 var(--sg-space-2, 8px);
  font-size: 0.85rem;
  color: var(--sg-muted, #777);
}

/* 一覧 */
.mt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 1行（拡張子 / MIME / 説明 / コピー） */
.mt-item {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  grid-template-areas:
    "ext mime copy"
    "ext desc copy";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 12px;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  background: var(--sg-surface, #fff);
}

.mt-ext {
  grid-area: ext;
  align-self: center;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--sg-primary, #3b5bdb);
  word-break: break-all;
}

.mt-mime {
  grid-area: mime;
  font-size: 0.92rem;
  word-break: break-all;
}

.mt-desc {
  grid-area: desc;
  font-size: 0.78rem;
  color: var(--sg-muted, #777);
}

.mt-copy {
  grid-area: copy;
  align-self: center;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 0.8rem;
  border: 1px solid var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
  background: transparent;
  color: var(--sg-primary, #3b5bdb);
  cursor: pointer;
}
.mt-copy:hover {
  background: rgba(59, 91, 219, 0.08);
}
.mt-copy.is-done {
  border-color: #2f9e44;
  color: #2f9e44;
  background: rgba(47, 158, 68, 0.1);
}

.mt-empty {
  padding: 16px 12px;
  font-size: 0.9rem;
  color: var(--sg-muted, #777);
  text-align: center;
  border: 1px dashed var(--sg-border, #e5e7eb);
  border-radius: var(--sg-radius, 8px);
}

/* 狭い画面ではコピーを下段に回す */
@media (max-width: 420px) {
  .mt-item {
    grid-template-columns: 72px 1fr;
    grid-template-areas:
      "ext mime"
      "ext desc"
      "copy copy";
  }
  .mt-copy {
    justify-self: end;
    margin-top: 4px;
  }
}