/*
* NurseLink — utilities.css
* ============================================================
* 必ず最後に読み込むこと。
*
* 【設計方針 v6 — Bootstrap拡張モデル】
* Bootstrap を「上書き」せず「拡張」する。
* .btn / .badge / .alert / .card 等の Bootstrap 標準コンポーネントは
* そのまま使い、デザインシステムの見た目は ui-* クラスを「足す」ことで適用する。
*
* ✅
* ✅ NEW
* ❌ .btn-primary { ... } ← Bootstrap素クラスは触らない
*
* 【このファイルの責務】
* utilities.css は「ui-* の追加ユーティリティ」だけを持つ。
* ・トークン値を1プロパティで当てる原子ユーティリティ（ui-fs-* / ui-bg-* 等）
* ・Bootstrapコンポーネントに足す拡張クラス（ui-btn / ui-badge / ui-card-x 等）
* ・装飾ユーティリティ（グラデーション・スクロールバー等）
*
* 【触らないもの】
* ・Bootstrap素クラス（.btn-primary / .text-muted / .bg-light / .card 等）
* ・Bootstrap CSS変数（--bs-*）の大域上書き
* → ブランド色の適用は overrides.css の責務（--ui-accent 等を定義）に分離。
* Bootstrap側へ橋渡ししたい場合も overrides.css で行う。
*
* 読み込み順:
* 1. bootstrap.min.css
* 2. tokens.css ← トークン定義の唯一の元
* 3. common.css ← 全ページ共通コンポーネント
* 4. overrides.css ← サービス別ブランド色の差し替え（任意）
* 5. forms.css ← フォームページのみ
* 6. utilities.css ← このファイル（必ず最後）
* ============================================================
*/
/* ============================================================
1. ui-btn — Bootstrap .btn への「足し」クラス
------------------------------------------------------------
※ ui-btn は本番UIの正式ボタンコンポーネントのため、
基礎プロパティ（pill形状・中央揃え・サイズ・hover）は
common.css の「6. ボタン」セクションに集約しました。
二重管理を避けるため utilities.css では定義しません。
→ 定義は common.css を参照（.ui-btn / .ui-btn--sm/md/lg / --rounded）
============================================================ */
/* ============================================================
2. ui-badge — Bootstrap .badge への「足し」クラス
------------------------------------------------------------
色は Bootstrap の .bg-primary / .bg-success 等がそのまま担当。
pill形状・サイズ・字間だけ ui-badge で付与する。
新着
承認済
============================================================ */
.ui-badge {
font-size: var(--text-caption-2);
font-weight: 700;
padding: 3px 9px;
border-radius: var(--ui-radius-pill);
letter-spacing: .02em;
}
/* 角ばったバッジ（チップ用） */
.ui-badge--xs { border-radius: var(--ui-radius-xs); padding: 2px 7px; }
/* ============================================================
3. ui-card-x — Bootstrap .card への「足し」クラス
------------------------------------------------------------
.card はそのまま使い、0.5pxボーダー・薄影・角丸だけ ui-card-x で足す。
※ common.css の独自 .ui-card（フルカスタムカード）とは別物。
こちらは Bootstrap .card の見た目調整専用。
============================================================ */
.ui-card-x {
border: 0.5px solid var(--ui-border);
box-shadow: var(--ui-shadow);
border-radius: var(--ui-radius);
overflow: hidden;
}
.ui-card-x .card-header {
border-bottom: 0.5px solid var(--ui-border);
background: transparent;
padding: 14px 20px 12px;
font-size: var(--text-footnote);
font-weight: 700;
}
.ui-card-x .card-footer {
border-top: 0.5px solid var(--ui-border);
background: transparent;
padding: 12px 20px;
font-size: var(--text-footnote);
}
/* ============================================================
4. ui-alert — Bootstrap .alert への「足し」クラス
------------------------------------------------------------
.alert alert-primary 等はそのまま使い、0.5pxボーダー・角丸・
トークンサイズだけ ui-alert で足す。色は Bootstrap が担当。
情報メッセージ
============================================================ */
.ui-alert {
border-width: 0.5px;
border-radius: var(--ui-radius-sm);
font-size: var(--text-footnote);
line-height: 1.65;
}
/* ============================================================
5. ui-table-x — Bootstrap .table への「足し」クラス
------------------------------------------------------------
============================================================ */
.ui-table-x { font-size: var(--text-footnote); }
.ui-table-x > :not(caption) > * > * {
padding: 11px 14px;
border-bottom-color: var(--ui-border);
}
.ui-table-x thead th {
font-size: var(--text-caption-1);
font-weight: 700;
color: var(--ui-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-family: var(--font-mono);
border-bottom: 0.5px solid var(--ui-border-2);
}
/* ============================================================
6. ui-tabs — Bootstrap .nav-tabs への「足し」クラス
------------------------------------------------------------
============================================================ */
.ui-tabs { border-bottom: 0.5px solid var(--ui-border); }
.ui-tabs .nav-link {
font-size: var(--text-footnote);
font-weight: 500;
color: var(--ui-text-sub);
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 10px 16px;
transition: all var(--ui-transition);
}
.ui-tabs .nav-link:hover { color: var(--ui-text); background: transparent; }
.ui-tabs .nav-link.active {
color: var(--ui-accent);
border-bottom-color: var(--ui-accent);
background: transparent;
font-weight: 600;
}
/* ============================================================
7. ui-list-x — Bootstrap .list-group への「足し」クラス
------------------------------------------------------------
…
============================================================ */
.ui-list-x .list-group-item {
border: none;
border-bottom: 0.5px solid var(--ui-border);
font-size: var(--text-footnote);
color: var(--ui-text);
padding: 11px 16px;
transition: background var(--ui-transition);
}
.ui-list-x .list-group-item:last-child { border-bottom: none; }
.ui-list-x .list-group-item.active {
background: var(--ui-accent-lt);
color: var(--ui-accent);
font-weight: 600;
}
.ui-list-x .list-group-item:not(.active):hover { background: var(--ui-surface-2); }
/* ============================================================
8. ui-modal-x / ui-dropdown-x — Bootstrap への「足し」クラス
------------------------------------------------------------
…
============================================================ */
.ui-modal-x {
border: none;
border-radius: var(--ui-radius);
box-shadow: var(--ui-shadow-lg);
overflow: hidden;
}
.ui-modal-x .modal-header { border-bottom: 0.5px solid var(--ui-border); padding: 18px 20px; align-items: center; }
.ui-modal-x .modal-title { font-size: var(--text-title-3); font-weight: 700; color: var(--ui-text); }
.ui-modal-x .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ui-modal-x .modal-footer { border-top: 0.5px solid var(--ui-border); padding: 14px 20px; justify-content: flex-end; gap: 8px; }
.ui-dropdown-x {
border: 0.5px solid var(--ui-border-2);
box-shadow: var(--ui-shadow-md);
padding: 6px;
border-radius: var(--ui-radius-sm);
}
.ui-dropdown-x .dropdown-item {
border-radius: var(--ui-radius-xs);
font-size: var(--text-footnote);
padding: 8px 12px;
transition: background var(--ui-transition);
}
.ui-dropdown-x .dropdown-divider { border-color: var(--ui-border); margin: 4px 0; }
/* ============================================================
9. ui-field — Bootstrap .form-control / .form-select への「足し」
------------------------------------------------------------
フォーム部品の本体スタイルは forms.css（.ui-input 等）が担当。
Bootstrap の .form-control をそのまま使いたい時だけ ui-field を足す。
============================================================ */
.ui-field {
border: 0.5px solid var(--ui-border-2);
font-size: var(--text-subheadline);
color: var(--ui-text);
box-shadow: var(--ui-shadow-xs);
transition: all var(--ui-transition);
font-family: inherit;
}
.ui-field:focus {
border-color: var(--ui-accent);
box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.12);
}
.ui-field::placeholder { color: var(--ui-text-placeholder); }
/* ============================================================
10. ui-container — コンテナ幅
------------------------------------------------------------
.container（Bootstrap）はそのまま使える。固定幅が欲しい時だけ ui-container。
.ui-container 常に 980px
.ui-container--sm 780px（フォーム・記事）
.ui-container--lg 1200px（ダッシュボード）
============================================================ */
.ui-container {
max-width: 980px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
width: 100%;
}
.ui-container--sm { max-width: 780px; }
.ui-container--lg { max-width: 1200px; }
.ui-container--full { max-width: none; }
@media (max-width: 576px) {
.ui-container,
.ui-container--sm,
.ui-container--lg { padding-left: 16px; padding-right: 16px; }
}
/* ============================================================
11. テキストカラー（ui-* 原子ユーティリティ）
------------------------------------------------------------
Bootstrap の .text-muted / .bg-light は「触らない」。
デザインシステムの色は専用の ui-text-* / ui-bg-* で提供する。
============================================================ */
.ui-text { color: var(--ui-text) !important; }
.ui-text-sub { color: var(--ui-text-sub) !important; }
.ui-text-muted { color: var(--ui-text-muted) !important; }
.ui-text-accent { color: var(--ui-accent) !important; }
.ui-text-danger { color: var(--ui-danger) !important; }
.ui-text-warning { color: var(--ui-warning) !important; }
.ui-text-success { color: var(--ui-success) !important; }
.ui-text-purple { color: var(--ui-purple) !important; }
/* フォント */
.ui-font-mono { font-family: var(--font-mono) !important; }
.ui-font-sans { font-family: var(--font-sans) !important; }
/* ============================================================
12. 背景（ui-* 原子ユーティリティ）
------------------------------------------------------------
3層サーフェスを確実に当てたい時に使う。.bg-light は触らない。
============================================================ */
.ui-bg { background: var(--ui-bg) !important; }
.ui-bg-surface { background: var(--ui-surface) !important; }
.ui-bg-surface-2 { background: var(--ui-surface-2) !important; }
.ui-bg-surface-3 { background: var(--ui-surface-3) !important; }
/* 薄い色付き背景（アイコン背景・ハイライト行に多用） */
.ui-bg-accent { background: rgba(var(--ui-accent-rgb), 0.08) !important; }
.ui-bg-success { background: rgba(52, 199, 89, 0.08) !important; }
.ui-bg-danger { background: rgba(255, 59, 48, 0.07) !important; }
.ui-bg-warning { background: rgba(255, 149, 0, 0.08) !important; }
.ui-bg-purple { background: rgba(175, 82, 222, 0.08) !important; }
.ui-bg-dark { background: #1d1d1f !important; }
/* ============================================================
13. フォントサイズ（Apple タイポグラフィスケール）
------------------------------------------------------------
意味のある名前で指定でき、tokens.css の変更が一括反映される。
============================================================ */
.ui-fs-large-title { font-size: var(--text-large-title) !important; }
.ui-fs-title-1 { font-size: var(--text-title-1) !important; }
.ui-fs-title-2 { font-size: var(--text-title-2) !important; }
.ui-fs-title-3 { font-size: var(--text-title-3) !important; }
.ui-fs-headline { font-size: var(--text-headline) !important; }
.ui-fs-body { font-size: var(--text-body) !important; }
.ui-fs-callout { font-size: var(--text-callout) !important; }
.ui-fs-subheadline { font-size: var(--text-subheadline) !important; }
.ui-fs-footnote { font-size: var(--text-footnote) !important; }
.ui-fs-caption-1 { font-size: var(--text-caption-1) !important; }
.ui-fs-caption-2 { font-size: var(--text-caption-2) !important; }
/* ============================================================
14. フォントウェイト
------------------------------------------------------------
ui-fw-bold = 600（日本語で最も読みやすいセミボールド）
Bootstrap の fw-bold(700) はそのまま英数字向けに残す。
============================================================ */
.ui-fw-bold { font-weight: 600 !important; }
/* ============================================================
15. シャドウ
============================================================ */
.ui-shadow-xs { box-shadow: var(--ui-shadow-xs) !important; }
.ui-shadow { box-shadow: var(--ui-shadow) !important; }
.ui-shadow-md { box-shadow: var(--ui-shadow-md) !important; }
.ui-shadow-lg { box-shadow: var(--ui-shadow-lg) !important; }
.ui-shadow-none { box-shadow: none !important; }
/* ============================================================
16. ボーダー（0.5px 細ボーダー）
============================================================ */
.ui-border { border: 0.5px solid var(--ui-border) !important; }
.ui-border-2 { border: 0.5px solid var(--ui-border-2) !important; }
.ui-border-t { border-top: 0.5px solid var(--ui-border) !important; }
.ui-border-b { border-bottom: 0.5px solid var(--ui-border) !important; }
.ui-border-none { border: none !important; }
/* ============================================================
17. 角丸
============================================================ */
.ui-rounded { border-radius: var(--ui-radius) !important; }
.ui-rounded-sm { border-radius: var(--ui-radius-sm) !important; }
.ui-rounded-xs { border-radius: var(--ui-radius-xs) !important; }
.ui-rounded-pill { border-radius: var(--ui-radius-pill) !important; }
/* ============================================================
18. トランジション・ホバー・フォーカス
============================================================ */
.ui-transition { transition: all var(--ui-transition) !important; }
.ui-hover { transition: background var(--ui-transition); }
.ui-hover:hover { background: var(--ui-surface-2) !important; }
.ui-focus-ring:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(var(--ui-accent-rgb), 0.25);
}
/* ============================================================
19. 画像フィット
============================================================ */
.fit-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
.fit-contain {
width: 100%;
height: 100%;
object-fit: contain;
background-color: var(--ui-surface);
}
/* ============================================================
20. スクロールエリア（ui-scroll）
Apple風細スクロールバー。max-height + overflow-y:auto と併用。
============================================================ */
.ui-scroll::-webkit-scrollbar { width: 4px; }
.ui-scroll::-webkit-scrollbar-track { background: transparent; }
.ui-scroll::-webkit-scrollbar-thumb {
background: var(--ui-surface-3);
border-radius: 100px;
}
.ui-scroll::-webkit-scrollbar-thumb:hover { background: var(--ui-text-muted); }
/* ============================================================
21. グラデーションテキスト（ui-text-gradient-*）
============================================================ */
.ui-text-gradient {
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
display: inline-block;
}
.ui-text-gradient-blue { background-image: linear-gradient(135deg, #0071e3 0%, #5856d6 100%); }
.ui-text-gradient-gold { background-image: linear-gradient(135deg, #f59e0b 0%, #b8935a 100%); }
.ui-text-gradient-sunset { background-image: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%); }
.ui-text-gradient-ocean { background-image: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); }
.ui-text-gradient-forest { background-image: linear-gradient(135deg, #34c759 0%, #0891b2 100%); }
.ui-text-gradient-mono { background-image: linear-gradient(135deg, #ffffff 0%, #6e6e73 100%); }
.ui-text-gradient-dark { background-image: linear-gradient(135deg, #1d1d1f 0%, #6e6e73 100%); }
/* ============================================================
22. グラデーション背景（ui-bg-gradient-*）
============================================================ */
.ui-bg-gradient-blue {
background:
radial-gradient(ellipse at 20% 50%, rgba(0, 113, 227, 0.15) 0%, transparent 55%),
radial-gradient(ellipse at 80% 20%, rgba(88, 86, 214, 0.12) 0%, transparent 55%),
var(--ui-surface);
}
.ui-bg-gradient-dark {
background-image:
radial-gradient(ellipse at 75% 10%, rgba(29, 78, 216, 0.25) 0%, transparent 60%),
radial-gradient(ellipse at 10% 90%, rgba(88, 86, 214, 0.15) 0%, transparent 55%);
}
.ui-bg-gradient-gold {
background-image:
radial-gradient(ellipse at 70% 20%, rgba(184, 147, 90, 0.18) 0%, transparent 55%),
radial-gradient(ellipse at 15% 80%, rgba(245, 158, 11, 0.10) 0%, transparent 50%);
}
.ui-bg-gradient-warm {
background:
radial-gradient(ellipse at 30% 40%, rgba(184, 147, 90, 0.07) 0%, transparent 60%),
#faf8f4;
}
.ui-bg-gradient-neutral {
background:
radial-gradient(ellipse at 80% 0%, rgba(0, 113, 227, 0.05) 0%, transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(88, 86, 214, 0.04) 0%, transparent 50%),
var(--ui-bg);
}
/* グリッドパターン */
.ui-bg-grid {
background-image:
linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
background-size: 60px 60px;
}
.ui-bg-grid-light {
background-image:
linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
background-size: 40px 40px;
}
/* ボーダーグラデーション */
.ui-border-gradient-blue {
border: 1.5px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(var(--ui-surface), var(--ui-surface)),
linear-gradient(135deg, #0071e3, #5856d6);
background-origin: border-box;
}
.ui-border-gradient-gold {
border: 1.5px solid transparent;
background-clip: padding-box;
background-image: linear-gradient(var(--ui-surface), var(--ui-surface)),
linear-gradient(135deg, #f59e0b, #b8935a);
background-origin: border-box;
}
/* ============================================================
23. グラデーションバッジ（ui-badge-gradient-*）
------------------------------------------------------------
Bootstrap .badge とは独立した装飾バッジ。色付きグラデ背景。
============================================================ */
.ui-badge-gradient {
color: #fff;
border: none;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: var(--ui-radius-pill);
font-size: var(--text-caption-1);
font-weight: 700;
letter-spacing: .02em;
}
.ui-badge-gradient-blue { background: linear-gradient(135deg, #0071e3 0%, #5856d6 100%); box-shadow: 0 2px 8px rgba(0, 113, 227, .30); }
.ui-badge-gradient-gold { background: linear-gradient(135deg, #f59e0b 0%, #b8935a 100%); box-shadow: 0 2px 8px rgba(245, 158, 11, .30); }
.ui-badge-gradient-sunset { background: linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%); box-shadow: 0 2px 8px rgba(249, 115, 22, .25); }
.ui-badge-gradient-ocean { background: linear-gradient(135deg, #06b6d4 0%, #2563eb 100%); box-shadow: 0 2px 8px rgba(6, 182, 212, .30); }
.ui-badge-gradient-forest { background: linear-gradient(135deg, #34c759 0%, #0891b2 100%); box-shadow: 0 2px 8px rgba(52, 199, 89, .30); }
.ui-badge-gradient-danger { background: linear-gradient(135deg, #ff3b30 0%, #ff9500 100%); box-shadow: 0 2px 8px rgba(255, 59, 48, .30); }
.ui-badge-gradient-dark { background: linear-gradient(135deg, #1d1d1f 0%, #3a3a3c 100%); box-shadow: 0 2px 8px rgba(0, 0, 0, .20); }
/*
* ============================================================
* クイックリファレンス
* ============================================================
*
* ▼ Bootstrapコンポーネント + ui-* 拡張（推奨パターン）
*
* 承認済
* …
* 情報
*
*
* ▼ 原子ユーティリティ（Bootstrapに無いトークン値）
* 日付・ID等: 2024/03/12
* 薄色背景: …
* 区切り線:
*
* ▼ 役割分担
* Bootstrap → レイアウト・余白・色 (d-flex / col-* / p-* / btn-primary / bg-success)
* ui-* 拡張クラス → 形状・質感の付与 (ui-btn / ui-badge / ui-card-x)
* ui-* 原子 → トークン値 (ui-fs-* / ui-bg-surface / ui-shadow)
* overrides.css → サービス別ブランド色 (--ui-accent の差し替え)
*
* ============================================================
*/
/* ============================================================
24. ui-flex-center — flex要素の中央揃え
------------------------------------------------------------
Bootstrap の .text-center は inline-flex/flex 要素には効かない。
以前は .text-center を上書きしていたが（=Bootstrapユーティリティ汚染）、
方針に従い専用クラスに分離。
…
============================================================ */
.ui-flex-center { justify-content: center !important; }
/* ============================================================
25. ui-* 横スライドカード（Horizontal Scroll / Apple Today風）
------------------------------------------------------------
Bootstrap .card / .row / .col / .carousel は一切上書きしない。
横スクロールの幅・スナップ・余白だけを下記の拡張クラスで「足す」。
色・角丸・余白は tokens.css の --ui-* を参照（新規トークン定義なし）。
JS不使用（CSSのみ）。
・左に余白（padding-left:24px）、右端はブラウザ端までピッタリ
・scroll-snap-type:x mandatory で各カード左端にスナップ
・スクロールバーは非表示（スクロール機能は維持）
============================================================ */
.hscroll-cards {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* iOS 慣性スクロール */
scroll-padding-left: 24px; /* スナップ時も左余白を保つ */
padding: 4px 0 4px 24px; /* 左24px / 右0 = 端まで */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 旧Edge/IE */
}
.hscroll-cards::-webkit-scrollbar { display: none; } /* Chrome/Safari */
/* 最後のカードの後ろにも余白を確保し、端で切れた印象を防ぐ */
.hscroll-cards::after {
content: "";
flex: 0 0 24px;
}
.hscroll-card {
scroll-snap-align: start;
flex: 0 0 auto;
width: clamp(260px, 78vw, 320px); /* SPは画面幅に追従 / PCは320px上限 */
}
/* 通常版にも Today版と同じ操作感を付与 */
.hscroll-cards.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
.hscroll-cards.is-wheeling {
scroll-snap-type: none;
}
.hscroll-cards img,
.hscroll-cards a {
-webkit-user-drag: none;
user-select: none;
}
/* .card / .ui-card-x の見た目（border/shadow/radius/overflow）はそのまま活かす */
/* ============================================================
横スクロールカード — Today版（開始位置を .ui-container に揃える）
既存 .hscroll-cards / .hscroll-card / .ui-card-x は変更しない。
修飾クラス .hscroll-cards--today を足したときだけ挙動を変える。
------------------------------------------------------------
左インセット = コンテナ左端のビューポート左からの距離
= max(コンテナpadding, (100vw - コンテナmax-width)/2 + コンテナpadding)
980px / 24px は .ui-container の値に合わせる。
============================================================ */
.hscroll-cards--today {
/* .ui-container の値（変えたい時はこの2つだけ） */
--today-container-max: 980px;
--today-container-pad: 24px;
/* コンテナ左端までの距離を算出 */
--today-inset: max(
var(--today-container-pad),
calc((100vw - var(--today-container-max)) / 2 + var(--today-container-pad))
);
/* 親が .ui-container 内にある場合の二重余白を避けるため、
このスライダーはビューポート全幅に引き伸ばす */
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
/* 横スクロール本体 */
display: flex;
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* スクロールバーを消す（任意） */
scrollbar-width: none;
}
.hscroll-cards--today::-webkit-scrollbar { display: none; }
/* 開始位置を .ui-container に揃える肝
・先頭の余白を scroll-padding と padding 両方に効かせる
・右端は 0（ブラウザ端ピッタリ） */
.hscroll-cards--today {
padding-left: var(--today-inset);
padding-right: 0;
scroll-padding-left: var(--today-inset);
}
/* 最後のカードの右に“呼吸”を持たせたい場合はこちら（任意・コンテナpad分） */
.hscroll-cards--today > :last-child {
margin-right: var(--today-container-pad);
}
/* カード側のスナップ位置 */
.hscroll-cards--today > .hscroll-card,
.hscroll-cards--today > .ui-card-x {
scroll-snap-align: start;
flex: 0 0 auto;
}
/* ドラッグ可能であることを示す */
.hscroll-cards--today.is-draggable {
cursor: grab;
}
/* ドラッグ中：スナップ無効＋テキスト選択防止（これが無いとドラッグが効かない） */
.hscroll-cards--today.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
/* ホイール横スクロール中はスナップを一時的に無効化（JSが is-wheeling を付与） */
.hscroll-cards--today.is-wheeling {
scroll-snap-type: none;
}
/* カード内の画像・リンクのネイティブドラッグを禁止（スクロールを奪わせない） */
.hscroll-cards--today img,
.hscroll-cards--today a {
-webkit-user-drag: none;
user-select: none;
}
/* ------------------------------------------------------------
PC ドラッグ横スクロール対応（JSが .is-draggable / .is-dragging を付与）
・JS未読込でも素のスクロールは効くため、これらは「あれば効く」上乗せ
・スマホ（coarse pointer）は触らず、ネイティブswipeに任せる
------------------------------------------------------------ */
/* マウス環境でドラッグ可能なときだけ grab カーソルを出す */
@media (hover: hover) and (pointer: fine) {
.hscroll-cards.is-draggable { cursor: grab; }
.hscroll-cards.is-dragging { cursor: grabbing; }
}
/* ドラッグ中：snapを一時無効化して指（カーソル）に1:1追従させる。
離した瞬間にJSがクラスを外し、snap が復活して最寄りカードへ“パチッ”と寄る */
.hscroll-cards.is-dragging {
scroll-snap-type: none;
scroll-behavior: auto; /* ドラッグ追従中は滑らかさより即応性 */
user-select: none; /* ドラッグでテキスト選択させない */
-webkit-user-select: none;
}
/* ドラッグ中はカード内のリンク/画像のネイティブドラッグを抑止 */
.hscroll-cards.is-dragging a,
.hscroll-cards.is-dragging img { pointer-events: none; }
/* ============================================================
ui-taglist / ui-tag — タグ（ハッシュタグ）左詰め折返しリスト
------------------------------------------------------------
表示専用・リンク付き・枠囲みpill。左から詰めて自動で折り返す。
既存クラスには一切触れない（新規追加のみ）。色・角丸・余白は
tokens.css の --ui-* を使用。
============================================================ */
.ui-taglist {
display: flex;
flex-wrap: wrap; /* 入りきらなければ次の行へ */
gap: 8px; /* タグ間の縦横の間隔 */
align-items: center;
padding: 0;
margin: 0;
list-style: none; /* で使う場合の中黒を消す */
}
.ui-tag {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
padding: 5px 12px;
border: 0.5px solid var(--ui-border-2);
border-radius: var(--ui-radius-pill);
background: var(--ui-surface);
color: var(--ui-text-sub);
font-size: var(--text-footnote);
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap; /* タグ内で改行させない */
transition: all var(--ui-transition);
-webkit-tap-highlight-color: transparent;
}
/* ハッシュ記号（# を装飾として付ける場合） */
.ui-tag .ui-tag-hash {
color: var(--ui-text-muted);
font-weight: 600;
}
/* リンクとして使うとき（a.ui-tag）のホバー */
a.ui-tag:hover {
border-color: var(--ui-accent);
color: var(--ui-accent);
background: var(--ui-accent-lt);
text-decoration: none;
}
/* アクセント（強調したいタグ） */
.ui-tag--accent {
border-color: transparent;
background: var(--ui-accent-lt);
color: var(--ui-accent);
}
a.ui-tag--accent:hover {
background: rgba(var(--ui-accent-rgb), 0.14);
border-color: transparent;
}
/* 小さめ・大きめ（任意） */
.ui-tag--sm { padding: 3px 9px; font-size: var(--text-caption-1); }
.ui-tag--lg { padding: 7px 16px; font-size: var(--text-subheadline); }
/* Alpine の x-show 初期化前に中身が一瞬見えるのを防ぐ（モーダルで必須） */
[x-cloak] { display: none !important; }