@charset "UTF-8";
/* ============================================================================
   ed:m 게시글 디자인 — 게시판 공통 CSS
   파일명 : edmclompt-post.css
   버전   : 2026-09-23
   만든 곳: 브랜드마케팅실 (게시글 디자인 프롬프트)

   ── 무엇인가 ───────────────────────────────────────────────────────────
   게시판에 올리는 게시글의 디자인입니다.
   지금은 글을 쓸 때마다 이 CSS가 본문 안에 <style> 로 같이 들어갑니다(글당 약 24KB).
   이 파일을 게시판에 한 번 걸어 두면, 앞으로는 본문에 HTML만 넣으면 됩니다.

   ── 적용 범위 (중요) ───────────────────────────────────────────────────
   이 파일의 모든 선택자는 .edmclompt-post 로 시작합니다.
   글 본문 최상위의 <div class="edmclompt-post"> 안에서만 동작하며,
   헤더·메뉴·목록·댓글 등 그 바깥에는 아무 영향이 없습니다.

   클래스 이름을 일부러 흔하지 않게 지었습니다.
   기존 게시판 CSS와 이름이 겹쳐서 서로 영향을 주는 일이 없도록 한 것입니다.
   변수 이름(--edmclompt-*)과 레이어 이름도 같은 이유로 붙였습니다.

   ── 걸어야 하는 화면 ───────────────────────────────────────────────────
   1) 글 보기 화면      (필수)
   2) 글 미리보기 화면  (필수 — 작성자가 발행 전에 확인합니다)
   3) 에디터 편집 화면  (가능하면 — 편집 중에도 디자인이 보입니다)

   ── 로드 위치 ──────────────────────────────────────────────────────────
   게시판 기존 CSS 뒤를 권합니다. 앞에 두어도 동작합니다(확인 완료).

   ── 건드리면 안 되는 것 ────────────────────────────────────────────────
   1. 아래 @layer edmclompt-design, edmclompt-guard; 선언
      반드시 이 파일의 첫 규칙이어야 하고 순서를 바꾸면 안 됩니다.
      게시판 CSS와의 우선순위를 정하는 줄이라, 빠지면 디자인이 전부 밀립니다.
   2. !important
      실수가 아니라 의도입니다. 빼면 소제목·사진·표가 게시판 기본값으로 돌아갑니다.

   ── 글마다 달라지는 부분 ───────────────────────────────────────────────
   글 본문에 @layer edmclompt-design{ } 블록이 따로 들어올 수 있습니다.
   글마다 달라지는 디자인이라 이 파일로 합칠 수 없습니다.
   레이어가 달라 이 파일과 충돌하지 않습니다.

   ── 전환 방법 ──────────────────────────────────────────────────────────
   이 파일을 건 뒤에도 당분간은 본문 안에 같은 CSS가 함께 들어옵니다.
   내용이 같아 중복되어도 화면은 그대로입니다.
   전환이 확인되면 본문 쪽을 빼겠습니다. 한 번에 바꾸지 않아도 됩니다.

   ── 폰트 ───────────────────────────────────────────────────────────────
   Pretendard Variable 을 우선 지정합니다.
   사이트에 없으면 시스템 폰트로 자동 대체되며 레이아웃은 깨지지 않습니다.

   ── 캐시 ───────────────────────────────────────────────────────────────
   내용이 바뀌면 파일명 뒤에 ?v=날짜 를 붙여 주세요.
   (예: edmclompt-post.css?v=20260923)
   ============================================================================ */

/* ===== ed:m 게시글 뼈대 (수정 금지) ===== */
@layer edmclompt-design, edmclompt-guard;   /* 이 줄의 순서를 바꾸지 마라 */
.edmclompt-post{
  /* 색 — ed:m Design System 토큰. 여기 없는 색은 쓰지 마라 */
  --edmclompt-green:#1EC95B; --edmclompt-green-600:#18A149;
  --edmclompt-red:#FC1D01; --edmclompt-blue:#006BC8; --edmclompt-blue-500:#0086FA;
  --edmclompt-ink:#000000; --edmclompt-text:#333333; --edmclompt-sub:#666666; --edmclompt-mute:#999999;
  --edmclompt-band:#F5F5F7; --edmclompt-band-yellow:#F8FAEC; --edmclompt-band-blue:#EAFAFF;
  /* 문장 안 강조 면. 사내 후기 상세 템플릿에서 온 색(사용자 제공 2026-09-18) */
  --edmclompt-mark:#FDF2E1;
  --edmclompt-line:#DADADA; --edmclompt-line-light:#E4E8F1;
  --edmclompt-grad-green:linear-gradient(90deg,#1EC95B,#01D29C);
  --edmclompt-grad-blue:linear-gradient(90deg,#0086FA,#01D29C);
  --edmclompt-grad-red:linear-gradient(90deg,#FC1D01,#FDA245);
  --edmclompt-radius:12px; --edmclompt-radius-sm:8px; --edmclompt-radius-lg:24px; --edmclompt-radius-pill:9999px;
  --edmclompt-shadow:0 4px 10px 0 rgba(0,0,0,.04);
  --edmclompt-shadow-blue:0 4px 10px 0 #EBEFF4; --edmclompt-shadow-blue-2:0 8px 20px 0 #EBEFF4;
  --edmclompt-font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
             "Malgun Gothic","맑은 고딕",system-ui,sans-serif;
  --edmclompt-h2:24px; --edmclompt-h3:20px; --edmclompt-h4:18px;
  --edmclompt-body:18px; --edmclompt-strong:20px; --edmclompt-cap:14px;
  --edmclompt-section:48px; --edmclompt-cell:12px 16px; --edmclompt-rowhead:160px;
  --edmclompt-h2-mb:12px;        /* 소제목과 그 아래 내용 사이 — 붙어 보여야 한 덩어리가 된다 */
}
@media (max-width:768px){
  .edmclompt-post{ --edmclompt-h2:20px; --edmclompt-h3:18px; --edmclompt-h4:16px;
             --edmclompt-body:16px; --edmclompt-strong:18px; --edmclompt-cap:14px;
             --edmclompt-section:32px; --edmclompt-cell:8px 12px; --edmclompt-rowhead:96px;
             --edmclompt-h2-mb:8px; }
}
.edmclompt-post *, .edmclompt-post *::before, .edmclompt-post *::after{ box-sizing:border-box; }
/* 표가 넘칠 때만 오른쪽 그라데이션이 켜진다.
   스크롤할 곳이 없으면 타임라인이 꺼져 아래 opacity:0 이 그대로 남는다 */
@keyframes edmclompt-fade-edge{ from{ opacity:1; } to{ opacity:0; } }

@layer edmclompt-guard{
  .edmclompt-post{ width:100% !important; max-width:none !important;
    margin:0 !important; padding:0 !important;
    font-size:var(--edmclompt-body) !important; line-height:1.5 !important;
    font-weight:400 !important; color:var(--edmclompt-text) !important;
    letter-spacing:-0.01em !important; text-align:left !important;
    word-break:keep-all; overflow-wrap:break-word; }
  /* ★ 단어 중간에서 줄이 바뀌지 않게 한다. 위 .edmclompt-post 한 곳에만 주면 '상속'이라
     게시판이 p·li 를 직접 겨냥할 때 진다(실측) → 자식까지 직접 겨냥한다 */
  .edmclompt-post, .edmclompt-post *{ word-break:keep-all !important; overflow-wrap:break-word !important; }
  .edmclompt-post, .edmclompt-post *{ font-family:var(--edmclompt-font) !important; }
  .edmclompt-post h2{ margin:0 0 var(--edmclompt-h2-mb) !important; font-size:var(--edmclompt-h2) !important;
    font-weight:700 !important; line-height:1.35 !important;
    letter-spacing:-0.02em !important; color:var(--edmclompt-ink) !important; }
  /* 후기·인터뷰의 질문 제목 — h2 이지만 한 단계 작게 보인다(사용자 결정 2026-09-22).
     구조(h2)는 그대로 둔다. 목차와 검색엔진이 읽는 글 구조를 바꾸지 않는다.
     새 숫자를 만들지 않고 h3 값(20/18)을 그대로 쓴다 — 4번 표 */
  .edmclompt-post h2.edmclompt-qtitle{ font-size:var(--edmclompt-h3) !important; }
  .edmclompt-post h3{ margin:32px 0 12px !important; font-size:var(--edmclompt-h3) !important;
    font-weight:700 !important; line-height:1.5 !important; color:var(--edmclompt-ink) !important; }
  .edmclompt-post h4{ margin:24px 0 8px !important; font-size:var(--edmclompt-h4) !important;
    font-weight:700 !important; line-height:1.5 !important; color:var(--edmclompt-ink) !important; }
  .edmclompt-post h2:first-child, .edmclompt-post h3:first-child, .edmclompt-post h4:first-child,
  .edmclompt-post section > h2:first-child, .edmclompt-post section > h3:first-child,
  .edmclompt-post section > h4:first-child{ margin-top:0 !important; }
  .edmclompt-post p{ margin:0 0 16px !important; font-size:var(--edmclompt-body) !important;
    line-height:1.5 !important; color:var(--edmclompt-text) !important; }
  .edmclompt-post p:last-child{ margin-bottom:0 !important; }
  .edmclompt-post ul, .edmclompt-post ol{ margin:0 0 16px !important; padding-left:20px !important; }
  .edmclompt-post li{ margin:0 0 8px !important; font-size:var(--edmclompt-body) !important;
    line-height:1.5 !important; color:var(--edmclompt-text) !important; }
  /* 굵은 글자에 색을 박지 않는다(사용자 결정 2026-09-21) — 둘레 본문색을 그대로 따라간다.
     검정을 !important 로 박으면 에디터에서 굵은 글자 색을 바꿀 수 없다. 굵게를 빼야 색이 먹고,
     다시 굵게를 켜면 우리 검정이 그 색을 덮어버린다(사용자 확인 2026-09-21) */
  .edmclompt-post strong, .edmclompt-post b{ font-weight:700 !important; }
  /* 굵게 끄기 — 에디터가 굵기를 손댄 자리에서만 700 강제를 비켜준다(사용자 결정 2026-09-21).
     강제가 있으면 에디터 아이콘만 반응하고 글자는 안 바뀐다.
     끄기는 "둘레 글자와 같게"라는 뜻이라 inherit 로 정확히 옮겨진다
     (색은 에디터가 고른 값을 CSS로 가져올 수 없어 강제를 통째로 뺐다 — 위 주석).
     두 방식을 다 덮는다 — 태그에 직접 쓰기 / 바깥에 한 겹 씌우기 */
  .edmclompt-post strong[style*="font-weight"], .edmclompt-post b[style*="font-weight"],
  .edmclompt-post [style*="font-weight"] strong, .edmclompt-post [style*="font-weight"] b{
    font-weight:inherit !important; }
  .edmclompt-post a{ color:var(--edmclompt-blue) !important; text-decoration:none !important; }
  .edmclompt-post blockquote{ margin:0 0 16px !important; padding:0 !important;
    border:0 !important; background:none !important; }
  .edmclompt-post blockquote::before, .edmclompt-post blockquote::after{ content:none !important; }
  .edmclompt-post img{ display:block !important; max-width:100% !important; height:auto !important; }
  /* 이미지는 원본 크기로 두고 글 폭까지만 가둔다. --w 를 적으면 그 값이 상한이 된다.
     img 에 width 를 강제하지 않아야 실무자가 게시판 에디터에서 잡고 늘리고 줄일 수 있다 */
  .edmclompt-post .edmclompt-imgbox{ width:fit-content !important;
    max-width:min(100%, var(--w,100%)) !important;
    margin-left:0 !important; margin-right:auto !important; }
  .edmclompt-post .edmclompt-imgbox img{ max-width:100% !important; height:auto !important; }
  /* 캡션은 사진에 붙어야 하므로 아래 섹션 간격 규칙보다 힘을 높여 둔다 */
  .edmclompt-post.edmclompt-post .edmclompt-caption{ margin:8px 0 0 !important; font-size:var(--edmclompt-cap) !important;
    line-height:1.5 !important; color:var(--edmclompt-sub) !important; text-align:left !important; }
  .edmclompt-post table{ display:table !important; width:100% !important;
    border-collapse:collapse !important; table-layout:fixed !important; }
  /* 좁은 화면에서 눌리는 표만 감싼다.
     스크롤바는 숨기고, 오른쪽 흰 그라데이션으로 "더 있다"를 알린다.
     끝까지 밀면 그라데이션이 사라진다(자바스크립트 없이 CSS만으로) */
  .edmclompt-post .edmclompt-scroll{ display:flex !important; max-width:100% !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    scrollbar-width:none !important; }
  .edmclompt-post .edmclompt-scroll::-webkit-scrollbar{ display:none !important;
    width:0 !important; height:0 !important; }
  .edmclompt-post .edmclompt-scroll table{ flex:1 0 auto !important;
    min-width:var(--minw,520px) !important; margin:0 !important; }
  .edmclompt-post .edmclompt-scroll::after{ content:"" !important; display:block !important;
    position:sticky !important; right:0 !important;
    flex:0 0 auto !important; width:48px !important; margin-left:-48px !important;
    background:linear-gradient(to right, rgba(255,255,255,0), #fff) !important;
    pointer-events:none !important;
    opacity:0;   /* ★ !important 를 붙이면 애니메이션을 이겨서 영영 안 보인다 */
    animation:edmclompt-fade-edge linear both !important;
    animation-timeline:scroll(nearest inline) !important;
    animation-range:82% 100% !important; }
  .edmclompt-post th, .edmclompt-post td{ padding:var(--edmclompt-cell) !important;
    border:1px solid var(--edmclompt-line) !important; background:#fff !important;
    font-size:var(--edmclompt-body) !important; line-height:1.5 !important;
    color:var(--edmclompt-text) !important; font-weight:400 !important;
    text-align:left !important; vertical-align:top !important; }
  /* 라벨 열 — 폭을 고정하고 회색 면을 줘서 내용 열과 구분한다 */
  .edmclompt-post th[scope="row"]{ width:var(--edmclompt-rowhead) !important;
    background:var(--edmclompt-band) !important; font-weight:700 !important;
    color:var(--edmclompt-ink) !important; }
  .edmclompt-post thead th, .edmclompt-post th[scope="col"]{ background:var(--edmclompt-band) !important;
    font-weight:700 !important; color:var(--edmclompt-ink) !important; }
  /* 주요 링크(CTA) — 사내 규정 서식 */
  .edmclompt-post .edmclompt-cta{ padding:2px 4px !important; font-weight:700 !important;
    color:#0000ff !important; background:#ffff00 !important; text-decoration:none !important; }
  /* 문장 안 강조 — 면만 깐다. 굵기는 건드리지 않는다(사용자 결정 2026-09-21).
     medium(500) 은 에디터가 만들 수 없는 값이라 실무자가 굵게 버튼으로 끌 수 없었다.
     면은 늘 span 이 쓰고, 굵게가 필요하면 그 안에 strong 을 넣는다(굵기를 꺼도 면이 남는다).
     여백은 사방 0 — 좌우를 주면 한국어 조사가 떨어져 보이고, 위아래를 주면
     에디터에서 형광을 덧칠했을 때 그만큼 크림색 테두리가 남는다(실측 2026-09-21).
     글자색은 !important 로 잠그지 않는다 — 잠그면 에디터에서 면 위 글자 색을 못 바꾼다(2026-09-21) */
  /* 면 위 글자색은 검정이 기본값이다 — 잠그지 않는다(사용자 결정 2026-09-22).
     !important 로 잠그면 에디터에서 색을 못 바꾼다(49번과 같은 자리).
     기본값이라 에디터가 글자에 직접 색을 쓰면 인라인이 이기고,
     바깥에 한 겹 씌우면 아래 예외가 그 색을 따라가게 한다.
     ★ 기본값은 게시판이 span 에 색을 직접 걸면 진다 — 그때는 면·여백만 남고 글자색이 밀린다 */
  .edmclompt-post .edmclompt-mark{ padding:0 !important; color:var(--edmclompt-ink);
    background:var(--edmclompt-mark) !important; }
  .edmclompt-post [style*="color"] .edmclompt-mark, .edmclompt-post font[color] .edmclompt-mark{ color:inherit; }
  /* ===== 재료 7종 — 마크업은 3-4 참고. 여백이 게시판에 먹히지 않게 여기서 준다 ===== */
  /* 1. 소제목 아래 리드 문장 */
  .edmclompt-post .edmclompt-lead{ margin:0 0 24px !important; font-size:var(--edmclompt-strong) !important;
    font-weight:400 !important; line-height:1.5 !important; color:var(--edmclompt-sub) !important; }
  /* 2. 목차 — 박스 없이, 번호는 텍스트로, 끝에 화살표로 클릭 유도. ul/li 를 쓰지 않는다 */
  .edmclompt-post .edmclompt-toc{ display:inline-block !important; width:fit-content !important;
    max-width:100% !important; }
  .edmclompt-post .edmclompt-toc__title{ margin:0 0 16px !important; font-size:var(--edmclompt-h4) !important;
    font-weight:700 !important; color:var(--edmclompt-ink) !important; }
  .edmclompt-post .edmclompt-toc__list{ display:block !important;
    border-top:1px solid var(--edmclompt-line) !important; }
  .edmclompt-post .edmclompt-toc__item{ display:flex !important; align-items:center !important;
    width:100% !important; gap:14px !important; padding:14px 4px !important;
    border-bottom:1px solid var(--edmclompt-line-light) !important; background:none !important;
    white-space:nowrap !important; font-size:var(--edmclompt-body) !important;
    font-weight:500 !important; color:var(--edmclompt-text) !important; text-decoration:none !important; }
  .edmclompt-post .edmclompt-toc__num{ flex:0 0 auto !important; font-size:15px !important;
    font-weight:800 !important; letter-spacing:-0.01em !important; color:var(--edmclompt-green-600) !important; }
  .edmclompt-post .edmclompt-toc__arrow{ flex:0 0 auto !important; width:6px !important; height:6px !important;
    margin-left:auto !important; border:solid var(--edmclompt-green) !important;
    border-width:0 2px 2px 0 !important; transform:rotate(-45deg) !important; }
  @media (max-width:768px){
    .edmclompt-post .edmclompt-toc{ display:block !important; width:100% !important; }
    .edmclompt-post .edmclompt-toc__item{ white-space:normal !important; }
  }
  /* 3. 카드 격자 */
  .edmclompt-post .edmclompt-cards{ display:grid !important; gap:24px !important; }
  .edmclompt-post .edmclompt-cards > *{ min-width:0 !important; }
  .edmclompt-post .edmclompt-cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .edmclompt-post .edmclompt-cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  /* 마지막 줄에 빈 칸이 남지 않게 자동으로 늘린다 */
  .edmclompt-post .edmclompt-cards--2 > :last-child:nth-child(odd){ grid-column:1 / -1 !important; }
  .edmclompt-post .edmclompt-cards--3 > :last-child:nth-child(3n+1){ grid-column:1 / -1 !important; }
  .edmclompt-post .edmclompt-cards--3 > :last-child:nth-child(3n+2){ grid-column:span 2 !important; }
  .edmclompt-post .edmclompt-card{ padding:24px !important; background:#fff !important;
    border:1px solid var(--edmclompt-line-light) !important;
    border-radius:var(--edmclompt-radius) !important; box-shadow:var(--edmclompt-shadow-blue) !important; }
  /* 4. 강조 박스 / Tip 박스 */
  .edmclompt-post .edmclompt-box{ padding:24px !important; background:#fff !important;
    border:1px solid var(--edmclompt-line-light) !important;
    border-radius:var(--edmclompt-radius) !important; box-shadow:var(--edmclompt-shadow-blue-2) !important; }
  .edmclompt-post .edmclompt-tip{ padding:24px !important; background:#fff !important;
    border:1px solid var(--edmclompt-line) !important; border-radius:var(--edmclompt-radius) !important; box-shadow:none !important; }
  /* 박스·카드 안 제목. 소제목 태그가 아니므로 여기서 크기를 준다 */
  .edmclompt-post .edmclompt-boxtitle{ margin:0 0 8px !important; font-size:var(--edmclompt-h4) !important;
    font-weight:700 !important; line-height:1.5 !important; color:var(--edmclompt-ink) !important; }
  /* 박스 제목을 포인트 레드로 세우고 싶을 때 — 클래스를 하나 더 붙인다.
     인라인 style 로 색을 주면 위 !important 에 져서 검정 그대로다 */
  .edmclompt-post .edmclompt-boxtitle--point{ color:var(--edmclompt-red) !important; }
  .edmclompt-post .edmclompt-card > :last-child, .edmclompt-post .edmclompt-box > :last-child,
  .edmclompt-post .edmclompt-tip > :last-child{ margin-bottom:0 !important; }
  /* 5. 체크 목록 — 체크는 문자가 아니라 CSS 도형으로 그린다 */
  .edmclompt-post .edmclompt-list{ display:block !important; }
  .edmclompt-post .edmclompt-list__item{ display:block !important; position:relative !important;
    padding-left:24px !important; margin:0 0 8px !important;
    font-size:var(--edmclompt-body) !important; line-height:1.5 !important;
    color:var(--edmclompt-text) !important; }
  .edmclompt-post .edmclompt-list__item:last-child{ margin-bottom:0 !important; }
  /* 체크는 칸(grid)으로 나누지 않고 띄워서 그린다 — 칸을 나누면 줄 안의
     <strong> 이 별개의 칸이 돼 한 줄이 여러 줄로 쪼개진다 */
  .edmclompt-post .edmclompt-list__item::before{ content:"" !important; position:absolute !important;
    left:4px !important; top:3px !important;
    width:6px !important; height:11px !important;
    border:solid var(--edmclompt-green) !important; border-width:0 2px 2px 0 !important;
    transform:rotate(45deg) !important; }
  /* 줄 맨 앞 이모지가 이미 글머리표일 때 — 마커를 끈다 */
  .edmclompt-post .edmclompt-list--bare .edmclompt-list__item{ padding-left:0 !important; }
  .edmclompt-post .edmclompt-list--bare .edmclompt-list__item::before{ display:none !important; }
  /* FAQ — 박스도 배경도 없다. 항목 사이 가는 선으로만 구분한다. 마크업은 3-4 ⑦ 참고.
     display:block 을 명시하는 이유 — 격자로 두면 문장 중간의 <strong> 에서 줄이 쪼개진다 */
  .edmclompt-post .edmclompt-faq{ display:block !important; padding:0 !important;
    background:none !important; border:0 !important; }
  .edmclompt-post .edmclompt-faq__item{ display:block !important; padding:0 !important; border:0 !important; }
  .edmclompt-post .edmclompt-faq__item + .edmclompt-faq__item{ margin-top:20px !important;
    padding-top:20px !important; border-top:1px solid var(--edmclompt-line) !important; }
  /* 마지막 답변 아래에도 선을 긋는다 — 없으면 다음 섹션과 구분이 안 된다(사용자 지적 2026-09-18) */
  .edmclompt-post .edmclompt-faq__item:last-child{ padding-bottom:20px !important;
    border-bottom:1px solid var(--edmclompt-line) !important; }
  .edmclompt-post .edmclompt-faq__q{ margin:0 0 8px !important; font-size:var(--edmclompt-h4) !important;
    font-weight:700 !important; line-height:1.5 !important; color:var(--edmclompt-ink) !important; }
  /* 질문 번호·라벨만 그린. FAQ 전용이 아니다 — 후기 문답에도 쓴다.
     질문 글자가 검정으로 강제되므로 클래스로 덮는다 */
  .edmclompt-post .edmclompt-qlabel{ color:var(--edmclompt-green-600) !important; font-weight:700 !important; }
  .edmclompt-post .edmclompt-faq__a{ margin:0 !important; font-size:var(--edmclompt-body) !important;
    font-weight:400 !important; line-height:1.5 !important; color:var(--edmclompt-text) !important; }
  /* 답변이 두 문단 이상일 때. q→a 는 이미 8px 이라 값이 겹쳐도 그대로다 */
  .edmclompt-post .edmclompt-faq__item > p + p{ margin-top:8px !important; }
  @media (max-width:768px){
    .edmclompt-post .edmclompt-cards{ gap:8px !important; }
    .edmclompt-post .edmclompt-cards--2, .edmclompt-post .edmclompt-cards--3{ grid-template-columns:1fr !important; }
    .edmclompt-post .edmclompt-cards--2 > :last-child:nth-child(odd),
    .edmclompt-post .edmclompt-cards--3 > :last-child:nth-child(3n+1),
    .edmclompt-post .edmclompt-cards--3 > :last-child:nth-child(3n+2){ grid-column:auto !important; }
    .edmclompt-post .edmclompt-card, .edmclompt-post .edmclompt-box, .edmclompt-post .edmclompt-tip{ padding:16px !important; }
    .edmclompt-post .edmclompt-faq__item + .edmclompt-faq__item{ margin-top:16px !important;
      padding-top:16px !important; }
    .edmclompt-post .edmclompt-faq__item:last-child{ padding-bottom:16px !important; }
  }

  /* ===== 여백 뼈대 — 이 세 덩어리는 반드시 맨 끝에 둔다(뒤에 올수록 이긴다) ===== */
  /* 1) 섹션 안에서 덩어리 요소 위아래 여백 */
  .edmclompt-post .edmclompt-toc, .edmclompt-post .edmclompt-cards, .edmclompt-post .edmclompt-box, .edmclompt-post .edmclompt-tip,
  .edmclompt-post .edmclompt-list, .edmclompt-post .edmclompt-imgbox, .edmclompt-post table,
  .edmclompt-post .edmclompt-scroll, .edmclompt-post .edmclompt-faq,
  .edmclompt-post .edmclompt-btnrow{ margin-top:24px !important; margin-bottom:24px !important; }
  /* 2) 섹션 사이 간격. 섹션 안에서는 적용되지 않는다 */
  .edmclompt-post.edmclompt-post > * + *{ margin-top:var(--edmclompt-section) !important; }
  /* 3) 맨 위와 섹션 첫 줄은 위 여백 0.
        <style> 도 자식으로 세어지므로 그 다음 요소까지 포함한다 */
  .edmclompt-post.edmclompt-post > *:first-child,
  .edmclompt-post.edmclompt-post > style:first-child + *,
  .edmclompt-post.edmclompt-post section > *:first-child{ margin-top:0 !important; }

  /* 마무리 CTA — 모든 글 맨 아래에 고정. 마크업은 아래 3-1 참고 */
  .edmclompt-post.edmclompt-post .edmclompt-end{ margin-top:80px !important; }
  .edmclompt-post .edmclompt-end{ display:block !important; padding:40px 24px !important;
    background:var(--edmclompt-band-yellow) !important;
    border-radius:var(--edmclompt-radius) !important; text-align:center !important; }
  .edmclompt-post .edmclompt-end__t{ margin:0 0 8px !important; font-size:var(--edmclompt-h3) !important;
    font-weight:700 !important; line-height:1.5 !important; color:var(--edmclompt-ink) !important; }
  .edmclompt-post .edmclompt-end__s{ margin:0 0 24px !important; font-size:var(--edmclompt-strong) !important;
    line-height:1.5 !important; color:var(--edmclompt-text) !important; }
  .edmclompt-post .edmclompt-end__btns{ display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important;
    max-width:480px !important; margin:0 auto !important; }
  .edmclompt-post .edmclompt-end__btns--1{ grid-template-columns:minmax(0,1fr) !important;
    max-width:320px !important; }
  .edmclompt-post .edmclompt-end__btn{ display:block !important; min-width:0 !important;
    padding:16px 12px !important; border-radius:var(--edmclompt-radius-sm) !important;
    font-size:var(--edmclompt-body) !important; font-weight:700 !important; line-height:1.5 !important;
    text-align:center !important; text-decoration:none !important; }
  .edmclompt-post .edmclompt-end__btn--fill{ background:var(--edmclompt-green) !important;
    border:1px solid var(--edmclompt-green) !important; color:#fff !important; }
  .edmclompt-post .edmclompt-end__btn--line{ background:#fff !important;
    border:1px solid var(--edmclompt-sub) !important; color:var(--edmclompt-ink) !important; }
  @media (max-width:768px){
    .edmclompt-post.edmclompt-post .edmclompt-end{ margin-top:48px !important; }
    .edmclompt-post .edmclompt-end{ padding:24px 16px !important; }
    .edmclompt-post .edmclompt-end__btns{ grid-template-columns:1fr !important; gap:8px !important; }
  }
}