/*
 * Main Styles for BoxkunMD Theme
 * Medium 스타일을 참고한 깔끔하고 읽기 좋은 디자인
 */

/* ========== 기본 스타일 ========== */

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
}

/* 다크모드 깜박임 방지 */
body.dark-mode {
    background-color: var(--color-background);
}

/* ========== 헤더 ========== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    height: var(--header-height);
}

/* 관리자 바 있을 때 헤더 위치 조정 */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

/* 관리자 바 강제 fixed */
#wpadminbar {
    position: fixed !important;
}

.header-container {
    display: flex;
    align-items: center;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    height: 100%;
    gap: 5px;
}

.site-logo {
    display: flex;
    align-items: center;
    margin-right: auto;
    flex-shrink: 0;
    min-width: 100px;
    white-space: nowrap;
}

.site-logo a {
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.site-logo svg,
.site-logo img {
    height: 25px;
    width: auto;
    flex-shrink: 0;
}

.site-logo svg path {
    fill: var(--color-text-primary);
}

/* 로고 다크모드 전환 */
.site-logo-dark {
    display: none;
}

body.dark-mode .site-logo-light {
    display: none;
}

body.dark-mode .site-logo-dark {
    display: block;
}

/* 네비게이션 */
.main-navigation {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex: 1;
    position: relative;
    min-width: 0;
    overflow: visible;
}

.main-navigation ul,
.primary-menu {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}

/* 숨겨진 메뉴 아이템 */
.main-navigation li.hidden-item {
    display: none;
    visibility: hidden;
    position: absolute;
    left: -9999px;
}

/* 더보기 메뉴 */
.main-navigation .more-menu {
    position: relative;
    flex-shrink: 0;
}

.main-navigation .more-menu > a {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
}

.main-navigation .more-menu > a svg {
    width: 16px;
    height: 16px;
    opacity: 0.6;
    flex-shrink: 0;
}

.main-navigation .more-menu > a svg path {
    stroke: var(--color-text-secondary);
}

body.dark-mode .main-navigation .more-menu > a svg path {
    stroke: var(--color-text-primary);
}

/* 더보기 메뉴와 드롭다운 사이의 보이지 않는 연결 영역 */
.main-navigation .more-menu::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 9999;
}

.main-navigation .more-menu .more-items {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: var(--spacing-sm) 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    overflow: hidden;
    width: max-content;
}

.main-navigation .more-menu:hover .more-items,
.main-navigation .more-menu.is-open .more-items {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.main-navigation .more-menu .more-items li {
    margin: 0;
    list-style: none;
}

.main-navigation .more-menu .more-items a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xs);
}

.main-navigation .more-menu .more-items a::after {
    display: none !important;
}

.main-navigation .more-menu .more-items li {
    position: relative;
}

.main-navigation a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* 하위 메뉴 있는 항목에 chevron 아이콘 */
.main-navigation .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.6;
}

body.dark-mode .main-navigation .menu-item-has-children > a::after {
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="m6 9 6 6 6-6"/%3E%3C/svg%3E');
}

.main-navigation a:hover {
    color: var(--color-text-primary);
    background: var(--color-surface);
}

/* 하위 메뉴 */
.main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    min-width: 200px;
    padding: var(--spacing-sm);
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 1000;
}

.main-navigation li {
    position: relative;
}

.main-navigation li:hover > ul {
    display: flex;
}

.main-navigation ul ul a {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.main-navigation ul ul a:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

/* 검색 */
.header-search {
    position: relative;
    flex: 1;
    max-width: 240px;
    min-width: 180px;
    flex-shrink: 1;
}

.header-search .search-form {
    position: relative;
}

.header-search input {
    width: 100%;
    padding: 10px 20px 10px 40px;
    border: none;
    border-radius: 6px;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    outline: none;
}

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

/* 브라우저 기본 X 버튼 제거 */
.header-search input::-webkit-search-cancel-button,
.search-popup-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.header-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    pointer-events: none;
}

.header-search svg path {
    fill: var(--color-text-secondary);
}

/* 헤더 액션 버튼 */
.header-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-circle);
    cursor: pointer;
    outline: none;
    width: 40px;
    height: 40px;
}

.btn-primary {
    color: var(--color-text-inverse);
    background: var(--color-accent);
}

.btn-primary:hover {
    background: var(--color-accent-hover);
}

.btn-secondary {
    color: var(--color-text-secondary);
    background: transparent;
}

.btn-secondary:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

/* 다크 모드 토글 아이콘 */
.dark-mode-toggle {
    position: relative;
}

.dark-mode-toggle .icon-moon,
.dark-mode-toggle .icon-sun {
    display: block;
}

/* 라이트 모드: 달 아이콘 표시, 해 아이콘 숨김 */
.dark-mode-toggle .icon-sun {
    display: none;
}

/* 다크 모드: 해 아이콘 표시, 달 아이콘 숨김 */
body.dark-mode .dark-mode-toggle .icon-moon {
    display: none;
}

body.dark-mode .dark-mode-toggle .icon-sun {
    display: block;
}

/* 데스크톱/모바일 표시 제어 */
.desktop-only {
    display: flex;
}

.mobile-only {
    display: none;
}

/* Drawer 버튼은 항상 표시 */
.drawer-toggle {
    display: flex !important;
}

/* 오버레이 */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-opacity), visibility var(--transition-base);
    cursor: pointer;
}

.overlay.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 검색 팝업 (모바일) */
.search-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
    display: none;
    align-items: flex-start;
    padding-top: calc(var(--header-height) + var(--spacing-lg));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--transition-opacity), visibility var(--transition-base);
}

.search-popup.is-open {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-popup-content {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.search-popup-form {
    position: relative;
    background: var(--color-background);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.search-popup-input {
    width: 100%;
    padding: var(--spacing-lg) var(--spacing-3xl) var(--spacing-lg) var(--spacing-lg);
    border: none;
    font-size: var(--font-size-lg);
    background: transparent;
    color: var(--color-text-primary);
    outline: none;
}

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

.search-popup-submit {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.search-popup-submit:hover {
    background: var(--color-surface);
}

.search-popup-submit svg path {
    fill: var(--color-text-secondary);
}

/* Drawer */
.drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 280px;
    height: 100%;
    background: var(--color-background);
    z-index: 999999;
    transform: translateX(100%) !important;
    transition: var(--transition-transform);
    box-shadow: var(--shadow-lg);
    display: none;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
}

.drawer.is-open {
    display: flex;
    transform: translateX(0) !important;
    visibility: visible;
    pointer-events: auto;
}

.drawer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.drawer-header {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.drawer-logo {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.drawer-logo a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.drawer-logo img {
    display: block;
}

/* Drawer 로고 다크모드 전환 */
.drawer-logo .site-logo-dark {
    display: none;
}

body.dark-mode .drawer-logo .site-logo-light {
    display: none;
}

body.dark-mode .drawer-logo .site-logo-dark {
    display: block;
}

.drawer-header-actions {
    display: flex;
    align-items: center;
    gap: 0;
}

.drawer-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.drawer-close:hover {
    background: var(--color-surface);
}

.drawer-close svg {
    width: 20px;
    height: 20px;
}

.drawer-close svg path {
    stroke: var(--color-text-secondary);
}

.drawer-nav {
    flex: 1;
    padding: 10px !important;
}

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

.drawer-menu > li {
    margin-bottom: 0;
}

.drawer-menu > li > a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.drawer-menu > li > a:hover {
    background: var(--color-surface);
}

/* Drawer 하위 메뉴 */
.drawer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 0!important;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.drawer-menu ul li {
    margin-bottom: 0;
}

.drawer-menu ul a {
    display: block;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-normal);
}

.drawer-menu ul a:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.drawer-menu ul a::before {
    content: '−';
    margin-right: var(--spacing-xs);
    color: var(--color-text-tertiary);
    opacity: 0.5;
}

/* Drawer 다크모드 토글 */
.dark-mode-toggle-drawer .icon-moon,
.dark-mode-toggle-drawer .icon-sun {
    display: block;
}

.dark-mode-toggle-drawer .icon-sun {
    display: none;
}

body.dark-mode .dark-mode-toggle-drawer .icon-moon {
    display: none;
}

body.dark-mode .dark-mode-toggle-drawer .icon-sun {
    display: block;
}

/* Drawer Footer */
.drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    background: var(--color-background);
}

/* 사용자 정보 */
.drawer-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.drawer-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-circle);
    flex-shrink: 0;
}

.drawer-user-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.drawer-username {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drawer-user-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    text-transform: capitalize;
}

/* 로그인/로그아웃 버튼 */
.drawer-auth-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 400;
    transition: var(--transition-transform);
}

.drawer-auth-btn:hover {
    background: var(--color-surface);
    transform: translateY(-1px);
}

.drawer-auth-btn.login-btn {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.drawer-auth-btn.login-btn:hover {
    background: var(--color-accent);
    color: white;
}

.drawer-auth-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ========== 메인 컨텐츠 ========== */

.site-main {
    min-height: calc(100vh - var(--header-height));
    display: flex;
    flex-direction: column;
}

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    width: 100%;
}

.content-wrapper {
    flex: 1;
    padding: var(--spacing-2xl) 0;
}

/* ========== 포스트 그리드 ========== */

.section-title {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xl) 0;
}

.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

article.post-card {
    display: block;
    height: 100%;
}

/* 썸네일 영역 - 항상 16:9 비율 유지 */
.post-card-thumbnail {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    background-color: var(--color-surface);
}

/* 이미지가 있을 때 */
.post-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 스켈레톤 제거 - LQIP 사용 */

/* 썸네일 없는 포스트 - placeholder 아이콘 */
article.post-card:not(.has-post-thumbnail) .post-card-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.3;
    z-index: -1;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.post-card-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.post-card-title a {
    color: inherit;
}

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

.post-card-excerpt {
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.post-card-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.post-card-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.author-avatar {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

/* ========== 단일 포스트 ========== */

article.single-post {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}

.post-header {
    margin-bottom: var(--spacing-2xl);
}

.post-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.post-meta {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.post-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.post-thumbnail {
    margin-bottom: var(--spacing-2xl);
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* 포스트 섬네일 이미지 - CLS 방지 */
.post-thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
    /* aspect-ratio는 PHP 필터에서 인라인으로 추가됨 */
}

.post-content {
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-tertiary);
    word-break: break-all;
}

.post-content h2 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    margin: var(--spacing-2xl) 0 var(--spacing-lg);
    color: var(--color-text-primary);
}

.post-content h3 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    margin: var(--spacing-xl) 0 var(--spacing-md);
    color: var(--color-text-primary);
}

.post-content p {
    margin-bottom: var(--spacing-lg);
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: var(--spacing-xl) 0;
    /* CLS 방지: aspect-ratio로 정확한 공간 예약 (PHP에서 인라인 스타일로 추가됨) */
    display: block;
    /* 고화질 이미지 렌더링 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.post-content a {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.post-content a:hover {
    color: var(--color-accent);
}

.post-content blockquote {
    border-left: 3px solid var(--color-border-dark);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-xl) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.post-content code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--color-surface);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.post-content pre {
    background: var(--color-surface);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--spacing-xl) 0;
    word-break: normal;
    overflow-wrap: normal;
}

.post-content pre code {
    background: none;
    padding: 0;
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

/* WordPress 코드 블록 */
.post-content .wp-block-code,
.post-content pre.wp-block-code {
    overflow-x: auto;
    word-break: normal;
}

.post-content .wp-block-code code,
.post-content pre.wp-block-code code {
    word-break: break-all;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

.post-content ul,
.post-content ol {
    margin: var(--spacing-lg) 0;
    padding-left: var(--spacing-xl);
}

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

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

.post-content li {
    margin-bottom: var(--spacing-sm);
    list-style-position: outside;
}

.post-footer {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.post-tags .tag {
    padding: 4px 12px;
    background: var(--color-surface);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.post-tags .tag:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}

/* ========== 페이지네이션 ========== */

.pagination,
.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-2xl);
}

.pagination .page-numbers,
.nav-links a,
.nav-links span {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.pagination .page-numbers:hover,
.nav-links a:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
}

.pagination .page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* ========== 푸터 ========== */

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-2xl) 0;
    margin-top: var(--spacing-3xl);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
    padding-bottom: 80px;
}

.footer-nav ul,
.footer-menu {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

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

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

.footer-credits {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.footer-credits a {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

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

/* ========== 반응형 ========== */

@media (max-width: 1024px) {
    .main-navigation {
        display: none;
    }
    
    .header-container {
        padding: 0 var(--spacing-md);
    }
    
    .header-search {
        display: none;
    }
    
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: flex;
    }
    
    .search-toggle {
        display: flex;
    }
    
    .posts-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .post-title {
        font-size: var(--font-size-3xl);
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
}

@media (max-width: 768px) {
    /* Footer 모바일 레이아웃 - 획기적인 해결책 */
    .footer-content {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
    }
    
    .footer-info {
        width: 100%;
        text-align: center;
        order: 1;
    }
    
    .footer-nav {
        width: 100%;
        order: 2;
    }
    
    .footer-nav ul,
    .footer-menu {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--spacing-md) !important;
    }
    
    .footer-nav a {
        display: inline-block;
    }
}

@media (max-width: 480px) {
    .header-container {
        gap: var(--spacing-md);
    }
    
    .post-title {
        font-size: var(--font-size-2xl);
    }
    
    .post-content {
        font-size: var(--font-size-md);
    }
    
    /* 모바일에서 코드 블록 오버플로우 방지 */
    .post-content pre,
    .post-content .wp-block-code,
    .post-content pre.wp-block-code {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .post-content pre code,
    .post-content .wp-block-code code,
    .post-content pre.wp-block-code code {
        font-size: 12px;
        line-height: 1.5;
    }
    
    /* Footer 초소형 화면 */
    .footer-content {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .footer-nav ul,
    .footer-menu {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--spacing-sm) !important;
    }
}

/* ========== 유틸리티 클래스 ========== */

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

.text-center {
    text-align: center;
}

.no-posts {
    text-align: center;
    padding: var(--spacing-3xl) 0;
}

.no-posts h2 {
    font-size: var(--font-size-3xl);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.no-posts p {
    color: var(--color-text-secondary);
}

/* ========== 스크롤바 스타일 ========== */

/* Webkit (Chrome, Safari, Edge) */
html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: var(--color-background);
}

html::-webkit-scrollbar-thumb {
    background: #D0D0D0;
    border-radius: 5px;
    border: 2px solid var(--color-background);
}

html::-webkit-scrollbar-thumb:hover {
    background: #B0B0B0;
}

/* 다크 모드 */
html.dark-mode::-webkit-scrollbar-thumb {
    background: #555555;
    border-color: var(--color-background);
}

html.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #777777;
}

html.dark-mode::-webkit-scrollbar-track {
    background: var(--color-background);
}

/* Firefox */
html {
    scrollbar-color: #D0D0D0 var(--color-background);
    scrollbar-width: thin;
}

html.dark-mode {
    scrollbar-color: #555555 var(--color-background);
}

/* ========== Single Post 스타일 ========== */

.single-post-main {
    min-height: calc(100vh - var(--header-height));
    padding: var(--spacing-3xl) 0;
    width: 100%;
}

.single-post-main .single-post {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    width: 100%;
}

/* 포스트 헤더 섹션 */
.single-post-main .post-header-section {
    margin-bottom: var(--spacing-3xl);
}

.single-post-main .post-header-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 제목 */
.single-post-main .post-header h1 {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-family-base);
    letter-spacing: -0.011em;
}

/* 부제목 */
.single-post-main .post-subtitle {
    font-size: var(--font-size-xl);
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
    font-family: var(--font-family-base);
    font-weight: 500 !important;
    font-style: normal !important;
}

/* 메타 섹션 */
.single-post-main .post-meta-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    padding-top: var(--spacing-md);
}

/* 포스트 메타 정보 */
.single-post-main .post-meta-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.single-post-main .post-category {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
}

.single-post-main .post-category:hover {
    color: var(--color-accent);
}

.single-post-main .meta-separator {
    color: var(--color-text-secondary);
}

/* 액션 바 */
.single-post-main .post-actions {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.single-post-main .action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-xs);
}

.single-post-main .action-btn:hover {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}

.single-post-main .action-btn svg {
    width: 18px;
    height: 18px;
}

.single-post-main .action-btn.liked svg,
.comment-clap-btn.liked svg{
	color: #ff126e!important;
	fill: #ff126e !important;
}
.single-post-main .action-btn.liked span,
.comment-clap-btn.liked span{
	color: #ff126e!important;
}

.single-post-main .clap-count,
.single-post-main .comment-count {
    font-weight: 400 !important;
    line-height: 1 !important;
}

.single-post-main .action-btn.clap-btn:hover svg,
.single-post-main .action-btn.clap-btn:hover span,
.comment-clap-btn:hover svg,
.comment-clap-btn:hover span{
	color: #ff126e !important;
}


/* 썸네일 섹션 */
.single-post-main .post-thumbnail-section {
    margin: var(--spacing-3xl) -54px;
    /* 일정한 높이 유지 */
    height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.single-post-main .post-thumbnail {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2em;
    overflow: hidden;
}

.single-post-main .post-thumbnail-image {
    width: 100%;
    height: 100%;
    display: block;
    /* 이미지가 크면 중앙에서 짤림 (cover 방식) */
    object-fit: cover;
    object-position: center;
    /* 고화질 이미지 렌더링 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

/* 콘텐츠 래퍼 */
.single-post-main .post-content-wrapper {
    margin: var(--spacing-3xl) 0;
}

.single-post-main .post-content {
    font-size: 18px !important;
    line-height: 1.74;
    letter-spacing: -0.004em;
    color: var(--color-text-primary);
}

.single-post-main .post-content p {
    margin: 0 0 1.5em 0;
}

.single-post-main .post-content h2 {
    font-size: 1.74rem !important;
    line-height: 1.12;
    font-weight: 600;
    margin: 3em 0 0.75em 0 !important;
    letter-spacing: -0.022em;
}

.single-post-main .post-content h3.wp-block-heading {
    font-size: 1.5rem !important;
    line-height: 1.2;
    font-weight: 600;
    margin: 3em 0 0.75em 0 !important;
}

.single-post-main .post-content h4 {
    font-size: 1.3rem !important;
    line-height: 1.3;
    font-weight: 600;
    margin: 3em 0 0.75em 0 !important;
}

.single-post-main .post-content h5 {
    font-size: 1.1rem !important;
    line-height: 1.4;
    font-weight: 600;
    margin: 3em 0 0.75em 0 !important;
}

.single-post-main .post-content h6 {
    font-size: 1rem !important;
    line-height: 1.4;
    font-weight: 600;
    margin: 3em 0 0.75em 0 !important;
}

.single-post-main .post-content a {
    color: var(--color-accent);
    text-decoration: underline;
}

.single-post-main .post-content a:hover {
    color: var(--color-accent-hover);
}

.single-post-main .post-content mark {
    background-color: #fff3cd;
    padding: 2px 4px;
}

body.dark-mode .single-post-main .post-content {
    color: #dcdcdc !important;
}

.single-post-main.dark-mode .post-content mark {
    background-color: rgba(255, 193, 7, 0.2);
    color: inherit;
}

.single-post-main .post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2em 0;
    /* 고화질 이미지 렌더링 최적화 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.single-post-main .post-content figure {
    margin: 2em 0;
}

.single-post-main .post-content figure img {
    /* figure 내 이미지 품질 개선 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
}

.single-post-main .post-content figcaption {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: center;
    margin-top: var(--spacing-md);
    font-style: italic;
}

/* 페이지 링크 */
.single-post-main .page-links {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
    flex-wrap: wrap;
}

.single-post-main .page-links span {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-surface);
    font-size: var(--font-size-xs);
}

.single-post-main .page-links a {
    padding: 6px 12px;
    border: 1px solid var(--color-accent);
    border-radius: 4px;
    background: transparent;
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-xs);
}

.single-post-main .page-links a:hover {
    background: var(--color-accent);
    color: white;
}

/* 포스트 푸터 */
.single-post-main .post-footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: none;
    margin-bottom: var(--spacing-xl);
}

.single-post-main .post-tags {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.single-post-main .tag-link {
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-xs);
}

.single-post-main .tag-link:hover {
    background: var(--color-text-primary);
    color: var(--color-background);
}

/* 전작/후속글 섹션 */
.related-stories-section {
    margin-top: 2em;
    padding: var(--spacing-xl);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.related-stories-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 var(--spacing-lg) 0;
    color: var(--color-text-primary);
}

.related-stories-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: story-counter;
}

.related-story-item {
    position: relative;
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 3.5em;
    margin-bottom: var(--spacing-sm);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    counter-increment: story-counter;
}

.related-story-item:last-child {
    margin-bottom: 0;
}

.related-story-item:hover {
    border-color: var(--color-accent);
}

.related-story-item::before {
    content: counter(story-counter);
    position: absolute;
    left: var(--spacing-md);
    top: var(--spacing-md);
    width: 1.75em;
    height: 1.75em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 50%;
}

.related-story-link {
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.6;
    display: block;
}

.related-story-link:hover {
    color: var(--color-accent);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .related-stories-section {
        padding: var(--spacing-md);
    }
    
    .related-stories-title {
        font-size: 1.125rem;
    }
    
    .related-story-item {
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-sm) 3em;
    }
    
    .related-story-item::before {
        width: 1.5em;
        height: 1.5em;
        font-size: 0.75rem;
        left: var(--spacing-sm);
        top: var(--spacing-sm);
    }
    
    .related-story-link {
        font-size: 0.9375rem;
    }
}

/* 공유 메뉴 */
.send-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-background);
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-lg);
    z-index: 1000;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-opacity), visibility var(--transition-base);
}

.send-menu[aria-hidden="false"] {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.send-menu-content {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.send-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 400;
}

.send-option:hover {
    background: var(--color-surface);
    border-color: var(--color-border-dark);
}

.send-option svg {
    width: 16px;
    height: 16px;
}

/* HR 스타일 - 아치형 */
.single-post-main hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--color-border) 20%,
        var(--color-border) 50%,
        transparent 100%
    );
    margin: var(--spacing-3xl) 0;
}

body.dark-mode .single-post-main hr {
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--color-border) 20%,
        var(--color-border) 50%,
        transparent 100%
    );
}

/* ========== 댓글 섹션 ========== */

.single-post-main .comments-section {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.single-post-main .comments-section > * {
    width: 100%;
    max-width: 768px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.single-post-main .comments-section > .responses-header {
    padding-top: var(--spacing-2xl);
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 1rem!important;
}

/* Responses 헤더 */
.single-post-main .responses-header {
    margin-bottom: var(--spacing-2xl);
    border-bottom: none;
}

.single-post-main .responses-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    font-family: var(--font-family-base);
}

/* Write Response 섹션 - Medium 스타일 */
.single-post-main .write-response-section {
    margin-bottom: var(--spacing-2xl);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: text;
    transition: all 0.2s ease;
}

.single-post-main .write-response-section:hover {
    border-color: transparent;
}

.single-post-main .write-response-section.expanded {
    background: transparent;
}

.single-post-main .write-response-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.single-post-main .write-response-avatar {
    flex-shrink: 0;
}

.single-post-main .write-response-avatar .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.single-post-main .write-response-content {
    flex: 1;
}

/* 댓글 목록 */
.single-post-main .comments-list-wrapper {
    margin: 0 0 var(--spacing-2xl) 0;
    padding-top: var(--spacing-2xl);
    border-top: 1px solid var(--color-border);
}

.single-post-main .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
}

.single-post-main .comment-item {
    margin: 0;
    padding: 0;
}

.single-post-main .comment-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* 댓글 헤더 */
.single-post-main .comment-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.single-post-main .comment-author-section {
    display: flex;
    gap: 3px;
    align-items: flex-start;
    flex: 1;
    position: relative;
}

/* 댓글 메뉴 */
.comment-menu-wrapper {
    position: relative;
    margin-left: auto;
}

.comment-menu-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.comment-menu-btn:hover {
    background: var(--color-surface);
}

.comment-menu-btn svg {
    stroke: currentColor;
}

.comment-menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 120px;
    z-index: 1000;
    margin-top: 4px;
}

body.dark-mode .comment-menu-dropdown {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.comment-delete-btn {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: #f44336;
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
    transition: background 0.2s;
}

.comment-delete-btn:hover {
    background: rgba(244, 67, 54, 0.1);
}

.single-post-main .comment-avatar {
    flex-shrink: 0;
}

.single-post-main .comment-avatar .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: block;
}

.single-post-main .comment-author-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.single-post-main .comment-author-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.single-post-main .comment-author-name .author-link {
    color: var(--color-text-primary);
    text-decoration: none;
}

.single-post-main .comment-author-name .author-link:hover {
    text-decoration: underline;
}

.single-post-main .comment-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.single-post-main .comment-date {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.single-post-main .comment-date:hover {
    text-decoration: underline;
}

.single-post-main .comment-awaiting-moderation {
    font-size: var(--font-size-xs);
    color: var(--color-accent);
    margin: 0;
    font-style: italic;
}

/* 댓글 콘텐츠 */
.single-post-main .comment-content {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.single-post-main .comment-content p {
    margin: 0 0 1em 0;
}

.single-post-main .comment-content p:last-child {
    margin-bottom: 0;
}

.single-post-main .comment-content b,
.single-post-main .comment-content strong {
    font-weight: 700;
}

.single-post-main .comment-content i,
.single-post-main .comment-content em {
    font-style: italic;
}

.single-post-main .comment-content u {
    text-decoration: underline;
}

.single-post-main .comment-content a {
    color: var(--color-accent);
    text-decoration: underline;
}

.single-post-main .comment-content a:hover {
    color: var(--color-accent-hover);
}

/* 댓글 액션 */
.single-post-main .comment-actions {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    font-size: var(--font-size-xs);
}

.single-post-main .comment-clap-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-xs);
    font-weight: 400;
}

.single-post-main .comment-clap-btn:hover {
    color: var(--color-accent);
}

.single-post-main .comment-clap-btn svg {
    width: 18px;
    height: 18px;
}

.single-post-main .comment-reply-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 400;
    line-height: 1;
}

.single-post-main .comment-reply-link:hover {
    color: var(--color-text-primary);
}

/* WordPress 댓글 폼 (숨김) */
.single-post-main .comment-form,
.single-post-main .comment-respond {
    display: none !important;
}

.single-post-main .comment-form-wrapper h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-lg) 0;
    font-family: var(--font-family-base);
}

/* 에디터 컨테이너 */
.single-post-main .editor-container {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.single-post-main .editor-wrapper {
    display: flex;
    flex-direction: column-reverse;
}

.single-post-main .editor-toolbar {
    display: none !important;
    gap: var(--spacing-sm);
    padding: 0!important;
    border-bottom: none;
    background: transparent;
    border-top: 0!important;
    margin-top: 0!important;
}

.single-post-main .write-response-section.expanded .editor-toolbar {
    display: flex !important;
}

.single-post-main .editor-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.single-post-main .editor-btn:hover {
    background: var(--color-border);
    color: var(--color-text-primary);
}

.single-post-main .editor-btn svg {
    width: 20px;
    height: 20px;
}

.single-post-main .editor-content {
    padding: 0;
    min-height: 24px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    outline: none;
    cursor: text;
}

.single-post-main .editor-content:empty::before {
    content: attr(data-placeholder);
    color: var(--color-text-secondary);
    pointer-events: none;
    opacity: 0.5;
}

.single-post-main .write-response-section.expanded .editor-content {
    min-height: 100px;
}

/* 폼 필드 (비로그인만) */
.single-post-main .form-fields {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding: 0;
    border: none;
    border-radius: 0;
}

.single-post-main .write-response-section.expanded .form-fields {
    display: grid;
}

.single-post-main .form-group {
    margin-bottom: 0;
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: 4px;
}

.single-post-main .form-group input {
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
    outline: none;
}

.single-post-main .form-group input:focus {
    outline: none;
    background: transparent;
}

.single-post-main .form-group input::placeholder {
    color: var(--color-text-secondary);
}

/* 액션 버튼 */
.single-post-main .form-actions {
    display: none !important;
    justify-content: flex-end;
    gap: var(--spacing-md);
    margin-top: 0!important;
    padding-top: 0!important;
    border-top: 0!important;
}

.single-post-main .write-response-section.expanded .form-actions {
    display: flex !important;
}

.single-post-main .cancel-btn {
    padding: 10px 24px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: transparent;
    color: var(--color-text-primary);
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s;
    cursor: pointer;
}

.single-post-main .cancel-btn:hover {
    background: var(--color-border);
}

.single-post-main .submit-btn {
    padding: 10px 24px;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-button);
    background: var(--color-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.2s;
    cursor: pointer;
}

.single-post-main .submit-btn:hover:not(:disabled) {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.single-post-main .submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.single-post-main .form-actions .submit-btn {
    padding: 10px 24px;
}

.single-post-main .no-comments {
    text-align: center;
    color: var(--color-text-secondary);
    padding: var(--spacing-2xl) 0;
    margin: 0;
}

/* 페이지네이션 */
.single-post-main .comments-pagination {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.single-post-main .comments-pagination a,
.single-post-main .comments-pagination span {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: transparent;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.single-post-main .comments-pagination a:hover {
    background: var(--color-surface);
    border-color: var(--color-border-dark);
}

.single-post-main .comments-pagination span.page-numbers.current {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* 반응형 */
@media (max-width: 768px) {
    .single-post-main .single-post {
        padding: 0 var(--spacing-md);
    }
    
    /* 모바일에서 썸네일 음수 마진 제거 (x 스크롤바 방지) */
    .single-post-main .post-thumbnail-section {
        margin: var(--spacing-3xl) 0;
        /* 모바일에서 높이 조정 */
        height: 300px;
    }
    
    /* 1400px 이하에서 이미지 확장 제거 */
    @media only screen and (max-width: 1400px) {
        .single-post-main .post-thumbnail-section {
            margin: var(--spacing-3xl) 0;
            height: 400px;
        }
    }
    
    .single-post-main .post-title {
        font-size: 2rem;
    }
    
    .single-post-main .post-subtitle {
        font-size: 1.125rem;
    }
    
    .single-post-main .post-content {
        font-size: 1rem;
    }
    
    .single-post-main .post-meta-section {
        flex-direction: column;
    }
    
    /* 댓글 반응형 */
        /* 댓글 제목 패딩 */
    .responses-title {
        padding-left: var(--spacing-md) !important;
        padding-right: var(--spacing-md) !important;
    }

    .single-post-main .comments-section > * {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .single-post-main .comment-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .single-post-main .comment-actions {
        flex-wrap: wrap;
    }
    
}

/* ========== 드래그 선택 툴팁 ========== */

/* 모바일 브라우저 기본 선택 메뉴 비활성화 */
.post-content *::selection {
    background: rgba(0, 123, 255, 0.2);
}

.post-content {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.selection-tooltip {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background-color: var(--color-surface-dark, #242424);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: slideUp 0.2s ease-out;
    position: fixed;
    z-index: 10000;
    pointer-events: auto;
    touch-action: manipulation;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.selection-tooltip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.2s;
}

.selection-tooltip-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .selection-tooltip {
    background-color: var(--color-surface);
    border-color: var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* 모바일/태블릿에서 하단 중앙 고정 */
@media (max-width: 1024px) {
    .selection-tooltip {
        bottom: var(--spacing-xl) !important;
        left: 50% !important;
        top: auto !important;
        transform: translateX(-50%) !important;
        border: 0 !important;
        animation: slideUpFromBottom 0.2s ease-out;
    }
    
    @keyframes slideUpFromBottom {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }
}

/* 인용 텍스트 미리보기 (에디터 내) */
.quoted-text-preview {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: 2px;
}

.quoted-text-preview .reply-to-info {
    margin-bottom: var(--spacing-xs);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
}

.quoted-text-preview .reply-to-info strong {
    font-weight: 600;
}

.quoted-text-preview p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
}

body.dark-mode .quoted-text-preview {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--color-text-secondary);
}

/* 인용 텍스트 (댓글 내) */
.quoted-text {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    background-color: var(--color-surface);
    border-left: 3px solid var(--color-text-secondary);
    border-radius: 2px;
}

.quoted-text p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    line-height: 1.5;
}

body.dark-mode .quoted-text {
    background-color: rgba(255, 255, 255, 0.05);
    border-left-color: var(--color-text-secondary);
}

/* ========== 댓글 폼 - Editor 스타일 ========== */

.write-response-section {
    border: none;
    border-radius: 0;
    padding: 0;
    background-color: transparent;
    margin-bottom: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.write-response-header {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    padding: 0 !important;
    margin: 1rem 0!important;
    background-color: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.write-response-header:hover {
    background-color: transparent;
}

.write-response-avatar {
    flex-shrink: 0;
}

.write-response-avatar .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.write-response-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.reply-label {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    font-weight: 500;
}

.write-response-editor {
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.editor-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.editor-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.editor-content {
    min-height: 60px;
    padding: var(--spacing-sm);
    border: 0 !important;
    border-radius: 4px;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background: transparent !important;
    outline: none !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.editor-content:focus {
    border-color: var(--color-text-primary);
    outline: none;
}

.editor-content[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: var(--color-text-secondary);
    pointer-events: none;
}

/* Input placeholder - editor-content와 동일한 방식 */
.form-group[data-placeholder]:before {
    content: attr(data-placeholder);
    color: var(--color-text-secondary);
    pointer-events: none;
    position: absolute;
    left: var(--spacing-md);
    top: calc(var(--spacing-md) + 2px);
    opacity: 0.5;
}

.form-group[data-placeholder]:has(input:focus):before,
.form-group[data-placeholder]:has(input:valid):before {
    display: none;
}

.editor-actions-wrapper {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: 0!important;
    padding-top: 0;
    padding-bottom: 0;
    border-top: none;
    width: 100%;
}

.editor-toolbar {
    display: flex;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
}

.editor-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    padding: 0;
}

.editor-btn:hover {
    background-color: var(--color-surface);
}

body.dark-mode .editor-btn {
    color: var(--color-text-primary);
}

body.dark-mode .editor-btn:hover {
    background-color: var(--color-surface);
}

.editor-btn svg {
    width: 20px;
    height: 20px;
    fill: none !important;
}

/* 비밀댓글 토글 버튼 */
.editor-btn.secret-toggle-btn svg {
    fill: none;
    stroke: currentColor;
    width: 16px;
    height: 16px;
}

.editor-btn.secret-toggle-btn.active {
    background-color: var(--color-accent);
    color: #fff;
}

.editor-btn.secret-toggle-btn.active svg {
    stroke: #fff;
}

body.dark-mode .editor-btn.secret-toggle-btn svg {
    fill: none;
    stroke: currentColor;
}

/* 비밀댓글 잠금 상태 */
.secret-comment-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--color-surface);
    border-radius: 8px;
    text-align: center;
}

.secret-lock-icon {
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.secret-lock-icon svg {
    stroke: currentColor;
}

.secret-message {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

.secret-password-form {
    display: flex;
    gap: var(--spacing-sm);
    width: 100%;
    max-width: 300px;
}

.secret-unlock-input {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface);
    color: var(--color-text-primary);
    font-size: 14px;
    outline: none;
}

.secret-unlock-input:focus {
    border-color: var(--color-accent);
    background: var(--color-background);
}

.secret-unlock-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.secret-unlock-btn:hover {
    background: var(--color-accent-hover);
}

.secret-unlock-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.secret-error-message {
    margin-top: var(--spacing-sm);
    color: #f44336;
    font-size: var(--font-size-sm);
}

/* 비밀댓글 뱃지 */
.secret-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

body.dark-mode .secret-badge {
    background: rgba(255, 255, 255, 0.1);
}

.secret-badge svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.form-fields {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: 0;
    border: none;
    border-radius: 0;
}

/* 댓글 폼 필드 숨김 처리 - 크롬 확장 프로그램 간섭 방지 */
#formFields,
#editorActionsWrapper {
    visibility: hidden !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
}

#formFields[style*="display: grid"],
#formFields[style*="display: flex"],
#formFields[style*="display: block"],
#editorActionsWrapper[style*="display: grid"],
#editorActionsWrapper[style*="display: flex"],
#editorActionsWrapper[style*="display: block"] {
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    left: auto !important;
}

.form-group {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border-radius: 4px;
}

.form-group input {
    padding: 0;
    border: none;
    border-radius: 0;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: transparent;
    outline: none;
}

.form-group input:focus {
    outline: none;
    background-color: transparent;
}

.form-group input::placeholder {
    color: var(--color-text-secondary);
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    align-items: center;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.cancel-btn,
.submit-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: 4px;
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: opacity 0.2s;
}

.cancel-btn {
    background-color: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.cancel-btn:hover {
    background-color: var(--color-border);
}

.submit-btn {
    background-color: var(--color-text-primary);
    color: var(--color-background);
}

.submit-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Expanded state */
.write-response-section.expanded {
    border: none;
}

.write-response-section.expanded .write-response-editor {
    border-color: var(--color-text-primary);
}

.write-response-section.expanded .form-fields {
    display: grid;
}

.write-response-section.expanded .editor-actions-wrapper {
    display: flex;
}

/* ========== 댓글 리스트 ========== */

.comments-section {
    max-width: 100%;
    width: 100%;
    margin: 0;
}

.responses-header {
    margin-bottom: var(--spacing-lg);
}

.responses-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    padding: 0;
}

.comments-list-wrapper {
    margin-bottom: var(--spacing-xl);
}

.comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.comment-item {
    margin: 0;
    padding: 0;
}

/* 답글 댓글 들여쓰기 */
.comment-item .comment-item {
    margin-left: var(--spacing-lg);
    margin-top: 0;
    padding-left: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-left: 2px solid var(--color-border);
}

/* 답글이 달려있는 댓글의 상위 댓글 comment-actions 보더 제거 */
.comment-item:has(> .comment-item) > .comment-wrapper > .comment-actions {
    border-bottom: none;
}

.comment-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.comment-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.comment-avatar {
    flex-shrink: 0;
}

.comment-avatar .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.comment-author-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.comment-author-name {
    font-weight: 600;
    font-size: 14px;
}

.comment-author-name a {
    color: var(--color-text-primary);
    text-decoration: none;
}

.comment-author-name a:hover {
    text-decoration: underline;
}

.comment-meta {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.comment-date {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.comment-date:hover {
    text-decoration: underline;
}

.comment-awaiting-moderation {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 0;
}

.comment-content {
    line-height: 1.6;
    color: var(--color-text-primary);
    word-wrap: break-word;
}

.comment-content p {
    margin: 0 0 var(--spacing-md) 0;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

.comment-content b,
.comment-content strong {
    font-weight: 700;
}

.comment-content i,
.comment-content em {
    font-style: italic;
}

.comment-content u {
    text-decoration: underline;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.comment-clap-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 13px;
    transition: color 0.2s;
}

.comment-clap-btn:hover {
    color: var(--color-text-primary);
}

.comment-clap-btn.liked {
    color: var(--color-accent);
}

.clap-count {
    font-size: 13px;
}

.comment-reply-link,
.comment-reply-link a {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--color-text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
    display: inline;
}

.comment-reply-link:hover,
.comment-reply-link a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

/* ========== 검색 및 아카이브 헤더 ========== */

.search-header,
.archive-header {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.search-title,
.archive-title {
    font-size: var(--font-size-2xl);
    font-weight: 600;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
}

.search-count,
.archive-description {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.archive-description p {
    margin: 0;
}

/* 카테고리 링크 */
.category-links {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
}

.category-link {
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition-transform);
    line-height: 1.4;
}

.category-link:hover {
    background: var(--color-text-primary);
    color: var(--color-background);
}

.category-link.current {
    background: var(--color-accent);
    color: white;
    border-color: var(--color-accent);
}

/* ========== 관련글 섹션 ========== */

.related-posts-section {
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--color-border);
}

.related-posts-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-lg);
}

.related-posts-title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-xl) 0;
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
}

/* 관련글은 홈의 posts-grid 스타일 재사용 */

/* ========== 목차(Table of Contents) ========== */

.table-of-contents {
    margin: var(--spacing-3xl) 0;
    padding: 0 0 var(--spacing-3xl) 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

.toc-header {
    margin-bottom: var(--spacing-lg);
    padding-bottom: 0;
    border-bottom: none;
}

.toc-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
    color: var(--color-text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-family-base);
}

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

.toc-list > li {
    margin: 0;
    padding: 0;
    counter-increment: toc-counter;
}

.toc-list > li::before {
    content: counter(toc-counter) ". ";
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--font-size-base);
}

.toc-link {
    display: inline;
    padding: 0;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 400;
    transition: color 0.2s ease;
}

.toc-link:hover {
    color: var(--color-accent);
}

.toc-sublist {
    list-style: none;
    margin: var(--spacing-xs) 0 var(--spacing-sm) 0;
    padding: 0 0 0 var(--spacing-md);
    counter-reset: toc-subcounter;
}

.toc-sublist li {
    margin: 0;
    padding: 0;
    counter-increment: toc-subcounter;
}

.toc-sublist li::before {
    content: counter(toc-counter) "." counter(toc-subcounter) " ";
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--font-size-sm);
}

/* ========== 우측 Sticky TOC (데스크톱 전용) ========== */

.sticky-toc-wrapper {
    position: fixed;
    top: calc(var(--header-height) + var(--spacing-2xl));
    right: max(calc((100vw - 1400px) / 2), var(--spacing-lg));
    width: 240px;
    max-height: calc(100vh - var(--header-height) - var(--spacing-3xl) * 2);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10;
    /* 스크롤바 숨김 */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sticky-toc-wrapper::-webkit-scrollbar {
    display: none;
}

/* 스크롤 시 표시 (JavaScript로 제어) */
.sticky-toc-wrapper.visible {
    opacity: 1;
    pointer-events: auto;
}

/* 관리자 바 있을 때 */
body.admin-bar .sticky-toc-wrapper {
    top: calc(32px + var(--header-height) + var(--spacing-2xl));
}

.sticky-toc {
    margin: 0;
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    list-style: none;
}

.sticky-toc-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-family-base);
}

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

.sticky-toc-list > li {
    margin: 0 0 var(--spacing-xs) 0;
    padding: 0;
    counter-increment: sticky-toc-counter;
}

.sticky-toc-list > li::before {
    content: counter(sticky-toc-counter) ". ";
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--font-size-xs);
}

.sticky-toc-link {
    display: inline;
    padding: 0;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    font-weight: 400;
    transition: color 0.2s ease;
}

.sticky-toc-link:hover {
    color: var(--color-accent);
}

.sticky-toc-link.active {
    color: var(--color-accent);
    font-weight: 400;
}

.sticky-toc-sublist {
    list-style: none;
    margin: var(--spacing-xs) 0 0 0;
    padding: 0 0 0 var(--spacing-md);
    counter-reset: sticky-toc-subcounter;
}

.sticky-toc-sublist li {
    margin: 0 0 var(--spacing-xs) 0;
    padding: 0;
    counter-increment: sticky-toc-subcounter;
}

.sticky-toc-sublist li::before {
    content: counter(sticky-toc-counter) "." counter(sticky-toc-subcounter) " ";
    color: var(--color-text-secondary);
    font-weight: 400;
    font-size: var(--font-size-xs);
}

/* 다크모드 */
body.dark-mode .sticky-toc {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

/* 태블릿 이하에서는 숨김 */
@media (max-width: 1400px) {
    .sticky-toc-wrapper {
        display: none;
    }
}

/* ========== 커스텀 라이트박스 ========== */

.custom-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--transition-slow);
}

.custom-lightbox-overlay.active {
    display: flex;
    opacity: 1;
}

.dark-mode .custom-lightbox-overlay {
    background-color: rgba(0, 0, 0, 0.95);
}

.custom-lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-circle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000000;
}

.custom-lightbox-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

.dark-mode .custom-lightbox-close {
    background: rgba(255, 255, 255, 0.2);
}

.dark-mode .custom-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.custom-lightbox-close svg {
    color: #fff;
}

.dark-mode .custom-lightbox-close svg {
    color: #fff;
}

.custom-lightbox-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none !important;
    background: transparent !important;
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    filter: none;
    opacity: 1;
    backdrop-filter: none;
}

.dark-mode .custom-lightbox-image {
    box-shadow: none !important;
    background: transparent !important;
}

/* 포스트 콘텐츠 내 이미지 커서 */
.post-content img {
    cursor: zoom-in;
}

.post-content img.avatar {
    cursor: default;
}

/* ========== 홈 카테고리 섹션 ========== */

.home-section {
    margin-bottom: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.home-section:last-child {
    border-bottom: none;
}

/* 섹션 헤더 */
.feature_focus {
    margin-bottom: var(--spacing-xl);
}

.tit_focus {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.txt_g {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.tit_g {
    display: block;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.desc_focus {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* 더보기 버튼 */
.section-more {
    text-align: center;
    margin-top: var(--spacing-xl);
}

.btn-more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-button);
    text-decoration: none;
    transition: var(--transition-transform);
}

.btn-more:hover {
    background-color: var(--color-text-primary);
    color: var(--color-background);
    border-color: var(--color-text-primary);
    transform: translateY(-1px);
}

/* ========== 미니멀 박스 스타일 ========== */

.posts-minimal-box {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.minimal-box-item {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    .minimal-box-item {
        flex: 1 1 calc(50% - var(--spacing-md) / 2);
    }
}

@media (min-width: 1024px) {
    .minimal-box-item {
        flex: 1 1 calc(33.333% - var(--spacing-md) * 2 / 3);
    }
}

.minimal-box-link {
    display: block;
    padding: var(--spacing-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    transition: var(--transition-transform);
    height: 100%;
    background-color: var(--color-background);
}

.minimal-box-link:hover {
    border-color: var(--color-text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.dark-mode .minimal-box-link:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.minimal-box-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.minimal-box-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-md) 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.minimal-box-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    display: block;
}

/* ========== 리스트 스타일 ========== */

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

.list-item {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
    border-bottom: 1px solid var(--color-border);
}

.list-item:last-child {
    border-bottom: none;
}

.list-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    position: relative;
    background-color: var(--color-surface); /* CLS 방지 */
}

@media (min-width: 768px) {
    .list-thumbnail {
        width: 180px;
        height: 120px;
    }
}

.list-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-transform);
    display: block;
    /* aspect-ratio는 고정 크기이므로 object-fit: cover로 처리 */
}


.list-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.list-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    line-height: 1.4;
}

.list-title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.list-title a:hover {
    color: var(--color-accent);
}

.list-excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.list-meta {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
}

/* 모바일에서 리스트 아이템 세로 정렬 */
@media (max-width: 480px) {
    .list-item {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .list-thumbnail {
        width: 100%;
        height: 200px;
    }
}

/* ========== 반응형 테이블 ========== */

.wp-block-table {
    margin: var(--spacing-2xl) 0;
    overflow: visible;
}

/* 테이블 래퍼 (스크롤 컨테이너) */
.wp-block-table figure,
.wp-block-table {
    position: relative;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: var(--color-background);
    font-size: var(--font-size-sm);
}

/* 테이블 헤더 */
.wp-block-table thead {
    background-color: var(--color-surface);
    border-bottom: 1px solid !important;
}

.wp-block-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border) !important;
    white-space: nowrap;
}

/* 테이블 바디 */
.wp-block-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}

.wp-block-table tbody tr {
    transition: background-color 0.2s ease;
}

.wp-block-table tbody tr:hover {
    background-color: var(--color-surface);
}

/* 다크모드 최적화 */
body.dark-mode .wp-block-table th {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .wp-block-table td {
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .wp-block-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* 테이블 스크롤 스타일 (JavaScript가 has-scroll 클래스 추가 시 활성화) */
.wp-block-table.has-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
    padding-bottom: var(--spacing-xl);
}

/* 웹킷 브라우저 스크롤바 */
.wp-block-table.has-scroll::-webkit-scrollbar {
    height: 6px;
}

.wp-block-table.has-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.wp-block-table.has-scroll::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 3px;
}

/* 스크롤 힌트 (그라데이션 오버레이) */
.wp-block-table.has-scroll::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--spacing-xl);
    width: 40px;
    background: linear-gradient(
        to left,
        var(--color-background) 0%,
        transparent 100%
    );
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* 스크롤 시작하면 즉시 힌트 숨김 */
.wp-block-table.scrolled::after {
    opacity: 0;
}

/* 다크모드 그라데이션 */
body.dark-mode .wp-block-table.has-scroll::after {
    background: linear-gradient(
        to left,
        var(--color-background) 0%,
        transparent 100%
    );
}

/* 스크롤 힌트 메시지 - 기본 숨김 */
.table-scroll-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background-color: var(--color-background);
    border-top: 1px solid var(--color-border);
    opacity: 1;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

/* has-scroll 클래스가 있을 때만 힌트 표시 */
.wp-block-table.has-scroll .table-scroll-hint {
    display: flex;
}

.table-scroll-hint svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* 스크롤 시작하면 힌트 숨김 */
.wp-block-table.scrolled .table-scroll-hint {
    opacity: 0;
}

/* 다크모드 힌트 */
body.dark-mode .table-scroll-hint {
    border-color: rgba(255, 255, 255, 0.1);
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    /* 테이블 최소 너비 보장 */
    .wp-block-table table {
        min-width: 600px;
    }
    
    /* 셀 패딩 조정 */
    .wp-block-table th,
    .wp-block-table td {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-xs);
    }
}

/* 매우 작은 화면 */
@media (max-width: 480px) {
    .wp-block-table th,
    .wp-block-table td {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* ========== 연령제한/스포일러 이미지 블러 ========== */

.blur-image-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    margin: var(--spacing-2xl) 0;
    overflow: hidden;
}

.blur-image-wrapper figure {
    margin: 0;
}

.blur-image {
    filter: blur(50px) brightness(0.8);
    transition: filter 0.3s ease;
    width: 100%;
    height: auto;
}

.blur-image.revealed {
    filter: blur(0);
}

.blur-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.blur-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.blur-overlay-content {
    text-align: center;
    color: white;
    padding: var(--spacing-xl);
    max-width: 400px;
}

.blur-overlay-icon {
    margin-bottom: var(--spacing-md);
    opacity: 0.9;
}

.blur-overlay-icon svg {
    width: 48px;
    height: 48px;
    stroke: currentColor;
}

.blur-overlay-message {
    font-size: var(--font-size-base);
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg) 0;
    color: rgba(255, 255, 255, 0.95);
}

.blur-overlay-button {
    background: white;
    color: var(--color-text-primary);
    border: none;
    padding: var(--spacing-sm) var(--spacing-xl);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.blur-overlay-button:hover {
    background: var(--color-surface);
    transform: translateY(-1px);
}

.blur-overlay-button:active {
    transform: translateY(0);
}

/* 다크모드 */
body.dark-mode .blur-overlay {
    background: rgba(0, 0, 0, 0.9);
}

body.dark-mode .blur-overlay-button {
    background: rgba(255, 255, 255, 0.9);
    color: #242424;
}

body.dark-mode .blur-overlay-button:hover {
    background: rgba(255, 255, 255, 1);
    color: #191919;
}

/* 반응형 */
@media (max-width: 768px) {
    .blur-overlay-content {
        padding: var(--spacing-lg);
    }
    
    .blur-overlay-icon svg {
        width: 36px;
        height: 36px;
    }
    
    .blur-overlay-message {
        font-size: var(--font-size-sm);
    }
    
    .tit_g {
        font-size: var(--font-size-xl);
    }
    
    .desc_focus {
        font-size: var(--font-size-sm);
    }
}

/* ========== 다크모드 텍스트 색상 통일 ========== */

/* 헤딩 색상 (#e8e8e8) - var(--color-text-primary) 사용 */
body.dark-mode .single-post-main .post-content h2,
body.dark-mode .single-post-main .post-content h3.wp-block-heading,
body.dark-mode .single-post-main .post-content h4,
body.dark-mode .single-post-main .post-content h5,
body.dark-mode .single-post-main .post-content h6,
body.dark-mode .responses-title,
body.dark-mode .comment-author-name,
body.dark-mode .comment-author-name a,
body.dark-mode .post-card-title,
body.dark-mode .post-card-title a,
body.dark-mode .no-posts h2,
body.dark-mode .search-title,
body.dark-mode .drawer-menu > li > a,
body.dark-mode .wp-block-table th,
body.dark-mode .section-title,
body.dark-mode .tit_g {
    color: var(--color-text-primary) !important;
}

/* 본문 및 댓글 내용 색상 (#dcdcdc) */
body.dark-mode .comment-content,
body.dark-mode .single-post-main .comment-content {
    color: #dcdcdc !important;
}

/* ========== Go to Top 버튼 ========== */
.go-to-top {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    width: 48px;
    height: 48px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.go-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.go-to-top:hover {
    background: var(--color-surface);
    border-color: var(--color-border-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.go-to-top svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-text-primary);
}

body.dark-mode .go-to-top {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .go-to-top:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ========== 블록 이미지 스타일 (Apple 방식) ========== */
/* 이미지 블록이 이미지 크기에 맞춰지도록 설정 */
.wp-block-image {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-image.size-full {
    max-width: 100%;
}

.wp-block-image .aligncenter {
    /* 기본: 포스트 너비 + 10em 확장 (1400px 이상에서만) */
    margin-top: 2em !important;
    margin-bottom: 2em !important;
    margin-left: -54px !important; /* (788px - 680px) / 2 = 54px */
    margin-right: -54px !important;
    width: 788px !important;
    max-width: 788px !important;
}

@media only screen and (max-width: 1400px) {
    .wp-block-image .aligncenter {
        /* TOC 숨겨지는 시점부터 포스트 너비에 맞춤 */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 680px !important;
    }
}

@media only screen and (max-width: 734px) {
    .wp-block-image .aligncenter {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .go-to-top {
        bottom: var(--spacing-lg);
        right: var(--spacing-lg);
        width: 44px;
        height: 44px;
    }
    
    .go-to-top svg {
        width: 18px;
        height: 18px;
    }
}

/* ========== 문의 폼 스타일 ========== */
.contact-form-wrapper {
    max-width: 680px;
    margin: 0 auto;
    padding: var(--spacing-2xl) 0;
}

.contact-form-container {
    background: transparent;
    border: none;
    padding: 0;
}

.contact-form-description {
    font-size: var(--font-size-md);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-2xl) 0;
    line-height: 1.6;
}

/* 허니팟 숨김 */
.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* 폼 그룹 */
.contact-form .form-group {
    margin-bottom: var(--spacing-2xl);
}

.contact-form .form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.contact-form .required {
    color: var(--color-accent);
    margin-left: 2px;
}

/* 입력 필드 */
.contact-form .form-input,
.contact-form .form-textarea {
    width: 100%;
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-md);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    transition: border-color 0.2s ease;
}

.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
    outline: none;
    border-bottom-color: var(--color-text-primary);
}

.contact-form .form-input::placeholder,
.contact-form .form-textarea::placeholder {
    color: var(--color-text-secondary);
    opacity: 0.6;
}

.contact-form .form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* 파일 입력 */
.contact-form .form-file {
    width: 100%;
    padding: var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
}

.contact-form .form-file::-webkit-file-upload-button {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-primary);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    cursor: pointer;
    margin-right: var(--spacing-md);
}

.contact-form .form-file::-webkit-file-upload-button:hover {
    background: var(--color-surface);
}

.contact-form .form-help {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: var(--spacing-md) 0 0 0!important;
    line-height: 1.4;
}

/* 파일 미리보기 */
.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.file-preview-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.file-preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.file-preview-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
}

.file-preview-remove:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* 체크박스 */
.contact-form .form-checkbox-group {
    margin-bottom: var(--spacing-2xl);
}

.contact-form .form-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    cursor: pointer;
}

.contact-form .form-checkbox {
    width: 18px!important;
    height: 18px!important;
    margin: 0!important;
    cursor: pointer!important;
    flex-shrink: 0!important;
    accent-color: var(--color-accent)!important;
}

.contact-form .checkbox-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
}

/* 수학 문제 */
.math-challenge {
    padding: var(--spacing-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    margin-bottom: var(--spacing-2xl);
}

.math-challenge .form-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.math-challenge .math-question {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-accent);
}

.math-challenge .form-input {
    border-bottom: 1px solid var(--color-border);
}

/* 제출 버튼 */
.contact-form-actions {
    margin-top: var(--spacing-2xl);
}

.contact-submit-btn {
    padding: var(--spacing-md) var(--spacing-2xl);
    font-size: var(--font-size-md);
    font-weight: 600;
    font-family: var(--font-family-base);
    color: #fff !important;
    background: var(--color-text-primary) !important;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s ease;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.contact-submit-btn:hover {
    opacity: 0.8;
}

.contact-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

body.dark-mode .contact-submit-btn {
    color: var(--color-text-primary) !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
}

body.dark-mode .contact-submit-btn:hover {
    background: var(--color-background) !important;
}

.contact-submit-btn .btn-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 스피너 */
.spinner {
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
}

.spinner-circle {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-dasharray: 50;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes dash {
    0% { stroke-dashoffset: 50; }
    50% { stroke-dashoffset: 12.5; }
    100% { stroke-dashoffset: 50; }
}

/* 메시지 */
.contact-message {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: 4px;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border: 1px solid var(--color-border);
}

.contact-message.success {
    background: var(--color-surface);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.contact-message.error {
    background: var(--color-surface);
    color: #ef4444;
    border-color: #ef4444;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: var(--spacing-xl) var(--spacing-md);
    }
    
    .contact-form .form-input,
    .contact-form .form-textarea {
        font-size: var(--font-size-base);
    }
    
    .contact-submit-btn {
        width: 100%;
    }
}



/* kadence - Full-bleed 이미지 레이아웃 */
/* 부모 컨테이너(.kt-row-layout-inner, .kb-row-layout-wrap)는 720px */

/* 데스크톱: Full-bleed 디자인 (1024px 이상) */
@media screen and (min-width: 1024px) {
    .kt-row-column-wrap {
        margin-top: 0em !important;
        margin-bottom: 2em !important;
        margin-left: -54px !important;
        margin-right: -54px !important;
        width: 828px !important; /* 720px + 108px */
        max-width: 828px !important;
        padding: 0 !important;
    }
}

/* 태블릿: 작은 음수 마진 (783px ~ 1023px) */
@media screen and (min-width: 783px) and (max-width: 1023px) {
    .kt-row-column-wrap {
        margin-top: 0em !important;
        margin-bottom: 2em !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
        max-width: calc(100% + 32px) !important;
        padding: 0 !important;
    }
}

/* 모바일: 음수 마진 제거 (782px 이하) */
@media screen and (max-width: 782px) {
    .kt-row-column-wrap {
        margin-top: 0em !important;
        margin-bottom: 2em !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* 모든 사이즈 공통 */
.kt-row-column-wrap figure,
.kt-row-column-wrap figure img {
    margin: 0 !important;
    max-width: 100% !important;
}

.kt-row-column-wrap figure {
    overflow: hidden !important;
}

.kt-row-column-wrap figure img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* body 전체 가로 스크롤 방지 (음수 마진 허용하면서) */
body {
    overflow-x: clip !important;
}

/* ========== 이미지 로딩 최적화 (LQIP 버전) ========== */

/* 모든 이미지 기본 스타일 - CLS 방지 */
img[loading="lazy"],
img[data-src],
.post-card-thumbnail img,
.post-thumbnail img,
.post-thumbnail-image,
.related-post-thumbnail img,
.list-thumbnail img,
.list-image {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 0.4s ease-in-out, filter 0.4s ease-in-out, transform 0.4s ease-in-out;
}

/* LQIP가 있는 이미지 - LQIP 배경 이미지 표시 + blur 효과 */
img[data-lqip] {
    opacity: 1 !important;
    background-image: var(--lqip-bg) !important;
}

img[data-lqip]:not(.loaded) {
    filter: blur(10px) !important;
}

/* LQIP 없는 이미지는 배경색만 표시 (자리 표시자 역할) */
/* 라이트박스 이미지는 제외 (항상 보여야 함) */
img[data-src]:not([data-lqip]):not(.loaded):not(.custom-lightbox-image),
img[loading="lazy"]:not([data-lqip]):not(.loaded):not(.custom-lightbox-image) {
    opacity: 0;
    background-color: var(--color-surface); /* LQIP 없을 때만 배경색 표시 */
}

/* 라이트박스 이미지는 항상 보이도록 설정 */
.custom-lightbox-image {
    opacity: 1 !important;
}

/* 다크모드 배경색 - LQIP 없는 이미지에만 적용 */
body.dark-mode img[data-src]:not([data-lqip]):not(.loaded):not(.custom-lightbox-image),
body.dark-mode img[loading="lazy"]:not([data-lqip]):not(.loaded):not(.custom-lightbox-image) {
    background-color: #2a2a2a;
}

/* 이미지 로드 완료 시 - blur와 transform 제거 + LQIP 배경 제거 */
img.loaded,
.post-card-thumbnail img.loaded,
.post-thumbnail img.loaded,
.post-thumbnail-image.loaded,
.related-post-thumbnail img.loaded,
.list-thumbnail img.loaded,
.list-image.loaded {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    background-image: none !important; /* LQIP 배경 제거 */
}

/* eager 로딩 이미지는 항상 즉시 표시 */
img[loading="eager"],
img:not([loading]):not([data-src]) {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
}

/* ========== iOS Input 줌인 방지 ========== */
/* iOS Safari에서 input 포커스 시 자동 줌인 방지 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    /* 16px 이상이어야 iOS에서 줌인 안 됨 */
    font-size: 16px !important;
}

/* form-group 내 input도 적용 */
.form-group input,
.form-group textarea,
.form-group select {
    font-size: 16px !important;
}

/* 포커스 상태에서도 줌인 방지 */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    font-size: 16px !important;
}
/* ========== 오버레이 스타일 ========== */

.posts-overlay {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--spacing-md);
}

.overlay-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-card);
    aspect-ratio: 16 / 9;
    transition: transform 0.3s ease;
}

.overlay-item:hover {
    transform: translateY(-4px);
}

.overlay-item a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.overlay-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    color: #fff;
    z-index: 2;
}

.overlay-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: #fff;
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.overlay-excerpt {
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 반응형 */
@media (min-width: 768px) {
    .posts-overlay {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
    
    .overlay-title {
        font-size: var(--font-size-xl);
    }
}

@media (min-width: 1024px) {
    .posts-overlay {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 관련글 오버레이 스타일 */
.related-posts.posts-overlay .overlay-item {
    aspect-ratio: 4 / 3;
}

.related-posts.posts-overlay {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

@media (min-width: 768px) {
    .related-posts.posts-overlay {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .related-posts.posts-overlay {
        grid-template-columns: repeat(3, 1fr);
    }
}