@charset "utf-8";

/* =========================================
   0. CSS Variables — Hogwarts Dark Theme (최종)
   ========================================= */
:root {
    --bg-body:          #05080c;
    --bg-surface:       rgba(6, 12, 20, 0.68);
    --bg-surface-hover: rgba(8, 18, 28, 0.8);
    --text-primary:     #8ab0c4;
    --text-secondary:   #3a5868;
    --text-tertiary:    #152030;
    --accent-color:     #1e7048;
    --accent-hover:     #278a5a;
    --accent-blue:      #2a5888;
    --accent-silver:    #7a9aaa;
    --border-subtle:    rgba(18, 55, 35, 0.18);
    --border-medium:    rgba(20, 65, 40, 0.28);
    --shadow-glow:      0 0 20px -4px rgba(20, 100, 55, 0.2);
    --shadow-soft:      0 4px 20px rgba(0, 0, 0, 0.5);
}

/* =========================================
   1. Tistory System Overrides
   ========================================= */
#tistory-toolbar, .tt_toolbar_container, .plugin_author,
div[data-tistory-react-app="Namecard"], #tistorytoolbarid,
.tt_menubar, #kakaoWrap #kakaoHead, .tistoryProfileLayerTrigger,
.container_postbtn, .another_category {
    display: none !important;
}
#tistorytoolbarid, .tt_menubar, .tt-menubar {
    height: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: -9999 !important;
}
html { overflow-y: scroll; }
body, html { padding-top: 0 !important; margin-top: 0 !important; }
input[type="text"], input[type="password"], textarea { appearance: none; -webkit-appearance: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* =========================================
   2. Keyframes
   ========================================= */
@keyframes fadeIn   { 0% { opacity: 0; }        100% { opacity: 1; } }
@keyframes float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes flicker  { 0%,100% { opacity:1; transform:translateX(-50%) scale(1); } 38% { opacity:.78; transform:translateX(-53%) scale(.88); } 70% { opacity:.94; transform:translateX(-47%) scale(1.06); } }
@keyframes twinkle  { 0%,100% { opacity: .9; } 50% { opacity: .15; } }
@keyframes hpPulse  { 0%,100% { box-shadow: 0 0 6px rgba(61,170,120,0.7); transform: scale(1); } 50% { box-shadow: 0 0 14px rgba(61,170,120,1); transform: scale(1.15); } }
@keyframes slytherinTrail {
    0%   { opacity:1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
    100% { opacity:0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.2) rotate(120deg); }
}

/* =========================================
   3. Glass Morphism
   ========================================= */
.hp-glass {
    background: rgba(4, 10, 20, 0.58);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(18, 55, 35, 0.2);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 0 0 1px rgba(30,100,65,0.08);
}
.hp-glass::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(28,80,50,0.18), transparent);
}
.hp-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20,60,40,0.06) 0%, transparent 60%);
    pointer-events: none;
    border-radius: 10px;
}
.hp-glass:hover {
    border-color: rgba(22, 100, 55, 0.5);
    box-shadow: 0 0 0 1px rgba(22,100,55,0.2), 0 0 20px -3px rgba(16,90,48,0.32), 0 0 44px -10px rgba(12,78,40,0.2);
}
article.hp-glass:hover {
    border-color: rgba(22, 100, 55, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(22,100,55,0.2), 0 0 20px -3px rgba(16,90,48,0.32), 0 0 44px -10px rgba(12,78,40,0.2) !important;
}

/* =========================================
   4. Buttons
   ========================================= */
.hp-btn {
    background: rgba(10,50,28,0.7);
    border: 1px solid rgba(20,90,50,0.28);
    color: #1e7040;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.hp-btn:hover {
    background: rgba(14,65,36,0.9);
    color: #4ab870;
    border-color: rgba(30,110,60,0.45);
    box-shadow: 0 0 16px rgba(12,90,44,0.38) inset, 0 0 20px rgba(16,100,50,0.2);
}
.hp-btn-outline {
    background: transparent;
    border: 1px solid rgba(20,80,50,0.22);
    color: #3a8060;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.hp-btn-outline:hover {
    background: rgba(10,50,28,0.35);
    border-color: rgba(30,100,60,0.4);
    color: #5abf88;
    box-shadow: 0 0 12px rgba(12,80,40,0.2);
}
.hp-btn-ghost {
    background: rgba(10,44,24,0.75);
    border: none;
    border-left: 1px solid rgba(20,80,45,0.2);
    color: #3daa78;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.28s;
    cursor: pointer;
}
.hp-btn-ghost:hover {
    background: rgba(14,58,32,0.9);
    color: #60cc98;
    box-shadow: 0 0 14px rgba(12,90,44,0.35) inset;
}

/* 구독 버튼 */
#custom-subscribe-btn {
    display: flex !important;
    background: rgba(6, 28, 16, 0.5) !important;
    border-color: rgba(20, 80, 44, 0.45) !important;
    color: #1e7048 !important;
    box-shadow: 0 0 8px rgba(15,110,50,0.08) !important;
}
#custom-subscribe-btn:hover {
    background: rgba(10, 42, 24, 0.62) !important;
    border-color: rgba(28, 100, 56, 0.65) !important;
    color: #38a068 !important;
    box-shadow: 0 0 16px rgba(15,120,55,0.25) !important;
}

/* =========================================
   5. Icon Box
   ========================================= */
.hp-icon-box {
    background: rgba(8,30,18,0.6);
    border: 1px solid var(--border-subtle);
    color: var(--accent-color);
    transition: all 0.3s;
}
.group:hover .hp-icon-box {
    background: var(--accent-color);
    color: var(--bg-body);
    box-shadow: 0 0 14px rgba(20,100,55,0.4);
}

/* =========================================
   6. Sidebar Cards
   ========================================= */
.sb-card {
    background: rgba(4, 10, 22, 0.62);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(28, 75, 130, 0.20);
    border-radius: 16px;
    padding: 22px 20px 20px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(28,75,130,0.06);
    position: relative;
    overflow: hidden;
    margin-bottom: 14px;
}
.sb-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, rgba(45,100,200,0.28), rgba(61,170,120,0.18), transparent);
}

/* =========================================
   7. Category Lists
   ========================================= */

/* 기본 초기화 */
#desktop-category-container ul,
#desktop-category-container li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 링크 기본 — script.js inline style로 override됨, 폴백용 */
#desktop-category-container a,
#desktop-category-container li a {
    display: flex !important;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    font-family: 'Cinzel', serif;
    font-size: 14px;
    letter-spacing: 0.4px;
    color: #4a8868;
    text-decoration: none !important;
    background-image: none !important;
    transition: all 0.22s;
}
/* ::before 가상요소 아이콘 차단 */
#desktop-category-container a::before,
#desktop-category-container li a::before {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 티스토리 기본 아이콘 요소 숨김 */
#desktop-category-container .link_ico,
#desktop-category-container .ico_arr,
#desktop-category-container .ico_folder,
#desktop-category-container .ico_cate,
#desktop-category-container .ico_sub,
#desktop-category-container [class*="ico_"],
#desktop-category-container [class*="_ico"],
#desktop-category-container a img:not(.hp-cat-icon),
.mobile-category-container a img:not(.hp-cat-icon),
.mobile-category-container .link_ico,
.mobile-category-container .ico_arr,
.mobile-category-container .ico_folder,
.mobile-category-container [class*="ico_"] {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* SVG 아이콘 (script.js 삽입) */
#desktop-category-container .hp-svg-icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
    color: #1e6040;
}

#desktop-category-container .hp-cat-icon,
.mobile-category-container .hp-cat-icon{
    display:block !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
    object-fit:contain !important;
    flex-shrink:0 !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* 서브카테고리 들여쓰기 — script.js가 inline으로 처리, CSS는 폴백 */
#desktop-category-container ul ul,
#desktop-category-container .sub_category_list {
    padding-left: 14px !important;
    border-left: 1px solid rgba(24, 80, 50, 0.25) !important;
    margin: 4px 0 6px 18px !important;
}
#desktop-category-container ul ul li,
#desktop-category-container .sub_category_list li {
    position: relative;
}
#desktop-category-container .sub_category_list li::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 15px;
    width: 8px;
    height: 1px;
    background: rgba(24, 80, 50, 0.25);
}

/* 모바일 카테고리 */
.mobile-category-container a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 13px;
    color: #4a8070;
    text-decoration: none;
    border: 1px solid var(--border-subtle);
    margin-bottom: 4px;
    transition: all 0.2s;
}
.mobile-category-container a:hover {
    background: rgba(10,50,28,0.3);
    color: #6abf90;
    border-color: rgba(24,90,55,0.3);
}

/* =========================================
   8. Input
   ========================================= */
.hp-input {
    background: rgba(3,8,12,0.6);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
.hp-input:focus {
    border-color: rgba(30,100,60,0.4);
    outline: none;
    box-shadow: inset 0 0 0 1px rgba(24,90,55,0.25);
}

/* =========================================
   9. Pagination
   ========================================= */
.pagination {
    position: relative !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    gap: 6px;
    z-index: 10;
}
.hp-page-btn {
    pointer-events: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    width: 36px;
    height: 36px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.hp-page-btn:hover {
    background: rgba(10,50,28,0.4);
    color: var(--accent-color);
    border-color: rgba(24,90,55,0.35);
}
/* 선택된 페이지: 네모선 없이 색상만 */
.pagination .selected,
.pagination .current,
.pagination a.selected,
.pagination span.selected {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #1e7048 !important;
    font-weight: 700 !important;
    font-family: 'Cinzel', serif !important;
    font-size: 15px !important;
}

/* =========================================
   10. Anti-Flicker
   ========================================= */
.cloak-until-loaded { visibility: hidden; opacity: 0; transition: opacity 0.4s ease-out; }
.cloak-until-loaded.loaded { visibility: visible; opacity: 1; }

/* 글 표시 제한 해제 */
#main-layout main > article {
    display: flex !important;
}
#main-layout main > article.cloak-until-loaded:not(.loaded) {
    display: flex !important;
    visibility: hidden;
}

/* =========================================
   11. Nav Card
   ========================================= */
.nav-card {
    border: 1px solid rgba(20,55,38,0.15) !important;
    border-radius: 12px !important;
    transition: border-color 0.25s, background 0.25s !important;
}
.nav-card:hover { border-color: rgba(24,90,55,0.3) !important; background: rgba(4,14,10,0.6) !important; }
.nav-card:hover h4 { color: var(--accent-color) !important; }

/* =========================================
   12. Tag Container
   ========================================= */
.tag-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2.5rem; font-size: 0 !important; }
.tag-container a {
    display: inline-flex; align-items: center;
    height: 30px; padding: 0 12px;
    font-size: 13px; font-family: 'Cinzel', serif; font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    transition: all 0.2s ease; text-decoration: none;
}
.tag-container a::before { content: "#"; margin-right: 3px; color: var(--accent-color); opacity: 0.65; }
.tag-container a:hover { background: rgba(10,50,28,0.2); color: var(--accent-color); border-color: rgba(24,90,55,0.4); }
.tag-container i { display: none !important; }

/* =========================================
   13. Code / Syntax Highlighting
   ========================================= */
.hljs, pre, code, .prose pre, .prose code {
    background-color: #020810 !important;
    color: var(--text-primary) !important;
    font-family: 'JetBrains Mono', monospace !important;
}
.hljs {
    display: block; overflow-x: auto;
    padding: 1.25rem !important; border-radius: 10px !important;
    line-height: 1.6 !important; font-size: 0.88rem !important;
    border: 1px solid var(--border-subtle) !important;
}
.hljs::-webkit-scrollbar { height: 5px; }
.hljs::-webkit-scrollbar-thumb { background: rgba(24,70,44,0.3); border-radius: 4px; }
.hljs-comment, .hljs-quote   { color: #2a5040 !important; font-style: normal !important; }
.hljs-keyword, .hljs-formula { color: #7060c8 !important; }
.hljs-string, .hljs-addition { color: #4a9060 !important; }
.hljs-literal                { color: #3a7898 !important; }
.hljs-number, .hljs-attr     { color: #8a6030 !important; }
.hljs-title, .hljs-link      { color: var(--accent-blue) !important; }
.prose pre code { background-color: transparent !important; color: inherit !important; padding: 0 !important; border: none !important; }

/* =========================================
   14. Prose Typography
   ========================================= */
.prose img { border-radius: 10px; max-width: 100%; height: auto; }
.tt_article_useless_p_margin p { margin: 1.5em 0; }

.prose b, .prose strong,
.tt_article_useless_p_margin b, .tt_article_useless_p_margin strong {
    font-weight: 700 !important; color: #ffffff !important;
}
.prose i, .prose em,
.tt_article_useless_p_margin i, .tt_article_useless_p_margin em { font-style: italic !important; }
.prose u, .tt_article_useless_p_margin u {
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-color: var(--accent-color) !important;
}

.tt_article_useless_p_margin p, .prose p {
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem !important; color: #90b8cc !important; line-height: 1.9 !important;
}
.prose h2, .tt_article_useless_p_margin h2 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.7rem !important; color: #c8e4f0 !important;
    border-left: 3px solid var(--accent-color) !important;
    padding-left: 14px; border-bottom: none !important;
}
.prose h3, .tt_article_useless_p_margin h3 {
    font-family: 'Cinzel', serif !important;
    font-size: 1.45rem !important; color: #70b0d0 !important;
}
.prose h4, .tt_article_useless_p_margin h4 {
    font-size: 1.2rem !important; color: #a8cce0 !important;
}
.tt_article_useless_p_margin a, .prose a {
    color: #3daa78 !important; text-decoration: none !important;
    border-bottom: 1px dashed rgba(40,130,80,0.4); transition: all 0.2s ease;
}
.tt_article_useless_p_margin a:hover, .prose a:hover {
    color: #5acc90 !important; border-bottom-color: #3daa78;
}
.prose blockquote, .tt_article_useless_p_margin blockquote {
    border-left: 3px solid var(--accent-color) !important;
    background: rgba(4,16,10,0.4) !important;
    border-radius: 0 8px 8px 0; color: #5a8898 !important;
}
.prose blockquote p::before, .prose blockquote p::after { content: none !important; }
.prose table, .prose table * {
    background-color: rgba(4,10,16,0.5) !important;
    color: var(--text-primary) !important; border-color: var(--border-subtle) !important;
}
.prose table th {
    background-color: rgba(8,24,16,0.6) !important;
    font-family: 'Cinzel', serif; color: var(--accent-silver) !important;
}

/* =========================================
   15. Layout
   ========================================= */
#main-layout { padding-top: 2.5rem !important; }
#main-layout main { position: relative !important; min-height: 1600px !important; padding-bottom: 120px !important; }
@media (max-width: 1280px) { #main-layout main { min-height: 2000px !important; } }
@media (max-width: 768px)  { #main-layout main { min-height: auto !important; padding-bottom: 80px !important; } }

/* =========================================
   16. OpenGraph
   ========================================= */
figure[data-ke-type="opengraph"] { margin: 2rem 0; width: 100%; }
figure[data-ke-type="opengraph"] a {
    display: flex !important; min-height: 130px !important;
    border: 1px solid var(--border-subtle) !important; border-radius: 10px !important;
    background-color: rgba(4,10,16,0.5) !important;
    text-decoration: none !important; overflow: hidden !important; transition: all 0.3s ease !important;
}
figure[data-ke-type="opengraph"] a:hover {
    border-color: rgba(24,90,55,0.35) !important; background-color: rgba(4,14,10,0.6) !important;
}
figure[data-ke-type="opengraph"] .og-text { flex: 1 !important; padding: 1.25rem 1.5rem !important; background: transparent !important; }
figure[data-ke-type="opengraph"] .og-title { font-family: 'Cinzel', serif !important; font-size: 0.95rem !important; font-weight: 600 !important; color: var(--text-primary) !important; }
figure[data-ke-type="opengraph"] .og-desc  { font-family: 'EB Garamond', serif !important; font-size: 0.875rem !important; color: var(--text-secondary) !important; font-style: italic; }
figure[data-ke-type="opengraph"] .og-host  { font-family: 'JetBrains Mono', monospace !important; font-size: 0.72rem !important; color: var(--text-tertiary) !important; }

/* =========================================
   17. Comments & Guestbook
   ========================================= */
#comments-section textarea {
    background-color: rgba(4,10,14,0.5) !important;
    border: 1px solid var(--border-subtle) !important; color: var(--text-primary) !important;
}
#comments-section textarea:focus { border-color: rgba(24,90,55,0.4) !important; outline: none; }
.comment-form-box { background: transparent !important; border: 1px solid var(--border-subtle) !important; box-shadow: none !important; }
li.rp_admin .rp_admin-avatar { border: 1px solid var(--accent-color) !important; }
li.rp_admin .flex-1 .flex span:first-child { color: var(--accent-color) !important; }
li.rp_admin .flex-1 .flex span:first-child::after {
    content: '\f058'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    margin-left: 5px; font-size: 0.8rem; color: var(--accent-color);
}
#guestbook-list ul li { display: block !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; }
.tt_more_preview_comments_wrap {
    background-color: transparent !important; border: 1px solid var(--border-subtle) !important;
    border-radius: 6px !important; padding: 8px 16px !important; margin: 16px auto !important;
    width: fit-content !important; cursor: pointer !important; transition: all 0.2s ease !important; text-align: center !important;
}
.tt_more_preview_comments_wrap:hover { background-color: rgba(6,16,10,0.4) !important; }
.tt_more_preview_comments_text { color: var(--text-secondary) !important; font-size: 0.8rem !important; font-family: 'Cinzel', serif; letter-spacing: 1px; }

/* 방명록 크기 */
#guestbook-container {
    width: min(1600px, 95vw) !important;
    max-width: none !important;
    margin-left: 50% !important;
    transform: translateX(-50%);
    margin-right: 0 !important;
}
#guestbook-container > div {
    border-radius: 0 !important;
    min-height: max(520px, 65vh) !important;
}
#hp-gb-candles { height: 180px !important; }

/* 방명록 모바일 */
@media (max-width: 768px) {
    #guestbook-container div[style*="width:clamp"] {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(90,60,18,0.25) !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px 20px !important;
    }
}

/* =========================================
   18. HR Dividers
   ========================================= */
.tt_article_useless_p_margin hr, .prose hr { display: block; border: 0; margin: 3rem auto !important; opacity: 1 !important; }
.tt_article_useless_p_margin hr[data-ke-style="style1"]::after, .prose hr[data-ke-style="style1"]::after {
    content: "· · ·"; font-size: 20px; display: flex; justify-content: center; color: var(--text-tertiary); letter-spacing: 8px;
}
.tt_article_useless_p_margin hr[data-ke-style="style2"], .prose hr[data-ke-style="style2"] {
    height: 1px !important; width: 100%;
    background: linear-gradient(to right, transparent, rgba(24,90,55,0.3), transparent) !important;
}
.tt_article_useless_p_margin hr[data-ke-style="style5"], .prose hr[data-ke-style="style5"] {
    height: 1px !important; width: 100% !important; background-color: rgba(24,70,44,0.2) !important;
}

/* =========================================
   19. Misc
   ========================================= */
.line-clamp-6 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; }

input[type="checkbox"]:checked {
    background-color: transparent !important; border-color: var(--accent-color) !important;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231e7048' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e") !important;
}

#prev-post-container:empty, #next-post-container:empty,
#prev-post-container.empty-nav, #next-post-container.empty-nav {
    visibility: hidden; pointer-events: none;
}

/* =========================================
   20. Navigation
   ========================================= */
.hp-nav-link {
    font-size: 11px !important;
    color: #6aaa88 !important;
    letter-spacing: 1.5px;
}
.hp-nav-link:hover { color: #278a5a !important; }

/* List header */
#list-header h2 { font-size: 22px !important; }

/* Search overlay */
#search-overlay input { font-size: 24px !important; }

/* Tailwind accent 색상 오버라이드 */
.text-accent               { color: #1e7048 !important; }
.bg-accent                 { background-color: #1e7048 !important; }
.hover\:text-accent:hover  { color: #278a5a !important; }
.text-accentBlue           { color: #2a5888 !important; }
.border-accent\/40         { border-color: rgba(30,112,72,0.4) !important; }

/* =========================================
   21. Magic Trail
   ========================================= */
.magic-particle {
    position: fixed;
    pointer-events: none;
    z-index: 999999;
    transform: translate(-50%, -50%);
    user-select: none;
    will-change: transform, opacity;
}
.magic-particle.spark {
    color: #4dd4a5;
    text-shadow: 0 0 4px #4dd4a5, 0 0 8px #4dd4a5, 0 0 16px rgba(77,212,165,.8);
}
.magic-particle.silver {
    color: #dbeafe;
    text-shadow: 0 0 4px #dbeafe, 0 0 8px rgba(219,234,254,.9);
}