/* ============================================================
279 デザインシステム v4 — UI プリミティブ
配信URL: https://design.279agent.jp/v4/primitives.css
依存: tokens.css を先に読み込むこと（base.css も併用推奨）
バージョン: v1.0.0 (2026-07-24)
使い方:
出自: 「そなえて（sonaete）」の sn-* デザイン言語を汎用化したもの
（受信箱 #302 / 次田さん指示 2026-07-02「sonaete のデザインが綺麗。
ルールに記憶して他アプリにも適応したい」）。カード・ボタン・チップ・
入力・テーブルを class を貼るだけで v4 標準の見た目に揃える。
------------------------------------------------------------
★ アプリ色の変数契約（重要 / WCAG AA）★
------------------------------------------------------------
各アプリは :root で 3 つの変数を定義すること:
:root {
--app-color: #b04a32; アプリのブランド色
--app-color-dark: #8f3a26; ★ dark 段（白文字を載せる背景に使う）
--app-color-soft: #f5e7e2; 淡いティント（hover / active-soft）
}
なぜ --app-color-dark が必須か:
primary ボタン / アクティブチップは「アプリ色地に白文字」になる。
ところがアプリ色によっては白文字が 4.5:1 に届かない。
carenote #3a8a5a → 白文字 4.23:1 ❌（dark 段 #2a6a42 → 6.48:1 ✅）
corporate primary #238e3a → 白文字 4.20:1 ❌
そのため「白文字を載せる背景 = --app-color-dark（dark 段）」を必須とする。
--app-color 自体は白文字を載せないヘッダー・ボーダー・アイコン強調に使う。
--app-color-dark 未定義時は --app-color にフォールバックするが、
その場合は上記のとおり AA を満たさないアプリ色がある。必ず定義すること。
============================================================ */
/* ---------- コンテンツ幅コンテナ ---------- */
.two79-container {
max-width: 1200px;
margin: 0 auto;
padding: var(--space-4, 16px);
}
.two79-container--wide { max-width: 1280px; }
/* ---------- カード ---------- */
.two79-card {
background: var(--color-surface, #fff);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg); /* 12px */
}
/* ---------- ボタン ---------- */
.two79-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
cursor: pointer;
min-height: 44px; /* rule08 ルール8 / タップターゲット */
min-width: 44px;
padding: 8px 16px;
font-size: var(--text-md, 14px);
font-family: var(--font-base);
border-radius: var(--radius-md); /* 8px */
border: 1px solid transparent;
text-decoration: none;
line-height: 1.2;
}
.two79-btn:focus-visible {
outline: 2px solid var(--app-color, var(--color-primary));
outline-offset: 2px;
}
/* primary: 白文字を載せるので必ず dark 段（未定義なら app-color にフォールバック） */
.two79-btn-primary {
background: var(--app-color-dark, var(--app-color, var(--color-primary)));
color: #fff;
border-color: transparent;
}
.two79-btn-primary:hover { filter: brightness(1.07); }
.two79-btn-ghost {
background: var(--color-surface, #fff);
color: var(--color-ink);
border-color: var(--color-line-strong);
}
.two79-btn-ghost:hover { background: var(--color-bg-soft); }
.two79-btn-danger {
background: var(--color-danger, #b23a3a);
color: #fff;
}
.two79-btn:disabled,
.two79-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* ---------- フィルタチップ（pill） ---------- */
.two79-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.two79-chip {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 14px;
font-size: var(--text-sm, 13px);
border-radius: var(--radius-full); /* pill */
background: var(--color-surface, #fff);
border: 1.5px solid var(--color-line-strong);
color: var(--color-ink);
cursor: pointer;
line-height: 1.2;
}
/* アクティブチップも白文字を載せるので dark 段 */
.two79-chip[aria-pressed="true"],
.two79-chip[data-active="true"] {
background: var(--app-color-dark, var(--app-color, var(--color-primary)));
border-color: var(--app-color-dark, var(--app-color, var(--color-primary)));
color: #fff;
font-weight: 600;
}
/* アクティブを「淡い地 + 濃い文字」で表現する場合はこちら（白文字を載せない） */
.two79-chip[data-active="soft"] {
background: var(--app-color-soft);
border-color: var(--app-color, var(--color-primary));
color: var(--color-ink);
font-weight: 600;
}
.two79-chip:focus-visible {
outline: 2px solid var(--app-color, var(--color-primary));
outline-offset: 2px;
}
/* ---------- 入力 / セレクト / テキストエリア ---------- */
.two79-input,
.two79-field input[type="text"],
.two79-field input[type="search"],
.two79-field input[type="email"],
.two79-field input[type="tel"],
.two79-field input[type="number"],
.two79-field select,
.two79-field textarea {
width: 100%;
min-height: 44px;
padding: 10px 12px;
font-size: var(--text-md, 14px);
font-family: inherit;
border: 1px solid var(--color-line-strong);
border-radius: var(--radius-md);
background: var(--color-surface, #fff);
color: var(--color-ink);
}
.two79-input:focus,
.two79-field input:focus,
.two79-field select:focus,
.two79-field textarea:focus {
outline: none;
border-color: var(--app-color, var(--color-primary));
box-shadow: 0 0 0 3px var(--app-color-soft, rgba(31,122,79,0.15));
}
.two79-field { margin-bottom: 16px; }
.two79-field > label,
.two79-field > .two79-label {
display: block;
font-weight: 600;
font-size: var(--text-sm, 13px);
margin-bottom: 8px;
color: var(--color-ink);
}
.two79-field .two79-hint { font-size: 12px; color: var(--color-ink-soft); margin-top: 6px; }
.two79-field .two79-error { font-size: 13px; color: var(--color-danger, #b84a4a); margin-top: 6px; }
/* ---------- テーブル ---------- */
.two79-table-wrap {
background: var(--color-surface, #fff);
border: 1px solid var(--color-line);
border-radius: var(--radius-lg);
overflow: hidden;
}
table.two79-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 13px); }
.two79-table th {
text-align: left;
font-weight: 600;
font-size: var(--text-sm, 13px);
color: var(--color-ink-soft);
padding: 10px;
border-bottom: 2px solid var(--color-line);
background: var(--color-bg-soft);
white-space: nowrap;
}
.two79-table td {
padding: 10px;
border-bottom: 1px solid var(--color-line);
vertical-align: top;
}
.two79-table tr.two79-row { cursor: pointer; }
.two79-table tr.two79-row:hover { background: var(--app-color-soft); }
.two79-table tr.two79-row:focus-visible {
outline: 2px solid var(--app-color, var(--color-primary));
outline-offset: -2px;
}