/*
 * TASK:T1336 — /multiagent/ 필러 문서 전용.
 * 이 페이지는 다른 페이지와 달리 "읽히는 것"이 목적이라 본문 폭을 좁히고(72ch 부근)
 * 행간을 키웠다. 색·간격은 style.css 토큰만 쓴다.
 */

/* ── 히어로 ─────────────────────────────────────────── */
.mah-ma-hero{padding:calc(var(--header) + 80px) var(--pad) 70px;background:radial-gradient(110% 80% at 8% 0,rgba(101,196,255,.10),transparent 60%),var(--bg)}
.mah-ma-inner{width:min(100%,var(--max));margin:0 auto}
.mah-ma-crumb{display:flex;gap:9px;align-items:center;color:#748da2;font-size:var(--mah-text-small,14px);font-weight:800;letter-spacing:.04em}
.mah-ma-crumb a{color:var(--blue)}
.mah-ma-crumb a:hover{text-decoration:underline}
.mah-ma-hero h1{max-width:1020px;margin:18px 0 22px;font-size:clamp(38px,5.8vw,92px);line-height:1.04;letter-spacing:-.06em;word-break:keep-all}
.mah-ma-hero h1 span{color:var(--blue)}
.mah-ma-lead{max-width:760px;margin:0;color:#b5c7d6;font-size:clamp(16px,1.6vw,21px);line-height:1.85;word-break:keep-all}
.mah-ma-updated{margin:24px 0 0;color:#647c90;font-size:var(--mah-text-small,14px)}

/* ── 본문 레이아웃 (목차 + 아티클) ───────────────────── */
.mah-ma-body{padding:90px var(--pad) 120px;background:var(--paper);color:#0a151e}
.mah-ma-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:70px;align-items:start}

.mah-ma-toc{position:sticky;top:calc(var(--header) + 24px);padding:26px 24px;border:1px solid #d5dbdc;border-radius:18px;background:#f5f7f4}
.mah-ma-toc-title{margin:0 0 14px;color:#4b5f6a;font-size:var(--mah-text-small,14px);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.mah-ma-toc ol{margin:0;padding-left:1.3em;color:#56696f;font-size:15px;line-height:1.6}
.mah-ma-toc li{margin-bottom:11px;word-break:keep-all}
.mah-ma-toc a:hover{color:#0a6cad;text-decoration:underline}

/* min-width:0 필수 — 그리드 아이템 기본값 min-width:auto 면 안쪽 .mah-ma-table-scroll
   (table min-width:620px)이 열 폭을 밀어내 페이지 전체에 가로 스크롤이 생긴다(실측). */
.mah-ma-article{min-width:0;max-width:820px;font-size:17px;line-height:1.95}
.mah-ma-article h2{margin:76px 0 22px;font-size:clamp(28px,3.4vw,44px);line-height:1.2;letter-spacing:-.045em;word-break:keep-all;scroll-margin-top:calc(var(--header) + 20px)}
.mah-ma-article h2:first-child{margin-top:0}
.mah-ma-article h3{margin:0 0 10px;font-size:20px;line-height:1.35;letter-spacing:-.035em;word-break:keep-all}
.mah-ma-article p{margin:0 0 20px;color:#3f545e;word-break:keep-all}
.mah-ma-article strong{color:#0a151e;font-weight:800}
.mah-ma-article a{color:#0a6cad;text-decoration:underline;text-underline-offset:3px}

/* 번호 목록 */
.mah-ma-numbered{margin:0 0 20px;padding-left:1.4em;color:#3f545e}
.mah-ma-numbered li{margin-bottom:14px;word-break:keep-all}

/* 비교표 */
.mah-ma-table-scroll{overflow-x:auto;margin:0 0 20px}
.mah-ma-table{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.mah-ma-table th,.mah-ma-table td{padding:14px 16px;border:1px solid #d8dede;text-align:left;vertical-align:top;word-break:keep-all}
.mah-ma-table thead th{background:#eceeea;font-weight:900}
.mah-ma-table tbody th{width:110px;color:#4b5f6a;font-weight:800}
.mah-ma-table td{color:#56696f}

/* 구성 요소 */
.mah-ma-parts{display:grid;gap:12px;margin:0 0 20px}
.mah-ma-part{padding:24px 26px;border-left:3px solid var(--blue2);border-radius:0 14px 14px 0;background:#f2f4f2}
.mah-ma-part-no{color:#7d8f97;font-size:var(--mah-text-small,14px);font-weight:900;letter-spacing:.14em}
.mah-ma-part h3{margin:8px 0 8px}
.mah-ma-part p{margin:0;font-size:15px;line-height:1.85}

/* 동작 흐름 */
/* 2026-09-18 — 원래 PLAN/BUILD/REVIEW 3개 전용이라 3열 고정이었다. 새 본문에서는
   하네스 4요소·모델 3단·오케스트레이터 3항목에 함께 쓰므로 개수에 맞게 접히도록
   auto-fit 으로 바꾼다(4개일 때 마지막 하나만 다음 줄에 남던 문제). */
.mah-ma-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:0 0 20px}
.mah-ma-flow-step{padding:24px 22px;border-top:2px solid #0a151e;background:#f2f4f2;border-radius:0 0 14px 14px}
.mah-ma-flow-label{color:#0a6cad;font-size:var(--mah-text-small,14px);font-weight:900;letter-spacing:.16em}
.mah-ma-flow-step h3{margin:10px 0 8px;font-size:18px}
.mah-ma-flow-step p{margin:0;font-size:14px;line-height:1.8}

/* 맞는 일 / 과한 일 */
.mah-ma-fit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.mah-ma-fit-col{padding:26px 26px 28px;border-radius:16px;background:#f2f4f2}
.mah-ma-fit-col h3{margin:0 0 14px;font-size:18px}
.mah-ma-fit-col.is-do{border-top:3px solid #17a67f}
.mah-ma-fit-col.is-dont{border-top:3px solid #c96a6a}
.mah-ma-fit-col ul{margin:0;padding-left:1.15em;color:#56696f;font-size:15px;line-height:1.8}
.mah-ma-fit-col li{margin-bottom:10px;word-break:keep-all}

/* 흔한 실수 */
.mah-ma-mistakes{display:grid;gap:12px;margin:0 0 20px;counter-reset:mah-ma-mistake}
.mah-ma-mistake{position:relative;padding:24px 26px 26px 66px;border:1px solid #d8dede;border-radius:16px;background:#f7f8f6}
.mah-ma-mistake::before{counter-increment:mah-ma-mistake;content:counter(mah-ma-mistake);position:absolute;left:24px;top:24px;display:grid;place-items:center;width:28px;height:28px;border-radius:999px;background:#0a151e;color:#fff;font-size:13px;font-weight:900}
.mah-ma-mistake p{margin:0;font-size:15px;line-height:1.85}

/* FAQ */
.mah-ma-faq{margin:0;border-top:1px solid #d5dbdc}
.mah-ma-faq details{border-bottom:1px solid #d5dbdc}
.mah-ma-faq summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 0;font-size:18px;font-weight:800;letter-spacing:-.03em;cursor:pointer;list-style:none;word-break:keep-all}
.mah-ma-faq summary::-webkit-details-marker{display:none}
.mah-ma-faq summary::after{content:"+";flex:none;color:#0a6cad;font-size:24px;font-weight:400;line-height:1;transition:transform .25s var(--ease)}
.mah-ma-faq details[open] summary::after{transform:rotate(45deg)}
.mah-ma-faq p{margin:0 0 24px;font-size:15px;line-height:1.9}

/* ── 이어서 볼 문서 ─────────────────────────────────── */
.mah-ma-next{padding:110px var(--pad);background:#07121d}
.mah-ma-next h2{margin:14px 0 40px;font-size:clamp(30px,4vw,60px);letter-spacing:-.055em}
.mah-ma-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mah-ma-next-card{position:relative;display:block;padding:28px 26px 52px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.025);transition:transform .3s var(--ease),border-color .3s}
.mah-ma-next-card:hover{transform:translateY(-4px);border-color:rgba(175,208,234,.34)}
.mah-ma-next-card h3{margin:0 0 10px;font-size:20px;letter-spacing:-.035em;word-break:keep-all}
.mah-ma-next-card p{margin:0;color:#879bad;font-size:14px;line-height:1.75;word-break:keep-all}
.mah-ma-next-card span{position:absolute;left:26px;bottom:24px;color:var(--gold);font-size:18px}

/* ── 반응형 ─────────────────────────────────────────── */
@media (max-width:1100px){
  .mah-ma-layout{grid-template-columns:minmax(0,1fr);gap:38px}
  .mah-ma-toc{position:static}
  .mah-ma-next-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .mah-ma-hero{padding:calc(var(--header) + 56px) var(--pad) 56px}
  .mah-ma-body{padding:64px var(--pad) 80px}
  .mah-ma-next{padding:80px var(--pad)}
  .mah-ma-article{font-size:16px}
  .mah-ma-flow,.mah-ma-fit,.mah-ma-next-grid{grid-template-columns:1fr}
  .mah-ma-mistake{padding:22px 22px 24px 60px}
}
@media (prefers-reduced-motion:reduce){
  .mah-ma-next-card,.mah-ma-faq summary::after{transition:none}
  .mah-ma-next-card:hover{transform:none}
}

/* ── 강조 한 줄(본문 중간 풀쿼트) ───────────────────── */
/* 2026-09-18 — lockin 섹션의 "모델은 엔진이고, 하네스가 시스템입니다." 한 줄용.
   본문 흐름을 끊어 읽히게 하는 용도라 좌측 굵은 선 + 크기만 올린다. */
.mah-ma-callout{margin:34px 0;padding:4px 0 4px 22px;border-left:4px solid var(--blue);font-size:clamp(19px,1.9vw,26px);font-weight:800;line-height:1.5;letter-spacing:-.03em;color:#0a151e;word-break:keep-all}

/* ── 하이브리드 하네스 엔진 블록(FAQ 뒤, NEXT STEP 앞) ── */
/* 2026-09-18 — 홈에서 옮겨 온 블록. 본문(paper)과 NEXT STEP(#07121d) 사이에서
   어두운 쪽으로 넘어가는 첫 구간이라 홈에서 쓰던 #050b12 를 그대로 쓴다. */
.mah-ma-engine{padding:110px var(--pad);background:#050b12;color:#fff;text-align:center}
.mah-ma-engine h2{margin:18px 0 46px;font-size:clamp(30px,4vw,54px);line-height:1.18;letter-spacing:-.05em;word-break:keep-all}
.mah-ma-engine h2 span{color:var(--blue)}
.mah-ma-engine-copy{width:min(100%,760px);margin:0 auto;text-align:left}
.mah-ma-engine-copy p{margin:0 0 20px;color:#c7d7e5;font-size:clamp(16px,1.25vw,18px);line-height:1.9;word-break:keep-all}
.mah-ma-engine-copy p:last-child{margin-bottom:0}
.mah-ma-engine-tagline{margin:38px 0 0;color:var(--gold);font-size:clamp(17px,1.5vw,21px);font-weight:900;letter-spacing:-.02em;word-break:keep-all}

@media(max-width:760px){
	.mah-ma-callout{margin:26px 0;padding-left:16px;border-left-width:3px}
	.mah-ma-engine{padding:80px var(--pad)}
	.mah-ma-engine h2{margin-bottom:34px}
	.mah-ma-engine-copy p{margin-bottom:18px}
}