@charset "UTF-8";
/* =============================================================
 * 設計CDE モックアップ ─ アプリケーション固有スタイル
 * 色・タイポグラフィ・角丸・影は、すべて DADS のトークン
 * （assets/vendor/dads/dads-global.css で定義される CSS 変数）を参照する。
 * 独自のカラーコードは定義しない。
 * ============================================================= */

/* ---------- リセット・基本 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background-color: var(--color-neutral-solid-gray-50);
  color: var(--color-neutral-solid-gray-900);
  font-family: var(--font-family-sans);
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

:where(p, ul, ol, dl, figure) {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* ---------- スキップリンク ---------- */
.app-skip-link {
  position: absolute;
  top: calc(-100 / 16 * 1rem);
  left: calc(8 / 16 * 1rem);
  z-index: 100;
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-key-900);
  color: var(--color-neutral-white);
  font-weight: bold;
}

.app-skip-link:focus {
  top: calc(8 / 16 * 1rem);
}

/* ---------- モック告知バー ---------- */
.app-mock-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: calc(8 / 16 * 1rem);
  padding: calc(6 / 16 * 1rem) calc(16 / 16 * 1rem);
  background-color: var(--color-primitive-yellow-200);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.5;
}

.app-mock-bar__badge {
  flex-shrink: 0;
  padding: calc(1 / 16 * 1rem) calc(8 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-900);
  color: var(--color-neutral-white);
  font-weight: bold;
  font-size: calc(12 / 16 * 1rem);
}

/* ---------- ヘッダー ---------- */
.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 / 16 * 1rem);
  align-items: center;
  justify-content: space-between;
  padding: calc(12 / 16 * 1rem) calc(24 / 16 * 1rem);
  border-bottom: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-300);
  background-color: var(--color-neutral-white);
}

.app-header__brand {
  display: flex;
  align-items: center;
  gap: calc(12 / 16 * 1rem);
  min-width: 0;
}

.app-header__title {
  margin: 0;
  font-weight: bold;
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.3;
  letter-spacing: 0.02em;
}

.app-header__subtitle {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.4;
}

.app-header__tools {
  display: flex;
  flex-wrap: wrap;
  gap: calc(16 / 16 * 1rem);
  align-items: flex-end;
}

.app-header__tool {
  display: flex;
  flex-direction: column;
  gap: calc(2 / 16 * 1rem);
}

.app-header__tool-label {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(12 / 16 * 1rem);
  line-height: 1.2;
}

/* ---------- レイアウト ---------- */
.app-layout {
  display: grid;
  grid-template-columns: calc(272 / 16 * 1rem) minmax(0, 1fr);
  align-items: start;
  gap: calc(24 / 16 * 1rem);
  max-width: calc(1680 / 16 * 1rem);
  margin-inline: auto;
  padding: calc(24 / 16 * 1rem);
}

@media (max-width: 1023px) {
  .app-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: calc(16 / 16 * 1rem);
  }
}

/* ---------- サイドナビ（オブジェクト一覧） ---------- */
.app-nav {
  position: sticky;
  top: calc(16 / 16 * 1rem);
  padding: calc(12 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

@media (max-width: 1023px) {
  .app-nav {
    position: static;
  }
}

.app-nav__group + .app-nav__group {
  margin-top: calc(16 / 16 * 1rem);
  padding-top: calc(12 / 16 * 1rem);
  border-top: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-100);
}

.app-nav__group-title {
  margin: 0 0 calc(6 / 16 * 1rem);
  padding-inline: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-weight: bold;
  font-size: calc(12 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.app-nav__link {
  display: flex;
  align-items: center;
  gap: calc(10 / 16 * 1rem);
  padding: calc(9 / 16 * 1rem) calc(10 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-size: calc(15 / 16 * 1rem);
  line-height: 1.4;
  text-decoration: none;
}

.app-nav__link:visited {
  color: var(--color-neutral-solid-gray-900);
}

@media (hover: hover) {
  .app-nav__link:hover {
    background-color: var(--color-key-50);
    color: var(--color-key-1000);
    text-decoration: underline;
  }
}

.app-nav__link[aria-current="page"] {
  background-color: var(--color-key-900);
  color: var(--color-neutral-white);
  font-weight: bold;
}

.app-nav__link[aria-current="page"] .app-nav__count {
  border-color: var(--color-neutral-white);
  color: var(--color-neutral-white);
}

.app-nav__icon {
  flex-shrink: 0;
}

.app-nav__text {
  flex: 1 1 auto;
  min-width: 0;
}

.app-nav__count {
  flex-shrink: 0;
  min-width: calc(28 / 16 * 1rem);
  padding: 0 calc(6 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-300);
  border-radius: calc(624.9375 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(12 / 16 * 1rem);
  line-height: 1.6;
  text-align: center;
}

/* ---------- メイン ---------- */
.app-main {
  min-width: 0;
}

.app-page-head {
  margin-bottom: calc(20 / 16 * 1rem);
}

/* 画面遷移時に見出しへプログラム的にフォーカスを移す（読み上げ位置の移動）。
   マウス操作時に枠線が出ると誤解を招くため、この用途に限り枠線を出さない。 */
[data-route-focus]:focus,
.app-main:focus {
  outline: none;
  box-shadow: none;
}

.app-page-head__meta {
  margin-top: calc(6 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.6;
}

.app-section {
  margin-top: calc(28 / 16 * 1rem);
}

.app-section__head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 / 16 * 1rem);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: calc(12 / 16 * 1rem);
}

/* ---------- カード（パネル） ---------- */
.app-panel {
  padding: calc(20 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

.app-panel--flush {
  padding: 0;
  overflow: hidden;
}

.app-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem);
  align-items: baseline;
  justify-content: space-between;
  padding: calc(14 / 16 * 1rem) calc(20 / 16 * 1rem);
  border-bottom: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  background-color: var(--color-neutral-solid-gray-50);
}

.app-panel__title {
  margin: 0;
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.app-panel__body {
  padding: calc(20 / 16 * 1rem);
}

/* ---------- グリッド ---------- */
.app-grid {
  display: grid;
  gap: calc(16 / 16 * 1rem);
}

.app-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(calc(320 / 16 * 1rem), 1fr));
}

.app-grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(calc(240 / 16 * 1rem), 1fr));
}

.app-grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(calc(190 / 16 * 1rem), 1fr));
}

/* ---------- オブジェクト入口カード ---------- */
.app-object-card {
  display: flex;
  flex-direction: column;
  gap: calc(6 / 16 * 1rem);
  height: 100%;
  padding: calc(16 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  text-align: left;
  text-decoration: none;
}

.app-object-card:visited {
  color: var(--color-neutral-solid-gray-900);
}

@media (hover: hover) {
  .app-object-card:hover {
    border-color: var(--color-key-900);
    background-color: var(--color-key-50);
    color: var(--color-key-1000);
  }
}

.app-object-card__title {
  display: flex;
  align-items: center;
  gap: calc(8 / 16 * 1rem);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  line-height: 1.4;
}

.app-object-card__count {
  font-weight: bold;
  font-size: calc(28 / 16 * 1rem);
  line-height: 1.2;
}

.app-object-card__desc {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
}

/* ---------- 定義リスト（プロパティ表示） ---------- */
.app-props {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0;
  border-top: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
}

.app-props > dt,
.app-props > dd {
  margin: 0;
  padding: calc(10 / 16 * 1rem) calc(12 / 16 * 1rem);
  border-bottom: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.7;
}

.app-props > dt {
  background-color: var(--color-neutral-solid-gray-50);
  font-weight: bold;
  white-space: nowrap;
}

@media (max-width: 599px) {
  .app-props {
    grid-template-columns: minmax(0, 1fr);
  }

  .app-props > dt {
    border-bottom: 0;
  }
}

/* ---------- コード／ID 表示 ---------- */
.app-code {
  padding: calc(1 / 16 * 1rem) calc(6 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-50);
  color: var(--color-neutral-solid-gray-900);
  font-family: var(--font-family-mono);
  font-size: calc(13 / 16 * 1rem);
  letter-spacing: 0;
}

/* ---------- ID 分解表示 ---------- */
.app-idparts {
  display: flex;
  flex-wrap: wrap;
  gap: calc(4 / 16 * 1rem);
  align-items: stretch;
}

.app-idpart {
  min-width: calc(96 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-key-300);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-key-50);
  text-align: center;
}

.app-idpart__value {
  display: block;
  padding: calc(6 / 16 * 1rem) calc(10 / 16 * 1rem) calc(2 / 16 * 1rem);
  font-family: var(--font-family-mono);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
  letter-spacing: 0;
}

.app-idpart__label {
  display: block;
  padding: 0 calc(10 / 16 * 1rem) calc(6 / 16 * 1rem);
  color: var(--color-key-1000);
  font-size: calc(11 / 16 * 1rem);
  line-height: 1.4;
}

.app-idpart__sep {
  align-self: center;
  color: var(--color-neutral-solid-gray-500);
  font-family: var(--font-family-mono);
  font-weight: bold;
}

/* ---------- 状態バッジ（色のみに依存しない：記号＋文言を併記） ---------- */
.app-status {
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
  padding: calc(2 / 16 * 1rem) calc(10 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid currentcolor;
  border-radius: calc(624.9375 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.6;
  white-space: nowrap;
}

.app-status__mark {
  font-family: var(--font-family-mono);
  letter-spacing: 0;
}

.app-status[data-status="WIP"] {
  border-color: var(--color-neutral-solid-gray-600);
  background-color: var(--color-neutral-solid-gray-50);
  color: var(--color-neutral-solid-gray-800);
}

.app-status[data-status="SHARED"] {
  border-color: var(--color-semantic-warning-yellow-2);
  background-color: var(--color-primitive-yellow-100);
  color: var(--color-primitive-yellow-1200);
}

.app-status[data-status="APPROVED"] {
  border-color: var(--color-semantic-success-2);
  background-color: var(--color-primitive-green-50);
  color: var(--color-primitive-green-1000);
}

.app-status[data-status="ARCHIVED"] {
  border-color: var(--color-primitive-magenta-900);
  background-color: var(--color-primitive-magenta-50);
  color: var(--color-primitive-magenta-1100);
}

/* ---------- 段階バッジ ---------- */
.app-stage {
  display: inline-flex;
  align-items: center;
  gap: calc(4 / 16 * 1rem);
  padding: calc(1 / 16 * 1rem) calc(8 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid currentcolor;
  border-radius: calc(4 / 16 * 1rem);
  font-size: calc(12 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.7;
  white-space: nowrap;
}

.app-stage[data-stage="CD"] { background-color: var(--color-primitive-purple-50); color: var(--color-primitive-purple-1000); }
.app-stage[data-stage="PD"] { background-color: var(--color-primitive-cyan-50); color: var(--color-primitive-cyan-1100); }
.app-stage[data-stage="DD"] { background-color: var(--color-primitive-blue-50); color: var(--color-primitive-blue-1000); }
.app-stage[data-stage="MD"] { background-color: var(--color-primitive-orange-50); color: var(--color-primitive-orange-1100); }

/* ---------- 領域バッジ ---------- */
.app-zone {
  display: inline-flex;
  align-items: center;
  padding: calc(1 / 16 * 1rem) calc(8 / 16 * 1rem);
  border-radius: calc(4 / 16 * 1rem);
  font-size: calc(12 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.7;
  white-space: nowrap;
}

.app-zone[data-zone="work"] {
  background-color: var(--color-primitive-blue-50);
  color: var(--color-primitive-blue-1000);
}

.app-zone[data-zone="admin"] {
  background-color: var(--color-primitive-green-50);
  color: var(--color-primitive-green-1000);
}

/* ---------- フィルタバー ---------- */
.app-filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  /* 上端を揃える。サポートテキストの有無で入力欄の位置がずれないようにするため、
     下端揃えではなくラベル行の高さを固定して上端で揃える。 */
  align-items: flex-start;
  padding: calc(16 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
}

.app-filter {
  display: flex;
  flex-direction: column;
  gap: calc(4 / 16 * 1rem);
}

.app-filter__label {
  /* ラベル1行分の高さを確保し、全フィールドの入力欄の上端を揃える */
  min-height: calc(19 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  font-weight: bold;
  line-height: 1.4;
}

/* ラベルを持たない操作ボタンを、他フィールドの入力欄と同じ高さに落とす
   （ラベル 19px ＋ 間隔 4px ＋ 入力欄との高さ差 2px） */
.app-filter--action {
  padding-top: calc(25 / 16 * 1rem);
}

.app-filters__spacer {
  flex: 1 1 auto;
}

.app-filters__result {
  /* 入力欄の中央に揃える（ラベル 19px ＋ 間隔 4px ＋ (入力欄40px − 行高24px)/2） */
  align-self: flex-start;
  padding-top: calc(31 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(14 / 16 * 1rem);
}

/* ---------- テーブル補助 ---------- */
.app-table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.app-nowrap {
  white-space: nowrap;
}

/* 日本語が1文字ずつ折り返されないよう、列に最小幅を与える */
.app-w-sm { min-width: calc(96 / 16 * 1rem); }
.app-w-md { min-width: calc(150 / 16 * 1rem); }
.app-w-lg { min-width: calc(210 / 16 * 1rem); }
.app-w-xl { min-width: calc(280 / 16 * 1rem); }

.app-num {
  font-family: var(--font-family-mono);
  letter-spacing: 0;
  text-align: right;
}

/* ---------- 空状態 ---------- */
.app-empty {
  padding: calc(40 / 16 * 1rem) calc(20 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) dashed var(--color-neutral-solid-gray-300);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-700);
  text-align: center;
}

.app-empty__title {
  margin-bottom: calc(6 / 16 * 1rem);
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(17 / 16 * 1rem);
}

/* ---------- 解説（出典・論点）ボックス ---------- */
.app-note {
  margin-top: calc(20 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem) calc(20 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-primitive-cyan-800);
  border-left-width: calc(6 / 16 * 1rem);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-primitive-cyan-50);
}

.app-note__title {
  display: flex;
  align-items: center;
  gap: calc(8 / 16 * 1rem);
  margin: 0 0 calc(8 / 16 * 1rem);
  color: var(--color-primitive-cyan-1200);
  font-weight: bold;
  font-size: calc(15 / 16 * 1rem);
  line-height: 1.5;
}

.app-note__body {
  font-size: calc(14 / 16 * 1rem);
  line-height: 1.8;
}

.app-note__refs {
  margin-top: calc(10 / 16 * 1rem);
  padding-top: calc(10 / 16 * 1rem);
  border-top: calc(1 / 16 * 1rem) solid var(--color-primitive-cyan-300);
  color: var(--color-neutral-solid-gray-800);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.7;
}

.app-note__refs li::before {
  content: "出典：";
  font-weight: bold;
}

/* ---------- 地図（Leaflet + 地理院タイル） ---------- */
.app-map {
  position: relative;
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-300);
  border-radius: calc(12 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  overflow: hidden;
}

.app-map__canvas {
  width: 100%;
  height: calc(620 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-100);
}

@media (max-width: 767px) {
  .app-map__canvas {
    height: calc(420 / 16 * 1rem);
  }
}

.app-map__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(340 / 16 * 1rem);
  gap: calc(16 / 16 * 1rem);
  align-items: start;
}

@media (max-width: 1279px) {
  .app-map__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 設計範囲ポリゴンのキーボードフォーカス */
.leaflet-pane path:focus-visible {
  outline: calc(3 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
}

.leaflet-pane path[tabindex] {
  cursor: pointer;
}

/* 測点ラベル */
.app-map__sta {
  color: var(--color-neutral-solid-gray-900);
  font-family: var(--font-family-mono);
  font-size: calc(11 / 16 * 1rem);
  line-height: 1.2;
  white-space: nowrap;
  text-shadow:
    0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

/* 選択中コンテナの吹き出し */
.app-map__tag-wrap {
  position: relative;
}

.app-map__tag {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
  width: max-content;
  padding: calc(3 / 16 * 1rem) calc(10 / 16 * 1rem);
  border: calc(2 / 16 * 1rem) solid var(--color-neutral-black);
  border-radius: calc(6 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  font-weight: bold;
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: var(--elevation-2);
}

.app-map__tag-dot {
  display: inline-block;
  width: calc(10 / 16 * 1rem);
  height: calc(10 / 16 * 1rem);
  border-radius: 50%;
}

/* Leaflet の既定スタイルを DADS に寄せる */
.leaflet-container {
  font-family: var(--font-family-sans);
  font-size: calc(13 / 16 * 1rem);
}

.leaflet-container a {
  color: var(--color-primitive-blue-1000);
}

.leaflet-control-attribution {
  padding: calc(2 / 16 * 1rem) calc(8 / 16 * 1rem);
  background-color: rgba(255, 255, 255, 0.9) !important;
  font-size: calc(12 / 16 * 1rem);
}

.leaflet-bar a {
  color: var(--color-neutral-solid-gray-900);
}

.leaflet-bar a:focus-visible,
.leaflet-control-layers-toggle:focus-visible {
  outline: calc(3 / 16 * 1rem) solid var(--color-neutral-black);
  outline-offset: calc(2 / 16 * 1rem);
}

.leaflet-tooltip {
  border-color: var(--color-neutral-solid-gray-600);
  border-radius: calc(6 / 16 * 1rem);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.5;
}

/* ---------- 整形済みテキスト（GeoJSON等） ---------- */
.app-pre {
  max-height: calc(420 / 16 * 1rem);
  margin: 0;
  padding: calc(12 / 16 * 1rem);
  overflow: auto;
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-50);
  color: var(--color-neutral-solid-gray-900);
  font-family: var(--font-family-mono);
  font-size: calc(12 / 16 * 1rem);
  line-height: 1.6;
  tab-size: 2;
}

.app-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  border-top: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-200);
  background-color: var(--color-neutral-solid-gray-50);
  font-size: calc(13 / 16 * 1rem);
}

.app-legend-item {
  display: inline-flex;
  align-items: center;
  gap: calc(6 / 16 * 1rem);
}

.app-legend-swatch {
  display: inline-block;
  width: calc(22 / 16 * 1rem);
  height: calc(12 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-600);
  border-radius: calc(3 / 16 * 1rem);
}

/* ---------- タイムライン（系譜・履歴） ---------- */
.app-timeline {
  position: relative;
  margin: 0;
  padding-left: calc(24 / 16 * 1rem);
}

.app-timeline::before {
  content: "";
  position: absolute;
  top: calc(8 / 16 * 1rem);
  bottom: calc(8 / 16 * 1rem);
  left: calc(5 / 16 * 1rem);
  width: calc(2 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-200);
}

.app-timeline__item {
  position: relative;
  padding-bottom: calc(16 / 16 * 1rem);
}

.app-timeline__item::before {
  content: "";
  position: absolute;
  top: calc(8 / 16 * 1rem);
  left: calc(-23 / 16 * 1rem);
  width: calc(12 / 16 * 1rem);
  height: calc(12 / 16 * 1rem);
  border: calc(2 / 16 * 1rem) solid var(--color-key-900);
  border-radius: 50%;
  background-color: var(--color-neutral-white);
}

.app-timeline__item[data-current="true"]::before {
  background-color: var(--color-key-900);
}

.app-timeline__meta {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
}

/* ---------- ワークフロー図 ---------- */
.app-wf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(140 / 16 * 1rem), 1fr));
  gap: calc(8 / 16 * 1rem);
}

.app-wf__node {
  display: flex;
  flex-direction: column;
  gap: calc(2 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-300);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
  text-align: left;
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.4;
  cursor: pointer;
}

@media (hover: hover) {
  .app-wf__node:hover {
    border-color: var(--color-key-900);
    background-color: var(--color-key-50);
  }
}

.app-wf__node[aria-pressed="true"] {
  border-color: var(--color-key-900);
  border-width: calc(2 / 16 * 1rem);
  background-color: var(--color-key-50);
}

.app-wf__id {
  font-family: var(--font-family-mono);
  font-weight: bold;
  font-size: calc(12 / 16 * 1rem);
  color: var(--color-key-1000);
  letter-spacing: 0;
}

/* ---------- アーキテクチャ図 ---------- */
.app-arch__svg {
  display: block;
  width: 100%;
  height: auto;
  background-color: var(--color-neutral-white);
}

.app-arch__node {
  cursor: pointer;
}

.app-arch__node rect {
  stroke-width: 1.5;
}

.app-arch__node[data-selected="true"] rect {
  stroke-width: 3.5;
}

.app-arch__node text {
  font-family: var(--font-family-sans);
  font-size: 14px;
  font-weight: bold;
}

/* ---------- ロールごとの注記 ---------- */
.app-rolebar {
  display: flex;
  flex-wrap: wrap;
  gap: calc(8 / 16 * 1rem) calc(16 / 16 * 1rem);
  align-items: center;
  margin-bottom: calc(16 / 16 * 1rem);
  padding: calc(10 / 16 * 1rem) calc(16 / 16 * 1rem);
  border: calc(1 / 16 * 1rem) solid var(--color-neutral-solid-gray-300);
  border-radius: calc(8 / 16 * 1rem);
  background-color: var(--color-neutral-solid-gray-50);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.6;
}

.app-rolebar__role {
  font-weight: bold;
}

/* ---------- 補足テキスト ---------- */
.app-hint {
  color: var(--color-neutral-solid-gray-700);
  font-size: calc(13 / 16 * 1rem);
  line-height: 1.7;
}

.app-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(6 / 16 * 1rem);
}

.app-stack > * + * {
  margin-top: calc(12 / 16 * 1rem);
}

.app-stack-lg > * + * {
  margin-top: calc(24 / 16 * 1rem);
}

/* ---------- 印刷 ---------- */
@media print {
  .app-nav,
  .app-header__tools,
  .app-mock-bar,
  .app-skip-link {
    display: none;
  }

  .app-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}