@charset "UTF-8";
/* ==========================================================================
   tools/url-builder/assets/app.css
   入稿URL作成ツール固有のスタイル。
   共通トークン（tokens.css）→ 共通レイアウト（layout.css）→ 本ファイル の順で読む。
   色は必ず tokens.css の変数から導出し、16進数を直接書かない。
   クラス接頭辞は urb-
   ========================================================================== */

/* --- ページ骨格 ------------------------------------------------------- */
.urb-hero {
  background: var(--rm-gradient-hero);
  color: var(--rm-text-invert);
  padding: var(--rm-space-7) 0 var(--rm-space-6);
}
.urb-hero__title { font-size: var(--rm-fs-xl); font-weight: 700; line-height: 1.35; }
.urb-hero__lead {
  margin-top: var(--rm-space-4);
  font-size: var(--rm-fs-sm);
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.82);
  max-width: 44em;
}
.urb-hero__meta {
  margin-top: var(--rm-space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2);
}
.urb-hero__meta span {
  font-size: var(--rm-fs-xs);
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
}

.urb-main { padding: var(--rm-space-6) 0 var(--rm-space-8); }

/* --- 免責と出典（ページ冒頭に1か所だけ置く） -------------------------- */
.urb-notice {
  background: var(--rm-blue-tint);
  border: 1px solid var(--rm-blue-line);
  border-radius: var(--rm-radius-sm);
  padding: var(--rm-space-4) var(--rm-space-5);
  margin-bottom: var(--rm-space-6);
}
.urb-notice__title {
  font-size: var(--rm-fs-sm);
  font-weight: 700;
  color: var(--rm-text-dark);
}
.urb-notice__list {
  list-style: none;
  margin: var(--rm-space-2) 0 0;
  padding: 0;
  font-size: var(--rm-fs-sm);
  line-height: 1.85;
  color: var(--rm-text);
}
.urb-notice__list li { position: relative; padding-left: 1.2em; }
.urb-notice__list li + li { margin-top: var(--rm-space-2); }
.urb-notice__list li::before { content: "・"; position: absolute; left: 0; }
.urb-notice a { color: var(--rm-blue); text-decoration: underline; }

/* --- β版バッジ -------------------------------------------------------- */
.urb-beta {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.14);
  font-size: var(--rm-fs-xs);
  font-weight: 700;
  vertical-align: middle;
}

/* --- ステップカード --------------------------------------------------- */
.urb-step {
  background: var(--rm-bg);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  box-shadow: var(--rm-shadow-sm);
  padding: var(--rm-space-5);
  margin-bottom: var(--rm-space-5);
}
.urb-step__head { display: flex; gap: var(--rm-space-3); align-items: center; }
.urb-step__no {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--rm-navy);
  color: var(--rm-cyan);
  font-family: var(--rm-font-num);
  font-weight: 700;
  font-size: var(--rm-fs-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.urb-step__title { font-size: var(--rm-fs-md); font-weight: 700; color: var(--rm-text-dark); }
.urb-step__desc { margin-top: var(--rm-space-3); font-size: var(--rm-fs-sm); color: var(--rm-text-sub); line-height: 1.85; }
.urb-step__body { margin-top: var(--rm-space-4); }

/* --- フォーム部品 ----------------------------------------------------- */
.urb-label { display: block; font-size: var(--rm-fs-sm); font-weight: 700; margin-bottom: var(--rm-space-2); }
.urb-input,
.urb-select,
.urb-textarea {
  width: 100%;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-sm);
  padding: 10px 12px;
  font-size: var(--rm-fs-sm);
  background: var(--rm-bg);
  line-height: 1.6;
}
.urb-textarea { min-height: 88px; resize: vertical; font-family: var(--rm-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
.urb-input:focus, .urb-select:focus, .urb-textarea:focus {
  outline: 2px solid rgba(75, 120, 195, 0.45);
  outline-offset: 1px;
  border-color: var(--rm-blue);
}
.urb-input::placeholder, .urb-textarea::placeholder { color: var(--rm-text-mute); }
.urb-select { padding-right: 8px; background: var(--rm-bg); }
.urb-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* --- 媒体の選択 ------------------------------------------------------- */
.urb-media {
  display: grid;
  gap: var(--rm-space-2);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.urb-media__item {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-sm);
  padding: 11px 13px;
  cursor: pointer;
  background: var(--rm-bg);
  transition: 0.2s;
}
.urb-media__item:hover { border-color: var(--rm-blue); }
.urb-media__item input { margin-top: 3px; accent-color: var(--rm-blue); flex: none; }
.urb-media__item.is-on { border-color: var(--rm-blue); background: var(--rm-blue-tint); }
.urb-media__name { font-size: var(--rm-fs-sm); font-weight: 700; display: block; }
.urb-media__sub { font-size: var(--rm-fs-xs); color: var(--rm-text-sub); display: block; margin-top: 2px; }
.urb-media__tools { display: flex; gap: var(--rm-space-2); margin-top: var(--rm-space-3); flex-wrap: wrap; }

/* --- 既存パラメーターの一覧 ------------------------------------------- */
.urb-detected { margin-top: var(--rm-space-4); }
.urb-chiplist { display: flex; flex-wrap: wrap; gap: var(--rm-space-2); margin-top: var(--rm-space-2); }
.urb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--rm-fs-xs);
  border: 1px solid var(--rm-border);
  background: var(--rm-bg-soft);
  border-radius: 999px;
  padding: 4px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.urb-chip b { font-weight: 700; }
.urb-chip__tag {
  font-family: var(--rm-font);
  font-size: 10px;
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--rm-bg-active);
  color: var(--rm-blue-dark);
}
.urb-chip--keep .urb-chip__tag { background: var(--rm-cyan-tint); color: var(--rm-blue-dark); }
.urb-chip--click .urb-chip__tag { background: var(--rm-attention-bg); color: var(--rm-text); }

/* --- 割り当て表 ------------------------------------------------------- */
.urb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.urb-table { width: 100%; font-size: var(--rm-fs-sm); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); }
.urb-table th, .urb-table td { border-bottom: 1px solid var(--rm-border); padding: 10px 12px; text-align: left; vertical-align: middle; }
.urb-table thead th { background: var(--rm-bg-card); font-size: var(--rm-fs-xs); color: var(--rm-text-dark); white-space: nowrap; }
.urb-table tbody tr:last-child th, .urb-table tbody tr:last-child td { border-bottom: none; }
.urb-table th[scope="row"] { font-weight: 700; white-space: nowrap; }
.urb-table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.urb-table__hint { display: block; font-size: var(--rm-fs-xs); color: var(--rm-text-sub); font-weight: 400; margin-top: 2px; }
.urb-table select, .urb-table input { min-width: 148px; }

/* --- メッセージ ------------------------------------------------------- */
.urb-msg {
  border-radius: var(--rm-radius-sm);
  padding: 11px 14px;
  font-size: var(--rm-fs-sm);
  line-height: 1.8;
  border: 1px solid var(--rm-border);
  background: var(--rm-bg-soft);
  margin-top: var(--rm-space-3);
}
.urb-msg + .urb-msg { margin-top: var(--rm-space-2); }
.urb-msg b { display: block; margin-bottom: 2px; }
.urb-msg--info { background: var(--rm-blue-tint); border-color: var(--rm-blue-line); }
.urb-msg--warn { background: var(--rm-attention-bg); border-color: var(--rm-attention-line); }
.urb-msg--err { background: #FDECEC; border-color: #F3C2C2; color: #8E1F26; }
.urb-msg--ok { background: var(--rm-cyan-tint); border-color: var(--rm-blue-line); }
/* メッセージの直後にカードや表が来ると貼り付いて見えるので、間を空ける */
.urb-msg + .urb-out { margin-top: var(--rm-space-4); }
.urb-prenote:not(:empty) { margin-bottom: var(--rm-space-4); }
.urb-prenote--flush .urb-msg:first-child { margin-top: 0; }
.urb-msg a { color: var(--rm-blue); text-decoration: underline; }
.urb-note-line { display: block; }
.urb-note-line + .urb-note-line { margin-top: var(--rm-space-2); }
.urb-msg .rm-btn { margin-top: var(--rm-space-2); }

/* --- 結果 ------------------------------------------------------------- */
.urb-result { margin-top: var(--rm-space-4); }
.urb-result__empty {
  border: 1px dashed var(--rm-border-strong);
  border-radius: var(--rm-radius-sm);
  padding: var(--rm-space-6) var(--rm-space-4);
  text-align: center;
  color: var(--rm-text-sub);
  font-size: var(--rm-fs-sm);
}
.urb-out {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  overflow: hidden;
  margin-bottom: var(--rm-space-4);
  background: var(--rm-bg);
}
.urb-out__head {
  background: var(--rm-bg-card);
  padding: 12px var(--rm-space-4);
  display: flex; align-items: center; gap: var(--rm-space-2); flex-wrap: wrap;
}
.urb-out__name { font-weight: 700; font-size: var(--rm-fs-sm); color: var(--rm-text-dark); }
.urb-out__badge {
  font-size: 11px; border-radius: 999px; padding: 2px 9px;
  background: var(--rm-bg-active); color: var(--rm-blue-dark); border: 1px solid var(--rm-blue-line);
}
.urb-out__badge--manual { background: var(--rm-attention-bg); border-color: var(--rm-attention-line); color: var(--rm-text); }
.urb-out__body { padding: var(--rm-space-4); }

.urb-field + .urb-field { margin-top: var(--rm-space-4); }
.urb-field__label { font-size: var(--rm-fs-sm); font-weight: 700; }
.urb-field__where { font-size: var(--rm-fs-xs); color: var(--rm-text-sub); margin-top: 2px; line-height: 1.7; }
.urb-code {
  margin-top: var(--rm-space-2);
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-sm);
  overflow: hidden;
  background: var(--rm-bg-soft);
}
.urb-code textarea {
  flex: 1; min-width: 0;
  border: none; background: transparent; resize: vertical;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.7;
  min-height: 62px;
  word-break: break-all;
}
.urb-code textarea:focus { outline: 2px solid rgba(75, 120, 195, 0.35); outline-offset: -2px; }
.urb-copy {
  flex: none;
  border: none; border-left: 1px solid var(--rm-border-strong);
  background: var(--rm-bg-card);
  color: var(--rm-blue-dark);
  font-size: var(--rm-fs-xs); font-weight: 700;
  padding: 0 14px;
  min-width: 74px;
}
.urb-copy:hover { background: var(--rm-bg-active); }
.urb-copy.is-done { background: var(--rm-cyan-tint); color: var(--rm-blue-dark); }

.urb-steps { margin-top: var(--rm-space-4); font-size: var(--rm-fs-sm); }
.urb-steps__title { font-weight: 700; font-size: var(--rm-fs-xs); color: var(--rm-text-dark); letter-spacing: var(--rm-ls); }
.urb-steps ol { margin: var(--rm-space-2) 0 0; padding-left: 1.3em; list-style: decimal; color: var(--rm-text); line-height: 1.85; }
.urb-steps ol li + li { margin-top: 3px; }
.urb-cautions { margin-top: var(--rm-space-3); }
.urb-cautions ul { list-style: none; margin: var(--rm-space-2) 0 0; padding: 0; }
.urb-cautions li {
  position: relative; padding-left: 1.3em; font-size: var(--rm-fs-xs);
  color: var(--rm-text-sub); line-height: 1.8;
}
.urb-cautions li + li { margin-top: 4px; }
.urb-cautions li::before { content: "※"; position: absolute; left: 0; }
.urb-cautions a { color: var(--rm-blue); text-decoration: underline; }

/* --- 1行表示の入力（保存リンク用。切れてよいので折り返さない） -------- */
.urb-code--oneline input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.urb-code--oneline input:focus { outline: 2px solid rgba(75, 120, 195, 0.35); outline-offset: -2px; }

/* --- 設定の保存リンク -------------------------------------------------- */
.urb-share {
  margin-top: var(--rm-space-5);
  border: 1px solid var(--rm-blue-line);
  background: var(--rm-blue-tint);
  border-radius: var(--rm-radius);
  padding: var(--rm-space-4);
}
.urb-share[hidden] { display: none; }
.urb-share__head strong { font-size: var(--rm-fs-sm); color: var(--rm-text-dark); }
.urb-share__head .rm-note { margin-top: var(--rm-space-2); }
.urb-share .urb-code { margin-top: var(--rm-space-3); background: var(--rm-bg); }

/* --- 情報セクション（自動タグ・Roboma設定・FAQ） ---------------------- */
.urb-info { margin-top: var(--rm-space-6); }
.urb-info h2 { font-size: var(--rm-fs-md); font-weight: 700; color: var(--rm-text-dark); }
.urb-info h3 { font-size: var(--rm-fs-sm); font-weight: 700; color: var(--rm-text-dark); margin-top: var(--rm-space-4); }
.urb-info p { font-size: var(--rm-fs-sm); line-height: 1.9; color: var(--rm-text); margin-top: var(--rm-space-3); }
.urb-info ul { list-style: disc; padding-left: 1.3em; margin-top: var(--rm-space-2); font-size: var(--rm-fs-sm); line-height: 1.9; }
.urb-info a { color: var(--rm-blue); text-decoration: underline; }
.urb-info code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--rm-bg-soft); border-radius: 4px; padding: 1px 5px; }

/* --- ヘルプ記事への導線 ------------------------------------------------ */
.urb-helplink {
  display: inline-block;
  font-size: var(--rm-fs-sm);
  font-weight: 700;
  color: var(--rm-blue-dark);
  background: var(--rm-blue-tint);
  border: 1px solid var(--rm-blue-line);
  border-radius: var(--rm-radius-sm);
  padding: 11px 18px;
  text-decoration: none;
  line-height: 1.6;
}
.urb-helplink:hover { background: var(--rm-bg-active); border-color: var(--rm-blue); }

/* --- アコーディオン（解説・FAQ 共通） --------------------------------- */
.urb-info__title { font-size: var(--rm-fs-md); font-weight: 700; color: var(--rm-text-dark); }
.urb-acclist { border-top: 1px solid var(--rm-border); margin-top: var(--rm-space-4); }
.urb-acc {
  border-bottom: 1px solid var(--rm-border);
  /* ページ内リンクで飛んだとき、固定ヘッダーに見出しが隠れないようにする */
  scroll-margin-top: calc(var(--rm-header-h) + var(--rm-space-4));
}
.urb-acc > summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: var(--rm-space-4) 30px var(--rm-space-4) 0;
  font-size: var(--rm-fs-sm);
  font-weight: 700;
  color: var(--rm-text-dark);
  line-height: 1.6;
}
.urb-acc > summary::-webkit-details-marker { display: none; }
.urb-acc > summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--rm-blue);
  border-bottom: 2px solid var(--rm-blue);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s;
}
.urb-acc[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.urb-acc > summary:hover { color: var(--rm-blue); }
.urb-acc > summary:focus-visible { outline: 2px solid rgba(75, 120, 195, 0.45); outline-offset: 2px; }
.urb-acc__a { padding-bottom: var(--rm-space-4); }
.urb-acc__a > *:first-child { margin-top: 0; }
.urb-acc__a h3:first-child { margin-top: 0; }

.urb-faq__q { font-size: var(--rm-fs-sm); font-weight: 700; color: var(--rm-text-dark); }
.urb-faq__a {
  font-size: var(--rm-fs-sm);
  line-height: 1.9;
  color: var(--rm-text);
  margin-top: 0;
  padding-bottom: var(--rm-space-4);
}


@media (max-width: 640px) {
  .urb-table--stack,
  .urb-table--stack tbody,
  .urb-table--stack tr,
  .urb-table--stack th,
  .urb-table--stack td { display: block; width: 100%; }
  .urb-table--stack thead { display: none; }
  .urb-table--stack tr { border-bottom: 1px solid var(--rm-border); padding: var(--rm-space-2) 0; }
  .urb-table--stack tbody tr:last-child { border-bottom: none; }
  .urb-table--stack th, .urb-table--stack td { border: none; padding: 6px 12px; }
  .urb-table--stack td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--rm-fs-xs);
    color: var(--rm-text-sub);
    margin-bottom: 4px;
  }
  .urb-table--stack td:not([data-label])::before { content: none; }
  .urb-table select, .urb-table input { min-width: 0; width: 100%; }
}

@media (min-width: 768px) {
  .urb-step { padding: var(--rm-space-5) var(--rm-space-6); }
}