/* 미디어 허브(소방 이미지·소방 영상·3D 교육자료) 히어로 아래 메타 프롬프트 카드 — builders/media-prompts.js 가 BUILD:METAPROMPT 에 넣는다(2026-10-26).
 * 위에서부터 설명 → 흐름 세 단계(메타 프롬프트 → AI가 써 준 프롬프트 → 결과물, 사이에 화살표) → 읽는 파일·프롬프트 상자.
 * 색은 토큰으로만 쓴다(테마 래칫 0). 프롬프트 상자는 두 테마 모두 오목한 칸(--well). */
.mp{margin-top:28px;scroll-margin-top:100px}
.mp-card{position:relative;display:grid;gap:18px;padding:20px 22px;border:1px solid rgba(var(--ember-rgb),.28);border-radius:22px;background:linear-gradient(135deg,rgba(var(--ember-rgb),.07),transparent 55%),var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.mp-card::before{content:"";position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(var(--amber-rgb),.7),transparent);pointer-events:none}
.mp-intro{display:grid;gap:8px;max-width:820px}
.mp-label{margin:0;font:600 12.5px "Space Grotesk",var(--font-sans);letter-spacing:.1em;color:var(--amber)}
.mp-intro h2{margin:0;font-size:clamp(19px,2.2vw,24px);line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.mp-about{margin:0;font-size:14.5px;line-height:1.75;color:var(--read)}
/* 흐름 세 단계 — 단계 사이 화살표(넓은 화면 → / 좁은 화면 ↓) */
.mp-chain{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.mp-chain li{position:relative;display:grid;align-content:start;gap:4px;padding:12px 14px 13px;border:1px solid var(--glass-line);border-radius:14px;background:var(--panel)}
.mp-chain li:first-child{border-color:rgba(var(--ember-rgb),.5)}
.mp-chain li:last-child{border-color:rgba(var(--blue-rgb),.5)}
.mp-chain li:not(:last-child)::after{content:"→";position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--amber)}
.mp-n{display:grid;place-items:center;width:22px;height:22px;margin-bottom:2px;border-radius:50%;font:700 11px "Space Grotesk",var(--font-sans);color:var(--on-accent);background:var(--accent-fill)}
.mp-chain b{font-size:15px;line-height:1.4}
.mp-chain li>span:last-child{font-size:13px;line-height:1.6;color:var(--read)}
/* 읽는 파일·프롬프트 상자 */
.mp-box{display:grid;gap:6px;min-width:0}
.mp-box-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font-size:12.5px;color:var(--txt-dim)}
.mp-box-head label{font-weight:600;color:var(--txt)}
.mp-files{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 auto 0 0;font-size:12.5px}
.mp-files span{color:var(--txt-dim)}
.mp-files a{padding:1px 9px;border:1px solid var(--glass-line);border-radius:7px;font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--link);text-decoration:none}
.mp-files a:hover{border-color:var(--amber)}
.mp-copy-btn{padding:6px 16px;border:1px solid rgba(var(--ember-rgb),.55);border-radius:999px;background:rgba(var(--ember-rgb),.14);color:var(--txt);font:600 13px var(--font-sans);cursor:pointer;transition:background .2s,border-color .2s}
.mp-copy-btn:hover{background:rgba(var(--ember-rgb),.24);border-color:rgba(var(--ember-rgb),.8)}
.mp-copy-btn:focus-visible,.mp-files a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.mp-box textarea{width:100%;resize:vertical;padding:12px 14px;border:1px solid var(--glass-line);border-radius:12px;background:var(--well);color:var(--txt);font:12.5px/1.65 "JetBrains Mono",ui-monospace,monospace}
@media (prefers-reduced-motion:reduce){.mp-copy-btn{transition:none}}
@media (max-width:900px){
  .mp-chain{grid-template-columns:1fr;gap:22px}
  .mp-chain li:not(:last-child)::after{content:"↓";right:auto;left:22px;top:auto;bottom:-21px;transform:none}
}
@media (max-width:640px){.mp-card{padding:14px;border-radius:16px}}