@charset "UTF-8";
/* 연한 보라색 테마 변수 */
:root { --primary-color: #8b7ab8; --primary-light: #b8a9d9; --primary-dark: #6b5b95; --accent-color: #f0ebf8; --background-color: #ffffff; --text-color: #2d2d2d; --text-light: #555555; --heading-color: #1a1a1a; --border-color: #e0d4f0; --card-shadow: 0 2px 8px rgba(139, 122, 184, 0.15); --gradient-bg: linear-gradient(135deg, #f8f6ff 0%, #ede7f6 100%); --card-bg-dark: #f8f5ff; --link-color: #6b5b95; --link-hover: #8b7ab8; /* 새로운 네비게이션 변수 */ --nav-bg: rgba(255, 255, 255, 0.95); --nav-text: #2d2d2d; --nav-hover: #8b7ab8; --nav-border: rgba(139, 122, 184, 0.1); --nav-shadow: 0 8px 32px rgba(139, 122, 184, 0.1); --glass-bg: rgba(255, 255, 255, 0.25); --glass-border: rgba(255, 255, 255, 0.18); /* 라이트모드 버튼 전용 변수 */ --button-text-color: #ffffff; --button-bg-gradient: linear-gradient(135deg, var(--primary-color), var(--primary-light)); --button-shadow: 0 4px 15px rgba(139, 122, 184, 0.3); --button-hover-gradient: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); --button-hover-shadow: 0 8px 25px rgba(139, 122, 184, 0.4); }

/* 다크 테마 */
[data-theme="dark"] { --primary-color: #b8a9d9; --primary-light: #d4c7f0; --primary-dark: #8b7ab8; --accent-color: #2d2542; --background-color: #1a1625; --text-color: #e8e8e8; --text-light: #b8b8b8; --heading-color: #ffffff; --border-color: #3d3551; --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); --gradient-bg: linear-gradient(135deg, #1a1625 0%, #2d2542 100%); --card-bg-dark: #211d2e; --link-color: #b8a9d9; --link-hover: #d4c7f0; --nav-bg: rgba(26, 22, 37, 0.95); --nav-text: #e8e8e8; --nav-hover: #b8a9d9; --nav-border: rgba(184, 169, 217, 0.1); --nav-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); --glass-bg: rgba(26, 22, 37, 0.25); --glass-border: rgba(184, 169, 217, 0.18); /* 다크모드 버튼 전용 변수 */ --button-text-color: #ffffff; --button-bg-gradient: linear-gradient(135deg, #4a3d6b, #6b5b95); --button-shadow: 0 4px 15px rgba(74, 61, 107, 0.5); --button-hover-gradient: linear-gradient(135deg, #5d4c7a, #7a6ba3); --button-hover-shadow: 0 8px 25px rgba(93, 76, 122, 0.6); }

html { scroll-padding-top: 5.75rem; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 기본 스타일 */
* { box-sizing: border-box; }

/* 모든 리스트 스타일 제거 */
ul, ol { list-style: none; list-style-type: none; margin: 0; padding: 0; }

li { list-style-type: none; }

body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; color: var(--text-color); background: var(--background-color); margin: 0; padding: 0; font-size: 16px; }

h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-weight: 600; line-height: 1.3; margin-top: 2rem; margin-bottom: 1rem; }

h1 { font-size: 2.5rem; }

h2 { font-size: 2rem; }

h3 { font-size: 1.5rem; }

/* 기본 링크 스타일 */
a { color: var(--link-color); text-decoration: none; transition: all 0.3s ease; font-weight: 500; }

a:hover { color: var(--link-hover); }

/* 버튼 스타일 링크들 */
.btn, .btn-primary, .category-list a, .page-link, .post-link { display: inline-block; padding: 10px 18px; background: var(--button-bg-gradient); color: var(--button-text-color) !important; text-decoration: none; border-radius: 25px; font-weight: 600; font-size: 14px; text-align: center; transition: all 0.3s ease; border: none; cursor: pointer; box-shadow: var(--button-shadow); text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

.btn:hover, .btn-primary:hover, .category-list a:hover, .page-link:hover, .post-link:hover { transform: translateY(-3px); box-shadow: var(--button-hover-shadow); background: var(--button-hover-gradient); color: var(--button-text-color) !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }

.btn:active, .btn-primary:active, .category-list a:active, .page-link:active, .post-link:active { transform: translateY(-1px); box-shadow: var(--button-shadow); }

.wrapper { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* 모던 헤더 스타일 */
.modern-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--nav-border); box-shadow: var(--nav-shadow); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

.modern-header.scrolled { background: var(--nav-bg); box-shadow: 0 4px 20px rgba(139, 122, 184, 0.15); }

.modern-header.hidden { transform: translateY(-100%); }

.navbar { position: relative; }

.nav-container { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 2rem; height: 70px; }

/* 브랜드 섹션 */
.nav-brand { display: flex; align-items: center; }

.brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--nav-text); transition: all 0.3s ease; }

.brand-link:hover { transform: scale(1.05); }

.brand-icon { display: flex; align-items: center; justify-content: center; }

.brand-text { font-size: 1.5rem; font-weight: 700; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* 메인 네비게이션 */
.nav-menu { display: flex; align-items: center; }

.nav-list { display: flex; align-items: center; gap: 0.5rem; list-style: none; list-style-type: none; margin: 0; padding: 0; }

.nav-item { position: relative; }

.nav-link { display: flex; align-items: center; gap: 8px; padding: 12px 20px; color: var(--nav-text); text-decoration: none; border-radius: 25px; font-weight: 500; font-size: 14px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; }

.nav-link::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); opacity: 0; transition: opacity 0.3s ease; border-radius: 25px; z-index: -1; }

.nav-link:hover::before { opacity: 1; }

.nav-link:hover { color: white; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 122, 184, 0.3); }

.nav-icon { font-size: 16px; }

.nav-text { font-weight: 600; }

/* 드롭다운 메뉴 */
.dropdown { position: relative; }

.dropdown-arrow { font-size: 10px; margin-left: 5px; transition: transform 0.3s ease; }

.dropdown.active .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 200px; background: var(--nav-bg); backdrop-filter: blur(20px); border: 1px solid var(--nav-border); border-radius: 15px; box-shadow: 0 10px 40px rgba(139, 122, 184, 0.2); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; padding: 8px; margin-top: 8px; }

.dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown-item { display: block; padding: 12px 16px; color: var(--nav-text); text-decoration: none; border-radius: 10px; font-size: 14px; font-weight: 500; transition: all 0.2s ease; }

.dropdown-item:hover { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: white; transform: translateX(5px); }

/* 네비게이션 유틸리티 */
.nav-utils { display: flex; align-items: center; gap: 16px; }

/* 검색 버튼 */
.search-btn { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--nav-text); cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); }

.search-btn:hover { background: var(--button-bg-gradient); color: var(--button-text-color); transform: scale(1.1); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }

/* 테마 토글 */
.theme-toggle { position: relative; width: 60px; height: 30px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 25px; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); padding: 2px; }

.theme-toggle-track { position: relative; width: 100%; height: 100%; }

.theme-toggle-thumb { position: absolute; top: 0; left: 0; width: 26px; height: 26px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 50%; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; font-size: 12px; }

.theme-toggle.dark .theme-toggle-thumb { transform: translateX(30px); }

.sun-icon, .moon-icon { position: absolute; transition: opacity 0.3s ease; }

.theme-toggle:not(.dark) .moon-icon, .theme-toggle.dark .sun-icon { opacity: 0; }

/* 소셜 링크 */
.social-links { display: flex; gap: 12px; }

.social-link { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--nav-text); border-radius: 50%; transition: all 0.3s ease; background: var(--glass-bg); border: 1px solid var(--glass-border); backdrop-filter: blur(10px); }

.social-link:hover { background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: white; transform: translateY(-2px); }

/* 모바일 토글 */
.mobile-toggle { display: none; flex-direction: column; gap: 4px; width: 30px; height: 30px; background: none; border: none; cursor: pointer; padding: 0; }

.hamburger-line { width: 100%; height: 3px; background: var(--nav-text); border-radius: 2px; transition: all 0.3s ease; }

.mobile-toggle.active .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }

.mobile-toggle.active .hamburger-line:nth-child(2) { opacity: 0; }

.mobile-toggle.active .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

/* 검색 오버레이 */
.search-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; }

.search-overlay.active { opacity: 1; visibility: visible; }

.search-container { position: relative; width: 90%; max-width: 600px; }

.search-box { display: flex; align-items: center; background: var(--nav-bg); border: 2px solid var(--primary-color); border-radius: 25px; padding: 4px; backdrop-filter: blur(20px); }

.search-input { flex: 1; background: none; border: none; padding: 16px 24px; font-size: 18px; color: var(--nav-text); outline: none; }

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

.search-submit { width: 50px; height: 50px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border: none; border-radius: 50%; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }

.search-submit:hover { transform: scale(1.1); }

.search-close { position: absolute; top: -60px; right: 0; background: none; border: none; color: white; font-size: 30px; cursor: pointer; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }

.search-close:hover { transform: scale(1.2); }

/* Footer 스타일 */
.site-footer { background: var(--card-bg-dark); border-top: 1px solid var(--border-color); padding: 40px 0; margin-top: 50px; color: var(--text-color); transition: all 0.3s ease; }

.footer-col-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }

.footer-col { margin-bottom: 0; }

.footer-col p { margin: 0; color: var(--text-light); font-size: 14px; }

.footer-brand { font-size: 1.1rem !important; font-weight: 700 !important; color: var(--heading-color) !important; margin-bottom: 0.4rem !important; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.footer-desc { margin-bottom: 1rem !important; line-height: 1.5; }

.footer-social { display: flex; gap: 1rem; flex-wrap: wrap; }

.footer-social-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-light); font-size: 13px; text-decoration: none; transition: color 0.3s ease; }

.footer-social-link:hover { color: var(--primary-color); }

.footer-nav { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

.footer-nav-link { color: var(--text-light); font-size: 14px; text-decoration: none; transition: color 0.3s ease; }

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

.footer-copy { font-size: 13px !important; }

.footer-col-2 { text-align: right; }

@media screen and (max-width: 768px) { .footer-col-wrapper { grid-template-columns: 1fr; gap: 15px; text-align: center; } .footer-col-2 { text-align: center; } }

/* 반응형 디자인 */
@media (max-width: 768px) { .nav-container { padding: 0 1rem; } .nav-menu { position: fixed; top: 70px; left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--nav-border); transform: translateY(-100%); transition: transform 0.3s ease; padding: 20px; } .nav-menu.active { transform: translateY(0); } .nav-list { flex-direction: column; gap: 16px; width: 100%; } .nav-item { width: 100%; } .nav-link { width: 100%; justify-content: center; padding: 16px 24px; } .mobile-toggle { display: flex; } .social-links { display: none; } .dropdown-menu { position: static; box-shadow: none; border: none; background: var(--glass-bg); margin-top: 12px; transform: none; opacity: 1; visibility: visible; display: none; } .dropdown.active .dropdown-menu { display: block; } }

/* 페이지 컨텐츠 여백 조정 */
body { padding-top: 70px; transition: background-color 0.3s ease, color 0.3s ease; }

.page-content { padding: 40px 0; min-height: calc(100vh - 200px); background: var(--background-color); color: var(--text-color); transition: all 0.3s ease; }

/* 메인 콘텐츠 레이아웃 */
.content-wrapper { display: block; }

.main-content { background: var(--background-color); padding: 30px; border-radius: 15px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); min-height: 500px; color: var(--text-color); transition: all 0.3s ease; width: 100%; max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; overflow: hidden; /* 콘텐츠가 삐져나가는 것을 방지 */ }

/* 다크모드에서 메인 콘텐츠 카드 배경 */
[data-theme="dark"] .main-content { background: var(--card-bg-dark); }

/* 포스트 페이지 전용 메인 콘텐츠 스타일 */
.main-content.post-page { padding: 40px 30px; max-width: 1400px; width: 100%; margin: 0 auto; }

@media (max-width: 768px) { .main-content.post-page { padding: 20px 15px; } }

.category-list, .recent-posts { list-style: none; margin: 0; padding: 0; }

.category-list li { margin-bottom: 12px; list-style-type: none; }

.category-list a { display: block; padding: 14px 18px; border-radius: 12px; font-size: 15px; font-weight: 600; transition: all 0.3s ease; color: white !important; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border: none; text-decoration: none; box-shadow: 0 4px 15px rgba(139, 122, 184, 0.3); text-align: center; }

.category-list a:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(139, 122, 184, 0.4); color: white !important; }

.category-list a::before { content: ""; margin-right: 8px; font-size: 16px; }

/* 카테고리 아이콘 스타일 */
.category-icon { color: var(--primary-color); font-weight: bold; margin-right: 0.5rem; display: inline-block; width: 1rem; text-align: center; }

.category-list li a { display: flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: 4px; transition: all 0.2s ease; }

.category-list li a:hover { background-color: var(--accent-color); color: var(--primary-color); }

.category-list li a:hover .category-icon { color: var(--primary-dark); transform: scale(1.1); }

/* 포스트 리스트 스타일 (기존 - 사용 안함) */
.post-list { display: none; /* 새로운 카드 스타일로 대체 */ margin: 0; padding: 0; list-style: none; list-style-type: none; }

.post-list > li { margin-bottom: 25px; padding: 25px; background: var(--background-color); border-radius: 12px; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); transition: all 0.3s ease; list-style-type: none; position: relative; overflow: hidden; color: var(--text-color); }

/* 다크모드에서 포스트 카드 배경 */
[data-theme="dark"] .post-list > li { background: var(--card-bg-dark); }

.post-list > li::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--primary-color); }

.post-list > li:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(177, 156, 217, 0.2); }

.post-list h2 { margin-top: 0; margin-bottom: 10px; font-size: 22px; font-weight: 600; }

.post-list .post-meta { font-size: 14px; color: var(--text-light); margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

.post-list .post-meta::before { content: '📅'; font-size: 16px; }

.post-link { display: inline-block; font-size: 18px; text-decoration: none; color: white !important; font-weight: 600; padding: 12px 20px; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 8px; transition: all 0.3s ease; margin-bottom: 10px; box-shadow: 0 4px 15px rgba(139, 122, 184, 0.3); }

.post-link:hover { background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(139, 122, 184, 0.4); color: white !important; }

.post-link:hover { color: var(--primary-color); text-decoration: none; }

.post-content { margin-bottom: 30px; line-height: 1.8; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; hyphens: auto; max-width: 100%; overflow: hidden; /* 콘텐츠가 삐져나가는 것을 방지 */ }

/* 텍스트 내용의 긴 URL이나 단어 처리 */
.post-content p, .post-content li, .post-content div { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }

/* 링크와 URL 처리 */
.post-content a { word-break: break-all; overflow-wrap: break-word; }

.post-content h1, .post-content h2, .post-content h3, .post-content h4 { margin-top: 35px; margin-bottom: 15px; color: var(--primary-dark); font-weight: 600; scroll-margin-top: 5.75rem; }

.post-content h1 { font-size: 32px; border-bottom: 3px solid var(--primary-light); padding-bottom: 10px; }

.post-content h2 { font-size: 26px; position: relative; padding-left: 20px; }

.post-content h2::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 20px; background: var(--primary-color); border-radius: 2px; }

.post-content h5, .post-content h6 { scroll-margin-top: 5.75rem; }

.post-content img { max-width: 100%; border-radius: 8px; box-shadow: var(--card-shadow); margin: 20px 0; }

/* 인라인 코드 스타일 */
.post-content code:not(pre code) { background: var(--accent-color); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; color: var(--primary-dark); font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace; word-break: break-all; overflow-wrap: anywhere; }

[data-theme="dark"] .post-content code:not(pre code) { background: #2d2542; color: #d4c7f0; }

/* 코드 블럭 컨테이너 (pre) 스타일 */
.post-content pre { background: transparent; border: none; border-radius: 0; padding: 0; overflow: visible; margin: 1.5rem 0; position: relative; max-width: 100%; width: 100%; }

/* 코드 블럭 내용 (pre code) 스타일 - VSCode 라이트 테마 */
.post-content pre code { background: #ffffff; color: #24292f; padding: 1.2rem; border-radius: 6px; font-size: 0.875rem; line-height: 1.6; display: block; border: 1px solid #d1d9e0; margin: 0; overflow-x: auto; font-family: 'Cascadia Code', 'SF Mono', Monaco, 'Roboto Mono', Consolas, 'Courier New', monospace; position: relative; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; tab-size: 4; max-width: 100%; width: 100%; box-sizing: border-box; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

[data-theme="dark"] .post-content pre code { background: #1e1e1e; color: #d4d4d4; border: 1px solid #3c3c3c; }

/* 페이지 타이틀과 헤딩 다크모드 강화 */
.page-title, .post-title { color: var(--heading-color); margin-bottom: 20px; font-weight: 700; transition: color 0.3s ease; }

article.post .post-title { /* sassc는 CSS min/clamp를 Sass 함수로 해석하므로 문자열로 출력 */ font-size: clamp(1.65rem, 2.5vw + 1rem, 2.35rem); line-height: 1.25; letter-spacing: -0.02em; margin-bottom: 1rem; }

.post-header { margin-bottom: 2rem; padding: 1.75rem 1.5rem 1.5rem; border-bottom: none; border-radius: 16px; background: linear-gradient(165deg, var(--accent-color) 0%, transparent 55%); border: 1px solid var(--border-color); box-shadow: var(--card-shadow); }

[data-theme="dark"] .post-header { background: linear-gradient(165deg, rgba(45, 37, 66, 0.6) 0%, transparent 60%); }

.post-back-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; font-weight: 600; color: var(--text-light); margin-bottom: 1rem; padding: 0.35rem 0; transition: color 0.2s ease, transform 0.2s ease; }

.post-back-link:hover { color: var(--primary-color); transform: translateX(-2px); }

.post-main article.post { max-width: 48rem; }

.post-meta--detail { flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin-bottom: 1rem; }

.post-meta--detail .post-meta-sep { color: var(--text-light); opacity: 0.7; user-select: none; }

.post-meta--detail .post-meta-item.reading-time { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; }

.post-meta--detail time { margin: 0; }

.post-excerpt { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); font-size: 1.05rem; line-height: 1.65; color: var(--text-light); }

.post-meta { color: var(--text-light); font-size: 14px; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }

.post-meta time { background: var(--accent-color); padding: 4px 12px; border-radius: 20px; font-weight: 500; color: var(--text-color); transition: all 0.3s ease; }

[data-theme="dark"] .post-meta time { background: #2d2542; }

/* 입력 필드 다크모드 */
input, textarea, select { background: var(--background-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 15px; transition: all 0.3s ease; }

input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(139, 122, 184, 0.1); }

[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--card-bg-dark); }

/* 일반 코드 블럭 스타일 (Jekyll 문법 강조용) */
pre { position: relative; background: transparent; padding: 0; border-radius: 0; overflow: visible; border: none; margin: 1.5rem 0; /* VSCode 스타일 복사 버튼 */ }

pre .copy-button { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 6px 10px; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #767676; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; z-index: 10; }

pre .copy-button:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: #333; }

pre .copy-button:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.98); }

pre .copy-button.copied { background: #007acc; border-color: #007acc; color: white; }

pre .copy-button .copy-icon { width: 12px; height: 12px; fill: currentColor; }

[data-theme="dark"] pre .copy-button { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #cccccc; }

[data-theme="dark"] pre .copy-button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

[data-theme="dark"] pre .copy-button:active { background: rgba(255, 255, 255, 0.15); }

[data-theme="dark"] pre .copy-button.copied { background: #007acc; border-color: #007acc; color: white; }

/* 인라인 코드 기본 스타일 - VSCode 테마 */
code { background: #f3f3f3; color: #a31515; padding: 0.2em 0.4em; border-radius: 3px; font-family: 'Cascadia Code', 'SF Mono', Monaco, 'Roboto Mono', Consolas, 'Courier New', monospace; font-size: 0.875em; font-weight: 500; }

[data-theme="dark"] code { background: #3c3c3c; color: #ce9178; }

/* 코드 블럭 내의 코드 스타일 - VSCode 테마 */
pre code { background: #ffffff; color: #24292f; padding: 1.2rem; border-radius: 6px; font-size: 0.875rem; line-height: 1.6; display: block; border: 1px solid #d1d9e0; margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; tab-size: 4; max-width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

[data-theme="dark"] pre code { background: #1e1e1e; color: #d4d4d4; border: 1px solid #3c3c3c; }

/* Jekyll Rouge 문법 강조 스타일 */
.highlight { position: relative; margin: 1.5rem 0; /* highlight 내의 코드 블럭 스타일 */ /* VSCode 스타일 복사 버튼 */ /* VSCode 라이트 테마 문법 강조 색상 */ /* Comment - 초록색 */ /* Keyword - 파란색 */ /* String - 빨간색 */ /* Name - 검정색 */ /* Operator - 검정색 */ /* Punctuation - 검정색 */ /* Name.Builtin - 파란색 */ /* Name.Function - 갈색 */ /* Name.Class - 청록색 */ /* Name.Decorator - 파란색 */ /* Name.Variable - 진한 파랑 */ /* Number - 초록색 */ /* Keyword.Namespace - 파란색 */ /* Keyword.Constant - 파란색 */ /* Name.Builtin.Pseudo - 파란색 */ }

.highlight pre { margin: 0; }

.highlight pre code { background: #ffffff; color: #24292f; padding: 1.2rem; border-radius: 6px; font-size: 0.875rem; line-height: 1.6; display: block; border: 1px solid #d1d9e0; margin: 0; overflow-x: auto; white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; tab-size: 4; max-width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }

.highlight .copy-button { position: absolute; top: 8px; right: 8px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; padding: 6px 10px; font-size: 11px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #767676; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 4px; z-index: 10; }

.highlight .copy-button:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.3); color: #333; }

.highlight .copy-button:active { background: rgba(255, 255, 255, 0.2); transform: scale(0.98); }

.highlight .copy-button.copied { background: #007acc; border-color: #007acc; color: white; }

.highlight .copy-button .copy-icon { width: 12px; height: 12px; fill: currentColor; }

.highlight .c { color: #008000; }

.highlight .k { color: #0000ff; }

.highlight .s, .highlight .s1, .highlight .s2 { color: #a31515; }

.highlight .n { color: #000000; }

.highlight .o { color: #000000; }

.highlight .p { color: #000000; }

.highlight .nb { color: #0070c1; }

.highlight .nf { color: #795e26; }

.highlight .nc { color: #267f99; }

.highlight .nd { color: #0070c1; }

.highlight .nv { color: #001080; }

.highlight .m, .highlight .mi, .highlight .mf { color: #098658; }

.highlight .kn { color: #0000ff; }

.highlight .kc { color: #0000ff; }

.highlight .bp { color: #0070c1; }

/* 다크모드 문법 강조 스타일 - VSCode 다크 테마 */
[data-theme="dark"] .highlight { /* VSCode 다크 테마 문법 강조 색상 */ /* Comment - 초록색 */ /* Keyword - 파란색 */ /* String - 주황색 */ /* Name - 회색 */ /* Operator - 회색 */ /* Punctuation - 회색 */ /* Name.Builtin - 청록색 */ /* Name.Function - 노란색 */ /* Name.Class - 청록색 */ /* Name.Decorator - 파란색 */ /* Name.Variable - 연파랑 */ /* Number - 연초록 */ /* Keyword.Namespace - 파란색 */ /* Keyword.Constant - 파란색 */ /* Name.Builtin.Pseudo - 청록색 */ }

[data-theme="dark"] .highlight pre code { background: #1e1e1e; color: #d4d4d4; border: 1px solid #3c3c3c; }

[data-theme="dark"] .highlight .copy-button { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: #cccccc; }

[data-theme="dark"] .highlight .copy-button:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }

[data-theme="dark"] .highlight .copy-button:active { background: rgba(255, 255, 255, 0.15); }

[data-theme="dark"] .highlight .copy-button.copied { background: #007acc; border-color: #007acc; color: white; }

[data-theme="dark"] .highlight .c { color: #6a9955; }

[data-theme="dark"] .highlight .k { color: #569cd6; }

[data-theme="dark"] .highlight .s, [data-theme="dark"] .highlight .s1, [data-theme="dark"] .highlight .s2 { color: #ce9178; }

[data-theme="dark"] .highlight .n { color: #d4d4d4; }

[data-theme="dark"] .highlight .o { color: #d4d4d4; }

[data-theme="dark"] .highlight .p { color: #d4d4d4; }

[data-theme="dark"] .highlight .nb { color: #4ec9b0; }

[data-theme="dark"] .highlight .nf { color: #dcdcaa; }

[data-theme="dark"] .highlight .nc { color: #4ec9b0; }

[data-theme="dark"] .highlight .nd { color: #569cd6; }

[data-theme="dark"] .highlight .nv { color: #9cdcfe; }

[data-theme="dark"] .highlight .m, [data-theme="dark"] .highlight .mi, [data-theme="dark"] .highlight .mf { color: #b5cea8; }

[data-theme="dark"] .highlight .kn { color: #569cd6; }

[data-theme="dark"] .highlight .kc { color: #569cd6; }

[data-theme="dark"] .highlight .bp { color: #4ec9b0; }

/* Rouge 문법 강조기 테이블 스타일 정리 */
.rouge-table { border: none; margin: 0; width: 100%; border-collapse: collapse; /* 라인 번호 제거 (사용하지 않음) */ }

.rouge-table td { border: none; padding: 0; vertical-align: top; }

.rouge-table .rouge-code { padding: 0; width: 100%; }

.rouge-table .rouge-code pre { margin: 0; padding: 0; background: transparent; border: none; }

.rouge-table .rouge-gutter { display: none; }

/* 블럭쿼트 다크모드 스타일 */
blockquote { border-left: 4px solid var(--primary-color); background: var(--accent-color); color: var(--text-color); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; font-style: italic; }

[data-theme="dark"] blockquote { border-left-color: #b8a9d9; background: #2d2542; color: #e8e8e8; }

/* 검색 기능 스타일 */
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--background-color); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--card-shadow); max-height: 400px; overflow-y: auto; z-index: 1000; margin-top: 8px; display: none; }

.search-results .search-results-header { padding: 1rem; border-bottom: 1px solid var(--border-color); background: var(--accent-color); border-radius: 12px 12px 0 0; }

.search-results .search-results-header h3 { margin: 0; font-size: 0.9rem; color: var(--text-color); font-weight: 600; }

.search-results .search-results-list { padding: 0; }

.search-results .search-result-item { padding: 1rem; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; }

.search-results .search-result-item:hover { background: var(--accent-color); }

.search-results .search-result-item:last-child { border-bottom: none; border-radius: 0 0 12px 12px; }

.search-results .search-result-item h3 { margin: 0 0 0.5rem 0; font-size: 1rem; line-height: 1.4; }

.search-results .search-result-item h3 a { color: var(--heading-color); text-decoration: none; font-weight: 600; }

.search-results .search-result-item h3 a:hover { color: var(--primary-color); }

.search-results .search-result-item .search-result-meta { margin-bottom: 0.5rem; font-size: 0.8rem; color: var(--text-light); }

.search-results .search-result-item .search-result-meta .date { margin-right: 0.5rem; }

.search-results .search-result-item .search-result-meta .categories { background: var(--primary-color); color: white; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.7rem; font-weight: 500; }

.search-results .search-result-item .search-result-excerpt { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-color); /* 긴 텍스트 잘라내기 */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.search-results .no-results { padding: 2rem; text-align: center; color: var(--text-light); font-style: italic; }

/* 검색 컨테이너 포지션 */
.search-container { position: relative; }

/* 검색 오버레이 개선 */
.search-overlay .search-box { position: relative; margin-bottom: 0; }

/* 모바일에서 검색 결과 */
@media (max-width: 768px) { .search-results { position: fixed; top: 120px; left: 1rem; right: 1rem; max-height: calc(100vh - 140px); border-radius: 8px; } .search-results .search-result-item { padding: 0.75rem; } .search-results .search-result-item h3 { font-size: 0.9rem; } .search-results .search-result-item .search-result-excerpt { font-size: 0.8rem; } }

/* 다크모드 버튼 텍스트 가독성 개선 */
[data-theme="dark"] .btn, [data-theme="dark"] .btn-primary, [data-theme="dark"] .category-list a, [data-theme="dark"] .page-link, [data-theme="dark"] .post-link { color: #ffffff !important; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); background: var(--button-bg-gradient); border: 1px solid rgba(255, 255, 255, 0.05); box-shadow: var(--button-shadow); }

[data-theme="dark"] .btn:hover, [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .category-list a:hover, [data-theme="dark"] .page-link:hover, [data-theme="dark"] .post-link:hover { color: #ffffff !important; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); background: var(--button-hover-gradient); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: var(--button-hover-shadow); }

[data-theme="dark"] .search-btn { color: var(--nav-text); border: 1px solid rgba(255, 255, 255, 0.03); background: rgba(26, 22, 37, 0.7); }

[data-theme="dark"] .search-btn:hover { color: #ffffff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); background: var(--button-bg-gradient); border: 1px solid rgba(255, 255, 255, 0.05); }

/* =========================== 새로운 포스트 카드 스타일 =========================== */
/* 홈페이지 히어로 섹션 */
.hero-section { text-align: center; margin-bottom: 3rem; padding: 2rem 0; }

.hero-title { font-size: 2.5rem; font-weight: 700; color: var(--heading-color); margin-bottom: 0.5rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.hero-subtitle { font-size: 1.1rem; color: var(--text-light); margin-bottom: 0; }

/* 포스트 컨테이너 */
.posts-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* 포스트 그리드 */
.posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; margin-bottom: 3rem; }

/* 포스트 카드 */
.post-card { background: var(--background-color); border-radius: 16px; overflow: hidden; box-shadow: var(--card-shadow); border: 1px solid var(--border-color); transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; height: fit-content; cursor: pointer; }

.post-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(139, 122, 184, 0.2); border-color: var(--primary-light); }

[data-theme="dark"] .post-card { background: var(--card-bg-dark); border-color: var(--border-color); }

[data-theme="dark"] .post-card:hover { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); border-color: var(--primary-color); }

/* 포스트 카드 이미지 */
.post-card-image { position: relative; height: 200px; overflow: hidden; background: var(--gradient-bg); display: flex; align-items: center; justify-content: center; }

.post-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

.post-card:hover .post-card-image img { transform: scale(1.05); }

.post-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-color), var(--primary-light)); }

.post-card-icon { font-size: 3rem; opacity: 0.7; }

/* 포스트 카드 콘텐츠 */
.post-card-content { padding: 1.5rem; }

/* 포스트 메타 정보 */
.post-card-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }

.post-date { font-size: 0.875rem; color: var(--text-light); font-weight: 500; display: flex; align-items: center; gap: 0.25rem; }

.post-date::before { content: '📅'; font-size: 0.875rem; }

/* 포스트 카테고리 */
.post-categories { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.post-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--primary-color); background: var(--accent-color); padding: 0.25rem 0.6rem; border-radius: 20px; border: 1px solid var(--primary-light); transition: all 0.3s ease; }

[data-theme="dark"] .post-category { color: var(--primary-light); background: var(--primary-dark); border-color: var(--primary-color); }

.post-category:hover { background: var(--primary-color); color: white; transform: translateY(-1px); }

/* 포스트 카드 태그 */
.post-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }

.post-card-tag { font-size: 0.7rem; color: var(--text-light); background: transparent; padding: 0; font-weight: 500; transition: color 0.2s ease; }

.post-card-tag:hover { color: var(--primary-color); }

/* 포스트 제목 */
.post-card-title { margin: 0 0 1rem 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }

.post-card-title a { color: var(--heading-color); text-decoration: none; transition: color 0.3s ease; }

.post-card-title a:hover { color: var(--primary-color); }

/* 포스트 요약 */
.post-card-excerpt { font-size: 0.95rem; color: var(--text-light); line-height: 1.6; margin: 0 0 1.5rem 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* 포스트 카드 푸터 */
.post-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; border-top: 1px solid var(--border-color); }

/* 더 읽기 버튼 */
.read-more-btn { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--primary-color); text-decoration: none; font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1rem; border-radius: 8px; background: transparent; border: 2px solid var(--primary-color); transition: all 0.3s ease; }

.read-more-btn:hover { background: var(--primary-color); color: white; transform: translateX(4px); }

.read-more-btn .arrow { transition: transform 0.3s ease; }

.read-more-btn:hover .arrow { transform: translateX(4px); }

/* 포스트 통계 */
.post-stats { display: flex; align-items: center; gap: 1rem; }

.read-time { font-size: 0.8rem; color: var(--text-light); display: flex; align-items: center; gap: 0.25rem; }

.read-time::before { content: '⏱️'; font-size: 0.8rem; }

/* 더 보기 버튼 컨테이너 */
.load-more-container { display: flex; justify-content: center; margin: 3rem 0; }

/* 더 보기 버튼 */
.load-more-btn { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); color: white; border: none; border-radius: 50px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(139, 122, 184, 0.3); position: relative; overflow: hidden; }

.load-more-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(139, 122, 184, 0.4); background: linear-gradient(135deg, var(--primary-dark), var(--primary-color)); }

.load-more-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

/* 로딩 스피너 */
.spinner, .loading-spinner { width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; }

.loading-message, .no-more-posts { text-align: center; padding: 2rem; color: var(--text-light); }

.loading-message { display: flex; flex-direction: column; align-items: center; gap: 1rem; }

.no-more-posts { background: var(--accent-color); border-radius: 12px; margin: 2rem 0; }

[data-theme="dark"] .no-more-posts { background: var(--card-bg-dark); }

@keyframes spin { 0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); } }

/* 반응형 디자인 */
@media (max-width: 768px) { .hero-title { font-size: 2rem; } .posts-grid { grid-template-columns: 1fr; gap: 1.5rem; } .post-card { margin: 0 0.5rem; } .post-card-content { padding: 1.25rem; } .post-card-footer { flex-direction: column; gap: 1rem; align-items: flex-start; } .posts-container { padding: 0 0.5rem; } }

@media (max-width: 480px) { .hero-section { margin-bottom: 2rem; padding: 1rem 0; } .post-card-image { height: 160px; } .post-card-content { padding: 1rem; } .load-more-btn { padding: 0.875rem 1.5rem; font-size: 0.9rem; } }

/* 애니메이션 효과 */
.post-card { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; }

.post-card:nth-child(1) { animation-delay: 0.1s; }

.post-card:nth-child(2) { animation-delay: 0.2s; }

.post-card:nth-child(3) { animation-delay: 0.3s; }

.post-card:nth-child(4) { animation-delay: 0.4s; }

.post-card:nth-child(5) { animation-delay: 0.5s; }

.post-card:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp { to { opacity: 1;
    transform: translateY(0); } }

/* =========================== SEO 및 접근성 개선 스타일 =========================== */
/* 포스트 공유 버튼 */
.post-share { margin: 3rem 0; padding: 2rem; background: var(--accent-color); border-radius: 12px; border: 1px solid var(--border-color); text-align: center; }

.post-share h3 { margin-bottom: 1.5rem; color: var(--heading-color); font-size: 1.2rem; }

.share-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

.share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s ease; border: 2px solid transparent; }

button.share-btn { font-family: inherit; font-size: 0.9rem; line-height: inherit; appearance: none; -webkit-appearance: none; }

.share-btn.twitter { background: #1da1f2; color: white; }

.share-btn.facebook { background: #1877f2; color: white; }

.share-btn.linkedin { background: #0077b5; color: white; }

.share-btn.copy { background: var(--primary-color); color: white; }

.share-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }

/* 관련 포스트 */
.related-posts { margin: 3rem 0; padding: 2rem; background: var(--card-bg-dark); border-radius: 12px; border: 1px solid var(--border-color); }

.related-posts h3 { margin-bottom: 1.5rem; color: var(--heading-color); font-size: 1.3rem; text-align: center; }

.related-posts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; }

.related-post { padding: 1.5rem; background: var(--background-color); border-radius: 8px; border: 1px solid var(--border-color); transition: all 0.3s ease; }

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

.related-post h4 { margin: 0 0 0.5rem 0; font-size: 1rem; line-height: 1.4; }

.related-post h4 a { color: var(--heading-color); text-decoration: none; }

.related-post h4 a:hover { color: var(--primary-color); }

.related-post time { font-size: 0.8rem; color: var(--text-light); margin-bottom: 0.5rem; display: block; }

.related-post p { font-size: 0.9rem; color: var(--text-color); line-height: 1.5; margin: 0; }

/* 포스트 네비게이션 */
.post-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem auto 3rem; max-width: 1200px; padding: 0 20px; }

.prev-post, .next-post { display: block; padding: 1.5rem; background: var(--card-bg-dark); border: 1px solid var(--border-color); border-radius: 12px; text-decoration: none; transition: all 0.3s ease; }

.prev-post:hover, .next-post:hover { transform: translateY(-4px); box-shadow: var(--card-shadow); }

.prev-post { text-align: left; }

.next-post { text-align: right; }

.nav-label { font-size: 0.8rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.5rem; }

.nav-title { color: var(--heading-color); font-weight: 600; line-height: 1.3; display: block; }

/* 포스트 전용 레이아웃 */
.post-layout { display: grid; grid-template-columns: 280px 1fr; gap: 30px; align-items: start; width: 100%; max-width: none; margin: 0; padding: 0; }

.post-sidebar { position: sticky; top: 110px; /* 헤더 높이 + 여백 고려 */ background: var(--background-color); border-radius: 15px; border: 1px solid var(--border-color); transition: all 0.3s ease; height: fit-content; max-height: calc(100vh - 140px); overflow-y: auto; min-width: 280px; /* 커스텀 스크롤바 */ scrollbar-width: thin; scrollbar-color: var(--primary-color) var(--accent-color); }

.post-sidebar::-webkit-scrollbar { width: 6px; }

.post-sidebar::-webkit-scrollbar-track { background: var(--accent-color); border-radius: 3px; }

.post-sidebar::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 3px; }

.post-sidebar::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

[data-theme="dark"] .post-sidebar { background: var(--card-bg-dark); }

.post-sidebar-content { padding: 20px; }

.post-main { background: transparent; border-radius: 0; box-shadow: none; border: none; padding: 0; min-height: 500px; transition: all 0.3s ease; width: 100%; max-width: 100%; }

[data-theme="dark"] .post-main { background: transparent; }

/* 사이드바 목차 스타일 */
.toc-sidebar .table-of-contents { background: transparent; border: none; border-radius: 0; padding: 0; margin: 0; position: static; }

.toc-sidebar .table-of-contents h3 { color: var(--heading-color); font-size: 1rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-color); }

.toc-sidebar .toc-list { list-style: none; padding: 0; margin: 0; }

.toc-sidebar .toc-list li { margin: 0.3rem 0; }

.toc-sidebar .toc-h2 { margin-left: 0; }

.toc-sidebar .toc-h3 { margin-left: 1rem; }

.toc-sidebar .toc-list a { color: var(--text-color); text-decoration: none; font-size: 0.85rem; line-height: 1.4; display: block; padding: 0.4rem 0.6rem; border-left: 3px solid transparent; border-radius: 6px; transition: all 0.3s ease; }

.toc-sidebar .toc-list a:hover { color: var(--primary-color); background: var(--accent-color); border-left-color: var(--primary-color); transform: translateX(5px); }

.toc-sidebar .toc-list a.active { color: var(--primary-color); background: var(--accent-color); border-left-color: var(--primary-color); font-weight: 600; transform: translateX(8px); }

/* 목차 placeholder 스타일 */
.toc-placeholder { text-align: center; padding: 2rem 1rem; }

.toc-placeholder-content { opacity: 0.6; }

.toc-placeholder-icon { font-size: 2rem; margin-bottom: 1rem; }

.toc-placeholder-text h4 { margin: 0 0 0.5rem 0; color: var(--heading-color); font-size: 0.9rem; }

.toc-placeholder-text p { margin: 0; color: var(--text-light); font-size: 0.8rem; line-height: 1.4; }

/* 태블릿 반응형 */
@media (max-width: 1024px) { .post-layout { grid-template-columns: 240px 1fr; gap: 20px; } .post-sidebar { width: 240px; } }

/* 모바일 반응형 */
@media (max-width: 768px) { .post-layout { grid-template-columns: 1fr; gap: 20px; padding: 0; } .post-sidebar { position: static; order: 2; margin-top: 20px; width: 100%; } .post-main { padding: 0; width: 100%; } .toc-sidebar .table-of-contents { background: var(--accent-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin: 1rem 0; } [data-theme="dark"] .toc-sidebar .table-of-contents { background: var(--card-bg-dark); } }

/* 기존 목차 스타일 (인라인 목차용 - 더 이상 사용되지 않지만 호환성 유지) */
.post-content .table-of-contents { background: var(--accent-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; margin: 2rem 0; position: static; /* sticky 제거 */ }

[data-theme="dark"] .post-content .table-of-contents { background: var(--card-bg-dark); }

.post-content .table-of-contents h3 { margin: 0 0 1rem 0; color: var(--heading-color); font-size: 1.1rem; }

.toc-list { list-style: none; padding: 0; margin: 0; }

.toc-list li { margin: 0.5rem 0; list-style-type: none; }

.toc-h2 { margin-left: 0; }

.toc-h3 { margin-left: 1rem; }

.toc-list a { color: var(--text-color); text-decoration: none; font-size: 0.9rem; line-height: 1.4; display: block; padding: 0.25rem 0; border-left: 2px solid transparent; padding-left: 0.5rem; transition: all 0.3s ease; }

.toc-list a:hover { color: var(--primary-color); border-left-color: var(--primary-color); transform: translateX(4px); }

/* 읽기 진행률 바 */
.reading-progress { position: fixed; top: 70px; left: 0; width: 100%; height: 3px; background: rgba(139, 122, 184, 0.1); z-index: 999; transition: opacity 0.3s ease; }

.progress-bar { height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); width: 0%; transition: width 0.1s ease; }

/* 포스트 메타데이터 개선 */
.post-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; color: var(--text-light); }

.reading-time { display: flex; align-items: center; gap: 0.25rem; font-weight: 500; }

/* 포스트 태그 및 카테고리 개선 */
.post-tags, .post-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }

.post-tags a, .post-categories a { text-decoration: none; transition: all 0.3s ease; }

.tag-item { font-size: 0.75rem; font-weight: 600; color: var(--primary-color); background: var(--accent-color); padding: 0.25rem 0.6rem; border-radius: 20px; border: 1px solid var(--primary-light); transition: all 0.3s ease; }

.tag-item:hover { background: var(--primary-color); color: white; transform: translateY(-1px); }

[data-theme="dark"] .tag-item { color: var(--primary-light); background: var(--primary-dark); border-color: var(--primary-color); }

/* 접근성 개선 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 포커스 스타일 개선 */
a:focus, button:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; }

/* 반응형 디자인 */
@media (max-width: 768px) { .post-navigation { grid-template-columns: 1fr; } .next-post { text-align: left; } .share-buttons { flex-direction: column; align-items: center; } .share-btn { width: 200px; justify-content: center; } .related-posts-grid { grid-template-columns: 1fr; } .table-of-contents { position: static; margin: 1rem 0; } .post-meta { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .post-meta.post-meta--detail { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } }

/* 테이블 반응형 처리 및 오버플로우 방지 */
.post-content table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1rem 0; overflow-x: auto; display: block; white-space: nowrap; word-break: keep-all; border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--card-shadow); }

.post-content table thead { background: var(--accent-color); }

.post-content table th, .post-content table td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border-color); word-wrap: break-word; overflow-wrap: break-word; max-width: 200px; }

.post-content table th { font-weight: 600; color: var(--primary-dark); }

/* 테이블 컨테이너 래퍼 */
.post-content .table-wrapper, .table-responsive { overflow-x: auto; max-width: 100%; margin: 1rem 0; border-radius: 8px; border: 1px solid var(--border-color); }

/* 이미지 및 미디어 요소 반응형 처리 */
.post-content img, .post-content video, .post-content iframe { max-width: 100% !important; height: auto !important; object-fit: contain; }

/* 긴 URL이나 문자열이 포함된 요소들 - 중복 제거됨, 위의 .rouge-table 스타일로 통합 */
/* blockquote 내용 처리 */
.post-content blockquote { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; max-width: 100%; }

/* 포스트 본문 리스트 스타일 복원 (전역 reset 재정의) */
.post-content ul { list-style: disc; padding-left: 1.75rem; margin: 0.75rem 0; }

.post-content ol { list-style: decimal; padding-left: 1.75rem; margin: 0.75rem 0; }

.post-content ul ul { list-style: circle; margin: 0.25rem 0; }

.post-content ul ul ul { list-style: square; }

.post-content ul li, .post-content ol li { list-style: inherit; margin: 0.35rem 0; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }

/* 모바일에서 테이블 추가 처리 */
@media (max-width: 768px) { .post-content table { font-size: 0.875rem; white-space: normal; } .post-content table th, .post-content table td { padding: 0.5rem; min-width: 100px; max-width: 150px; word-break: break-word; white-space: normal; } }

/* 위로 가기 버튼 */
.scroll-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 44px; height: 44px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #8b7ab8), var(--primary-light, #b8a9d9)); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(139, 122, 184, 0.35); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; z-index: 998; }

.scroll-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.scroll-to-top:hover { box-shadow: 0 8px 22px rgba(139, 122, 184, 0.5); transform: translateY(-2px); }

.scroll-to-top:focus-visible { outline: 2px solid var(--primary-color, #8b7ab8); outline-offset: 3px; }

[data-theme="dark"] .scroll-to-top { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }

/* 복사 알림 (포스트 상세) */
.copy-notification { position: fixed; top: 5.5rem; right: 1.25rem; max-width: min(90vw, 22rem); padding: 0.75rem 1.15rem; border-radius: 10px; background: var(--primary-color); color: #fff; font-weight: 600; font-size: 0.9rem; line-height: 1.4; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); z-index: 10000; }

.copy-notification--animated { animation: copyNotifyIn 0.35s ease forwards; }

.copy-notification--out { animation: copyNotifyOut 0.28s ease forwards; }

@keyframes copyNotifyIn { from { transform: translateX(110%);
    opacity: 0; }
  to { transform: translateX(0);
    opacity: 1; } }

@keyframes copyNotifyOut { from { transform: translateX(0);
    opacity: 1; }
  to { transform: translateX(110%);
    opacity: 0; } }

@media (prefers-reduced-motion: reduce) { .copy-notification--animated, .copy-notification--out { animation: none; } .copy-notification--out { opacity: 0; } }

@media (max-width: 768px) { .scroll-to-top { right: 1rem; bottom: 1rem; width: 40px; height: 40px; } }

/*# sourceMappingURL=style.css.map */