feat: スキルツリーのレイアウト・UI改善

[kdix-23-071]

実装の概要

スキルツリーのノード配置・見た目を複数改善した。

• ノード配置を「下に末広がり・エンジニアの種(Root)を下部」に変更
  • Root (y=+400・最下部)、Tier1 (y=+200・幅±1100・最大幅)、Tier2 (y=0・幅±900)、Tier3 (y=-200・幅±700)、Tier4 (y=-400・幅±400)
• ドラッグによるパン移動を無効化（クリック選択・ズームは維持）
• ノードラベルのフォントサイズを拡大 (13px → 21px)
• カテゴリカラーの縁取りを太く (PX×1 → PX×3 相当)
• ダッシュボードの「SKILL TREE」タイトルを大きく (text-base → text-2xl)
• 「ドラッグで移動」の説明文を削除

🔧 技術的な意思決定とトレードオフ (最重要)

採用したアプローチ

• 手法: HTML5 Canvas のワールド座標でノードのYを反転し、幅をTierごとに変化させることで末広がりを実現
• メリット: 「木の根が地面にある」という自然なメタファーと一致し、視覚的な階層が分かりやすい
• デメリット/リスク: Tier間のX座標スパンが大きく異なるため、接続線が斜めに急角度になる場合がある

却下したアプローチ（代替案）

• 手法: Root上部・Tier4下部の「上から下への末広がり」
• 却下理由: ユーザーの要望が「種(Root)が下・枝が上に広がる」木の比喩と異なったため

🧪 テスト戦略と範囲

追加したテストケース

• 正常系: ページ表示・ノードクリックによる選択・ズーム操作
• 異常系: 特になし（座標変更のみ）
• テストしていないこと: 各ノードの接続線が重ならないかの網羅的確認

セキュリティに関する自己評価

• 機密情報のハードコードはないか
• 入力値の検証（バリデーション）は行っているか（フロントのUI変更のみ）
• 既知の脆弱性パターンへの対策は考慮したか（該当なし）

レビュワー（人間）への申し送り事項

フロントエンドのCanvas描画ロジックとノード座標定義のみの変更です。バックエンドへの影響はありません。実際の表示確認を兼ねてレビューをお願いします。

[kdix-23-071]

Lintが怒ってるのは寝て起きてから直します