/* =================================================================
   2. 데스크톱 반응형 스타일 (769px 이상)
================================================================= */
@media (min-width: 769px) {
    /* --- START: [최종 수정] 웹 브레드크럼 정렬 문제 해결 --- */
    /* 1. Flex 컨테이너 설정 */
    .gp-top-meta-bar {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        gap: 15px !important;
    }

    /* 2. Flex 아이템 순서 및 정렬 제어 */
    .gp-top-meta-bar .left-buttons {
        order: 1; /* 1번: 가장 왼쪽에 위치 */
        flex-shrink: 0;
        justify-self: flex-start !important; /* 왼쪽 정렬 명시 */
    }
    .gp-top-meta-bar .gp-post-category {
        order: 2; /* 2번: 중앙에 위치 */
        flex-grow: 1; /* 남는 공간 모두 차지 */
        min-width: 0;
        display: flex;
        justify-content: center; /* 내부 텍스트 중앙 정렬 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .gp-top-meta-bar .gp-language-switcher {
        order: 3; /* 3번: 가장 오른쪽에 위치 */
        flex-shrink: 0;
    }
    /* --- END: 데스크톱 문제 해결 --- */

    li.pll-parent-menu-item { width: auto; }
    li.pll-parent-menu-item > a,
    li.pll-parent-menu-item > a:link,
    li.pll-parent-menu-item > a:visited {
        justify-content: center !important;
        padding: 8px 16px !important;
        border: 1px solid var(--color-border) !important;
        border-radius: 50px !important;
    }
    li.pll-parent-menu-item > a:hover {
        background-color: var(--color-background-soft) !important;
        border-color: #D1D5DB !important;
    }
    li.pll-parent-menu-item ul.sub-menu {
        display: block; position: absolute; padding: 6px; top: calc(100% + 8px); left: 50%;
        width: auto; min-width: 200px; background: var(--color-background);
        border: 1px solid var(--color-border); border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); opacity: 0; visibility: hidden;
        pointer-events: none; transform: translateX(-50%) translateY(10px);
    }
    li.pll-parent-menu-item:hover ul.sub-menu {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
    li.pll-parent-menu-item ul.sub-menu li a {
        padding: 10px 14px !important;
        border-radius: 8px !important;
    }
    li.pll-parent-menu-item ul.sub-menu li a:hover {
        background-color: #F3F4F6 !important;
    }

    /* 데스크톱 들여쓰기 */
    .entry-content p { padding-left: 1.5em; }
    .entry-content h3, .entry-content h3 ~ p, .entry-content h3 ~ ul, .entry-content h3 ~ ol { padding-left: 1.5em !important; }
    .entry-content h4, .entry-content h4 ~ p, .entry-content h4 ~ ul, .entry-content h4 ~ ol { padding-left: 3em !important; }
    .entry-content h2 ~ p, .entry-content h2 ~ ul, .entry-content h2 ~ ol { padding-left: 40px !important; }
}


/* =================================================================
   3. 모바일 반응형 스타일 (768px 이하)
================================================================= */
@media (max-width: 768px) {
    /* --- 기본 레이아웃 및 배경 설정 --- */
    body { background-color: var(--color-background) !important; }
    #page { padding-top: 75px !important; }
    .site-content { padding: 20px 15px !important; box-sizing: border-box !important; }
    #primary, main#main { padding: 0 !important; margin: 0 !important; }
    article.post, .type-post, html body.single article.post { border: none !important; box-shadow: none !important; border-radius: 0 !important; }

    /* --- START: [최종 수정] 모바일 브레드크럼 정렬 및 잘림 문제 해결 --- */
    .gp-top-meta-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important; /* 양쪽 끝으로 정렬 */
        align-items: center !important;
        gap: 15px !important;
        height: auto !important;
        min-height: unset !important;
    }
    .gp-top-meta-bar .left-buttons {
        justify-self: flex-start !important;
    }
    .gp-top-meta-bar .gp-post-category {
        order: -1; /* 가장 먼저 배치되도록 하여 윗줄로 올림 */
        width: 100%; /* 윗줄 전체 너비 차지 */
    }
    /* URL 버튼과 언어 선택기는 자동으로 아랫줄의 왼쪽/오른쪽에 배치됨 */
    
    body.single .entry-header {
        height: auto !important;
        overflow: visible !important;
    }
    /* --- END: 모바일 문제 해결 --- */

    /* --- 회색 세로줄 문제 해결 (풀 블리드 효과 제거 유지) --- */
    body.single .entry-title, body.single .entry-header .entry-title, body.single h1.entry-title {
        background-color: var(--bg-tertiary) !important; color: var(--text-heading) !important;
        text-align: center !important; width: 100% !important; margin: 0 0 20px 0 !important;
        padding: 20px !important; border-radius: 12px !important; box-sizing: border-box !important;
    }
    body.single .featured-image, .entry-content .wp-block-image, .entry-content figure {
        width: 100% !important; margin: 0 !important; padding: 0 !important;
        border-radius: 0 !important; box-sizing: border-box !important;
    }

    /* --- 기타 모바일 스타일 --- */
    .main-navigation li.pll-parent-menu-item > a { padding: 15px 20px !important; font-size: 0 !important; }
    .main-navigation li.pll-parent-menu-item > a::before {
        content: '' !important; 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='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'%3e%3c/circle%3e%3cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'%3e%3c/path%3e%3cpath d='M2 12h20'%3e%3c/path%3e%3c/svg%3e");
        background-repeat: no-repeat !important; background-position: left center; background-size: 20px; width: 20px; height: 20px;
    }
    .main-navigation li.pll-parent-menu-item > a::after {
        content: '' !important; width: 8px; height: 8px; border-style: solid; border-width: 2px 2px 0 0;
        border-color: var(--color-text-body) var(--color-text-body) transparent transparent;
        transform: rotate(135deg); background-image: none !important;
    }

    body:not(.single) .site-main article.post { margin: 0 0 20px 0 !important; padding: 0 10px !important; background: transparent !important; gap: 15px; }
    body:not(.single) .site-main article.post:not(:last-child)::after {
        content: "" !important; display: block !important; width: 80% !important;
        border-bottom: 1px dotted var(--border-primary) !important; margin: 20px auto !important; position: static !important;
    }
    body.single .inside-article { padding: 0 !important; margin: 0 !important; background-color: transparent !important; border: none !important; gap: 15px; }

    /* 모바일 텍스트 및 들여쓰기 초기화 */
    .entry-content, .entry-content p, .entry-content ul, .entry-content ol, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
    .entry-content h2 ~ p, .entry-content h3 ~ p, .entry-content h4 ~ p { padding: 0 !important; text-indent: 0 !important; }

    /* 시리즈 박스 예외 처리 */
    .entry-content .seriesbox ol {
        padding-left: 20px !important;
    }

    .series-nav-left, .series-nav-right, .seriesbox, .seriesbox * {
        text-decoration: none !important;
    }

    .series-nav-left a, .series-nav-right a, .seriesbox a {
        text-decoration: underline !important;
    }

    .entry-content p, .entry-content div, .entry-content li { overflow-wrap: break-word !important; hyphens: auto; text-wrap: pretty; word-break: keep-all !important; line-break: loose !important; }
    .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { text-align: center !important; text-wrap: balance; }

    .floating-buttons-container { right: 15px; bottom: 15px; left: auto; top: auto; transform: none; }
}

@media (max-width: 480px) {
    /* 480px 이하에서 특별히 필요한 스타일 추가 */
}