Update app.py

app.py

@@ -33,7 +33,7 @@ CARD_CSS = """
   gap: 12px;
 }
 
-/* Radioは input + label の構造なので label をカード化 */
+/* label をカード化（常に文字色を濃色に固定） */
 #job_cards label {
   border: 1px solid #e5e7eb !important;
   border-radius: 16px !important;
@@ -41,8 +41,9 @@ CARD_CSS = """
   background: #ffffff !important;
   cursor: pointer !important;
   line-height: 1.45 !important;
-  white-space: pre-wrap !important; /* \n を効かせる */
+  white-space: pre-wrap !important;
   transition: all .12s ease;
+  color: #111827 !important; /* ★選択時に文字が消えるのを防ぐ */
 }
 
 /* hover */
@@ -51,13 +52,14 @@ CARD_CSS = """
   box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
 }
 
-/* 選択時 */
+/* 選択時：背景 + 枠 + 文字色を明示 */
 #job_cards input:checked + label {
   border-color: #4f46e5 !important;
   background: #eef2ff !important;
+  color: #111827 !important; /* ★checkedで白文字化されても上書き */
 }
 
-/* ラジオ丸を控えめに（好みで調整可） */
+/* ラジオ丸 */
 #job_cards input[type="radio"] {
   transform: scale(0.95);
   margin-top: 6px;
@@ -201,13 +203,12 @@ def bids_table(job_id=None):
     return pd.DataFrame(rows)
 
 # =========================
-# Contractor card-like list (Radio choices)
+# Contractor card list (simple)
 # =========================
 def open_job_cards(date_mode: str):
     """
-    職人タブの「募集中案件カード（Radio）」 choices を作る
-    1枚のカードに案件要点をリスト表示する想定。
-    期限が近い順（残り日数が小さい順）に並べる。
+    職人タブの「募集中案件カード（Radio）」 choices
+    カード内はシンプルに：タイトル/エリア/予算/納期/残り
     """
     items = []
     for j in STATE["jobs"]:
@@ -218,18 +219,12 @@ def open_job_cards(date_mode: str):
         rem_days = days_remaining(j["deadline_raw"])
         rem = remaining_label(j["deadline_raw"])
 
-        details = (j.get("details") or "").strip()
-        details_short = details[:60] + ("…" if len(details) > 60 else "")
-        if not details_short:
-            details_short = "（詳細なし）"
-
         label = (
             f"{j['title']}\n"
-            f"・案件ID：{j['job_id']}\n"
             f"・エリア：{j['area']}\n"
             f"・予算：{yen(j['budget_min'])}〜{yen(j['budget_max'])}\n"
-            f"・納期：{dl}（{rem}）\n"
-            f"・概要：{details_short}"
+            f"・納期：{dl}\n"
+            f"・{rem}"
         )
 
         sort_key = rem_days if rem_days is not None else 10**9
@@ -239,24 +234,39 @@ def open_job_cards(date_mode: str):
     return [x[1] for x in items]
 
 def job_card_md(job_id: str, date_mode: str):
+    """
+    選択後の詳細表示（見栄え重視）
+    ※案件IDは表示しない（要望）
+    """
     j = next((x for x in STATE["jobs"] if x["job_id"] == job_id), None)
     if not j:
         return "（案件が見つかりません）"
-    details = j.get("details", "") or "（詳細なし）"
+
+    details = (j.get("details") or "").strip() or "（詳細なし）"
     dl = format_deadline(j["deadline_raw"], date_mode)
     rem = remaining_label(j["deadline_raw"])
 
+    # status表示（職人は基本OPENを見る想定なので「募集中」を固定表示）
     return f"""
-<div style="border:1px solid #e5e7eb;border-radius:16px;padding:14px;background:#ffffff;">
-  <div style="font-size:18px;font-weight:800;margin-bottom:8px;">{j['title']}</div>
-  <div style="display:flex;gap:10px;flex-wrap:wrap;">
-    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;">案件ID: <b>{j['job_id']}</b></div>
-    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;">エリア: <b>{j['area']}</b></div>
-    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;">予算: <b>{yen(j['budget_min'])}〜{yen(j['budget_max'])}</b></div>
-    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;">納期: <b>{dl}</b></div>
-    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;">{rem}</div>
+<div style="border:1px solid #e5e7eb;border-radius:18px;padding:16px;background:#ffffff;">
+  <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
+    <div style="font-size:20px;font-weight:900;line-height:1.2;">{j['title']}</div>
+    <div style="padding:6px 10px;border-radius:999px;background:#f3f4f6;color:#111827;font-weight:700;">
+      募集中
+    </div>
+  </div>
+
+  <div style="margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;">
+    <div style="padding:7px 10px;border-radius:999px;background:#f3f4f6;">エリア：<b>{j['area']}</b></div>
+    <div style="padding:7px 10px;border-radius:999px;background:#f3f4f6;">予算：<b>{yen(j['budget_min'])}〜{yen(j['budget_max'])}</b></div>
+    <div style="padding:7px 10px;border-radius:999px;background:#f3f4f6;">納期：<b>{dl}</b></div>
+    <div style="padding:7px 10px;border-radius:999px;background:#eef2ff;color:#111827;"><b>{rem}</b></div>
+  </div>
+
+  <div style="margin-top:14px;padding:12px;border-radius:14px;background:#fafafa;border:1px solid #f3f4f6;">
+    <div style="font-weight:800;margin-bottom:6px;color:#111827;">詳細</div>
+    <div style="color:#374151;white-space:pre-wrap;line-height:1.6;">{details}</div>
   </div>
-  <div style="margin-top:10px;color:#374151;white-space:pre-wrap;">{details}</div>
 </div>
 """
 
@@ -345,7 +355,7 @@ def refresh_contractor_view(date_mode):
 
 def on_card_select(job_id, date_mode):
     """
-    職人：カード（Radio）を選ぶ → 入札先Dropdownへ自動セット + 詳細カード表示 + 入札一覧更新
+    職人：カード選択 → 入札先Dropdownへ自動セット + 詳細表示 + 入札一覧更新
     """
     if not job_id:
         return (
@@ -517,7 +527,6 @@ with gr.Blocks(title="ギルドビルド｜プロトタイプ", theme=gr.themes.
                 )
                 refresh_jobs_btn = gr.Button("案件リスト更新")
 
-            # ★カード化されたRadio（CSSでカードUI）
             job_cards = gr.Radio(
                 label="募集中案件（カード）",
                 choices=open_job_cards(date_mode.value),