/* 3D 교육자료 허브(fire-3d.html, 3판) — tokens.css·hub.css 위에 배경(오로라·그레인)·만드는 방법 흐름 그림·도구 엠블럼·
 * 만드는 순서(아이콘·요청 예시)·완성된 예제(누르면 불러오는 iframe·크기 막대 그림)·요령·주의할 점·참고 자료를 얹는다. 클래스는 f3-*.
 * 색은 토큰으로만 쓴다. 로고 칩은 두 테마 같은 값(--chip·--chip-line), 흰 로고는 검은 칩(.is-dark). 예제 자리 바탕은 두 테마 모두 검정. */
.blob{position:absolute;border-radius:50%;filter:blur(95px);opacity:var(--glow-opacity);mix-blend-mode:var(--glow-blend)}
.blob.a{width:560px;height:560px;background:radial-gradient(circle,var(--glow1),transparent 65%);top:-220px;left:-140px;animation:f3a 22s ease-in-out infinite alternate}
.blob.b{width:460px;height:460px;background:radial-gradient(circle,var(--glow3),transparent 60%);top:46%;right:-180px;animation:f3b 26s ease-in-out infinite alternate}
@keyframes f3a{to{transform:translate(70px,60px) scale(1.1)}}
@keyframes f3b{to{transform:translate(-60px,-40px) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.blob.a,.blob.b{animation:none}}
.f3-section [hidden]{display:none!important}

.f3-main{padding-bottom:64px}
.f3-hero .section-hero-media img{object-position:center 40%}
/* 히어로 설명 아래 토큰 사용량 안내(2026-10-26 사용자 요청) — 글자색은 사진 히어로 문단을 따르고, 왼쪽 막대만 더한다 */
.f3-hero .section-hero-copy>.f3-hero-note{margin-top:14px;padding-left:12px;border-left:3px solid var(--amber);font-size:14px;line-height:1.7}

/* 공통 */
.f3-section{margin-top:28px}
.f3-block{margin-top:96px;scroll-margin-top:100px}
.f3-block:first-child{margin-top:56px}
.f3-eyebrow{margin:0 0 6px;font:600 13px var(--font-sans);letter-spacing:.08em;color:var(--amber)}
.f3-block>h2{font-size:clamp(28px,3.8vw,42px);font-weight:700;margin:0 0 12px;letter-spacing:-.035em;line-height:1.15}
.f3-block h3{margin:0 0 10px;font-size:16px;font-weight:650;letter-spacing:-.01em}
.f3-intro{max-width:780px;margin:0 0 28px;font-size:15.5px;line-height:1.8;color:var(--read)}
.f3-muted{margin:12px 0 0;font-size:13px;line-height:1.65;color:var(--txt-dim)}
.f3-section a{color:var(--link)}
/* 긴 문장 줄바꿈: 마지막 줄에 낱말 하나만 남지 않게(미지원 브라우저는 무시). 낱말 단위 줄바꿈은 hub.css 의 keep-all */
.f3-section :is(p,li,dd,blockquote){text-wrap:pretty}
.f3-sub{margin-top:40px!important}
.f3-cite{display:inline-block;margin-right:12px;font-size:12px;color:var(--txt-dim)!important}
.f3-cites{margin:8px 0 0}
.f3-dateline{margin:72px 0 0;padding-top:18px;border-top:1px solid var(--glass-line);font-size:12.5px;color:var(--txt-dim);line-height:1.6}
.f3-ic{display:block;width:22px;height:22px}

/* 엠블럼 — 공식 로고 칩 */
.f3-emblems{display:inline-flex;align-items:center;gap:6px}
.f3-emblem{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--chip-line);border-radius:10px;background:var(--chip)}
.f3-emblem.is-dark{background:rgb(var(--black-rgb));border-color:var(--glass-line)}
.f3-emblem img{width:22px;height:22px;object-fit:contain}

/* 01 만드는 방법 한눈에 보기 — 다섯 단계 흐름 그림 */
.f3-flow{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.f3-node{position:relative;display:grid;align-content:start;gap:10px;padding:18px 16px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);box-shadow:var(--shadow-card)}
.f3-node:not(:last-child)::after{content:"";position:absolute;top:40px;right:-24px;width:20px;height:2px;background:linear-gradient(90deg,var(--amber),var(--ember))}
.f3-node:not(:last-child)::before{content:"";position:absolute;top:36px;right:-25px;border:5px solid transparent;border-left-color:var(--ember)}
.f3-node-top{display:flex;align-items:center;justify-content:space-between}
.f3-node-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:rgba(var(--ember-rgb),.12);color:var(--ember)}
.f3-node-ic .f3-ic{width:24px;height:24px}
.f3-node-n{font:700 12px var(--font-sans);color:var(--txt-dim)}
.f3-node h3{margin:2px 0 0;font-size:17px}
.f3-node p{margin:0;font-size:13.5px;line-height:1.65;color:var(--read)}
.f3-callout{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 14px;margin-top:22px;padding:16px 18px;border-left:3px solid var(--ember);border-radius:0 12px 12px 0;background:rgba(var(--ember-rgb),.06)}
.f3-callout>.f3-emblems{grid-row:span 2}
.f3-callout>p{margin:0;font-size:14.5px;line-height:1.7}
.f3-callout>.f3-cites{margin:0}

/* 02 준비할 도구 — 꼭 필요한 도구 / 알아 두면 좋은 것 */
.f3-tool-group+.f3-tool-group{margin-top:34px}
.f3-group-title{margin:0 0 4px!important;font-size:17px!important}
.f3-group-line{margin:0 0 14px;font-size:13.5px;color:var(--txt-dim)}
.f3-tools{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.f3-tool{display:flex;flex-direction:column;padding:18px 20px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);scroll-margin-top:100px}
.f3-tool-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.f3-tool-head h3{margin:0;font-size:18px}
.f3-what{margin:0 0 8px;font-size:14px;line-height:1.6;color:var(--read)}
.f3-role{margin:0 0 10px;font-size:13.5px;line-height:1.6}
.f3-role b{margin-right:6px;color:var(--amber);font-size:12.5px}
.f3-notes{margin:0 0 12px;padding-left:18px;display:grid;gap:6px;font-size:13.5px;line-height:1.65;color:var(--read)}
.f3-links{margin:auto 0 0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px}

/* 03 만드는 순서 — 아이콘 단계와 한 줄 요청 예시 */
.f3-making{padding:22px;border:1px solid var(--glass-line);border-radius:18px;background:var(--glass)}
.f3-making>h3{margin:0 0 6px;font-size:19px}
.f3-making .f3-intro{margin-bottom:20px}
.f3-steps{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:none}
.f3-step{display:grid;align-content:start;gap:8px;padding:14px 16px;border:1px solid var(--glass-line);border-radius:12px;background:var(--panel)}
.f3-step-head{display:flex;align-items:center;gap:10px}
.f3-step-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:rgba(var(--amber-rgb),.14);color:var(--amber)}
.f3-step-ic .f3-ic{width:20px;height:20px}
.f3-step-n{font:700 12px var(--font-sans);color:var(--txt-dim)}
.f3-step-head h4{margin:0;font-size:15px}
.f3-step>p{margin:0;font-size:13.5px;line-height:1.65;color:var(--read)}
.f3-ask{margin:2px 0 0;padding:8px 12px;border-left:2px solid var(--amber);background:var(--hilite);border-radius:0 8px 8px 0;font-size:13px;line-height:1.6;color:var(--txt)}
.f3-ask span{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--amber)}
.f3-note{margin:18px 0 0;font-size:13.5px;line-height:1.65;color:var(--txt-dim)}

/* 04 완성된 예제 — 누르면 이 자리를 iframe 으로, 담긴 내용, 크기 막대 그림 */
.f3-stage{position:relative;border-radius:18px;overflow:hidden;background:rgb(var(--black-rgb));border:1px solid var(--glass-line);box-shadow:var(--shadow-card)}
.f3-stage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:.82}
/* 예제 실행 — 그림 전체가 누름 자리, 가운데는 발신기 누름버튼 모양(원판)과 표시등처럼 퍼지는 고리. 예제 자리는 두 테마 모두 어두운 섬 */
.f3-stage img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.f3-run{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-decoration:none;color:rgb(var(--white-rgb))!important;background:radial-gradient(circle at 50% 44%,rgba(var(--black-rgb),.18),rgba(var(--black-rgb),.74) 70%);transition:background .35s ease}
.f3-run-btn{position:relative;display:grid;place-items:center;width:136px;height:136px;border-radius:50%;border:1px solid rgba(var(--white-rgb),.26);background:rgba(var(--white-rgb),.07);box-shadow:inset 0 0 0 9px rgba(var(--black-rgb),.38),0 28px 70px -20px rgba(var(--ember-rgb),.85);backdrop-filter:blur(6px)}
.f3-run-ring{position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(var(--ember-rgb),.75);animation:f3ring 2.6s cubic-bezier(.2,.6,.3,1) infinite}
.f3-run-ring+.f3-run-ring{animation-delay:1.3s}
@keyframes f3ring{0%{transform:scale(.72);opacity:.95}100%{transform:scale(1.6);opacity:0}}
.f3-run-disc{position:relative;z-index:1;display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 34% 28%,var(--amber),var(--ember) 64%);box-shadow:0 0 0 3px rgba(var(--black-rgb),.4),inset 0 -7px 14px rgba(var(--black-rgb),.28),inset 0 3px 6px rgba(var(--white-rgb),.25);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.f3-run-disc svg{width:38px;height:38px;margin-left:6px;fill:var(--on-accent)}
.f3-run-label{font-size:24px;font-weight:750;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(var(--black-rgb),.7)}
.f3-run-hint{margin-top:-6px;font-size:13.5px;color:rgba(var(--white-rgb),.8);text-shadow:0 1px 8px rgba(var(--black-rgb),.7)}
.f3-run:hover,.f3-run:focus-visible{background:radial-gradient(circle at 50% 44%,rgba(var(--black-rgb),.05),rgba(var(--black-rgb),.6) 72%)}
.f3-run:hover .f3-run-disc,.f3-run:focus-visible .f3-run-disc{transform:scale(1.08)}
.f3-stage:hover img{transform:scale(1.02)}
.f3-run:focus-visible{outline:3px solid var(--amber);outline-offset:-8px;border-radius:18px}
.f3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.f3-run-ring{animation:none;transform:scale(1.18);opacity:.45}.f3-run-disc,.f3-stage img{transition:none}}
.f3-stage iframe{display:block;width:100%;height:600px;border:0;background:rgb(var(--black-rgb))}
.f3-example-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;margin:14px 2px 0}
.f3-full{font-weight:600;font-size:14px}
.f3-full::after{content:" ↗"}
.f3-notice{margin:0;font-size:13px;line-height:1.6;color:var(--txt-dim)}
.f3-chapters{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.f3-chapters li{display:flex;gap:12px;padding:14px;border:1px solid var(--glass-line);border-radius:12px;background:var(--glass)}
.f3-chap-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ember);color:var(--on-accent);font-weight:700;font-size:13px}
.f3-chapters b{display:block;font-size:14.5px;margin-bottom:4px}
.f3-chapters span{font-size:13px;line-height:1.6;color:var(--read)}
.f3-scenes-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:18px}
.f3-scenes-row h3{margin:0;font-size:14px;color:var(--txt-dim)}
.f3-scenes{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.f3-scenes a{display:block;padding:7px 14px;border:1px solid rgba(var(--amber-rgb),.4);border-radius:999px;font-size:13.5px;text-decoration:none}
.f3-scenes a:hover{background:var(--hilite)}
.f3-size{display:grid;gap:18px;padding:20px;border:1px solid var(--glass-line);border-radius:16px;background:var(--glass)}
.f3-size-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 8px;font-size:14px}
.f3-size-head span{font-weight:700}
.f3-bar{display:flex;height:16px;border-radius:999px;overflow:hidden;background:var(--hilite)}
.f3-seg{display:block;height:100%}
.f3-seg.s1,.f3-legend i.s1{background:var(--viz-1)}
.f3-seg.s2,.f3-legend i.s2{background:var(--viz-2)}
.f3-seg.s3,.f3-legend i.s3{background:var(--viz-3)}
.f3-seg.s4,.f3-legend i.s4{background:var(--viz-4)}
.f3-legend{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--read)}
.f3-legend li{display:flex;align-items:center;gap:6px}
.f3-legend i{display:inline-block;width:10px;height:10px;border-radius:3px}
.f3-legend b{color:var(--txt)}
.f3-size .f3-muted{margin:0}

/* 05·06 요령 · 주의할 점 — 아이콘 카드 */
.f3-cards{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f3-cards li{display:flex;gap:14px;padding:16px 18px;border:1px solid var(--glass-line);border-radius:14px;background:var(--glass)}
.f3-cards h3{margin:0 0 6px;font-size:15px}
.f3-cards p{margin:0;font-size:13.5px;line-height:1.7;color:var(--read)}
.f3-card-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:rgba(var(--amber-rgb),.14);color:var(--amber)}
.f3-cautions .f3-card-ic{background:rgba(var(--ember-rgb),.12);color:var(--ember)}

/* 07 참고 자료 */
.f3-refs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.f3-refs ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.f3-refs li{display:grid;gap:2px;font-size:14px}
.f3-refs li span{font-size:12.5px;color:var(--txt-dim)}

@media (max-width:1100px){
  .f3-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f3-node:nth-child(2)::after,.f3-node:nth-child(2)::before{display:none}
}
@media (max-width:960px){
  .f3-tools,.f3-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f3-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f3-refs{grid-template-columns:1fr}
}
@media (max-width:640px){
  .f3-flow{grid-template-columns:1fr;gap:22px}
  .f3-node{grid-template-columns:46px minmax(0,1fr);column-gap:14px;row-gap:8px}
  .f3-node>*{grid-column:2}
  .f3-node>.f3-node-top{grid-column:1;grid-row:1/span 3;flex-direction:column;align-items:center;gap:6px}
  .f3-node:not(:last-child)::after{top:auto;bottom:-16px;right:auto;left:38px;width:2px;height:12px;background:var(--ember)}
  .f3-node:not(:last-child)::before{top:auto;bottom:-22px;right:auto;left:34px;border:5px solid transparent;border-top-color:var(--ember)}
  .f3-node:nth-child(2)::after,.f3-node:nth-child(2)::before{display:block}
  .f3-tools,.f3-steps,.f3-cards,.f3-chapters{grid-template-columns:1fr}
  .f3-making{padding:14px}
  .f3-stage iframe{height:420px}
  .f3-stage img{aspect-ratio:4/3;object-position:30% center}
  .f3-run{gap:8px}
  .f3-run-btn{width:92px;height:92px;box-shadow:inset 0 0 0 7px rgba(var(--black-rgb),.38),0 20px 50px -18px rgba(var(--ember-rgb),.85)}
  .f3-run-disc{width:60px;height:60px}
  .f3-run-disc svg{width:26px;height:26px;margin-left:4px}
  .f3-run-label{font-size:19px}
  .f3-run-hint{margin-top:-4px;font-size:12px}
}
/* 히어로 긴 문장의 문장 안 줄 바꿈(2026-10-27 운영자 '긴 문장 줄 바꿈') — 넓은 화면에서만. 좁은 화면에서는 저절로 줄이 바뀌어 짧은 줄만 남았다 */
@media (max-width:760px){.f3-br-wide{display:none}}