/* 코드 블록 기본 스타일 */
pre {
    position: relative !important;
    background: #f5f5f5 !important;
    border: 1px solid #e1e1e1 !important;
    border-radius: 8px !important;
    margin: 1.5em 0 !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

pre code {
    display: block !important;
    padding: 1rem !important;
    overflow-x: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #333 !important;
}

/* 라이트 모드 스타일 */
html:not([data-theme="dark"]) pre {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
}

html:not([data-theme="dark"]) pre code {
    color: #333 !important;
}

/* 다크 모드 스타일 */
html[data-theme="dark"] pre,
[data-theme="dark"] pre {
    background: #1e1e1e !important;
    border-color: #404040 !important;
}

html[data-theme="dark"] pre code,
[data-theme="dark"] pre code {
    color: #d4d4d4 !important;
}

/* 복사 버튼 스타일 */
.code-copy-btn {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(0,0,0,0.7) !important;
    color: white !important;
    border: none !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 10 !important;
    font-family: inherit !important;
}

pre:hover .code-copy-btn {
    opacity: 1 !important;
}

.code-copy-btn:hover {
    background: rgba(0,0,0,0.9) !important;
}

.code-copy-btn.copied {
    background: #28a745 !important;
}

html[data-theme="dark"] .code-copy-btn,
[data-theme="dark"] .code-copy-btn {
    background: rgba(255,255,255,0.2) !important;
}

html[data-theme="dark"] .code-copy-btn:hover,
[data-theme="dark"] .code-copy-btn:hover {
    background: rgba(255,255,255,0.3) !important;
}

/* Prism.js 토큰 색상 - 라이트 모드 */
html:not([data-theme="dark"]) .token.comment,
html:not([data-theme="dark"]) .token.prolog,
html:not([data-theme="dark"]) .token.doctype,
html:not([data-theme="dark"]) .token.cdata {
    color: #6a737d !important;
}

html:not([data-theme="dark"]) .token.punctuation {
    color: #6f42c1 !important;
}

html:not([data-theme="dark"]) .token.property,
html:not([data-theme="dark"]) .token.tag,
html:not([data-theme="dark"]) .token.constant,
html:not([data-theme="dark"]) .token.symbol,
html:not([data-theme="dark"]) .token.deleted {
    color: #d73a49 !important;
}

html:not([data-theme="dark"]) .token.boolean,
html:not([data-theme="dark"]) .token.number {
    color: #005cc5 !important;
}

html:not([data-theme="dark"]) .token.selector,
html:not([data-theme="dark"]) .token.attr-name,
html:not([data-theme="dark"]) .token.string,
html:not([data-theme="dark"]) .token.char,
html:not([data-theme="dark"]) .token.builtin,
html:not([data-theme="dark"]) .token.inserted {
    color: #032f62 !important;
}

html:not([data-theme="dark"]) .token.operator,
html:not([data-theme="dark"]) .token.entity,
html:not([data-theme="dark"]) .token.url {
    color: #6f42c1 !important;
}

html:not([data-theme="dark"]) .token.atrule,
html:not([data-theme="dark"]) .token.attr-value,
html:not([data-theme="dark"]) .token.keyword {
    color: #d73a49 !important;
}

html:not([data-theme="dark"]) .token.function,
html:not([data-theme="dark"]) .token.class-name {
    color: #6f42c1 !important;
}

/* Prism.js 토큰 색상 - 다크 모드 */
html[data-theme="dark"] .token.comment,
html[data-theme="dark"] .token.prolog,
html[data-theme="dark"] .token.doctype,
html[data-theme="dark"] .token.cdata,
[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata {
    color: #6a9955 !important;
}

html[data-theme="dark"] .token.punctuation,
[data-theme="dark"] .token.punctuation {
    color: #d4d4d4 !important;
}

html[data-theme="dark"] .token.property,
html[data-theme="dark"] .token.tag,
html[data-theme="dark"] .token.constant,
html[data-theme="dark"] .token.symbol,
html[data-theme="dark"] .token.deleted,
[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted {
    color: #f92672 !important;
}

html[data-theme="dark"] .token.boolean,
html[data-theme="dark"] .token.number,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number {
    color: #ae81ff !important;
}

html[data-theme="dark"] .token.selector,
html[data-theme="dark"] .token.attr-name,
html[data-theme="dark"] .token.string,
html[data-theme="dark"] .token.char,
html[data-theme="dark"] .token.builtin,
html[data-theme="dark"] .token.inserted,
[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted {
    color: #a6e22e !important;
}

html[data-theme="dark"] .token.operator,
html[data-theme="dark"] .token.entity,
html[data-theme="dark"] .token.url,
[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url {
    color: #f8f8f2 !important;
}

html[data-theme="dark"] .token.atrule,
html[data-theme="dark"] .token.attr-value,
html[data-theme="dark"] .token.keyword,
[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword {
    color: #66d9ef !important;
}

html[data-theme="dark"] .token.function,
html[data-theme="dark"] .token.class-name,
[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name {
    color: #fd971f !important;
}

/* 스크롤바 스타일 */
pre code::-webkit-scrollbar {
    height: 8px !important;
}

pre code::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1) !important;
    border-radius: 4px !important;
}

pre code::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3) !important;
    border-radius: 4px !important;
}

html[data-theme="dark"] pre code::-webkit-scrollbar-track,
[data-theme="dark"] pre code::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1) !important;
}

html[data-theme="dark"] pre code::-webkit-scrollbar-thumb,
[data-theme="dark"] pre code::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.3) !important;
}
code[class*=language-], pre[class*=language-]{
    text-shadow: none !important;
}
  
  /*이미지 설정*/
.post-body.entry-content img{
    width :100%;
}

/*다크모드 에러*/
.language-css .token.string, .style .token.string, .token.entity, .token.operator, .token.url{
	background: none !important;
}
/* 모바일 반응형 */
@media (max-width: 768px) {
    pre {
        font-size: 12px !important;
        margin: 1em 0 !important;
    }
    
    pre code {
        padding: 0.75rem !important;
    }
    
    .code-copy-btn {
        top: 4px !important;
        right: 4px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }
}