/* ════════════════════════════════════════════════════════════════
   Elpam.log — V74.0 "Lumina"
   Design: Editorial Clarity × Technical Precision
   Concept: Deep Space Navy + Azure Sapphire (Personal Blue)
   2026 Knowledge Blog — Low Eye Strain / High Readability
   ════════════════════════════════════════════════════════════════ */

/* ── CSS 변수 시스템 (다크 모드 기본) ── */
:root {
    color-scheme: dark;

    /* ── Azure Sapphire — Personal Blue ─────────────────────
       #60A5FA : Sky Blue (다크 배경 액센트)
       #3B82F6 : Cobalt Blue (그라디언트 미드)
       #2563EB → #1E40AF : Sapphire Deep (그라디언트 끝)
    ─────────────────────────────────────────────────────── */
    --accent:         #60A5FA;
    --accent-2:       #3B82F6;
    --accent-3:       #93C5FD;
    --accent-warm:    #FB923C;  /* 경고·warning callout 강조색 */
    --accent-glow:    rgba(96, 165, 250, 0.14);
    --accent-line:    linear-gradient(135deg, #60A5FA 0%, #3B82F6 55%, #2563EB 100%);

    /* ── Gemini-style Neutral Dark Backgrounds ─────────────
       #131314 : 메인 배경 (Gemini dark 중립 다크)
       #0C0C0D : 사이드바 (더 어두운 레이어)
       #1C1C1E : 카드 표면 (Claude dark elevated)
    ─────────────────────────────────────────────────────── */
    --bg-main:    #131314;
    --bg-sidebar: #0C0C0D;
    --bg-card:    #1C1C1E;
    --bg-card-2:  #232325;
    --bg-elevated:#2C2C2E;
    --bg-pre:     #111113;   /* #0A0A0B → 배경(#131314)과 조화롭게 */
    --bg-header:  rgba(19, 19, 20, 0.92);

    /* ── Borders ── */
    --border:     #2E2F33;   /* #2A2B2E → 카드와 구분 더 명확 */
    --border-2:   #3A3B3F;
    --border-glow:rgba(96, 165, 250, 0.22);

    /* ── Neutral Typography — Gemini-style ── */
    --text-main:  #E3E3E3;
    --text-strong:#F5F5F5;
    --text-dim:   #8E8E93;
    --text-pre:   #D0D0D4;
    --pre-border: rgba(96, 165, 250, 0.10);

    /* ── Depth / Shadow ── */
    --shadow:      rgba(0, 0, 0, 0.6);
    --glow-accent: 0 0 28px rgba(96, 165, 250, 0.18), 0 0 56px rgba(96, 165, 250, 0.06);
    --glow-card:   0 4px 24px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.04) inset;

    /* ── Motion ── */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ── Layout ── */
    --sidebar-w: clamp(260px, 19vw, 320px);   /* 272px 고정→clamp: 큰 화면 대응 */
    --header-h:  60px;
    --content-w: 740px;

    /* ── Radius ── */
    --radius-xs: 5px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;    /* 대형 모달·오버레이용 예약 */

    scrollbar-width: thin;
    scrollbar-color: var(--border-2) transparent;
}

[data-theme='light'] {
    color-scheme: light;

    /* ── Azure Sapphire — Light Mode ────────────────────────
       #2563EB : Sapphire Blue (AA+ 대비비율 5.2:1)
       #1D4ED8 : Deep Sapphire (그라디언트 끝)
    ─────────────────────────────────────────────────────── */
    --accent:       #2563EB;
    --accent-2:     #1D4ED8;
    --accent-3:     #60A5FA;
    --accent-warm:  #EA580C;   /* 경고·warning callout 강조색 (라이트 모드) */
    --accent-glow:  rgba(37, 99, 235, 0.11);
    --accent-line:  linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #1E40AF 100%);

    /* ── Warm Parchment Backgrounds ─────────────────────
       #FAFAF8 : 따뜻한 오프화이트 (눈 피로 최소화)
       #F3F2EC : 따뜻한 파치먼트 사이드바
    ─────────────────────────────────────────────────────── */
    --bg-main:    #FAF9F7;
    --bg-sidebar: #F0EFEB;
    --bg-card:    #FFFFFF;
    --bg-card-2:  #F5F4F0;
    --bg-elevated:#ECEAE5;
    --bg-pre:     #F4F5F9;   /* 라이트 코드 배경 — 미세하게 차갑게 */
    --bg-header:  rgba(250, 249, 247, 0.95);

    --border:     #E5E3DC;
    --border-2:   #D1CDC8;
    --border-glow:rgba(37, 99, 235, 0.20);

    --text-main:  #1C1C1E;
    --text-strong:#050505;
    --text-dim:   #6C6C72;
    --text-pre:   #1C1C1E;
    --pre-border: rgba(37, 99, 235, 0.07);

    --shadow:     rgba(0, 0, 0, 0.08);
    --glow-accent:0 4px 20px rgba(37, 99, 235, 0.16);
    --glow-card:  0 2px 12px rgba(0, 0, 0, 0.06), 0 1px 0 rgba(255, 255, 255, 1.0) inset;

    scrollbar-width: thin;
    scrollbar-color: #C5C3BC transparent;   /* 라이트 모드 스크롤바 */
}

/* ════════════════════════════════════
   🔧 시스템 초기화
   ════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    font-optical-sizing: auto;
}
body {
    margin: 0; padding: 0;
    width: 100%;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
                 system-ui, Roboto, 'Noto Sans KR', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
    overscroll-behavior-y: none;
}
/* 노이즈 텍스처 — body::before 에 분리하여 transition과 충돌 방지 */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
    opacity: 0.7;
    transition: opacity 0.4s ease;
}
[data-theme='light'] body::before {
    opacity: 0.5;   /* 라이트 노이즈 1.0→0.5: 눈 피로 감소 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
a, button {
    text-decoration: none; color: inherit;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
                border-color 0.2s var(--ease), opacity 0.2s var(--ease),
                transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
    outline: none; cursor: pointer;
    pointer-events: auto; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
input, textarea {
    font-family: inherit; outline: none;
    touch-action: manipulation;
    -webkit-appearance: none; appearance: none; border-radius: 0;
}
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: auto !important; appearance: auto !important;
    border-radius: 3px !important; width: auto !important; height: auto !important;
}
*:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 3px;
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--accent-glow) !important;
}
[data-theme='light'] *:focus-visible {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20) !important;   /* 라이트: 더 명확한 glow */
}
p:empty { display: none !important; }
p:has(> br:only-child) { display: none !important; }   /* CSS :has() 방식 — 호환성 향상 */

/* ── 스크롤바 ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-2); border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
[data-theme='light'] ::-webkit-scrollbar-thumb { background: #C5C3BC; }
[data-theme='light'] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
::selection {
    background: var(--accent);
    color: #fff;
    /* text-shadow 제거 — 선택 시 glow 눈부심 방지 */
}
[data-theme='light'] ::selection {
    background: var(--accent);
    color: #fff;
}

/* ── 스킵 내비게이션 (접근성) ── */
.skip-nav {
    position: fixed; top: -100%; left: 16px; z-index: 99999;
    background: var(--accent); color: #fff !important;
    padding: 12px 20px;
    border-radius: 0 0 8px 8px;
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: top 0.2s var(--ease);
    white-space: nowrap;
}
.skip-nav:focus { top: 0; }
#tistorytoolbarid, .tt_menubar { z-index: 2100 !important; }

#app-container {
    width: 100%; min-height: 100vh;
    display: flex; flex-direction: column; min-width: 0;
}
.mobile-only { display: none !important; }

/* ════════════════════════════════════
   🏠 헤더
   ════════════════════════════════════ */
#header {
    position: fixed; top: 0; left: 0;
    width: 100%; height: var(--header-h);
    background: var(--bg-header);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    /* 항상 표시되는 구분선 — 스크롤 전후 모두 경계 명확 */
    border-bottom: 1px solid var(--border);
    z-index: 2000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px 0 16px;
    transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
                background-color 0.3s var(--ease);
    transform: translateZ(0); will-change: transform;
}
/* 헤더 하단 액센트 라인 — 항상 표시 (읽기 진행바 아래 배치) */
#header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--accent) 30%,
        var(--accent-2) 70%, transparent 100%);
    opacity: 0.25;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
}
#header.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 var(--border),
                0 4px 20px rgba(0,0,0,0.18),
                0 12px 40px rgba(0,0,0,0.10);
}
#header.scrolled::after { opacity: 0.55; }
[data-theme='light'] #header {
    background: var(--bg-header);
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 var(--border), 0 2px 8px rgba(0,0,0,0.04);
}
[data-theme='light'] #header.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.06);
}
[data-theme='light'] #header::after {
    background: linear-gradient(90deg,
        transparent 0%, var(--accent) 30%,
        var(--accent-2) 70%, transparent 100%);
    opacity: 0.18;
}
[data-theme='light'] #header.scrolled::after { opacity: 0.40; }

/* 읽기 진행 표시줄 */
#reading-progress {
    position: absolute; bottom: -1px; left: 0;
    width: 100%; height: 2px;
    background: var(--accent-line);
    transform: scaleX(0); transform-origin: left;
    will-change: transform;
    border-radius: 99px;
    transition: transform 0.05s linear;
    opacity: 0.9;
}

.header-left {
    display: flex; align-items: center; gap: 12px;
    min-width: 0; flex: 1; overflow: hidden;
}
.header-utils {
    display: flex; align-items: center; gap: 6px;
    padding-right: 52px;   /* Tistory 툴바 고려 — 56→52px */
    flex-shrink: 0;
}

/* 아이콘 버튼 공통 */
.icon-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: none;
    color: var(--text-dim);
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
    flex-shrink: 0;
}
.icon-btn:hover { background: var(--accent-glow); color: var(--accent); }
.icon-btn:active { transform: scale(0.92); }
#sidebar-toggle { display: flex; }
/* 기본(사이드바 열림): menu 아이콘 표시, close 아이콘 숨김 */
#sidebar-toggle .icon-menu  { display: block; }
#sidebar-toggle .icon-close { display: none; }
/* 사이드바 닫힘(PC): close→menu 전환 */
body.sidebar-closed #sidebar-toggle .icon-menu  { display: block; }
body.sidebar-closed #sidebar-toggle .icon-close { display: none; }
/* 모바일 사이드바 열림: menu→close 전환 */
body.sidebar-open #sidebar-toggle .icon-menu  { display: none; }
body.sidebar-open #sidebar-toggle .icon-close { display: block; }

/* 테마 전환 버튼 */
[data-theme='dark'] .icon-moon { display: block; }
[data-theme='dark'] .icon-sun  { display: none; }
[data-theme='light'] .icon-moon { display: none; }
[data-theme='light'] .icon-sun  { display: block; }

/* 로고 */
.logo {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem; font-weight: 800;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: calc(100% - 100px); flex: 1; min-width: 0;
    letter-spacing: -0.03em;
}
.logo a {
    color: var(--text-strong);
    display: flex; align-items: center; gap: 9px;
    border-radius: var(--radius-xs);
}
.logo a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.tech-icon {
    color: var(--accent);
    display: flex; align-items: center;
    filter: drop-shadow(0 0 8px var(--accent));
    transition: filter 0.3s var(--ease);
    flex-shrink: 0;
}
.logo a:hover .tech-icon { filter: drop-shadow(0 0 14px var(--accent)); }
.blink-cursor {
    color: var(--accent);
    animation: blink 1.1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ════════════════════════════════════
   📐 레이아웃 골격
   ════════════════════════════════════ */
.main-wrapper {
    display: flex; width: 100%;
    padding-top: var(--header-h); flex: 1; min-width: 0;
}

/* ── 사이드바 ── */
#sidebar {
    position: fixed; top: var(--header-h); left: 0;
    width: var(--sidebar-w);
    height: calc(100dvh - var(--header-h));   /* dvh: iOS 주소창 대응 */
    background: linear-gradient(180deg, var(--bg-sidebar) 0%, #0F0F10 100%);  /* 적당히 어둡게 */
    border-right: 1px solid var(--border);
    z-index: 1500; overflow-y: auto; padding: 24px 18px 48px;   /* 80→48px */
    visibility: visible;
    -webkit-overflow-scrolling: touch;
    transition: transform 0.4s var(--ease), visibility 0s, background-color 0.3s var(--ease);
    transform: translateZ(0); will-change: transform;
}
[data-theme='light'] #sidebar {
    background: linear-gradient(180deg, #EDECEA 0%, #E5E3DE 100%);  /* 더 어두운 라이트 사이드바 */
    border-right-color: var(--border);
    box-shadow: 2px 0 8px rgba(0,0,0,0.06);
}
#sidebar::-webkit-scrollbar { width: 3px; }
#sidebar::-webkit-scrollbar-track { background: transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

body.sidebar-closed #sidebar {
    transform: translateX(-100%); visibility: hidden;
    transition: transform 0.4s var(--ease), visibility 0s 0.4s;
}

/* ── 메인 콘텐츠 ── */
#main-content {
    flex: 1; display: flex; flex-direction: column;
    padding-left: var(--sidebar-w); width: 100%; min-width: 0; max-width: 100%;
    transition: padding-left 0.4s var(--ease);
}
body.sidebar-closed #main-content { padding-left: 0; }

#main {
    padding: 48px 5%;
    max-width: 1200px; margin: 0 auto; width: 100%; min-width: 0;
    flex: 1; display: flex; flex-direction: column;
    animation: fadeInUp 0.55s var(--ease) both;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }   /* scale 제거 완료 */
    to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════
   🎨 사이드바 위젯 공통
   ════════════════════════════════════ */
.sidebar-widget { margin-bottom: 0; }
.sidebar-widget + .sidebar-widget {
    border-top: 1px solid var(--border);
    padding-top: 18px; margin-top: 12px;   /* 간격 통일 */
}

.widget-title {
    font-size: 9px;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px;
    opacity: 1;   /* 0.9 → 1.0 더 명확 */
}
.widget-title::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border-2) 0%, transparent 100%);
}

/* ════════════════════════════════════
   👤 프로필 위젯
   ════════════════════════════════════ */
.profile-widget {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-2) 100%);
    border-radius: var(--radius-lg);
    padding: 18px;
    border: 1px solid var(--border);
    box-shadow: var(--glow-card);
    margin-bottom: 0;   /* 8→0: sidebar-widget gap으로 통일 */
    position: relative; overflow: hidden;
    transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.profile-widget::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent-line); opacity: 0.8;
}
.profile-widget::after {
    content: '';
    position: absolute; top: 0; right: 0;
    width: 120px; height: 120px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    pointer-events: none;
}
.profile-widget:hover {
    border-color: var(--border-glow);
    transform: translate3d(0, -2px, 0);  /* GPU 가속 */
    box-shadow: var(--glow-accent), var(--glow-card);
}

.profile-header { display: flex; align-items: center; gap: 13px; }
.profile-img-container { position: relative; flex-shrink: 0; }
.profile-img-wrap {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--bg-elevated);
    overflow: hidden;
    border: 2px solid var(--border-2);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.profile-image {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
}
.status-dot {
    position: absolute; bottom: 2px; right: 2px;
    width: 11px; height: 11px;
    background: #4ADE80;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
    animation: statusPulse 4s ease-in-out infinite;   /* 2.5→4s 덜 산만하게 */
}
@keyframes statusPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.4); }
    50%       { box-shadow: 0 0 0 4px rgba(74, 222, 128, 0); }
}

.profile-info { flex: 1; min-width: 0; }
.profile-name {
    font-weight: 800; font-size: 0.95rem;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    color: var(--text-strong);
    display: flex; align-items: center; gap: 5px;
}
.profile-role-dot { color: var(--text-dim); font-weight: 400; }
.profile-role {
    font-size: 0.7rem; font-weight: 600;
    color: var(--accent); opacity: 0.85;
    letter-spacing: 0.3px;
}
.profile-email {
    color: var(--text-dim); font-size: 0.75rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
    margin-top: 2px;
}
.profile-email a, .profile-email .__cf_email__ {
    color: var(--text-dim) !important; text-decoration: none !important; font-size: 0.75rem !important;
    transition: color 0.2s var(--ease);
}
.profile-email a:hover, .profile-email .__cf_email__:hover { color: var(--accent) !important; }

.profile-links {
    display: flex; gap: 6px; margin-top: 14px;
    flex-wrap: nowrap; justify-content: stretch;
}
.profile-links a {
    flex: 1; min-width: 0; max-width: 52px; height: 38px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.profile-links a:hover,
.profile-links a:focus-visible {
    background: var(--accent);
    color: #fff !important;
    border-color: var(--accent);
    transform: translate3d(0, -2px, 0) scale(1.04);
    box-shadow: 0 4px 12px var(--accent-glow);
}
.profile-links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════
   📂 메뉴 & 카테고리 위젯
   (Tistory DOM 완전 호환)
   ════════════════════════════════════ */
.menu-widget ul, .category-widget .tt_category,
.category-widget .tt_category ul,
.category-widget .tt_category .category_list,
.category-widget .tt_category .sub_category_list {
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}
.menu-widget ul > li,
.category-widget .tt_category .category_list > li,
.category-widget .tt_category .category_list > li.item {
    margin-bottom: 3px !important; list-style: none !important;
}

/* 메뉴 링크 */
.menu-widget ul > li > a {
    display: flex !important; width: 100% !important; box-sizing: border-box !important;
    align-items: center !important; gap: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-dim) !important;
    font-size: 13px !important;
    font-family: 'JetBrains Mono', 'Pretendard', sans-serif !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease),
                border-color 0.2s var(--ease), transform 0.2s var(--ease);
    word-break: keep-all !important;
}
.menu-widget ul > li > a::before {
    content: '›' !important;
    font-size: 16px !important; font-weight: 700 !important;
    color: var(--accent) !important; opacity: 0.6 !important;
    flex-shrink: 0 !important; line-height: 1 !important;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.menu-widget ul > li > a:hover,
.menu-widget ul > li > a:focus-visible {
    background: var(--accent-glow) !important;
    border-color: var(--border-glow) !important;
    color: var(--accent) !important;
    transform: translateX(3px) !important;
}
.menu-widget ul > li > a:hover::before { opacity: 1 !important; transform: translateX(2px) !important; }

/* 카테고리 메인 링크 */
.category-widget .tt_category a:not(.sub_category_list a),
.category-widget .tt_category .category_list > li.item > a,
.category-widget .tt_category > ul > li > a {
    display: flex !important; align-items: center !important; gap: 8px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-dim) !important;
    font-size: 13px !important; font-weight: 600 !important;
    font-family: 'JetBrains Mono', 'Pretendard', sans-serif !important;
    padding: 8px 12px !important;
    text-decoration: none !important;
    word-break: keep-all !important; width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; letter-spacing: -0.01em !important;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.2s var(--ease);
}
.category-widget .tt_category a:not(.sub_category_list a)::before,
.category-widget .tt_category .category_list > li.item > a::before,
.category-widget .tt_category > ul > li > a::before {
    content: '📁' !important; font-size: 13px !important;
    flex-shrink: 0 !important; line-height: 1 !important;
}
.category-widget .tt_category a:not(.sub_category_list a):hover,
.category-widget .tt_category .category_list > li.item > a:hover,
.category-widget .tt_category > ul > li > a:hover {
    background: var(--accent-glow) !important;
    border-color: var(--border-glow) !important;
    color: var(--accent) !important;
    transform: translateX(3px) !important;
}
.category-widget .tt_category a:not(.sub_category_list a):hover::before,
.category-widget .tt_category .category_list > li.item > a:hover::before,
.category-widget .tt_category > ul > li > a:hover::before {
    content: '📂' !important;
}
/* 현재 카테고리 active */
.category-widget .tt_category .category_list > li.item > a.current,
.category-widget .tt_category .category_list > li.item.current > a {
    background: var(--accent-glow) !important;
    border-color: var(--border-glow) !important;
    color: var(--accent) !important; font-weight: 800 !important;
}

/* 전체보기 (noChild) */
.category-widget .tt_category .category_list > li.noChild > a,
.category-widget .tt_category > ul > li.noChild > a {
    background: transparent !important;
    border-style: dashed !important;
    color: var(--text-dim) !important;
    font-size: 12px !important; font-weight: 600 !important;
    opacity: 0.7 !important;
}
.category-widget .tt_category .category_list > li.noChild > a::before { content: '📂' !important; }

/* c_name, c_cnt */
.category-widget .tt_category a .c_name {
    flex: 1 !important; min-width: 0 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.category-widget .tt_category .c_cnt {
    flex-shrink: 0 !important; font-size: 10px !important; font-weight: 700 !important;
    color: var(--accent) !important; background: var(--bg-main) !important;
    border: 1px solid var(--border) !important; border-radius: 20px !important;
    font-family: 'JetBrains Mono', monospace !important;
    min-width: 20px !important; text-align: center !important;
    margin-left: auto !important; padding: 1px 5px !important;
    display: inline-block !important; vertical-align: middle !important;
}
.category-widget .tt_category a:hover .c_cnt {
    background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important;
}
.category-widget .tt_category img { display: none !important; }

/* 서브카테고리 */
.category-widget .tt_category .sub_category_list,
.category-widget .tt_category > ul > li > ul {
    margin: 2px 0 4px 12px !important;
    padding-left: 10px !important;
    border-left: 2px solid var(--border) !important;
}
.category-widget .tt_category .sub_category_list > li { margin-bottom: 2px !important; list-style: none !important; }
.category-widget .tt_category .sub_category_list > li > a,
.category-widget .tt_category > ul > li > ul > li > a {
    display: flex !important; align-items: center !important; gap: 6px !important;
    background: transparent !important; border: 1px solid transparent !important;
    border-radius: 5px !important; padding: 5px 8px !important;
    font-size: 12px !important; font-weight: 500 !important;
    color: var(--text-dim) !important; text-decoration: none !important;
    word-break: keep-all !important; width: 100% !important; box-sizing: border-box !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.category-widget .tt_category .sub_category_list > li > a::before,
.category-widget .tt_category > ul > li > ul > li > a::before {
    content: '·' !important; color: var(--accent) !important; opacity: 0.5 !important;
    flex-shrink: 0 !important; font-size: 14px !important; line-height: 1 !important;
}
.category-widget .tt_category .sub_category_list > li > a:hover,
.category-widget .tt_category > ul > li > ul > li > a:hover {
    color: var(--accent) !important; background: var(--accent-glow) !important;
}

/* ════════════════════════════════════
   🔍 검색 위젯
   ════════════════════════════════════ */
.search-box {
    display: flex; align-items: center;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0 12px; gap: 8px;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    overflow: hidden;
}
.search-box:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
[data-theme='light'] .search-box {
    background: rgba(255,255,255,0.7) !important;
    border-color: #C5C3BC !important;
}
[data-theme='light'] .search-box input {
    color: #1C1C1E !important;
}
[data-theme='light'] .search-box input::placeholder {
    color: #6C6C72 !important;
}
[data-theme='light'] .search-icon { color: #48484A; }
.search-icon { color: var(--text-dim); flex-shrink: 0; }
.search-box input {
    flex: 1; min-width: 0; height: 40px;
    background: transparent; border: none;
    color: var(--text-main);
    font-size: max(16px, 0.875rem) !important;  /* iOS 자동 줌 방지 */
    font-family: 'Pretendard', sans-serif;
    caret-color: var(--accent);
}
.search-box input::placeholder { color: var(--text-dim); opacity: 0.65; }
.search-box input:focus { outline: none; }
.search-box:focus-within input { caret-color: var(--accent); }
.hidden-submit { display: none !important; }

/* ════════════════════════════════════
   🏷️ 태그 클라우드
   ════════════════════════════════════ */
.tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tag-cloud a {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px !important; color: var(--text-dim);
    background: var(--bg-elevated);
    padding: 6px 12px;    /* 4px→6px: 터치 타겟 26px→≥38px */
    min-height: 32px;     /* 모바일 터치 타겟 강화 */
    border-radius: 99px;
    border: 1px solid var(--border);
    transform: translateY(0);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.2s var(--ease);
    font-family: 'JetBrains Mono', monospace;
    text-decoration: none !important;
    word-break: keep-all; white-space: nowrap;
    box-sizing: border-box;
}
.tag-cloud a:hover {
    border-color: var(--border-glow); color: var(--accent);
    background: var(--accent-glow); transform: translateY(-2px);
}
[data-theme='light'] .tag-cloud a {
    color: #2C2C2E !important;
    background: rgba(0,0,0,0.04) !important;
    border-color: #D1CDC8 !important;
}
[data-theme='light'] .tag-cloud a:hover {
    color: var(--accent) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.30) !important;
}
.tag-cloud a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ════════════════════════════════════
   📊 통계 위젯
   ════════════════════════════════════ */
.visitor-stats { display: flex; gap: 8px; }
.stat-box {
    flex: 1;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 3px;
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease),
                box-shadow 0.2s var(--ease);
    position: relative; overflow: hidden;
}
.stat-box::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--accent-line);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-box:hover {
    border-color: var(--border-glow);
    background: var(--bg-card-2);
    box-shadow: 0 2px 8px var(--accent-glow);
}
.stat-box:hover::before { opacity: 0.6; }
.stat-label {
    font-size: 9px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1.5px; color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}
.stat-value {
    font-size: 1.1rem; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-strong);
    letter-spacing: -0.03em;
}
.stat-value.today { color: var(--accent); }

/* ── 최신글 위젯 ── */
.recent-post-list, .recent-comment-list, .popular-post-list, .notice-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 0;
}
.recent-post-list li, .popular-post-list li {
    border-bottom: 1px solid var(--border);
}
.recent-post-list li:last-child, .popular-post-list li:last-child { border-bottom: none; }
.recent-post-list a, .popular-post-list a {
    display: flex; flex-direction: column; gap: 2px;
    padding: 8px 4px;
    text-decoration: none;
    transition: color 0.2s var(--ease);
}
.recent-post-list a:hover .rp-title, .popular-post-list a:hover .rp-title { color: var(--accent); }
.rp-title {
    font-size: 12.5px; font-weight: 600; color: var(--text-main);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block; line-height: 1.4;
    transition: color 0.2s var(--ease);
}
.rp-date {
    font-size: 10.5px; color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}

/* ── 사이드바 TOC ── */
#toc-widget { max-height: 40vh; }
#toc-content, #toc-float-content { overflow-y: auto; }
#toc-content ul, #toc-float-content ul { list-style: none; margin: 0; padding: 0; }
#toc-content li, #toc-float-content li { margin-bottom: 1px; }
#toc-content a, #toc-float-content a {
    display: block; color: var(--text-dim); text-decoration: none;
    font-size: 12px; line-height: 1.5;
    padding: 4px 8px; border-radius: 5px; border-left: 2px solid transparent;
    transition: color 0.2s var(--ease), background-color 0.2s var(--ease),
                border-color 0.2s var(--ease);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#toc-content a:hover, #toc-float-content a:hover { color: var(--accent); background: var(--accent-glow); }
#toc-content a.toc-active, #toc-float-content a.toc-active {
    color: var(--accent); font-weight: 700; border-left-color: var(--accent);
    background: var(--accent-glow);
}
[data-theme='light'] #toc-content a.toc-active,
[data-theme='light'] #toc-float-content a.toc-active {
    color: var(--accent-2);
    border-left-color: var(--accent-2);
    background: rgba(37, 99, 235, 0.09);
}
#toc-content .toc-h3, #toc-float-content .toc-h3 { padding-left: 20px; }

/* ── 사이드바 저작권 ── */
.sidebar-credit {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
[data-theme='light'] .sidebar-credit {
    border-top-color: var(--border-2);
}
.sidebar-credit-text {
    font-size: 10.5px; color: var(--text-dim);
    line-height: 1.7; display: block;
}
.sidebar-credit-text strong { color: var(--text-main); font-weight: 700; }
.sidebar-credit-text a { color: var(--accent); text-decoration: none; }
.sidebar-credit-text a:hover { text-decoration: underline; }
.sidebar-credit-dot { opacity: 0.4; margin: 0 3px; }
.sidebar-credit-license { opacity: 0.7; }

#sidebar-overlay { display: none; pointer-events: none; }


/* ════════════════════════════════════
   📰 아티클 카드 — 수평 에디토리얼 레이아웃
   2026 Knowledge Blog 스타일
   ════════════════════════════════════ */
.article-wrap {
    display: flex; flex-direction: column;
    width: 100%;
    /* 글 목록이 있을 때만 상단 구분선 표시 */
}
.article-wrap:has(.post-card) {
    border-top: 1px solid var(--border);
}

/* 카드 Stagger 애니메이션 */
.article-wrap .post-card { animation: cardReveal 0.5s var(--ease) both; }
.article-wrap .post-card:first-child { border-top: 1px solid var(--border); }   /* 목록 첫 항목 상단선 */
.article-wrap .post-card:nth-child(1) { animation-delay: 0.04s; }
.article-wrap .post-card:nth-child(2) { animation-delay: 0.10s; }
.article-wrap .post-card:nth-child(3) { animation-delay: 0.16s; }
.article-wrap .post-card:nth-child(4) { animation-delay: 0.22s; }
.article-wrap .post-card:nth-child(5) { animation-delay: 0.28s; }
.article-wrap .post-card:nth-child(6) { animation-delay: 0.34s; }
.article-wrap .post-card:nth-child(n+7) { animation-delay: 0.38s; }
@keyframes cardReveal {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 수평 카드 컨테이너 ── */
.post-card {
    background: transparent;
    border-bottom: 1px solid var(--border);
    overflow: visible; position: relative;
    transition: background-color 0.2s var(--ease);
}
.post-card:hover { background: rgba(96, 165, 250, 0.05); }   /* hover 더 명확하게 */
.post-card:hover .card-thumb {
    width: 120px; height: 90px;
    flex-shrink: 0;
    background-size: cover; background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    opacity: 1;
}
[data-theme='light'] .post-card:hover { background: rgba(37, 99, 235, 0.045); }   /* 더 명확한 hover */

/* 왼쪽 액센트 라인 (hover시 표시) */
.post-card::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--accent-line);
    border-radius: 0 2px 2px 0;
    transform: scaleY(0); transform-origin: top;
    transition: transform 0.25s var(--ease);
}
.post-card:hover::before { transform: scaleY(1); }

/* ── 카드 링크 (수평 flex) ── */
.card-link {
    display: flex; flex-direction: row;
    gap: 20px; padding: 22px 20px 22px 24px;
    align-items: flex-start;
    text-decoration: none; color: inherit;
    transition: transform 0.2s var(--ease);   /* hover translateX 부드럽게 */
}
.card-link:hover { text-decoration: none;
    transform: translateX(2px);   /* 방향성 피드백 */ }
.card-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    border-radius: 2px;
    box-shadow: inset 0 0 0 2px var(--accent-glow);
}

/* ── 텍스트 섹션 (왼쪽) ── */
.card-content {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 8px;
    order: 1;
    justify-content: flex-start;
}

.card-header {
    display: flex; align-items: center; justify-content: flex-start;
    gap: 10px; flex-wrap: wrap;
}
.card-category {
    font-size: 10px; font-weight: 700;
    color: var(--accent);
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.4px; text-transform: uppercase;
    background: var(--accent-glow);
    padding: 3px 10px; border-radius: 99px;
    border: 1px solid rgba(96, 165, 250, 0.25);
    flex-shrink: 0;
    /* 부드러운 배지 효과 */
    backdrop-filter: blur(4px);
}
[data-theme='light'] .card-category {
    border-color: rgba(37, 99, 235, 0.20);
}
.card-date {
    color: var(--text-dim); font-size: 11.5px;
    font-family: 'JetBrains Mono', monospace; flex-shrink: 0;
}
.card-title {
    font-size: 1.05rem; font-weight: 700;
    margin: 0; line-height: 1.45;
    color: var(--text-strong);
    letter-spacing: -0.02em; word-break: keep-all;
    overflow-wrap: break-word; white-space: normal;
    transition: color 0.2s var(--ease);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card:hover .card-title { color: var(--accent); }
.card-summary {
    color: var(--text-dim); font-size: 0.875rem;
    line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    word-break: keep-all; overflow-wrap: break-word;
    margin: 0;
}
.card-summary:empty { display: none; }   /* 빈 요약 공백 방지 */

/* ── 썸네일 (오른쪽) ── */
.card-thumb {
    width: 120px; height: 88px;
    flex-shrink: 0; border-radius: var(--radius-md);
    background-size: cover; background-position: center;
    order: 2;
    transition: transform 0.4s var(--ease), filter 0.4s var(--ease), opacity 0.3s;
    position: relative; overflow: hidden;
    opacity: 1;    /* 라이트 모드에서 0.88 어색 — 항상 100% */
    border: 1px solid var(--border);
}
.card-thumb::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.2) 100%);
    pointer-events: none;
}

/* 썸네일 없는 카드 */
.post-card:not(:has(.card-thumb)) .card-content { padding-left: 0; }
/* 배경 이미지 없는 썸네일: 숨김 처리 */
.card-thumb:not([style*="background-image"]) { display: none; }

/* ════════════════════════════════════
   📄 카테고리 헤더
   ════════════════════════════════════ */
.post-detail.category-header-wrap {
    max-width: 100%; margin: 0 0 32px;
}
.category-header-wrap .post-header { margin-bottom: 0; padding-bottom: 24px; }
.category-header-wrap .post-header h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
    color: var(--text-strong);
    word-break: keep-all; overflow-wrap: break-word;
    background: none;
    -webkit-text-fill-color: initial;
}

/* ════════════════════════════════════
   📖 본문 헤더 (Post Header)
   ════════════════════════════════════ */
.post-detail, .tag-page-area, .protected-post {
    max-width: var(--content-w); margin: 0 auto;
    width: 100%; text-align: left; min-width: 0;
}
.guestbook-area {
    max-width: 860px; margin: 0 auto; /* 방명록: 폼 레이아웃을 위해 더 넓게 */
    width: 100%; text-align: left; min-width: 0;
}

.post-header {
    text-align: left; margin-bottom: 36px;
    padding-bottom: 32px;
    border-bottom: 2px solid var(--border-2);   /* 1→2px: 글 헤더 구분 강화 */
    position: relative;
}
.post-header::after {
    content: '';
    position: absolute; bottom: -1px; left: 0;
    width: 48px; height: 2px;
    background: var(--accent-line); border-radius: 99px;
}

/* 뱃지 */
.badge {
    display: inline-flex; align-items: center;
    padding: 4px 13px;
    background: var(--accent-glow);
    border-radius: 99px;
    color: var(--accent);
    font-size: 10px; font-weight: 800;
    margin-bottom: 16px;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.8px; text-transform: uppercase;
    border: 1px solid rgba(96, 165, 250, 0.22);
    box-shadow: 0 0 12px rgba(96, 165, 250, 0.08);
}
[data-theme='light'] .badge {
    border-color: rgba(37, 99, 235, 0.15);
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.06);
}


.post-header h1 {
    font-size: clamp(1.9rem, 4.5vw, 2.8rem);   /* 더 크고 임팩트 */
    font-weight: 800; margin: 0 0 24px;
    letter-spacing: -0.035em; line-height: 1.22;
    color: var(--text-strong);
    word-break: keep-all; overflow-wrap: break-word;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}
[data-theme='light'] .post-header h1 {
    color: var(--text-strong);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}

.post-meta-row {
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 4px;
}
.post-meta-bottom {
    font-size: 13px; color: var(--text-dim);
    display: flex; justify-content: flex-start; gap: 10px;
    font-weight: 500; flex-wrap: wrap; align-items: center;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: -0.01em;
}
.divider { color: var(--text-dim); opacity: 0.4; user-select: none; margin: 0 4px; }   /* 여백 추가 */
.admin-links a {
    color: var(--text-dim); font-size: 12px; margin-left: 8px;
    text-decoration: underline; text-underline-offset: 2px;
    transition: color 0.2s;
}
.admin-links a:hover { color: var(--accent); }

/* ════════════════════════════════════
   📝 본문 콘텐츠 — 읽기 최적화 타이포그래피
   ════════════════════════════════════ */
.post-content {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 1.0625rem;      /* 17px — 읽기 최적 사이즈 */
    font-weight: 400;
    max-width: var(--content-w);   /* 740px — 긴 줄 방지 */
    line-height: 1.9;           /* 한국어 최적 행간 */
    letter-spacing: -0.01em;    /* -0.012→-0.01: 한국어 자간 최적화 */
    /* word-spacing 제거 — 한국어 음절 단위라 word-spacing 무의미 */
    color: var(--text-main);
    overflow-wrap: break-word;
    word-break: keep-all;
    text-align: left;
    max-width: 100%; overflow-x: hidden;
    font-feature-settings: 'kern' 1, 'liga' 1;
    -webkit-font-feature-settings: 'kern' 1, 'liga' 1;
}
.post-content * { font-family: inherit; }
.post-content > :first-child { margin-top: 0 !important; }
.post-content > :last-child  { margin-bottom: 0 !important; }
.post-content > h2:first-child,
.post-content > h3:first-child { margin-top: 0 !important; }

/* 단락 */
.post-content p {
    margin-bottom: 1.6em;
    line-height: 1.9;
    orphans: 3; widows: 3;   /* 인쇄/고아 단어 방지 */
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: break-word;
}


/* ── 헤딩 (H2/H3/H4/H5/H6) ── */
/* h2/h3 기본 스타일: heading-anchor-wrap 클래스 유무와 무관하게 적용 (JS 없는 환경·FOUC 방지) */
.post-content h2 {
    font-size: clamp(1.35rem, 2.8vw, 1.75rem);   /* 더 크게 */
    font-weight: 800; line-height: 1.28;
    border-bottom: 2px solid var(--border-2);
    padding-bottom: 14px;
    margin: 52px 0 20px;   /* 상단 여백 조금 더 확보 */
    color: var(--text-strong);
    letter-spacing: -0.03em; word-break: keep-all;
    position: relative;
}
.post-content h3 {
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);   /* 더 크게 */
    font-weight: 700; line-height: 1.38;
    margin: 40px 0 14px;
    color: var(--text-strong);
    word-break: keep-all;
    padding: 9px 16px;
    border-left: 4px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-glow) 0%, transparent 75%);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    letter-spacing: -0.02em;   /* h2와 일관된 자간 */
    position: relative;
}
.post-content .heading-anchor-wrap { position: relative; }

/* h2 바로 뒤 h3: 이중 마진 방지 */
.post-content h2 + h3,
.post-content h2.heading-anchor-wrap + h3,
.post-content h2 + h3.heading-anchor-wrap {
    margin-top: 20px !important;   /* 36px→20px: h2 직후 소제목 */
}

/* .post-content h2.heading-anchor-wrap 기본 스타일은
   .post-content h2 에서 상속 — 중복 제거 */
.post-content h2.heading-anchor-wrap { position: relative; }
.post-content h2.heading-anchor-wrap::after {
    content: '';
    position: absolute; bottom: -2px; left: 0;
    width: 56px; height: 3px;   /* 강조선 더 길고 굵게 */
    background: var(--accent-line); border-radius: 99px;
}
/* .post-content h3.heading-anchor-wrap 기본 스타일은
   .post-content h3 에서 상속 — 중복 제거 */
.post-content h3.heading-anchor-wrap {
    position: relative;
    /* background: h3에서 상속 */
}
.post-content h4 {
    font-size: 1.08rem;
    font-weight: 700; line-height: 1.45;
    margin: 32px 0 10px; color: var(--text-strong);
    word-break: keep-all; letter-spacing: -0.02em;
    padding-left: 10px;
    border-left: 2px solid rgba(96, 165, 250, 0.45);   /* h4: 연한 accent 선 */
}
.post-content h5 {
    font-size: 0.95rem; font-weight: 700; margin: 24px 0 10px;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--text-strong); word-break: keep-all;
}
.post-content h6 {   /* 가독성 개선: dim→main */
    font-size: 0.875rem; font-weight: 700; margin: 20px 0 8px;
    color: var(--text-main);   /* dim→main: 가독성 개선 */
    letter-spacing: -0.01em; word-break: keep-all;   /* uppercase 제거 — 한국어 불필요 */
}
/* 헤딩 앵커 링크 */
.heading-anchor {
    opacity: 0; position: absolute;
    right: 100%; top: 50%; transform: translateY(-50%);
    padding-right: 8px; color: var(--text-dim);
    transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
    display: inline-flex;
    pointer-events: none;   /* hover 영역 차지 방지 */
}
.heading-anchor-wrap:hover .heading-anchor { opacity: 1; pointer-events: auto; }
.heading-anchor:hover { color: var(--accent); }

/* ── 강조 ── */
.post-content strong, .post-content b {
    font-weight: 700; color: var(--text-strong);
}
.post-content em, .post-content i {
    font-style: italic; font-weight: 500;
    color: var(--text-strong);
}
.post-content mark {
    background: rgba(250, 200, 50, 0.22);   /* 형광펜 — 학습 노트 느낌 */
    color: var(--text-strong);
    padding: 1px 6px; border-radius: 3px; font-weight: 600;
    border-bottom: 2px solid rgba(250, 200, 50, 0.50);
}
[data-theme='light'] .post-content mark {
    background: rgba(253, 224, 71, 0.45);   /* 노란 형광펜 라이트 */
    color: #1C1C1E;
    border-bottom: 2px solid rgba(234, 179, 8, 0.60);
    padding: 1px 6px;
    border-radius: 3px;
}
.post-content kbd {
    display: inline-block; padding: 2px 6px;
    font-family: 'JetBrains Mono', monospace; font-size: 0.83em;
    color: var(--text-main); background: var(--bg-elevated);
    border: 1px solid var(--border); border-bottom: 3px solid var(--border);
    border-radius: 5px; white-space: nowrap; line-height: 1.4;
}
.post-content del { text-decoration: line-through; color: var(--text-dim); opacity: 0.7; }
.post-content ins {
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: 3px;
    font-style: normal;
}
[data-theme='light'] .post-content del { color: var(--text-dim); opacity: 0.65; }
[data-theme='light'] .post-content ins { text-decoration-color: var(--accent); }
.post-content small { font-size: 0.85em; color: var(--text-dim); }

/* ── sub / sup ── */
.post-content sub, .post-content sup {
    font-size: 0.75em; line-height: 0;
    position: relative; vertical-align: baseline;
}
.post-content sub { bottom: -0.25em; }
.post-content sup { top: -0.5em; }

/* ── abbr ── */
.post-content abbr[title] {
    text-decoration: underline dotted var(--text-dim);
    text-underline-offset: 3px; cursor: help;
}

/* ── 링크 ── */
.post-content a {
    color: var(--accent); font-weight: 600;
    text-decoration: none; position: relative;
    word-break: break-word;
}
.post-content p a:not(:has(img)),
.post-content li a:not(:has(img)) {
    display: inline;
    color: var(--accent-3);   /* 다크 링크 색상 */
    border-bottom: 1.5px solid rgba(96, 165, 250, 0.42);
    transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
/* visited는 hover보다 앞에 — hover가 최종 우선 */
.post-content p a:visited:not(:has(img)),
.post-content li a:visited:not(:has(img)) {
    color: var(--accent-3);   /* 방문한 링크: 연한 파랑 */
    border-bottom-color: rgba(96, 165, 250, 0.35);
}
[data-theme='light'] .post-content p a:not(:has(img)) {
    color: var(--accent-2);   /* 라이트 링크 색상 */
    border-bottom-color: rgba(37, 99, 235, 0.45);
    font-weight: 600;
}
[data-theme='light'] .post-content p a:visited:not(:has(img)),
.post-content li a:visited:not(:has(img)) {
    color: var(--accent-2);
    border-bottom-color: rgba(37, 99, 235, 0.35);
}
/* hover는 visited 뒤에 — hover 시 visited 색 덮어씀 */
.post-content p a:not(:has(img)):hover,
.post-content li a:not(:has(img)):hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-glow);
    border-radius: 2px;
}
[data-theme='light'] .post-content p a:not(:has(img)):hover {
    color: var(--accent-2);
    border-color: var(--accent-2);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 2px;
}

/* ── 인용구 (Blockquote) ── */
.post-content blockquote {
    position: relative;
    padding: 22px 28px 22px 32px;   /* 여백 확대 */
    margin: 40px 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    overflow: visible;
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.12) 0%,
        rgba(59, 130, 246, 0.06) 100%);
    color: var(--text-main);
    font-style: normal;
    word-break: keep-all;
    font-size: 1rem; line-height: 1.88;   /* 본문과 동일 크기 */
}
.post-content blockquote::before {
    content: '';
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 5px; background: var(--accent-line); border-radius: 0 3px 3px 0;   /* 4→5px */
}
/* blockquote::after 따옴표 장식 제거 — 가독성 저하 */
.post-content blockquote p { margin-bottom: 0; }
.post-content blockquote .table-wrapper {
    margin: 14px 0;
}
[data-theme='light'] .post-content .table-wrapper {
    border-color: #D1CDC8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.post-content blockquote .code-block-wrapper {
    position: relative; margin: 14px 0;   /* blockquote 내: 좁은 마진 */
    text-align: left;   /* 상위 figure center 상속 방지 */
    width: 100%; max-width: 100%;
    border-radius: var(--radius-md);
    /* overflow:hidden 제거 — copy-btn 툴팁 클리핑 방지 */
    /* 테두리는 box-shadow로 처리 (border 대체) */
    box-shadow: 0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.35);
}
.post-content blockquote strong, .post-content blockquote b {
    color: var(--text-strong); font-weight: 700;
}
.post-content blockquote cite {
    display: block; margin-top: 14px;
    font-size: 0.875rem; color: var(--text-dim); font-style: normal;
    letter-spacing: -0.01em;
    padding-left: 2px;
}
[data-theme='light'] .post-content blockquote {
    background: linear-gradient(135deg,
        rgba(37, 99, 235, 0.09) 0%,
        rgba(29, 78, 216, 0.05) 100%);
    color: var(--text-main);
}
[data-theme='light'] .post-content blockquote cite { color: #6C6C72; }
[data-theme='light'] .post-content blockquote::before {
    background: linear-gradient(180deg, #2563EB, #1D4ED8);
    left: 0;
    width: 4px;
}

/* ── 목록 ── */
.post-content ul { list-style-type: disc; margin: 1.4em 0; padding-left: 1.75em; }   /* 상하 통일 */

/* 목록 마커 색상 */
.post-content ol li::marker {
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95em;
    font-family: 'JetBrains Mono', monospace;   /* 번호는 코드 폰트로 선명하게 */
}
.post-content ul li::marker { color: var(--accent); }
[data-theme='light'] .post-content ol li::marker { color: var(--accent); }
[data-theme='light'] .post-content ul li::marker { color: var(--accent); }
.post-content ul ul { list-style-type: circle; margin: 8px 0; padding-left: 24px; }
.post-content ol { list-style-type: decimal; margin: 1.4em 0; padding-left: 1.75em; }   /* 상하 통일 */
.post-content li {
    margin-bottom: 0.55em; line-height: 1.82;   /* 1.78→1.82: 본문 행간에 근접 */
    word-break: keep-all; overflow-wrap: break-word;
}

/* ── 수평선 ── */
.post-content hr {
    border: none; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-2) 20%, var(--border-2) 80%, transparent);
    margin: 40px 0;   /* 52→40px */
}

/* ── 이미지 ── */
/* ── video-wrapper: 16:9 반응형 ── */
.post-content .video-wrapper {
    position: relative; padding-bottom: 56.25%; height: 0;
    overflow: hidden; border-radius: var(--radius-sm); margin: 2em 0;
}
.post-content .video-wrapper iframe, .post-content .video-wrapper video {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.post-content video, .post-content iframe,
.post-content embed, .post-content object,
.post-content pre, .post-content table, .post-content figure {
    max-width: 100%;
    margin: 1.5em 0;
    text-align: left;   /* center→left: 코드블록 가운데 정렬 방지 */
}
.post-content figure figcaption,
.post-content figure > img + figcaption {
    text-align: center;   /* 이미지 캡션만 가운데 정렬 유지 */
}

.post-content img {
    max-width: 100% !important; height: auto;
    border-radius: var(--radius-sm);   /* 14→8px: 스크린샷에 더 자연스러움 */
    border: 1px solid var(--border);
    cursor: zoom-in;
    transform: translateZ(0);   /* scale(1) 불필요 제거 */
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s;
    display: block; margin: 2em auto;
    object-fit: contain;
    min-height: 40px;
}
/* 다크모드 이미지 — 과도한 밝기 완화 (스크린샷/다이어그램) */
[data-theme="dark"] .post-content img:not(.zoomed) {
    filter: brightness(0.92) contrast(1.02);
}
.post-content img:not(.zoomed):hover {
    transform: scale(1.02);   /* 1.015→1.02: 더 명확한 피드백 */
    box-shadow: 0 12px 36px var(--shadow);
    border-color: var(--border-glow);
}
.post-content img.zoomed {
    cursor: zoom-out;
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1.0);   /* scale 제거: max-h/w로 제어 */
    z-index: 10001;
    width: auto; height: auto;
    max-height: 90vh; max-width: 90vw;
    object-fit: contain; border: none;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    touch-action: none; overscroll-behavior: none;
    transition: none;   /* zoom 즉각 표시 */
}
#zoom-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    outline: none;
    background: rgba(0,0,0,0.7);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    z-index: 10000; opacity: 0; visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
    cursor: pointer; touch-action: none; will-change: opacity;
}
#zoom-overlay.visible { opacity: 1; visibility: visible; }
[data-theme='light'] #zoom-overlay {
    background: rgba(0, 0, 0, 0.7);   /* 라이트에서도 어두운 오버레이 유지 */
}
#zoom-overlay:focus { outline: none; }   /* 모달: 포커스 링 불필요 */
/* CSS fallback: img.zoomed 존재 시 scroll 차단 */
body:has(img.zoomed) { overflow: hidden; }

/* 이미지 캡션 */
.post-content figcaption {
    text-align: center; font-size: 0.875rem;
    color: var(--text-dim); margin-top: -1em; margin-bottom: 1.8em;   /* img와 캡션 간격 자연스럽게 */
    font-style: italic; line-height: 1.5;
}

/* ── 테이블 ── */
/* ── 표 반응형 wrapper (JS가 삽입) ── */
.post-content .table-wrapper {
    overflow-x: auto;
    overflow-y: hidden;   /* 표 모서리 클리핑 (border-radius 적용) */
    -webkit-overflow-scrolling: touch;
    margin: 32px 0;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    position: relative;
}
.post-content table {
    width: 100%; border-collapse: collapse;
    /* border-radius 제거 — border-collapse:collapse와 충돌, wrapper가 radius 담당 */
    border: none;    /* wrapper가 border 담당 */
    font-size: 0.9rem;
    min-width: 480px;   /* 가로 스크롤 기준 최소폭 */
}
.post-content table caption {
    caption-side: top;
    text-align: center;
    font-size: 0.875rem;
    color: var(--accent-3);   /* accent 색상으로 캡션 강조 */
    font-weight: 700;
    padding: 0 0 10px;
    letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', monospace;
}
/* th/td border-radius 제거 — border-collapse:collapse와 충돌 → table-wrapper가 처리 */

.post-content th {
    background: rgba(60, 60, 65, 0.9);   /* bg-elevated보다 더 구별 */
    padding: 12px 16px;
    text-align: left; font-weight: 700;
    color: var(--text-strong);
    border-bottom: 2px solid rgba(96, 165, 250, 0.30);   /* accent 색상 구분선 */
    font-size: 0.875rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
[data-theme='light'] .post-content th {
    background: #E8E6E0;
    border-bottom: 2px solid rgba(37, 99, 235, 0.35);   /* accent 계열 */
}
.post-content td {
    padding: 12px 16px;   /* th와 동일한 12px — 일관성 */
    border-bottom: 1px solid var(--border);
    color: var(--text-main); vertical-align: top;
    line-height: 1.75;   /* 1.7→1.75: li(1.82)와 균형 */
}
.post-content tr:last-child td { border-bottom: none; }
.post-content tr:nth-child(even) { background: rgba(96, 165, 250, 0.04); }   /* 0.025→0.04 */
[data-theme='light'] .post-content tr:nth-child(even) { background: rgba(37, 99, 235, 0.025); }
/* hover는 even보다 뒤에 — even이 hover를 덮지 않음 */
.post-content tr:hover td { background: rgba(96, 165, 250, 0.06) !important; }
[data-theme='light'] .post-content tr:hover td { background: rgba(37, 99, 235, 0.06) !important; }
/* .post-content caption → table caption으로 통합 */

/* ── 상세 펼치기 ── */
.post-content details {
    margin: 28px 0;   /* 24→28px */
    padding: 18px 22px;   /* 16px 20px → 여유 추가 */
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);   /* sm→md: 더 세련 */
    transition: border-color 0.2s, background 0.2s;
}
.post-content details[open] { border-color: var(--accent); background: var(--bg-card); }
.post-content summary {
    cursor: pointer; font-weight: 600; color: var(--text-strong);
    user-select: none; list-style: none; position: relative;
    padding-left: 24px; font-size: 0.95rem;
}
.post-content summary::-webkit-details-marker { display: none; }   /* Chrome/Safari */
summary::marker { display: none; }   /* Firefox/표준 */
.post-content summary::before {
    content: '▸'; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); color: var(--accent);
    transition: transform 0.25s var(--ease); font-size: 12px;
}
.post-content details[open] > summary { color: var(--accent); }   /* 열림 시 색상 */
.post-content details[open] > summary::before { transform: translateY(-50%) rotate(90deg); }
.post-content summary:hover { color: var(--accent); }
[data-theme='light'] .post-content summary { color: var(--text-strong); }
[data-theme='light'] .post-content details[open] { border-color: var(--accent); }

.post-content summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}
.post-content details > *:not(summary) { margin-top: 12px; }

/* ── q, cite, abbr ── */
.post-content q { font-style: italic; color: var(--accent); }
[data-theme='light'] .post-content q { color: var(--accent-2); }
.post-content q::before { content: '"'; }
.post-content q::after { content: '"'; }
.post-content cite { font-style: italic; color: var(--text-dim); font-size: 0.9em; }


/* ════════════════════════════════════
   💻 코드 블록 — 터미널 스타일
   ════════════════════════════════════ */
.code-block-wrapper {
    position: relative; margin: 32px 0;
    width: 100%; max-width: 100%;
    border-radius: var(--radius-md);
    /* overflow:hidden 제거 — copy-btn 툴팁 클리핑 방지 */
    /* 테두리는 box-shadow로 처리 (border 대체) */
    box-shadow: 0 0 0 1px var(--border), 0 8px 32px rgba(0,0,0,0.35);
}
/* 터미널 장식 dots — 소형화하여 기만적 UI 방지 */
.code-block-wrapper::before {
    content: '';
    position: absolute; top: 19px; left: 16px;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255, 95, 87, 0.5);   /* 반투명으로 장식임을 명확히 */
    box-shadow: 16px 0 rgba(255, 189, 46, 0.5), 32px 0 rgba(39, 201, 63, 0.5);
    z-index: 10; pointer-events: none;
}

pre {
    text-align: left !important;   /* figure 상속 방지 */
    line-height: 1.65;             /* 코드 최적 행간 */
    background: var(--bg-pre) !important;
    color: var(--text-pre) !important;
    border-radius: var(--radius-md);
    padding: 48px 24px 24px;   /* 52→48px */
    margin: 0;
    border: 1px solid var(--pre-border);
    position: relative; overflow-x: auto;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 14px; line-height: 1.76;
    tab-size: 4; -moz-tab-size: 4;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 1px 0 rgba(255,255,255,0.025) inset;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    letter-spacing: 0; word-spacing: 0;
    transition: border-color 0.3s;
}
pre:hover { border-color: rgba(96, 165, 250, 0.13); }
[data-theme='light'] pre {
    background: #F8F9FC !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);   /* wrapper pre에서는 none !important로 override */
    border-color: var(--border) !important;
    color: #1E293B !important;
}
[data-theme='light'] pre:hover { border-color: rgba(37, 99, 235, 0.28) !important; }

/* wrapper 안 pre: 이중 테두리/그림자 제거 */
.code-block-wrapper pre {
    border: none !important;
    box-shadow: none !important;
    border-radius: var(--radius-md) !important;   /* 전체 radius — wrapper와 동일 */
    margin: 0 !important;
}
/* pre:first-child:last-child 제거 — JS append 후 무효 선택자 */


/* ── 언어별 뱃지 색상 ── */
.lang-badge[data-lang="BASH"],
.lang-badge[data-lang="SHELL"] {
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ADE80 !important;
    border-color: rgba(74, 222, 128, 0.30) !important;
}
.lang-badge[data-lang="PYTHON"] {
    background: rgba(250, 200, 50, 0.15) !important;
    color: #FBBF24 !important;
    border-color: rgba(250, 200, 50, 0.30) !important;
}
.lang-badge[data-lang="JS"],
.lang-badge[data-lang="JAVASCRIPT"] {
    background: rgba(250, 200, 50, 0.15) !important;
    color: #FCD34D !important;
    border-color: rgba(250, 200, 50, 0.28) !important;
}
.lang-badge[data-lang="POWERSHELL"] {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60A5FA !important;
    border-color: rgba(96, 165, 250, 0.30) !important;
}
.lang-badge[data-lang="YAML"],
.lang-badge[data-lang="JSON"] {
    background: rgba(251, 146, 60, 0.15) !important;
    color: #FB923C !important;
    border-color: rgba(251, 146, 60, 0.30) !important;
}
pre::-webkit-scrollbar { height: 7px; }
pre::-webkit-scrollbar-track { background: transparent; }
pre::-webkit-scrollbar-thumb { background: rgba(96, 165, 250, 0.18); border-radius: 4px; }
pre::-webkit-scrollbar-thumb:hover { background: rgba(96, 165, 250, 0.4); }
[data-theme='light'] pre::-webkit-scrollbar-thumb { background: rgba(37, 99, 235, 0.20); border-radius: 4px; }
[data-theme='light'] pre::-webkit-scrollbar-thumb:hover { background: rgba(37, 99, 235, 0.40); }

.code-block-wrapper .lang-badge {
    position: absolute; top: 14px; right: 50px;   /* copy-btn 14+28+8 = 50px */
    font-size: 10.5px; font-weight: 700;
    color: var(--text-dim);
    background: rgba(96, 165, 250, 0.10);
    padding: 3px 9px; border-radius: 5px;
    letter-spacing: 0.5px; text-transform: uppercase;
    z-index: 5; pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid rgba(96, 165, 250, 0.18);
}
[data-theme='light'] .lang-badge {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.15);
    color: var(--accent);
}

.code-block-wrapper .copy-btn {
    position: absolute; top: 13px; right: 14px;
    background: rgba(96, 165, 250, 0.10); border: none;
    color: var(--text-dim); padding: 5px 7px;
    border-radius: 5px; cursor: pointer;
    transform: scale(1);
    overflow: visible;   /* ::after 복사됨 툴팁이 잘리지 않도록 */
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
    font-size: 13px; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
}
.code-block-wrapper:hover {
    box-shadow: 0 0 0 1px var(--border-2), 0 8px 32px rgba(0,0,0,0.40);
}
[data-theme='light'] .code-block-wrapper::before {
    background: rgba(255, 95, 87, 0.35);
    box-shadow: 16px 0 rgba(255, 189, 46, 0.35), 32px 0 rgba(39, 201, 63, 0.35);
}
[data-theme='light'] .code-block-wrapper:hover {
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.28), 0 4px 16px rgba(0,0,0,0.08);
}

.code-block-wrapper .copy-btn:hover {
    background: var(--accent); color: #fff;
    transform: scale(1.06);
    box-shadow: 0 2px 8px var(--accent-glow);
}
.code-block-wrapper .copy-btn.copied {
    background: #4ADE80; color: #000; transform: scale(1.08);
    box-shadow: 0 2px 10px rgba(74, 222, 128, 0.4);
}
.code-block-wrapper .copy-btn.copied::after {
    content: '복사됨';
    position: absolute; bottom: calc(100% + 4px); right: 0;   /* 아래→위로 변경: wrapper overflow:hidden 회피 */
    background: #4ADE80; color: #000;
    font-size: 10px; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    padding: 3px 7px; border-radius: 4px;
    white-space: nowrap; pointer-events: none;
    animation: copyFadeIn 0.2s var(--ease) both;
}
@keyframes copyFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.post-content pre:empty { display: none; }   /* 빈 코드블록 숨김 */
.post-content pre code { white-space: pre !important; word-wrap: normal !important; word-break: normal !important; }
pre[data-highlighted] { /* hljs로 강조된 블록 */ }
.post-content code:not(pre code) {
    background: rgba(96, 165, 250, 0.14);
    color: #BAD8FF;   /* 더 밝고 명확한 색상 */
    padding: 2px 8px; border-radius: var(--radius-xs);
    font-size: 0.875em;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600;
    border: 1px solid rgba(96, 165, 250, 0.28);
    overflow-wrap: break-word; word-break: break-word;
    letter-spacing: 0; vertical-align: 0.05em;
}
[data-theme='light'] pre[data-highlighted] { /* hljs로 강조된 블록 */ }
[data-theme='light'] .post-content code:not(pre code) {
    background: rgba(37, 99, 235, 0.08);
    color: var(--accent);
    border-color: rgba(37, 99, 235, 0.18);
}


[data-theme='dark'] .MathJax { color: var(--text-main) !important; }

/* ════════════════════════════════════
   🏷️ 본문 태그 섹션
   ════════════════════════════════════ */
[data-theme='light'] .post-tags-wrapper {
    border-top-color: var(--border-2);
}
[data-theme='light'] .post-tag-item {
    background: rgba(37, 99, 235, 0.07);
    border-color: rgba(37, 99, 235, 0.20);
    color: var(--accent);
}
[data-theme='light'] .post-tag-item:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.post-tags-wrapper {
    margin-top: 56px;   /* 72→56px */ padding-top: 28px;
    border-top: 1px solid var(--border);
    display: flex; align-items: flex-start; gap: 12px;
    min-height: 0; flex-wrap: wrap;
}
.tag-icon { color: var(--accent); margin-top: 8px; flex-shrink: 0; opacity: 0.7; }
.post-tags-list {
    flex: 1; min-width: 0;
    display: flex !important; flex-wrap: wrap !important;
    gap: 6px 7px !important;
    align-items: center !important; align-content: flex-start !important;
    min-height: 32px;
}
.post-tags-wrapper:has(.post-tags-list:empty),
.post-tags-wrapper:has(.post-tags-list > :only-child:not(a)) { display: none !important; }

.post-tags-list a {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; flex-shrink: 0 !important;
    font-size: 12.5px !important; line-height: 1.5 !important;
    color: var(--accent) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-weight: 600 !important;
    background: var(--accent-glow) !important;
    border: 1px solid rgba(96, 165, 250, 0.30) !important;
    border-radius: 20px !important;
    padding: 4px 12px 4px 9px !important;
    margin: 0 !important; white-space: nowrap !important;
    text-decoration: none !important; cursor: pointer !important;
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.2s var(--ease);
    box-sizing: border-box !important;
}
.post-tags-list a::before {
    content: '#' !important; font-size: 11px !important;
    font-weight: 800 !important; color: var(--accent) !important;
    opacity: 0.65 !important; margin-right: 3px !important;
}
.post-tags-list a:hover {
    background: var(--accent) !important; color: #fff !important;
    border-color: var(--accent) !important;
    transform: translateY(-2px) !important;
}
.post-tags-list a:hover::before { color: rgba(255,255,255,0.85) !important; opacity: 1 !important; }
[data-theme='light'] .post-tags-list a { border-color: rgba(37, 99, 235, 0.22) !important; }
.post-tags-list a[rel="tag"]::before, .post-tags-list a[rel="tag noopener"]::before {
    content: '#' !important; font-size: 11px !important;
    color: var(--accent) !important; opacity: 0.65 !important; margin-right: 3px !important;
}

/* ── 태그 페이지 ── */
.tag-page-area .post-header { margin-bottom: 36px; }
.tag-cloud-large { margin-top: 24px; gap: 10px; }
.tag-cloud-large a { font-size: 0.9rem !important; padding: 8px 16px !important; }

/* 방명록 textarea 최소 높이 (인라인 스타일 대체) */
.ecf-textarea.guestbook-textarea {
    min-height: 160px !important;
}

/* ════════════════════════════════════
   👍 Tistory 공감/공유 버튼 — 완전 재설계
   ════════════════════════════════════ */
#main-content .postbtn_like .btn_count_area,
#main-content .postbtn_like .ico_arr,
#main-content .postbtn_like .ico_arr_down,
#main-content .postbtn_like [class*="ico_arr"],
#main-content .postbtn_like .uoc-ico-arrow,
#main-content .wrap_btn_etc .ico_arr,
#main-content .wrap_btn_etc .ico_btn,
#main-content .container_postbtn > .ico_arr,
#main-content .container_postbtn > .btn_type1 + .ico_arr { display: none !important; }

#main-content .container_postbtn {
    padding: 0 !important; margin: 40px 0 24px !important;
    display: flex !important; justify-content: flex-end !important;
    align-items: center !important; gap: 8px !important;
    flex-wrap: wrap !important; width: 100% !important;
    border: none !important; background: transparent !important;
    position: static !important; overflow: visible !important;
}
#main-content .postbtn_like {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0 !important; margin: 0 !important;
    background: var(--bg-card) !important;
    display: flex !important; align-items: stretch !important;
    overflow: visible !important; height: 40px !important;
    position: relative !important;
}
#main-content .postbtn_like .wrap_btn {
    border-right: 1px solid var(--border) !important;
    padding: 0 !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    height: 100% !important; margin: 0 !important;
    position: relative !important; overflow: visible !important; flex-shrink: 0;
}
#main-content .postbtn_like .wrap_btn:last-child { border-right: none !important; }
#main-content .postbtn_like .wrap_btn > button,
#main-content .postbtn_like .wrap_btn > a,
#main-content .postbtn_like .uoc-btn {
    color: var(--text-main) !important; display: flex !important;
    align-items: center !important; justify-content: center !important;
    gap: 6px !important; height: 40px !important; padding: 0 16px !important;
    margin: 0 !important; background: transparent !important; border: none !important;
    font-size: 13.5px !important; font-weight: 600 !important;
    font-family: 'Pretendard', sans-serif !important;
    cursor: pointer; white-space: nowrap;
    transition: color 0.2s, background 0.2s ; border-radius: 0 !important;
}
#main-content .postbtn_like .wrap_btn:first-child > button,
#main-content .postbtn_like .uoc-wrap > .uoc-btn { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; }
#main-content .postbtn_like .wrap_btn:last-child > button,
#main-content .postbtn_like .wrap_btn:last-child > a { border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; }
#main-content .postbtn_like .wrap_btn > button:hover,
#main-content .postbtn_like .wrap_btn > a:hover,
#main-content .postbtn_like .uoc-btn:hover {
    background: var(--accent-glow) !important; color: var(--accent) !important;
}
#main-content .wrap_btn_share {
    display: flex !important; align-items: center !important;
    height: 40px !important; margin: 0 !important;
    position: relative !important; overflow: visible !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important; background: var(--bg-card) !important;
}
#main-content .wrap_btn_share > .btn_share {
    color: var(--text-main) !important; display: flex !important;
    align-items: center !important; gap: 6px !important; height: 100% !important;
    padding: 0 16px !important; background: transparent !important; border: none !important;
    border-radius: var(--radius-sm) !important; font-size: 13.5px !important;
    font-weight: 600 !important; cursor: pointer; white-space: nowrap;
    transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
#main-content .wrap_btn_share > .btn_share:hover { color: var(--accent) !important; background: var(--accent-glow) !important; }

/* 팝업 레이어 */
#main-content .wrap_btn .layer_post, #main-content .wrap_btn .layer_share,
#main-content .wrap_btn_share .layer_share, #main-content .wrap_btn_etc .layer_post,
#main-content .container_postbtn > .layer_post, #main-content .container_postbtn > .layer_share {
    position: absolute !important; top: calc(100% + 6px) !important;
    right: 0 !important; left: auto !important; bottom: auto !important;
    z-index: 9500 !important; min-width: 150px !important; width: max-content !important;
    background: var(--bg-card) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
    padding: 6px !important; overflow: visible !important;
    animation: popupFadeIn 0.15s var(--ease) both;
}
@keyframes popupFadeIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
#main-content .wrap_btn .layer_post .btn_mark,
#main-content .wrap_btn .layer_share .btn_mark,
#main-content .wrap_btn_share .layer_share .btn_mark,
#main-content .layer_post .btn_mark, #main-content .layer_share .btn_mark {
    display: flex !important; align-items: center !important; gap: 10px !important;
    width: 100% !important; padding: 9px 14px !important;
    border: none !important; border-radius: 7px !important;
    background: transparent !important; color: var(--text-main) !important;
    font-size: 13.5px !important; font-weight: 500 !important;
    font-family: 'Pretendard', sans-serif !important;
    text-align: left !important; cursor: pointer; white-space: nowrap;
    transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
#main-content .wrap_btn .layer_post .btn_mark:hover,
#main-content .layer_share .btn_mark:hover { background: var(--accent-glow) !important; color: var(--accent) !important; }

/* ════════════════════════════════════
   📋 Another Category — V8 (JS DOM 재구성 방식)
   실제 렌더링은 JS가 .ac-list 구조로 완전 교체.
   CSS는 새 구조(.ac-*)만 담당.
   기존 테이블 관련 스타일은 JS 실행 전 깜박임 방지용만 유지.
   ════════════════════════════════════ */

/* ── 원본 테이블 — JS 실행 전 깜박임 방지용 숨김 ── */
#main-content div.another_category {
    margin: 64px 0 0;
    padding: 0;
    max-width: 100%;
}
#main-content div.another_category table {
    opacity: 0;          /* JS 교체 전 FOUC 방지 — 공간 차지 안 함 */
    pointer-events: none;
}

/* 섹션 타이틀 */
#main-content div.another_category h4,
#main-content div.another_category h5 {
    font-size: 9px; font-weight: 800;
    color: var(--accent); text-transform: uppercase;
    letter-spacing: 3px; margin: 0 0 8px;
    font-family: 'JetBrains Mono', monospace;
    display: flex; align-items: center; gap: 8px;
    opacity: 0.9;
}
#main-content div.another_category h4::after,
#main-content div.another_category h5::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, var(--border-2) 0%, transparent 100%);
}

/* ══════════════════════════════════════════════════════════
   JS가 생성하는 새 DOM 구조:
   div.another_category
     h4/h5 (유지)
     ul.ac-list
       li.ac-item
         a.ac-link
           span.ac-title
           span.ac-date
   ══════════════════════════════════════════════════════════ */

/* ── 리스트 컨테이너 ── */
.ac-list:empty { display: none; }   /* 목록 없을 때 빈 공간 방지 */
.ac-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

/* ── 개별 항목 ── */
.ac-item { margin: 0; padding: 0; width: 100%; }

/* ── 링크 행 (핵심) ── */
.ac-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    color: var(--text-main) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: background-color 0.18s var(--ease),
                border-color 0.18s var(--ease),
                box-shadow 0.18s var(--ease);
}
.ac-link:visited .ac-title { color: var(--text-dim); }   /* 방문한 카테고리 링크 */
[data-theme='light'] .ac-link:visited .ac-title { color: var(--text-dim); }
.ac-link:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
    box-shadow: inset 3px 0 0 var(--accent) !important;
}
.ac-link:hover {
    background: var(--bg-card-2) !important;
    border-color: rgba(96, 165, 250, 0.35) !important;
    box-shadow: inset 3px 0 0 var(--accent),
                0 2px 12px var(--accent-glow) !important;
}

/* ── 제목 (flex:1 — 남은 공간 전부) ── */
.ac-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-main) !important;
    padding: 11px 12px 11px 16px !important;
}
.ac-link:hover .ac-title { color: var(--accent) !important; }

/* ── 날짜 (고정폭) ── */
.ac-date {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    font-family: 'JetBrains Mono', monospace !important;
    color: var(--text-dim) !important;
    padding: 11px 16px 11px 10px !important;
    border-left: 1px solid var(--border) !important;
    transition: color 0.18s var(--ease);
}
.ac-link:hover .ac-date {
    color: var(--accent) !important;
    border-left-color: rgba(96, 165, 250, 0.22) !important;
}

/* ── 라이트 모드 ── */
[data-theme='light'] .ac-link {
    background: #FFFFFF !important;
    border-color: var(--border) !important;
    color: #1C1C1E !important;
}
[data-theme='light'] .ac-link:visited .ac-title { color: var(--text-dim); }   


[data-theme='light'] .ac-title { color: #1C1C1E !important; }
[data-theme='light'] .ac-link:hover .ac-title { color: var(--accent) !important; }
[data-theme='light'] .ac-date {
    color: var(--text-dim) !important;
    border-left-color: var(--border) !important;
}
[data-theme='light'] .ac-link:hover .ac-date { color: var(--accent) !important; }
/* ════════════════════════════════════
   💬 댓글 시스템
   ════════════════════════════════════ */
.comments-area { margin-top: 56px; }   /* 72px → 56px */
/* ── Tistory s_rp 계열 커스텀 태그 전부 block 강제 ── */
/* 브라우저는 unknown 커스텀 요소를 inline으로 렌더링 → flex 2단 레이아웃 유발 */
s_rp, s_rp_input_form, s_rp_container, s_rp_paging,
s_rp_member, s_rp_guest, s_rp_rep, s_rp2_rep, s_rp2_container,
s_guest, s_guest_input_form, s_guest_container,
s_guest_rep, s_guest_reply_container, s_guest_reply_rep,
s_tag, s_tag_rep, s_tag_label,
s_article_rep, s_index_article_rep, s_permalink_article_rep,
s_article_protected, s_list, s_paging, s_paging_rep,
s_ad_div, s_search, s_random_tags, s_t3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    clear: both !important;
}
/* 댓글 목록 위 입력폼 구분 */
.comments-area .ecf-wrap + .comment-list,
.comments-area .rp_input_form + .comment-list {
    margin-top: 8px;
}

.comments-title {
    font-size: 1.2rem; font-weight: 800;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 28px; padding-top: 40px;
    border-top: 1px solid var(--border);
    position: relative;
}
.comments-title::before {
    content: '';
    position: absolute; top: -1px; left: 0;
    width: 40px; height: 2px;
    background: var(--accent-line); border-radius: 99px;
}
.comment-count {
    font-size: 0.78rem; font-weight: 800; color: #fff;
    background: var(--accent-line); border-radius: 99px;
    padding: 2px 10px;
    font-family: 'JetBrains Mono', monospace;
    min-width: 26px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── 댓글 입력폼 (ECF) ── */
.ecf-wrap {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    padding: 20px 22px 16px !important;
    margin: 0 0 36px !important;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    display: block !important; width: 100% !important; box-sizing: border-box !important;
    position: relative !important; overflow: visible !important;
    float: none !important; clear: both !important;
}
/* 댓글 입력폼 상단 레이블 */
.ecf-wrap::before {
    content: '댓글 작성';
    display: block;
    font-size: 10px; font-weight: 800;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 1.5px;  /* 2→1.5px: 한국어 자간 최적화 */
    color: var(--accent); opacity: 0.75;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.ecf-wrap:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
[data-theme='light'] .ecf-wrap {
    background: #fff !important; border-color: var(--border) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
}
[data-theme='light'] .ecf-wrap:focus-within {
    border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important;
}

.ecf-guest-row { display: flex; gap: 10px; margin-bottom: 12px; }
.ecf-guest-row input {
    flex: 1; min-width: 0;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text-main);
    padding: 9px 13px; font-size: 0.875rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ecf-guest-row input:invalid { box-shadow: none; outline: none; }   /* HTML5 validation UI 비활성 */
.ecf-guest-row input:focus,
.ecf-guest-row input:focus-visible {
    border-color: var(--accent); outline: none;
    box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-main);
}
.ecf-guest-row input::placeholder { color: var(--text-dim); opacity: 0.7; }

.ecf-textarea {
    display: block !important; width: 100% !important; max-width: 100% !important;
    min-height: 120px; resize: vertical;
    background: transparent !important; border: none !important;
    color: var(--text-main) !important;
    font-size: 0.9375rem; font-family: 'Pretendard', sans-serif;
    line-height: 1.75; padding: 4px 0; outline: none;
    box-sizing: border-box !important; caret-color: var(--accent);
    float: none !important;
}
.ecf-textarea::placeholder { color: var(--text-dim); opacity: 0.65; }

.ecf-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--border);
    gap: 10px; flex-wrap: wrap;
}
.ecf-secret {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    color: var(--text-dim); font-size: 0.875rem; font-weight: 500;
    transition: color 0.2s;
}
.ecf-secret:hover { color: var(--text-main); }
.ecf-secret input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--accent);
    cursor: pointer; appearance: auto !important; -webkit-appearance: auto !important;
}
.ecf-send {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--accent-line); color: #fff; border: none;
    border-radius: var(--radius-sm);
    padding: 9px 20px; font-size: 0.875rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 12px var(--accent-glow);
    touch-action: manipulation;
}
.ecf-send:hover { opacity: 0.88; box-shadow: 0 5px 18px var(--accent-glow); transform: translateY(-1px); }
.ecf-send:active { transform: scale(0.96); opacity: 0.8; box-shadow: none; }

/* ── 댓글 목록 ── */
.comment-list {
    padding: 0; list-style: none; margin: 0;
    display: block !important; width: 100% !important;
    float: none !important; clear: both !important; box-sizing: border-box !important;
}
.comment-list > li {
    margin-bottom: 8px; padding: 18px;
    border: 1px solid var(--border-2);   /* border → border-2로 더 명확한 구분 */
    border-radius: var(--radius-md);
    background: var(--bg-card);
    position: relative; overflow: visible;
    display: block !important; width: 100% !important;
    float: none !important; clear: both !important; box-sizing: border-box !important;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.comment-list > li:hover {
    border-color: var(--border-glow);
    box-shadow: 0 2px 12px var(--accent-glow);
}
.comment-list > li:last-child { margin-bottom: 0; }
.comment-block {
    display: flex; gap: 14px; align-items: flex-start;
    overflow: visible; position: relative;
}

/* 아바타 */
.comment-avatar {
    flex-shrink: 0; width: 38px; height: 38px;
    border-radius: 50%; background: var(--bg-elevated);
    border: 2px solid var(--border); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); font-size: 16px; line-height: 1;
    position: relative;
    box-shadow: 0 0 0 2px var(--bg-card);
}
.reply-list .comment-avatar {
    width: 30px; height: 30px; font-size: 13px;
}
.comment-avatar::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 18px; height: 18px;
    background: var(--text-dim);
    opacity: 0.25; z-index: 0;
    border-radius: 50%;  /* 이모지 대신 CSS 원형 도형 — 호환성 ↑ */
}
.comment-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    position: absolute; top: 0; left: 0; z-index: 1;
    border-radius: 0; border: none;
}
.comment-avatar:has(img)::after { display: none; }

/* 댓글 본문 */
.comment-body { flex: 1; min-width: 0; overflow: visible; }
.comment-header {
    display: flex; justify-content: space-between;
    align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 12px;
    position: relative;
}
.comment-author-info {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0;
}
.comment-author-info strong {
    font-size: 14px; font-weight: 800;
    color: var(--text-strong);
    display: flex; align-items: center; gap: 5px;
    font-family: 'Pretendard', sans-serif;
    letter-spacing: -0.01em;
}
.comment-author-info strong img,
.comment-author-info strong span.tistoryProfileLayerTrigger,
.tistoryProfileLayerTrigger {
    display: none !important; width: 0 !important; height: 0 !important;
    opacity: 0 !important; overflow: hidden !important; position: absolute !important;
}
.comment-date {
    font-size: 12.5px; color: var(--text-dim);
    font-family: 'JetBrains Mono', monospace;
}
.comment-desc {
    font-size: 0.9rem; line-height: 1.78;
    color: var(--text-main); word-break: keep-all; overflow-wrap: break-word;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    margin-top: 2px;
}

/* 답글/수정 버튼 */
.comment-utils {
    display: flex; align-items: center; gap: 6px;
    flex-wrap: nowrap; flex-shrink: 0;
    position: relative; z-index: 10; pointer-events: auto;
}
.mod-link, a.mod-link, .comment-utils a {
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 11.5px; font-weight: 600;
    color: var(--text-dim) !important;
    text-decoration: none !important;
    padding: 5px 12px !important;
    border-radius: var(--radius-xs) !important;
    border: 1px solid var(--border-2) !important;
    background: var(--bg-elevated) !important;   /* transparent → bg-elevated로 클릭 영역 명확화 */
    cursor: pointer !important; white-space: nowrap;
    flex-shrink: 0; position: relative !important; z-index: 100 !important;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
                background-color 0.18s var(--ease), transform 0.15s var(--ease);
    touch-action: manipulation; user-select: none;
    pointer-events: auto !important;
    min-height: 32px !important; min-width: 44px !important; line-height: 1;
    isolation: isolate;
}
.mod-link:hover, a.mod-link:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: var(--accent-glow) !important;
    transform: translateY(-1px);
}
.mod-link:active { transform: scale(0.94); opacity: 0.8; }

/* 대댓글 */
.reply-list {
    margin-top: 12px; margin-left: 20px;
    list-style: none; padding: 0;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.reply-list > li {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    position: relative;
    transition: border-color 0.2s var(--ease);
}
.reply-list > li::before {
    content: '↳';
    position: absolute; left: -26px; top: 14px;
    color: var(--accent); font-size: 14px; font-weight: 700;
    opacity: 0.7;
}
.reply-list > li:hover { border-color: var(--border-glow); }

/* 댓글 클릭 통과 */
.comments-area, .comment-list, .comment-list > li,
.comment-block, .comment-header, .comment-body, .comment-utils {
    pointer-events: auto !important; overflow: visible !important;
}
.uol-reply-view, .uol-reply-view * { pointer-events: auto !important; }

/* 라이트 모드 profile-widget 대비 개선 */
[data-theme='light'] .profile-widget {
    background: linear-gradient(135deg, #FFFFFF 0%, #F5F4F0 100%) !important;
    border-color: #C5C3BC !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,1) inset !important;
}
[data-theme='light'] .profile-img-wrap {
    border-color: #C5C3BC !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}
/* ── 사이드바 링크 가독성 강화 (다크 모드) ── */
#sidebar .menu-widget ul > li > a,
#sidebar .category-widget .tt_category a:not(.sub_category_list a),
#sidebar .category-widget .tt_category .category_list > li.item > a {
    color: #B0B0B6 !important;
}
#sidebar .menu-widget ul > li > a:hover,
#sidebar .category-widget .tt_category a:hover {
    color: #E3E3E3 !important;
}
#sidebar .category-widget .tt_category .sub_category_list > li > a,
#sidebar .category-widget .tt_category > ul > li > ul > li > a {
    color: #8E8E93 !important;
}
#sidebar .rp-title { color: #B0B0B6 !important; }
#sidebar .stat-label { color: #8E8E93 !important; }
#sidebar .stat-value { color: #F5F5F5 !important; }
#sidebar .sidebar-credit-text { color: #8E8E93 !important; }
#sidebar .profile-email a { color: #8E8E93 !important; }

/* ── 라이트 모드 사이드바 — 텍스트 색상 완전 재정의 ──
   배경: #F0EFEB (따뜻한 밝은 회색) → 다크 색상 필요 */
[data-theme='light'] #sidebar .menu-widget ul > li > a,
[data-theme='light'] #sidebar .category-widget .tt_category a:not(.sub_category_list a),
[data-theme='light'] #sidebar .category-widget .tt_category .category_list > li.item > a {
    color: #2C2C2E !important;   /* 라이트 사이드바 주 텍스트 */
}
[data-theme='light'] #sidebar .menu-widget ul > li > a:hover,
[data-theme='light'] #sidebar .category-widget .tt_category a:hover {
    color: var(--accent) !important;   /* hover: 파란색 */
    background: rgba(37, 99, 235, 0.08) !important;
}
[data-theme='light'] #sidebar .category-widget .tt_category .sub_category_list > li > a,
[data-theme='light'] #sidebar .category-widget .tt_category > ul > li > ul > li > a {
    color: #48484A !important;
}
[data-theme='light'] #sidebar .rp-title { color: #2C2C2E !important; }
[data-theme='light'] #sidebar .stat-label { color: #6C6C72 !important; }
[data-theme='light'] #sidebar .stat-value { color: #1C1C1E !important; }
[data-theme='light'] #sidebar .sidebar-credit-text { color: #6C6C72 !important; }
#sidebar .sidebar-credit a:hover { color: var(--accent) !important; }
[data-theme='light'] #sidebar .profile-email a { color: #48484A !important; }
[data-theme='light'] #sidebar .profile-name { color: #050505 !important; }
[data-theme='light'] #sidebar .profile-role { color: var(--accent) !important; }
[data-theme='light'] #sidebar .widget-title { color: var(--accent) !important; }
[data-theme='light'] .widget-title::after {
    background: linear-gradient(90deg, #D1CDC8 0%, transparent 100%);
}
[data-theme='light'] #sidebar .tag-cloud a {
    color: #2C2C2E !important;
    background: rgba(0,0,0,0.05) !important;
    border-color: #D1CDC8 !important;
}
[data-theme='light'] #sidebar .tag-cloud a:hover {
    color: var(--accent) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border-color: rgba(37, 99, 235, 0.30) !important;
}
[data-theme='light'] #sidebar .stat-box {
    background: rgba(0,0,0,0.04) !important;
    border-color: #D1CDC8 !important;
}
[data-theme='light'] #sidebar .stat-box .stat-value { color: #1C1C1E !important; }
[data-theme='light'] #sidebar .stat-box .stat-value.today { color: var(--accent) !important; }
[data-theme='light'] #sidebar .rp-date { color: #6C6C72 !important; }
[data-theme='light'] #sidebar .recent-post-list a { color: #2C2C2E !important; }
[data-theme='light'] #sidebar .recent-post-list a:hover { color: var(--accent) !important; }

/* 라이트 모드 사이드바 오버레이 */
[data-theme='light'] #sidebar-overlay.active {
    background: rgba(0, 0, 0, 0.4) !important;
}

/* TOC 레벨: li.toc-h3 { padding-left:20px } 방식 사용 */

/* [class*='blog_login'] pointer-events 규칙 제거됨 */

/* 동적 폼 */
.comment-list > li > .rp_input_form,
.comment-list > li > .tt_reply_input_form,
.comment-list > li > [class*="reply_input"],
.comment-list > li > form {
    display: block !important; visibility: visible !important;
    opacity: 1 !important; pointer-events: auto !important;
    max-height: none !important; height: auto !important;
    overflow: visible !important;
    margin-top: 14px !important; padding: 18px !important;
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    position: static !important; box-sizing: border-box !important;
}
.comment-list > li, .comment-list > li * { pointer-events: auto; }
.comment-list > li .mod-link, .comment-utils .mod-link {
    pointer-events: auto !important; position: relative !important; z-index: 200 !important;
}

/* Tistory 주입 요소 처리 */
.comments-area s_rp_member,
.comments-area s_rp_guest,
.comments-area s_rp_rep,
.comments-area s_rp2_rep { display: contents !important; }

.tt_blog_profile, .blog-profile, .user-profile-wrap, .rp_profile_area,
.reply_profile_area, .comment_author_area,
[class*="blog_profile"], [class*="rp_profile"], [class*="user_profile"] {
    display: none !important; visibility: hidden !important;
    height: 0 !important; max-height: 0 !important;
    overflow: hidden !important; margin: 0 !important; padding: 0 !important;
    border: none !important; opacity: 0 !important;
    pointer-events: none !important;
}
/* 댓글 영역 Tistory 프로필 카드 — 특정 클래스만 차단 (광범위 div 숨김 제거)
   ⚠ 이전에 있던 .comments-area > div:not(...) 규칙은 ecf-wrap 래퍼도 숨겨서 제거됨 */
.comments-area .tt_blog_profile_card,
.comments-area .tt-blog-profile,
.comments-area [class*="tt_blog_profile"],
.comments-area [class*="tt_author_card"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important; max-height: 0 !important;
    overflow: hidden !important; opacity: 0 !important;
    margin: 0 !important; padding: 0 !important; border: none !important;
    pointer-events: none !important;
}
.comments-area [style*="background: #fff"],
.comments-area [style*="background:#fff"],
.comments-area [style*="background-color: #fff"],
.comments-area [style*="background-color: rgb(255, 255, 255)"] {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-radius: 10px !important;
}


/* Tistory 동적 폼 내부 스타일 */
.rp_input_form, .tt_reply_input_form, .tt_rp_wrap, .rp_wrap {
    display: block !important; max-height: none !important; height: auto !important;
    overflow: visible !important; opacity: 1 !important; visibility: visible !important;
    pointer-events: auto !important; width: 100% !important;
}
.rp_input_form input, .rp_input_form textarea, .rp_input_form button, .rp_input_form select,
.tt_reply_input_form input, .tt_reply_input_form textarea, .tt_reply_input_form button {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    pointer-events: auto !important; height: auto !important; max-height: none !important;
}
.rp_input_form textarea, .tt_reply_input_form textarea {
    width: 100% !important; min-height: 90px !important;
    background: var(--bg-main) !important; color: var(--text-main) !important;
    border: 1.5px solid var(--border) !important; border-radius: var(--radius-sm) !important;
    padding: 10px !important; font-family: 'Pretendard', sans-serif !important;
    font-size: 14px !important; line-height: 1.6 !important;
    resize: vertical !important; box-sizing: border-box !important;
}
.rp_input_form textarea:focus, .tt_reply_input_form textarea:focus {
    border-color: var(--accent) !important; outline: none !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.rp_input_form button[type="submit"], .rp_input_form .btn_submit,
.tt_reply_input_form button[type="submit"] {
    background: var(--accent-line) !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    padding: 8px 18px !important; font-weight: 700 !important;
    cursor: pointer !important; font-size: 13px !important; display: inline-flex !important;
    align-items: center !important;
}
.uol-reply-view, .uol-reply-view-inner, .uol-reply-view-body {
    background: var(--bg-card) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important; padding: 16px !important;
    margin: 12px 0 !important; color: var(--text-main) !important;
    display: block !important; visibility: visible !important;
    opacity: 1 !important; pointer-events: auto !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
}
.uol-reply-view textarea, .uol-reply-view input {
    background: var(--bg-main) !important; border: 1.5px solid var(--border) !important;
    border-radius: var(--radius-sm) !important; color: var(--text-main) !important;
    padding: 10px !important; width: 100% !important;
    font-family: 'Pretendard', sans-serif !important; font-size: 14px !important;
}
.uol-reply-view button {
    background: var(--accent-line) !important; color: #fff !important;
    border: none !important; border-radius: var(--radius-sm) !important;
    padding: 8px 18px !important; font-weight: 700 !important; cursor: pointer !important;
}
.rp_input_head, .tt_reply_input_head, .uol-reply-login, .uol-reply-profile,
[class*="rp_login"], [class*="login_info"], [class*="reply_profile"] {
    background: var(--bg-card) !important; border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important; color: var(--text-main) !important;
    padding: 12px 16px !important; margin-bottom: 12px !important;
    font-size: 0.875rem !important; display: flex !important;
    align-items: center !important; gap: 10px !important;
}
#kakaoServiceWrap, #kakaoWrap {
    background: transparent !important; color: var(--text-main) !important;
    border-radius: 0 !important; padding: 0 !important;
}

/* 방명록 */
.guestbook-area { margin-top: 0; }
.guestbook-area .comments-title { padding-top: 0; border-top: none; }
.guest-list { margin-top: 36px; }

/* ── 보호된 글 ── */
.protected-form-wrap {
    padding: 60px 20px; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0;
}
.protected-icon { color: var(--text-dim); margin-bottom: 22px; display: block; }
.protected-msg {
    font-size: 1rem; color: var(--text-main); margin-bottom: 28px;
    line-height: 1.8; word-break: keep-all;
}
.protected-form-bottom { justify-content: center !important; max-width: 400px; margin: 0 auto; width: 100%; }
.protected-password-input { text-align: center !important; font-family: 'JetBrains Mono', monospace !important; }

/* ── Submit 버튼 ── */
.submit-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    background: var(--accent-line); color: #fff !important;
    border: none; border-radius: var(--radius-sm);
    padding: 11px 26px; font-size: 0.9rem; font-weight: 700;
    cursor: pointer; white-space: nowrap;
    transition: opacity 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 3px 12px var(--accent-glow); min-height: 44px;
}
.submit-btn:hover { opacity: 0.88; box-shadow: 0 5px 18px var(--accent-glow); transform: translateY(-1px); }
.submit-btn:active { transform: scale(0.97); opacity: 0.8; }
.submit-btn--full { width: 100% !important; }

/* ── Tistory 네이티브 폼 래퍼 리셋 (.rp_wrap, .tt_rp_wrap) ── */
/* .ecf-wrap 은 커스텀 폼으로 별도 스타일 유지 — 이 리셋에서 제외 */
.rp_wrap, .tt_rp_wrap {
    display: block !important; width: 100% !important;
    max-width: 100% !important; margin: 0 !important;
    background: transparent !important; border: none !important;
    overflow: visible !important; pointer-events: auto !important;
    float: none !important; clear: both !important;
}


/* ════════════════════════════════════
   📄 페이지네이션
   ════════════════════════════════════ */
.pagination {
    display: flex; justify-content: center; gap: 6px;
    margin: 48px 0 32px;   /* 64px→48px, 40px→32px */ flex-wrap: wrap; width: 100%;
}
.pagination a, .pagination span {
    display: inline-flex !important; justify-content: center !important;
    align-items: center !important; min-width: 40px !important;
    height: 40px !important; border-radius: var(--radius-sm) !important;
    color: var(--text-dim) !important;
    font-size: 13.5px !important; font-weight: 700 !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    transform: translateY(0) scale(1);
    transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
                color 0.2s var(--ease), transform 0.2s var(--ease);
    text-decoration: none !important; padding: 0 !important; margin: 0 !important;
    font-family: 'JetBrains Mono', monospace; line-height: 1 !important;
    touch-action: manipulation;
}
.pagination a:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-glow) !important;
    transform: scale(1.05) translateY(-1px);
}
.pagination a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pagination a:active { transform: scale(0.94); opacity: 0.8; }
.pagination a.no_more,
.pagination a.disabled,
.pagination span.no_more { opacity: 0.3 !important; cursor: default !important; pointer-events: none !important; }

/* 현재 페이지 — Tistory가 <strong> 또는 .current 클래스로 렌더링 */
.pagination strong,
.pagination a.current,
.pagination a[aria-current="page"],
.pagination span.current,
.pagination .page-num.current,
.pagination a.js-current {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    font-weight: 800 !important;
    box-shadow: 0 0 0 3px var(--accent-glow),
                0 4px 16px rgba(96, 165, 250, 0.45) !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: scale(1.12) !important;   /* 더 크게 */
    position: relative !important;
    z-index: 1 !important;
    /* 텍스트 가독성: 흰 배경의 경우 글로우 제거 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
[data-theme='light'] .pagination a.js-current,
[data-theme='light'] .pagination strong,
[data-theme='light'] .pagination a.current {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25),
                0 4px 16px rgba(37, 99, 235, 0.40) !important;
}
.pagination a.js-current::after {
    content: '' !important;
    position: absolute !important; bottom: -5px !important;
    left: 50% !important; transform: translateX(-50%) !important;
    width: 4px !important; height: 4px !important;
    border-radius: 50% !important; background: var(--accent) !important;
}
.pagination { overflow: visible; }   /* ::after dot이 잘리지 않도록 */
/* prev/next 화살표 버튼 — 명확한 시각 처리 */
.pagination .page-btn {
    background: var(--bg-elevated) !important;
    color: var(--text-dim) !important;
}
.pagination .page-btn:hover {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ════════════════════════════════════
   🦶 푸터
   ════════════════════════════════════ */
#footer {
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    padding: 14px 5%;
}
[data-theme='light'] #footer {
    background: var(--bg-sidebar);   /* #F0EFEB */
    border-top-color: var(--border-2);
}
.footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: flex; align-items: center; justify-content: center;
}
.footer-title {
    font-size: 12.5px; color: var(--text-dim);
    text-align: center; letter-spacing: -0.01em;
    font-family: 'JetBrains Mono', monospace;
    user-select: none;
}
.footer-title strong { color: var(--accent); font-weight: 700; }
/* footer-license, divider, author — HTML에 없어 제거 */

/* ════════════════════════════════════
   📌 우측 플로팅 TOC (1280px+)
   ════════════════════════════════════ */
#toc-float {
    position: fixed; top: calc(var(--header-h) + 22px); right: 20px;
    width: 240px;   /* TOC 폭 확장 */
    max-height: calc(100vh - 108px - 80px);
    background: rgba(19, 19, 20, 0.92);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    z-index: 990;
    box-shadow: 0 8px 32px var(--shadow), 0 1px 0 rgba(255,255,255,0.03) inset;
    display: flex; flex-direction: column; overflow: hidden;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    animation: fadeInRight 0.45s var(--ease-spring) both;
}
[data-theme='light'] #toc-float {
    background: rgba(250, 249, 247, 0.96);
    box-shadow: 0 8px 32px rgba(0,0,0,0.08), 0 1px 0 rgba(255,255,255,1) inset;
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 1279px) { #toc-float { display: none !important; } }

.toc-float-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px 10px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
    background: linear-gradient(135deg,
        rgba(96, 165, 250, 0.06) 0%, transparent 60%);
}
.toc-float-title {
    font-size: 9.5px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 2.5px; color: var(--accent); opacity: 0.85;
    font-family: 'JetBrains Mono', monospace;
}
.toc-float-close {
    background: transparent; border: none;
    color: var(--text-dim); cursor: pointer;
    width: 26px; height: 26px; border-radius: 5px;
    display: flex; align-items: center; justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}
.toc-float-close:hover { background: var(--accent-glow); color: var(--accent); }

#toc-float-content {
    overflow-y: auto; padding: 8px;
    scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
#toc-float-content::-webkit-scrollbar { width: 3px; }
#toc-float-content::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }

/* TOC 접기 상태 */
#toc-float.collapsed #toc-float-content { display: none; }
#toc-float.collapsed {
    max-height: none; /* 헤더만 표시 */
}
#toc-float.collapsed .toc-float-close {
    transform: rotate(45deg); /* X → + 아이콘으로 전환 힌트 */
}

@media (max-width: 1279px) {
    #toc-widget { position: static !important; width: auto !important;
        max-height: 38vh !important; overflow-y: auto !important;
        background: transparent !important; border: none !important;
        padding: 0 !important; box-shadow: none !important; }
}

/* ════════════════════════════════════
   ⬆️ Back to Top 버튼
   ════════════════════════════════════ */
#back-to-top {
    position: fixed; right: 68px; bottom: 24px; z-index: 900;
    /* Tistory 구독하기 버튼(right:20px)과 겹치지 않도록 right 이동 */
    width: 44px; height: 44px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim); cursor: pointer;
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease),
                transform 0.3s var(--ease), background-color 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: 0 4px 14px var(--shadow);
}
#back-to-top.visible {
    opacity: 1; visibility: visible; transform: translateY(0);
    /* 보이는 순간부터 액센트 색상 적용 */
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
    box-shadow: 0 4px 16px var(--accent-glow) !important;
}
#back-to-top.visible:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 24px var(--accent-glow) !important;
    filter: brightness(1.12);
}
#back-to-top:hover {
    background: var(--accent); color: #fff; border-color: var(--accent);
    box-shadow: 0 4px 16px var(--accent-glow);
}
#back-to-top:active { transform: scale(0.92); }

/* ════════════════════════════════════
   🔢 카운터 위젯 / 사이드바 인라인 스타일 보조
   ════════════════════════════════════ */


/* ── Tistory 외 도구모음 처리 ── */
.tistoryProfileLayerTrigger { display: none !important; }
.comments-area .rp_member, .comments-area .tt_rp_member,
.comments-area .rp_guest_info, .comments-area .tt_rp_guest_info,
.comments-area [class*="member_info"],
.comments-area [class*="guest_info"]:not(.ecf-guest-row) {
    display: none !important; visibility: hidden !important;
    height: 0 !important; max-height: 0 !important;
    overflow: hidden !important; padding: 0 !important; margin: 0 !important;
}
/* Tistory 신고/댓글 버튼 모방 */
.comment-list a[onclick*="reply"],
.comment-list a[onclick*="Delete"],
.comment-list a[onclick*="Report"],
.comment-list a[onclick*="Modify"] {
    display: inline-flex !important; align-items: center !important;
    font-size: 11.5px !important; font-weight: 600 !important;
    color: var(--text-dim) !important; text-decoration: none !important;
    padding: 5px 11px !important; border-radius: var(--radius-xs) !important;
    border: 1px solid var(--border-2) !important; background: transparent !important;
    cursor: pointer !important; min-height: 30px !important; pointer-events: auto !important;
}
.comment-list a[onclick*="reply"]:hover,
.comment-list a[onclick*="Delete"]:hover,
.comment-list a[onclick*="Modify"]:hover {
    color: var(--accent) !important; border-color: var(--accent) !important;
    background: var(--accent-glow) !important;
}

/* 사이드바 열림 전역 스크롤 차단 — 미디어 쿼리 밖에서 선언해야 PC에서도 작동 */
body.sidebar-open {
    overflow: hidden;
    touch-action: none;
}

/* ════════════════════════════════════
   📱 반응형 (960px 이하 — 모바일/태블릿)
   ════════════════════════════════════ */
@media screen and (max-width: 960px) {
    .mobile-only { display: flex !important; position: absolute; top: 13px; right: 13px; z-index: 2110; }
    #sidebar {
        transform: translateX(-100%); visibility: hidden; opacity: 1 !important;
        z-index: 2090; box-shadow: 20px 0 60px rgba(0,0,0,0.7);
        padding-top: 60px;
        transition: transform 0.4s var(--ease), visibility 0s 0.4s;
    }
body.sidebar-open #sidebar {
        transform: translateX(0); visibility: visible;
        transition: transform 0.4s var(--ease), visibility 0s;
    }
    #main-content { padding-left: 0 !important; width: 100% !important; overflow-x: hidden; }
    #sidebar-overlay {
        display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.55);
        -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
        z-index: 2080; opacity: 0; visibility: hidden;
        transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease);
        cursor: pointer; touch-action: none; pointer-events: auto;
        will-change: opacity;
    }
    body.sidebar-open #sidebar-overlay { opacity: 1; visibility: visible; }
    #main { padding: 28px 16px; width: 100%; max-width: 100%; overflow-x: hidden; }   /* 30→28px, 20→16px */
    .heading-anchor { display: none !important; }
    .search-box input { font-size: 16px !important; }
    #toc-widget { max-height: 38vh; overflow-y: auto; }
    #main-content .post-detail { max-width: 100%; }
    .header-utils { padding-right: 44px; gap: 6px; }
    .icon-btn { width: 36px; height: 36px; }
    #back-to-top { right: 14px; bottom: 74px; width: 42px; height: 42px; }
    #footer { padding: 12px 18px; }   /* 통합 */
    .footer-title { font-size: 11.5px; }
    .ecf-wrap { padding: 16px; }
    .mod-link { min-height: 38px; min-width: 44px; padding: 7px 13px; font-size: 11.5px; }
    .ecf-send { padding: 10px 18px; font-size: 0.875rem; }
    .ecf-secret { padding: 5px 0; }

    /* 모바일 카드: 수직으로 전환 */
    .card-link { padding: 18px 16px; gap: 14px; }
    .card-thumb { width: 88px; height: 68px; }
    .card-title { font-size: 1rem; }
}

/* ════════════════════════════════════
   💻 중간 데스크탑 (961px ~ 1200px)
   ════════════════════════════════════ */
@media screen and (min-width: 961px) and (max-width: 1200px) {
    #main { padding: 40px 4%; }   /* 5% → 4%: 좁은 화면에서 콘텐츠 공간 확보 */
    .post-detail, .tag-page-area, .protected-post { max-width: 680px; }
}

/* ════════════════════════════════════
   📱 태블릿 (601px ~ 720px) — 카드 중간 크기
   ════════════════════════════════════ */
@media screen and (min-width: 601px) and (max-width: 720px) {
    .card-thumb { width: 110px; height: 80px; }
    .card-link { padding: 18px 16px; gap: 14px; }
    .card-title { font-size: 1rem; }
}


/* ════════════════════════════════════
   📱 극소 화면 (360px 이하 — Galaxy Fold 등)
   ════════════════════════════════════ */
@media screen and (max-width: 360px) {
    .profile-links { flex-wrap: wrap; }
    .profile-links a { max-width: 100%; flex: 1 1 40%; }
    .logo { font-size: 0.875rem; }
    #main { padding: 20px 12px; }
    .card-link { padding: 14px 12px; }
    .post-content pre { padding: 42px 12px 14px; font-size: 12px; }
    .ecf-guest-row { gap: 8px; }
    .icon-btn { width: 32px; height: 32px; }
}


/* ════════════════════════════════════
   📱 소형 태블릿 (480px 이하)
   ════════════════════════════════════ */
@media screen and (max-width: 480px) {
    .post-header h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
    .post-content h2 { font-size: 1.25rem; }
    .post-content h3 { font-size: 1.1rem; }
    .card-thumb { width: 80px; height: 60px; }
    .profile-widget { padding: 16px; }
    .ecf-guest-row { flex-direction: column; gap: 6px; }
    .ecf-guest-row input { width: 100%; }
    #toc-float { display: none !important; }
}
/* ════════════════════════════════════
   📱 소형 화면 (600px 이하)
   ════════════════════════════════════ */
@media screen and (max-width: 600px) {
    .card-link { flex-direction: column; gap: 12px; padding: 16px; }
    .card-thumb { width: 100%; height: 160px; order: 1; border-radius: var(--radius-sm); }
    .card-content { order: 2; }
    .post-header h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
    .post-content { font-size: 1.0rem; }   /* 모바일: 17px→16px */
    .post-content pre { padding: 44px 15px 16px; font-size: 13px; }
    .header-utils { padding-right: 14px; gap: 6px; }
    #main-content .container_postbtn { justify-content: center !important; }
    .comment-block { gap: 11px; }
    .comment-avatar { width: 36px; height: 36px; }
    .reply-list {
        padding-left: 14px; border-left: 2px solid var(--accent);
        margin-top: 10px; margin-left: 6px;
    }
    /* 모바일: 대댓글 화살표 오버플로 방지 */
    .reply-list > li::before { left: -18px; font-size: 12px; }
    .code-block-wrapper { margin: 20px 0; }
    .post-content .table-wrapper { margin: 20px 0; }
    .post-content { line-height: 1.85; max-width: 100%; }   /* 모바일: max-width 해제 */
    .post-content h2 { margin: 36px 0 14px; }
    .post-content h3 { margin: 28px 0 10px; }
    .post-content blockquote { padding: 16px 18px 16px 22px; margin: 24px 0; }
    .post-tags-wrapper { margin-top: 48px; }
    #footer { padding: 12px 18px; }   /* 24px → 12px */
    .ecf-guest-row { flex-direction: column; }
    /* 성능: 모바일 stagger 최소화 */
    .article-wrap .post-card { animation-delay: 0s; animation-duration: 0.25s ; }
}

/* ════════════════════════════════════
   🌙 라이트 모드 전용 오버라이드
   ════════════════════════════════════ */
[data-theme='light'] .post-detail,
[data-theme='light'] .post-content { color: var(--text-main); }
[data-theme='light'] .post-content h2.heading-anchor-wrap,
[data-theme='light'] .post-content h3.heading-anchor-wrap,
[data-theme='light'] .post-content h4 { color: var(--text-strong); }
[data-theme='light'] .post-content strong, [data-theme='light'] .post-content b { color: var(--text-strong); }
[data-theme='light'] .post-content em, [data-theme='light'] .post-content i { color: #1C1C1E; opacity: 1; }


[data-theme='light'] .post-card::before { background: var(--accent-line); }
[data-theme='light'] .card-thumb { border-color: var(--border); opacity: 0.95; }

[data-theme='light'] .comment-list > li {
    background: #fff;
    border-color: var(--border);
}
[data-theme='light'] .comment-list > li:hover {
    background: rgba(37, 99, 235, 0.025);
    border-color: rgba(37, 99, 235, 0.2);
}
[data-theme='light'] .reply-list > li {
    background: var(--bg-elevated);
}
[data-theme='light'] .comments-title::before { background: var(--accent-line); }
[data-theme='light'] .comment-count { box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22); }
[data-theme='light'] .mod-link { border-color: var(--border); }
[data-theme='light'] .mod-link:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-glow); }
[data-theme='light'] .reply-list { border-left-color: var(--border-2); }

[data-theme='light'] .profile-widget:hover {
    border-color: rgba(37, 99, 235, 0.28);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.10);
}
[data-theme='light'] .stat-box:hover { border-color: var(--accent); }

/* ════════════════════════════════════
   ♿ 접근성 — prefers-reduced-motion
   ════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms ;
        animation-iteration-count: 1 ;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .tech-icon { animation: none !important; }
    .blink-cursor { animation: none !important; }
    .status-dot { animation: none !important; }   /* statusPulse 중단 */
    .copy-btn.copied::after { animation: none !important; opacity: 1; }
    #sidebar { transition: transform 0.01ms, visibility 0s ; }
    #zoom-overlay { transition: opacity 0.01ms, visibility 0s ; }
    #reading-progress { transition: none ; }
    #toc-float { animation: none !important; }
    .post-card { animation: none !important; }
    .article-wrap .post-card { animation: none !important; }
}

/* ════════════════════════════════════
   🖨️ 인쇄 스타일
   ════════════════════════════════════ */
@media print {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
    #sidebar, #sidebar-overlay, .skip-nav, #toc-float, #back-to-top,
    #reading-progress, .heading-anchor, .header-utils, .mobile-only,
    #sidebar-toggle, .comments-area, .guestbook-area,
    .code-block-wrapper .copy-btn, .pagination,
    #tistorytoolbarid, .tt_menubar, .container_postbtn,
    .another_category, .ac-list, #toc-widget, #zoom-overlay, .post-content .video-wrapper { display: none !important; }

    #header {
        position: static !important; height: auto !important;
        padding: 0 !important; border-bottom: 1px solid #000 !important;
        background: transparent !important;
        backdrop-filter: none !important; box-shadow: none !important;
    }
    #header::after { display: none !important; }
    #main-content { padding-left: 0 !important; width: 100% !important; background: #fff !important; }
    body, html { background: #fff !important; color: #000 !important; }
    .post-detail { max-width: 100% !important; margin: 0 !important; }
    .post-content { font-size: 11pt !important; line-height: 1.6 !important; color: #000 !important; }
    .post-content a { color: #000 !important; text-decoration: underline !important; }
    .post-content a::after { content: " (" attr(href) ")" !important; font-size: 0.82em !important; color: #555 !important; }
    .post-content h2, .post-content h3 { page-break-after: avoid; color: #000 !important; }
    .post-content img { max-width: 100% !important; page-break-inside: avoid; }
    .post-content pre, .post-content blockquote, .post-content table { page-break-inside: avoid; }
    .post-content pre { border: 1px solid #ccc !important; background: #f9f9f9 !important; color: #333 !important; }
    .post-content code { background: #f4f4f4 !important; color: #333 !important; }
    #footer { display: block !important; border-top: 1px solid #ccc !important; padding: 16px 0 !important; }
    .footer-title { color: #444 !important; font-size: 10pt !important; }
    .post-header h1 { background: none !important; -webkit-text-fill-color: #000 !important; color: #000 !important; }
}

/* ════════════════════════════════════
   📌 Callout / 강조 박스 (공부용)
   ════════════════════════════════════ */
.post-content .callout,
.post-content .notice,
.post-content [class*="callout"],
.post-content [class*="notice"],
.post-content [class*="tip"],
.post-content [class*="info-box"],
.post-content [class*="highlight-box"] {
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
    border-left: 4px solid var(--accent) !important;
    background: var(--accent-glow) !important;
    font-size: 0.9375rem !important;
    line-height: 1.75 !important;
    word-break: keep-all !important;
}
/* 경고 callout — var(--accent-warm) 실제 사용 */
.post-content [class*="warning"],
.post-content [class*="caution"],
.post-content [class*="note"], [class*="callout-note"] {
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
    border-left: 4px solid #60A5FA !important;
    background: rgba(96, 165, 250, 0.09) !important;
    color: var(--text-main) !important;
    font-size: 0.9375rem !important;
}
[class*="info"], [class*="callout-info"] {
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
    border-left: 4px solid #34D399 !important;
    background: rgba(52, 211, 153, 0.09) !important;
    color: var(--text-main) !important;
    font-size: 0.9375rem !important;
}
[class*="success"], [class*="callout-success"] {
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
    border-left: 4px solid #4ADE80 !important;
    background: rgba(74, 222, 128, 0.09) !important;
    color: var(--text-main) !important;
    font-size: 0.9375rem !important;
}
[data-theme='light'] [class*="note"]    { background: rgba(37, 99, 235, 0.07) !important; border-left-color: var(--accent) !important; }
[data-theme='light'] [class*="info"]    { background: rgba(5, 150, 105, 0.07) !important; border-left-color: #059669 !important; }
[data-theme='light'] [class*="success"] { background: rgba(22, 163, 74, 0.07) !important; border-left-color: #16A34A !important; }
[class*="danger"] {
    border-radius: var(--radius-md) !important;
    padding: 16px 20px !important;
    margin: 28px 0 !important;
    border-left: 4px solid var(--accent-warm) !important;
    background: rgba(251, 146, 60, 0.09) !important;
    font-size: 0.9375rem !important;
    line-height: 1.75 !important;
    word-break: keep-all !important;
}
[data-theme='light'] .post-content [class*="warning"],
[data-theme='light'] .post-content [class*="caution"],
[data-theme='light'] .post-content [class*="danger"] {
    border-left-color: var(--accent-warm) !important;
    background: rgba(234, 88, 12, 0.07) !important;
}
/* Tistory 에디터 색상 강조 박스 */
.post-content div[style*="background"][style*="#f"] {
    border-radius: var(--radius-sm) !important;
    padding: 14px 18px !important;
}

/* ── 라이트 모드 본문 타이포 개선 ── */
[data-theme='light'] .post-content h2,
[data-theme='light'] .post-content h2.heading-anchor-wrap {
    border-bottom-color: #C5C3BC;
}
[data-theme='light'] .post-content h3,
[data-theme='light'] .post-content h3.heading-anchor-wrap {
    border-left-color: var(--accent);
}


/* 라이트 카테고리 글수 뱃지 */
[data-theme='light'] .category-widget .tt_category .c_cnt {
    background: rgba(0,0,0,0.06) !important;
    color: var(--accent) !important;
    border-color: #D1CDC8 !important;
}
[data-theme='light'] .category-widget .tt_category a:hover .c_cnt {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}


/* 라이트 모드 추가 */
[data-theme='light'] .comment-desc { color: #1C1C1E !important; }
[data-theme='light'] .comment-date { color: #6C6C72 !important; }

[data-theme='light'] .ecf-textarea,
[data-theme='light'] .ecf-input { background: #FAF9F7 !important; color: #1C1C1E !important; border-color: #D1CDC8 !important; }

[data-theme='light'] .mod-link, [data-theme='light'] a.mod-link,
[data-theme='light'] .comment-utils a {
    color: #48484A !important; background: rgba(0,0,0,0.04) !important;
    border-color: #D1CDC8 !important;
}
[data-theme='light'] .mod-link:hover, [data-theme='light'] a.mod-link:hover {
    color: var(--accent) !important; background: rgba(37,99,235,0.07) !important;
    border-color: var(--accent) !important;
}

/* 라이트 모드 h3 배경 */
[data-theme='light'] .post-content h3 {
    background: linear-gradient(90deg, rgba(37, 99, 235, 0.09) 0%, transparent 75%);
    border-left-color: var(--accent);   /* 라이트 accent 사용 */
}

/* 라이트 모드 kbd */
[data-theme='light'] .post-content kbd {
    background: #F0EFEB;
    border-color: #C5C3BC;
    border-bottom-color: #A8A5A0;
    color: #1C1C1E;
}

/* 라이트 h2 액센트선 */
[data-theme='light'] .post-content h2.heading-anchor-wrap::after {
    background: var(--accent-line);
    opacity: 0.9;
}

/* 라이트 back-to-top */
[data-theme='light'] #back-to-top {
    background: var(--accent);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}
[data-theme='light'] #back-to-top:hover {
    background: var(--accent-2);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.45);
}

/* 라이트 reading-progress */
[data-theme='light'] #reading-progress {
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-3) 100%);
    opacity: 0.85;
}

/* 라이트 post-card */
[data-theme='light'] .post-card {
    background: var(--bg-card);
    border-color: var(--border);
}


[data-theme='light'] .post-content h5,
[data-theme='light'] .post-content h6 {   /* 가독성 개선: dim→main */
    color: var(--text-strong);
}

[data-theme='light'] .post-content hr {
    background: linear-gradient(90deg, transparent, #C5C3BC 20%, #C5C3BC 80%, transparent);
}

/* 라이트 abbr */
[data-theme='light'] .post-content abbr[title] {
    border-bottom-color: var(--accent);
}

/* 라이트 details */
[data-theme='light'] .post-content details {
    background: var(--bg-card);
    border-color: var(--border-2);
}

/* 라이트 figcaption */
[data-theme='light'] .post-content figcaption {
    color: #6C6C72;
}

/* 라이트 table caption */
[data-theme='light'] .post-content table caption {
    color: var(--accent);
}

@page { margin: 2cm; }


/* ── Tistory 댓글 작성자 블로그 프로필 카드 — 모든 패턴 차단 ── */
/* 흰 배경 카드: "블로그이름 / 블로그설명" 형태 */
.comments-area [class*="profile"],
.comments-area [class*="author-info"],
.comments-area [class*="commenter"],
.comments-area [class*="reply_author"],
.comments-area [class*="blog-card"],
.comments-area [class*="user-card"],
[class*="rp_author"],
[class*="reply_author"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important; max-height: 0 !important;
    overflow: hidden !important; opacity: 0 !important;
    margin: 0 !important; padding: 0 !important;
    pointer-events: none !important;
}
/* Tistory 댓글 영역 내 흰색/회색 카드 인라인 스타일 완전 재정의 */
.comments-area [style*="background: white"]:not(.ecf-wrap),
.comments-area [style*="background: #fff"]:not(.ecf-wrap),
.comments-area [style*="background:#fff"]:not(.ecf-wrap),
.comments-area [style*="background-color: white"]:not(.ecf-wrap),
.comments-area [style*="background-color: #fff"]:not(.ecf-wrap),
.comments-area [style*="background-color: rgb(255"]:not(.ecf-wrap) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* border-radius 인라인 스타일 초기화 — Tistory 동적 폼 파괴 위험으로 제거 */
/* ── 빈 폼 제출 시 에러 상태 ── */
.ecf-textarea.input-error,
.rp_input_form textarea.input-error,
.tt_reply_input_form textarea.input-error {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none;
    animation: errorShake 0.35s var(--ease);
}
@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-4px); }
    60%       { transform: translateX(4px); }
    80%       { transform: translateX(-2px); }
}