/*
Theme Name:     Pil Kadence
Template:       kadence
Author:         Pil
Description:    Personal Kadence child theme customized for Pil
Version:        1.0.0
*/

/* 다크 모드: 시스템 설정을 기본값으로 사용하고 버튼 선택을 우선 적용 */
.pil-dark-mode-toggle {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: grid;
    width: 48px;
    height: 48px;
    padding: 0;
    place-items: center;
    color: #ffffff;
    background: #222222;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.24);
    cursor: pointer;
}

.pil-dark-mode-toggle:hover,
.pil-dark-mode-toggle:focus-visible {
    background: #6d3f8c;
    transform: translateY(-2px);
}

.pil-dark-mode-toggle:focus-visible {
    outline: 3px solid #f5a524;
    outline-offset: 3px;
}

.pil-dark-mode-toggle__icon::before {
    content: "☾";
    font-size: 25px;
    line-height: 1;
}

html[data-pil-color-scheme="dark"] {
    color-scheme: dark;
}

html[data-pil-color-scheme="dark"] body,
html[data-pil-color-scheme="dark"] #wrapper,
html[data-pil-color-scheme="dark"] #inner-wrap,
html[data-pil-color-scheme="dark"] .site,
html[data-pil-color-scheme="dark"] .site-main,
html[data-pil-color-scheme="dark"] .content-area,
html[data-pil-color-scheme="dark"] .content-bg,
html[data-pil-color-scheme="dark"] .site-header-row-container-inner {
    color: #e8e8e8;
    background-color: #151719;
}

html[data-pil-color-scheme="dark"] .entry,
html[data-pil-color-scheme="dark"] .widget,
html[data-pil-color-scheme="dark"] input,
html[data-pil-color-scheme="dark"] textarea,
html[data-pil-color-scheme="dark"] select {
    color: #e8e8e8;
    background-color: #202326;
    border-color: #3b4045;
}

html[data-pil-color-scheme="dark"] h1,
html[data-pil-color-scheme="dark"] h2,
html[data-pil-color-scheme="dark"] h3,
html[data-pil-color-scheme="dark"] h4,
html[data-pil-color-scheme="dark"] h5,
html[data-pil-color-scheme="dark"] h6,
html[data-pil-color-scheme="dark"] .site-title,
html[data-pil-color-scheme="dark"] .entry-title,
html[data-pil-color-scheme="dark"] .widget-title {
    color: #f5f5f5;
}

html[data-pil-color-scheme="dark"] a {
    color: #c9a7e0;
}

html[data-pil-color-scheme="dark"] .pil-dark-mode-toggle {
    color: #222222;
    background: #f5a524;
    border-color: rgba(0, 0, 0, 0.2);
}

html[data-pil-color-scheme="dark"] .pil-dark-mode-toggle__icon::before {
    content: "☀";
}

@media (max-width: 782px) {
    .pil-dark-mode-toggle {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .pil-dark-mode-toggle,
    body,
    #wrapper,
    #inner-wrap,
    .site-header-row-container-inner {
        transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }
}
/* =========================================
   블로그 글 제목 커스텀 스타일
   ========================================= */

/* 양쪽 정렬 (글 타입이 post인 경우만) */
.type-post p {
    text-align: justify;
}

/* H2 스타일 */
.single .entry-content h2 {
    margin: 1.15em 0 0.6em 0;
    font-weight: normal;
    position: relative;
    font-size: 25px;
    line-height: 40px;
    background: var(--wp--preset--color--theme-palette-2, #003458);
    border: 1px solid #fff;
    padding: 5px 15px;
    color: white;
    border-radius: 0 10px 0 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    font-family: 'Muli', sans-serif;
}

/* H3 스타일 */
.single .entry-content h3 {
    color: var(--wp--preset--color--theme-palette-2, #003458);
    padding-bottom: 10px;
    text-align: left;
    border-left: 10px solid var(--wp--preset--color--theme-palette-2, #003458);
    padding: 3px 9px;
    margin: 30px 0 20px 0;
    background-color: #FFF;
    border-bottom: 2px solid var(--wp--preset--color--theme-palette-2, #003458);
    font-size: 1.2em;
    font-weight: 700;
}

/* H4 스타일: H3보다 가볍게, 왼쪽 포인트만 강조 */
.single .entry-content h4 {
    /* 색상: H2, H3와 동일한 변수 사용 */
    color: var(--wp--preset--color--theme-palette-2, #003458);
    
    /* 폰트 설정 */
    font-size: 1.1em;   /* H3(1.2em)보다 약간 작게 */
    font-weight: 700;
    font-family: 'Muli', sans-serif;
    line-height: 1.5;
    
    /* 여백 설정 */
    margin: 20px 0 10px 0;
    padding-left: 12px; /* 텍스트와 왼쪽 선 사이 간격 */
    
    /* 핵심 디자인: 왼쪽 선만 깔끔하게 (H3의 절반 두께) */
    border-left: 5px solid var(--wp--preset--color--theme-palette-2, #003458);
}

/* 형광펜 스타일 (투명한 노란색) */
u,
span[style*="text-decoration: underline"] {
    text-decoration: none !important;
    padding: 2px 5px;
    
    /* rgba(R, G, B, 투명도) */
    /* 0.5 숫자를 조절하세요 (0.1은 아주 투명, 1.0은 불투명) */
    background: linear-gradient(to top, rgba(255, 241, 54, 0.7) 30%, transparent 40%);
    
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone; 
}

/* =========================================
   다크 모드 Kadence 구성요소 보정
   ========================================= */

/* 목록을 딱딱한 카드 대신 자연스러운 구분선 형태로 표시 */
html[data-pil-color-scheme="dark"] body.blog .loop-entry,
html[data-pil-color-scheme="dark"] body.archive .loop-entry,
html[data-pil-color-scheme="dark"] body.search-results .loop-entry {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #2b3035;
    border-radius: 0;
    box-shadow: none;
}

html[data-pil-color-scheme="dark"] body.blog .loop-entry .entry-content-wrap,
html[data-pil-color-scheme="dark"] body.archive .loop-entry .entry-content-wrap,
html[data-pil-color-scheme="dark"] body.search-results .loop-entry .entry-content-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-pil-color-scheme="dark"] body.blog .loop-entry:last-child,
html[data-pil-color-scheme="dark"] body.archive .loop-entry:last-child,
html[data-pil-color-scheme="dark"] body.search-results .loop-entry:last-child {
    border-bottom-color: transparent;
}

/* 개별 글 상단 H1 히어로 영역의 흰 배경 제거 */
html[data-pil-color-scheme="dark"] #inner-wrap .entry-hero-container-inner,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-hero,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-header,
html[data-pil-color-scheme="dark"] #inner-wrap .post-archive-hero-section {
    color: #e8e8e8;
    background-color: #151719;
    background-image: none;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-hero .entry-title,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-header .entry-title {
    color: #f5f5f5;
}

/* 기존 제목 스타일에서 지정한 흰 배경을 다크모드에서 보정 */
html[data-pil-color-scheme="dark"] .single .entry-content h3 {
    color: #c9a7e0;
    background-color: #202326;
    border-left-color: #6d3f8c;
    border-bottom-color: #6d3f8c;
}

html[data-pil-color-scheme="dark"] .single .entry-content h4 {
    color: #c9a7e0;
    border-left-color: #6d3f8c;
}

/* 검색 입력창과 버튼의 배경을 하나로 연결 */
html[data-pil-color-scheme="dark"] .search-form,
html[data-pil-color-scheme="dark"] .search-form .search-field,
html[data-pil-color-scheme="dark"] .search-form .search-submit {
    color: #e8e8e8;
    background-color: #202326;
    border-color: #3b4045;
}

/* 관련 글 슬라이더 전체의 밝은 배경 제거 */
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-inner,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-inner-content,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-carousel,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .splide__track,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .splide__list {
    color: #e8e8e8;
    background-color: #151719;
    background-image: none;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related {
    border-top: 1px solid #2b3035;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-title,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-title h2,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related-title h3 {
    color: #f5f5f5;
    background: transparent;
    border: 0;
    box-shadow: none;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .loop-entry,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-content-wrap {
    color: #e8e8e8;
    background-color: #202326;
    border: 0;
    box-shadow: none;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-title,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-title a {
    color: #c9a7e0;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .splide__arrow {
    color: #f5f5f5;
    background-color: #0f1113;
    border-color: #3b4045;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .splide__pagination__page {
    background-color: #596168;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .splide__pagination__page.is-active {
    background-color: #c9a7e0;
}

/* 사이드바 위젯을 본문 배경과 자연스럽게 연결 */
html[data-pil-color-scheme="dark"] #secondary .widget,
html[data-pil-color-scheme="dark"] .widget-area .widget {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Kadence 검색 폼의 흰 입력 영역과 버튼을 강제로 다크 색상으로 통일 */
html[data-pil-color-scheme="dark"] #secondary form.search-form,
html[data-pil-color-scheme="dark"] #secondary form.search-form label,
html[data-pil-color-scheme="dark"] #secondary form.search-form input.search-field,
html[data-pil-color-scheme="dark"] #secondary form.search-form input[type="search"],
html[data-pil-color-scheme="dark"] #secondary form.search-form button.search-submit,
html[data-pil-color-scheme="dark"] #secondary form.search-form input.search-submit,
html[data-pil-color-scheme="dark"] .widget-area .wp-block-search__inside-wrapper,
html[data-pil-color-scheme="dark"] .widget-area .wp-block-search__input,
html[data-pil-color-scheme="dark"] .widget-area .wp-block-search__button {
    color: #e8e8e8;
    background: #202326;
    border-color: #596168;
    box-shadow: none;
}

html[data-pil-color-scheme="dark"] #secondary form.search-form button.search-submit:hover,
html[data-pil-color-scheme="dark"] #secondary form.search-form input.search-submit:hover,
html[data-pil-color-scheme="dark"] .widget-area .wp-block-search__button:hover {
    color: #ffffff;
    background: #6d3f8c;
}

/* 데스크톱·모바일 주 메뉴의 검은 글자 보정 */
html[data-pil-color-scheme="dark"] .site-header .main-navigation .primary-menu-container > ul > li.menu-item > a,
html[data-pil-color-scheme="dark"] .site-header .header-navigation .header-menu-container > ul > li.menu-item > a,
html[data-pil-color-scheme="dark"] .site-header .header-menu-container ul.menu > li.menu-item > a,
html[data-pil-color-scheme="dark"] .site-header .mobile-navigation ul li a,
html[data-pil-color-scheme="dark"] .site-header .drawer-navigation ul li a {
    color: #e8e8e8 !important;
}

html[data-pil-color-scheme="dark"] .site-header .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
html[data-pil-color-scheme="dark"] .site-header .main-navigation .primary-menu-container > ul > li.current-menu-item > a,
html[data-pil-color-scheme="dark"] .site-header .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a,
html[data-pil-color-scheme="dark"] .site-header .header-navigation .header-menu-container > ul > li.menu-item > a:hover,
html[data-pil-color-scheme="dark"] .site-header .mobile-navigation ul li a:hover,
html[data-pil-color-scheme="dark"] .site-header .drawer-navigation ul li a:hover {
    color: #c9a7e0 !important;
}

/* 관련 글 카드의 안쪽 배경 상자를 제거해 하나의 카드처럼 표시 */
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-content-wrap {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-content-wrap::before,
html[data-pil-color-scheme="dark"] #inner-wrap .entry-related .entry-content-wrap::after {
    background: transparent !important;
    box-shadow: none !important;
}

/* 관련 글 텍스트 영역의 중첩된 칸을 완전히 제거 */
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap *,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-header,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-footer,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-meta,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-title {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap::before,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap::after,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap *::before,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-content-wrap *::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-title,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-title a {
    color: #c9a7e0 !important;
}

html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-meta,
html[data-pil-color-scheme="dark"] body #inner-wrap .entry-related article.loop-entry .entry-meta a {
    color: #e8e8e8 !important;
}