/* 코드 블록의 색입니다. 글쓰기 화면(write.css)과 같은 테마를 씁니다 —
쓰면서 본 모습과 올린 뒤의 모습이 갈리면 무엇이 맞는지 알 수 없습니다. */
@import url("/lib/quill-2.0.3/css/highlight-github-dark.css");
/* 게시판 보기 리뉴얼(2B 시안) 다크 테마 */
.article-page { background: #0a0e1f; color: #e8ecf7; font-family: 'Pretendard', system-ui, sans-serif; }
.article-grid { max-width: 1200px; margin: 0 auto; padding: 34px 32px 90px; display: grid; grid-template-columns: 1fr 300px; gap: 30px; }
.article { border: 1px solid #23306a; border-radius: 16px; background: #0a0e1f; overflow: hidden; }
.art-head { padding: 30px 34px 24px; border-bottom: 1px solid #1b2a4e; }
.art-nav { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.mbtn { font-size: 12px; font-family: monospace; color: #8da0d6; border: 1px solid #23306a; border-radius: 7px; padding: 6px 12px; text-decoration: none; background: transparent; cursor: pointer; display: inline-block; }
.mbtn:hover { color: #f5c542; border-color: #2c3c7e; }
.mbtn-gold { color: #0a1130; background: #f5c542; font-weight: 700; border-color: #f5c542; }
.mbtn-gold:hover { color: #0a1130; }
.mbtn-danger { color: #e2846f; border-color: #5a2f2a; }
.mbtn-danger:hover { color: #ff9d86; border-color: #7a3f36; }
.art-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cat-chip { font-size: 12px; font-family: monospace; color: #f5c542; border: 1px solid #2c3c7e; padding: 3px 10px; border-radius: 6px; text-decoration: none; }
.cat-chip:hover { background: #16235e; }
.art-title { margin: 0; font-size: 30px; font-weight: 800; color: #e8ecf7; letter-spacing: -0.5px; line-height: 1.35; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 16px; font-size: 13px; font-family: monospace; color: #8da0d6; }
.art-meta .writer { color: #c3cdec; }
.art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 18px 34px 0; }
.art-actions .btn { font-size: 12px; font-family: monospace; padding: 6px 12px; }
/* 삭제는 폼으로 보냅니다(GET 삭제 차단). display:contents 로 폼 자체는 레이아웃에서 빠지고
안의 단추가 옆 단추들과 나란히 놓입니다 — 감싼 태그 때문에 줄이 어긋나지 않습니다. */
.art-actions .inline-form { display: contents; }
.art-body { padding: 30px 34px 34px; font-size: 15.5px; line-height: 1.9; color: #c3cdec; }
.art-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 4px 34px 24px; }
.art-comments { padding: 26px 34px 32px; border-top: 1px solid #1b2a4e; background: #080b1a; }
.cmt-title { font-family: 'Press Start 2P'; font-size: 12px; color: #f5c542; margin-bottom: 16px; }
.list-aside { display: flex; flex-direction: column; gap: 20px; }
.aside-card { border: 1px solid #23306a; border-radius: 12px; background: #111938; padding: 18px; }
.aside-title { font-family: 'Press Start 2P'; font-size: 12px; color: #f5c542; margin-bottom: 14px; }
.aside-search { display: flex; gap: 8px; }
.aside-search input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid #23306a; border-radius: 8px; background: #0a0e1f; color: #c3cdec; font-size: 13px; outline: none; }
.aside-search .btn { display: inline-flex; align-items: center; padding: 11px 15px; background: #f5c542; color: #0a1130; border: 0; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none; }
.aside-search .btn:hover { background: #ffe48f; color: #0a1130; }
.cat-list { display: flex; flex-direction: column; gap: 1px; }
.cat-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 7px; text-decoration: none; }
.cat-row:hover { background: #16235e; }
.cat-row .name { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #c3cdec; }
.cat-row .dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
/* ===== 본문 서식 =====
글에 담기는 것은 손질된 HTML 이라 편집기의 클래스가 남아 있지 않습니다. 그래서 서식은
여기서 태그로 정합니다 — 편집기를 바꾸어도 예전 글이 그대로 보여야 하기 때문입니다. */
.art-content { color: #c3cdec; }
.art-content > *:first-child { margin-top: 0; }
.art-content > *:last-child { margin-bottom: 0; }
.art-content p { margin: 0 0 1em; }
.art-content h1, .art-content h2, .art-content h3, .art-content h4, .art-content h5, .art-content h6 {
margin: 1.6em 0 .7em;
color: #f5c542;
font-weight: 800;
line-height: 1.4;
}
.art-content h1 { font-size: 26px; }
.art-content h2 { font-size: 22px; }
.art-content h3 { font-size: 19px; }
.art-content h4 { font-size: 17px; }
.art-content a { color: #f5c542; }
.art-content strong, .art-content b { color: #e8ecf7; }
.art-content ul, .art-content ol { margin: 0 0 1em; padding-left: 1.6em; }
.art-content li { margin: .25em 0; }
.art-content blockquote {
margin: 1.2em 0;
padding: 2px 0 2px 14px;
border-left: 3px solid #2c3c7e;
color: #8da0d6;
}
.art-content hr { border: 0; border-top: 1px solid #1b2a4e; margin: 1.8em 0; }
.art-content img { max-width: 100%; height: auto; border-radius: 8px; }
.art-content audio, .art-content video { max-width: 100%; }
.art-content iframe { max-width: 100%; border: 0; border-radius: 8px; }
/* 표 — 좁은 화면에서는 표만 옆으로 밀려야 합니다. 본문 전체가 밀리면 읽을 수 없습니다. */
.art-content table {
width: 100%;
margin: 1.2em 0;
border-collapse: collapse;
font-size: 14px;
}
.art-content td, .art-content th { border: 1px solid #23306a; padding: 8px 12px; }
.art-content th { background: #111938; color: #e8ecf7; font-weight: 700; }
/* ===== 코드 =====
글 안에 섞인 짧은 코드와, 통째로 실은 코드 블록은 달리 보여야 합니다. */
.art-content code {
padding: 2px 6px;
border-radius: 4px;
background: #111938;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: .92em;
color: #e8ecf7;
}
.art-content pre {
position: relative;
margin: 1.4em 0;
padding: 0;
border: 1px solid #23306a;
border-radius: 9px;
background: #05070f;
overflow: hidden;
}
.art-content pre code {
display: block;
padding: 16px 18px;
background: transparent;
border-radius: 0;
color: #c9d1d9;
font-size: 13.5px;
line-height: 1.7;
overflow-x: auto;
white-space: pre;
}
/* 코드 복사 단추 — 코드 위에 떠 있다가 칸에 손을 얹으면 또렷해집니다.
모바일에는 얹을 손이 없으므로 늘 보이게 둡니다(아래 반응형). */
.code-copy {
position: absolute;
top: 8px;
right: 8px;
z-index: 1;
padding: 4px 10px;
border: 1px solid #23306a;
border-radius: 6px;
background: #0c1230;
color: #8da0d6;
font-family: monospace;
font-size: 11px;
line-height: 1.6;
cursor: pointer;
opacity: 0;
transition: opacity .12s, color .12s, border-color .12s;
}
.art-content pre:hover .code-copy, .code-copy:focus { opacity: 1; }
.code-copy:hover { color: #f5c542; border-color: #2c3c7e; }
.code-copy.is-done { color: #4cae7a; border-color: #2f6b4c; opacity: 1; }
/* ===== 댓글(.comment-body) =====
DOM 구조와 클래스는 comment.js 가 만드는 그대로 두고 모양만 덮어씁니다. 좋아요·신고 같은
토글이 클래스를 갈아 끼우며 도므로, 클래스를 바꾸면 그 동작이 함께 무너집니다.
댓글은 이 화면에서만 씁니다(comment.js 를 싣는 뷰가 여기뿐입니다). 그래서 서비스 공용인
blog.css 가 아니라 이 파일에 둡니다 — 공용에 두면 목록·글쓰기 화면도 쓰지 않는 것을
받습니다. */
.comment-body .card, .comment-body .card-body { background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
/* 작성 폼 */
.comment-body .comment-form { border: 1px solid #23306a; border-radius: 12px; background: #0a0e1f; padding: 16px; margin-bottom: 22px; }
.comment-body .comment-form textarea.form-control,
.comment-body .comment-form textarea.form-control:focus { background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important; color: #c3cdec !important; resize: none; padding: 0; min-height: 60px; font-size: 14px; line-height: 1.6; }
.comment-body .comment-form textarea.form-control::placeholder { color: #5f6f9f; }
.comment-body .comment-form .row { margin: 0; }
.comment-body .comment-form .mt-2 { margin-top: 12px !important; align-items: center; }
.comment-body .comment-form .col { padding: 0; }
/* 폼 버튼 */
.comment-body .btn { border-radius: 7px; font-size: 13px; font-family: 'Pretendard', system-ui, sans-serif; box-shadow: none; }
.comment-body .comment-form .btn-outline-secondary { color: #8da0d6; border: 1px solid #23306a !important; background: transparent; padding: 8px 16px; }
.comment-body .comment-form .btn-outline-secondary:hover { color: #f5c542; border-color: #2c3c7e !important; }
.comment-body .comment-form .btn-primary { color: #0a1130 !important; background: #f5c542 !important; border: 0 !important; font-weight: 700; padding: 8px 18px; }
.comment-body .comment-form .btn-primary:hover { background: #ffe48f !important; }
.comment-body .comment-form .btn-refresh { color: #8da0d6; padding: 8px 12px; }
.comment-body .comment-form .btn-refresh:hover { color: #f5c542; }
/* 댓글 아이템 */
.comment-body .comment-item { padding: 18px 2px; border-top: 1px solid #1b2a4e; }
.comment-body .comment-item.mt-4 { margin-top: 0 !important; }
.comment-body .comment-item img.rounded-circle { width: 44px !important; height: 44px !important; border: 1px solid #23306a; }
.comment-body .comment-area { color: #c3cdec; }
.comment-body .comment-area .fw-bold { color: #e8ecf7; font-size: 14px; }
.comment-body .comment-area p.mb-0 { color: #c3cdec; font-size: 14px; line-height: 1.7; margin-top: 4px; }
.comment-body .comment-area .text-black-50 { color: #5f6f9f !important; }
/* 댓글 본문 — 줄바꿈을 글자 그대로 살립니다.
예전에는 줄바꿈을
로 바꿔 innerHTML 로 넣었는데, 그러면 댓글에 적힌 태그가 그대로
실행됩니다(누가 
를 남기면 그 글을 여는 모든 사람에게서 돕니다).
이제 글자로만 넣으므로(textContent) 줄바꿈은 여기서 살립니다. */
.comment-body .comment-area p { white-space: pre-wrap; overflow-wrap: anywhere; }
/* 액션 버튼(좋아요/싫어요/삭제/신고/답글) */
.comment-body .comment-area .btn { color: #8da0d6; background: transparent; border: 0; font-size: 12px; padding: 4px 8px; }
.comment-body .comment-area .btn:hover { color: #f5c542; }
.comment-body .comment-area .btn.btn-secondary { color: #f5c542; background: transparent; }
.comment-body .comment-area .ps-2 { color: inherit; }
.comment-body .comment-area .mi-pin { color: #f5c542; }
/* 댓글 영역 아이콘 크기 미세 조정 */
.comment-body [class^="mi-"] { --mi: 15px; vertical-align: -0.15em; }
/* 답글 더보기/접기 */
.comment-body .comment-more button { color: #8da0d6; font-size: 13px; }
.comment-body .comment-more button:hover { color: #f5c542; }
/* 댓글 액션·상태 아이콘은 공용 스프라이트(mi-*, icons.css)를 로 사용한다.
답글 펼치기/접기 화살표만 디자인 세트에 대응 아이콘이 없어 유니코드로 유지. */
.comment-body .comment-more [class*="ti-"]::before { font-family: 'Pretendard', 'Segoe UI Emoji', system-ui, sans-serif !important; speak: none; }
.comment-body .comment-more .ti-angle-down::before { content: "\25BE"; } /* ▾ 펼치기 */
.comment-body .comment-more .ti-angle-up::before { content: "\25B4"; } /* ▴ 접기 */
/* 댓글을 받지 않는 글의 안내 */
.comment-body .cmt-closed { margin: 0; padding: 6px 2px; color: #8da0d6; font-size: 13px; }
@media (max-width: 900px) {
/* 모바일: 단일 컬럼 + 좌우 여백 축소로 본문 폭 최대 활용 */
.article-grid { grid-template-columns: 1fr; padding: 20px 12px 60px; gap: 20px; }
.art-head { padding: 22px 16px 18px; }
.art-actions { padding: 14px 16px 0; }
.art-body { padding: 22px 16px 26px; }
.art-foot { padding: 4px 16px 20px; }
.art-comments { padding: 22px 16px 26px; }
.art-title { font-size: 24px; }
/* 하단에 쌓이던 사이드바(카테고리·검색) 숨김 */
.list-aside { display: none; }
/* 액션 버튼: 아이콘만 노출(텍스트는 font-size:0 으로 숨김 — 접근성 트리에는 유지) */
.art-nav .mbtn, .art-actions .mbtn, .art-actions .btn.btn-xs, .art-foot .mbtn { font-size: 0; padding: 8px 11px; }
.art-nav .mbtn > [class^="mi-"], .art-actions .mbtn > [class^="mi-"], .art-actions .btn.btn-xs > [class^="mi-"], .art-foot .mbtn > [class^="mi-"] { margin-right: 0; }
/* 메타(댓글·조회): 라벨 단어는 숨기고 아이콘+숫자만 노출 */
.art-meta .meta-label { display: none; }
/* 손을 얹을 수 없는 화면이라 복사 단추를 늘 내놓습니다. */
.code-copy { opacity: 1; }
/* 댓글의 신고·답글 버튼은 아이콘만 노출(라벨 숨김) */
.comment-body .comment-area .cmt-label { display: none; }
.comment-body .comment-area .btn [class^="mi-"] { margin-right: 0; }
}