:root {
    --white: #f8fafc;
    --black: #121212;
    --background: #fff;
    --foreground: var(--black);
    --secondary: #f1f5f9;
    --secondary-foreground: #0f172a;
    --informative: #e0f2fe;
    --informative-foreground: var(--black);
    --warning: #fef3c7;
    --warning-foreground: var(--black);
    --destructive: #fecdd3;
    --destructive-foreground: var(--black);
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
}

.dark {
    --background: var(--black);
    --foreground: var(--white);
    --secondary: #1e293b;
    --secondary-foreground: var(--white);
    --informative: #075985;
    --informative-foreground: var(--white);
    --warning: #ca8a04;
    --warning-foreground: var(--white);
    --destructive: #7f1d1d;
    --destructive-foreground: var(--white);
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
}

/* 기본 폰트 및 배경 적용 */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Pretendard', 'Pretendard Fallback', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}

/* 스크롤 오프셋 (헤더 높이 + 여유 공간) */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
    /* 헤더 높이(약 64px) + 여유 */
}

.admin-bar html {
    scroll-padding-top: 132px;
    /* 헤더 + 어드민바(32px) */
}

/* 폼 요소 기본 스타일 */
input,
textarea,
select,
button {
    outline: none !important;
    font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none !important;
    /* Tailwind ring 제거 강제 */
}

/* 버튼 커서 포인터 강제 */
button,
[type='button'],
[type='reset'],
[type='submit'],
.button,
.btn {
    cursor: pointer !important;
}

input,
textarea {
    font-size: 16px;
}

/* 코드 블록 초기 로딩 시 레이아웃 깨짐 방지 및 페이드인 */
pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
}

/* 메뉴 아이콘 색상 변수 처리 (다크모드 대응) */
.menu-item-link {
    --icon-stroke: var(--icon-stroke-light, currentColor);
    --icon-fill: var(--icon-fill-light, currentColor);
}

.dark .menu-item-link {
    --icon-stroke: var(--icon-stroke-dark, var(--icon-stroke-light, currentColor));
    --icon-fill: var(--icon-fill-dark, var(--icon-fill-light, currentColor));
}

pre code {
    opacity: 0;
    transition: opacity 0.4s ease;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
    font-size: 0.875em !important;
    line-height: 1.7 !important;
    min-height: 1.5em;
    display: block;
}

pre code.boxkun-code-visible {
    opacity: 1;
}

button:not(:disabled) {
    cursor: pointer;
}

/* WP Admin Bar 대응 */
.admin-bar header.sticky {
    top: var(--wp-admin--admin-bar--height, 32px);
}

.admin-bar .lg\:top-24 {
    top: calc(6rem + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {
    .admin-bar header.sticky {
        top: var(--wp-admin--admin-bar--height, 46px);
    }

    .admin-bar .lg\:top-24 {
        top: calc(6rem + var(--wp-admin--admin-bar--height, 46px));
    }
}

/* 본문 타이포그래피 */
.prose {
    color: #1f2937;
    line-height: 1.75;
    font-size: 16px;
}


.prose p {
    margin-top: 0;
    margin-bottom: 1.25em;
}


.prose h1 {
    font-size: 1.75em;
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: 1.1;
}

.prose h2 {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 2.25em;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.prose h3 {
    font-size: 1.25em;
    font-weight: 600;
    margin-top: 1.65em;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose h4 {
    font-size: 1.125em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose h5 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose h6 {
    font-size: 0.875em;
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #000;
    margin-top: 2.5em!important;
}

.prose a {
    color: #38bdf8;
    text-decoration: underline;
    font-weight: 500;
}

.prose a:hover {
    color: #0ea5e9;
}

.prose .boxkun-download-wrapper a.boxkun-download-btn {
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 400 !important;
}

.prose .boxkun-download-wrapper a.boxkun-download-btn:hover {
    color: #000 !important;
    text-decoration: none !important;
}

.dark .prose .boxkun-download-wrapper a.boxkun-download-btn,
.dark .prose .boxkun-download-wrapper a.boxkun-download-btn:hover {
    color: #fff !important;
    text-decoration: none !important;
    background: #3e3d3d;
}

.prose strong {
    font-weight: 600;
}

.prose blockquote {
    font-style: italic;
    border-left: 4px solid #e5e7eb;
    padding-left: 1em;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    color: #6b7280;
}

.prose ul {
    list-style-type: disc;
    padding-left: 1.625em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose ol {
    list-style-type: decimal;
    padding-left: 1.625em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose code {
    font-size: 0.875em;
    font-weight: 600;
    background-color: #f3f4f6;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

.prose pre {
    background-color: #1f2937;
    color: #e5e7eb;
    overflow-x: auto;
    max-width: 100%;
    font-size: 0.875em;
    line-height: 1.7;
    margin-top: 1.7em;
    margin-bottom: 1.7em;
    border-radius: 0.375rem;
    padding: 0.85em 1.15em;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
}

.prose img {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.5rem;
}

.prose figure {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose figcaption {
    font-size: 0.875em;
    color: #6b7280;
    margin-top: 0.85em;
    text-align: center;
}

.wp-block-boxkun-image img {
    margin: 0 !important;
}

.wp-block-boxkun-image figcaption {
    margin-top: 0.5em !important;
}

/* p태그 다음에 오는 박스쿤 이미지 블록 margin-top 제거 */
.prose p + .wp-block-boxkun-image {
    margin-top: 0 !important;
}

.prose p + .wp-block-boxkun-image img {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* iOS 더블탭 줌 방지 및 터치 반응 속도 개선 */
html {
    touch-action: manipulation;
}

/* 갤러리 블록 마진 */
.wp-block-boxkun-gallery {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* 라이트박스 아이템 호버 효과 및 아이콘 */
.boxkun-lightbox-item {
    position: relative; /* 아이콘 위치 기준 */
    transition: all 0.65s ease-out;
}

.boxkun-lightbox-item img,
img.transition-transform {
    transition: all 0.65s ease-out !important;
}

.boxkun-lightbox-item:hover {
    opacity: 0.95; /* 오파시티 조정 */
}

/* 줌인 아이콘 오버레이 */
.boxkun-lightbox-item::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' x2='16.65' y1='21' y2='16.65'/%3E%3Cline x1='11' x2='11' y1='8' y2='14'/%3E%3Cline x1='8' x2='14' y1='11' y2='11'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease-out;
    z-index: 10;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.boxkun-lightbox-item:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* iOS 더블탭 줌 방지 */
.touch-manipulation {
    touch-action: manipulation;
}

.prose hr {
    border-color: #e5e7eb;
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose table {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7;
    border-color: #e5e7eb !important;
}

.prose thead {
    border-bottom: 1px solid #e5e7eb !important;
}

.prose th {
    font-weight: 600;
    padding: 0.5em 0.75em;
}

.prose td {
    padding: 0.5em 0.75em;
    border-bottom: 1px solid #e5e7eb !important;
}

/* 다크모드 타이포그래피 */
.dark .prose {
    color: #d1d5db;
}

.dark .prose a {
    color: #9ca3af;
}

.dark .prose a:hover {
    color: #e5e7eb;
}

.dark .prose blockquote {
    border-left-color: #4b5563;
    color: #9ca3af;
}

.dark .prose code {
    background-color: #374151;
}

.dark .prose hr {
    border-color: #282828;
}

.dark .prose thead {
    border-bottom-color: #282828 !important;
}

.dark .prose td {
    border-bottom-color: #282828 !important;
}

.dark .prose figcaption {
    color: #9ca3af;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose h5,
.dark .prose h6 {
    color: #fff;
}

/* 하이라이트 프리셋 (프론트엔드) */
.boxkun-highlight-yellow {
    background-color: #fef08a;
    color: #854d0e;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

.boxkun-highlight-green {
    background-color: #bbf7d0;
    color: #166534;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

.boxkun-highlight-blue {
    background-color: #bfdbfe;
    color: #1e40af;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

.boxkun-highlight-pink {
    background-color: #fbcfe8;
    color: #9d174d;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

.boxkun-highlight-purple {
    background-color: #e9d5ff;
    color: #6b21a8;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

.boxkun-highlight-orange {
    background-color: #fed7aa;
    color: #9a3412;
    padding: 0.125em 0.25em;
    border-radius: 0.125rem;
}

/* 빈 위젯 숨기기 */
.widget:empty,
.widget_block:empty {
    display: none !important;
}

/* 커스텀 스크롤바 디자인 */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    /* gray-300 */
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
    /* gray-400 */
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* 다크모드 스크롤바 */
.dark ::-webkit-scrollbar-thumb {
    background-color: #475569;
    /* gray-600 */
}

.dark ::-webkit-scrollbar-thumb:hover {
    background-color: #64748b;
    /* gray-500 */
}

/* Firefox 지원 (scrollbar-color: thumb track) */
html {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.dark html {
    scrollbar-color: #475569 transparent;
}

/* 검색 입력 필드 X 버튼 숨기기 */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

input[type="search"]::-ms-clear,
input[type="search"]::-ms-reveal {
    display: none;
    width: 0;
    height: 0;
}

/* Custom Gap */
.gap-18 {
    gap: 4.5rem;
}

@media (max-width: 1024px) {
    .gap-18 {
        gap: 2rem;
    }
}

/* Table Row Hover Effect */
.boxkun-table-row:hover,
.prose table tr:hover,
tr:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-hover-text) !important;
}

/* Table Row Hover Effect Dark Mode */
.dark .boxkun-table-row:hover,
.dark .prose table tr:hover,
.dark tr:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-hover-text) !important;
}

/* Theme Color Utilities */
.bg-background { background-color: var(--background); }
.bg-foreground { background-color: var(--foreground); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-primary { 
    background-color: var(--color-primary); 
    color: var(--primary-text);
} /* 테마 옵션값 사용 (Hex) */
.bg-secondary { background-color: var(--secondary); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }

.text-background { color: var(--background); }
.text-foreground { color: var(--foreground); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }

.border-border { border-color: #e5e7eb !important; }
.dark .border-border { border-color: #282828 !important; }
.border-input { border-color: #e5e7eb !important; }
.border-primary { border-color: var(--color-primary) !important; }
.border-muted { border-color: #e5e7eb !important; }
.dark .border-muted { border-color: #282828 !important; }

/* 모든 Tailwind bg-gray를 테마 배경으로 통일 */
.bg-white,
.bg-gray-50,
.bg-gray-100 {
    background-color: var(--background) !important;
}
.dark .bg-gray-800,
.dark .bg-gray-900,
.dark\:bg-gray-800,
.dark\:bg-gray-900,
.dark .dark\:even\:bg-gray-800:nth-child(even),
.dark .even\:bg-gray-800:nth-child(even) {
    background-color: var(--background) !important;
}

/* 모든 Tailwind border 색상 통일 (라이트) */
html body .border-gray-100,
html body .border-gray-200,
html body .border-gray-300,
html body .border-gray-400,
html body .border-gray-500,
html body .border-gray-600,
html body .border-gray-700,
html body .border-gray-800,
html body [class*="border-gray-"]:not([class*="dark:"]) {
    border-color: #e5e7eb !important;
}

/* 다크모드 border */
html.dark body .border-gray-100,
html.dark body .border-gray-200,
html.dark body .border-gray-300,
html.dark body .border-gray-400,
html.dark body .border-gray-500,
html.dark body .border-gray-600,
html.dark body .border-gray-700,
html.dark body .border-gray-800,
html.dark body [class*="border-gray-"],
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-gray-400,
.dark .border-gray-500,
.dark .border-gray-600,
.dark .border-gray-700,
.dark .border-gray-800 {
    border-color: #282828 !important;
}

/* divide 색상 통일 */
.divide-y > * {
    border-color: #e5e7eb !important;
}
.dark .divide-y > * {
    border-color: #282828 !important;
}

/* 글목록 첫 번째 아이템 border-top, 마지막 아이템 border-bottom 적용 */
.divide-y > :first-child {
    border-top: 1px solid #e5e7eb !important;
}
.divide-y > :last-child {
    border-bottom: 1px solid #e5e7eb !important;
}
.dark .divide-y > :first-child {
    border-top-color: #282828 !important;
}
.dark .divide-y > :last-child {
    border-bottom-color: #282828 !important;
}

/* Primary Color Overrides */
.text-primary { color: var(--color-primary) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:bg-primary:hover { 
    background-color: var(--primary-hover) !important; 
    color: var(--primary-hover-text) !important;
}
.focus\:ring-primary:focus { --tw-ring-color: var(--color-primary) !important; }

/* 사이드바 위젯 스타일 (외부 컨테이너만) */
aside > div > div > .widget_block {
    border: 1px solid #e5e7eb !important;
    border-radius: 30px !important;
    padding: 25px !important;
}
.dark aside > div > div > .widget_block {
    border-color: #282828 !important;
}

/* 내부 .widget은 스타일 제거 */
aside .widget_block > .widget {
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 사이드바 위젯 링크 색상 */
.dark aside .widget_block a {
    color: #d1d5db !important;
}

/* 사이드바 위젯 링크 hover 시 프라이머리 배경 */
aside .widget_block a:hover {
    background-color: var(--primary-hover) !important;
    color: var(--primary-hover-text) !important;
}

/* 목차 스타일 통일 */
.boxkun-toc {
    background-color: var(--background) !important;
    border-color: #e5e7eb !important;
}
.dark .boxkun-toc {
    border-color: #282828 !important;
}

/* 목차 내부 border */
.boxkun-toc nav {
    border-color: #e5e7eb !important;
}
.dark .boxkun-toc nav {
    border-color: #282828 !important;
}

/* Drawer 위젯 간격 */
#drawer-menu .widget {
    margin-bottom: 3em;
}
#drawer-menu .widget:last-child {
    margin-bottom: 0;
}

/* 아코디언 컨테이너 마진 */
.accordion {
    margin-top: 1.5em !important;
    margin-bottom: 1.5em !important;
}

/* 아코디언 h2 스타일 리셋 */
.accordion .accordion-item h2 {
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* kbd 키보드 스타일 */
kbd {
    display: inline-block;
    padding: 0.15em 0.4em;
    font-size: 0.875em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-weight: 500;
    line-height: 1.25;
    color: #1f2937;
    background-color: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    vertical-align: baseline;
}

.dark kbd {
    color: #f3f4f6;
    background-color: #374151;
    border-color: #4b5563;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

/* ===== 채팅버블 블록 ===== */
.boxkun-chat-bubble {
    background-color: #f3f4f6;
}

.dark .boxkun-chat-bubble {
    background-color: #111827;
}

/* 왼쪽 버블 (상대방) */
.boxkun-chat-bubble .bubble-left {
    background-color: #e5e7eb;
    color: #1f2937;
}

.dark .boxkun-chat-bubble .bubble-left {
    background-color: #1f2937;
    color: #f9fafb;
}

/* 오른쪽 버블 (나) */
.boxkun-chat-bubble .bubble-right {
    background-color: #3b82f6;
    color: #ffffff;
}

/* ===== 카운트다운 블록 ===== */
.boxkun-countdown {
    background-color: #e5e7eb;
}

.dark .boxkun-countdown {
    background-color: #111827;
}

.boxkun-countdown .countdown-item {
    background-color: #ffffff;
}

.dark .boxkun-countdown .countdown-item {
    background-color: #1f2937;
}

/* 스크롤바 숨기기 (가로 스크롤 시 유용) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}