/* =====================================================================
   style.css — UTMパラメータ生成 ツール固有の微調整のみ。
   共通スタイルは /_shared/shirugear.css に任せる。
   ===================================================================== */

/* 完成URL・内訳はタブ幅数字・折り返しで見やすく */
.sg-output {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all;
}
.sg-result-row__value {
  word-break: break-all;
}

/* 補助ラベルを入力直下に詰める */
.sg-field .sg-help {
  margin-top: var(--sg-space-1);
}

/* 区切り線 */
.sg-hr {
  border: none;
  border-top: 1px solid var(--sg-border, #e5e7eb);
  margin: var(--sg-space-4) 0;
}

/* 必須／任意ラベル */
.ub-req,
.ub-opt {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  vertical-align: middle;
}
.ub-req {
  color: #b42318;
  background: rgba(180, 35, 24, 0.1);
}
.ub-opt {
  color: var(--sg-muted, #777);
  background: rgba(120, 120, 120, 0.12);
}

/* プリセットボタン群 */
.ub-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: var(--sg-space-2);
}