/* ============================================================
   すみだし 案件固有スタイル
   共通デザインシステム（/assets/ui/html/css/design-system.css）の
   後に読み込み、この業務に必要な差分だけを上書きする。
   ============================================================ */

/* --- 見出し ---------------------------------------------------
   page-header__title を h1 にしたため、既定マージンを打ち消す。 */
h1.page-header__title,
h2.page-header__title {
  margin: 0;
}

/* --- タップ領域 -----------------------------------------------
   現場では片手・スマートフォンで操作する。表の中の操作ボタンは
   共通CSSの btn--xs（高さ約20px）では小さすぎるため引き上げる。 */
.table__actions .btn--xs,
.table .btn--xs {
  min-height: 34px;
  padding: 7px 12px;
  font-size: 12px;
}

@media (max-width: 900px) {
  .table__actions .btn--xs,
  .table .btn--xs {
    min-height: 44px;
    padding: 11px 16px;
    font-size: 13px;
  }

  .table__actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .table__actions form {
    flex: 1 1 auto;
  }

  .table__actions form .btn {
    width: 100%;
  }
}

/* --- 電話ボタン -----------------------------------------------
   この業務の主操作。一覧でも詳細でも同じ見た目にする。 */
.btn-call {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* --- 回答待ちの経過 -------------------------------------------
   打診してから時間が経っているものを、色ではなく文字で示す。 */
.wait-age {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  color: var(--color-text-light);
}

.wait-age.is-late {
  border-color: #c0392b;
  color: #c0392b;
}

/* --- 一覧の件数表示 ------------------------------------------- */
.list-count {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--color-text-light);
}

/* --- 日付クイック指定 ----------------------------------------- */
.date-quick {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

/* --- スクリーンリーダー専用ラベル ----------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 入力エラー ----------------------------------------------- */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
  border-color: #c0392b;
  background: rgba(192, 57, 43, 0.03);
}

.field-error {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: #c0392b;
}

/* ============================================================
   コラム・用語集の本文組版
   ============================================================ */

.content-article h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--color-primary);
  margin: 0 0 20px;
}

.content-lead {
  font-size: 16px;
  line-height: 2.1;
  color: var(--color-text);
  padding: 20px 22px;
  background: var(--color-bg);
  border-radius: var(--radius);
  margin-bottom: 32px;
}

.content-lead p { margin: 0 0 12px; }
.content-lead p:last-child { margin-bottom: 0; }

.content-body {
  font-size: 15px;
  line-height: 2.1;
  color: var(--color-text);
}

.content-body h2 {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--color-primary);
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary-tint, rgba(16,42,67,0.12));
}

.content-body h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  margin: 32px 0 12px;
  padding-left: 12px;
  border-left: 4px solid var(--color-accent);
}

.content-body p { margin: 0 0 20px; }

.content-body ul,
.content-body ol {
  margin: 0 0 20px;
  padding-left: 1.5em;
}

.content-body li { margin-bottom: 8px; }

.content-body blockquote {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: var(--color-bg);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 14px;
  line-height: 2;
}

.content-body .table-wrapper { margin: 0 0 24px; }
.content-body .table { font-size: 14px; }

.content-body strong { font-weight: 700; }

/* 用語集への自動リンク。読みの邪魔をしない程度に、しかし気づく程度に。 */
.glossary-link {
  border-bottom: 1px dotted var(--color-accent);
  text-decoration: none;
}

.glossary-link:hover {
  border-bottom-style: solid;
}

.glossary-summary {
  font-size: 17px;
  font-weight: 600;
  line-height: 2;
  color: var(--color-text);
  padding: 18px 20px;
  background: var(--color-bg);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 24px;
}

@media (max-width: 600px) {
  .content-body { font-size: 15px; line-height: 2; }
  .content-body h2 { font-size: 19px; margin-top: 36px; }
  .content-lead { padding: 16px; font-size: 15px; }
}