/* project.css — 案件 overlay（Layer 5、任意）
 *
 * 配布対象外: 本ファイルは当該案件 repo のみ。テンプレ複製時は中身を初期化する。
 * 命名・ルール: DESIGN.md §8.35
 *   - modifier は .{base}--{project}-{name}（例: .cat-pill--acme-retail）
 *   - 値は token (var(--*)) のみ。生 hex 禁止
 *   - base class を override しない
 *
 * 配置: common.css の後に <link rel="stylesheet" href="/project.css" />
 */

/* === Layer 5: 案件固有 component を以下に追記（未使用なら空のままでよい） */

.sample-layout-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sample-layout-card > span:last-child {
  color: var(--text-body-subtle);
}

.sample-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.sample-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-block: var(--space-5);
  padding: var(--space-8);
  border: var(--border-width-md) dashed var(--border-brand);
  border-radius: var(--radius-lg);
  background: var(--bg-brand-soft);
  color: var(--text-heading);
}

.sample-dropzone > span {
  color: var(--text-body-subtle);
}

.sample-trace {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.sample-trace__node {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-width) solid var(--border-brand);
  border-radius: var(--radius-lg);
  background: var(--bg-brand-soft);
}

.sample-trace__node > span {
  color: var(--text-brand);
  font-weight: var(--weight-semibold);
}
.sidenav-wrap > .sidenav:not(.sidenav--collapsed) .sidenav__main {
  overflow-y: hidden;
}

.sidenav-wrap > .sidenav.sidenav--collapsed .sidenav__main {
  overflow-y: hidden;
}

.sidenav-wrap > .sidenav:not(.sidenav--collapsed) .sidenav__main--submenu-open {
  overflow-y: auto;
}