/* AI 쇼케이스 — 멀티-AI-프롬프트 매뉴얼 섹션(2026-09-20).
   매뉴얼(PDF 16쪽)의 순서·문구를 옮긴 손작성 섹션. 버전은 표기하지 않고, NotebookLM 은 새 이름 Gemini Notebook 으로 쓴다.
   표면은 허브 계약(유리 + blur). 원본의 원색 카드·빨간 번호는 옮기지 않고, 장마다 은은한 색(--mai-hue: r,g,b)
   하나를 윗선·번호 원·제목 막대에만 쓴다 — 준비·안전 모래빛, A 하늘, B 청록, C 연보라, D 무채.
   이 페이지는 hub.css 를 로드하므로 섹션 안에 <header> 를 쓰지 않는다(header{position:sticky}). */

.mai{--mai-hue:var(--tag-peach-rgb);padding-top:56px;padding-bottom:72px}
.mai-sc-a,.mai-part-a{--mai-hue:var(--blue-rgb)}
.mai-sc-b,.mai-part-b{--mai-hue:var(--green-rgb)}
.mai-sc-c,.mai-part-c{--mai-hue:var(--tag-lav-rgb)}
.mai-sc-d,.mai-part-d{--mai-hue:var(--read-rgb)}
.mai,.mai [id]{scroll-margin-top:96px} /* 위에 고정된 사이트 내비에 제목이 가리지 않게 */
.mai a:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}

.mai-head{max-width:780px;margin-bottom:26px}
.mai-eyebrow{font:600 11px/1.4 "Space Grotesk",var(--font-sans);letter-spacing:.14em;color:var(--amber)}
.mai-head :is(h1,h2){font-family:"Space Grotesk",var(--font-sans);font-size:clamp(28px,3.6vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:10px 0 8px}
.mai-lead{font-size:17px;color:var(--read)}
.mai-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:13px;color:var(--txt-dim)}
.mai-meta a{color:var(--amber);font-weight:600}
.mai-meta a:hover{text-decoration:underline}

/* 네 가지 기능 — 매뉴얼 1쪽 */
.mai-scenarios{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.mai-sc{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px;min-height:196px;padding:22px 24px;border-radius:16px;border:1px solid var(--glass-line);background:radial-gradient(120% 90% at 100% 0%,rgba(var(--mai-hue),.14),transparent 60%),var(--glass);backdrop-filter:blur(14px);transition:transform .2s,border-color .2s}
.mai-sc::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,rgba(var(--mai-hue),.9),rgba(var(--mai-hue),0) 70%)}
.mai-sc:hover{transform:translateY(-3px);border-color:rgba(var(--mai-hue),.45)}
.mai-sc span{font:600 11px/1.2 "Space Grotesk",var(--font-sans);letter-spacing:.12em;color:rgb(var(--mai-hue))}
.mai-sc strong{font-size:clamp(20px,2.2vw,26px);line-height:1.32;letter-spacing:-.01em;color:var(--txt)}
.mai-sc em{margin-top:auto;padding-top:14px;border-top:1px solid var(--glass-line);font-style:normal;font-size:14px;color:var(--read)}

.mai-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}
.mai-toc a{padding:8px 14px;border-radius:999px;border:1px solid var(--glass-line);background:var(--glass);backdrop-filter:blur(14px);font-size:13px;color:var(--read);transition:border-color .2s,color .2s}
.mai-toc a:hover{border-color:rgba(var(--plasma-rgb),.5);color:var(--txt)}

/* 장(준비 · A~D · 안전) */
.mai-block{margin-bottom:18px;padding:30px;border:1px solid var(--glass-line);border-radius:20px;background:var(--glass);backdrop-filter:blur(14px)}
.mai-kicker{font:600 12px/1.4 "Space Grotesk",var(--font-sans);letter-spacing:.08em;color:rgb(var(--mai-hue))}
.mai-block h3{margin:6px 0 22px;padding-left:14px;border-left:3px solid rgba(var(--mai-hue),.85);font-size:clamp(20px,2.4vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1.3}
.mai-block h3.mai-subtitle{margin-top:34px}
.mai-rename{margin:-10px 0 18px;font-size:13px;color:var(--amber)}

/* 가입과 로그인 — AI 5종 */
.mai-ais{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mai-ais li{display:grid;grid-template-columns:auto 200px minmax(0,1fr);align-items:center;gap:18px;padding:14px 18px;border:1px solid var(--glass-line);border-radius:14px;background:rgba(var(--ink-rgb),.025)}
.mai-logo{display:grid;place-items:center;width:52px;height:52px;border-radius:12px;background:var(--chip)} /* 서비스 로고가 읽히는 밝은 칩 — ai-tools.css .ai-logo 와 같은 사유로 불투명 */
.mai-logo img{width:36px;height:36px;object-fit:contain}
.mai-ai-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.mai-ai-name strong{font-size:18px}
.mai-ai-name a{font-size:13px;color:var(--blue)}
.mai-ai-name a:hover{text-decoration:underline}
.mai-ai-name span{font-size:12px;color:var(--txt-dim)}
.mai-ais p{font-size:14.5px;color:var(--read)}

/* 단계 목록 */
.mai-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center}
.mai-split-tall{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:start}
.mai-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.mai-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.mai-steps strong{display:block;margin:5px 0 4px;font-size:17px}
.mai-steps-plain strong{font-weight:500;font-size:16px}
.mai-steps p,.mai-rows p{font-size:14.5px;line-height:1.75;color:var(--read)}
.mai-no{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--mai-hue),.45);background:rgba(var(--mai-hue),.1);color:rgb(var(--mai-hue));font:600 15px/1 "Space Grotesk",var(--font-sans)}
.mai-steps em,.mai-rows em,.mai-card em{font-style:normal;color:var(--txt-dim)} /* 예시 문구 — 시나리오 카드(.mai-sc em)의 밝은 설명은 건드리지 않는다 */

/* 본문 속 버튼 이름 · 캡처 번호 · 크롬 버튼 칩 */
.mai-btn{display:inline-block;padding:1px 8px;border-radius:6px;border:1px solid rgba(var(--ink-rgb),.16);background:rgba(var(--ink-rgb),.07);color:var(--txt);font-size:.92em;font-weight:600;line-height:1.5}
.mai-n{display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;border:1px solid rgba(var(--mai-hue),.5);background:rgba(var(--mai-hue),.1);color:rgb(var(--mai-hue));font:600 10.5px/1 "Space Grotesk",var(--font-sans);font-style:normal;vertical-align:1px}
.mai-chip{display:inline-block;padding:1px 10px;border-radius:6px;border:1px solid var(--glass-line);background:rgba(var(--ink-rgb),.06);font-size:.9em}
.mai-chip-blue{border-color:rgba(var(--blue-rgb),.4);background:rgba(var(--blue-rgb),.12)}

/* 화면 캡처 — 매뉴얼의 번호 표시가 그대로 보이게 원본 비율을 지킨다 */
.mai-shot{margin:0;padding:8px;border-radius:14px;border:1px solid var(--glass-line);background:rgba(var(--ink-rgb),.05)}
.mai-shot img{display:block;width:100%;height:auto;border-radius:8px}
.mai-shot-tall{max-width:360px}

/* 시나리오 A — 캡처 왼쪽 · 설명 오른쪽 */
.mai-rows{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.mai-rows li{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:26px;align-items:center}
.mai-rows li>div{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px}
.mai-rows .mai-no{grid-row:span 2}
.mai-rows strong{margin-top:5px;font-size:17px}
.mai-rows p{grid-column:2}

/* 카드 격자 — 사용 팁 · 시나리오 D */
.mai-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.mai-card{display:flex;flex-direction:column;gap:12px;padding:18px;border:1px solid var(--glass-line);border-radius:16px;background:rgba(var(--ink-rgb),.03)}
.mai-card-wide{grid-column:1/-1} /* 캡처 없는 글 카드 — 옆 칸을 비우지 않게 한 줄을 쓴다 */
.mai-card h4{display:flex;align-items:center;gap:10px;font-size:16px;line-height:1.4}
.mai-card h4 .mai-no{width:28px;height:28px;font-size:13px}
.mai-card p{font-size:14px;line-height:1.75;color:var(--read)}
.mai-card .mai-shot-tall{align-self:center;max-width:300px}
.mai-card p.mai-note{padding:8px 12px;border-left:3px solid var(--amber);border-radius:0 8px 8px 0;background:rgba(var(--amber-rgb),.05);font-size:13px;color:var(--txt-dim)}
.mai-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--read)}
.mai-list li{display:flex;gap:8px;align-items:baseline}
.mai-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.mai-options div{padding:10px 12px;border-left:3px solid var(--txt);border-radius:0 10px 10px 0;background:rgba(var(--ink-rgb),.05)}
.mai-options dt{font-weight:700}
.mai-options dd{margin:0;font-size:13px;color:var(--txt-dim)}

/* AI 안전하게 쓰기 */
.mai-safety{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.mai-safety>div{padding:22px 24px;border:1px solid var(--glass-line);border-radius:16px;background:rgba(var(--ink-rgb),.035)}
.mai-safety>.mai-no-go{border-left:4px solid var(--crim)}
.mai-safety>.mai-go{border-left:4px solid var(--blue)}
.mai-safety h4{margin-bottom:6px;font-size:20px}
.mai-no-go h4{color:var(--pending)}
.mai-go h4{color:var(--blue)}
.mai-safety p{margin-bottom:12px;font-size:14px;color:var(--txt-dim)}
.mai-safety ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;color:var(--read)}
.mai-no-go li::before{content:"✕";margin-right:8px;font-weight:700;color:var(--pending)}
.mai-go li::before{content:"✓";margin-right:8px;font-weight:700;color:var(--blue)}
.mai-source{margin-top:18px;padding-top:14px;border-top:1px solid var(--glass-line);font-size:12.5px;color:var(--txt-dim)}

@media (max-width:900px){
  .mai-split,.mai-split-tall{grid-template-columns:minmax(0,1fr)}
  .mai-shot-tall{margin-inline:auto;max-width:340px}
  .mai-rows li{grid-template-columns:minmax(0,1fr);gap:12px}
  .mai-grid,.mai-safety{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .mai-scenarios{grid-template-columns:minmax(0,1fr)}
  .mai-sc{min-height:0}
  .mai-block{padding:20px 16px}
  .mai-ais li{grid-template-columns:auto minmax(0,1fr);gap:12px}
  .mai-ais p{grid-column:1/-1}
  .mai-options{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.mai-sc,.mai-toc a{transition:none}.mai-sc:hover{transform:none}}

/* 별도 페이지(multi-ai-prompt-guide.html, 2026-10-25)의 경로 줄 */
.mai-crumb{padding-top:28px}