: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;

    /* Tailwind gray ??zinc ?됱긽 ?ъ젙??*/
    --color-gray-50: #fafafa;
    --color-gray-100: #f4f4f5;
    --color-gray-200: #e4e4e7;
    --color-gray-300: #d4d4d8;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-600: #52525b;
    --color-gray-700: #3f3f46;
    --color-gray-800: #27272a;
    --color-gray-900: #18181b;
    --color-gray-950: #09090b;
}

/* Giphy 釉붾줉 ?꾨줎?몄뿏???ㅽ???*/
.boxkun-giphy-wrapper {
    position: relative;
    display: inline-block;
}

.boxkun-giphy-img {
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-width: 100%;
    height: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.boxkun-giphy-img:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.boxkun-giphy-caption {
    font-size: 0.875rem;
    color: #4b5563;
    margin-top: 0.5rem;
    line-height: 1.25rem;
    text-align: center;
}

.dark .boxkun-giphy-caption {
    color: #9ca3af;
}

.dark {
    --background: var(--black);
    --foreground: var(--white);
    --secondary: var(--color-gray-800);
    --secondary-foreground: var(--white);
    --informative: #075985;
    --informative-foreground: var(--white);
    --warning: #ca8a04;
    --warning-foreground: var(--white);
    --destructive: #7f1d1d;
    --destructive-foreground: var(--white);
    --card: var(--color-gray-900);
    --card-foreground: var(--color-gray-50);
    --popover: var(--color-gray-900);
    --popover-foreground: var(--color-gray-50);
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --muted: var(--color-gray-800);
    --muted-foreground: var(--color-gray-400);
    --accent: var(--color-gray-800);
    --accent-foreground: var(--color-gray-50);
    --border: var(--color-gray-800);
    --input: var(--color-gray-800);
    --ring: var(--color-gray-300);
    --color-primary: var(--color-sky-500);
    --primary-text: #ffffff;
    --primary-hover: #292929;
    --primary-hover-text: #ffffff;
}

/* 湲곕낯 ?고듃 諛?諛곌꼍 ?곸슜 */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'SUIT', 'SUIT 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) + ?ъ쑀 */
}

/* 紐⑤컮??媛€濡??ㅽ겕濡?諛⑹? */
html,
body {
    overflow-x: clip;
    /* hidden蹂대떎 ?섏쓬 - position:sticky ?깆뿉 ?곹뼢 ?놁쓬 */
}

.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;
}

/* ?꾨씪?대㉧由?踰꾪듉 ?ㅽ???- Neutral ?됱긽 */
.boxkun-btn,
.bg-primary {
    background-color: #171717 !important;
    /* neutral-900 */
    color: #ffffff !important;
}

.boxkun-btn:hover,
.bg-primary:hover,
.hover\:bg-primary-hover:hover {
    background-color: #262626 !important;
    /* neutral-800 */
}

.dark .boxkun-btn,
.dark .bg-primary {
    background-color: #525252 !important;
    /* neutral-600 */
    color: #ffffff !important;
}

.dark .boxkun-btn:hover,
.dark .bg-primary:hover,
.dark .hover\:bg-primary-hover:hover {
    background-color: #404040 !important;
    /* neutral-700 */
}

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));
    }
}

/* ?ㅻ뜑 釉붾윭 諛?遺덊닾紐??④낵 */
.boxkun-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ?ㅽ겕紐⑤뱶 ?ㅻ뜑 */
.dark .boxkun-header {
    background-color: rgba(18, 18, 18, 0.85);
}

/* ?쒕∼?ㅼ슫 硫붾돱 蹂대뜑 異붽? (媛€?쒖꽦 ?μ긽) */
.boxkun-header .menu-item-has-children>.sub-menu,
.boxkun-header #profile-dropdown-menu,
#profile-dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

.dark .boxkun-header .menu-item-has-children>.sub-menu,
.dark .boxkun-header #profile-dropdown-menu,
.dark #profile-dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 蹂몃Ц ?€?댄룷洹몃옒??*/
.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: opacity 0.25s ease-out;
}

.boxkun-lightbox-item:hover {
    opacity: 0.95;
    /* ?ㅽ뙆?쒗떚 議곗젙 */
}

/* ?쇱씠?몃컯???대? ?대?吏€ - ?쒕옒洹?利됯컖 諛섏쓳 */
.boxkun-lb-image,
#boxkun-lightbox img,
.boxkun-lb-image-wrapper img {
    transition: none !important;
    -webkit-transition: none !important;
}

/* 以뚯씤 ?꾩씠肄??ㅻ쾭?덉씠 */
.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: 1.5rem;
}

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

/* ???뱀뀡 ?ㅽ???*/
.boxkun-home-section {
    padding: 0 !important;
    border-radius: 1.5rem;
}

/* 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: #fff;
}

.dark .bg-card {
    background-color: var(--color-gray-900);
}

.bg-popover {
    background-color: #fff;
}

.dark .bg-popover {
    background-color: var(--color-gray-900);
}

.bg-secondary {
    background-color: var(--secondary);
}

.bg-muted {
    background-color: var(--color-gray-100);
}

.dark .bg-muted {
    background-color: var(--color-gray-800);
}

.bg-accent {
    background-color: var(--color-gray-100);
}

.dark .bg-accent {
    background-color: var(--color-gray-800);
}

.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;
}

/* ?쒕∼?ㅼ슫 硫붾돱???덉쇅 - ????蹂댁씠?꾨줉 */
.dark .boxkun-header .menu-item-has-children>.sub-menu,
.dark .boxkun-header #profile-dropdown-menu,
.dark #profile-dropdown-menu {
    border-color: rgba(255, 255, 255, 0.3) !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 transparent;
    border-radius: 1.5rem !important;
    padding: 1.5rem !important;
    background-color: #fff !important;
}

.dark aside>div>div>.widget_block {
    background-color: var(--color-gray-950) !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 - ?댁젣 custom.css ?섎떒?먯꽌 泥섎━ */

/* 紐⑹감 ?ㅽ????듭씪 */
.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;
}

/* ===== Tailwind gray ??zinc ?됱긽 ?ㅻ쾭?쇱씠??===== */
/* Background Colors */
.bg-gray-50 {
    background-color: var(--color-gray-50) !important;
}

.bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

.bg-gray-200 {
    background-color: var(--color-gray-200) !important;
}

.bg-gray-300 {
    background-color: var(--color-gray-300) !important;
}

.bg-gray-400 {
    background-color: var(--color-gray-400) !important;
}

.bg-gray-500 {
    background-color: var(--color-gray-500) !important;
}

.bg-gray-600 {
    background-color: var(--color-gray-600) !important;
}

.bg-gray-700 {
    background-color: var(--color-gray-700) !important;
}

.bg-gray-800 {
    background-color: var(--color-gray-800) !important;
}

.bg-gray-900 {
    background-color: var(--color-gray-900) !important;
}

.bg-gray-950 {
    background-color: var(--color-gray-950) !important;
}

/* Text Colors */
.text-gray-50 {
    color: var(--color-gray-50) !important;
}

.text-gray-100 {
    color: var(--color-gray-100) !important;
}

.text-gray-200 {
    color: var(--color-gray-200) !important;
}

.text-gray-300 {
    color: var(--color-gray-300) !important;
}

.text-gray-400 {
    color: var(--color-gray-400) !important;
}

.text-gray-500 {
    color: var(--color-gray-500) !important;
}

.text-gray-600 {
    color: var(--color-gray-600) !important;
}

.text-gray-700 {
    color: var(--color-gray-700) !important;
}

.text-gray-800 {
    color: var(--color-gray-800) !important;
}

.text-gray-900 {
    color: var(--color-gray-900) !important;
}

.text-gray-950 {
    color: var(--color-gray-950) !important;
}

/* Border Colors */
.border-gray-50 {
    border-color: var(--color-gray-50) !important;
}

.border-gray-100 {
    border-color: var(--color-gray-100) !important;
}

.border-gray-200 {
    border-color: var(--color-gray-200) !important;
}

.border-gray-300 {
    border-color: var(--color-gray-300) !important;
}

.border-gray-400 {
    border-color: var(--color-gray-400) !important;
}

.border-gray-500 {
    border-color: var(--color-gray-500) !important;
}

.border-gray-600 {
    border-color: var(--color-gray-600) !important;
}

.border-gray-700 {
    border-color: var(--color-gray-700) !important;
}

.border-gray-800 {
    border-color: var(--color-gray-800) !important;
}

.border-gray-900 {
    border-color: var(--color-gray-900) !important;
}

.border-gray-950 {
    border-color: var(--color-gray-950) !important;
}

/* Ring Colors */
.ring-gray-50 {
    --tw-ring-color: var(--color-gray-50) !important;
}

.ring-gray-100 {
    --tw-ring-color: var(--color-gray-100) !important;
}

.ring-gray-200 {
    --tw-ring-color: var(--color-gray-200) !important;
}

.ring-gray-300 {
    --tw-ring-color: var(--color-gray-300) !important;
}

.ring-gray-400 {
    --tw-ring-color: var(--color-gray-400) !important;
}

.ring-gray-500 {
    --tw-ring-color: var(--color-gray-500) !important;
}

.ring-gray-600 {
    --tw-ring-color: var(--color-gray-600) !important;
}

.ring-gray-700 {
    --tw-ring-color: var(--color-gray-700) !important;
}

.ring-gray-800 {
    --tw-ring-color: var(--color-gray-800) !important;
}

.ring-gray-900 {
    --tw-ring-color: var(--color-gray-900) !important;
}

.ring-gray-950 {
    --tw-ring-color: var(--color-gray-950) !important;
}

/* Divide Colors */
.divide-gray-50>*+* {
    border-color: var(--color-gray-50) !important;
}

.divide-gray-100>*+* {
    border-color: var(--color-gray-100) !important;
}

.divide-gray-200>*+* {
    border-color: var(--color-gray-200) !important;
}

.divide-gray-300>*+* {
    border-color: var(--color-gray-300) !important;
}

.divide-gray-400>*+* {
    border-color: var(--color-gray-400) !important;
}

.divide-gray-500>*+* {
    border-color: var(--color-gray-500) !important;
}

.divide-gray-600>*+* {
    border-color: var(--color-gray-600) !important;
}

.divide-gray-700>*+* {
    border-color: var(--color-gray-700) !important;
}

.divide-gray-800>*+* {
    border-color: var(--color-gray-800) !important;
}

.divide-gray-900>*+* {
    border-color: var(--color-gray-900) !important;
}

.divide-gray-950>*+* {
    border-color: var(--color-gray-950) !important;
}

/* Placeholder Colors */
.placeholder-gray-50::placeholder {
    color: var(--color-gray-50) !important;
}

.placeholder-gray-100::placeholder {
    color: var(--color-gray-100) !important;
}

.placeholder-gray-200::placeholder {
    color: var(--color-gray-200) !important;
}

.placeholder-gray-300::placeholder {
    color: var(--color-gray-300) !important;
}

.placeholder-gray-400::placeholder {
    color: var(--color-gray-400) !important;
}

.placeholder-gray-500::placeholder {
    color: var(--color-gray-500) !important;
}

.placeholder-gray-600::placeholder {
    color: var(--color-gray-600) !important;
}

.placeholder-gray-700::placeholder {
    color: var(--color-gray-700) !important;
}

.placeholder-gray-800::placeholder {
    color: var(--color-gray-800) !important;
}

.placeholder-gray-900::placeholder {
    color: var(--color-gray-900) !important;
}

.placeholder-gray-950::placeholder {
    color: var(--color-gray-950) !important;
}

/* Dark Mode Variants */
.dark .dark\:bg-gray-50 {
    background-color: var(--color-gray-50) !important;
}

.dark .dark\:bg-gray-100 {
    background-color: var(--color-gray-100) !important;
}

.dark .dark\:bg-gray-200 {
    background-color: var(--color-gray-200) !important;
}

.dark .dark\:bg-gray-300 {
    background-color: var(--color-gray-300) !important;
}

.dark .dark\:bg-gray-400 {
    background-color: var(--color-gray-400) !important;
}

.dark .dark\:bg-gray-500 {
    background-color: var(--color-gray-500) !important;
}

.dark .dark\:bg-gray-600 {
    background-color: var(--color-gray-600) !important;
}

.dark .dark\:bg-gray-700 {
    background-color: var(--color-gray-700) !important;
}

.dark .dark\:bg-gray-800 {
    background-color: var(--color-gray-800) !important;
}

.dark .dark\:bg-gray-900 {
    background-color: var(--color-gray-900) !important;
}

.dark .dark\:bg-gray-950 {
    background-color: var(--color-gray-950) !important;
}

.dark .dark\:text-gray-50 {
    color: var(--color-gray-50) !important;
}

.dark .dark\:text-gray-100 {
    color: var(--color-gray-100) !important;
}

.dark .dark\:text-gray-200 {
    color: var(--color-gray-200) !important;
}

.dark .dark\:text-gray-300 {
    color: var(--color-gray-300) !important;
}

.dark .dark\:text-gray-400 {
    color: var(--color-gray-400) !important;
}

.dark .dark\:text-gray-500 {
    color: var(--color-gray-500) !important;
}

.dark .dark\:text-gray-600 {
    color: var(--color-gray-600) !important;
}

.dark .dark\:text-gray-700 {
    color: var(--color-gray-700) !important;
}

.dark .dark\:text-gray-800 {
    color: var(--color-gray-800) !important;
}

.dark .dark\:text-gray-900 {
    color: var(--color-gray-900) !important;
}

.dark .dark\:text-gray-950 {
    color: var(--color-gray-950) !important;
}

.dark .dark\:border-gray-50 {
    border-color: var(--color-gray-50) !important;
}

.dark .dark\:border-gray-100 {
    border-color: var(--color-gray-100) !important;
}

.dark .dark\:border-gray-200 {
    border-color: var(--color-gray-200) !important;
}

.dark .dark\:border-gray-300 {
    border-color: var(--color-gray-300) !important;
}

.dark .dark\:border-gray-400 {
    border-color: var(--color-gray-400) !important;
}

.dark .dark\:border-gray-500 {
    border-color: var(--color-gray-500) !important;
}

.dark .dark\:border-gray-600 {
    border-color: var(--color-gray-600) !important;
}

.dark .dark\:border-gray-700 {
    border-color: var(--color-gray-700) !important;
}

.dark .dark\:border-gray-800 {
    border-color: var(--color-gray-800) !important;
}

.dark .dark\:border-gray-900 {
    border-color: var(--color-gray-900) !important;
}

.dark .dark\:border-gray-950 {
    border-color: var(--color-gray-950) !important;
}

.dark .dark\:ring-gray-50 {
    --tw-ring-color: var(--color-gray-50) !important;
}

.dark .dark\:ring-gray-100 {
    --tw-ring-color: var(--color-gray-100) !important;
}

.dark .dark\:ring-gray-200 {
    --tw-ring-color: var(--color-gray-200) !important;
}

.dark .dark\:ring-gray-300 {
    --tw-ring-color: var(--color-gray-300) !important;
}

.dark .dark\:ring-gray-400 {
    --tw-ring-color: var(--color-gray-400) !important;
}

.dark .dark\:ring-gray-500 {
    --tw-ring-color: var(--color-gray-500) !important;
}

.dark .dark\:ring-gray-600 {
    --tw-ring-color: var(--color-gray-600) !important;
}

.dark .dark\:ring-gray-700 {
    --tw-ring-color: var(--color-gray-700) !important;
}

.dark .dark\:ring-gray-800 {
    --tw-ring-color: var(--color-gray-800) !important;
}

.dark .dark\:ring-gray-900 {
    --tw-ring-color: var(--color-gray-900) !important;
}

.dark .dark\:ring-gray-950 {
    --tw-ring-color: var(--color-gray-950) !important;
}

/* Hover Variants */
.hover\:bg-gray-50:hover {
    background-color: var(--color-gray-50) !important;
}

.hover\:bg-gray-100:hover {
    background-color: var(--color-gray-100) !important;
}

.hover\:bg-gray-200:hover {
    background-color: var(--color-gray-200) !important;
}

.hover\:bg-gray-300:hover {
    background-color: var(--color-gray-300) !important;
}

.hover\:bg-gray-400:hover {
    background-color: var(--color-gray-400) !important;
}

.hover\:bg-gray-500:hover {
    background-color: var(--color-gray-500) !important;
}

.hover\:bg-gray-600:hover {
    background-color: var(--color-gray-600) !important;
}

.hover\:bg-gray-700:hover {
    background-color: var(--color-gray-700) !important;
}

.hover\:bg-gray-800:hover {
    background-color: var(--color-gray-800) !important;
}

.hover\:bg-gray-900:hover {
    background-color: var(--color-gray-900) !important;
}

.hover\:bg-gray-950:hover {
    background-color: var(--color-gray-950) !important;
}

.hover\:text-gray-50:hover {
    color: var(--color-gray-50) !important;
}

.hover\:text-gray-100:hover {
    color: var(--color-gray-100) !important;
}

.hover\:text-gray-200:hover {
    color: var(--color-gray-200) !important;
}

.hover\:text-gray-300:hover {
    color: var(--color-gray-300) !important;
}

.hover\:text-gray-400:hover {
    color: var(--color-gray-400) !important;
}

.hover\:text-gray-500:hover {
    color: var(--color-gray-500) !important;
}

.hover\:text-gray-600:hover {
    color: var(--color-gray-600) !important;
}

.hover\:text-gray-700:hover {
    color: var(--color-gray-700) !important;
}

.hover\:text-gray-800:hover {
    color: var(--color-gray-800) !important;
}

.hover\:text-gray-900:hover {
    color: var(--color-gray-900) !important;
}

.hover\:text-gray-950:hover {
    color: var(--color-gray-950) !important;
}

.hover\:border-gray-50:hover {
    border-color: var(--color-gray-50) !important;
}

.hover\:border-gray-100:hover {
    border-color: var(--color-gray-100) !important;
}

.hover\:border-gray-200:hover {
    border-color: var(--color-gray-200) !important;
}

.hover\:border-gray-300:hover {
    border-color: var(--color-gray-300) !important;
}

.hover\:border-gray-400:hover {
    border-color: var(--color-gray-400) !important;
}

.hover\:border-gray-500:hover {
    border-color: var(--color-gray-500) !important;
}

.hover\:border-gray-600:hover {
    border-color: var(--color-gray-600) !important;
}

.hover\:border-gray-700:hover {
    border-color: var(--color-gray-700) !important;
}

.hover\:border-gray-800:hover {
    border-color: var(--color-gray-800) !important;
}

.hover\:border-gray-900:hover {
    border-color: var(--color-gray-900) !important;
}

.hover\:border-gray-950:hover {
    border-color: var(--color-gray-950) !important;
}

/* Dark Hover Variants */
.dark .dark\:hover\:bg-gray-50:hover {
    background-color: var(--color-gray-50) !important;
}

.dark .dark\:hover\:bg-gray-100:hover {
    background-color: var(--color-gray-100) !important;
}

.dark .dark\:hover\:bg-gray-200:hover {
    background-color: var(--color-gray-200) !important;
}

.dark .dark\:hover\:bg-gray-300:hover {
    background-color: var(--color-gray-300) !important;
}

.dark .dark\:hover\:bg-gray-400:hover {
    background-color: var(--color-gray-400) !important;
}

.dark .dark\:hover\:bg-gray-500:hover {
    background-color: var(--color-gray-500) !important;
}

.dark .dark\:hover\:bg-gray-600:hover {
    background-color: var(--color-gray-600) !important;
}

.dark .dark\:hover\:bg-gray-700:hover {
    background-color: var(--color-gray-700) !important;
}

.dark .dark\:hover\:bg-gray-800:hover {
    background-color: var(--color-gray-800) !important;
}

.dark .dark\:hover\:bg-gray-900:hover {
    background-color: var(--color-gray-900) !important;
}

.dark .dark\:hover\:bg-gray-950:hover {
    background-color: var(--color-gray-950) !important;
}

.dark .dark\:hover\:text-gray-50:hover {
    color: var(--color-gray-50) !important;
}

.dark .dark\:hover\:text-gray-100:hover {
    color: var(--color-gray-100) !important;
}

.dark .dark\:hover\:text-gray-200:hover {
    color: var(--color-gray-200) !important;
}

.dark .dark\:hover\:text-gray-300:hover {
    color: var(--color-gray-300) !important;
}

.dark .dark\:hover\:text-gray-400:hover {
    color: var(--color-gray-400) !important;
}

.dark .dark\:hover\:text-gray-500:hover {
    color: var(--color-gray-500) !important;
}

.dark .dark\:hover\:text-gray-600:hover {
    color: var(--color-gray-600) !important;
}

.dark .dark\:hover\:text-gray-700:hover {
    color: var(--color-gray-700) !important;
}

.dark .dark\:hover\:text-gray-800:hover {
    color: var(--color-gray-800) !important;
}

.dark .dark\:hover\:text-gray-900:hover {
    color: var(--color-gray-900) !important;
}

.dark .dark\:hover\:text-gray-950:hover {
    color: var(--color-gray-950) !important;
}

/* Focus Variants */
.focus\:bg-gray-50:focus {
    background-color: var(--color-gray-50) !important;
}

.focus\:bg-gray-100:focus {
    background-color: var(--color-gray-100) !important;
}

.focus\:bg-gray-200:focus {
    background-color: var(--color-gray-200) !important;
}

.focus\:bg-gray-300:focus {
    background-color: var(--color-gray-300) !important;
}

.focus\:bg-gray-400:focus {
    background-color: var(--color-gray-400) !important;
}

.focus\:bg-gray-500:focus {
    background-color: var(--color-gray-500) !important;
}

.focus\:bg-gray-600:focus {
    background-color: var(--color-gray-600) !important;
}

.focus\:bg-gray-700:focus {
    background-color: var(--color-gray-700) !important;
}

.focus\:bg-gray-800:focus {
    background-color: var(--color-gray-800) !important;
}

.focus\:bg-gray-900:focus {
    background-color: var(--color-gray-900) !important;
}

.focus\:bg-gray-950:focus {
    background-color: var(--color-gray-950) !important;
}

.focus\:ring-gray-50:focus {
    --tw-ring-color: var(--color-gray-50) !important;
}

.focus\:ring-gray-100:focus {
    --tw-ring-color: var(--color-gray-100) !important;
}

.focus\:ring-gray-200:focus {
    --tw-ring-color: var(--color-gray-200) !important;
}

.focus\:ring-gray-300:focus {
    --tw-ring-color: var(--color-gray-300) !important;
}

.focus\:ring-gray-400:focus {
    --tw-ring-color: var(--color-gray-400) !important;
}

.focus\:ring-gray-500:focus {
    --tw-ring-color: var(--color-gray-500) !important;
}

.focus\:ring-gray-600:focus {
    --tw-ring-color: var(--color-gray-600) !important;
}

.focus\:ring-gray-700:focus {
    --tw-ring-color: var(--color-gray-700) !important;
}

.focus\:ring-gray-800:focus {
    --tw-ring-color: var(--color-gray-800) !important;
}

.focus\:ring-gray-900:focus {
    --tw-ring-color: var(--color-gray-900) !important;
}

.focus\:ring-gray-950:focus {
    --tw-ring-color: var(--color-gray-950) !important;
}

/* ===== ?ㅽ겕紐⑤뱶 text-white ?곗꽑?쒖쐞 ?섏젙 ===== */
/* dark:text-white媛€ text-gray-900蹂대떎 ?곗꽑?섎룄濡?*/
.dark .dark\:text-white {
    color: #fff !important;
}

.dark .dark\:text-gray-50 {
    color: var(--color-gray-50) !important;
}

.dark .dark\:text-gray-100 {
    color: var(--color-gray-100) !important;
}

.dark .dark\:text-gray-200 {
    color: var(--color-gray-200) !important;
}

.dark .dark\:text-gray-300 {
    color: var(--color-gray-300) !important;
}

.dark .dark\:text-gray-400 {
    color: var(--color-gray-400) !important;
}

/* ===== hover:bg-gray-50 ?ㅽ겕紐⑤뱶 ?€??===== */
/* ?쇱씠?몃え?? gray-50, ?ㅽ겕紐⑤뱶: gray-800 */
.dark .hover\:bg-gray-50:hover {
    background-color: var(--color-gray-800) !important;
}

.dark .hover\:bg-gray-100:hover {
    background-color: var(--color-gray-700) !important;
}

/* ===== 怨듯넻 UI ?붿냼 hover ?ㅽ???(gray-100 / dark:gray-800) ===== */
/* ?ㅻ뜑: 寃€?? ?뚮쭏?좉?, drawer踰꾪듉 - ?띿뒪???꾩씠肄??됱긽 ?좎? */
#search-toggle:hover,
#theme-toggle:hover,
#drawer-toggle:hover {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-600) !important;
}

.dark #search-toggle:hover,
.dark #theme-toggle:hover,
.dark #drawer-toggle:hover {
    background-color: var(--color-gray-800) !important;
    color: var(--color-gray-400) !important;
}

/* Go to Top 踰꾪듉 */
#go-to-top:hover {
    background-color: #262626 !important;
    color: #ffffff !important;
}

.dark #go-to-top:hover {
    background-color: var(--color-gray-800) !important;
    color: var(--foreground) !important;
}

/* ?ㅻ퉬 硫붾돱 hover ???띿뒪???됱긽 - 湲곕낯 ?띿뒪??而щ윭 ?좎? (?꾨씪?대㉧由??쒓굅) */
header nav a.menu-item-link:hover {
    color: var(--foreground) !important;
    background-color: var(--color-gray-100) !important;
}

.dark header nav a.menu-item-link:hover {
    color: var(--foreground) !important;
    background-color: var(--color-gray-800) !important;
}

/* ?쒓렇 a?쒓렇 */
.flex.flex-wrap.gap-2 a[href*="/tag/"]:hover,
article a[href*="/tag/"]:hover {
    background-color: var(--color-gray-100) !important;
}

.dark .flex.flex-wrap.gap-2 a[href*="/tag/"]:hover,
.dark article a[href*="/tag/"]:hover {
    background-color: var(--color-gray-800) !important;
}

/* 醫뗭븘??踰꾪듉 (醫뗭븘?????뚮????뚮쭔) */
#boxkun-like-btn:not([data-liked="true"]):hover {
    background-color: var(--color-gray-100) !important;
}

.dark #boxkun-like-btn:not([data-liked="true"]):hover {
    background-color: var(--color-gray-800) !important;
}

/* 怨듭쑀 踰꾪듉 */
#boxkun-send-menu>button:hover {
    background-color: var(--color-gray-100) !important;
}

.dark #boxkun-send-menu>button:hover {
    background-color: var(--color-gray-800) !important;
}

/* 怨듭쑀 ?쒕∼???대? ?꾩씠??hover */
#boxkun-send-list button:hover {
    background-color: var(--color-gray-100) !important;
}

.dark #boxkun-send-list button:hover {
    background-color: var(--color-gray-800) !important;
}

/* ?ъ씠?쒕컮 而ㅼ뒪?€ ?꾩젽 ?쒓렇 a?쒓렇 */
aside .widget_block a:hover {
    background-color: var(--color-gray-100) !important;
    color: var(--foreground) !important;
}

.dark aside .widget_block a:hover {
    background-color: var(--color-gray-800) !important;
    color: var(--foreground) !important;
}

/* ===== ?ㅻ뜑 ?쒕툕硫붾돱 ?ㅽ???===== */
/* ?쒕툕硫붾돱 mt-2 諛?::after濡?hover ?곸뿭 ?뺤옣 */
header nav .sub-menu {
    margin-top: 0.5rem !important;
}

/* 遺€紐?li??::after 異붽??섏뿬 hover ?곸뿭 ?곌껐 */
header nav>ul>li.menu-item-has-children {
    position: relative;
}

header nav>ul>li.menu-item-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.5rem;
    /* mt-2 媛꾧꺽留뚰겮 */
    background: transparent;
}

/* ?쒕툕硫붾돱 ?꾩씠??hover */
header nav .sub-menu a:hover {
    background-color: var(--color-gray-100) !important;
}

.dark header nav .sub-menu a:hover {
    background-color: var(--color-gray-900) !important;
}

/* Drawer 諛곌꼍??*/
#drawer-menu {
    background-color: #fff !important;
}

.dark #drawer-menu {
    background-color: var(--color-gray-900) !important;
}

/* ===== ?ㅼ슫濡쒕뱶 踰꾪듉 ?ㅽ???===== */
.boxkun-download-btn {
    background-color: var(--color-gray-100) !important;
    color: var(--black) !important;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none !important;
}

.boxkun-download-btn:hover {
    background-color: var(--color-gray-200) !important;
}

.dark .boxkun-download-btn {
    background-color: var(--color-gray-700) !important;
    color: var(--white) !important;
}

.dark .boxkun-download-btn:hover {
    background-color: var(--color-gray-800) !important;
}

/* ===== ?볤? 肄붾뱶/?몄슜援??앹뾽 ?ㅽ겕紐⑤뱶 ===== */
/* ?앹뾽 ?ㅻ뜑/?명꽣 諛곌꼍??*/
.dark .bg-gray-50 {
    background-color: var(--color-gray-800) !important;
}

.dark .dark\:bg-gray-800\/50 {
    background-color: var(--color-gray-800) !important;
}

/* ?볤? ?먮뵒???몄슜援??ㅽ???*/
.comment-editor blockquote,
#comment-form blockquote,
[contenteditable] blockquote {
    border-left: 4px solid var(--color-gray-300);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--color-gray-600);
    font-style: italic;
}

.dark .comment-editor blockquote,
.dark #comment-form blockquote,
.dark [contenteditable] blockquote {
    border-left-color: var(--color-gray-500);
    color: var(--color-gray-300);
}

/* ?볤? ?먮뵒??ul/ol 由ъ뒪???ㅽ???*/
.comment-editor ul,
#comment-form ul,
[contenteditable] ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.comment-editor ol,
#comment-form ol,
[contenteditable] ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.comment-editor li,
#comment-form li,
[contenteditable] li {
    color: var(--foreground);
}

.dark .comment-editor li::marker,
.dark #comment-form li::marker,
.dark [contenteditable] li::marker {
    color: var(--color-gray-400);
}

/* ===== 援ы뀗踰좊Ⅴ???먮뵒???꾩슜 ?ㅽ???===== */
/* ?먮뵒?????고듃 ?ъ씠利?16px (iOS 以?諛⑹?) - 紐⑤컮?쇰쭔 */
@media (max-width: 782px) {

    .editor-styles-wrapper p,
    .editor-styles-wrapper .wp-block-paragraph,
    .editor-styles-wrapper ul,
    .editor-styles-wrapper ol,
    .editor-styles-wrapper li,
    .editor-styles-wrapper input,
    .editor-styles-wrapper textarea,
    .editor-styles-wrapper .wp-block-list,
    .block-editor-rich-text__editable,
    .block-editor-block-list__block {
        font-size: 16px !important;
    }

    /* ?먮뵒??input/textarea 以?諛⑹? */
    .editor-styles-wrapper input[type="text"],
    .editor-styles-wrapper input[type="email"],
    .editor-styles-wrapper input[type="url"],
    .editor-styles-wrapper input[type="number"],
    .editor-styles-wrapper textarea {
        font-size: 16px !important;
    }
}

/* iOS ?붾툝??以?諛⑹? - ?먮뵒???댁뿉?쒕쭔 */
.editor-styles-wrapper,
.block-editor-writing-flow,
.edit-post-visual-editor {
    touch-action: manipulation !important;
}

/* AI ?앹뾽 (援먯젙/?ъ옉???щ━?먯씠?? ?낅젰 ?꾨뱶 */
.components-modal__content input,
.components-modal__content textarea,
[class*="ai-"] input,
[class*="ai-"] textarea,
[class*="rewrite"] input,
[class*="rewrite"] textarea,
[class*="correct"] input,
[class*="correct"] textarea,
[class*="creating"] input,
[class*="creating"] textarea,
[role="dialog"] input,
[role="dialog"] textarea {
    font-size: 16px !important;
}

/* AI ?앹뾽 ?붾툝??以?諛⑹? */
.components-modal__content,
[class*="ai-"],
[class*="rewrite"],
[class*="correct"],
[class*="creating"],
[role="dialog"] {
    touch-action: manipulation !important;
}

/* ===== 諛뺤뒪荑?而ㅼ뒪?€ 釉붾줉 留덉쭊 ===== */
.wp-block-boxkun-video,
.wp-block-boxkun-button,
.wp-block-boxkun-slider,
.wp-block-boxkun-chart,
.wp-block-boxkun-data-table,
.wp-block-boxkun-gallery,
.wp-block-boxkun-image,
.wp-block-boxkun-jumbotron,
.wp-block-boxkun-tabs,
.wp-block-boxkun-timeline,
.wp-block-boxkun-youtube,
.wp-block-boxkun-link-preview,
.wp-block-boxkun-cta,
.boxkun-download-wrapper,
.accordion,
.boxkun-countdown,
.boxkun-chat-bubble,
.boxkun-separator,
.boxkun-toc {
    margin-top: 1.65rem !important;
    margin-bottom: 1.65rem !important;
}

/* 諛뺤뒪荑??곗씠???뚯씠釉??대? table 留덉쭊 ?쒓굅 */
.wp-block-boxkun-data-table table,
.boxkun-data-table table {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 諛뺤뒪荑??곗씠???뚯씠釉?thead ?ш린 諛?hover ?ㅽ???*/
.wp-block-boxkun-data-table thead,
.boxkun-data-table thead {
    font-size: 0.875rem !important;
}

.wp-block-boxkun-data-table thead:hover,
.boxkun-data-table thead:hover,
.wp-block-boxkun-data-table thead tr:hover,
.boxkun-data-table thead tr:hover {
    background-color: var(--color-gray-100) !important;
    color: var(--color-gray-700) !important;
}

.wp-block-boxkun-data-table thead:hover th,
.boxkun-data-table thead:hover th,
.wp-block-boxkun-data-table thead tr:hover th,
.boxkun-data-table thead tr:hover th {
    color: var(--color-gray-700) !important;
}

.dark .wp-block-boxkun-data-table thead:hover,
.dark .boxkun-data-table thead:hover,
.dark .wp-block-boxkun-data-table thead tr:hover,
.dark .boxkun-data-table thead tr:hover {
    background-color: var(--color-gray-800) !important;
    color: var(--color-gray-300) !important;
}

.dark .wp-block-boxkun-data-table thead:hover th,
.dark .boxkun-data-table thead:hover th,
.dark .wp-block-boxkun-data-table thead tr:hover th,
.dark .boxkun-data-table thead tr:hover th {
    color: var(--color-gray-300) !important;
}

.wp-block-boxkun-data-table tbody tr:hover,
.boxkun-data-table tbody tr:hover {
    background-color: var(--color-gray-100) !important;
    color: var(--black) !important;
}

.wp-block-boxkun-data-table tbody tr:hover td,
.boxkun-data-table tbody tr:hover td {
    color: var(--black) !important;
}

.dark .wp-block-boxkun-data-table tbody tr:hover,
.dark .boxkun-data-table tbody tr:hover {
    background-color: var(--color-gray-800) !important;
    color: var(--white) !important;
}

.dark .wp-block-boxkun-data-table tbody tr:hover td,
.dark .boxkun-data-table tbody tr:hover td {
    color: var(--white) !important;
}

/* ?꾩퐫?붿뼵/FAQ 釉붾줉 ?ㅽ????섏젙 */
.accordion {
    box-shadow: none !important;
}

.accordion .accordion-toggle {
    padding: 0.75rem 1rem !important;
}

.accordion .accordion-content>div {
    padding: 0.75rem 1rem !important;
}

/* 諛뺤뒪荑?李⑦듃 ?댄똻 ?쇱씠?몃え??*/
.apexcharts-tooltip {
    background: #fff !important;
    border-color: var(--color-gray-200) !important;
    color: var(--black) !important;
}

.apexcharts-tooltip-title {
    background: var(--color-gray-100) !important;
    border-color: var(--color-gray-200) !important;
    color: var(--black) !important;
}

.apexcharts-tooltip-text,
.apexcharts-tooltip-text-y-label,
.apexcharts-tooltip-text-y-value {
    color: var(--black) !important;
}

/* 諛뺤뒪荑?李⑦듃 ?댄똻 ?ㅽ겕紐⑤뱶 */
.dark .apexcharts-tooltip {
    background: var(--color-gray-800) !important;
    border-color: var(--color-gray-700) !important;
    color: var(--white) !important;
}

.dark .apexcharts-tooltip-title {
    background: var(--color-gray-900) !important;
    border-color: var(--color-gray-700) !important;
    color: var(--white) !important;
}

.dark .apexcharts-tooltip-text,
.dark .apexcharts-tooltip-text-y-label,
.dark .apexcharts-tooltip-text-y-value {
    color: var(--white) !important;
}

.dark .apexcharts-tooltip-marker {
    border-color: var(--color-gray-700) !important;
}

/* 李⑦듃 異??쇰꺼 ?ㅽ겕紐⑤뱶 */
.dark .apexcharts-xaxis-label tspan,
.dark .apexcharts-yaxis-label tspan,
.dark .apexcharts-xaxis text,
.dark .apexcharts-yaxis text {
    fill: var(--color-gray-400) !important;
}

.dark .apexcharts-legend-text {
    color: var(--color-gray-400) !important;
}

/* 留곹겕 誘몃━蹂닿린 釉붾줉 諛뺤뒪?먮룄???쒓굅 */
.wp-block-boxkun-link-preview {
    box-shadow: none !important;
}

.wp-block-boxkun-link-preview:hover {
    box-shadow: none !important;
}

/* CTA 釉붾줉 諛뺤뒪?먮룄???쒓굅 */
.wp-block-boxkun-cta {
    box-shadow: none !important;
}

.wp-block-boxkun-cta:hover {
    box-shadow: none !important;
}

/* 梨꾪똿踰꾨툝 ?쇱そ 踰꾨툝 ?ㅽ겕紐⑤뱶 諛곌꼍??*/
.dark .boxkun-chat-bubble .bubble-left {
    background-color: #4c4c4c !important;
}

/* ===== 紐⑤뱺 ?대?吏€ 以뚯씤 ?④낵 ?쒓굅 (?쇱씠?몃컯?? ?먮뵒???쒖쇅) ===== */
body:not(.wp-admin) img:not(.boxkun-lb-image) {
    transform: none !important;
}

body:not(.wp-admin) img:not(.boxkun-lb-image):hover {
    transform: none !important;
}

/* ?쇱씠?몃컯???대?吏€??transform ?덉슜 */
.boxkun-lb-image {
    transform-origin: center center;
}

/* group-hover:scale 媛뺤젣 ?쒓굅 (?쇱씠?몃컯?? ?먮뵒???쒖쇅) */
body:not(.wp-admin) .group:hover img:not(.boxkun-lb-image),
body:not(.wp-admin) .group-hover\:scale-105:not(.boxkun-lb-image),
body:not(.wp-admin) .group-hover\:scale-110:not(.boxkun-lb-image) {
    transform: none !important;
}

/* Tailwind scale ?대옒???쒓굅 (?쇱씠?몃컯?? ?먮뵒???쒖쇅) */
body:not(.wp-admin) .hover\:scale-105:hover:not(.boxkun-lb-image),
body:not(.wp-admin) .hover\:scale-110:hover:not(.boxkun-lb-image) {
    transform: none !important;
}

/* LQIP 釉붾윭 ?몃옖吏€??*/
.boxkun-lqip-image {
    filter: blur(10px);
    transition: filter 0.3s ease-out, opacity 0.2s ease-out !important;
}

.boxkun-lqip-image.boxkun-lqip-loaded {
    filter: blur(0) !important;
    transition: filter 0.3s ease-out, opacity 0.2s ease-out !important;
}

/* ===== ?꾩젽 hover 諛곌꼍???쒓굅 ===== */
aside .widget a:hover,
aside .widget_block a:hover,
.wp-block-boxkun-weekly-popular a:hover,
.wp-block-boxkun-recent-posts a:hover,
.wp-block-boxkun-categories a:hover,
.dark aside .widget a:hover,
.dark aside .widget_block a:hover,
.dark .wp-block-boxkun-weekly-popular a:hover,
.dark .wp-block-boxkun-recent-posts a:hover,
.dark .wp-block-boxkun-categories a:hover {
    background-color: transparent !important;
    text-decoration: none !important;
}

/* ===== ?쒕ぉ ?щ씪?대뱶 ???댄럺??(鍮꾪솢?깊솕) ===== */
/* ?덊솕硫? ?꾩뭅?대툕, 寃€?됯껐怨? 愿€?④? - ?쒓굅??*/

/* ?꾩젽 諛?洹몃９ ?몃뜑?쇱씤 ?④낵 - 紐⑤몢 ?쒓굅??*/

/* ===== ?꾩껜 議고쉶??釉붾줉 - widget ?ㅽ????쒓굅 ===== */
.wp-block-boxkun-total-views {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.widget:has(.wp-block-boxkun-total-views) {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
}

.wp-block-boxkun-total-views .bg-gray-700 {
    border-radius: 30px !important;
}

/* ===== 釉붾줉 ?먮뵒???꾩씠肄?fill:none 媛뺤젣 ===== */
.editor-block-list-item-boxkun-total-views .block-editor-block-icon svg,
.editor-block-list-item-boxkun-timeline .block-editor-block-icon svg {
    fill: none !important;
}

/* ===== ?ㅻ퉬寃뚯씠???쒕∼?ㅼ슫 硫붾돱 ?ㅽ???===== */
/* ?대?吏€ ?꾩씠肄?50x50 怨좎젙 */
header nav .sub-menu .menu-icon img,
.sub-menu .menu-icon img,
.sub-menu span.menu-icon img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
}

/* ?대?吏€媛€ ?덈뒗 menu-icon 而⑦뀒?대꼫 */
.sub-menu .menu-icon:has(img) {
    width: 50px !important;
    height: 50px !important;
    flex-shrink: 0;
}

/* SVG ?꾩씠肄?25x25 怨좎젙 */
.sub-menu .menu-icon svg {
    width: 25px !important;
    height: 25px !important;
    max-width: 25px !important;
    max-height: 25px !important;
}

/* SVG媛€ ?덈뒗 menu-icon 而⑦뀒?대꼫 */
.sub-menu .menu-icon:has(svg) {
    width: 25px !important;
    height: 25px !important;
    flex-shrink: 0;
}

/* ?띿뒪??以꾨컮轅?諛⑹? */
.sub-menu .menu-title,
.sub-menu .menu-desc {
    white-space: nowrap;
}

/* ?쒕∼?ㅼ슫 理쒖냼 ?덈퉬 */
.sub-menu {
    min-width: 200px !important;
}

/* ===== 蹂몃Ц 硫뷀? ?뺣낫 gap ===== */
article .flex.items-center.flex-wrap {
    gap: 7px !important;
}

/* ===== 移댄뀒怨좊━ ?꾩뭅?대툕 SVG ?꾩씠肄?80x80 媛뺤젣 ===== */
[id^="cat-svg-"] {
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    max-height: 80px !important;
}

/* ===== 而ㅼ뒪?€ Select ?쒕∼?ㅼ슫 ===== */
.boxkun-table-filter {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    height: 42px;
    line-height: 1.5;
}

.boxkun-table-search {
    height: 42px;
}

.dark .boxkun-table-filter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
}

/* ===== 肄섑뀗痢??곸뿭 諛??꾩젽 ?ㅽ??쇰쭅 ===== */

/* 醫뚯륫 肄섑뀗痢??곸뿭 (2/3) - 湲€, 寃€?됯껐怨? ?꾩뭅?대툕, ?쒓렇 ??*/
.lg\:col-span-2 {
    padding: 0 !important;
    border-radius: 1.5rem;
}

/* ===== 諛뺤뒪荑??꾩씠肄?由ъ뒪??釉붾줉 ===== */
.boxkun-icon-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    gap: var(--icon-list-gap, 8px);
}

.boxkun-icon-list-item {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.boxkun-icon-list-item-marker {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.boxkun-icon-list-item-marker svg {
    display: block;
}

.boxkun-icon-list-item-content {
    flex: 1;
}

/* ===== 愿묎퀬 ?щ’ ?ㅻ쾭?뚮줈??諛⑹? ===== */
.boxkun-ad-slot {
    overflow: hidden;
    max-width: 100%;
}

.boxkun-ad-slot ins.adsbygoogle,
.boxkun-ad-slot iframe {
    max-width: 100% !important;
}

/* ===== ?ъ뒪?고삎 ?덉씠?꾩썐 2:3 ?몃줈 鍮꾩쑉 ===== */
.aspect-\[2\/3\] {
    aspect-ratio: 2 / 3 !important;
}
/* ============================================
   스포일러 (모자이크) 단락 블록 스타일
   ============================================ */
.boxkun-spoiler-block {
    filter: blur(8px);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    position: relative;
    transition: filter 0.5s ease;
}

.boxkun-spoiler-block::after {
    content: '?? 스포일러 (클릭하여 보기)';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10;
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.5s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.boxkun-spoiler-revealed {
    filter: none !important;
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: auto !important;
}

.boxkun-spoiler-revealed::after {
    opacity: 0;
    pointer-events: none;
}