/* 「몸에 남은 무공」(2026-10-10) — 壹막 인물 공개의 기질 줄(.qi-line)과 초상 위 기운(.qi-aura).
   마크업은 experience.mjs show(), 판정은 canon/qi-temperament.mjs(qiOf·qiFitLine).
   기운은 두 겹: ::before 는 기질 색의 CSS 번짐(가장자리에만, 얼굴이 있는 가운데는 비움), ::after 는 m_i1 투명 그림
   studio/assets/qi/qi-<id>.{avif,webp,png}(테두리형, 가운데가 비어 있다). 그림이 없거나 못 읽어도 ::before 만으로 자연스럽다.
   세기(경지): 0 없음 · 1 .45 · 2 .7 · 3 .92.
   움직임은 늘 재생한다(동작 줄이기 설정 무시 — 프로젝트 규칙). style.css 의 전역 끄기보다 세게 건다. */

/* ── 기질 색: --qi 본색(번짐), --qi-ink 한지 위 글자색(대비 4.5:1 이상) ── */
[data-qi="hanbing"]{--qi:#8fb9dc;--qi-ink:#2f5675}
[data-qi="geukyang"]{--qi:#e5793a;--qi-ink:#a3401a}
[data-qi="hyeolgi"]{--qi:#a8242e;--qi-ink:#8a1d26}
[data-qi="dok"]{--qi:#5e9a48;--qi-ink:#3b6a2c}
[data-qi="eumgong"]{--qi:#9a8cc8;--qi-ink:#55468a}
[data-qi="geumgang"]{--qi:#d2a43a;--qi-ink:#7a5a12}
[data-qi="noejeon"]{--qi:#8eaefc;--qi-ink:#3a4fa8}
[data-qi="suryu"]{--qi:#4b8fb0;--qi-ink:#2b5f78}
[data-qi="gyeongsin"]{--qi:#a9cfb8;--qi-ink:#3d6b52}
[data-qi="eunjam"]{--qi:#2b2b36;--qi-ink:#2b2b36}
[data-qi="hwanhyeong"]{--qi:#b79ad6;--qi-ink:#664a8a}
[data-qi="jeongsun"]{--qi:#f4efdf;--qi-ink:#6b6450}

/* ── 초상 기운 ─────────────────────────────────────────── */
.reveal-portrait[data-qi]{--qi-o:0}
.reveal-portrait[data-qi-strength="1"]{--qi-o:.45}
.reveal-portrait[data-qi-strength="2"]{--qi-o:.7}
.reveal-portrait[data-qi-strength="3"]{--qi-o:.92}
.reveal-portrait[data-qi-strength="0"] .qi-aura{display:none}
.reveal-portrait .portrait-caption{z-index:2}
.qi-aura{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:var(--qi-o,0);overflow:hidden}
.qi-aura::before,.qi-aura::after{content:'';position:absolute;inset:0;pointer-events:none}
/* 바탕 번짐: 가운데 타원(얼굴·몸)은 비우고 가장자리와 발치에만 기질 색 */
.qi-aura::before{
 background:
  radial-gradient(ellipse 62% 48% at 50% 40%,transparent 58%,color-mix(in srgb,var(--qi) 48%,transparent) 100%),
  linear-gradient(to top,color-mix(in srgb,var(--qi) 52%,transparent) 0,transparent 30%);
 animation:qi-breathe 7.5s ease-in-out infinite alternate!important}
/* 그림: 테두리형 투명 그림을 판에 맞춰 편다. 가운데 기둥(얼굴·손·몸)은 마스크로 엷게 눌러 발치 구름이 인물을 덮지 않게 */
.qi-aura::after{background:var(--qi-img,none) center/100% 100% no-repeat;transform-origin:50% 60%;
 -webkit-mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.4) 30%,rgba(0,0,0,.4) 70%,#000 100%);
 mask-image:linear-gradient(to right,#000 0,rgba(0,0,0,.4) 30%,rgba(0,0,0,.4) 70%,#000 100%);
 animation:qi-drift 16s ease-in-out infinite alternate!important}
/* 은잠(먹 그림자)은 어두운 색이라 번짐을 곱하기로 눌러 그늘처럼 */
[data-qi="eunjam"] .qi-aura::before{mix-blend-mode:multiply}
/* 환형(겹쳐 보이는 잔상): 그림이 아직 없을 때도 보이게, 가장자리에 엇갈린 두 겹 빛띠가 천천히 어긋난다 */
[data-qi="hwanhyeong"] .qi-aura::before{background:
  linear-gradient(100deg,color-mix(in srgb,var(--qi) 42%,transparent) 0,transparent 22%,transparent 78%,color-mix(in srgb,var(--qi) 42%,transparent) 100%),
  linear-gradient(80deg,color-mix(in srgb,#9fc3d6 30%,transparent) 0,transparent 16%,transparent 84%,color-mix(in srgb,#9fc3d6 30%,transparent) 100%),
  linear-gradient(to top,color-mix(in srgb,var(--qi) 45%,transparent) 0,transparent 28%);
 background-size:100% 100%,100% 100%,100% 100%;animation:qi-breathe 7.5s ease-in-out infinite alternate,qi-ghost 9s ease-in-out infinite alternate!important}
@keyframes qi-ghost{from{background-position:0 0,0 0,0 0}to{background-position:6px 0,-6px 0,0 0}}
/* 정순(엷은 흰 기)은 밝은 판 위에서 사라지지 않게 살짝 빛을 더한다 */
[data-qi="jeongsun"] .qi-aura::before{mix-blend-mode:screen}

@keyframes qi-breathe{from{opacity:.62}to{opacity:1}}
@keyframes qi-drift{
 0%{transform:translate3d(0,0,0) scale(1.02)}
 50%{transform:translate3d(-1.2%,-1.6%,0) scale(1.045)}
 100%{transform:translate3d(1%,-.6%,0) scale(1.03)}}

/* 그림 경로 — AVIF → WebP → PNG(투명) */
[data-qi="hanbing"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-hanbing.avif') type('image/avif'),url('/studio/assets/qi/qi-hanbing.webp') type('image/webp'),url('/studio/assets/qi/qi-hanbing.png') type('image/png'))}
[data-qi="geukyang"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-geukyang.avif') type('image/avif'),url('/studio/assets/qi/qi-geukyang.webp') type('image/webp'),url('/studio/assets/qi/qi-geukyang.png') type('image/png'))}
[data-qi="hyeolgi"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-hyeolgi.avif') type('image/avif'),url('/studio/assets/qi/qi-hyeolgi.webp') type('image/webp'),url('/studio/assets/qi/qi-hyeolgi.png') type('image/png'))}
[data-qi="dok"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-dok.avif') type('image/avif'),url('/studio/assets/qi/qi-dok.webp') type('image/webp'),url('/studio/assets/qi/qi-dok.png') type('image/png'))}
[data-qi="eumgong"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-eumgong.avif') type('image/avif'),url('/studio/assets/qi/qi-eumgong.webp') type('image/webp'),url('/studio/assets/qi/qi-eumgong.png') type('image/png'))}
[data-qi="geumgang"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-geumgang.avif') type('image/avif'),url('/studio/assets/qi/qi-geumgang.webp') type('image/webp'),url('/studio/assets/qi/qi-geumgang.png') type('image/png'))}
[data-qi="noejeon"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-noejeon.avif') type('image/avif'),url('/studio/assets/qi/qi-noejeon.webp') type('image/webp'),url('/studio/assets/qi/qi-noejeon.png') type('image/png'))}
[data-qi="suryu"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-suryu.avif') type('image/avif'),url('/studio/assets/qi/qi-suryu.webp') type('image/webp'),url('/studio/assets/qi/qi-suryu.png') type('image/png'))}
[data-qi="gyeongsin"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-gyeongsin.avif') type('image/avif'),url('/studio/assets/qi/qi-gyeongsin.webp') type('image/webp'),url('/studio/assets/qi/qi-gyeongsin.png') type('image/png'))}
[data-qi="eunjam"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-eunjam.avif') type('image/avif'),url('/studio/assets/qi/qi-eunjam.webp') type('image/webp'),url('/studio/assets/qi/qi-eunjam.png') type('image/png'))}
[data-qi="hwanhyeong"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-hwanhyeong.avif') type('image/avif'),url('/studio/assets/qi/qi-hwanhyeong.webp') type('image/webp'),url('/studio/assets/qi/qi-hwanhyeong.png') type('image/png'))}
[data-qi="jeongsun"] .qi-aura{--qi-img:image-set(url('/studio/assets/qi/qi-jeongsun.avif') type('image/avif'),url('/studio/assets/qi/qi-jeongsun.webp') type('image/webp'),url('/studio/assets/qi/qi-jeongsun.png') type('image/png'))}

/* ── 기질 줄(壹막 인물 공개, 경지 표 아래) ─────────────── */
.qi-line{position:relative;margin-top:16px;padding:12px 0 2px 14px;font:13px/1.75 var(--serif);color:var(--ink)}
.qi-line::before{content:'';position:absolute;left:0;top:14px;bottom:6px;width:3px;border-radius:2px;
 background:linear-gradient(to bottom,var(--qi),color-mix(in srgb,var(--qi) 15%,transparent));
 animation:qi-breathe 7.5s ease-in-out infinite alternate!important}
.qi-line p{margin:0}
.qi-line p+p{margin-top:3px}
.qi-line b{font:600 12px var(--sans);letter-spacing:1.5px;color:var(--qi-ink)}
.qi-line small{font:11px var(--sans);color:var(--paper-label,var(--muted));margin-left:4px}
.qi-line .qi-fit{font-size:12.5px;color:var(--paper-label2,var(--muted))}
#life-reveal.stagein .qi-line{animation:riseIn .5s .42s both}
@media(max-width:640px){
 .qi-line{margin-top:12px;padding:9px 0 0 11px;font-size:12px;line-height:1.7}
 .qi-line b{font-size:11px;letter-spacing:1px}
 .qi-line small{display:block;margin:0}
 .qi-line .qi-fit{font-size:11.5px}}
/* 정순 본색은 한지와 거의 같아 줄 머리 선만 먹빛으로 */
.qi-line[data-qi="jeongsun"]::before{background:linear-gradient(to bottom,var(--qi-ink),color-mix(in srgb,var(--qi-ink) 12%,transparent))}