/* 매거진 기사 페이지 (2026-08-12 신설)
   51편이 이 한 장을 공유한다 — 기사마다 <style> 을 심으면 문구 한 줄 고칠 때 51개를 고쳐야 한다.
   site.css · refine.css 를 그대로 쓰고(헤더·푸터·폼·하단 CTA 바), 기사 본문 조판만 여기서 정의한다. */

/* ── 읽기 진행 바 ────────────────────────────────────────
   기사는 길다(중위 2,026자). 얼마나 남았는지 보이면 이탈이 줄고,
   동시에 우리가 "어디까지 읽혔는지" 계측하는 기준선이 된다. */
.mag-progress{position:fixed;top:var(--header-h);left:0;right:0;height:2px;z-index:95;background:transparent;pointer-events:none;}
.mag-progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .12s linear;}
@media(prefers-reduced-motion:reduce){.mag-progress i{transition:none;}}

/* ── 기사 헤더 ───────────────────────────────────────── */
.ma-head{margin-top:var(--header-h);padding:40px 0 0;}
.ma-crumb{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--gray-400);}
.ma-crumb a{color:var(--gray-600);font-weight:600;}
.ma-crumb a:hover{color:var(--black);}
.ma-cat{display:inline-block;margin-top:22px;padding:5px 11px;border:1px solid var(--black);border-radius:2px;
  font-size:12px;font-weight:800;letter-spacing:.04em;}
.ma-head h1{margin-top:18px;font-size:clamp(27px,3.5vw,44px);font-weight:800;line-height:1.32;
  letter-spacing:-.025em;text-wrap:balance;max-width:26ch;}
.ma-excerpt{margin-top:18px;font-size:17px;line-height:1.85;color:var(--gray-600);max-width:60ch;}
/* 표기 — 언제 쓰고 누가 썼고 얼마나 걸리는지. 신뢰의 기본이다 */
.ma-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:26px;padding:14px 0;
  border-top:1px solid var(--gray-200);border-bottom:1px solid var(--gray-200);
  font-size:13.5px;color:var(--gray-600);}
.ma-meta b{color:var(--black);font-weight:700;}
.ma-meta .dot{color:var(--gray-200);}
.ma-cover{margin-top:30px;}
.ma-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px;background:#f2f2f2;}

/* ── 본문 조판 ───────────────────────────────────────── */
.ma-body{max-width:68ch;margin:0 auto;padding:44px 0 0;}
.ma-body > * + *{margin-top:22px;}
.ma-body p{font-size:16.5px;line-height:1.95;color:#2a2a2a;word-break:keep-all;}
.ma-body h2{margin-top:52px;font-size:clamp(20px,2.3vw,26px);font-weight:800;letter-spacing:-.02em;
  line-height:1.45;text-wrap:balance;}
.ma-body h3{margin-top:38px;font-size:18.5px;font-weight:800;letter-spacing:-.015em;line-height:1.5;}
.ma-body h2 + p,.ma-body h3 + p{margin-top:14px;}
.ma-body a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.ma-body a:hover{color:#a3730f;}
.ma-body strong,.ma-body b{font-weight:800;color:var(--black);}
.ma-body ul,.ma-body ol{padding-left:22px;}
.ma-body li{font-size:16.5px;line-height:1.95;color:#2a2a2a;}
.ma-body li + li{margin-top:8px;}
.ma-body hr{border:none;border-top:1px solid var(--gray-200);margin:44px 0;}
.ma-body figure{margin-top:32px;}
.ma-body figure img{width:100%;border-radius:4px;background:#f2f2f2;}
.ma-body figcaption{margin-top:10px;font-size:13.5px;line-height:1.7;color:var(--gray-400);}
.ma-body blockquote,.ma-body .ma-note{margin-top:30px;padding:20px 22px;background:#fafaf8;
  border-left:3px solid var(--accent);}
.ma-body blockquote p,.ma-body .ma-note p{font-size:15.5px;line-height:1.85;color:var(--gray-600);}
.ma-tablewrap{margin-top:28px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.ma-tablewrap table{width:100%;border-collapse:collapse;font-size:14.5px;}
.ma-tablewrap th,.ma-tablewrap td{padding:11px 14px;border-bottom:1px solid var(--gray-200);
  text-align:left;vertical-align:top;line-height:1.7;}
.ma-tablewrap th{font-weight:800;background:#fafafa;white-space:nowrap;}
@media(max-width:640px){
  .ma-head{padding-top:22px;}
  .ma-head h1{font-size:28px;}
  .ma-excerpt{margin-top:15px;font-size:16px;}
  .ma-body{padding-top:34px;}
  .ma-body p,.ma-body li{font-size:16px;}
  .ma-body h2{margin-top:42px;}
}

/* ── 본문 중간 CTA ───────────────────────────────────────
   글 유형에 따라 보내는 곳이 다르다(생성기가 결정한다).
   본문 40% 지점에 한 번만 넣는다 — 여러 번 넣으면 읽는 흐름이 끊기고 클릭률도 떨어진다. */
.ma-inline{margin:38px 0;padding:24px 26px;border:1px solid var(--gray-200);border-radius:4px;
  background:#fcfbf9;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.ma-inline .t{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent);}
.ma-inline h4{margin-top:8px;font-size:17.5px;font-weight:800;letter-spacing:-.015em;line-height:1.5;}
.ma-inline p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--gray-600);}
.ma-inline .go{flex:none;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:4px;
  background:var(--black);color:#fff;font-size:14.5px;font-weight:800;white-space:nowrap;}
.ma-inline .go:hover{background:#000;}
@media(max-width:640px){.ma-inline{padding:20px;}.ma-inline .go{width:100%;justify-content:center;}}

/* ── 기사 끝 — 사양 요약 · 다음 행동 ──────────────────── */
.ma-end{max-width:68ch;margin:0 auto;padding-top:12px;}
.ma-spec{margin-top:44px;padding:24px 26px;border:1px solid var(--gray-200);border-radius:4px;}
.ma-spec .t{font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--gray-400);}
.ma-spec dl{margin-top:14px;display:grid;grid-template-columns:112px 1fr;gap:10px 18px;}
.ma-spec dt{font-size:14px;font-weight:800;}
.ma-spec dd{font-size:14.5px;color:var(--gray-600);line-height:1.7;}

.ma-next{margin-top:44px;}
.ma-next h3{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.ma-next-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;}
@media(max-width:720px){.ma-next-grid{grid-template-columns:1fr;}}
.ma-next-grid a{display:block;padding:22px 24px;border:1px solid var(--gray-200);border-radius:4px;
  transition:border-color .16s,transform .16s;}
.ma-next-grid a:hover{border-color:var(--black);transform:translateY(-2px);}
.ma-next-grid .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;color:var(--accent);}
.ma-next-grid h4{margin-top:9px;font-size:17px;font-weight:800;letter-spacing:-.015em;}
.ma-next-grid p{margin-top:8px;font-size:14px;line-height:1.7;color:var(--gray-600);}
.ma-next-grid .arrow{display:inline-block;margin-top:12px;font-size:14px;font-weight:800;}

/* 간략 문의 — 전체 폼을 기사에 심으면 이탈한다. 두 칸만 받고 나머지는 담당자가 통화로 */
.ma-quick{margin-top:44px;padding:26px 28px;border:2px solid var(--accent);border-radius:4px;
  background-color:rgba(242,179,61,.08);
  background-image:radial-gradient(rgba(242,179,61,.3) 1.3px,transparent 1.4px);
  background-size:8px 8px;}
.ma-quick h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.5;}
.ma-quick p{margin-top:9px;font-size:14.5px;line-height:1.75;color:var(--gray-600);}
.ma-quick form{margin-top:18px;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;}
@media(max-width:720px){.ma-quick form{grid-template-columns:1fr;}}
.ma-quick input{height:50px;padding:0 16px;border:1px solid var(--gray-200);border-radius:4px;
  background:#fff;font-family:inherit;font-size:15px;}
.ma-quick input:focus{outline:2px solid var(--black);outline-offset:-1px;}
.ma-quick button{height:50px;padding:0 26px;border-radius:4px;background:var(--black);color:#fff;
  font-family:inherit;font-size:15px;font-weight:800;white-space:nowrap;}
.ma-quick .agree{margin-top:12px;display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--gray-600);line-height:1.6;}
.ma-quick .agree a{text-decoration:underline;text-underline-offset:2px;font-weight:700;}
.ma-quick .done{margin-top:16px;padding:14px 16px;background:#fff;border:1px solid var(--gray-200);
  border-radius:4px;font-size:14.5px;font-weight:700;}

/* ── 관련 기사 ───────────────────────────────────────── */
.ma-rel{margin-top:64px;padding-top:44px;border-top:1px solid var(--gray-200);}
.ma-rel h3{font-size:20px;font-weight:800;letter-spacing:-.02em;}
.ma-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px;}
@media(max-width:860px){.ma-rel-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.ma-rel-grid{grid-template-columns:1fr;}}
.ma-rel-grid a{display:block;}
.ma-rel-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#f2f2f2;}
.ma-rel-grid .c{margin-top:11px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--accent);}
.ma-rel-grid h4{margin-top:7px;font-size:15.5px;font-weight:700;line-height:1.55;letter-spacing:-.015em;}
.ma-rel-grid a:hover h4{text-decoration:underline;text-underline-offset:3px;}
.ma-rel-grid time{display:block;margin-top:6px;font-size:12.5px;color:var(--gray-400);}

/* ── 매거진 목록 ─────────────────────────────────────── */
.mi-head{margin-top:var(--header-h);padding:56px 0 0;}
.mi-head h1{font-size:clamp(30px,4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.28;}
.mi-head p{margin-top:16px;font-size:16.5px;line-height:1.8;color:var(--gray-600);max-width:56ch;}
.mi-filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px;padding-bottom:30px;border-bottom:1px solid var(--gray-200);}
.mi-filter button{padding:9px 16px;border:1px solid var(--gray-200);border-radius:999px;
  font-size:14px;font-weight:700;transition:border-color .16s,background-color .16s,color .16s;}
.mi-filter button[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff;}
.mi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 24px;margin-top:40px;}
@media(max-width:900px){.mi-grid{grid-template-columns:1fr 1fr;gap:28px 20px;}}
@media(max-width:560px){.mi-grid{grid-template-columns:1fr;}}
.mi-card{display:block;}
.mi-card img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px;background:#f2f2f2;}
.mi-card .c{margin-top:13px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--accent);}
.mi-card h2{margin-top:8px;font-size:17.5px;font-weight:700;line-height:1.5;letter-spacing:-.02em;}
.mi-card:hover h2{text-decoration:underline;text-underline-offset:3px;}
.mi-card p{margin-top:9px;font-size:14px;line-height:1.7;color:var(--gray-600);}
.mi-card time{display:block;margin-top:9px;font-size:12.5px;color:var(--gray-400);}
.mi-empty{margin-top:40px;font-size:15px;color:var(--gray-600);}