/**
 * @brief Tiptap util(Tiptap.create) UI 스타일 - toolbar / 본문 / bubble menu
 * @author [nayu1105] AI Code Assistant
 */

/* ===== 전체 wrapper ===== */
.tt-wrap {
	font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	border: 1px solid #dde1e7;
	border-radius: 8px;
	background: #fff;
	overflow: visible;
	position: relative;
}
.tt-wrap:focus-within { border-color: #c8d5ed; }

/* ===== 상단 툴바 ===== */
.tt-toolbar {
	display: flex;
	gap: 3px;
	flex-wrap: wrap;
	padding: 8px;
	background: #f7f8fa;
	border-bottom: 1px solid #dde1e7;
	border-radius: 8px 8px 0 0;
}
.tt-toolbar button {
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	background: #fff;
	border: 1px solid #dde1e7;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	color: #37352f;
	line-height: 1;
}
.tt-toolbar button:hover { background: #eef2f7; }
.tt-toolbar button.is-active {
	background: #2d6cdf;
	color: #fff;
	border-color: #2d6cdf;
}
.tt-toolbar select {
	height: 32px;
	padding: 0 8px;
	border: 1px solid #dde1e7;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
	color: #37352f;
}
.tt-toolbar .tt-sep {
	width: 1px;
	background: #dde1e7;
	margin: 0 4px;
}

/* ===== 본문 ===== */
.tt-editor-host {
	padding: 12px 18px 18px;
}
.tt-editor-host .ProseMirror {
	outline: none;
	font-size: 15px;
	line-height: 1.7;
	color: #2e2e2e;
	min-height: 200px;
	word-wrap: break-word;
	white-space: pre-wrap;
}
.tt-editor-host .ProseMirror > * + * { margin-top: 0.6em; }
.tt-editor-host .ProseMirror p { margin: 0; }
.tt-editor-host .ProseMirror h1 { font-size: 1.875em; font-weight: 700; line-height: 1.3; }
.tt-editor-host .ProseMirror h2 { font-size: 1.5em;   font-weight: 700; line-height: 1.3; }
.tt-editor-host .ProseMirror h3 { font-size: 1.25em;  font-weight: 600; line-height: 1.3; }
.tt-editor-host .ProseMirror h4 { font-size: 1.1em;   font-weight: 600; }
.tt-editor-host .ProseMirror ul, .tt-editor-host .ProseMirror ol { padding-left: 1.5em; }
.tt-editor-host .ProseMirror li > p { margin: 0; }

/* task list */
.tt-editor-host .ProseMirror ul[data-type="taskList"] {
	list-style: none;
	padding-left: 0.25em;
}
.tt-editor-host .ProseMirror ul[data-type="taskList"] li {
	display: flex;
	align-items: flex-start;
	gap: 0.5em;
}
.tt-editor-host .ProseMirror ul[data-type="taskList"] li > label {
	flex-shrink: 0;
	margin-top: 0.25em;
	user-select: none;
}
.tt-editor-host .ProseMirror ul[data-type="taskList"] li > div { flex: 1; min-width: 0; }
.tt-editor-host .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div {
	color: #9b9a97;
	text-decoration: line-through;
}

/* blockquote */
.tt-editor-host .ProseMirror blockquote {
	border-left: 3px solid #d0d7de;
	padding: 2px 14px;
	margin: 8px 0;
	color: #57606a;
}

/* hr */
.tt-editor-host .ProseMirror hr {
	border: none;
	border-top: 1px solid #d0d7de;
	margin: 1.2em 0;
}

/* code */
.tt-editor-host .ProseMirror code {
	background: rgba(135, 131, 120, 0.15);
	color: #eb5757;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 0.88em;
}
.tt-editor-host .ProseMirror pre {
	background: #0d1117;
	color: #e6edf3;
	padding: 12px 14px;
	border-radius: 6px;
	font-family: "SFMono-Regular", Consolas, monospace;
	font-size: 0.9em;
	line-height: 1.5;
	overflow-x: auto;
}
.tt-editor-host .ProseMirror pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }

/* link */
.tt-editor-host .ProseMirror a {
	color: #1f6feb;
	text-decoration: underline;
	text-underline-offset: 2px;
	cursor: pointer;
}

/* mark / highlight */
.tt-editor-host .ProseMirror mark {
	background-color: #fff3a3;
	border-radius: 2px;
	padding: 0 2px;
}

/* mention */
.tt-editor-host .ProseMirror .mention {
	background: #f1f5fb;
	color: #2d6cdf;
	padding: 1px 6px;
	border-radius: 3px;
	font-weight: 500;
}

/* placeholder */
.tt-editor-host .ProseMirror p.is-editor-empty:first-child::before,
.tt-editor-host .ProseMirror .is-empty::before {
	content: attr(data-placeholder);
	color: #adb5bd;
	float: left;
	height: 0;
	pointer-events: none;
}

/* table */
.tt-editor-host .ProseMirror table {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	margin: 0;
}
.tt-editor-host .ProseMirror table td,
.tt-editor-host .ProseMirror table th {
	min-width: 1em;
	border: 1px solid #d0d7de;
	padding: 6px 8px;
	vertical-align: top;
	position: relative;
}
.tt-editor-host .ProseMirror table th { background: #f6f8fa; font-weight: 600; text-align: left; }

/* image */
.tt-editor-host .ProseMirror img {
	max-width: 100%;
	height: auto;
}
.tt-editor-host .ProseMirror img.ProseMirror-selectednode {
	outline: 2px solid #2d6cdf;
}

/* ===== Bubble menu ===== */
.tt-bubble {
	position: absolute;
	z-index: 9998;
	display: flex;
	gap: 2px;
	background: #2c2c2c;
	border-radius: 6px;
	padding: 4px;
	box-shadow: 0 4px 12px rgba(15, 15, 15, 0.4);
	visibility: hidden;
}
.tt-bubble button {
	background: transparent;
	border: none;
	color: #ddd;
	padding: 5px 9px;
	font-size: 13px;
	border-radius: 3px;
	cursor: pointer;
	min-width: 28px;
	line-height: 1;
}
.tt-bubble button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.tt-bubble button.is-active { background: rgba(255, 255, 255, 0.22); color: #fff; }
.tt-bubble .tt-sep { width: 1px; background: #555; margin: 2px 4px; }

/* ===== Readonly 모드 ===== */
.tt-wrap.tt-readonly {
	background: #fafbfc;
	border-color: #e1e4e8;
}
.tt-wrap.tt-readonly .tt-toolbar { display: none; }