@charset "utf-8";

/* ========================================
   hooks - Orange Theme Tistory Skin
   Based on temp.html structure
   ======================================== */

/* CSS Variables */
:root {
	/* Orange Color Palette */
	--color-primary: #f76707;
	--color-primary-dark: #e8590c;
	--color-primary-light: #fd7e14;
	--color-primary-bg: #fff4e6;

	/* Neutral Colors */
	--color-text: #212529;
	--color-text-muted: #868e96;
	--color-bg: #ffffff;
	--color-bg-alt: #f8f9fa;
	--color-border: #e9ecef;

	/* Typography - 머니스토리 스타일 벤치마킹 */
	--font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui,
		'Malgun Gothic', sans-serif;
	--text-xs: 0.813rem; /* 13px */
	--text-sm: 0.938rem; /* 15px */
	--text-base: 1.063rem; /* 17px */
	--text-lg: 1.125rem; /* 18px */
	--text-xl: 1.375rem; /* 22px */
	--text-2xl: 1.625rem; /* 26px */
	--text-3xl: 1.875rem; /* 30px */
	--text-4xl: 2.25rem; /* 36px */

	/* Spacing */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-12: 3rem;

	/* Layout */
	--max-width: 1600px;
	--sidebar-width: 320px;
	--content-width: 1200px;
	--radius: 8px;
	--radius-lg: 12px;
	--shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
	--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode */
[data-theme='dark'] {
	--color-text: #e9ecef;
	--color-text-muted: #adb5bd;
	--color-bg: #1a1a2e;
	--color-bg-alt: #16213e;
	--color-border: #2d3748;
	--color-primary-bg: rgba(247, 103, 7, 0.15);
}

/* Reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	min-height: 100%;
}

body {
	font-family: var(--font-family);
	font-size: var(--text-base);
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: transparent;
}

hr {
	display: none;
}

/* Accessibility */
#acc-nav {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

#acc-nav a:focus {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: var(--space-3);
	background: var(--color-primary);
	color: white;
	text-align: center;
	z-index: 9999;
	clip: auto;
	height: auto;
}

/* ========================================
   Header
   ======================================== */
#header {
	position: sticky;
	top: 0;
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	z-index: 100;
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.95);
}

[data-theme='dark'] #header {
	background: rgba(26, 26, 46, 0.95);
}

#header .inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 var(--space-6);
	height: 64px;
}

#header h1 {
	font-size: var(--text-xl);
	font-weight: 700;
}

#header h1 a {
	color: var(--color-primary);
	transition: all var(--transition);
}

#header h1 a:hover {
	opacity: 0.8;
}

#header h1 img {
	height: 32px;
	width: auto;
}

/* Header Right */
.header-right {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* Header Search */
.header-search {
	display: flex;
	align-items: center;
	background: var(--color-bg-alt);
	border-radius: 20px;
	overflow: hidden;
	transition: all var(--transition);
}

.header-search input {
	width: 180px;
	padding: var(--space-2) var(--space-4);
	border: none;
	background: transparent;
	font-size: var(--text-sm);
	color: var(--color-text);
	outline: none;
}

.header-search input::placeholder {
	color: var(--color-text-muted);
}

.header-search button {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--color-text-muted);
	transition: all var(--transition);
}

.header-search button:hover {
	color: var(--color-primary);
}

/* Theme Button */
.btn-theme {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-alt);
	border-radius: 50%;
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	transition: all var(--transition);
}

.btn-theme:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
	transform: rotate(15deg);
}

/* Mobile Menu */
#header .mobile-menu {
	display: none;
	width: 40px;
	height: 40px;
	font-size: 0;
}

#header .mobile-menu span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-text);
	margin: 0 auto;
	position: relative;
	transition: all var(--transition);
}

#header .mobile-menu span::before,
#header .mobile-menu span::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--color-text);
	transition: all var(--transition);
}

#header .mobile-menu span::before {
	top: -6px;
}

#header .mobile-menu span::after {
	top: 6px;
}

#header .mobile-menu.active span {
	background: transparent;
}

#header .mobile-menu.active span::before {
	top: 0;
	transform: rotate(45deg);
}

#header .mobile-menu.active span::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Navigation */
#gnb ul {
	display: flex;
	gap: var(--space-2);
}

#gnb ul li a {
	display: block;
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	border-radius: var(--radius);
	transition: all var(--transition);
}

#gnb ul li a:hover,
#gnb ul li.selected a {
	color: var(--color-primary);
	background: var(--color-primary-bg);
}

/* ========================================
   Container Layout
   ======================================== */
.container {
	display: flex;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: var(--space-8) var(--space-6);
	gap: var(--space-8);
}

#content {
	flex: 1;
	min-width: 0;
}

#aside {
	width: var(--sidebar-width);
	flex-shrink: 0;
}

/* ========================================
   Cover Sections (Home)
   ======================================== */
.cover-slider {
	margin-bottom: var(--space-8);
	border-radius: var(--radius);
	overflow: hidden;
}

.cover-slider ul {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}

.cover-slider li {
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: 400px;
	background-size: cover;
	background-position: center;
	position: relative;
}

.cover-slider li::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.cover-slider .text-box {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-8);
	color: white;
}

.cover-slider .title {
	display: block;
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

.cover-slider .title em {
	display: block;
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--color-primary-light);
	margin-bottom: var(--space-2);
	font-style: normal;
}

.cover-slider .btn {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 500;
}

/* Cover Thumbnail Lists */
.cover-thumbnail-list-1,
.cover-thumbnail-list-2 {
	margin-bottom: var(--space-8);
}

.cover-thumbnail-list-1 > h2,
.cover-thumbnail-list-2 > h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
}

.cover-thumbnail-list-1 ul,
.cover-thumbnail-list-2 ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: var(--space-4);
}

.cover-thumbnail-list-1 li a,
.cover-thumbnail-list-2 li a {
	display: block;
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: all var(--transition);
}

.cover-thumbnail-list-1 li a:hover,
.cover-thumbnail-list-2 li a:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.cover-thumbnail-list-1 .thum,
.cover-thumbnail-list-2 .thum {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.cover-thumbnail-list-1 .thum img,
.cover-thumbnail-list-2 .thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}

.cover-thumbnail-list-1 li a:hover .thum img,
.cover-thumbnail-list-2 li a:hover .thum img {
	transform: scale(1.05);
}

.cover-thumbnail-list-1 .title,
.cover-thumbnail-list-2 .title {
	display: block;
	padding: var(--space-4);
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cover-thumbnail-list-2 .excerpt {
	display: block;
	padding: 0 var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cover-thumbnail-list-2 .more {
	display: block;
	padding: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-primary);
	font-weight: 500;
}

/* Cover Special Contents */
.cover-special-contents {
	margin-bottom: var(--space-8);
}

.cover-special-contents li {
	display: flex;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	overflow: hidden;
}

.cover-special-contents .thum {
	flex: 0 0 50%;
}

.cover-special-contents .thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cover-special-contents .box {
	flex: 1;
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cover-special-contents .category {
	font-size: var(--text-sm);
	color: var(--color-primary);
	font-weight: 500;
	margin-bottom: var(--space-2);
}

.cover-special-contents .title {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: var(--space-3);
}

.cover-special-contents .excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.cover-special-contents .btn {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius);
	font-size: var(--text-sm);
	font-weight: 500;
	align-self: flex-start;
}

/* Cover Wide Panel */
.cover-wide-panel {
	position: relative;
	margin-bottom: var(--space-8);
	border-radius: var(--radius);
	overflow: hidden;
	min-height: 300px;
}

.cover-wide-panel .bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}

.cover-wide-panel .bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.cover-wide-panel .box {
	position: relative;
	padding: var(--space-12);
	color: white;
	text-align: center;
}

.cover-wide-panel .category {
	font-size: var(--text-sm);
	color: var(--color-primary-light);
	margin-bottom: var(--space-2);
}

.cover-wide-panel h2 {
	font-size: var(--text-3xl);
	font-weight: 700;
	margin-bottom: var(--space-3);
}

.cover-wide-panel p {
	margin-bottom: var(--space-4);
	opacity: 0.9;
}

.cover-wide-panel .btn {
	display: inline-block;
	padding: var(--space-3) var(--space-6);
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius);
	font-weight: 500;
}

/* ========================================
   Post List Header
   ======================================== */
.post-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
	border-bottom: 2px solid var(--color-primary);
}

.post-header h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.post-header h2::before {
	content: '📁';
}

.list-type {
	display: flex;
	gap: var(--space-2);
}

.list-type button {
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.list-type button:hover,
.list-type button.active {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-bg);
}

/* ========================================
   Post Items (Article List)
   ======================================== */
.inner {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-6);
}

/* Post Item */
.post-item {
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	transition: all var(--transition);
}

.post-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
}

.post-item a {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.post-item .thum {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.post-item .thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}

.post-item:hover .thum img {
	transform: scale(1.05);
}

.post-item .title {
	display: block;
	padding: var(--space-4) var(--space-4) var(--space-2);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.post-item .excerpt {
	display: block;
	padding: 0 var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.post-item .more {
	display: block;
	padding: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-primary);
	font-weight: 500;
}

/* Post Meta Info (작성일, 댓글수) */
.post-item .post-meta-info {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

.post-item .post-meta-info .meta-date,
.post-item .post-meta-info .meta-comments {
	display: flex;
	align-items: center;
	gap: 4px;
}

.post-item .post-meta-info .meta-comments i {
	color: var(--color-primary);
	font-size: 0.75rem;
}

.post-item .post-meta-info .meta-date i {
	color: var(--color-text-muted);
	font-size: 0.75rem;
}

/* NEW Badge */
.badge-new {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-1) var(--space-2);
	background: linear-gradient(135deg, #ff6b6b, #ee5a5a);
	color: white;
	font-size: var(--text-xs);
	font-weight: 700;
	border-radius: 4px;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(238, 90, 90, 0.4);
}

.post-item .thum {
	position: relative;
}

/* ========================================
   Article Detail (Permalink)
   ======================================== */
/* 상세 페이지 컨테이너 - 그리드에서 벗어나 전체 너비 사용 */
.hgroup,
.entry-content,
.tags:not(#aside .tags),
.related-articles,
.protected_form,
.tt_comment_cont,
.tt-comment-cont,
.tt_wrap_cmt,
.tt-wrap-cmt,
.commentWrite,
.comment-list,
.rp-area,
[id*='comment'],
[class*='comment']:not(.post-item *),
[class*='rp_'],
[class*='cmt'],
[class*='reply']:not(.post-item *) {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	display: block !important;
}

.hgroup {
	max-width: var(--content-width);
	margin: 0 auto var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.hgroup .category {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--color-primary-bg);
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
}

.hgroup h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: var(--space-4);
	word-break: keep-all;
	letter-spacing: -0.02em;
}

.hgroup .post-meta {
	display: flex;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.hgroup .post-meta span {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* Entry Content */
.entry-content {
	max-width: var(--content-width);
	margin: 0 auto;
	font-size: var(--text-base);
	line-height: 1.8;
	color: var(--color-text);
	word-break: keep-all;
	letter-spacing: -0.01em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin: var(--space-8) 0 var(--space-4);
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
	letter-spacing: -0.02em;
}

.entry-content h2 {
	font-size: var(--text-2xl);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
	margin-top: var(--space-12);
}

.entry-content h3 {
	font-size: var(--text-xl);
	color: var(--color-text);
}

.entry-content h4 {
	font-size: var(--text-lg);
	font-weight: 600;
}

.entry-content p {
	margin-bottom: var(--space-4);
	line-height: 1.85;
}

/* 강조 텍스트 */
.entry-content strong,
.entry-content b {
	font-weight: 700;
	color: var(--color-text);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all var(--transition);
}

.entry-content a:hover {
	color: var(--color-primary-dark);
	text-decoration-thickness: 2px;
}

.entry-content img {
	border-radius: var(--radius-lg);
	margin: var(--space-6) 0;
	max-width: 100%;
	height: auto;
}

.entry-content hr {
	margin: var(--space-12) 0;
	border: none;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.entry-content ul,
.entry-content ol {
	margin: var(--space-4) 0;
	padding-left: var(--space-6);
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: var(--space-2);
	line-height: 1.8;
	padding-left: var(--space-1);
}

.entry-content li::marker {
	color: var(--color-primary);
}

.entry-content li strong {
	color: var(--color-text);
}

.entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-6);
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-bg);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--text-base);
	font-style: normal;
	color: var(--color-text);
	line-height: 1.8;
}

.entry-content blockquote strong {
	color: var(--color-primary-dark);
}

.entry-content pre,
.entry-content code {
	font-family: 'Fira Code', monospace;
	font-size: var(--text-sm);
}

.entry-content code {
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg-alt);
	border-radius: 4px;
}

.entry-content pre {
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: var(--radius);
	overflow-x: auto;
}

.entry-content pre code {
	padding: 0;
	background: transparent;
}

.entry-content table {
	width: 100%;
	margin: var(--space-6) 0;
	border-collapse: collapse;
	font-size: var(--text-sm);
	border: 1px solid var(--color-border);
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
	line-height: 1.6;
}

.entry-content th {
	background: var(--color-bg-alt);
	font-weight: 600;
	color: var(--color-text);
}

.entry-content tr:hover {
	background: var(--color-bg-alt);
}

.entry-content tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}

[data-theme='dark'] .entry-content tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

/* Tags (in article) */
#content > .inner .tags,
.entry-content + .tags {
	max-width: var(--content-width);
	margin: var(--space-8) auto;
}

.tags h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.tags .items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tags .items a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.tags .items a:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

/* Related Articles */
.related-articles {
	max-width: var(--content-width);
	margin: var(--space-8) auto;
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

.related-articles h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.related-articles h2 strong {
	color: var(--color-primary);
}

.related-articles ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-4);
}

.related-articles li a {
	display: block;
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all var(--transition);
}

.related-articles li a:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.related-articles .thum {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--color-border);
}

.related-articles .thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-articles .title {
	display: block;
	padding: var(--space-3);
	font-size: var(--text-sm);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.post-item .excerpt {
	display: block;
	padding: 0 var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1;
}

.post-item .more {
	display: block;
	padding: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-primary);
	font-weight: 500;
}

/* 상세 페이지 추가 그리드 해제 (중복 방지용) */

.hgroup {
	max-width: var(--content-width);
	margin: 0 auto var(--space-8);
	padding-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.hgroup .category {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background: var(--color-primary-bg);
	color: var(--color-primary);
	font-size: var(--text-sm);
	font-weight: 500;
	border-radius: var(--radius);
	margin-bottom: var(--space-3);
}

.hgroup h1 {
	font-size: var(--text-3xl);
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: var(--space-4);
	word-break: keep-all;
	letter-spacing: -0.02em;
}

.hgroup .post-meta {
	display: flex;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.hgroup .post-meta span {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* Entry Content */
.entry-content {
	max-width: var(--content-width);
	margin: 0 auto;
	font-size: var(--text-base);
	line-height: 1.8;
	color: var(--color-text);
	word-break: keep-all;
	letter-spacing: -0.01em;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	margin: var(--space-8) 0 var(--space-4);
	font-weight: 700;
	line-height: 1.3;
}

.entry-content h2 {
	font-size: var(--text-2xl);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
}

.entry-content h3 {
	font-size: var(--text-xl);
}

.entry-content p {
	margin-bottom: var(--space-4);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: all var(--transition);
}

.entry-content a:hover {
	color: var(--color-primary-dark);
	text-decoration-thickness: 2px;
}

.entry-content img {
	border-radius: var(--radius-lg);
	margin: var(--space-6) 0;
	max-width: 100%;
	height: auto;
}

.entry-content hr {
	margin: var(--space-12) 0;
	border: none;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

.entry-content ul,
.entry-content ol {
	margin: var(--space-4) 0;
	padding-left: var(--space-6);
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-bottom: var(--space-2);
	line-height: 1.8;
	padding-left: var(--space-1);
}

.entry-content li::marker {
	color: var(--color-primary);
}

.entry-content li strong {
	color: var(--color-text);
}

.entry-content blockquote {
	margin: var(--space-6) 0;
	padding: var(--space-4) var(--space-6);
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-bg);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-size: var(--text-base);
	font-style: normal;
	color: var(--color-text);
	line-height: 1.8;
}

.entry-content blockquote strong {
	color: var(--color-primary-dark);
}

.entry-content pre,
.entry-content code {
	font-family: 'Fira Code', monospace;
	font-size: var(--text-sm);
}

.entry-content code {
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg-alt);
	border-radius: 4px;
}

.entry-content pre {
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: #1e1e1e;
	color: #d4d4d4;
	border-radius: var(--radius);
	overflow-x: auto;
}

.entry-content pre code {
	padding: 0;
	background: transparent;
}

.entry-content table {
	width: 100%;
	margin: var(--space-6) 0;
	border-collapse: collapse;
	font-size: var(--text-sm);
	border: 1px solid var(--color-border);
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: left;
	line-height: 1.6;
}

.entry-content th {
	background: var(--color-bg-alt);
	font-weight: 600;
	color: var(--color-text);
}

.entry-content tr:hover {
	background: var(--color-bg-alt);
}

.entry-content tbody tr:nth-child(even) {
	background: rgba(0, 0, 0, 0.02);
}

[data-theme='dark'] .entry-content tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

/* Tags (in article) */
#content > .inner .tags,
.entry-content + .tags {
	max-width: var(--content-width);
	margin: var(--space-8) auto;
}

.tags h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.tags .items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.tags .items a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.tags .items a:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

/* Related Articles */
.related-articles {
	max-width: var(--content-width);
	margin: var(--space-8) auto;
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.related-articles h2 {
	font-size: var(--text-lg);
	font-weight: 600;
	margin-bottom: var(--space-4);
}

.related-articles h2 strong {
	color: var(--color-primary);
}

.related-articles ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-4);
}

.related-articles li a {
	display: block;
	background: var(--color-bg);
	border-radius: var(--radius);
	overflow: hidden;
	transition: all var(--transition);
}

.related-articles li a:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}

.related-articles .thum {
	display: block;
	aspect-ratio: 16/10;
	overflow: hidden;
	background: var(--color-border);
}

.related-articles .thum img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-articles .title {
	display: block;
	padding: var(--space-3);
	font-size: var(--text-sm);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Protected Form */
.protected_form {
	max-width: 400px;
	margin: var(--space-8) auto;
	padding: var(--space-8);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	text-align: center;
}

.protected_form p {
	margin-bottom: var(--space-4);
	color: var(--color-text-muted);
}

.protected_form input {
	width: 100%;
	padding: var(--space-3);
	margin-bottom: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	font-size: var(--text-base);
}

.protected_form .btn {
	width: 100%;
	padding: var(--space-3);
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius);
	font-weight: 500;
}

/* ========================================
   Tag Page
   ======================================== */
.hgroup.tag h2 {
	font-size: var(--text-2xl);
	font-weight: 700;
	margin-bottom: var(--space-4);
}

.tags.section {
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

.tags.section .items a {
	font-size: var(--text-base);
	padding: var(--space-3) var(--space-4);
}

/* ========================================
   Guestbook
   ======================================== */
.comments.guest {
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

/* ========================================
   Pagination
   ======================================== */
.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.pagination a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.pagination a:hover,
.pagination a.selected {
	color: var(--color-primary);
	border-color: var(--color-primary);
	background: var(--color-primary-bg);
}

.pagination a.prev,
.pagination a.next {
	font-weight: 500;
}

.pagination a.no_more {
	opacity: 0.3;
	pointer-events: none;
}

/* ========================================
   Sidebar
   ======================================== */
#aside .inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Profile Card */
.profile-card {
	background: var(--color-bg);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	text-align: center;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
}

.profile-avatar {
	width: 80px;
	height: 80px;
	margin: 0 auto var(--space-4);
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--color-primary);
	box-shadow: 0 4px 12px rgba(247, 103, 7, 0.2);
}

.profile-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.profile-name {
	font-size: var(--text-lg);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-2);
}

.profile-desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: 1.5;
	margin-bottom: var(--space-4);
}

.profile-stats {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.profile-stats .stat {
	text-align: center;
}

.profile-stats .stat-value {
	display: block;
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-primary);
}

.profile-stats .stat-label {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	text-transform: uppercase;
}

#aside .sidebar-1,
#aside .sidebar-2,
#aside .sidebar-3 {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

#aside h2 {
	font-size: var(--text-base);
	font-weight: 600;
	color: var(--color-text);
	padding-bottom: var(--space-2);
	margin-bottom: var(--space-3);
	border-bottom: 2px solid var(--color-primary);
}

/* Posts Widget */
#aside .posts ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

#aside .posts li a {
	display: block;
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color var(--transition);
}

#aside .posts li a:hover {
	color: var(--color-primary);
}

/* Tags Widget */
#aside .tags .items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

#aside .tags .items a {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
	border-radius: 4px;
	transition: all var(--transition);
}

#aside .tags .items a:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

#aside .tags .more {
	display: block;
	margin-top: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-primary);
}

/* Search Widget */
#aside .search fieldset {
	display: flex;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	overflow: hidden;
}

#aside .search input {
	flex: 1;
	padding: var(--space-3);
	border: none;
	font-size: var(--text-sm);
}

#aside .search button {
	padding: 0 var(--space-4);
	background: var(--color-primary);
	color: white;
	font-size: var(--text-sm);
	font-weight: 500;
}

#aside .search .screen_out {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* Count Widget */
#aside .count {
	text-align: center;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

#aside .count .total {
	font-size: var(--text-3xl);
	font-weight: 700;
	color: var(--color-primary);
	margin-bottom: var(--space-2);
}

#aside .count ul {
	display: flex;
	justify-content: center;
	gap: var(--space-4);
}

#aside .count li {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

#aside .count strong {
	margin-right: var(--space-1);
}

/* ========================================
   Footer
   ======================================== */
#footer {
	margin-top: var(--space-12);
	padding: var(--space-8);
	background: var(--color-bg-alt);
	text-align: center;
}

.footer-nav {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.footer-nav a {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	font-weight: 500;
	transition: color var(--transition);
}

.footer-nav a:hover {
	color: var(--color-primary);
}

.footer-sep {
	color: var(--color-border);
	font-size: var(--text-sm);
}

#footer .copyright {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

#footer a {
	color: var(--color-primary);
}

#footer .admin {
	margin-left: var(--space-4);
}

/* ========================================
   Article Tags (상세 페이지 내 태그)
   ======================================== */
.article-tags {
	grid-column: 1 / -1 !important;
	width: 100% !important;
	max-width: var(--content-width);
	margin: var(--space-8) auto;
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

.article-tags h3 {
	font-size: var(--text-base);
	font-weight: 600;
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
}

.article-tags .tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.article-tags .tag-list a {
	display: inline-block;
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg);
	color: var(--color-primary);
	font-size: var(--text-sm);
	border-radius: var(--radius);
	transition: all var(--transition);
}

.article-tags .tag-list a:hover {
	background: var(--color-primary);
	color: white;
}

/* ========================================
   Comments
   ======================================== */
/* 댓글 Wrapper */
.comment-wrapper {
	grid-column: 1 / -1 !important;
	display: block !important;
	width: 100% !important;
	max-width: var(--content-width) !important;
	margin: var(--space-8) auto 0 !important;
}

.tt_comment_cont,
#content .comments,
[id*='comment'],
.commentWrite,
.comment-list,
.tt_box_total,
.tt_wrap_cmt,
.tt-comment-cont,
.tt-box-account,
.tt-area-write,
.rp-area,
[class*='rp_'],
[class*='cmt'],
[class*='reply'] {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
}

.tt_comment_cont,
#content .comments,
[id*='comment'] {
	margin-top: var(--space-6);
	padding: var(--space-6);
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
}

/* 댓글 내부 요소들 */
.tt_comment_cont *,
#content .comments *,
[id*='comment'] * {
	max-width: 100% !important;
}

/* 댓글 입력 폼 */
.tt_comment_cont textarea,
.commentWrite textarea,
[class*='cmt'] textarea {
	width: 100% !important;
	min-height: 100px;
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-bg-alt);
	resize: vertical;
}

/* 댓글 버튼 */
.tt_comment_cont button,
.tt_comment_cont .btn,
.commentWrite button {
	padding: var(--space-2) var(--space-4);
	background: var(--color-primary);
	color: white;
	border-radius: var(--radius);
	font-weight: 500;
	transition: all var(--transition);
}

.tt_comment_cont button:hover,
.commentWrite button:hover {
	background: var(--color-primary-dark);
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 1024px) {
	.container {
		flex-direction: column;
	}

	#aside {
		width: 100%;
	}

	#aside .inner {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.profile-card {
		flex: 1 1 100%;
	}

	#aside .sidebar-1,
	#aside .sidebar-2,
	#aside .sidebar-3 {
		flex: 1;
		min-width: 250px;
	}
}

@media (max-width: 768px) {
	:root {
		--space-6: 1rem;
		--space-8: 1.5rem;
	}

	#header .inner {
		padding: 0 var(--space-4);
	}

	#header .mobile-menu {
		display: block;
	}

	.header-right {
		gap: var(--space-2);
	}

	.header-search {
		display: none;
	}

	#gnb {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--color-bg);
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-4);
		box-shadow: var(--shadow-lg);
	}

	[data-theme='dark'] #gnb {
		background: var(--color-bg);
	}

	#gnb.active {
		display: block;
	}

	#gnb ul {
		flex-direction: column;
	}

	#gnb ul li a {
		padding: var(--space-3) var(--space-4);
	}

	.inner {
		grid-template-columns: 1fr;
	}

	.cover-slider li {
		min-height: 280px;
	}

	.cover-slider .title {
		font-size: var(--text-xl);
	}

	.cover-special-contents li {
		flex-direction: column;
	}

	.cover-special-contents .thum {
		flex: none;
		aspect-ratio: 16/9;
	}

	.hgroup h1 {
		font-size: var(--text-2xl);
	}

	#aside .inner {
		flex-direction: column;
	}

	.profile-card,
	#aside .sidebar-1,
	#aside .sidebar-2,
	#aside .sidebar-3 {
		min-width: 100%;
	}

	.profile-stats {
		gap: var(--space-6);
	}
}

/* ========================================
   Tistory Default Overrides & Editor Compatibility
   ======================================== */
.another_category {
	margin: var(--space-6) 0;
}

.container_postbtn {
	margin: var(--space-6) 0;
}

#tt-body-page .hgroup {
	border-bottom: none;
	margin-bottom: var(--space-4);
}

/* Tistory Editor Content */
.tt_article_useless_p_margin,
.contents_style {
	font-size: var(--text-base);
	line-height: 1.8;
	color: var(--color-text);
	word-break: keep-all;
	letter-spacing: -0.01em;
}

.tt_article_useless_p_margin p,
.contents_style p {
	margin-bottom: var(--space-4);
	line-height: 1.85;
}

/* 강조 텍스트 - 티스토리 에디터 */
.tt_article_useless_p_margin strong,
.tt_article_useless_p_margin b,
.contents_style strong,
.contents_style b {
	font-weight: 700;
	color: var(--color-text);
}

/* Tistory Headings - 머니스토리 스타일 */
[data-ke-size='size26'] {
	font-size: var(--text-2xl) !important;
	font-weight: 700;
	margin: var(--space-8) 0 var(--space-4);
	padding-bottom: var(--space-2);
	border-bottom: 2px solid var(--color-primary);
	letter-spacing: -0.02em;
}

[data-ke-size='size24'] {
	font-size: var(--text-xl) !important;
	font-weight: 700;
	margin: var(--space-6) 0 var(--space-3);
}

[data-ke-size='size23'] {
	font-size: var(--text-xl) !important;
	font-weight: 700;
	margin: var(--space-6) 0 var(--space-3);
}

[data-ke-size='size20'] {
	font-size: var(--text-lg) !important;
	font-weight: 600;
	margin: var(--space-4) 0 var(--space-2);
}

[data-ke-size='size18'] {
	font-size: var(--text-base) !important;
	font-weight: 500;
}

[data-ke-size='size16'] {
	font-size: var(--text-base) !important;
}

[data-ke-size='size14'] {
	font-size: var(--text-sm) !important;
}

/* Tistory Lists - 머니스토리 스타일 */
.contents_style ul,
.contents_style ol,
.tt_article_useless_p_margin ul,
.tt_article_useless_p_margin ol {
	margin: var(--space-4) 0 !important;
	padding-left: var(--space-6) !important;
}

.contents_style ul[data-ke-list-type],
.tt_article_useless_p_margin ul[data-ke-list-type] {
	list-style: disc !important;
}

.contents_style ul[data-ke-list-type='circle'],
.tt_article_useless_p_margin ul[data-ke-list-type='circle'] {
	list-style: circle !important;
}

.contents_style ol,
.tt_article_useless_p_margin ol {
	list-style: decimal !important;
}

.contents_style li,
.tt_article_useless_p_margin li {
	margin-bottom: var(--space-2) !important;
	line-height: 1.8;
	padding-left: var(--space-1);
}

.contents_style li::marker,
.tt_article_useless_p_margin li::marker {
	color: var(--color-primary);
}

.contents_style li strong,
.tt_article_useless_p_margin li strong {
	color: var(--color-text);
}

/* Tistory Code Blocks */
[data-ke-type='codeblock'],
.contents_style pre,
.tt_article_useless_p_margin pre {
	position: relative;
	margin: var(--space-6) 0 !important;
	padding: var(--space-4) !important;
	background: #1e1e1e !important;
	color: #d4d4d4 !important;
	border-radius: var(--radius) !important;
	overflow-x: auto;
	font-family: 'Fira Code', 'Consolas', monospace !important;
	font-size: var(--text-sm) !important;
	line-height: 1.5 !important;
}

[data-ke-type='codeblock'] code,
.contents_style pre code,
.tt_article_useless_p_margin pre code {
	background: transparent !important;
	padding: 0 !important;
	font-family: inherit !important;
}

/* Code block clipboard button */
[data-ke-type='codeblock'] .clipboard {
	position: absolute;
	top: var(--space-2);
	right: var(--space-2);
	padding: var(--space-2);
	background: rgba(255, 255, 255, 0.1);
	border: none;
	border-radius: 4px;
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--transition);
}

[data-ke-type='codeblock']:hover .clipboard {
	opacity: 1;
}

[data-ke-type='codeblock'] .clipboard svg {
	fill: #fff;
}

/* Syntax Highlighting */
.hljs-comment {
	color: #6a9955;
}
.hljs-keyword {
	color: #569cd6;
}
.hljs-string {
	color: #ce9178;
}
.hljs-function {
	color: #dcdcaa;
}
.hljs-number {
	color: #b5cea8;
}
.hljs-built_in {
	color: #4ec9b0;
}

/* Tistory Images */
.contents_style img,
.tt_article_useless_p_margin img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius);
	margin: var(--space-4) 0;
}

.contents_style figure,
.tt_article_useless_p_margin figure {
	margin: var(--space-6) 0;
	text-align: center;
}

.contents_style figcaption,
.tt_article_useless_p_margin figcaption {
	margin-top: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

/* Tistory Blockquote - 머니스토리 스타일 */
.contents_style blockquote,
.tt_article_useless_p_margin blockquote {
	margin: var(--space-6) 0 !important;
	padding: var(--space-4) var(--space-6) !important;
	border-left: 4px solid var(--color-primary) !important;
	background: var(--color-primary-bg) !important;
	border-radius: 0 var(--radius) var(--radius) 0 !important;
	font-size: var(--text-base) !important;
	font-style: normal;
	color: var(--color-text);
	line-height: 1.8;
}

.contents_style blockquote strong,
.tt_article_useless_p_margin blockquote strong {
	color: var(--color-primary-dark);
}

/* Tistory Table */
.contents_style table,
.tt_article_useless_p_margin table {
	width: 100%;
	margin: var(--space-6) 0;
	border-collapse: collapse;
}

.contents_style th,
.contents_style td,
.tt_article_useless_p_margin th,
.tt_article_useless_p_margin td {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
}

.contents_style th,
.tt_article_useless_p_margin th {
	background: var(--color-bg-alt);
	font-weight: 600;
}

/* Tistory Links */
.contents_style a,
.tt_article_useless_p_margin a {
	color: var(--color-primary);
	text-decoration: underline;
}

.contents_style a:hover,
.tt_article_useless_p_margin a:hover {
	text-decoration: none;
}

/* Tistory File Block */
.contents_style .fileblock,
.tt_article_useless_p_margin .fileblock {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	text-decoration: none !important;
}

/* Tistory More/Less */
.contents_style .moreless-content,
.tt_article_useless_p_margin .moreless-content {
	margin: var(--space-4) 0;
	padding: var(--space-4);
	background: var(--color-bg-alt);
	border-radius: var(--radius);
}

/* Tistory Video */
.contents_style iframe,
.tt_article_useless_p_margin iframe {
	max-width: 100%;
	margin: var(--space-4) 0;
	border-radius: var(--radius);
}

/* Tistory Horizontal Rule - 더 눈에 띄게 */
.contents_style hr,
.tt_article_useless_p_margin hr {
	display: block !important;
	margin: var(--space-12) 0;
	border: none;
	height: 3px;
	background: linear-gradient(
		90deg,
		transparent,
		var(--color-border),
		var(--color-primary-light),
		var(--color-border),
		transparent
	);
}

/* Inline code */
.contents_style code:not([class]),
.tt_article_useless_p_margin code:not([class]) {
	padding: var(--space-1) var(--space-2);
	background: var(--color-bg-alt);
	border-radius: 4px;
	font-family: 'Fira Code', monospace;
	font-size: 0.9em;
}

/* Bold, Italic, Underline */
.contents_style b,
.contents_style strong,
.tt_article_useless_p_margin b,
.tt_article_useless_p_margin strong {
	font-weight: 700;
}

.contents_style u,
.tt_article_useless_p_margin u {
	text-decoration: underline;
}

/* ========================================
   Management Dropdown (수정/삭제 버튼)
   ======================================== */
.management {
	position: relative;
	display: inline-block;
}

.management .btn_post_management,
.management > a,
.management > button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-bg-alt);
	border-radius: var(--radius);
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	cursor: pointer;
	transition: all var(--transition);
}

.management .btn_post_management:hover,
.management > a:hover,
.management > button:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

/* 드롭다운 메뉴 - 기본적으로 숨김 */
.management_popup,
.management .layer_post_management,
.management .management_layer,
.management ul,
.management .dropdown,
.management [class*='layer'],
.management [class*='popup'] {
	display: none !important;
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 100px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-lg);
	z-index: 100;
	overflow: hidden;
}

/* 호버 또는 active 시에만 표시 */
.management:hover .management_popup,
.management:hover .layer_post_management,
.management:hover .management_layer,
.management:hover ul,
.management:hover .dropdown,
.management:hover [class*='layer'],
.management:hover [class*='popup'],
.management.active .management_popup,
.management.active .layer_post_management,
.management.active .management_layer,
.management.active ul,
.management.active .dropdown,
.management.active [class*='layer'],
.management.active [class*='popup'],
.management_popup.active,
.layer_post_management.active,
.management_layer.active {
	display: block !important;
}

.management_popup a,
.management .layer_post_management a,
.management ul a {
	display: block;
	padding: var(--space-3) var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text);
	white-space: nowrap;
	transition: all var(--transition);
}

.management_popup a:hover,
.management .layer_post_management a:hover,
.management ul a:hover {
	background: var(--color-primary-bg);
	color: var(--color-primary);
}

/* 티스토리 기본 관리 버튼 - 호버시에만 표시 */
.area_etc .management_popup,
.post-header .management_popup,
.hgroup .management_popup,
.entry-content + .management_popup,
div.management_popup,
.layer_post_management,
[class*='management_popup'],
[class*='layer_post'] {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.management:hover .management_popup,
.management:hover .layer_post_management,
.management.active .management_popup,
.management.active .layer_post_management,
.management:focus-within .management_popup,
.management:focus-within .layer_post_management {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	pointer-events: auto !important;
}

/* 관리 버튼 자체 스타일 */
.management {
	position: relative;
	z-index: 10;
}