/* =====================================================================
   style.css — 写真プリントサイズ早見 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 逆引き入力（横px / 縦px を横並び） */
.pps-inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.pps-inputs .sg-field {
  flex: 1 1 140px;
  margin: 0;
}

/* 一覧テーブル（横スクロール可） */
.pps-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  white-space: nowrap;
}
.pps-table th,
.pps-table td {
  padding: 7px 10px;
  text-align: right;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.pps-table thead th {
  text-align: right;
  font-weight: 600;
  color: var(--sg-muted, #555);
  border-bottom: 2px solid var(--sg-border, #e5e7eb);
  vertical-align: bottom;
}
.pps-table th[scope="row"] {
  text-align: left;
  font-weight: 600;
}
.pps-th-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--sg-muted, #999);
}

/* 逆引き判定リスト */
.pps-judge {
  display: flex;
  flex-direction: column;
  margin-top: var(--sg-space-3, 12px);
  border-top: 1px solid var(--sg-border, #e5e7eb);
}
.pps-judge-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.pps-judge-row__name {
  flex: 1 1 auto;
  font-weight: 600;
}
.pps-judge-row__dpi {
  flex: 0 0 auto;
  color: var(--sg-muted, #555);
  font-variant-numeric: tabular-nums;
}
.pps-badge {
  flex: 0 0 auto;
  min-width: 3.2em;
  text-align: center;
  font-size: 0.78rem;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--sg-border, #e5e7eb);
}
.pps-badge.is-good { color: #1b7a3d; border-color: #9bd6ae; background: rgba(27,122,61,.08); }
.pps-badge.is-ok   { color: #8a5a00; border-color: #e6c98a; background: rgba(138,90,0,.08); }
.pps-badge.is-bad  { color: #a12626; border-color: #e2a3a3; background: rgba(161,38,38,.07); }

/* 単体詳細 */
.pps-detail {
  display: flex;
  flex-direction: column;
  margin-top: var(--sg-space-2, 8px);
}
.pps-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--sg-border, #e5e7eb);
}
.pps-detail-row__key {
  flex: 0 0 9em;
  color: var(--sg-muted, #555);
}
.pps-detail-row__val {
  flex: 1 1 auto;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}