@charset "utf-8";

/* 공통 스타일 (common.css) */

/* Vue.js 템플릿 로딩 전 쌩 텍스트/템플릿 노출(FOUC) 방지 전역 룰 */
[v-cloak] {
	display: none !important;
}

p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   리치 텍스트 본문 렌더링 공통 스타일 (.rich-text)
   --------------------------------------------------------------------------
   에디터로 작성된 HTML 본문(모달, 상세조회, 목록 미리보기, 게시글 본문 등) 및
   Tiptap 에디터 편집 영역(.ProseMirror)을 렌더링할 때 사용하는 공통 타이포그래피 서식.
   HQ의 모든 화면에서 tiptap-editor.css 로드 없이도 에디터 산출물이 온전하게 조회되도록 지원합니다.
   ========================================================================== */
.rich-text {
	line-height: 1.6;
	color: var(--bs-body-color, #334155);
	word-break: break-word;
}

/* 문단 및 제목 */
.rich-text p {
	margin-bottom: 0.5rem;
}

.rich-text p:last-child {
	margin-bottom: 0;
}

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
	color: var(--bs-heading-color, #1e293b);
	font-weight: 600;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	line-height: 1.35;
}

.rich-text h1 { font-size: 1.5rem; }
.rich-text h2 { font-size: 1.25rem; }
.rich-text h3 { font-size: 1.125rem; }
.rich-text h4 { font-size: 1rem; }
.rich-text h5 { font-size: 0.875rem; }
.rich-text h6 { font-size: 0.8125rem; }

/* 목록 (글머리 / 번호) */
.rich-text ul,
.rich-text ol {
	padding-left: 1.25rem;
	margin-bottom: 0.5rem;
}

.rich-text li {
	margin-bottom: 0.25rem;
}

.rich-text li > p {
	margin-bottom: 0;
}

/* 인용구 */
.rich-text blockquote {
	border-left: 3px solid var(--bs-success, #198754);
	padding-left: 0.75rem;
	color: #64748b;
	margin: 0.5rem 0;
	font-style: italic;
}

/* 인라인 코드 및 코드 블록 */
.rich-text code {
	background-color: #f1f5f9;
	color: #0f172a;
	padding: 0.15rem 0.35rem;
	border-radius: 0.25rem;
	font-family: monospace;
	font-size: 0.875em;
}

.rich-text pre {
	background-color: #1e293b;
	color: #f8fafc;
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin: 0.5rem 0 0.75rem;
}

.rich-text pre code {
	background-color: transparent;
	color: inherit;
	padding: 0;
	font-size: 0.9em;
}

/* 링크 */
.rich-text a {
	color: var(--bs-primary, #0d6efd);
	text-decoration: underline;
	transition: color 0.15s ease-in-out;
}

.rich-text a:hover {
	color: #0a58ca;
}

/* 이미지 및 텍스트 감싸기(Float) */
.rich-text img {
	max-width: 100%;
	height: auto;
	border-radius: 0.375rem;
	display: inline-block;
}

.rich-text img[style*="float: left"],
.rich-text img[style*="float:left"] {
	float: left !important;
	margin-right: 1.25rem !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

.rich-text img[style*="float: right"],
.rich-text img[style*="float:right"] {
	float: right !important;
	margin-left: 1.25rem !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

/* 표 (Table) */
.rich-text table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	margin: 0.75rem 0;
	overflow: hidden;
}

.rich-text table th,
.rich-text table td {
	min-width: 1em;
	border: 1px solid var(--bs-border-color, #cbd5e1);
	padding: 6px 10px;
	vertical-align: top;
	box-sizing: border-box;
}

.rich-text table th {
	font-weight: 600;
	text-align: left;
	background-color: #f1f5f9;
	color: #1e293b;
}

/* 동영상 (Video) 및 유튜브 (YouTube) 래퍼 */
.rich-text video {
	max-width: 100%;
	height: auto;
	border-radius: 0.375rem;
	margin: 0.5rem 0;
	display: block;
	background-color: #0f172a;
}

.rich-text .tiptap-youtube-wrapper,
.rich-text .tiptap-video-wrapper {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0.75rem 0;
	border-radius: 0.5rem;
	overflow: hidden;
	background-color: #000000;
	display: block;
}

.rich-text .tiptap-youtube-wrapper {
	aspect-ratio: 16 / 9;
}

.rich-text .tiptap-youtube-wrapper iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.rich-text .tiptap-video-wrapper video {
	width: 100%;
	height: auto;
	max-height: 100%;
	border: 0;
	display: block;
	object-fit: contain;
}

/* 화면 비율 (Aspect Ratio) */
.rich-text [data-ratio="16x9"] { aspect-ratio: 16 / 9 !important; }
.rich-text [data-ratio="4x3"]  { aspect-ratio: 4 / 3 !important; }
.rich-text [data-ratio="1x1"]  { aspect-ratio: 1 / 1 !important; }
.rich-text [data-ratio="9x16"] { aspect-ratio: 9 / 16 !important; }
.rich-text [data-ratio="21x9"] { aspect-ratio: 21 / 9 !important; }

/* 유튜브 / 동영상 래퍼 정렬 및 Float */
.rich-text [data-text-align="center"] {
	margin-left: auto !important;
	margin-right: auto !important;
	display: block !important;
}

.rich-text [data-text-align="right"] {
	margin-left: auto !important;
	margin-right: 0 !important;
	display: block !important;
}

.rich-text [data-text-align="left"] {
	margin-left: 0 !important;
	margin-right: auto !important;
	display: block !important;
}

.rich-text .tiptap-youtube-wrapper[style*="float: left"],
.rich-text .tiptap-video-wrapper[style*="float: left"] {
	float: left !important;
	margin-left: 0 !important;
	margin-right: 1.25rem !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

.rich-text .tiptap-youtube-wrapper[style*="float: right"],
.rich-text .tiptap-video-wrapper[style*="float: right"] {
	float: right !important;
	margin-right: 0 !important;
	margin-left: 1.25rem !important;
	margin-bottom: 0.5rem !important;
	display: block !important;
}

/* Task List (체크박스 목록) */
.rich-text ul[data-type="taskList"] {
	list-style: none !important;
	padding-left: 0.25rem !important;
	margin-bottom: 0.5rem !important;
}

.rich-text li[data-type="taskItem"] {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	margin-bottom: 0.35rem !important;
}

.rich-text li[data-type="taskItem"] > label {
	flex: 0 0 auto !important;
	display: flex !important;
	align-items: center !important;
	margin: 0.15rem 0 0 0 !important;
	user-select: none !important;
}

.rich-text li[data-type="taskItem"] > label input[type="checkbox"] {
	cursor: default;
	width: 1rem;
	height: 1rem;
	accent-color: var(--bs-primary, #0d6efd);
	margin: 0 !important;
}

.rich-text li[data-type="taskItem"] > div {
	flex: 1 1 auto !important;
	min-width: 0 !important;
}

.rich-text li[data-type="taskItem"] > div > p {
	margin-bottom: 0 !important;
}

.rich-text li[data-type="taskItem"][data-checked="true"] > div {
	text-decoration: line-through;
	color: #94a3b8;
}

/* -------------------------------------------------------------------------- */
/* 7. 코드 블록 (Code Block) 및 구문 강조 (Syntax Highlighting) 스타일      */
/* -------------------------------------------------------------------------- */
.rich-text .tiptap-code-block-wrapper,
.tiptap-code-block-wrapper {
	position: relative;
	background: #0f172a;
	border: 1px solid #1e293b;
	border-radius: 8px;
	margin: 1rem 0;
	overflow: hidden;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.tiptap-code-block-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #1e293b;
	padding: 0.35rem 0.75rem;
	border-bottom: 1px solid #334155;
	user-select: none;
}

.tiptap-code-lang-badge {
	background: #0f172a;
	color: #38bdf8;
	border: 1px solid #334155;
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.5px;
	user-select: none;
}

.tiptap-code-actions {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.tiptap-code-copy-btn {
	background: transparent;
	color: #94a3b8;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	transition: all 0.15s ease;
}

.tiptap-code-copy-btn:hover {
	background: #334155;
	color: #f8fafc;
}

.tiptap-code-copy-btn.copied {
	color: #4ade80;
	border-color: #4ade80;
}

.tiptap-code-delete-btn {
	background: transparent;
	color: #94a3b8;
	border: 1px solid transparent;
	border-radius: 4px;
	padding: 0.15rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	transition: all 0.15s ease;
}

.tiptap-code-delete-btn:hover {
	background: rgba(239, 68, 68, 0.2);
	color: #f87171;
	border-color: rgba(239, 68, 68, 0.4);
}

.rich-text .tiptap-code-block-wrapper pre,
.tiptap-code-block-wrapper pre {
	background: #0f172a !important;
	color: #e2e8f0 !important;
	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace !important;
	font-size: 0.875rem !important;
	line-height: 1.6 !important;
	padding: 0.85rem 1rem !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 0 0 8px 8px !important;
	overflow-x: auto !important;
	tab-size: 4;
}

.rich-text .tiptap-code-block-wrapper pre code,
.tiptap-code-block-wrapper pre code {
	background: transparent !important;
	color: inherit !important;
	padding: 0 !important;
	font-size: inherit !important;
	border-radius: 0 !important;
	border: none !important;
}

/* Syntax Highlighting Tokens (One Dark) */
.hljs { color: #e2e8f0; background: #0f172a; }
.hljs-keyword, .hljs-selector-tag, .hljs-operator { color: #f43f5e !important; font-weight: 600; }
.hljs-built_in, .hljs-type, .hljs-class { color: #38bdf8 !important; }
.hljs-string, .hljs-addition, .hljs-attribute { color: #4ade80 !important; }
.hljs-number, .hljs-literal { color: #fb923c !important; }
.hljs-function, .hljs-title { color: #facc15 !important; font-weight: 600; }
.hljs-comment, .hljs-quote { color: #64748b !important; font-style: italic; }
.hljs-variable, .hljs-template-variable, .hljs-attr { color: #c084fc !important; }
.hljs-meta, .hljs-meta .hljs-keyword { color: #f472b6 !important; }
.hljs-deletion { color: #ef4444 !important; background-color: rgba(239, 68, 68, 0.15); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: bold; }


td .date + .time {
	display: block;
	font-size: .95rem;
	opacity: .75;
}

/* ==========================================================================
   테이블 내 드롭다운 쌓임 맥락(Stacking Context) 해결 공통 스타일
   --------------------------------------------------------------------------
   테이블 행(tr) 및 셀(td) 내 드롭다운 메뉴가 열렸을 때 DOM 상 나중에 렌더링된
   아래쪽 행/셀에 메뉴가 가려지는 현상을 방지하기 위해 열린 행/셀의 z-index 격상
   ========================================================================== */
.table tbody tr:has(.dropdown-menu.show),
.table tbody td:has(.dropdown-menu.show) {
	position: relative;
	z-index: 10;
}

/* ==========================================================================
   Split.js 공통 분할선 스타일 (.gutter)
   --------------------------------------------------------------------------
   Split.js 라이브러리가 화면 분할 시 동적으로 생성하는 조절선 UI 스타일
   ========================================================================== */
.gutter {
	background-color: #212529;
	background-repeat: no-repeat;
	background-position: 50%;
	cursor: col-resize;
	transition: background-color 0.2s;
	z-index: 10;
}

.gutter:hover,
.gutter.gutter-dragging {
	background-color: #2f6fed !important;
}

.gutter.gutter-vertical {
	cursor: row-resize;
}