/* --- 스니펫 ID: 2611 | 다크 모드 - 클로드 버전 V2 - CSS 7 모바일 toc --- */
/* =====================================================

   BLOCKSY MANUAL DARK MODE 4.1

   CSS 변수는 render-css.php 가 wp_head 인라인으로 출력

===================================================== */

/* =====================================================

GLOBAL

===================================================== */

body.dark-theme{

background:var(--bg-main) !important;

color:var(--text-main) !important;

}

/* =====================================================

TITLE / META

===================================================== */

body.dark-theme .page-title,

body.dark-theme .wp-element-caption{

color:var(--text-main) !important;

}

/* entry-meta 기본 */

body.dark-theme .entry-meta{

color:var(--text-muted) !important;

}

/* 글쓴이 */

body.dark-theme .entry-meta .author,

body.dark-theme .entry-meta .vcard,

body.dark-theme .entry-meta .entry-author,

body.dark-theme .entry-meta [class*="author"] a,

body.dark-theme .entry-meta .ct-meta-element--author,

body.dark-theme .entry-meta .ct-meta-element--author a{

color:var(--meta-author) !important;

}

/* 날짜 */

body.dark-theme .entry-meta .posted-on,

body.dark-theme .entry-meta time,

body.dark-theme .entry-meta .ct-meta-element--date,

body.dark-theme .entry-meta .ct-meta-element--date a{

color:var(--meta-date) !important;

}

/* 메타 구분자 · 아이콘 */

body.dark-theme .entry-meta .ct-meta-separator,

body.dark-theme .entry-meta svg{

color:var(--text-muted) !important;

opacity:0.5;

}

/* =====================================================

POST CARD

===================================================== */

body.dark-theme article.entry-card{

background:var(--bg-panel) !important;

border:1px solid var(--border-main) !important;

}

body.dark-theme .entry-title a{

color:var(--text-main) !important;

}

body.dark-theme .entry-excerpt{

color:var(--text-soft) !important;

}

/* =====================================================

CONTENT — 헤딩

===================================================== */

body.dark-theme .entry-content h2{

background:var(--h2-ribbon) !important;

color:var(--text-h2) !important;

}

body.dark-theme .entry-content h3{

color:var(--text-h3) !important;

}

body.dark-theme .entry-content h4{

color:var(--text-h4) !important;

}

body.dark-theme .entry-content h5,

body.dark-theme .entry-content h6{

color:var(--text-h5-h6) !important;

}

/* =====================================================

LINKS

===================================================== */

body.dark-theme a{

color:var(--link);

text-decoration:none;

}

body.dark-theme a:hover{

color:var(--link-hover);

}

body.dark-theme a:visited{

color:var(--link-visited);

}

body.dark-theme .entry-content a{

color:var(--link-entry);

border-bottom:1px solid var(--link-underline);

}

body.dark-theme .entry-content a:hover{

color:var(--link-entry-hover);

border-bottom:1px solid var(--link-underline-hover);

}

/* =====================================================

CARD CATEGORY LABEL

===================================================== */

/* 공통 기본 */

body.dark-theme .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a,

body.dark-theme .entry-meta .cats a,

body.dark-theme .entry-categories a{

font-weight:600;

text-decoration:none !important;

border-bottom:none !important;

color:var(--text-muted) !important;

}

/* freetalk */

body.dark-theme .cat-links a[href*="/freetalk/"],

body.dark-theme article.category-freetalk .cat-links a,

body.dark-theme.category-freetalk .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/freetalk/"]{

color:var(--cat-freetalk) !important;

}

/* news */

body.dark-theme .cat-links a[href*="/news/"],

body.dark-theme article.category-news .cat-links a,

body.dark-theme.category-news .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/news/"]{

color:var(--cat-news) !important;

}

/* others */

body.dark-theme .cat-links a[href*="/others/"],

body.dark-theme article.category-others .cat-links a,

body.dark-theme.category-others .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/others/"]{

color:var(--cat-others) !important;

}

/* photo */

body.dark-theme .cat-links a[href*="/category/photo/"],

body.dark-theme article.category-photo .cat-links a,

body.dark-theme.category-photo .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/category/photo/"]{

color:var(--cat-photo) !important;

}

/* roadbike */

body.dark-theme .cat-links a[href*="/category/roadbike/"],

body.dark-theme article.category-roadbike .cat-links a,

body.dark-theme.category-roadbike .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/roadbike/"]{

color:var(--cat-roadbike) !important;

}

/* uncategorized */

body.dark-theme .cat-links a[href*="/uncategorized/"],

body.dark-theme article.category-uncategorized .cat-links a,

body.dark-theme.category-uncategorized .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a[href*="/uncategorized/"]{

color:var(--cat-uncategorized) !important;

}

/* =====================================================

TABLE

===================================================== */

body.dark-theme table{

background:var(--bg-panel);

border-color:var(--border-main);

}

body.dark-theme th,

body.dark-theme td{

border-color:var(--border-main);

color:var(--text-main);

}

/* =====================================================

BLOCKQUOTE

===================================================== */

body.dark-theme blockquote{

background:var(--bg-panel);

border-left:4px solid var(--border-quote);

color:var(--text-soft);

}

/* =====================================================

CODE

===================================================== */

body.dark-theme pre,

body.dark-theme code{

background:var(--bg-panel);

color:var(--text-code);

}

/* =====================================================

COMMENT

===================================================== */

body.dark-theme .comment-body{

background:var(--bg-panel);

border:1px solid var(--border-main);

}

/* =====================================================

BUTTON

===================================================== */

body.dark-theme .wp-block-button__link{

background:var(--bg-soft);

border:1px solid var(--border-soft);

color:var(--text-main);

}

body.dark-theme .wp-block-button__link:hover{

background:var(--bg-hover);

}

/* =====================================================

FORM

===================================================== */

body.dark-theme input,

body.dark-theme textarea,

body.dark-theme select{

background:var(--bg-panel);

color:var(--text-main);

border:1px solid var(--border-main);

}

body.dark-theme ::placeholder{

color:var(--text-muted);

}

/* =====================================================

IMAGE DIM

===================================================== */

body.dark-theme .entry-content img,

body.dark-theme .entry-content video{

filter:brightness(.75) grayscale(var(--img-grayscale, 0));

transition:.25s;

}

body.dark-theme .entry-content img:hover{

filter:brightness(1) grayscale(var(--img-grayscale, 0));

}

body.dark-theme .entry-card img{

filter:grayscale(var(--img-grayscale, 0)) !important;

}

/* =====================================================

HEADER

===================================================== */

body.dark-theme #header [data-row]{

background:var(--bg-main) !important;

border-bottom:1px solid var(--border-main);

}

body.dark-theme .site-title a{

color:var(--text-main);

}

body.dark-theme #header .menu a{

color:var(--text-main);

}

body.dark-theme #header .menu a:hover{

color:var(--link-entry);

}

/* =====================================================

DROPDOWN MENU

===================================================== */

body.dark-theme .sub-menu{

background:var(--bg-panel);

border:1px solid var(--border-main);

}

body.dark-theme .sub-menu a:hover{

background:var(--bg-submenu-hover);

}

/* =====================================================

MOBILE MENU

===================================================== */

body.dark-theme .ct-mobile-menu{

background:var(--bg-main);

}

body.dark-theme .ct-mobile-menu a{

color:var(--text-main);

}

/* =====================================================

SIDEBAR PANEL

===================================================== */

body.dark-theme .sidebar-panel{

background:var(--bg-panel);

color:var(--text-soft);

}

/* =====================================================

HOME BUTTON (헤더 영역)

===================================================== */

body.dark-theme .floating-home-btn{

background:var(--bg-soft);

border:1px solid var(--border-divider);

border-radius:12px;

}

body.dark-theme .floating-home-btn:hover{

background:var(--bg-hover);

}

body.dark-theme .floating-home-btn span,

body.dark-theme .home-icon{

color:var(--text-main);

}

/* =====================================================

CLOCK

===================================================== */

body.dark-theme .fpc-time{

color:var(--text-main);

}

/* =====================================================

READING TIME

===================================================== */

body.dark-theme .vault-reading-time{

background:rgba(255,255,255,0.05) !important;

border-left-color:var(--moon) !important;

color:var(--text-muted) !important;

box-shadow:none !important;

}

body.dark-theme .vault-reading-time svg{

color:var(--moon) !important;

}

body.dark-theme .vault-reading-time .time-highlight{

color:var(--link-entry) !important;

}

/* =====================================================

SEGMENT MENU

===================================================== */

body.dark-theme .segment-menu-wrapper{

background:var(--bg-main) !important;

}

body.dark-theme .segment-menu{

background:var(--bg-soft) !important;

}

body.dark-theme .segment-menu a{

color:var(--text-main) !important;

border-color:transparent !important;

}

body.dark-theme .segment-menu a:hover{

background:var(--bg-hover) !important;

border-color:var(--border-main) !important;

}

body.dark-theme .segment-menu a.active{

background:var(--text-main) !important;

color:var(--bg-main) !important;

border-color:var(--text-main) !important;

}

/* =====================================================

   FTP TOGGLE SYSTEM (ftp-track & ftp-handle)

   ===================================================== */

/* 1. 기본 트랙 스타일 (라이트 모드) */

.ftp-track {

    background: #e9e9ea !important;

    border: 1px solid rgba(0,0,0,0.05);

    transition: all .35s ease;

}

.ftp-handle {

    background: #ffffff !important;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

    transition: all .35s cubic-bezier(0.4, 0, 0.2, 1);

}

/* 2. 다크 모드 활성화 시 (배경색 및 핸들 반전) */

body.dark-theme .ftp-track {

    /* 사이드바 패널보다 약간 어두운 톤으로 트랙 구성 */

    background: rgba(0, 0, 0, 0.3) !important;

    border: 1px solid var(--border-main) !important;

}

body.dark-theme .ftp-handle {

    /* 핸들을 밝은 아이보리/화이트 계열로 유지하여 가시성 확보 */

    background: var(--text-main) !important;

    box-shadow: 0 2px 6px rgba(0,0,0,0.5) !important;

}

/* 3. 토글이 ON(Checked) 상태일 때의 배경색 (선택 사항) */

/* 만약 체크 시 색상이 변하는 로직이 있다면 아래 변수를 활용하세요 */

body.dark-theme .ftp-track.is-checked {

    background: var(--link-entry) !important;

}

/* 4. 호버 및 글로우 효과 연동 */

body.dark-theme .ftp-track:hover {

    box-shadow: 0 0 10px var(--moon-glow) !important;

    border-color: var(--moon) !important;

}

/* =====================================================

   SIDEBAR PANEL - TOGGLE OUTER BOX FIX

   ===================================================== */

/* 1. 토글 버튼을 감싸는 전체 트랙(배경박스) 수정 */

body.dark-theme .ct-toggle-switch .ct-control-track {

    /* 기존 라이트모드용 회색을 다크모드 패널보다 살짝 밝은/어두운 톤으로 변경 */

    background: rgba(255, 255, 255, 0.1) !important; 

    border: 1px solid var(--border-main) !important;

}

/* 2. 토글이 ON 상태일 때의 외부 박스 배경 */

body.dark-theme .ct-toggle-switch input:checked + .ct-control-track {

    /* 활성화 시 포인트 컬러 적용 (아이보리 텍스트와 대비) */

    background: var(--link-entry) !important; 

    border-color: var(--link-entry) !important;

}

/* 3. (추가 확인) 만약 더 바깥쪽의 감싸는 div가 있다면 */

body.dark-theme .ct-control-type-toggle,

body.dark-theme [data-id*="toggle"] {

    background: transparent !important; /* 외부 박스는 배경을 투명하게 하여 패널색을 따름 */

}

/* 4. 호버 시 외부 박스 반응 */

body.dark-theme .ct-toggle-switch:hover .ct-control-track {

    background: rgba(255, 255, 255, 0.15) !important;

}

/* =====================================================

TO TOP 버튼

===================================================== */

body.dark-theme .ct-back-to-top,

body.dark-theme [class*="to-top"],

body.dark-theme [class*="totop"],

body.dark-theme [class*="back-to-top"]{

background:var(--totop-bg) !important;

border:1px solid var(--border-main) !important;

color:var(--totop-color) !important;

}

body.dark-theme .ct-back-to-top:hover,

body.dark-theme [class*="to-top"]:hover,

body.dark-theme [class*="totop"]:hover,

body.dark-theme [class*="back-to-top"]:hover{

background:var(--totop-hover-bg) !important;

color:var(--text-main) !important;

}

body.dark-theme .ct-back-to-top svg,

body.dark-theme [class*="to-top"] svg,

body.dark-theme [class*="totop"] svg{

color:var(--totop-color) !important;

}

/* =====================================================

SMOOTH TRANSITION

===================================================== */

body,

body *{

transition:

background-color .35s ease,

color .35s ease,

border-color .35s ease,

box-shadow .35s ease;

}

/* =====================================================

FLOATING SIDE PANELS (TOC / News / Clock)

===================================================== */

/* 패널 배경 */

body.dark-theme .floating-title-inner{

background:var(--bg-panel) !important;

border-color:var(--border-main) !important;

}

/* 패널 제목 */

body.dark-theme .floating-title-inner .f-title{

color:var(--text-main) !important;

}

/* 패널 메타 기본 */

body.dark-theme .floating-title-inner .entry-meta{

color:var(--text-muted) !important;

}

/* 패널 메타 — 글쓴이 */

body.dark-theme .floating-title-inner .entry-meta .author,

body.dark-theme .floating-title-inner .entry-meta .vcard,

body.dark-theme .floating-title-inner .entry-meta [class*="author"] a,

body.dark-theme .floating-title-inner .entry-meta .ct-meta-element--author,

body.dark-theme .floating-title-inner .entry-meta .ct-meta-element--author a{

color:var(--meta-author) !important;

}

/* 패널 메타 — 날짜 */

body.dark-theme .floating-title-inner .entry-meta .posted-on,

body.dark-theme .floating-title-inner .entry-meta time,

body.dark-theme .floating-title-inner .entry-meta .ct-meta-element--date,

body.dark-theme .floating-title-inner .entry-meta .ct-meta-element--date a{

color:var(--meta-date) !important;

}

/* 패널 메타 — 카테고리 */

body.dark-theme .floating-title-inner .entry-meta .cat-links a,

body.dark-theme .floating-title-inner .entry-meta .cats a,

body.dark-theme .floating-title-inner .entry-meta .ct-meta-element--taxonomies a{

color:var(--cat-roadbike) !important;

}

/* 패널 메타 구분자 */

body.dark-theme .floating-title-inner .entry-meta .ct-meta-separator,

body.dark-theme .floating-title-inner .entry-meta svg{

color:var(--text-muted) !important;

opacity:0.4;

}

/* 진행바 트랙 */

body.dark-theme .floating-progress-bar{

background:var(--bg-soft) !important;

}

/* 진행바 채움 */

body.dark-theme .floating-progress-fill{

background:var(--moon) !important;

}

/* TOC 링크 */

body.dark-theme .floating-toc a{

color:var(--text-soft) !important;

}

body.dark-theme .floating-toc a:hover{

background:var(--bg-hover) !important;

color:var(--text-main) !important;

}

/* TOC 활성 링크 */

body.dark-theme .floating-toc a.active{

background:var(--h2-ribbon) !important;

color:var(--text-main) !important;

}

/* 뉴스 리스트 */

body.dark-theme .floating-news-list a{

color:var(--text-soft) !important;

}

body.dark-theme .floating-news-list a:hover{

color:var(--link-entry) !important;

}

/* 홈버튼 구분선 */

body.dark-theme .floating-home-wrapper{

border-top-color:var(--border-main) !important;

}

/* 사이드패널 홈버튼 배경 */

body.dark-theme .floating-home-btn{

background:var(--bg-soft) !important;

border:1px solid var(--border-divider) !important;

}

body.dark-theme .floating-home-btn:hover{

background:var(--h2-ribbon) !important;

}

/* 사이드패널 HOME 글자 */

body.dark-theme .floating-home-btn,

body.dark-theme .floating-home-btn span,

body.dark-theme .floating-home-btn .home-text,

body.dark-theme .floating-home-btn .home-label,

body.dark-theme .floating-home-btn svg,

body.dark-theme .floating-home-btn .home-icon{

color:var(--home-label) !important;

}

body.dark-theme .floating-home-btn:hover,

body.dark-theme .floating-home-btn:hover span,

body.dark-theme .floating-home-btn:hover .home-text,

body.dark-theme .floating-home-btn:hover svg{

color:var(--link-entry) !important;

}

body.dark-theme .floating-title-inner.fp-clock,

body.dark-theme .clock-panel .floating-title-inner{

background:transparent !important;

border:none !important;

}

/* =====================================================

   MOBILE POPUP TOC - DARK THEME

===================================================== */

@media (max-width: 1200px) {

    body.dark-theme #mobile-toc-btn{

    background:var(--bg-panel) !important;

    color:var(--text-main) !important;

    border:1px solid var(--border-main) !important;

    box-shadow:0 4px 15px rgba(0,0,0,0.4) !important;

    }

    body.dark-theme #mobile-toc-btn:hover,

    body.dark-theme #mobile-toc-btn:active{

    background:var(--border-main) !important;

    color:var(--moon) !important;

    }

    body.dark-theme #mobile-toc-overlay{

    background:rgba(0,0,0,0.85) !important;

    }

    body.dark-theme .mobile-toc-content{

    background:var(--bg-panel) !important;

    border:1px solid var(--border-main) !important;

    box-shadow:0 10px 30px rgba(0,0,0,0.5);

    }

    body.dark-theme .mobile-toc-content h3{

    color:var(--text-main) !important;

    border-bottom:2px solid var(--link-entry) !important;

    }

    body.dark-theme #close-toc{

    color:var(--text-muted) !important;

    }

    body.dark-theme .mobile-toc-list a{

    color:var(--text-soft) !important;

    }

    body.dark-theme .mobile-toc-list a:hover{

    color:var(--link-entry) !important;

    }

}

/* =====================================================

각주 팝업 (vault-fn-popup)

===================================================== */

body.dark-theme .vault-fn-popup,

body.dark-theme [class*="fn-popup"],

body.dark-theme [class*="footnote-popup"]{

background:var(--fn-popup-bg) !important;

border:1px solid var(--fn-popup-border) !important;

color:var(--fn-popup-text) !important;

}

body.dark-theme .vault-fn-popup *,

body.dark-theme [class*="fn-popup"] *{

color:var(--fn-popup-text) !important;

}

/* =====================================================

FOOTER

===================================================== */

body.dark-theme footer#footer,

body.dark-theme footer#footer [data-row]{

background:var(--bg-main) !important;

border-top:1px solid var(--border-main);

}

body.dark-theme .ct-footer-copyright,

body.dark-theme .ct-footer-copyright p{

color:var(--text-muted) !important;

}

body.dark-theme .thirdvault-footer,

body.dark-theme .thirdvault-footer .brand,

body.dark-theme .thirdvault-footer .year,

body.dark-theme .thirdvault-footer .break{

color:var(--text-muted) !important;

}

/* =====================================================

PEEK SEARCH TAG

===================================================== */

body.dark-theme .tag-trigger{

background:var(--h2-ribbon) !important;

color:var(--text-main) !important;

}

body.dark-theme .tag-content{

background:var(--bg-panel) !important;

}

body.dark-theme .vault-peek-tag.is-open .tag-trigger{

background:var(--bg-panel) !important;

color:var(--moon) !important;

}

body.dark-theme .peek-search-form{

border-bottom-color:var(--moon) !important;

}

body.dark-theme .peek-search-input{

color:var(--text-main) !important;

background:transparent !important;

}

body.dark-theme .peek-search-submit{

color:var(--moon) !important;

}

/* =====================================================

   SENTENCE FLOW (p1 ~ p8) - THEME ADAPTATION

   ===================================================== */

/* 1. 기본 스타일 (라이트 모드 기준) */

.sentence-flow-wrapper {

    width: 100%;

    max-width: 1000px;

    margin: 100px auto;

    padding: 40px 20px;

    display: flex;

    flex-direction: column;

    gap: 45px;

    position: relative;

    overflow: hidden;

}

.flow-item {

    font-size: 28px;

    color: #111 !important; /* 라이트모드 검정 */

    line-height: 1.2;

    font-weight: 800;

    white-space: nowrap;

    cursor: default;

    position: relative;

    letter-spacing: -0.03em;

    opacity: 0.9;

    animation: fluidMove 8s ease-in-out infinite;

}

/* 라이트모드 강조색 및 개별 설정 */

.flow-item strong { color: #ff4b82; font-weight: 900; }

.p7 { font-size: 34px; color: #000 !important; }

.p5 { font-size: 30px; }

.p8 { font-size: 32px; }

/* 2. 다크 모드 대응 (기존 CSS 변수 활용) */

body.dark-theme .flow-item {

    color: var(--text-main) !important; /* 아이보리/밝은색 계열 */

    opacity: 1;

}

body.dark-theme .flow-item strong {

    color: var(--link-entry) !important; /* 다크모드 포인트 컬러 */

}

body.dark-theme .flow-item:hover {

    color: var(--moon) !important; /* 호버 시 달빛 색상 포인트 */

    text-shadow: 0 10px 20px rgba(0,0,0,0.3);

}

/* ㅡㅡㅡㅡ 애니메이션 및 배치 (기존 로직 유지) ㅡㅡㅡㅡ */

@keyframes fluidMove {

    0% { transform: translate(0, 0) rotate(0deg); }

    33% { transform: translate(15px, -5px) rotate(0.5deg); }

    66% { transform: translate(-10px, 8px) rotate(-0.5deg); }

    100% { transform: translate(0, 0) rotate(0deg); }

}

.p1 { align-self: flex-start; animation-duration: 7s;  margin-left: 5%; }

.p2 { align-self: center;     animation-duration: 9s;  animation-delay: -1s; }

.p3 { align-self: flex-end;   animation-duration: 8s;  margin-right: 5%; }

.p4 { align-self: flex-start; animation-duration: 10s; margin-left: 10%; }

.p5 { align-self: center;     animation-duration: 11s; animation-delay: -2s; }

.p6 { align-self: flex-end;   animation-duration: 9.5s; margin-right: 12%; }

.p7 { align-self: flex-start; animation-duration: 12s; margin-left: 3%; }

.p8 { align-self: center;     animation-duration: 8.5s; animation-delay: -0.5s; }

/* 모바일 대응 */

@media (max-width: 768px) {

    .sentence-flow-wrapper { gap: 35px; }

    .flow-item {

        font-size: 20px;

        white-space: normal;

        text-align: center;

        align-self: center !important;

        margin: 0 !important;

    }

    .p5, .p7, .p8 { font-size: 24px; }

}

/* =====================================================

   VAULT LANDING CONTAINER

   ===================================================== */

/* 라이트모드: 검정 고정 */

body:not(.dark-theme) .vault-landing-container {

    background: #0f0f10 !important;

}

/* 다크모드: 테마 배경 따라가기 */

body.dark-theme .vault-landing-container {

    background: var(--bg-main) !important;

}

/* 구분선 */

.vault-landing-container section {

    border-top: 1px solid var(--border-main) !important;

}

.update-info-section {

    background: transparent !important;

    border-top: 1px solid var(--border-main) !important;

}

/* =====================================================

TOGGLE ICON

===================================================== */

.icon-sun{

color:var(--sun);

opacity:.6;

}

.icon-moon{

color:var(--moon);

opacity:0.5;

}

body.dark-theme .icon-sun{

opacity:0.5;

}

body.dark-theme .icon-moon{

opacity:.8;

color:var(--moon);

}

body.dark-theme .apple-toggle{

background:var(--bg-panel);

box-shadow:

inset 0 1px 3px rgba(0,0,0,0.6),

0 0 8px var(--moon-glow);

}

body.dark-theme .apple-toggle::after{

left:31px;

background:var(--bg-soft);

box-shadow:0 2px 6px rgba(0,0,0,0.6);

}

.apple-toggle:hover{

box-shadow:

inset 0 1px 3px rgba(0,0,0,.2),

0 0 10px var(--sun-glow);

}

body.dark-theme .apple-toggle:hover{

box-shadow:

inset 0 1px 3px rgba(0,0,0,.6),

0 0 12px var(--moon-glow);

}

/* ------------------------------------------------

   나머지 배경/핸들 로직 유지

------------------------------------------------ */

.apple-toggle {

    width: 60px;

    height: 32px;

    border-radius: 20px;

    background: #e9e9ea !important;

    position: relative;

    cursor: pointer;

    transition: all .35s ease;

}

body.dark-theme .apple-toggle {

    background: var(--bg-panel) !important;

}

.apple-toggle::after {

    content: "";

    position: absolute;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    top: 3px;

    left: 3px;

    background: white !important;

    transition: .35s cubic-bezier(0.4, 0, 0.2, 1);

    z-index: 2;

}

body.dark-theme .apple-toggle::after {

    left: 31px;

    background: var(--text-main) !important;

}

/* =====================================================

   CATEGORY COLOR SYNC (itthings 추가 버전)

   ===================================================== */

/* 1. 카테고리 링크 공통: 방문 후에도 색상 유지 */

body.dark-theme .cat-links a,

body.dark-theme .ct-meta-element--taxonomies a,

body.dark-theme .entry-meta .cats a,

body.dark-theme .entry-categories a,

body.dark-theme a[href*="/category/"] {

    color: inherit !important;

    -webkit-text-fill-color: initial !important; 

    text-decoration: none !important;

    border-bottom: none !important;

    font-weight: 600;

}

/* 2. 각 카테고리별 고유 색상 재정의 */

/* itthings: 테크니컬한 느낌의 비비드 시안 컬러 적용 */

body.dark-theme a[href*="/itthings/"]      { color: var(--cat-itthings) !important; }

body.dark-theme a[href*="/freetalk/"]      { color: var(--cat-freetalk) !important; }

body.dark-theme a[href*="/news/"]          { color: var(--cat-news) !important; }

body.dark-theme a[href*="/others/"]        { color: var(--cat-others) !important; }

body.dark-theme a[href*="/photo/"]         { color: var(--cat-photo) !important; }

body.dark-theme a[href*="/roadbike/"]      { color: var(--cat-roadbike) !important; }

body.dark-theme a[href*="/uncategorized/"] { color: var(--cat-uncategorized) !important; }

/* 3. 방문한 상태(visited)에서도 개별 색상 강제 유지 */

body.dark-theme a[href*="/itthings/"]:visited      { color: var(--cat-itthings) !important; }

body.dark-theme a[href*="/freetalk/"]:visited      { color: var(--cat-freetalk) !important; }

body.dark-theme a[href*="/news/"]:visited          { color: var(--cat-news) !important; }

body.dark-theme a[href*="/others/"]:visited        { color: var(--cat-others) !important; }

body.dark-theme a[href*="/photo/"]:visited         { color: var(--cat-photo) !important; }

body.dark-theme a[href*="/roadbike/"]:visited      { color: var(--cat-roadbike) !important; }

body.dark-theme a[href*="/uncategorized/"]:visited { color: var(--cat-uncategorized) !important; }

/* 4. 호버 시 달빛 색상 포인트 */

body.dark-theme a[href*="/category/"]:hover {

    color: var(--moon) !important;

    opacity: 1 !important;

}


/* 카테고리 메뉴 호버 — 개별 커스텀 색상 적용 */
/* 헤더 대메뉴 및 드롭다운 동시 대응 */
body.dark-theme .menu-item-category > a:hover,
body.dark-theme .menu-item-category > .ct-menu-link:hover,
body.dark-theme .menu-item-category .ct-menu-link:hover span,
body.dark-theme .sub-menu .menu-item-category a:hover {
    color: var(--cat-menu-hover) !important;
    -webkit-text-fill-color: var(--cat-menu-hover) !important;
}

/* 추가: 배경이 흰색으로 나오는 문제 대응 (Blocksy 특화 선택자) */
body.dark-theme,
body.dark-theme #main,
body.dark-theme .ct-container,
body.dark-theme #main-container,
body.dark-theme .ct-main-container,
body.dark-theme .ct-section,
body.dark-theme .site-main,
body.dark-theme #content,
body.dark-theme [data-prefix="ct"] {
    background-color: var(--bg-main) !important;
    background: var(--bg-main) !important;
}

/* 포스트 카드 배경 강화 */
body.dark-theme article.entry-card,
body.dark-theme .ct-entry-card {
    background-color: var(--bg-panel) !important;
}

/* MOBILE MENU TRIGGER FIX */
body.dark-theme .ct-header-trigger {
    filter: invert(1);
}