@charset "utf-8";

/* 본문 콘텐츠 영역 - 사용자 입력 HTML 기본 스타일 */
#bo_v_con a { color: var(--hex-primary-600); text-decoration: underline; }
#bo_v_con a:hover { color: var(--hex-primary-700); }
#bo_v_con img { max-width: 100%; height: auto; }

/* 임시저장 콘텐츠 숨김 */
.autosave_content { display: none; }


/* ================================
   바로타 SEO 블로그형 스킨 보강
   ================================ */
.barota-blog-hero {
    margin: 0 0 28px;
    padding: 34px 30px;
    border: 1px solid #dbeafe;
    border-radius: 24px;
    background:
        radial-gradient(circle at 100% 0%, rgba(0, 119, 254, .14), transparent 34%),
        linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .06);
}
.barota-blog-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: #0077fe;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
}
.barota-blog-hero h1 {
    margin: 0;
    color: #0f172a;
    font-size: clamp(26px, 4vw, 42px);
    line-height: 1.18;
    letter-spacing: -0.04em;
}
.barota-blog-hero p {
    max-width: 760px;
    margin: 14px 0 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.72;
}
.barota-blog-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}
.barota-blog-keywords span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid rgba(0, 119, 254, .16);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #1e40af;
    font-size: 13px;
    font-weight: 700;
}
.barota-list-article {
    display: block;
}
.barota-list-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.45;
}
.barota-list-title a {
    color: #1f2937;
    text-decoration: none;
}
.barota-list-title a:hover {
    color: #0077fe;
}
.barota-list-desc {
    display: -webkit-box;
    margin: 8px 0 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.65;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.barota-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 9px;
    color: #94a3b8;
    font-size: 12px;
}
.barota-list-meta span,
.barota-list-meta time {
    display: inline-flex;
    align-items: center;
}
.barota-list-meta span:not(:last-child)::after,
.barota-list-meta time:not(:last-child)::after {
    content: "";
    width: 3px;
    height: 3px;
    margin-left: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}
.barota-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-bottom: 12px;
    color: #94a3b8;
    font-size: 13px;
}
.barota-breadcrumb a {
    color: #64748b;
    text-decoration: none;
}
.barota-breadcrumb a:hover {
    color: #0077fe;
}
.barota-breadcrumb strong {
    max-width: 420px;
    overflow: hidden;
    color: #334155;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.barota-article-summary {
    margin: 20px 20px 0;
    padding: 20px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #eef6ff 100%);
}
.barota-article-summary strong {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
.barota-article-summary p {
    margin: 0;
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
}
.barota-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.barota-article-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: #fff;
    color: #0077fe;
    font-size: 12px;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(0,119,254,.12);
}
.barota-toc {
    margin: 16px 20px 0;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    background: #fff;
}
.barota-toc p {
    margin: 0 0 10px;
    color: #0f172a;
    font-weight: 900;
}
.barota-toc ol {
    display: grid;
    gap: 8px;
    margin: 0;
    padding-left: 20px;
}
.barota-toc li {
    color: #64748b;
    font-size: 14px;
    line-height: 1.45;
}
.barota-toc li.is-h3 {
    margin-left: 14px;
    font-size: 13px;
}
.barota-toc a {
    color: #334155;
    text-decoration: none;
}
.barota-toc a:hover {
    color: #0077fe;
    text-decoration: underline;
}
#bo_v_con {
    word-break: keep-all;
}
#bo_v_con h2 {
    margin: 44px 0 16px;
    padding-left: 14px;
    border-left: 4px solid #0077fe;
    color: #0f172a;
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.035em;
}
#bo_v_con h3 {
    margin: 30px 0 12px;
    color: #1e293b;
    font-size: clamp(18px, 2.4vw, 23px);
    font-weight: 850;
    line-height: 1.42;
    letter-spacing: -0.025em;
}
#bo_v_con p {
    margin: 0 0 17px;
    color: #334155;
    font-size: 16px;
    line-height: 1.86;
}
#bo_v_con ul,
#bo_v_con ol {
    margin: 12px 0 22px;
    padding-left: 24px;
}
#bo_v_con li {
    margin: 7px 0;
    color: #334155;
    line-height: 1.75;
}
#bo_v_con blockquote {
    margin: 26px 0;
    padding: 18px 20px;
    border-left: 4px solid #0077fe;
    border-radius: 14px;
    background: #f8fbff;
    color: #334155;
}
#bo_v_con table {
    width: 100%;
    margin: 22px 0;
    border-collapse: collapse;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
}
#bo_v_con th,
#bo_v_con td {
    padding: 13px 14px;
    border: 1px solid #e2e8f0;
    text-align: left;
    vertical-align: top;
}
#bo_v_con th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 850;
}
#bo_v_con img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 24px auto;
    border-radius: 18px;
}
.barota-internal-links {
    margin: 0 20px 24px;
    padding: 20px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: #f8fbff;
}
.barota-internal-links strong {
    display: block;
    margin-bottom: 12px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
}
.barota-internal-links div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.barota-internal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    background: #fff;
    color: #0077fe;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: inset 0 0 0 1px rgba(0,119,254,.16);
}
.barota-internal-links a:hover {
    background: #0077fe;
    color: #fff;
}
.barota-write-seo {
    padding: 20px;
    border: 1px solid #dbeafe;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
}
.barota-write-seo-head {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}
.barota-write-seo-head span {
    color: #0f172a;
    font-size: 17px;
    font-weight: 900;
}
.barota-write-seo-head small {
    color: #64748b;
    font-size: 13px;
}
.barota-write-seo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.barota-write-seo label {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}
.barota-write-seo p {
    margin: 7px 0 0;
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}
.barota-write-seo textarea {
    min-height: 76px;
}
.barota-write-seo-full {
    grid-column: 1 / -1;
}
.barota-write-template {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #e2e8f0;
}
.barota-write-template strong {
    display: block;
    margin-bottom: 8px;
    color: #0f172a;
    font-size: 14px;
}
.barota-write-template ol {
    margin: 0;
    padding-left: 20px;
}
.barota-write-template li {
    margin: 4px 0;
    color: #475569;
    font-size: 13px;
    line-height: 1.55;
}
@media (max-width: 768px) {
    .barota-blog-hero {
        padding: 26px 20px;
        border-radius: 20px;
    }
    .barota-blog-hero p {
        font-size: 14px;
    }
    .barota-breadcrumb strong {
        max-width: 210px;
    }
    .barota-article-summary,
    .barota-toc,
    .barota-internal-links {
        margin-left: 14px;
        margin-right: 14px;
        padding: 16px;
        border-radius: 16px;
    }
    #bo_v_con {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    #bo_v_con h2 {
        margin-top: 34px;
        font-size: 22px;
    }
    #bo_v_con p {
        font-size: 15px;
        line-height: 1.82;
    }
    #bo_v_con table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .barota-write-seo-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================
   첨부 이미지형 블로그 목록 페이지
   ================================ */
.barota-card-board{
    width:100%;
    margin:0;
    padding:0;
    background:#fff;
    font-family:'Pretendard','Noto Sans KR',sans-serif;
    color:#111;
}
.barota-card-board *{box-sizing:border-box;}
.barota-card-hero{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    background:#101b2d;
    min-height:308px;
    display:flex;
    align-items:center;
}
.barota-card-hero-inner{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:40px 20px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    align-items:center;
    gap:90px;
}
.barota-card-hero-text h1{
    margin:0;
    color:#fff;
    font-size:38px;
    line-height:1.38;
    font-weight:900;
    letter-spacing:-0.055em;
    word-break:keep-all;
}
.barota-card-hero-text p{
    margin:16px 0 0;
    color:rgba(255,255,255,.72);
    font-size:16px;
    line-height:1.65;
    word-break:keep-all;
}
.barota-card-hero-visual{
    display:flex;
    justify-content:flex-end;
}
.barota-card-hero-panel{
    width:360px;
    height:200px;
    border-radius:10px;
    background:#edf5fb;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.15);
}
.barota-card-hero-panel svg{
    width:240px;
    height:130px;
    display:block;
}
.barota-card-content{
    width:100%;
    max-width:1140px;
    margin:0 auto;
    padding:46px 20px 70px;
}
.barota-card-category{
    margin:0 0 28px;
}
.barota-card-category #bo_cate_ul,
.barota-card-category ul{
    display:flex !important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}
.barota-card-category a,
.barota-card-category li a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 15px;
    border:1px solid #e5e7eb;
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:14px;
    font-weight:700;
    text-decoration:none;
}
.barota-card-category a:hover,
.barota-card-category #bo_cate_on,
.barota-card-category .selected a{
    border-color:#111;
    background:#111;
    color:#fff;
}
.barota-card-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 22px;
}
.barota-card-count{
    color:#9ca3af;
    font-size:14px;
    font-weight:600;
}
.barota-card-count strong{
    color:#111;
    font-size:18px;
    font-weight:900;
}
.barota-card-count span{
    margin-left:7px;
    color:#b0b7c3;
}
.barota-card-actions{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.barota-card-action-btn,
.barota-card-write-btn,
.barota-card-search-btn{
    height:36px;
    padding:0 13px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    color:#374151 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:800;
    text-decoration:none !important;
    cursor:pointer;
}
.barota-card-action-btn:hover,
.barota-card-search-btn:hover{
    border-color:#111;
    color:#111 !important;
}
.barota-card-write-btn{
    border-color:#111;
    background:#111;
    color:#fff !important;
}
.barota-card-write-btn:hover{
    background:#0869f9;
    border-color:#0869f9;
}
.barota-card-checkall{
    height:36px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    color:#555;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
}
.barota-card-batch{
    display:flex;
    justify-content:flex-end;
    gap:6px;
    margin:-8px 0 18px;
}
.barota-card-batch button{
    height:32px;
    padding:0 10px;
    border:1px solid #e5e7eb;
    border-radius:7px;
    background:#fff;
    color:#555;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}
.barota-card-batch button:hover{
    border-color:#111;
    color:#111;
}
.barota-post-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:36px;
}
.barota-post-card{
    position:relative;
    min-width:0;
    background:#fff;
}
.barota-post-link{
    display:block;
    color:inherit;
    text-decoration:none !important;
}
.barota-post-thumb{
    position:relative;
    display:block;
    width:100%;
    aspect-ratio:360 / 200;
    border-radius:7px;
    background:#f4f6f8;
    overflow:hidden;
}
.barota-post-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .28s ease;
}
.barota-post-link:hover .barota-post-thumb img{
    transform:scale(1.035);
}
.barota-post-noimg{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f5f7fa;
}
.barota-post-noimg svg{
    width:120px;
    height:80px;
}
.barota-post-badge{
    position:absolute;
    left:12px;
    top:12px;
    height:26px;
    padding:0 9px;
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    background:#111;
    color:#fff;
    font-size:12px;
    font-weight:900;
    font-style:normal;
}
.barota-post-check{
    position:absolute;
    left:10px;
    top:10px;
    z-index:3;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    box-shadow:0 3px 10px rgba(15,23,42,.12);
}
.barota-post-body{
    display:block;
    padding:18px 16px 0;
}
.barota-post-category{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    margin:0 0 8px;
    padding:0 8px;
    border-radius:999px;
    background:#f1f5f9;
    color:#64748b;
    font-size:12px;
    font-weight:800;
}
.barota-post-title{
    display:-webkit-box;
    min-height:62px;
    color:#111;
    font-size:22px;
    line-height:1.42;
    font-weight:900;
    letter-spacing:-0.055em;
    word-break:keep-all;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.barota-post-link:hover .barota-post-title{
    color:#0869f9;
}
.barota-post-comment{
    margin-left:5px;
    color:#0869f9;
    font-size:14px;
    font-weight:900;
}
.barota-post-desc{
    display:-webkit-box;
    margin:9px 0 0;
    color:#64748b;
    font-size:14px;
    line-height:1.55;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.barota-post-date{
    display:block;
    margin-top:14px;
    color:#8f9aa8;
    font-size:14px;
    font-weight:500;
}
.barota-post-empty{
    padding:90px 20px;
    text-align:center;
    border:1px solid #e5e7eb;
    border-radius:12px;
    color:#999;
    font-size:15px;
}
.barota-card-pages{
    margin-top:44px;
    display:flex;
    justify-content:center;
}
.barota-card-pages .pg_wrap{
    margin:0;
}
.barota-search-layer{
    position:fixed;
    inset:0;
    z-index:99999;
}
.barota-search-layer .bo_sch_bg{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(3px);
}
.barota-search-center{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}
.barota-search-box{
    position:relative;
    width:min(460px,calc(100vw - 32px));
    border-radius:18px;
    background:#fff;
    box-shadow:0 24px 70px rgba(0,0,0,.24);
    padding:24px;
}
.barota-search-box h3{
    margin:0 0 16px;
    color:#111;
    font-size:22px;
    font-weight:900;
}
.barota-search-close{
    position:absolute;
    right:16px;
    top:14px;
    width:34px;
    height:34px;
    border:0;
    background:transparent;
    color:#999;
    font-size:30px;
    line-height:1;
    cursor:pointer;
}
.barota-search-box .sz-select{
    width:100%;
    height:44px;
    margin-bottom:10px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:0 12px;
}
.barota-search-input-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 76px;
    gap:8px;
}
.barota-search-input-row input{
    width:100%;
    height:46px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:0 13px;
    font-size:14px;
}
.barota-search-input-row button{
    height:46px;
    border:0;
    border-radius:10px;
    background:#111;
    color:#fff;
    font-size:14px;
    font-weight:900;
    cursor:pointer;
}
@media(max-width:1024px){
    .barota-card-hero-inner{
        gap:40px;
        grid-template-columns:minmax(0,1fr) 300px;
    }
    .barota-card-hero-panel{
        width:300px;
        height:170px;
    }
    .barota-post-grid{
        gap:28px 20px;
    }
    .barota-post-title{
        font-size:20px;
    }
}
@media(max-width:768px){
    .barota-card-hero{
        min-height:260px;
    }
    .barota-card-hero-inner{
        grid-template-columns:1fr;
        gap:24px;
        padding:34px 18px 38px;
        text-align:left;
    }
    .barota-card-hero-text h1{
        font-size:28px;
        line-height:1.42;
    }
    .barota-card-hero-text p{
        font-size:14px;
    }
    .barota-card-hero-visual{
        justify-content:flex-start;
    }
    .barota-card-hero-panel{
        width:100%;
        max-width:320px;
        height:150px;
    }
    .barota-card-hero-panel svg{
        width:205px;
    }
    .barota-card-content{
        padding:34px 16px 50px;
    }
    .barota-card-toolbar{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
    .barota-card-actions{
        justify-content:flex-start;
        width:100%;
    }
    .barota-post-grid{
        grid-template-columns:1fr;
        gap:34px;
    }
    .barota-post-body{
        padding:14px 4px 0;
    }
    .barota-post-title{
        min-height:auto;
        font-size:20px;
    }
    .barota-post-desc{
        font-size:13px;
    }
    .barota-post-date{
        font-size:13px;
        margin-top:10px;
    }
    .barota-card-batch{
        justify-content:flex-start;
        flex-wrap:wrap;
    }
}



/* ================================
   블로그 목록 최종 형태
   - 상단: 검정/네이비 배경 + 좌측 흰 텍스트 + 우측 이미지
   - 하단: 흰 배경 + 이미지/제목/날짜만 출력
   ================================ */
.barota-card-board{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    font-family:'Pretendard','Noto Sans KR',sans-serif !important;
    color:#111 !important;
}

.barota-card-hero{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    min-height:308px !important;
    background:#0d1829 !important;
    display:flex !important;
    align-items:center !important;
}

.barota-card-hero-inner{
    width:100% !important;
    max-width:1140px !important;
    margin:0 auto !important;
    padding:40px 20px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 360px !important;
    align-items:center !important;
    gap:90px !important;
}

.barota-card-hero-text h1{
    margin:0 !important;
    color:#fff !important;
    font-size:38px !important;
    line-height:1.38 !important;
    font-weight:900 !important;
    letter-spacing:-0.055em !important;
    word-break:keep-all !important;
}

.barota-card-hero-text p{
    margin:16px 0 0 !important;
    color:rgba(255,255,255,.72) !important;
    font-size:16px !important;
    line-height:1.65 !important;
}

.barota-card-hero-visual{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
}

.barota-card-hero-panel{
    width:360px !important;
    height:200px !important;
    border-radius:10px !important;
    background:#edf5fb !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    box-shadow:none !important;
}

.barota-card-hero-panel svg{
    width:240px !important;
    height:130px !important;
    display:block !important;
}

.barota-card-hero-panel img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    display:block !important;
}

.barota-card-posts-section{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    background:#fff !important;
}

.barota-card-content{
    width:100% !important;
    max-width:1140px !important;
    margin:0 auto !important;
    padding:46px 20px 70px !important;
    background:#fff !important;
}

.barota-card-toolbar,
.barota-card-category,
.barota-card-batch{
    display:none !important;
}

.barota-post-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:36px !important;
}

.barota-post-card{
    position:relative !important;
    min-width:0 !important;
    background:#fff !important;
    border:0 !important;
    box-shadow:none !important;
}

.barota-post-link{
    display:block !important;
    color:inherit !important;
    text-decoration:none !important;
}

.barota-post-thumb{
    position:relative !important;
    display:block !important;
    width:100% !important;
    aspect-ratio:360 / 200 !important;
    border-radius:7px !important;
    background:#f4f6f8 !important;
    overflow:hidden !important;
}

.barota-post-thumb img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:none !important;
}

.barota-post-link:hover .barota-post-thumb img{
    transform:none !important;
}

.barota-post-body{
    display:block !important;
    padding:18px 16px 0 !important;
}

.barota-post-category,
.barota-post-desc,
.barota-post-comment{
    display:none !important;
}

.barota-post-title{
    display:-webkit-box !important;
    min-height:62px !important;
    margin:0 !important;
    color:#111 !important;
    font-size:22px !important;
    line-height:1.42 !important;
    font-weight:900 !important;
    letter-spacing:-0.055em !important;
    word-break:keep-all !important;
    overflow:hidden !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}

.barota-post-link:hover .barota-post-title{
    color:#111 !important;
}

.barota-post-date{
    display:block !important;
    margin-top:12px !important;
    color:#8f9aa8 !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
}

.barota-card-pages{
    margin-top:44px !important;
    display:flex !important;
    justify-content:center !important;
}

@media(max-width:1024px){
    .barota-card-hero-inner{
        grid-template-columns:minmax(0, 1fr) 300px !important;
        gap:40px !important;
    }

    .barota-card-hero-panel{
        width:300px !important;
        height:170px !important;
    }

    .barota-post-grid{
        gap:28px 20px !important;
    }

    .barota-post-title{
        font-size:20px !important;
    }
}

@media(max-width:768px){
    .barota-card-hero{
        min-height:260px !important;
    }

    .barota-card-hero-inner{
        grid-template-columns:1fr !important;
        gap:24px !important;
        padding:34px 18px 38px !important;
        text-align:left !important;
    }

    .barota-card-hero-text h1{
        font-size:28px !important;
        line-height:1.42 !important;
    }

    .barota-card-hero-visual{
        justify-content:flex-start !important;
    }

    .barota-card-hero-panel{
        width:100% !important;
        max-width:320px !important;
        height:150px !important;
    }

    .barota-card-hero-panel svg{
        width:205px !important;
    }

    .barota-card-content{
        padding:34px 16px 50px !important;
    }

    .barota-post-grid{
        grid-template-columns:1fr !important;
        gap:34px !important;
    }

    .barota-post-body{
        padding:14px 4px 0 !important;
    }

    .barota-post-title{
        min-height:auto !important;
        font-size:20px !important;
    }

    .barota-post-date{
        margin-top:10px !important;
        font-size:13px !important;
    }
}


/* ================================
   모바일 블로그 목록 최종 형태
   - 첨부 이미지 기준: 상단 검정 배경 안에 좌측 문구 + 우측 이미지
   - 목록: 흰 배경, 썸네일 왼쪽 / 제목+날짜 오른쪽
   ================================ */
@media (max-width: 768px){
    .barota-card-board{
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        background:#fff !important;
        overflow:hidden !important;
    }

    .barota-card-hero{
        width:100vw !important;
        min-height:158px !important;
        height:158px !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        padding:0 !important;
        background:#0d1829 !important;
        display:flex !important;
        align-items:center !important;
        overflow:hidden !important;
    }

    .barota-card-hero-inner{
        width:100% !important;
        max-width:none !important;
        height:100% !important;
        margin:0 !important;
        padding:20px 20px !important;
        display:grid !important;
        grid-template-columns:minmax(0, 1fr) 120px !important;
        gap:18px !important;
        align-items:center !important;
        text-align:left !important;
    }

    .barota-card-hero-text{
        min-width:0 !important;
    }

    .barota-card-hero-text h1{
        margin:0 !important;
        color:#fff !important;
        font-size:20px !important;
        line-height:1.42 !important;
        font-weight:900 !important;
        letter-spacing:-0.055em !important;
        word-break:keep-all !important;
    }

    .barota-card-hero-text p{
        display:none !important;
    }

    .barota-card-hero-visual{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        min-width:0 !important;
    }

    .barota-card-hero-panel{
        width:120px !important;
        height:72px !important;
        max-width:120px !important;
        border-radius:8px !important;
        background:#edf5fb !important;
        box-shadow:none !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        flex:0 0 120px !important;
    }

    .barota-card-hero-panel svg{
        width:88px !important;
        height:auto !important;
        display:block !important;
    }

    .barota-card-hero-panel img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        display:block !important;
    }

    .barota-card-posts-section{
        width:100vw !important;
        margin-left:calc(50% - 50vw) !important;
        margin-right:calc(50% - 50vw) !important;
        background:#fff !important;
    }

    .barota-card-content{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;
        padding:28px 22px 46px !important;
        background:#fff !important;
    }

    .barota-card-toolbar,
    .barota-card-category,
    .barota-card-batch{
        display:none !important;
    }

    .barota-post-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:28px !important;
        width:100% !important;
    }

    .barota-post-card{
        width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:#fff !important;
        box-shadow:none !important;
    }

    .barota-post-link{
        display:grid !important;
        grid-template-columns:120px minmax(0, 1fr) !important;
        gap:16px !important;
        align-items:start !important;
        width:100% !important;
        color:inherit !important;
        text-decoration:none !important;
    }

    .barota-post-thumb{
        width:120px !important;
        height:72px !important;
        aspect-ratio:auto !important;
        border-radius:7px !important;
        background:#f4f6f8 !important;
        overflow:hidden !important;
        flex:0 0 120px !important;
    }

    .barota-post-thumb img{
        width:100% !important;
        height:100% !important;
        display:block !important;
        object-fit:cover !important;
        transform:none !important;
        transition:none !important;
    }

    .barota-post-link:hover .barota-post-thumb img{
        transform:none !important;
    }

    .barota-post-noimg{
        width:120px !important;
        height:72px !important;
    }

    .barota-post-noimg svg{
        width:76px !important;
        height:auto !important;
    }

    .barota-post-badge,
    .barota-post-category,
    .barota-post-desc,
    .barota-post-comment{
        display:none !important;
    }

    .barota-post-body{
        display:block !important;
        min-width:0 !important;
        padding:0 !important;
    }

    .barota-post-title{
        display:-webkit-box !important;
        min-height:0 !important;
        margin:0 !important;
        color:#111 !important;
        font-size:17px !important;
        line-height:1.42 !important;
        font-weight:900 !important;
        letter-spacing:-0.055em !important;
        word-break:keep-all !important;
        overflow:hidden !important;
        -webkit-line-clamp:2 !important;
        -webkit-box-orient:vertical !important;
    }

    .barota-post-link:hover .barota-post-title{
        color:#111 !important;
    }

    .barota-post-date{
        display:block !important;
        margin-top:8px !important;
        color:#8f9aa8 !important;
        font-size:13px !important;
        line-height:1.3 !important;
        font-weight:500 !important;
    }

    .barota-card-pages{
        margin-top:36px !important;
        display:flex !important;
        justify-content:center !important;
    }
}

@media (max-width: 374px){
    .barota-card-hero-inner{
        padding:18px 16px !important;
        grid-template-columns:minmax(0, 1fr) 104px !important;
        gap:14px !important;
    }

    .barota-card-hero-text h1{
        font-size:18px !important;
    }

    .barota-card-hero-panel{
        width:104px !important;
        height:68px !important;
        max-width:104px !important;
        flex-basis:104px !important;
    }

    .barota-card-content{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .barota-post-link{
        grid-template-columns:112px minmax(0, 1fr) !important;
        gap:14px !important;
    }

    .barota-post-thumb{
        width:112px !important;
        height:70px !important;
    }

    .barota-post-title{
        font-size:16px !important;
    }
}


/* ================================
   상단 우측 이미지: SVG 제거, 투명 PNG 전용
   사용 방법:
   1) 스킨 폴더 /img/blog-hero-car.png 업로드
   2) 또는 게시판 여분필드 bo_3에 PNG 이미지 URL 입력
   ================================ */
.barota-card-hero-panel{
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
    overflow:visible !important;
}

.barota-card-hero-panel svg{
    display:none !important;
}

.barota-card-hero-panel .barota-hero-png,
.barota-card-hero-panel img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:transparent !important;
}

@media (min-width: 769px){
    .barota-card-hero-panel{
        width:360px !important;
        height:200px !important;
    }
}

@media (max-width: 768px){
    .barota-card-hero-panel{
        width:120px !important;
        height:82px !important;
        max-width:120px !important;
        flex:0 0 120px !important;
    }
}

@media (max-width: 374px){
    .barota-card-hero-panel{
        width:104px !important;
        height:74px !important;
        max-width:104px !important;
        flex-basis:104px !important;
    }
}


/* ================================
   목록 썸네일 비율 고정
   - 1080x600 이미지를 PC/모바일에서 동일한 비율로 표시
   - 모바일에서 이미지가 확대/잘려 보이는 문제 방지
   ================================ */
.barota-post-thumb{
    aspect-ratio:1080 / 600 !important;
    background:#f4f6f8 !important;
}

.barota-post-thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    background:#f4f6f8 !important;
    transform:none !important;
    transition:none !important;
}

.barota-post-link:hover .barota-post-thumb img{
    transform:none !important;
}

@media (max-width:768px){
    .barota-post-link{
        grid-template-columns:120px minmax(0, 1fr) !important;
        gap:16px !important;
    }

    .barota-post-thumb{
        width:120px !important;
        height:67px !important;
        aspect-ratio:1080 / 600 !important;
        flex:0 0 120px !important;
        background:#f4f6f8 !important;
    }

    .barota-post-thumb img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        background:#f4f6f8 !important;
    }

    .barota-post-noimg{
        width:120px !important;
        height:67px !important;
    }
}

@media (max-width:374px){
    .barota-post-link{
        grid-template-columns:112px minmax(0, 1fr) !important;
        gap:14px !important;
    }

    .barota-post-thumb{
        width:112px !important;
        height:62px !important;
        aspect-ratio:1080 / 600 !important;
        flex:0 0 112px !important;
    }

    .barota-post-noimg{
        width:112px !important;
        height:62px !important;
    }
}


/* ================================
   블로그 뷰 페이지 최종 구성
   - 제목 → 작성일 → 대표 이미지 → 본문
   ================================ */
.barota-simple-view{
    width:100% !important;
    max-width:1080px !important;
    margin:0 auto !important;
    padding:40px 20px 80px !important;
    background:#fff !important;
    color:#111 !important;
    font-family:'Pretendard','Noto Sans KR',sans-serif !important;
    box-sizing:border-box !important;
}

.barota-simple-view *{
    box-sizing:border-box !important;
}

.barota-simple-head{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto 64px !important;
    text-align:center !important;
}

.barota-simple-head #bo_v_title,
.barota-simple-head h1{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    color:#000 !important;
    font-size:42px !important;
    line-height:1.28 !important;
    font-weight:950 !important;
    letter-spacing:-0.06em !important;
    word-break:keep-all !important;
}

.barota-simple-date{
    display:block !important;
    margin-top:22px !important;
    color:#8f9aa8 !important;
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:500 !important;
}

.barota-simple-main-image{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto 54px !important;
    padding:0 !important;
    border:0 !important;
    text-align:center !important;
}

.barota-simple-main-image img{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    margin:0 auto !important;
    border:0 !important;
    border-radius:18px !important;
    object-fit:contain !important;
}

.barota-simple-content-wrap{
    width:100% !important;
    max-width:980px !important;
    margin:0 auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:#fff !important;
    box-shadow:none !important;
}

.barota-simple-content{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    color:#263044 !important;
    font-size:17px !important;
    line-height:1.9 !important;
    word-break:keep-all !important;
}

.barota-simple-view #bo_v_con{
    padding:0 !important;
    margin:0 !important;
    color:#263044 !important;
    font-size:17px !important;
    line-height:1.9 !important;
    word-break:keep-all !important;
}

.barota-simple-view #bo_v_con p{
    margin:0 0 20px !important;
    color:#263044 !important;
    font-size:17px !important;
    line-height:1.9 !important;
}

.barota-simple-view #bo_v_con h2{
    margin:52px 0 18px !important;
    padding:0 !important;
    border:0 !important;
    color:#111 !important;
    font-size:30px !important;
    line-height:1.36 !important;
    font-weight:950 !important;
    letter-spacing:-0.045em !important;
}

.barota-simple-view #bo_v_con h3{
    margin:34px 0 14px !important;
    color:#111 !important;
    font-size:24px !important;
    line-height:1.4 !important;
    font-weight:900 !important;
    letter-spacing:-0.04em !important;
}

.barota-simple-view #bo_v_con ul,
.barota-simple-view #bo_v_con ol{
    margin:16px 0 24px !important;
    padding-left:24px !important;
}

.barota-simple-view #bo_v_con li{
    margin:8px 0 !important;
    color:#263044 !important;
    line-height:1.8 !important;
}

.barota-simple-view #bo_v_con img{
    display:block !important;
    max-width:100% !important;
    height:auto !important;
    margin:34px auto !important;
    border-radius:18px !important;
}

.barota-simple-admin{
    max-width:980px !important;
    margin:50px auto 0 !important;
    padding-top:18px !important;
    border-top:1px solid #eef1f5 !important;
    display:flex !important;
    justify-content:flex-end !important;
    gap:8px !important;
}

.barota-simple-admin a{
    height:36px !important;
    padding:0 13px !important;
    border:1px solid #e5e7eb !important;
    border-radius:8px !important;
    background:#fff !important;
    color:#374151 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:13px !important;
    font-weight:800 !important;
    text-decoration:none !important;
}

.barota-simple-admin a:hover{
    border-color:#111 !important;
    color:#111 !important;
}

@media(max-width:768px){
    .barota-simple-view{
        padding:34px 0px 0px !important;
    }

    .barota-simple-head{
        margin-bottom:34px !important;
    }

    .barota-simple-head #bo_v_title,
    .barota-simple-head h1{
        font-size:28px !important;
        line-height:1.34 !important;
        letter-spacing:-0.055em !important;
    }

    .barota-simple-date{
        margin-top:14px !important;
        font-size:13px !important;
    }

    .barota-simple-main-image{
        margin-bottom:34px !important;
    }

    .barota-simple-main-image img{
        border-radius:12px !important;
    }

    .barota-simple-view #bo_v_con,
    .barota-simple-view #bo_v_con p{
        font-size:15px !important;
        line-height:1.82 !important;
    }

    .barota-simple-view #bo_v_con h2{
        margin-top:38px !important;
        font-size:23px !important;
    }

    .barota-simple-view #bo_v_con h3{
        margin-top:28px !important;
        font-size:20px !important;
    }

    .barota-simple-admin{
        justify-content:center !important;
        flex-wrap:wrap !important;
    }
}


/* 상세페이지 하단 목록 버튼 */
.barota-view-list-btn-wrap{
    width:100%;
    max-width:1040px;
    margin:50px auto 80px;
    padding:0 20px;
    text-align:center;
    box-sizing:border-box;
}

.barota-view-list-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:150px;
    height:48px;
    padding:0 28px;
    border:1px solid #111;
    border-radius:999px;
    background:#111;
    color:#fff !important;
    font-size:15px;
    font-weight:800;
    line-height:1;
    letter-spacing:-0.03em;
    text-decoration:none !important;
    box-sizing:border-box;
}

.barota-view-list-btn:hover{
    background:#0869f9;
    border-color:#0869f9;
    color:#fff !important;
    text-decoration:none !important;
}

@media(max-width:768px){
    .barota-view-list-btn-wrap{
        margin:38px auto 60px;
        padding:0 18px;
    }

    .barota-view-list-btn{
        width:100%;
        max-width:260px;
        height:46px;
        font-size:14px;
    }
}