/* =====================================================================
   style.css — 封筒・郵便物サイズ早見 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる（結果表示は sg-result）。
   ===================================================================== */

/* 判定フォームの2列グリッド */
.sg-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
}
@media (max-width: 420px) {
  .sg-grid2 { grid-template-columns: 1fr; }
}

/* 区分タグ（定形／定形外） */
.sg-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 1px 9px;
  white-space: nowrap;
}
.sg-tag.is-teikei {
  color: #1c7c54;
  background: rgba(45, 164, 78, 0.14);
}
.sg-tag.is-teikeigai {
  color: #9a5b00;
  background: rgba(217, 119, 6, 0.14);
}

/* 逆引き結果の候補リスト */
.sg-picks {
  display: flex;
  flex-direction: column;
  margin-top: var(--sg-space-3, 12px);
  border-top: 1px solid var(--sg-border, #e5e7eb);
}
.sg-pick {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.sg-pick__name {
  flex: 0 0 6.5em;
  font-weight: 600;
}
.sg-pick__dim {
  flex: 1 1 auto;
  color: var(--sg-muted, #555);
  font-variant-numeric: tabular-nums;
}

/* 一覧表 */
.sg-chart {
  display: flex;
  flex-direction: column;
}
.sg-chart-group {
  margin-top: var(--sg-space-3, 12px);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--sg-muted, #555);
  border-bottom: 2px solid var(--sg-border, #e5e7eb);
  padding-bottom: 4px;
}
.sg-erow {
  display: grid;
  grid-template-columns: 6.5em 8em 1fr auto;
  align-items: baseline;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.sg-erow__name { font-weight: 600; }
.sg-erow__dim {
  color: var(--sg-muted, #555);
  font-variant-numeric: tabular-nums;
}
.sg-erow__use {
  color: var(--sg-muted, #555);
  font-size: 0.9rem;
}
@media (max-width: 520px) {
  .sg-erow {
    grid-template-columns: 1fr auto;
    gap: 2px 10px;
  }
  .sg-erow__dim { grid-column: 1; }
  .sg-erow__use {
    grid-column: 1 / -1;
    font-size: 0.85rem;
  }
  .sg-erow__name { grid-column: 1; }
  .sg-tag { grid-column: 2; grid-row: 1; }
}