/*
Theme Name: Tripnote
Author: bloging.kr
Description: 여행·맛집 블로그용 테마. 가운데 앱 화면 형태의 피드, 최근 댓글·좋아요·조회수 박스, 3x3 갤러리, 클릭한 자리에서 날아오는 모달을 지원합니다.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: tripnote
*/

:root{
    --main:#0E7C86;      /* 라군 청록 */
    --main-soft:#E3F2F3;
    --sun:#FF7A45;       /* 노을 주황 */
    --ink:#1C2733;
    --sub:#5E6B78;
    --faint:#9AA5B1;
    --line:#E2E8ED;
    --bg:#EEF3F6;
}
body{
    padding:0PX;
    margin:0px;
    background:var(--bg);
    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;
}
button{
    font-family:inherit;
}

/* ================= 기본 레이아웃 ================= */
.left{
    width:300px;
    height:100vh;
    float:left;
    margin-left:20px;
}
.center{
    width:700px;
    height:100vh;
    position:relative;
    float:left;
    margin-left:300px;
}
.right{
    width:300px;
    height:100vh;
    float:right;
    margin-right:20px;
}
.backg{
    width:500px;
    height:min(920px, calc(100vh - 40px));
    background:#fff;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    border-radius:28px;
    box-shadow:0 20px 60px rgba(28,39,51,.12);
    display:flex;
    flex-direction:column;
    z-index:5;
}

/* 공통 박스 */
.left > .comment,
.hot_post,
.like,
.gal{
    background:#fff;
    border-radius:10px;
    box-sizing:border-box;
    padding:18px 18px 14px;
    overflow:hidden;
    border:1px solid var(--line);
}
.box_title{
    margin:0 0 10px;
    font-size:16px;
    font-weight:800;
    display:flex;
    align-items:center;
    gap:7px;
}
.left > .comment .box_title i{ color:var(--main); }
.hot_post .box_title i{ color:#E5484D; }
.like .box_title i{ color:var(--sun); }
.gal .box_title i{ color:var(--main); }

/* 클릭 가능한 항목 공통 */
.item{
    display:flex;
    gap:10px;
    align-items:center;
    width:100%;
    padding:8px;
    margin:0 -8px;
    border:0;
    border-radius:10px;
    background:transparent;
    text-align:left;
    color:inherit;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, opacity .3s ease;
    box-sizing:content-box;
}
.item:hover{
    background:var(--bg);
}
.item:active{
    transform:scale(.98);
}
.item.is-source{
    opacity:.25;
}
.item_body{
    flex:1;
    min-width:0;
}
.item_title{
    display:block;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.item_meta{
    display:block;
    font-size:12px;
    color:var(--faint);
    margin-top:2px;
}
.item_meta i{ margin-right:3px; }
.item_thumb{
    width:52px;
    height:52px;
    border-radius:10px;
    object-fit:cover;
    flex-shrink:0;
    background:var(--line);
}

/* ================= 검색창 ================= */
.search_wrap{
    position:relative;
    width:450px;
    margin-top:20px;
    margin-left:25px;
}
.search_bar{
    width:450px;
    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(--main); }
.search_bar:focus-within{
    border-color:var(--main);
    box-shadow:0 0 0 4px rgba(14,124,134,.15);
    transform:translateY(-1px);
}
.search_bar input{
    flex:1;
    height:100%;
    border:0;
    outline:none;
    padding:0 16px;
    font-family:inherit;
    font-size:15px;
    background:transparent;
}
.search_bar button{
    width:52px;
    height:100%;
    border:0;
    background:transparent;
    color:var(--faint);
    font-size:18px;
    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(--main); 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% + 8px);
    left:0;
    width:100%;
    box-sizing:border-box;
    display:flex;
    padding:16px 0;
    background:#fff;
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 12px 32px rgba(28,39,51,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
    z-index:20;
}
.search_wrap.is-open .search_panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}
.panel_col{ flex:1; min-width:0; padding:0 16px; }
.panel_col + .panel_col{ border-left:1px solid var(--line); }
.panel_title{ margin:0 0 8px; font-size:13px; font-weight:800; }
.panel_title i{ color:var(--main); margin-right:5px; }
.panel_list a{
    display:flex;
    gap:8px;
    padding:6px 8px;
    margin:0 -8px;
    border-radius:8px;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:background .2s ease, color .2s ease;
}
.panel_list a:hover{ background:var(--bg); color:var(--main); }
.panel_list .num{ width:14px; font-weight:800; color:var(--faint); flex-shrink:0; }
.panel_list li:nth-child(-n+3) .num{ color:var(--main); }

/* ================= 아이콘 바 (여행 메뉴) ================= */
.icon_bar{
    width:450px;
    margin-top:10px;
    margin-left:25px;
    display:flex;
    flex-wrap:wrap;          /* 넘치면 다음 줄로 (잘리지 않게) */
    align-items:center;
    gap:6px;
}
.icon_bar a{
    flex-shrink:0;
    height:32px;
    padding:0 11px;
    border-radius:999px;
    background:var(--bg);
    display:flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    font-weight:600;
    color:var(--sub);
    transition:background .25s ease, color .25s ease;
}
.icon_bar a i{
    font-size:13px;
    transition:transform .25s ease;
}
.icon_bar a:hover,
.icon_bar a.is-active{
    background:var(--main);
    color:#fff;
}
.icon_bar a:hover i{ transform:translateY(-1px) rotate(-8deg); }

/* ================= 가운데 피드 ================= */
.feed{
    flex:1;
    overflow-y:auto;
    margin-top:14px;
    padding:6px 25px 24px;
    scrollbar-width:none;
}
.feed::-webkit-scrollbar{ display:none; }
.feed_title{
    font-size:17px;
    font-weight:800;
    margin:4px 0 12px;
}
.feed_card{
    display:block;
    margin-bottom:18px;
}
.feed_img{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    aspect-ratio:16/10;
    background:var(--line);
}
.feed_img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
}
.feed_card:hover .feed_img img{ transform:scale(1.04); }
.feed_place{
    position:absolute;
    left:12px;
    bottom:12px;
    padding:5px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    font-size:12px;
    font-weight:700;
    color:var(--ink);
}
.feed_place i{ color:var(--sun); margin-right:4px; }
.feed_card h3{
    margin:10px 2px 4px;
    font-size:16px;
    line-height:1.4;
}
.feed_meta{
    margin:0 2px;
    font-size:12px;
    color:var(--faint);
    display:flex;
    gap:12px;
}

/* ================= 왼쪽 ================= */
.left > .comment{
    width:300px;
    height:300px;
    margin-top:20px;
}
.comment_text{
    display:block;
    font-size:13px;
    line-height:1.45;
    color:var(--ink);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.left > .comment .item{ align-items:flex-start; }
.left .avatar{
    width:30px;
    height:30px;
    border-radius:50%;
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:800;
    color:#fff;
    background:var(--main);
}
.hot_post{
    width:300px;
    height:500px;
    margin-top:20px;
}
.hot_post .item_meta i{ color:#E5484D; }

/* ================= 오른쪽 ================= */
.like{
    width:300px;
    height:400px;
    margin-top:20px;
}
.rank_num{
    width:18px;
    font-size:15px;
    font-weight:800;
    color:var(--faint);
    flex-shrink:0;
    text-align:center;
}
.like li:nth-child(-n+3) .rank_num{ color:var(--sun); }

.gal{
    width:300px;
    height:400px;
    margin-top:20px;
}
.gal_grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:6px;
}
.gal_item{
    aspect-ratio:1/1;
    padding:0;
    border:0;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    background:var(--line);
    transition:opacity .3s ease;
}
.gal_item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .35s ease, filter .35s ease;
}
.gal_item:hover img{
    transform:scale(1.08);
    filter:brightness(.85);
}
.gal_item.is-source{ opacity:.25; }

/* ================= 모달 ================= */
.modal_bg{
    position:fixed;
    inset:0;
    background:rgba(20,30,40,.45);
    opacity:0;
    visibility:hidden;
    transition:opacity .4s ease, visibility .4s;
    z-index:90;
    backdrop-filter:blur(3px);
}
.modal_bg.is-open{
    opacity:1;
    visibility:visible;
}
.modal{
    position:fixed;
    z-index:100;
    background:#fff;
    overflow:hidden;
    display:none;
    box-shadow:0 30px 80px rgba(20,30,40,.3);
    transition:
        left .55s cubic-bezier(.2,.85,.25,1),
        top .55s cubic-bezier(.2,.85,.25,1),
        width .55s cubic-bezier(.2,.85,.25,1),
        height .55s cubic-bezier(.2,.85,.25,1),
        border-radius .55s ease;
}
/* 클릭한 항목의 모습(복제본): 이동하면서 사라짐 */
.modal_ghost{
    position:absolute;
    inset:0;
    padding:8px;
    box-sizing:border-box;
    transition:opacity .25s ease;
    pointer-events:none;
}
.modal_ghost img{ width:100%; height:100%; object-fit:cover; }
.modal.is-moving .modal_ghost{ opacity:0; }
.modal_content{
    position:absolute;
    inset:0;
    overflow-y:auto;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .3s ease, transform .3s ease;
}
.modal.is-ready .modal_content{
    opacity:1;
    transform:none;
}
.modal_img{
    width:100%;
    aspect-ratio:16/10;
    object-fit:cover;
    display:block;
    background:var(--line);
}
.modal_close{
    position:absolute;
    top:12px;
    right:12px;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    font-size:16px;
    cursor:pointer;
    transition:transform .2s ease;
}
.modal_close:hover{ transform:rotate(90deg); }
.modal_body{ padding:20px 24px 24px; }
.modal_place{
    display:inline-block;
    font-size:12px;
    font-weight:700;
    color:var(--main);
    background:var(--main-soft);
    padding:4px 10px;
    border-radius:999px;
}
.modal_place i{ margin-right:4px; }
.modal_title{
    margin:10px 0 8px;
    font-size:21px;
    line-height:1.35;
}
.modal_excerpt{
    margin:0 0 14px;
    font-size:14px;
    line-height:1.7;
    color:var(--sub);
}
.modal_meta{
    display:flex;
    gap:14px;
    font-size:13px;
    color:var(--faint);
    margin-bottom:18px;
}
.modal_meta i{ margin-right:4px; }
.modal_quote{
    margin:0 0 16px;
    padding:12px 14px;
    border-radius:12px;
    background:var(--bg);
    font-size:13px;
    line-height:1.6;
}
.modal_quote strong{ color:var(--main); margin-right:6px; }
.modal_btn{
    display:block;
    text-align:center;
    padding:13px;
    border-radius:12px;
    background:var(--main);
    color:#fff;
    font-weight:700;
    font-size:15px;
    transition:background .2s ease;
}
.modal_btn:hover{ background:#0A666E; }
.modal_btn i{ margin-left:6px; }

@media (prefers-reduced-motion: reduce){
    .modal, .modal_content, .modal_bg{ transition:none; }
}
    

/* =========================================================
 * 워드프레스용 추가 스타일
 * ======================================================= */
.box_empty{
    font-size:13px;
    color:var(--faint);
    padding:10px 0;
    margin:0;
}
.no_img{
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    color:var(--faint);
}
.item_thumb.no_img{ font-size:16px; }
.feed_img .no_img{ width:100%; height:100%; font-size:32px; }

/* 검색 패널: 최근 본 글 */
.panel_head{ display:flex; justify-content:space-between; align-items:center; }
.panel_clear{
    border:0;
    background:none;
    font-size:12px;
    color:var(--faint);
    cursor:pointer;
    margin-bottom:8px;
    transition:color .2s ease;
}
.panel_clear:hover{ color:var(--ink); }
.recent_list a{ align-items:center; }
.recent_list img,
.recent_list .recent_noimg{
    width:32px;
    height:32px;
    border-radius:6px;
    object-fit:cover;
    flex-shrink:0;
}
.recent_list .recent_noimg{ display:flex; align-items:center; justify-content:center; background:var(--bg); color:var(--faint); font-size:12px; }
.recent_list span{ overflow:hidden; text-overflow:ellipsis; }
.panel_empty{ font-size:12px; color:var(--faint); margin:6px 0; }

/* 피드 */
.feed_count{ font-size:14px; color:var(--main); margin-left:4px; }
.pagination{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:4px;
    margin:4px 0 20px;
}
.pagination .page-numbers{
    min-width:34px;
    height:34px;
    padding:0 8px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:var(--bg);
    font-size:13px;
    color:var(--sub);
    transition:background .2s ease, color .2s ease;
}
.pagination .page-numbers.current{ background:var(--main); color:#fff; font-weight:700; }
.pagination a.page-numbers:hover{ color:var(--main); }
.empty_state{ text-align:center; padding:60px 10px; color:var(--sub); font-size:14px; }
.empty_state i{ font-size:40px; color:var(--line); }
.empty_state h1{ font-size:20px; color:var(--ink); margin:14px 0 6px; }
.empty_state .modal_btn{ display:inline-block; padding:11px 22px; margin-top:12px; }

.site_footer{
    border-top:1px solid var(--line);
    margin-top:24px;
    padding-top:16px;
    font-size:12px;
    color:var(--faint);
    text-align:center;
}
.site_footer p{ margin:0; }
.footer_menu{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-bottom:6px !important; }
.footer_menu a:hover{ color:var(--main); }

/* ---------- 여행기 상세 ---------- */
.back_link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:13px;
    color:var(--sub);
    margin:2px 0 12px;
    transition:color .2s ease;
}
.back_link:hover{ color:var(--main); }
.entry_hero{ margin:0 0 16px; border-radius:18px; overflow:hidden; background:var(--line); }
.entry_hero img{ width:100%; height:auto; display:block; }
.entry_title{ margin:10px 0 12px; font-size:23px; line-height:1.35; font-weight:800; letter-spacing:-0.02em; }
.entry_meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    font-size:12px;
    color:var(--faint);
    padding-bottom:16px;
    margin-bottom:20px;
    border-bottom:1px solid var(--line);
}
.entry_meta .avatar{ border-radius:50%; }
.entry_author{ color:var(--ink); font-weight:700; font-size:13px; margin-left:-4px; }
.copy_link{
    margin-left:auto;
    border:1px solid var(--line);
    background:#fff;
    border-radius:999px;
    padding:5px 11px;
    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(--main); color:var(--main); }

.entry_content{ font-size:16px; line-height:1.8; }
.entry_content > *{ margin-top:0; margin-bottom:1.3em; }
.entry_content h2{ font-size:20px; line-height:1.4; margin:2em 0 .7em; scroll-margin-top:16px; }
.entry_content h2::before{
    content:"";
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--sun);
    margin-right:8px;
    vertical-align:middle;
    position:relative;
    top:-2px;
}
.entry_content h3{ font-size:17px; margin:1.6em 0 .5em; color:var(--main); scroll-margin-top:16px; }
.entry_content a{ color:var(--main); text-decoration:underline; text-underline-offset:3px; }
.entry_content ul{ list-style:disc; padding-left:1.3em; }
.entry_content ol{ padding-left:1.3em; }
.entry_content img{ max-width:100%; height:auto; border-radius:14px; }
.entry_content figure{ margin-left:0; margin-right:0; }
.entry_content figcaption{ font-size:12px; color:var(--faint); text-align:center; margin-top:6px; }
.entry_content blockquote{
    margin-left:0;
    margin-right:0;
    padding:14px 18px;
    background:var(--main-soft);
    border-radius:14px;
    color:var(--ink);
}
.entry_content blockquote p:last-child{ margin-bottom:0; }
.entry_content .wp-block-table{ overflow-x:auto; }
.entry_content table{ width:100%; border-collapse:collapse; font-size:14px; }
.entry_content th,
.entry_content td{ border-bottom:1px solid var(--line); padding:9px 10px; text-align:left; }
.entry_content th{ background:var(--bg); }

/* 목차 */
.toc{ background:var(--bg); border-radius:14px; padding:14px 16px; font-size:14px; }
.toc_head{ display:flex; justify-content:space-between; align-items:center; }
.toc_title{ font-weight:800; }
.toc_title i{ color:var(--main); margin-right:6px; }
.toc_toggle{ border:0; background:none; font-size:12px; color:var(--faint); cursor:pointer; }
.toc_list{ list-style:none !important; margin:8px 0 0; padding:0 !important; }
.toc_list li{ margin:3px 0; }
.toc_list a{ color:var(--sub) !important; text-decoration:none !important; }
.toc_list a:hover{ color:var(--main) !important; }
.toc_list .toc_h3{ padding-left:14px; font-size:13px; }
.toc.is-collapsed .toc_list{ display:none; }

/* 좋아요 */
.like_area{ text-align:center; margin:32px 0; }
.like_btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 24px;
    border:2px solid var(--line);
    border-radius:999px;
    background:#fff;
    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:28px 0; }
.ad_bottom{ margin:0 0 24px; }

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

.section_title{ font-size:16px; font-weight:800; margin:0 0 12px; display:flex; align-items:center; gap:7px; }
.section_title i{ color:var(--main); }
.related{ margin-top:32px; }
.related_grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; }
.related_thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; display:flex; margin-bottom:6px; font-size:22px; }
.related_title{ font-size:13px; font-weight:700; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related_grid a:hover .related_title{ color:var(--main); }

.post-navigation{ margin-top:28px; 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:12px; padding:12px 0; font-size:14px; }
.post-navigation a:hover .nav_title{ color:var(--main); }
.nav_label{ flex-shrink:0; width:44px; color:var(--faint); font-size:12px; padding-top:2px; }

/* 댓글 */
.comments_area{ margin-top:32px; }
.comment_list,
.comment_list .children{ list-style:none; margin:0; padding:0; }
.comment_list{ margin-bottom:16px; }
.comment_list > li{ border-bottom:1px solid var(--line); }
.comment-body{ padding:12px 0; font-size:14px; }
.comment_list .children{ padding:0 0 10px 30px; }
.comment_list .children .comment-body{ background:var(--bg); border-radius:12px; padding:10px 12px; margin-top:6px; }
.comment_list .children .children{ padding-left:0; padding-bottom:0; }
.comment-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.comment-author{ display:flex; align-items:center; gap:8px; font-size:13px; }
.comment-author .fn{ font-style:normal; font-weight:700; }
.comment-author .avatar{ border-radius:50%; }
.comment-author .says{ display:none; }
.comment-metadata{ font-size:11px; color:var(--faint); }
.comment-metadata .edit-link{ margin-left:6px; }
.comment-awaiting-moderation{ display:block; font-size:12px; color:var(--sun); 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); }
.reply a:hover{ color:var(--main); }
.comment-reply-title{ font-size:15px; font-weight:800; margin:14px 0 8px; display:flex; gap:10px; align-items:center; }
.comment-reply-title small a{ font-size:12px; font-weight:400; color:var(--faint); }
.logged-in-as{ font-size:12px; color:var(--faint); }
.comment-form p{ margin:0 0 10px; }
.comment-form label{ display:block; font-size:12px; 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:12px;
    padding:10px 12px;
    font-family:inherit;
    font-size:14px;
    transition:border-color .2s ease, box-shadow .2s ease;
}
.comment-form textarea{ height:90px; resize:vertical; }
.comment-form input:focus,
.comment-form textarea:focus{ border-color:var(--main); box-shadow:0 0 0 3px rgba(14,124,134,.12); outline:none; }
.comment-form-cookies-consent{ display:flex; gap:6px; align-items:center; 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(--main);
    color:#fff;
    border:0;
    border-radius:12px;
    padding:10px 20px;
    font-family:inherit;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease;
}
.form-submit .submit:hover{ background:#0A666E; }
.comment_list .comment-respond{ margin:8px 0 4px 36px; padding:12px 14px; background:#fff; border:1px solid var(--main); border-radius:12px; }
.comment_list .comment-respond .comment-reply-title{ margin-top:0; font-size:13px; }

/* 관리자 로그인 시 상단 바만큼 내리기 */
.admin-bar .backg{ top:calc(50% + 16px); height:min(920px, calc(100vh - 72px)); }

/* =========================================================
 * 반응형
 *  - 1180px 이하: 가운데 화면이 위로, 박스들은 아래 2칸으로
 *  - 640px 이하 : 휴대폰, 전부 한 줄
 * ======================================================= */
@media (max-width:1180px){
    .wrap{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:16px;
        padding:20px 16px 40px;
    }
    .backg,
    .admin-bar .backg{
        order:1;
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        width:100%;
        max-width:640px;
        height:auto;
    }
    .feed{ overflow:visible; }
    .search_wrap,
    .search_bar,
    .icon_bar{ width:auto; }
    .search_wrap{ margin:20px 25px 0; }
    .icon_bar{ margin:10px 25px 0; }

    .left,
    .right{
        float:none;
        width:100%;
        max-width:640px;
        height:auto;
        margin:0;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
        align-items:start;
    }
    .left{ order:2; }
    .right{ order:3; }
    .left > .comment,
    .hot_post,
    .like,
    .gal{ width:auto; height:auto; margin:0; }
}

@media (max-width:640px){
    .wrap{ padding:0 0 28px; gap:12px; }
    .backg,
    .admin-bar .backg{ border-radius:0 0 24px 24px; box-shadow:0 8px 24px rgba(28,39,51,.06); }
    .search_wrap{ margin:14px 16px 0; }
    .icon_bar{ margin:10px 0 0; padding:0 16px; }
    .feed{ padding:6px 16px 20px; }

    .search_panel{ flex-direction:column; padding:12px 0; }
    .panel_col + .panel_col{ border-left:0; border-top:1px solid var(--line); margin-top:10px; padding-top:10px; }

    .left,
    .right{ grid-template-columns:1fr; padding:0 12px; box-sizing:border-box; gap:12px; }
    .left > .comment,
    .hot_post,
    .like,
    .gal{ border-radius:16px; }

    .feed_card h3{ font-size:15px; }
    .entry_title{ font-size:21px; }
    .entry_content{ font-size:15px; }
    .copy_link{ margin-left:0; }
    .comment_list .children{ padding-left:14px; }
    .comment-content,
    .reply,
    .comment_list .comment-respond{ margin-left:0; }

    .modal_title{ font-size:19px; }
    .modal_body{ padding:18px 18px 20px; }
}