/* 순수 HTML 본문 문서의 기본 배치와 기존 에디터 서식. */
@font-face {
	font-family: 'Old Hangul';
	src: url('/fonts/NotoSansCJKkr-OldHangul.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	ascent-override: 92%;
	descent-override: 22%;
	line-gap-override: 0%;
	size-adjust: 100%;
	unicode-range: U+1100-11FF, U+A960-A97F, U+D7B0-D7FF, U+3165-318C, U+318E, U+302E-302F;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: 'Pretendard Variable', Pretendard, sans-serif;
	color: #1f2937;
}

h1,
h2,
h3,
h4,
p,
blockquote,
figure,
pre,
dl,
dd,
ul,
ol {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4 {
	font-weight: inherit;
}

main {
	max-width: 840px;
	margin: 0 auto;
	padding: 24px 20px 64px;
}

.literary-title {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 24px;
	overflow-wrap: anywhere;
}

.literary-title h1 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.375;
	color: #1d1d1d;
}

.literary-title p {
	font-size: 14px;
	line-height: 1.5;
	color: #555;
}

@media (min-width: 1024px) {
	main {
		max-width: 800px;
		padding: 48px 0 96px;
	}
	.literary-title {
		margin-bottom: 40px;
	}
	.literary-title h1 {
		font-size: 28px;
	}
	.literary-title p {
		font-size: 16px;
	}
}

#literary-content {
	font-size: 16px;
	line-height: 1.6;
	color: #1f2937;
	overflow-wrap: break-word;
	word-break: break-word;
	font-family: 'Old Hangul', 'Pretendard Variable', Pretendard, sans-serif;
}

#literary-content p,
#literary-content h1,
#literary-content h2,
#literary-content h3,
#literary-content h4 {
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: normal;
	min-width: 1px;
	min-height: 1rem;
	/* margin-bottom: 0.2rem; */
}

/* #literary-content h1 {
  font-size: 3rem;
  font-weight: bold;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.4rem;
}

#literary-content h2 {
  font-size: 2.5rem;
  font-weight: bold;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}

#literary-content h3 {
  font-size: 2rem;
  font-weight: bold;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
}

#literary-content h4 {
  font-size: 1.75rem;
  font-weight: bold;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
} */

#literary-content ul {
	list-style: disc;
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
}

#literary-content ol {
	list-style: decimal;
	margin-left: 1.5rem;
	margin-bottom: 0.5rem;
}

#literary-content li {
	margin-bottom: 0.25rem;
}

#literary-content blockquote {
	border-left: 4px solid #d1d5db;
	padding-left: 1rem;
	margin-left: 0;
	margin-right: 0;
	color: #6b7280;
	font-style: italic;
	margin-bottom: 0.5rem;
}

#literary-content code {
	background-color: #f3f4f6;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: 'Courier New', monospace;
}

#literary-content pre {
	background-color: #1f2937;
	color: #f3f4f6;
	padding: 1rem;
	border-radius: 0.5rem;
	overflow-x: auto;
	margin-bottom: 0.5rem;
}

#literary-content pre code {
	background-color: transparent;
	color: inherit;
	padding: 0;
	border-radius: 0;
}

/* Table Styles */
#literary-content table {
	border-collapse: collapse;
	margin: 0.5rem 0;
	width: 100%;
}

#literary-content table td,
#literary-content table th {
	border: 1px solid #d1d5db;
	padding: 0.5rem;
	position: relative;
}

#literary-content table th {
	background-color: #f3f4f6;
	font-weight: normal;
}

#literary-content table p {
	margin: 0;
}

/* Table Resize Handle (TipTap) */
#literary-content .tableWrapper {
	overflow-x: auto;
}

#literary-content .resize-cursor {
	cursor: col-resize;
}

#literary-content table .selectedCell::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(200, 200, 255, 0.4);
	pointer-events: none;
	z-index: 2;
}

#literary-content table .column-resize-handle {
	position: absolute;
	right: -2px;
	top: 0;
	bottom: -2px;
	width: 4px;
	background-color: #3b82f6;
	pointer-events: none;
}

/* Text Alignment */
#literary-content p {
	text-align: left;
	white-space: pre-wrap;
}

#literary-content p[style*='text-align: center'],
#literary-content h1[style*='text-align: center'],
#literary-content h2[style*='text-align: center'],
#literary-content h3[style*='text-align: center'] {
	text-align: center;
}

#literary-content p[style*='text-align: right'],
#literary-content h1[style*='text-align: right'],
#literary-content h2[style*='text-align: right'],
#literary-content h3[style*='text-align: right'] {
	text-align: right;
}

#literary-content p[style*='text-align: justify'],
#literary-content h1[style*='text-align: justify'],
#literary-content h2[style*='text-align: justify'],
#literary-content h3[style*='text-align: justify'] {
	text-align: justify;
}

/* Image Styles */
#literary-content img {
	max-width: 100%;
	height: auto;
	border-radius: 0.375rem;
}

/* width 속성이 있는 이미지는 max-width 제한만 적용 */
#literary-content img[width] {
	max-width: 100%;
}

/* Image Alignment Styles */
/* 왼쪽 정렬: 텍스트가 이미지 오른쪽에 배치 */
#literary-content img[data-align='left'] {
	float: left;
	margin-right: 1rem;
	margin-bottom: 0.5rem;
}

/* 중앙 정렬: 이미지가 블록 요소로 중앙 배치 */
#literary-content img[data-align='center'] {
	display: block;
	margin: 1rem auto;
}

/* 오른쪽 정렬: 텍스트가 이미지 왼쪽에 배치 */
#literary-content img[data-align='right'] {
	float: right;
	margin-left: 1rem;
	margin-bottom: 0.5rem;
}

/* 이미지를 포함한 paragraph 정렬 */
#literary-content p[style*='text-align: left'] {
	text-align: left;
}

#literary-content p[style*='text-align: center'] {
	text-align: center;
}

#literary-content p[style*='text-align: right'] {
	text-align: right;
}

/* float 해제 */
#literary-content p::after {
	content: '';
	display: table;
	clear: both;
}

/* Link Styles */
#literary-content a {
	color: #2563eb;
	text-decoration: underline;
	cursor: pointer;
}

#literary-content a:hover {
	color: #1d4ed8;
}

/* Anchor Link Smooth Scroll */
html {
	scroll-behavior: smooth;
	/* 본문 페이지에는 고정 헤더가 없다. 대상이 화면 끝에 붙지 않을 만큼만 띄운다. */
	scroll-padding-top: 24px;
}

/* Bidirectional Link Styles */
#literary-content a.bidirectional-link {
	text-decoration: underline !important;
	color: #2563eb !important;
	cursor: pointer;
	padding: 0 2px;
	transition: background-color 0.2s ease;
	text-decoration: none;
	color: inherit;
	scroll-margin-top: 24px;
}

#literary-content a.bidirectional-link:hover {
	background-color: #fde68a;
}

#literary-content .bidirectional-link:target {
	background-color: #fde68a;
	animation: bidirectional-link-pulse 2s ease-out;
}

@keyframes bidirectional-link-pulse {
	0% {
		background-color: #fbbf24;
		box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.4);
	}

	100% {
		background-color: #fef3c7;
		box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
	}
}

/* Footnote Styles */
#literary-content .footnote {
	font-size: 0.8em;
	color: #2563eb;
	font-weight: 600;
	cursor: pointer;
	vertical-align: super;
	line-height: 0;
}

#literary-content .footnote:hover {
	text-decoration: underline;
}

#literary-content .literary-notes-title {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid #d1d5db;
	font-weight: bold;
}

#literary-content .literary-note-body {
	margin-top: 0.75rem;
}

/* Image Caption Styles */
#literary-content .image-figure {
	margin: 1rem 0;
}

#literary-content .image-caption {
	text-align: center;
	font-size: 0.875rem;
	color: #6b7280;
	margin-top: 0.5rem;
	font-style: italic;
}

/* Horizontal Rule Styles */
#literary-content hr {
	border: none;
	border-top: 1px solid #d1d5db;
	margin: 2rem 0;
}

/* 장식적인 구분선 */
#literary-content hr.decorative {
	border: none;
	text-align: center;
	margin: 2rem auto;
}

#literary-content hr.decorative::before {
	content: '* * *';
	color: #9ca3af;
	letter-spacing: 0.5rem;
}

/* Drop Cap Styles */
#literary-content p[data-drop-cap] {
	text-indent: 0 !important;
	overflow: hidden;
}

#literary-content p[data-drop-cap]::first-letter {
	float: left;
	font-size: 4.5rem;
	line-height: 0.75;
	padding-right: 0.75rem;
	padding-top: 0.1rem;
	font-weight: bold;
	color: #1f2937;
	font-family: Georgia, 'Times New Roman', serif;
}