/* Extracted from _layout.php (was inline). Cached by browser → smaller HTML, faster LCP. */

/* 모바일·태블릿에서 사이드바가 상단 가로 스크롤로 변환될 때 (≤1200px) 인기 글 영역 숨김 */
@media (max-width:1200px){.nav-popular{display:none !important}}

/* 로고 클릭 영역을 로고 크기로 제한 (default.css는 display:flex 라 헤더 전체가 hover 영역) */
.header .logo{display:inline-flex}

/* PNG → WebP picture wrapping fix — default.css 의 직계 자식 셀렉터 (> img) 들이
   picture 안의 img 를 못 잡아서 카드 로고가 absolute positioning 을 잃고 영역 밖으로 튀던 문제 */
.rbox > div:nth-child(1) > div:nth-child(1) > picture{
    width:88%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)
}
.rbox > div:nth-child(1) > div:nth-child(1) > picture > img{
    width:100%;height:auto;display:block
}
/* HTML의 width="65" attribute가 모바일에서 height 변경 시 비례 안 돼서
   width:65 / height:55로 찌그러지던 문제. width:auto로 비율 자동 유지. */
.logo > picture > img{height:65px;width:auto}
@media (max-width:720px){.logo > picture > img{height:55px;width:auto}}
@media (max-width:580px){.logo > picture > img{height:50px;width:auto}}
@media (max-width:350px){.logo > picture > img{height:40px;width:auto}}

/* h1 (.data_tit) 크기 축소 */
h1.data_tit{font-size:1.3em;font-weight:600;margin:50px 0 20px;line-height:1.4}
@media (max-width:640px){h1.data_tit{font-size:1.15em;margin:14px 0 10px}}

/* 도입 본문 (body_html) — 14px, 다음 첫 카드 사이 30px 여백 */
.page-body{font-size:14px;line-height:1.7}
.page-body + #data{margin-top:30px}

/* 마지막 카드 하단 여백 */
#data:last-of-type{margin-bottom:50px}

/* 관련 글 블록 */
.related-block{margin:40px 0 50px;padding-top:30px;border-top:1px solid #232323}
.related-title{font-size:1.1em;font-weight:600;margin:0 0 16px;color:#bdc1c6}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.related-grid{grid-template-columns:1fr}}
.related-item{display:block;padding:14px 16px;background:#0c0c0c;border:1px solid #1f1f1f;border-radius:8px;color:#bdc1c6;text-decoration:none;font-size:14px;transition:all .15s}
.related-item:hover{background:#151515;border-color:#3c4043;color:#fff;transform:translateY(-1px)}

/* 발행일/조회 메타 */
.page-meta{font-size:12px;color:#6f6f6f;margin:-8px 0 24px;letter-spacing:.02em}

/* 헤더 검색박스 */
.header-search{position:absolute;top:50%;right:2%;transform:translateY(-50%);margin:0}
.header-search input{width:220px;padding:6px 12px;border-radius:999px;border:1px solid #2a2a2a;background:#0c0c0c;color:#bdc1c6;font-size:13px;outline:none;transition:all .15s}
.header-search input:focus{border-color:#3c4043;background:#151515;color:#fff;width:280px}
.header-search .search-icon-link{display:none}
@media (max-width:1200px){.header-search{right:3%}.header-search input{width:180px}.header-search input:focus{width:220px}}
@media (max-width:640px){
    .header-search input{display:none}
    .header-search .search-icon-link{
        display:inline-flex;align-items:center;justify-content:center;
        width:36px;height:36px;border-radius:50%;
        background:#0c0c0c;border:1px solid #2a2a2a;
        color:#bdc1c6;text-decoration:none;transition:all .15s
    }
    .header-search .search-icon-link:hover{background:#151515;color:#fff;border-color:#3c4043}
}

/* 검색 결과 */
.search-form{display:flex;gap:8px;margin:10px 0 30px}
.search-form input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid #2a2a2a;background:#0c0c0c;color:#fff;font-size:15px;outline:none}
.search-form input:focus{border-color:#3c4043}
.search-form button{padding:0 18px;border-radius:8px;border:none;background:#303030;color:#fff;font-size:14px;cursor:pointer;font-weight:500}
.search-form button:hover{background:#404040}
.search-list{list-style:none;padding:0;margin:0}
.search-item{display:block;padding:14px 16px;background:#0c0c0c;border:1px solid #1f1f1f;border-radius:8px;color:#bdc1c6;text-decoration:none;margin-bottom:10px;transition:all .15s}
.search-item:hover{background:#151515;border-color:#3c4043}
.search-title{font-size:16px;font-weight:600;color:#deab6a;margin-bottom:4px}
.search-sub{font-size:13px;color:#bdc1c6;margin-bottom:6px}
.search-meta{font-size:11px;color:#6f6f6f}

/* 카테고리 구름태그 */
.cloud-grid{display:flex;flex-wrap:wrap;gap:10px 10px;padding:20px 0 50px;align-items:center;line-height:1.2}
.cloud-item{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;background:#1a1a1a;color:#bdc1c6;text-decoration:none;font-weight:500;transition:all .15s ease;border:1px solid #232323;font-size:13px}
.cloud-item:hover{background:#303030;color:#fff;transform:translateY(-1px)}
.cloud-item.s1{font-size:11px;opacity:.75}
.cloud-item.s2{font-size:12px}
.cloud-item.s3{font-size:13px;font-weight:600}
.cloud-item.s4{font-size:15px;font-weight:700;color:#deab6a}
.cloud-item.s5{font-size:17px;font-weight:700;color:#FF7777}

/* Item card with image — 우측 1:1 썸네일 + 좌측 텍스트 */
#data.has-image{display:grid;grid-template-columns:1fr 130px;grid-template-areas:"url img" "title img" "desc img" "tags img";grid-column-gap:18px;grid-row-gap:4px;align-items:center}
#data.has-image > div:nth-child(1){grid-area:url}
#data.has-image > div:nth-child(2){grid-area:title}
#data.has-image > div:nth-child(3){grid-area:desc}
#data.has-image > div:nth-child(4){grid-area:tags}
#data.has-image > .item-image{grid-area:img;width:100%;aspect-ratio:1/1;background:#1a1a1a;border-radius:6px;overflow:hidden;align-self:center}
#data.has-image > .item-image > img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){#data.has-image{grid-template-columns:1fr 90px;grid-column-gap:12px}}

/* Rank corner ribbon (rank mode 카드 좌상단) — pseudo-elements 로 구현해서 #data > div:nth-child 셀렉터에 영향 없음 */
#data[data-rank]::before{content:'';position:absolute;top:0;left:0;width:0;height:0;border-top:44px solid #303030;border-right:44px solid transparent;border-top-left-radius:10px;pointer-events:none;z-index:2}
#data[data-rank]::after{content:attr(data-rank);position:absolute;top:5px;left:5px;color:#fff;font-weight:700;font-size:14px;line-height:1;letter-spacing:-.02em;pointer-events:none;z-index:3}
#data[data-rank-len="2"]::after{font-size:12px;top:4px;left:4px}
#data[data-rank-len="3"]::after{font-size:10px;top:3px;left:3px}