.wrap { margin-top:80px; overflow-x:hidden; }
@media(max-width:600px){ .wrap { margin-top:55px; } }
.single-layout { max-width:1280px; margin:0 auto; margin-right:210px; padding:60px 2% 60px; display:flex; gap:32px; align-items:flex-start; }
.single-left { flex:1; min-width:0; }
.single-right { width:300px; flex-shrink:0; position:sticky; top:100px; align-self:flex-start; max-height:calc(100vh - 120px); overflow-y:auto; scrollbar-width:thin; }
.back-btn { display:inline-flex !important; align-items:center; gap:6px; padding:9px 20px !important; border:2px solid var(--main-color) !important; background:#fff !important; color:var(--main-color) !important; border-radius:20px !important; font-size:14px !important; font-weight:700 !important; cursor:pointer !important; margin-bottom:24px !important; width:auto !important; height:auto !important; text-decoration:none !important; transition:all .2s !important; }
.back-btn:hover { background:var(--main-color) !important; color:#fff !important; }
.post-header { background:#fff; border-radius:12px; padding:32px; margin-bottom:24px; box-shadow:0 2px 12px rgba(0,0,0,0.06); }
.post-cat-tag { display:inline-block; background:#e8f5e9; color:var(--main-color); font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; margin-bottom:14px; }
.post-header h1 { font-size:28px; font-weight:800; color:#111; line-height:1.5; margin-bottom:16px; }
.post-meta { display:flex; gap:16px; font-size:13px; color:#aaa; padding-bottom:16px; border-bottom:1px solid #f0f0f0; }
.post-thumb-full {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin: 0 auto 24px;
  display: block;
  background: #fff;
}
.post-article { background:#fff; border-radius:12px; padding:32px; box-shadow:0 2px 12px rgba(0,0,0,0.06); margin-bottom:24px; }
.post-content { font-family:'Pretendard','Apple SD Gothic Neo','Noto Sans KR',sans-serif; font-size:16px; line-height:1.95; color:#333; word-break:keep-all; }
.post-content h1,.post-content h2,.post-content h3,.post-content h4 { font-weight:800; margin:32px 0 14px; color:#111; }
.post-content h2{font-size:22px;} .post-content h3{font-size:19px;}
.post-content p{margin-bottom:18px;}
.post-content img{max-width:100%;border-radius:10px;margin:18px 0;display:block;}
.post-content ul,.post-content ol{padding-left:22px;margin-bottom:18px;}
.post-content li{margin-bottom:8px;}
.post-content a{color:var(--main-color);text-decoration:underline;}
.post-content strong{font-weight:800;}
.post-content table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px;}
.post-content th,.post-content td{border:1px solid #e0e0e0;padding:10px 14px;}
.post-content th{background:#f5f5f5;font-weight:700;}
/* 붙여넣은 HTML 클래스 지원 */
.post-content .post-category{display:inline-block;font-size:12px;font-weight:700;color:#0051FF;background:#e8f0ff;padding:4px 10px;border-radius:20px;margin-bottom:1rem;}
.post-content .section-title{font-size:19px;font-weight:700;color:#111;margin:2rem 0 1rem;padding-bottom:.6rem;border-bottom:2px solid #111;}
.post-content .section-body{font-size:15px;color:#3d3d3d;line-height:1.85;}
.post-content .error-box{background:#fff0f0;border-left:4px solid #E53935;border-radius:0 6px 6px 0;padding:1rem 1.25rem;margin-bottom:2rem;font-size:15px;color:#E53935;}
.post-content .error-box .label{font-size:11px;font-weight:700;opacity:.7;margin-bottom:4px;display:block;}
.post-content .post-lead{font-size:17px;color:#3d3d3d;line-height:1.85;margin-bottom:2.5rem;}
.post-content .cause-badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:10px;}
.post-content .cause-badge.most{background:#fff8e6;color:#C17A00;}
.post-content .cause-badge.rare{background:#f4f4f4;color:#6b6b6b;}
.post-content .steps{display:flex;flex-direction:column;gap:10px;margin-top:1rem;}
.post-content .step{display:flex;align-items:flex-start;gap:14px;background:#fafafa;border:1px solid #f4f4f4;border-radius:10px;padding:1rem 1.25rem;}
.post-content .step-num{width:28px;height:28px;min-width:28px;border-radius:50%;background:#111;color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;}
.post-content .step-app{font-size:14px;font-weight:700;color:#111;margin-bottom:4px;}
.post-content .step-desc{font-size:13px;color:#6b6b6b;line-height:1.6;}
.post-content .tip-box{background:#e8f7f1;border-left:4px solid #1B8A5A;border-radius:0 6px 6px 0;padding:1rem 1.25rem;margin-top:1.5rem;}
.post-content .tip-box .tip-label{font-size:11px;font-weight:700;color:#1B8A5A;margin-bottom:5px;display:block;}
.post-content .cta-wrap{margin-top:3rem;background:#111;border-radius:10px;padding:2rem 1.75rem;text-align:center;}
.post-content .cta-sub{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:8px;}
.post-content .cta-title{font-size:20px;font-weight:700;color:#fff;margin-bottom:1.25rem;line-height:1.4;}
.post-content .cta-btn{display:inline-block !important;background:#fff !important;color:#111 !important;font-size:15px !important;font-weight:700 !important;padding:.85rem 2rem !important;border-radius:50px !important;text-decoration:none !important;width:auto !important;height:auto !important;}
.post-content .seo-memo{display:none !important;}
.post-content>*{max-width:100%;box-sizing:border-box;}
.post-content .post-wrap{padding:0 !important;margin:0 !important;max-width:100% !important;}
.blog-widget{background:#fff;border-radius:12px;box-shadow:0 2px 12px rgba(0,0,0,0.06);padding:24px;margin-bottom:24px;}
.blog-widget-title{font-size:16px;font-weight:800;color:#111;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.popular-list{list-style:none;}
.popular-item{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #f5f5f5;cursor:pointer;transition:opacity .15s;}
.popular-item:last-child{border-bottom:none;}
.popular-item:hover{opacity:.75;}
.popular-num{width:26px;height:26px;background:var(--main-color);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0;}
.popular-num.top3{background:var(--sub-color);}
.popular-num.recommended{background:var(--main-color);color:#fff;}
.single-right::-webkit-scrollbar{width:5px;}
.single-right::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px;}
.popular-info{flex:1;min-width:0;}
.popular-title{font-size:13px;font-weight:600;color:#333;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.popular-views{font-size:11px;color:#aaa;margin-top:3px;}
.cta-btn{display:block !important;width:100% !important;padding:12px !important;border-radius:8px !important;font-size:14px !important;font-weight:700 !important;cursor:pointer !important;border:none !important;margin-bottom:8px !important;text-align:center !important;transition:opacity .2s !important;height:auto !important;}
.cta-btn.green{background:var(--main-color) !important;color:#fff !important;}
.cta-btn.orange{background:var(--sub-color) !important;color: var(--sub-text-color) !important;}
@media(max-width:1024px){.single-layout{margin-right:0;flex-direction:column;padding:60px 16px 40px;}.single-right{width:100%;position:static;max-height:none;overflow:visible;}}
@media(max-width:768px){.post-header h1{font-size:22px;}.post-content{font-size:15px;}}
@media(max-width:480px){.single-layout{padding:80px 14px 40px;}.post-header,.post-article{padding:20px 16px;}}

/* MOBILE_POST_OVERFLOW_FIX_SAFE: 모바일 카드 글자는 유지하고 넓은 콘텐츠만 내부 스크롤합니다. */
@media(max-width:768px){
  html,body,.wrap{max-width:100%;overflow-x:hidden !important;}
  .main,.single-layout,.single-left,.post-header,.post-article,.post-content{
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
  }
  .post-content{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
    word-break:keep-all;
  }
  .post-content img,
  .post-content video,
  .post-content iframe,
  .post-content canvas,
  .post-content svg{
    max-width:100% !important;
    height:auto !important;
  }
  .post-content iframe{width:100% !important;}

  /* MOBILE_TABLE_SCROLL_FIX: 표만 좌우로 밀어서 읽을 수 있게 합니다. */
  .post-content .post-table-scroll{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto !important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    margin:20px 0;
  }
  .post-content .post-table-scroll > table{
    display:table !important;
    width:max-content !important;
    min-width:600px !important;
    max-width:none !important;
    margin:0 !important;
  }
  .post-content .post-table-scroll th,
  .post-content .post-table-scroll td{
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
  }
  .post-content pre{
    max-width:100%;
    overflow-x:auto;
    white-space:pre-wrap;
  }
}