From 60ec2408ca7a5642c2b158cd50d90eda0722e9bc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Mon, 2 Mar 2026 16:19:20 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[roadmap]=20=EB=A1=9C=EB=93=9C=EB=A7=B5?=
 =?UTF-8?q?=20=EB=AC=B8=EC=84=9C=20=EB=A7=88=ED=81=AC=EB=8B=A4=EC=9A=B4=20?=
 =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?=
 =?UTF-8?q?=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Tailwind prose 클래스 → 커스텀 .markdown-body CSS로 변경
- 테이블 보더, 코드 블록, 제목 계층, 인용문 스타일 추가
---
 .../views/roadmap/documents/show.blade.php    | 171 ++++++++++++++++--
 1 file changed, 155 insertions(+), 16 deletions(-)

diff --git a/resources/views/roadmap/documents/show.blade.php b/resources/views/roadmap/documents/show.blade.php
index 37421f0c..74978dd9 100644
--- a/resources/views/roadmap/documents/show.blade.php
+++ b/resources/views/roadmap/documents/show.blade.php
@@ -25,22 +25,7 @@
 <!-- 문서 본문 -->
 @if($content)
 <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
-    <article class="prose prose-sm max-w-none
-        prose-headings:text-gray-900 prose-headings:font-bold
-        prose-h1:text-2xl prose-h1:border-b prose-h1:border-gray-200 prose-h1:pb-3 prose-h1:mb-6
-        prose-h2:text-xl prose-h2:mt-8 prose-h2:mb-4
-        prose-h3:text-lg prose-h3:mt-6 prose-h3:mb-3
-        prose-p:text-gray-700 prose-p:leading-relaxed
-        prose-a:text-indigo-600 prose-a:no-underline hover:prose-a:underline
-        prose-code:text-indigo-700 prose-code:bg-indigo-50 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-code:text-sm prose-code:before:content-none prose-code:after:content-none
-        prose-pre:bg-gray-900 prose-pre:text-gray-100 prose-pre:rounded-lg prose-pre:overflow-x-auto
-        prose-table:text-sm
-        prose-th:bg-gray-50 prose-th:px-4 prose-th:py-2 prose-th:text-left prose-th:font-semibold prose-th:text-gray-700
-        prose-td:px-4 prose-td:py-2 prose-td:border-t prose-td:border-gray-200
-        prose-blockquote:border-indigo-300 prose-blockquote:bg-indigo-50 prose-blockquote:rounded-r-lg prose-blockquote:py-1 prose-blockquote:px-4
-        prose-strong:text-gray-900
-        prose-li:text-gray-700
-        prose-hr:border-gray-200 prose-hr:my-8">
+    <article class="markdown-body">
         {!! $content !!}
     </article>
 </div>
@@ -54,3 +39,157 @@
 </div>
 @endif
 @endsection
+
+@push('styles')
+<style>
+    .markdown-body {
+        font-size: 14px;
+        line-height: 1.7;
+        color: #1f2937;
+        word-wrap: break-word;
+    }
+
+    /* 제목 */
+    .markdown-body h1 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: #111827;
+        border-bottom: 2px solid #e5e7eb;
+        padding-bottom: 0.6rem;
+        margin: 2rem 0 1.2rem;
+    }
+    .markdown-body h1:first-child { margin-top: 0; }
+
+    .markdown-body h2 {
+        font-size: 1.35rem;
+        font-weight: 700;
+        color: #1f2937;
+        border-bottom: 1px solid #f3f4f6;
+        padding-bottom: 0.4rem;
+        margin: 2rem 0 1rem;
+    }
+
+    .markdown-body h3 {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #374151;
+        margin: 1.5rem 0 0.6rem;
+    }
+
+    .markdown-body h4 {
+        font-size: 1rem;
+        font-weight: 600;
+        color: #4b5563;
+        margin: 1.2rem 0 0.5rem;
+    }
+
+    /* 단락 */
+    .markdown-body p {
+        margin: 0.6rem 0;
+        color: #374151;
+    }
+
+    /* 강조 */
+    .markdown-body strong { color: #111827; }
+
+    /* 링크 */
+    .markdown-body a {
+        color: #4f46e5;
+        text-decoration: none;
+    }
+    .markdown-body a:hover { text-decoration: underline; }
+
+    /* 인라인 코드 */
+    .markdown-body code {
+        background: #f3f4f6;
+        color: #7c3aed;
+        padding: 0.15em 0.4em;
+        border-radius: 4px;
+        font-size: 0.85em;
+        font-family: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
+    }
+
+    /* 코드 블록 */
+    .markdown-body pre {
+        background: #1e293b;
+        color: #e2e8f0;
+        border-radius: 8px;
+        padding: 1rem 1.2rem;
+        overflow-x: auto;
+        margin: 1rem 0;
+        line-height: 1.5;
+    }
+    .markdown-body pre code {
+        background: none;
+        color: inherit;
+        padding: 0;
+        border-radius: 0;
+        font-size: 0.82rem;
+    }
+
+    /* 테이블 */
+    .markdown-body table {
+        width: 100%;
+        border-collapse: collapse;
+        margin: 1rem 0;
+        font-size: 0.85rem;
+    }
+    .markdown-body thead th {
+        background: #f8fafc;
+        border: 1px solid #e2e8f0;
+        padding: 0.55rem 0.75rem;
+        text-align: left;
+        font-weight: 600;
+        color: #334155;
+        white-space: nowrap;
+    }
+    .markdown-body tbody td {
+        border: 1px solid #e2e8f0;
+        padding: 0.5rem 0.75rem;
+        color: #475569;
+    }
+    .markdown-body tbody tr:hover { background: #f8fafc; }
+
+    /* 인용 */
+    .markdown-body blockquote {
+        border-left: 4px solid #818cf8;
+        background: #eef2ff;
+        margin: 1rem 0;
+        padding: 0.75rem 1rem;
+        border-radius: 0 6px 6px 0;
+        color: #3730a3;
+    }
+    .markdown-body blockquote p {
+        color: #3730a3;
+        margin: 0.3rem 0;
+    }
+    .markdown-body blockquote strong { color: #312e81; }
+
+    /* 리스트 */
+    .markdown-body ul, .markdown-body ol {
+        padding-left: 1.5rem;
+        margin: 0.5rem 0;
+    }
+    .markdown-body li {
+        margin: 0.25rem 0;
+        color: #374151;
+    }
+    .markdown-body ul li { list-style-type: disc; }
+    .markdown-body ol li { list-style-type: decimal; }
+    .markdown-body li > ul, .markdown-body li > ol { margin: 0.15rem 0; }
+
+    /* 구분선 */
+    .markdown-body hr {
+        border: none;
+        border-top: 1px solid #e5e7eb;
+        margin: 2rem 0;
+    }
+
+    /* 이미지 */
+    .markdown-body img {
+        max-width: 100%;
+        border-radius: 8px;
+        margin: 1rem 0;
+    }
+</style>
+@endpush