* { box-sizing: border-box; }
body.msgm-blog-page {
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    background: #f7f7f5;
    color: #1e2025;
    font-family: 'Noto Sans KR', sans-serif;
}
.msgm-blog, .blog-article-shell {
    width: min(1180px, calc(100% - 32px));
    margin: 0 auto;
    padding: 42px 0 100px;
}
.blog-masthead {
    display: grid;
    grid-template-columns: minmax(0,1fr) 430px;
    align-items: end;
    gap: 50px;
    padding: 52px 56px;
    border: 1px solid #ebe8e2;
    border-radius: 28px;
    background:
        radial-gradient(circle at 92% 12%, rgba(146,22,27,.10), transparent 34%),
        linear-gradient(135deg,#fffdf8 0%,#fff 55%,#f8f3ec 100%);
    box-shadow: 0 24px 60px rgba(48,35,24,.07);
}
.blog-kicker, .blog-section-head>div>span {
    color: #9b7251;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .16em;
}
.blog-masthead h1 {
    margin: 11px 0 13px;
    font-size: clamp(38px,5vw,58px);
    line-height: 1.12;
    letter-spacing: -.065em;
}
.blog-masthead h1 strong { color: #951c22; }
.blog-masthead__copy>p {
    max-width: 560px;
    margin: 0;
    color: #76736e;
    font-size: 14px;
    line-height: 1.85;
    word-break: keep-all;
}
.blog-masthead__actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:26px; }
.blog-primary-link, .blog-manage-link {
    display:inline-flex; min-height:46px; align-items:center; justify-content:center;
    gap:8px; padding:0 17px; border:1px solid #951c22; border-radius:12px;
    background:#951c22; color:#fff; font-size:12px; font-weight:900; text-decoration:none;
}
.blog-manage-link { border-color:#dedbd5; background:#fff; color:#4f4c48; }
.blog-search {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; padding:10px;
    border:1px solid #e2dfda; border-radius:15px; background:rgba(255,255,255,.88);
    box-shadow:0 10px 28px rgba(36,31,26,.05);
}
.blog-search label { position:relative; }
.blog-search i { position:absolute; top:16px; left:14px; color:#a7a19a; }
.blog-search input {
    width:100%; height:46px; padding:0 14px 0 40px; border:0; outline:0;
    background:transparent; color:#25272b; font:inherit; font-size:12px;
}
.blog-search button {
    min-width:76px; border:0; border-radius:11px; background:#24262b; color:#fff;
    font:inherit; font-size:11px; font-weight:900; cursor:pointer;
}
.blog-category-nav {
    display:flex; gap:8px; margin-top:20px; padding:11px; overflow-x:auto;
    border:1px solid #e7e5e0; border-radius:16px; background:#fff; scrollbar-width:none;
}
.blog-category-nav::-webkit-scrollbar { display:none; }
.blog-category-nav a {
    display:inline-flex; flex:0 0 auto; min-height:38px; align-items:center; padding:0 14px;
    border-radius:10px; color:#696762; font-size:11px; font-weight:800;
    text-decoration:none; white-space:nowrap;
}
.blog-category-nav a.is-active { background:#951c22; color:#fff; }
.blog-featured {
    display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
    min-height:430px; margin-top:30px; overflow:hidden; border:1px solid #e7e4df;
    border-radius:24px; background:#fff; box-shadow:0 18px 45px rgba(35,30,25,.055);
}
.blog-featured__image { display:block; min-height:430px; overflow:hidden; background:#eeeae4; }
.blog-featured__image img, .blog-card__image img {
    width:100%; height:100%; object-fit:cover; transition:transform .45s ease;
}
.blog-featured:hover img, .blog-card:hover img { transform:scale(1.035); }
.blog-featured__content { display:flex; flex-direction:column; justify-content:center; padding:48px; }
.blog-post-category {
    display:inline-flex; align-self:flex-start; min-height:28px; align-items:center; padding:0 10px;
    border-radius:999px; background:#f6edea; color:#951c22; font-size:9px; font-weight:900;
}
.blog-featured__content>a, .blog-card__content>a { color:inherit; text-decoration:none; }
.blog-featured h2 {
    margin:15px 0; font-size:clamp(27px,3vw,39px); line-height:1.3;
    letter-spacing:-.055em; word-break:keep-all;
}
.blog-featured__content>p { margin:0; color:#77746f; font-size:13px; line-height:1.8; }
.blog-post-meta { display:flex; align-items:center; gap:7px; color:#9a9690; font-size:10px; }
.blog-post-meta i { width:3px; height:3px; border-radius:50%; background:#c7c3bc; }
.blog-featured .blog-post-meta { margin-top:22px; }
.blog-read-more {
    display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:22px;
    color:#2f3034!important; font-size:11px; font-weight:900;
}
.blog-feed { margin-top:44px; }
.blog-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:17px; }
.blog-section-head h2 { margin:5px 0 0; font-size:27px; letter-spacing:-.045em; }
.blog-section-head>p { margin:0; color:#97938d; font-size:11px; }
.blog-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.blog-card {
    overflow:hidden; border:1px solid #e6e3de; border-radius:19px; background:#fff;
    box-shadow:0 10px 28px rgba(35,30,25,.04); transition:transform .22s ease,box-shadow .22s ease;
}
.blog-card:hover { transform:translateY(-3px); box-shadow:0 17px 36px rgba(35,30,25,.075); }
.blog-card__image { position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#eeeae4; }
.blog-card__image>b {
    position:absolute; top:12px; left:12px; padding:6px 9px; border-radius:999px;
    background:rgba(149,28,34,.92); color:#fff; font-size:9px;
}
.blog-placeholder {
    display:grid; width:100%; height:100%; place-items:center;
    background:radial-gradient(circle at 70% 20%,rgba(149,28,34,.16),transparent 34%),linear-gradient(145deg,#f4eee8,#fff);
    color:rgba(149,28,34,.42); font-size:48px;
}
.blog-card__content { padding:18px 18px 16px; }
.blog-card h3 {
    display:-webkit-box; min-height:52px; margin:12px 0 8px; overflow:hidden;
    font-size:18px; line-height:1.45; letter-spacing:-.035em; -webkit-box-orient:vertical;
    -webkit-line-clamp:2; word-break:keep-all;
}
.blog-card__content>p {
    display:-webkit-box; min-height:48px; margin:0; overflow:hidden; color:#7e7b76;
    font-size:11px; line-height:1.65; -webkit-box-orient:vertical; -webkit-line-clamp:3;
}
.blog-card__footer {
    display:flex; align-items:center; justify-content:space-between; margin-top:16px; padding-top:13px;
    border-top:1px solid #f0eeea; color:#a19d97;
}
.blog-card__footer>i { font-size:11px; }
.blog-empty {
    display:grid; min-height:320px; place-items:center; align-content:center; padding:40px;
    border:1px solid #e5e2dc; border-radius:20px; background:#fff; text-align:center;
}
.blog-empty>i { margin-bottom:12px; color:#c8c3bc; font-size:42px; }
.blog-empty strong { font-size:19px; }
.blog-empty p { margin:7px 0 15px; color:#8c8882; font-size:11px; }
.blog-empty a { padding:10px 14px; border-radius:10px; background:#951c22; color:#fff; font-size:11px; font-weight:900; text-decoration:none; }
.blog-pagination { display:flex; justify-content:center; gap:6px; margin-top:28px; }
.blog-pagination a, .blog-pagination span {
    display:grid; width:38px; height:38px; place-items:center; border:1px solid #e0ddd8;
    border-radius:10px; background:#fff; color:#696661; font-size:11px; font-weight:800; text-decoration:none;
}
.blog-pagination span { border-color:#951c22; background:#951c22; color:#fff; }

/* 상세 */
.blog-preview-notice { position:sticky; top:0; z-index:1000; padding:11px 16px; background:#fff1cc; color:#8a5d00; font-size:11px; font-weight:800; text-align:center; }
.blog-article-shell { width:min(920px,calc(100% - 32px)); }
.blog-article-breadcrumb { display:flex; align-items:center; gap:8px; margin-bottom:16px; color:#918d87; font-size:10px; }
.blog-article-breadcrumb a { color:inherit; text-decoration:none; }
.blog-article {
    padding:52px 68px; border:1px solid #e7e4df; border-radius:24px; background:#fff;
    box-shadow:0 20px 50px rgba(35,30,25,.055);
}
.blog-article__header h1 {
    margin:17px 0 14px; font-size:clamp(32px,5vw,49px); line-height:1.3;
    letter-spacing:-.06em; word-break:keep-all;
}
.blog-article__lead { margin:0; color:#77736e; font-size:15px; line-height:1.85; word-break:keep-all; }
.blog-article__author { display:flex; align-items:center; gap:12px; margin-top:27px; padding-top:20px; border-top:1px solid #eeeae5; }
.blog-author-avatar {
    display:grid; flex:0 0 42px; width:42px; height:42px; place-items:center; border-radius:50%;
    background:#951c22; color:#fff; font-family:Georgia,serif; font-size:20px; font-style:italic;
}
.blog-article__author>div { flex:1; }
.blog-article__author strong, .blog-article__author p { display:block; margin:0; }
.blog-article__author strong { font-size:12px; }
.blog-article__author p { display:flex; align-items:center; gap:7px; margin-top:4px; color:#9a9690; font-size:9px; }
.blog-article__author p i { width:3px; height:3px; border-radius:50%; background:#c7c3bc; }
.blog-article__author>a {
    display:inline-flex; min-height:36px; align-items:center; gap:6px; padding:0 11px;
    border:1px solid #e0ddd8; border-radius:9px; color:#66635e; font-size:10px; font-weight:800; text-decoration:none;
}
.blog-article__cover {
    display: flex;
    margin: 34px -28px 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 18px;
    background: #f8f5f0;
}

.blog-article__cover img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
}
.blog-article-content { margin-top:44px; color:#313236; font-size:16px; line-height:2; word-break:keep-all; }
.blog-article-content>:first-child { margin-top:0!important; }
.blog-article-content p { margin:0 0 1.55em; }
.blog-article-content h2 { margin:2.3em 0 .8em; padding-bottom:.45em; border-bottom:2px solid #292a2e; font-size:29px; line-height:1.45; letter-spacing:-.045em; }
.blog-article-content h3 { margin:2em 0 .7em; font-size:23px; line-height:1.45; letter-spacing:-.04em; }
.blog-article-content figure { margin:2.2em 0; }
.blog-article-content img { display:block; width:auto; max-width:100%; height:auto; margin:0 auto; border-radius:15px; }
.blog-article-content figcaption { margin-top:9px; color:#96918a; font-size:11px; line-height:1.55; text-align:center; }
.blog-article-content blockquote { margin:2em 0; padding:20px 22px; border-left:4px solid #951c22; border-radius:0 13px 13px 0; background:#faf6f3; color:#5a5550; }
.blog-article-content ul, .blog-article-content ol { margin:1.3em 0; padding-left:1.5em; }
.blog-article-content li { margin:.45em 0; }
.blog-article-content a { color:#951c22; text-decoration:underline; text-underline-offset:3px; }
.blog-article-content table { width:100%; margin:2em 0; border-collapse:collapse; font-size:13px; }
.blog-article-content th, .blog-article-content td { padding:12px; border:1px solid #dedbd5; }
.blog-article-content th { background:#f7f4ef; }
.blog-article-content hr { margin:3em auto; border:0; border-top:1px solid #dcd8d2; }
.blog-article__footer { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-top:48px; padding-top:22px; border-top:1px solid #e9e6e0; }
.blog-article__share { display:flex; align-items:center; gap:10px; }
.blog-article__share>span { color:#8a8680; font-size:10px; }
.blog-article__share button, .blog-back-list {
    display:inline-flex; min-height:38px; align-items:center; gap:7px; padding:0 12px;
    border:1px solid #dfdcd7; border-radius:9px; background:#fff; color:#5f5c57;
    font:inherit; font-size:10px; font-weight:800; text-decoration:none; cursor:pointer;
}
.blog-related { margin-top:42px; }
.blog-card-grid.is-related { grid-template-columns:repeat(3,minmax(0,1fr)); }
.blog-card-grid.is-related .blog-card h3 { min-height:48px; font-size:16px; }

@media (max-width:900px) {
    .blog-masthead { grid-template-columns:1fr; gap:30px; }
    .blog-featured { grid-template-columns:1fr; }
    .blog-featured__image { min-height:360px; }
    .blog-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .blog-article { padding:45px 42px; }
}
@media (max-width:640px) {
    .msgm-blog, .blog-article-shell { width:calc(100% - 20px); padding:20px 0 82px; }
    .blog-masthead { padding:31px 20px; border-radius:18px; }
    .blog-masthead h1 { font-size:36px; }
    .blog-masthead__copy>p { font-size:12px; }
    .blog-search { grid-template-columns:1fr; }
    .blog-search button { height:42px; }
    .blog-category-nav { margin-top:12px; border-radius:13px; }
    .blog-featured { min-height:0; margin-top:18px; border-radius:17px; }
    .blog-featured__image { min-height:240px; aspect-ratio:16/10; }
    .blog-featured__content { padding:24px 19px; }
    .blog-featured h2 { font-size:27px; }
    .blog-feed { margin-top:32px; }
    .blog-card-grid, .blog-card-grid.is-related { grid-template-columns:1fr; }
    .blog-card { border-radius:15px; }
    .blog-article { padding:31px 18px; border-radius:18px; }
    .blog-article__header h1 { font-size:31px; }
    .blog-article__lead { font-size:13px; }
    .blog-article__cover { margin:27px -8px 0; border-radius:12px; }
    .blog-article-content { margin-top:32px; font-size:15px; line-height:1.9; word-break:normal; }
    .blog-article-content h2 { font-size:25px; }
    .blog-article-content h3 { font-size:21px; }
    .blog-article__footer { align-items:stretch; flex-direction:column; }
    .blog-article__share { justify-content:space-between; }
    .blog-back-list { justify-content:center; }
}


/* 블로그 본문 이미지 안전 표시 */
.blog-article-content figure {
    max-width: 100%;
    overflow: hidden;
}

.blog-article-content img {
    max-height: none !important;
    object-fit: contain !important;
}

.blog-rich-editor img {
    max-height: none !important;
    object-fit: contain !important;
}