@charset "UTF-8";
/* =====================================================================
動的化にともなう追加スタイル
style.css → page.css → member.css の後に読み込む。
モックアップに既にあるクラス（.st / .pagination / .empty / .star-input /
.tabnav / .tab-filter / .stars / .chip …）はそのまま使い、
ここでは動的化で新たに必要になったものだけを定義する。
===================================================================== */
/* ---- 案件ステータスの追加バリエーション ----
member.css に .st-wait/.st-quoted/.st-contract/.st-working/.st-done/.st-pay/.st-cancel がある。
正規ステータス（Code::$projectStatus）に合わせて足りないものを補う。 */
.st-contracted{background:#e8f1e9;color:#2e7d43} /* 契約成立 */
.st-action {background:#fdf1e3;color:#9a5f13} /* 対応が必要（完了報告済み） */
.st-paid {background:#e6f4ea;color:#1a7a3c} /* 支払完了 */
.st-dispute {background:#fdeeee;color:#a03030} /* サポート対応中 */
/* ---- リンク風のボタン（POST送信をリンクに見せる） ---- */
.linklike{
background:none;border:0;padding:0;margin:0;cursor:pointer;
color:var(--green);font-size:.9rem;font-weight:700;text-decoration:underline;
font-family:inherit;
}
.linklike:hover{color:var(--green-dark)}
/* ---- お知らせ一覧 ---- */
.notif-list{
list-style:none;margin:0;padding:0;background:#fff;
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-sm);
}
.notif-list li{border-bottom:1px solid var(--line)}
.notif-list li:last-child{border-bottom:0}
.notif-list a{display:flex;gap:14px;padding:18px 22px;color:inherit;align-items:flex-start}
.notif-list a:hover{background:var(--cream-2)}
.notif-list li.unread{background:#f6fbf7}
.notif-ico{
flex:0 0 auto;width:34px;height:34px;border-radius:50%;
background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
font-size:.85rem;font-weight:800;
}
.notif-body{flex:1;min-width:0}
.notif-body .t{display:block;font-size:.96rem;font-weight:700;margin-bottom:4px;line-height:1.6;color:var(--green-dark)}
.notif-body .d{display:block;font-size:.88rem;color:var(--text-muted);line-height:1.7}
.notif-body .m{display:block;font-size:.78rem;color:var(--text-muted);margin-top:6px}
.notif-new{
display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
background:var(--green);color:#fff;font-size:.7rem;font-weight:800;vertical-align:middle;
}
/* ---- 明細行の入力（見積書・請求書） ---- */
.item-row-del{
background:none;border:0;color:#c0392b;cursor:pointer;font-size:1.1rem;
padding:4px 8px;line-height:1;font-family:inherit;
}
.item-row-del:hover{color:#8d2a1f}
.item-add{margin-top:12px}
/* テーブル内の入力欄をコンパクトに（JSのフックも兼ねるクラス） */
table.tbl .input{padding:7px 10px;font-size:.86rem}
.item-qty,.item-price{text-align:right;font-variant-numeric:tabular-nums}
.item-amount{font-variant-numeric:tabular-nums;font-weight:700;color:var(--green-dark);white-space:nowrap}
/* ---- 写真サムネイル ---- */
.thumb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:12px}
.thumb-grid figure{margin:0}
.thumb-grid img{
width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
border-radius:8px;border:1px solid var(--line);
}
.thumb-grid figcaption{font-size:.8rem;color:var(--text-muted);margin-top:6px;text-align:center}
.thumb-ph{
width:100%;aspect-ratio:4/3;border-radius:8px;border:1px dashed var(--line);
background:var(--cream-2);display:flex;align-items:center;justify-content:center;
color:var(--text-muted);font-size:.8rem;text-align:center;padding:8px;line-height:1.6;
}
/* ---- 番号付きの縦リスト（定義リストの中で選択項目を並べる） ----
ul,ol は style.css で list-style:none にリセットされているので番号を自前で出す。 */
.num-list{counter-reset:numli}
.num-list>li{position:relative;padding-left:1.9em;counter-increment:numli}
.num-list>li+li{margin-top:4px}
.num-list>li::before{
content:counter(numli) ".";position:absolute;left:0;
color:var(--green-dark);font-weight:700;font-variant-numeric:tabular-nums;
}
/* ---- ダッシュボード型レイアウトの横あふれ対策 ----
★グリッドの子は既定が min-width:auto のため、中の広いテーブルが
「1fr」の列を押し広げ、右のサイド（320px）が画面からはみ出していた。
min-width:0 にすると列幅どおりに収まり、テーブルは .tbl-wrap 内で
横スクロールする。 */
.dash-grid>*,.detail-grid>*,.search-layout>*,.chat-layout>*,.pay-layout>*{min-width:0}
.dash-grid .tbl-wrap,.dash-grid .chart-card{max-width:100%}
/* ---- カード間の余白（フォームをまたぐ場合） ----
.form-card + .form-card の隣接セレクタは、あいだに