/* =========================================================
   KAIS 성공사례/블로그 — 아티클 본문 + 에디터 스타일
   레퍼런스(워드프레스형 깔끔 본문) 기준:
   크림슨 h2 · 인라인 굵게/강조 · 표 · 콜아웃 · 인용구 · 둥근 이미지
   ========================================================= */

.article-page{ padding-top:69px; }

/* ---------- article hero ---------- */
.art-hero{ max-width:760px; margin:0 auto; padding:clamp(36px,5vw,60px) var(--gutter) 0; text-align:center; }
.art-cats{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.art-cat{ font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--brand-text); background:var(--brand-faint);
  border-radius:var(--r-sm); padding:5px 12px; }
.art-title{ font-size:clamp(27px,3.6vw,40px); font-weight:800; letter-spacing:-.03em; color:var(--c-strong);
  line-height:1.3; margin-top:18px; word-break:keep-all; }
.art-title .ac{ color:var(--brand-default); }
.art-meta{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:18px;
  font-size:13.5px; color:var(--c-subtle); }
.art-meta .dot{ width:3px; height:3px; border-radius:50%; background:var(--c-subtle); }

/* cover */
.art-cover{ max-width:760px; margin:clamp(26px,3.4vw,40px) auto 0; padding:0 var(--gutter); }
.art-cover-inner{ border-radius:16px; overflow:hidden; box-shadow:var(--shadow-md); }
.art-cover-inner img{ width:100%; display:block; }
.art-cover-grad{ position:relative; aspect-ratio:16/8; display:flex; align-items:center;
  background:linear-gradient(150deg,#2f4f9e,#1d2c47); }
.art-cover-grad::before{ content:""; position:absolute; right:-50px; top:-60px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.07); }
.art-cover-grad .ccg-in{ position:relative; z-index:2; display:flex; align-items:center; gap:14px; padding:clamp(24px,4vw,44px); }
.art-cover-grad img{ width:42px; height:42px; filter:brightness(0) invert(1); opacity:.92; }
.art-cover-grad h2{ color:#fff; font-size:clamp(20px,2.4vw,30px); font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.art-cover-grad .ccg-wm{ position:absolute; right:26px; bottom:18px; z-index:2; font-size:13px; font-weight:800; letter-spacing:.14em; color:rgba(255,255,255,.5); }

/* ---------- body ---------- */
.art-body{ max-width:760px; margin:0 auto; padding:clamp(30px,4vw,46px) var(--gutter) 0; } /* 대표이미지(760)와 끝선 정렬 */
.art-body > * + *{ margin-top:22px; }
.art-body p{ font-size:16.5px; line-height:1.85; color:#3a4150; word-break:keep-all; }
.art-body p .ac, .art-body li .ac, .post-h2 .ac{ color:var(--brand-default); font-weight:700; }
.art-body strong{ color:var(--c-strong); font-weight:700; }
.art-body a{ color:var(--brand-default); text-decoration:underline; text-underline-offset:3px; }

.post-h2{ font-size:clamp(20px,2vw,24px); font-weight:800; letter-spacing:-.02em; color:var(--brand-default);
  line-height:1.4; margin-top:clamp(40px,5vw,56px) !important; padding-top:4px; }
.art-body > .post-h2:first-child{ margin-top:0 !important; }

.post-ul{ list-style:none; padding:0; display:flex; flex-direction:column; gap:11px; }
.post-ul li{ position:relative; padding-left:24px; font-size:16px; line-height:1.7; color:#3a4150; }
.post-ul li::before{ content:""; position:absolute; left:4px; top:11px; width:7px; height:7px; border-radius:50%;
  background:var(--brand-default); }

.post-callout{ background:var(--brand-faint); border:1px solid var(--brand-line); border-radius:14px;
  padding:20px 22px; }
.post-callout .pc-title{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800; letter-spacing:.02em;
  color:var(--brand-text); margin-bottom:9px; }
.post-callout .pc-title::before{ content:""; width:14px; height:14px; border-radius:4px; background:var(--brand-default); flex:none; }
.post-callout > div:last-child{ font-size:15.5px; line-height:1.75; color:var(--c-emph); }

.post-quote{ border-left:3px solid var(--brand-default); background:var(--bg-muted); border-radius:0 12px 12px 0;
  padding:18px 22px; font-style:italic; font-size:16.5px; line-height:1.7; color:var(--c-emph); }
.post-quote cite{ display:block; font-style:normal; font-size:13.5px; color:var(--c-subtle); margin-top:10px; }

.post-table-wrap{ overflow-x:auto; }
.post-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.post-table th, .post-table td{ border:1px solid var(--border); padding:12px 14px; text-align:left; line-height:1.55; vertical-align:top; }
.post-table th{ background:var(--bg-subtle); color:var(--c-strong); font-weight:700; }
.post-table td{ color:var(--c-emph); }
.post-table td .ac{ color:var(--brand-default); font-weight:700; }

.post-img{ margin-inline:0; }
.post-img img{ width:100%; border-radius:14px; display:block; box-shadow:var(--ring-card); }
.post-img figcaption{ font-size:13px; color:var(--c-subtle); text-align:center; margin-top:10px; }

/* ---------- disclaimer + CTA ---------- */
.art-foot{ max-width:760px; margin:clamp(36px,5vw,52px) auto 0; padding:0 var(--gutter); }
.art-disc{ font-size:13px; color:var(--c-subtle); line-height:1.7; background:var(--bg-muted); border-radius:12px; padding:16px 18px; }
.art-cta{ margin-top:24px; background:linear-gradient(150deg,#243860,#16243c); border-radius:18px; padding:clamp(28px,4vw,40px);
  text-align:center; color:#fff; }
.art-cta h3{ color:#fff; font-size:clamp(20px,2.2vw,26px); font-weight:800; letter-spacing:-.02em; }
.art-cta p{ color:rgba(255,255,255,.78); font-size:15px; margin-top:10px; }
.art-cta .row{ justify-content:center; margin-top:22px; }

/* ---------- related ---------- */
.art-related{ max-width:760px; margin:clamp(48px,6vw,72px) auto 0; padding:0 var(--gutter); }
.art-related h3{ font-size:20px; font-weight:700; color:var(--c-strong); letter-spacing:-.02em; text-align:center; }
.art-rel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin:22px auto 0; }
@media (max-width:760px){ .art-rel-grid{ grid-template-columns:1fr; } }

/* ============================================================
   ADMIN — 워드프레스형 블록 에디터
   ============================================================ */
.adm{ min-height:100vh; background:var(--bg-muted); }
.adm-top{ position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:14px; padding:14px clamp(16px,3vw,28px); }
.adm-top .brand{ display:flex; align-items:center; gap:10px; }
.adm-top .brand img{ width:32px; height:32px; }
.adm-top .brand b{ font-size:15px; font-weight:800; color:var(--c-strong); letter-spacing:-.01em; }
.adm-top .sp{ margin-left:auto; }
.adm-top .btn{ font-size:14px; }
.adm-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
.adm-edit{ padding:clamp(18px,2.4vw,30px); border-right:1px solid var(--border); }
.adm-prev{ background:#fff; }
.adm-prev-bar{ position:sticky; top:61px; background:var(--bg-subtle); font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--c-default); padding:9px 18px; text-transform:uppercase; border-bottom:1px solid var(--border); }
.adm-prev-body{ padding-bottom:60px; }

.adm-field{ margin-bottom:16px; }
.adm-field label{ display:block; font-size:12.5px; font-weight:700; color:var(--c-emph); margin-bottom:7px; }
.adm-input, .adm-textarea, .adm-select{ width:100%; border:1px solid var(--gray-300); border-radius:8px;
  padding:10px 12px; font-size:14px; font-family:inherit; color:var(--c-strong); background:#fff; box-shadow:var(--shadow-input); }
.adm-input:focus, .adm-textarea:focus, .adm-select:focus{ outline:none; border-color:var(--brand-default); box-shadow:0 0 0 2px var(--brand-muted); }
.adm-input.title{ font-size:18px; font-weight:700; }
.adm-textarea{ resize:vertical; line-height:1.6; min-height:64px; }
.adm-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.adm-catbar{ display:flex; flex-wrap:wrap; gap:7px; }
.adm-catbar .c{ font-size:13px; font-weight:600; color:var(--c-emph); background:#fff; border:1px solid var(--gray-300);
  border-radius:var(--r-full); padding:6px 13px; cursor:pointer; transition:.14s; }
.adm-catbar .c.on{ background:var(--brand-faint); border-color:var(--brand-line); color:var(--brand-text); }

.adm-cover-drop{ border:1.5px dashed var(--gray-300); border-radius:12px; padding:18px; text-align:center;
  font-size:13px; color:var(--c-default); cursor:pointer; transition:.15s; background:#fff; }
.adm-cover-drop:hover{ border-color:var(--brand-line); color:var(--brand-default); }
.adm-cover-prev{ position:relative; border-radius:12px; overflow:hidden; }
.adm-cover-prev img{ width:100%; display:block; }
.adm-cover-prev .x{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.6);
  color:#fff; border:0; cursor:pointer; font-size:15px; line-height:1; }

.adm-blocks{ display:flex; flex-direction:column; gap:12px; margin-top:8px; }
.adm-block{ border:1px solid var(--border); border-radius:12px; background:#fff; padding:12px; }
.adm-block-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.adm-block-head .type{ font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--brand-default); text-transform:uppercase; }
.adm-block-head .tools{ margin-left:auto; display:flex; gap:4px; }
.adm-block-head .tools button{ width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:#fff;
  color:var(--c-default); cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:.14s; }
.adm-block-head .tools button:hover{ border-color:var(--brand-line); color:var(--brand-default); }
.adm-block-head .tools button:disabled{ opacity:.3; cursor:default; }

.adm-addbar{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
.adm-addbar button{ font-size:13px; font-weight:600; color:var(--c-emph); background:#fff; border:1px dashed var(--gray-300);
  border-radius:8px; padding:8px 12px; cursor:pointer; transition:.14s; }
.adm-addbar button:hover{ border-color:var(--brand-default); color:var(--brand-default); border-style:solid; }

.adm-tablegrid{ display:flex; flex-direction:column; gap:6px; }
.adm-tablerow{ display:flex; gap:6px; }
.adm-tablerow .adm-input{ flex:1; padding:7px 9px; font-size:13px; }
.adm-mini{ font-size:12px; color:var(--c-subtle); margin-top:6px; }
.adm-help{ font-size:11.5px; color:var(--c-subtle); margin-top:5px; line-height:1.5; }

.adm-saved{ margin-top:22px; border-top:1px solid var(--border); padding-top:18px; }
.adm-saved h4{ font-size:13px; font-weight:800; color:var(--c-emph); letter-spacing:.04em; text-transform:uppercase; margin-bottom:10px; }
.adm-saved-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--bg-subtle); font-size:13.5px; }
.adm-saved-item .t{ flex:1; min-width:0; color:var(--c-strong); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adm-saved-item button{ font-size:12px; border:1px solid var(--border); background:#fff; border-radius:6px; padding:4px 9px; cursor:pointer; color:var(--c-default); }
.adm-saved-item button:hover{ border-color:var(--brand-line); color:var(--brand-default); }
.adm-badge{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--bg-subtle); color:var(--c-default); }

@media (max-width:900px){
  .adm-wrap{ grid-template-columns:1fr; }
  .adm-edit{ border-right:0; border-bottom:1px solid var(--border); }
  .adm-prev-bar{ position:static; }
}