/*
Theme Name: Bloging
Theme URI: https://bloging.kr
Author: bloging.kr
Description: IT 테크 블로그용 커스텀 테마. 실시간 검색 순위, 이번 주 인기글, 좋아요, 최근 본 글, 벽돌형 글 목록을 지원합니다.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: bloging
*/

:root{
    --accent:#03C75A;
    --ink:#1E1E23;
    --sub:#5F646D;
    --faint:#9AA0A8;
    --line:#E4E7EB;
    --surface:#F5F6F8;
}
body{
    padding:0px;
    margin:0px;
    background:var(--surface);
    color:var(--ink);
    font-family:"Pretendard Variable",Pretendard,"Malgun Gothic",sans-serif;
    word-break:keep-all;
}
a{
    text-decoration:none;
    color:inherit;
}
ul{
    list-style:none;
    margin:0px;
    padding:0px;
}

/* ================= 헤더 ================= */
body > header{
    width:100%;
    height:100px;
    background:#fff;
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:50;
}
.header{
    width:1200px;
    height:100px;
    margin:auto;
    overflow:visible;
}

/* 검색창 */
.search_wrap{
    width:600px;
    height:50px;
    margin-left:20px;
    margin-top:25px;
    float:left;
    position:relative;
}
.search_bar{
    width:100%;
    height:50px;
    border-radius:10px;
    box-sizing:border-box;
    border:2px solid var(--line);
    background:#fff;
    display:flex;
    align-items:center;
    overflow:hidden;
    transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.search_bar:hover{
    border-color:var(--accent);
}
.search_bar:focus-within{
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(3,199,90,.15);
    transform:translateY(-1px);
}
.search_bar input{
    flex:1;
    height:100%;
    border:0;
    outline:none;
    padding:0 18px;
    font-family:inherit;
    font-size:16px;
    background:transparent;
}
.search_bar button{
    width:54px;
    height:100%;
    border:0;
    background:transparent;
    color:var(--faint);
    font-size:19px;
    cursor:pointer;
    transition:background .3s ease, color .3s ease;
}
.search_bar button i{
    transition:transform .3s ease;
}
.search_bar:hover button,
.search_bar:focus-within button{
    background:var(--accent);
    color:#fff;
}
.search_bar button:hover i{
    transform:scale(1.15) rotate(-10deg);
}
.search_bar button:active i{
    transform:scale(.9);
}

/* 검색 패널 (최근 본 글 / 인기 검색어) */
.search_panel{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;
    box-sizing:border-box;
    display:flex;
    padding:18px 0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 12px 32px rgba(30,30,35,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.search_wrap.is-open .search_panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.panel_col{
    flex:1;
    min-width:0;
    padding:0 20px;
}
.panel_col + .panel_col{
    border-left:1px solid var(--line);
}
.panel_head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:8px;
}
.panel_title{
    margin:0;
    font-size:14px;
    font-weight:800;
}
.panel_title i{
    margin-right:5px;
    color:var(--accent);
}
.panel_clear{
    border:0;
    background:none;
    font-family:inherit;
    font-size:12px;
    color:var(--faint);
    cursor:pointer;
    transition:color .2s ease;
}
.panel_clear:hover{
    color:var(--ink);
}
.recent_list a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    margin:0 -8px;
    border-radius:8px;
    transition:background .2s ease;
}
.recent_list a:hover{
    background:var(--surface);
}
.recent_list img{
    width:44px;
    height:44px;
    border-radius:8px;
    object-fit:cover;
    flex-shrink:0;
    background:var(--line);
}
.recent_title{
    font-size:13px;
    font-weight:600;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.recent_date{
    display:block;
    font-size:11px;
    color:var(--faint);
    margin-top:2px;
}
.panel_empty{
    font-size:13px;
    color:var(--faint);
    padding:20px 0;
    text-align:center;
}
.keyword_list a{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 8px;
    margin:0 -8px;
    border-radius:8px;
    font-size:13px;
    transition:background .2s ease, color .2s ease;
}
.keyword_list a:hover{
    background:var(--surface);
    color:var(--accent);
}
.keyword_list .num{
    width:16px;
    text-align:center;
    font-weight:800;
    color:var(--faint);
}
.keyword_list li:nth-child(-n+3) .num{
    color:var(--accent);
}

/* 아이콘 바 (IT 카테고리) */
.icon_bar{
    width:525px;
    height:50px;
    margin-left:20px;
    float:right;
    margin-top:25px;
    margin-right:20px;
    border-radius:10px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:2px;
}
.icon_bar a{
    width:60px;
    height:50px;
    border-radius:10px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--sub);
    transition:background .25s ease, color .25s ease;
}
.icon_bar a i{
    font-size:18px;
    transition:transform .25s ease;
}
.icon_bar a span{
    font-size:11px;
    font-weight:600;
}
.icon_bar a:hover{
    background:rgba(3,199,90,.08);
    color:var(--accent);
}
.icon_bar a:hover i{
    transform:translateY(-2px);
}

/* ================= 메인 ================= */
main{
    width:100%;
    min-height:1000px;
    padding-bottom:40px;
}
.main{
    width:1200px;
    min-height:1000px;
    margin:auto;
    overflow:hidden;
}

/* 오른쪽: 벽돌형 글 목록 */
.right_bar{
    width:525px;
    float:right;
    margin-top:20px;
    margin-right:20px;
    border-radius:15px;
}
.section_title{
    font-size:17px;
    font-weight:800;
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:8px;
}
.section_title i{
    color:var(--accent);
}
.masonry{
    column-count:2;
    column-gap:14px;
}
.card{
    break-inside:avoid;
    margin-bottom:14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:15px;
    overflow:hidden;
    display:block;
    transition:transform .25s ease, border-color .25s ease;
}
.card:hover{
    transform:translateY(-3px);
    border-color:var(--accent);
}
.card img{
    width:100%;
    height:auto;
    max-height:260px;
    object-fit:cover;
    display:block;
    background:var(--line);
}
.card_body{
    padding:14px 16px 16px;
}
.card_cat{
    font-size:12px;
    font-weight:700;
    color:var(--accent);
}
.card_title{
    font-size:15px;
    font-weight:700;
    line-height:1.45;
    margin:4px 0 6px;
}
.card_desc{
    font-size:13px;
    color:var(--sub);
    line-height:1.6;
    margin:0 0 10px;
}
.card_meta{
    font-size:12px;
    color:var(--faint);
    display:flex;
    gap:10px;
}

/* 왼쪽 */
.left{
    width:600px;
    float:left;
    margin-left:20px;
    margin-top:20px;
    border-radius:15px;
}

/* 배너 */
.banner{
    width:600px;
    height:150px;
    border-radius:20px;
    float:left;
    box-sizing:border-box;
    padding:22px 32px;
    margin-bottom:20px;
    background:var(--ink);
    color:#fff;
    position:relative;
    overflow:hidden;
}
.banner p{
    margin:0;
    font-size:13px;
    color:var(--accent);
    font-weight:700;
}
.banner h2{
    margin:4px 0 12px;
    font-size:22px;
    line-height:1.3;
    font-weight:800;
}
.banner a{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    padding:7px 14px;
    border-radius:8px;
    background:var(--accent);
    transition:background .25s ease;
}
.banner a:hover{
    background:#02A64B;
}
.banner .banner_icon{
    position:absolute;
    right:30px;
    top:50%;
    transform:translateY(-50%);
    font-size:96px;
    color:rgba(255,255,255,.08);
}

/* 랭킹 */
.rank{
    width:600px;
    height:300px;
    margin-top:20px!important;
    clear:both;
    border-radius:20px;
    position:relative;
    background:#fff;
    border:1px solid var(--line);
    box-sizing:border-box;
    overflow:hidden;
}
.rank_in,
.rank_left{
    width:300px;
    height:270px;
    position:absolute;
    bottom:0px;
    box-sizing:border-box;
    padding:14px 22px 18px;
}
.rank_in{
    left:0px;
}
.rank_left{
    right:0px;
    border-left:1px solid var(--line);
}
.rank_head{
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:30px;
    padding:12px 22px 0;
    font-size:12px;
    color:var(--faint);
}
.box_title{
    font-size:16px;
    font-weight:800;
    margin:0 0 10px;
}
.rank_list li{
    display:flex;
    align-items:center;
    gap:12px;
    height:40px;
    font-size:14px;
}
.rank_list .num{
    width:16px;
    font-weight:800;
    color:var(--faint);
    text-align:center;
}
.rank_list li:nth-child(-n+3) .num{
    color:var(--accent);
}
.rank_list a{
    flex:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.rank_list a:hover{
    color:var(--accent);
}
.rank_list .up{ color:#E5484D; font-size:11px; }
.rank_list .down{ color:#3B82F6; font-size:11px; }
.rank_list .new{ color:var(--accent); font-size:10px; font-weight:800; }

/* 좋아요 / 최근 댓글 / 인기 조회수 */
.left > .comment{
    width:600px;
    height:400px;
    margin-top:25px;
    border-radius:20px;
}
.heart,
.comment_in,
.hot{
    width:190px;
    height:400px;
    float:left;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--line);
    box-sizing:border-box;
    padding:18px 16px;
    overflow:hidden;
}
.heart{
    margin-left:0px;
    margin-right:20px;
}
.comment_in{
    margin-right:10px;
}
.box_title i{
    margin-right:4px;
}
.heart .box_title i{ color:#E5484D; }
.comment_in .box_title i{ color:#3B82F6; }
.hot .box_title i{ color:#F59E0B; }

.mini_list li{
    padding:9px 0;
    border-bottom:1px solid var(--line);
}
.mini_list li:last-child{
    border-bottom:0;
}
.mini_list a{
    display:block;
    font-size:13px;
    font-weight:600;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.mini_list a:hover{
    color:var(--accent);
}
.mini_meta{
    display:block;
    margin-top:3px;
    font-size:11px;
    color:var(--faint);
}
.mini_meta i{
    margin-right:2px;
}
.comment_text{
    font-size:12px;
    color:var(--sub);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.5;
}

body > footer{
    background:#fff;
    border-top:1px solid var(--line);
}
.footer{
    width:1200px;
    margin:auto;
    padding:28px 20px;
    box-sizing:border-box;
    font-size:13px;
    color:var(--faint);
}
    

/* =========================================================
 * 워드프레스용 추가 스타일
 * ======================================================= */
:root{
    --code-bg:#23262E;
    --mono:"D2Coding","JetBrains Mono",Consolas,monospace;
}
.icon_bar a.is-active{
    color:var(--accent);
    background:rgba(3,199,90,.08);
}
.rank_list .same{ color:var(--faint); font-size:11px; }
.list_empty{
    font-size:13px;
    color:var(--faint);
    padding:12px 0;
    height:auto !important;
    border:0 !important;
}
.mini_list a.comment_link{
    display:block;
    font-weight:400;
}
.mini_list .comment_text{
    margin:0;
}
.pagination{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    margin:10px 0 0;
}
.pagination .page-numbers{
    min-width:34px;
    height:34px;
    padding:0 10px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:8px;
    background:#fff;
    font-size:13px;
    color:var(--sub);
    transition:border-color .2s ease, color .2s ease;
}
.pagination .page-numbers.current{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
    font-weight:700;
}
.pagination a.page-numbers:hover{
    border-color:var(--accent);
    color:var(--accent);
}
.recent_noimg{
    width:44px;
    height:44px;
    border-radius:8px;
    flex-shrink:0;
    background:var(--surface);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--faint);
}

/* ---------- 목록 화면 (카테고리/검색) ---------- */
.list_page{
    padding:28px 20px 0;
    box-sizing:border-box;
}
.list_head{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:18px;
}
.list_title{
    margin:0;
    font-size:24px;
    font-weight:800;
}
.list_count{
    font-size:15px;
    font-weight:700;
    color:var(--accent);
}
.list_desc{
    color:var(--sub);
    font-size:14px;
    margin:-6px 0 18px;
}
.masonry_wide{
    column-count:4;
}
.empty_state{
    text-align:center;
    padding:80px 20px;
    color:var(--sub);
}
.empty_state i{
    font-size:40px;
    color:var(--line);
}
.empty_state h1{
    font-size:22px;
    color:var(--ink);
    margin:16px 0 6px;
}
.btn{
    display:inline-block;
    margin-top:16px;
    padding:10px 20px;
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font-weight:700;
    font-size:14px;
}

/* ---------- 글 상세 ---------- */
.single_page{
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:20px 20px 0;
    box-sizing:border-box;
}
.entry{
    width:820px;
    flex-shrink:0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:40px 48px 48px;
    box-sizing:border-box;
}
.entry_page{
    margin:0 auto;
}
.single_side{
    flex:1;
    min-width:0;
    position:sticky;
    top:20px;
}
.side_box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:18px 22px;
    margin-bottom:20px;
}
.side_box .box_title i{ color:var(--accent); }
.side_box .mini_list a{ font-size:14px; }

.breadcrumb{
    font-size:13px;
    color:var(--faint);
    margin-bottom:14px;
    display:flex;
    align-items:center;
    gap:8px;
}
.breadcrumb i{ font-size:9px; }
.breadcrumb a:hover{ color:var(--accent); }
.entry_title{
    margin:0 0 20px;
    font-size:30px;
    line-height:1.35;
    font-weight:800;
    letter-spacing:-0.02em;
}
.entry_meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    padding-bottom:20px;
    margin-bottom:32px;
    border-bottom:1px solid var(--line);
    font-size:13px;
    color:var(--faint);
}
.entry_meta .avatar{ border-radius:50%; }
.entry_author{ color:var(--ink); font-weight:700; font-size:14px; margin-left:-6px; }
.copy_link{
    margin-left:auto;
    border:1px solid var(--line);
    background:#fff;
    border-radius:8px;
    padding:6px 12px;
    font-family:inherit;
    font-size:12px;
    color:var(--sub);
    cursor:pointer;
    transition:border-color .2s ease, color .2s ease;
}
.copy_link:hover,
.copy_link.is-done{
    border-color:var(--accent);
    color:var(--accent);
}

.entry_content{
    font-size:17px;
    line-height:1.85;
}
.entry_content > *{ margin-top:0; margin-bottom:1.4em; }
.entry_content h2{
    font-size:24px;
    line-height:1.4;
    margin:2.2em 0 .8em;
    padding-bottom:10px;
    border-bottom:2px solid var(--ink);
    scroll-margin-top:20px;
}
.entry_content h3{
    font-size:20px;
    line-height:1.45;
    margin:1.8em 0 .6em;
    padding-left:12px;
    border-left:4px solid var(--accent);
    scroll-margin-top:20px;
}
.entry_content a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.entry_content ul{ list-style:disc; padding-left:1.4em; }
.entry_content ol{ padding-left:1.4em; }
.entry_content li + li{ margin-top:.35em; }
.entry_content img{ max-width:100%; height:auto; border-radius:8px; }
.entry_content figure{ margin-left:0; margin-right:0; }
.entry_content figcaption{ font-size:13px; color:var(--faint); text-align:center; margin-top:8px; }
.entry_content blockquote{
    margin-left:0;
    margin-right:0;
    padding:18px 22px;
    background:var(--surface);
    border-left:4px solid var(--accent);
    border-radius:0 10px 10px 0;
    color:var(--sub);
}
.entry_content blockquote p:last-child{ margin-bottom:0; }
.entry_content table{ width:100%; border-collapse:collapse; font-size:15px; }
.entry_content .wp-block-table{ overflow-x:auto; }
.entry_content th,
.entry_content td{ border:1px solid var(--line); padding:10px 14px; text-align:left; }
.entry_content th{ background:var(--surface); }
.entry_content :not(pre) > code{
    font-family:var(--mono);
    font-size:.88em;
    background:#EEF1F4;
    color:#C7254E;
    padding:2px 6px;
    border-radius:4px;
}
.entry_content pre{
    background:var(--code-bg);
    color:#E6E8EC;
    font-family:var(--mono);
    font-size:14px;
    line-height:1.65;
    padding:20px 22px;
    border-radius:12px;
    overflow-x:auto;
}
.entry_content pre code{ font:inherit; background:none; color:inherit; padding:0; }
.code_wrap{ position:relative; margin-bottom:1.4em; }
.code_wrap pre{ margin:0; padding-top:42px; }
.code_copy{
    position:absolute;
    top:10px;
    right:10px;
    border:1px solid #454a55;
    background:#2E323B;
    color:#C9CDD4;
    font-family:inherit;
    font-size:12px;
    padding:4px 10px;
    border-radius:6px;
    cursor:pointer;
    transition:color .2s ease, border-color .2s ease;
}
.code_copy:hover,
.code_copy.is-done{ color:var(--accent); border-color:var(--accent); }

/* 목차 */
.toc{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:12px;
    padding:16px 20px;
    font-size:15px;
}
.toc_head{ display:flex; justify-content:space-between; align-items:center; }
.toc_title{ font-weight:800; }
.toc_title i{ color:var(--accent); margin-right:6px; }
.toc_toggle{ border:0; background:none; font-family:inherit; font-size:12px; color:var(--faint); cursor:pointer; }
.toc_list{ list-style:none; margin:10px 0 0; padding:0 !important; line-height:1.6; }
.toc_list a{ color:var(--sub) !important; text-decoration:none !important; }
.toc_list a:hover{ color:var(--accent) !important; }
.toc_list .toc_h3{ padding-left:16px; font-size:14px; }
.toc.is-collapsed .toc_list{ display:none; }

.entry_updated{ font-size:13px; color:var(--faint); margin:24px 0 0; }

/* 좋아요 버튼 */
.like_area{ text-align:center; margin:40px 0; }
.like_btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 26px;
    border:2px solid var(--line);
    border-radius:999px;
    background:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    color:var(--sub);
    cursor:pointer;
    transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.like_btn i{ transition:transform .25s ease; }
.like_btn:hover{ border-color:#E5484D; color:#E5484D; }
.like_btn:hover i{ transform:scale(1.15); }
.like_btn.is-liked{
    border-color:#E5484D;
    background:#FFF1F2;
    color:#E5484D;
}
.like_btn.is-pop i{ animation:heart_pop .45s ease; }
@keyframes heart_pop{
    0%{ transform:scale(1); }
    40%{ transform:scale(1.45); }
    100%{ transform:scale(1); }
}

.ad_slot{ text-align:center; overflow:hidden; }
.ad_mid{ margin:36px 0; }
.ad_bottom{ margin:0 0 32px; }

.entry_tags{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.entry_tags a{
    font-size:13px;
    color:var(--sub);
    background:var(--surface);
    padding:5px 12px;
    border-radius:999px;
    transition:color .2s ease;
}
.entry_tags a::before{ content:"#"; }
.entry_tags a:hover{ color:var(--accent); }

.related{ margin-top:44px; }
.related_grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}
.related_thumb{
    aspect-ratio:1/1;
    border-radius:12px;
    overflow:hidden;
    background:var(--surface);
    margin-bottom:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--faint);
    font-size:24px;
}
.related_thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.related_grid a:hover img{ transform:scale(1.05); }
.related_title{
    font-size:14px;
    font-weight:600;
    line-height:1.45;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.related_grid a:hover .related_title{ color:var(--accent); }

.post-navigation{ margin-top:40px; border-top:1px solid var(--line); }
.post-navigation .nav-previous,
.post-navigation .nav-next{ border-bottom:1px solid var(--line); }
.post-navigation a{ display:flex; gap:16px; padding:14px 0; font-size:15px; }
.post-navigation a:hover .nav_title{ color:var(--accent); }
.nav_label{ flex-shrink:0; width:52px; color:var(--faint); font-size:13px; padding-top:2px; }

/* 댓글 */
.comments_area{ margin-top:44px; }
.comments_area .section_title{ margin-bottom:6px; }
.comment_list,
.comment_list .children{ list-style:none; margin:0; padding:0; }
.comment_list{ margin-bottom:20px; }

.comment_list > li{ border-bottom:1px solid var(--line); }
.comment-body{ padding:14px 0; font-size:15px; }

/* 대댓글: 회색 박스 */
.comment_list .children{ padding:0 0 12px 36px; }
.comment_list .children .comment-body{
    background:var(--surface);
    border-radius:12px;
    padding:12px 14px;
    margin-top:8px;
}
.comment_list .children .children{ padding-left:0; padding-bottom:0; }

/* 이름 + 날짜 한 줄 */
.comment-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.comment-author{ display:flex; align-items:center; gap:8px; font-size:14px; }
.comment-author .fn{ font-style:normal; font-weight:700; }
.comment-author .avatar{ border-radius:50%; width:28px; height:28px; }
.comment-author .says{ display:none; }
.comment-metadata{ font-size:12px; color:var(--faint); }
.comment-metadata a:hover{ color:var(--accent); }
.comment-metadata .edit-link{ margin-left:6px; }
.comment-awaiting-moderation{ display:block; font-size:12px; color:#F59E0B; margin:4px 0 0 36px; }

.comment-content{ margin:4px 0 0 36px; line-height:1.6; }
.comment-content p{ margin:0; }
.comment-content p + p{ margin-top:6px; }
.reply{ margin:6px 0 0 36px; line-height:1; }
.reply a{ font-size:12px; font-weight:600; color:var(--faint); transition:color .2s ease; }
.reply a:hover{ color:var(--accent); }

/* 댓글 입력창 */
.comment-respond{ margin-top:8px; }
.comment-reply-title{ font-size:16px; font-weight:800; margin:16px 0 8px; display:flex; align-items:center; gap:10px; }
.comment-reply-title small a{ font-size:12px; font-weight:400; color:var(--faint); }
.comment-reply-title small a:hover{ color:#E5484D; }
.logged-in-as{ font-size:12px; color:var(--faint); }
.logged-in-as a:hover{ color:var(--accent); }
.comment-form p{ margin:0 0 10px; }
.comment-form label{ display:block; font-size:13px; font-weight:600; margin-bottom:4px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea{
    width:100%;
    box-sizing:border-box;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    font-family:inherit;
    font-size:15px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.comment-form textarea{ height:96px; resize:vertical; }
.comment-form input:focus,
.comment-form textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(3,199,90,.12); outline:none; }
.comment-form-cookies-consent{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--faint); }
.comment-form-cookies-consent label{ display:inline; font-weight:400; margin:0; }
.form-submit{ text-align:right; margin:0 !important; }
.form-submit .submit{
    background:var(--accent);
    color:#fff;
    border:0;
    border-radius:10px;
    padding:10px 22px;
    font-family:inherit;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease;
}
.form-submit .submit:hover{ background:#02A64B; }

/* 답글 버튼 누르면 댓글 아래로 이동한 입력창 */
.comment_list .comment-respond{
    margin:10px 0 4px 36px;
    padding:14px 16px;
    background:#fff;
    border:1px solid var(--accent);
    border-radius:12px;
}
.comment_list .comment-respond .comment-reply-title{ margin-top:0; font-size:14px; }

.footer_menu{ display:flex; gap:16px; margin-bottom:10px !important; }
.footer_menu a:hover{ color:var(--accent); }

/* =========================================================
 * 반응형
 *  - 1240px 이하: 노트북/작은 모니터 (폭을 %로)
 *  - 900px 이하 : 태블릿 (한 줄로 쌓기)
 *  - 600px 이하 : 휴대폰
 * ======================================================= */
@media (max-width:1240px){
    body > header{ height:auto; }
    .header{
        width:100%;
        height:auto;
        min-height:100px;
        padding:0 20px;
        box-sizing:border-box;
        display:flex;
        align-items:center;
        gap:20px;
    }
    .search_wrap{ float:none; flex:1; width:auto; margin:0; }
    .icon_bar{ float:none; width:auto; margin:0; flex-shrink:0; }

    .main{
        width:100%;
        padding:0 20px;
        box-sizing:border-box;
        display:flex;
        gap:20px;
        align-items:flex-start;
    }
    .left{ float:none; width:auto; flex:0 0 52%; margin:20px 0 0; min-width:0; }
    .right_bar{ float:none; width:auto; flex:1; margin:20px 0 0; min-width:0; }

    .banner,
    .rank,
    .left > .comment{ width:100%; }
    .rank_in,
    .rank_left{ width:50%; }
    .heart,
    .comment_in,
    .hot{ width:calc((100% - 30px) / 3); }
    .heart,
    .comment_in{ margin-left:0; margin-right:15px; }

    .footer{ width:100%; }

    .single_page{ padding:20px; }
    .entry{ width:auto; flex:1; min-width:0; }
    .single_side{ flex:0 0 300px; }
    .list_page{ padding:28px 20px 0; }
    .masonry_wide{ column-count:3; }
}

@media (max-width:900px){
    main{ min-height:0; }
    .header{
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        padding:12px 16px 6px;
        gap:6px;
    }
    .icon_bar{
        justify-content:flex-start;
        height:auto;
        overflow-x:auto;
        scrollbar-width:none;
        -webkit-overflow-scrolling:touch;
        margin:0 -16px;
        padding:0 12px;
    }
    .icon_bar::-webkit-scrollbar{ display:none; }
    .icon_bar a{ flex-shrink:0; width:58px; }

    .main{
        flex-direction:column;
        gap:0;
        min-height:0;
        padding:0 16px;
    }
    .left,
    .right_bar{ flex:none; width:100%; margin-top:16px; }

    .banner{ float:none; height:auto; min-height:140px; margin-bottom:16px; }

    /* 랭킹: 절대위치 → 2칸 그리드 */
    .rank{
        height:auto;
        display:grid;
        grid-template-columns:1fr 1fr;
        margin-top:0 !important;
    }
    .rank_head{ position:static; grid-column:1 / -1; height:auto; padding:14px 20px 0; }
    .rank_in,
    .rank_left{ position:static; width:auto; height:auto; padding:10px 20px 16px; }

    /* 좋아요/댓글/조회수: 높이 고정 해제 */
    .left > .comment{
        height:auto;
        margin-top:16px;
        display:grid;
        grid-template-columns:repeat(3, 1fr);
        gap:12px;
    }
    .heart,
    .comment_in,
    .hot{ width:auto; height:auto; margin:0; float:none; }

    /* 글 상세 */
    .single_page{ flex-direction:column; padding:16px; }
    .entry{ width:100%; padding:28px 24px 32px; }
    .single_side{ position:static; width:100%; flex:none; }
    .related_grid{ grid-template-columns:repeat(2, 1fr); }

    .list_page{ padding:20px 16px 0; }
    .masonry_wide{ column-count:2; }
}

@media (max-width:600px){
    /* 검색 패널: 위아래로 */
    .search_panel{ flex-direction:column; padding:14px 0; }
    .panel_col + .panel_col{
        border-left:0;
        border-top:1px solid var(--line);
        margin-top:12px;
        padding-top:12px;
    }
    .search_bar input{ font-size:15px; padding:0 14px; }

    .banner{ padding:20px 22px; border-radius:16px; }
    .banner h2{ font-size:19px; }
    .banner .banner_icon{ font-size:72px; right:18px; }

    .rank{ grid-template-columns:1fr; border-radius:16px; }
    .rank_left{ border-left:0; border-top:1px solid var(--line); }

    .left > .comment{ grid-template-columns:1fr; }
    .heart,
    .comment_in,
    .hot{ border-radius:16px; }

    /* 벽돌형: 휴대폰은 2열 유지, 요약은 숨김 */
    .masonry{ column-gap:10px; }
    .card{ margin-bottom:10px; border-radius:12px; }
    .card img{ max-height:200px; }
    .card_body{ padding:10px 12px 12px; }
    .card_title{ font-size:14px; }
    .card_desc{ display:none; }

    .entry{ padding:22px 16px 28px; border-radius:16px; }
    .entry_title{ font-size:23px; }
    .entry_meta{ gap:10px; }
    .copy_link{ margin-left:0; }
    .entry_content{ font-size:16px; }
    .entry_content h2{ font-size:20px; }
    .entry_content h3{ font-size:17px; }
    .entry_content pre{ border-radius:8px; font-size:13px; }
    .related_grid{ gap:10px; }

    .comment_list .children{ padding-left:14px; }
    .comment-content,
    .reply,
    .comment_list .comment-respond{ margin-left:0; }

    .list_title{ font-size:20px; }
    .footer{ padding:22px 16px; }
}