/* 재질 한 벌(2026-10-05) — 코드로 그리던 붓 결 변수(sumuk-textures.css)를 실제 붓·한지 그림으로 바꾼다.
   그림 원본: output/higgsfield/mat1 → output/higgsfield/mat1/prep*.py 로 잘라 studio/assets/texture 에 둔다.
   변수 이름과 쓰는 자리는 그대로라 sumuk.css 의 모든 버튼·테두리·구분선이 한꺼번에 바뀐다. 내용(글)은 건드리지 않는다.
   형식(사용자 제안): AVIF → WebP → PNG 차례로 브라우저가 읽을 수 있는 첫 것을 고른다(image-set + type()).
   image-set의 type()을 모르는 옛 브라우저는 원래 코드로 그린 붓 결(SVG)을 그대로 쓴다 — 빈 자리가 생기지 않는다. */
:root{--frame-slice:26}

@supports (background-image:image-set(url("/studio/assets/texture/rule.avif") type("image/avif"))){
:root{
 --frame-slice:80;
 --brush-swash-gold:image-set(url('/studio/assets/texture/swash-gold.avif') type('image/avif'),url('/studio/assets/texture/swash-gold.webp') type('image/webp'),url('/studio/assets/texture/swash-gold.png') type('image/png'));
 --brush-swash-ink:image-set(url('/studio/assets/texture/swash-ink.avif') type('image/avif'),url('/studio/assets/texture/swash-ink.webp') type('image/webp'),url('/studio/assets/texture/swash-ink.png') type('image/png'));
 --brush-swash-red:image-set(url('/studio/assets/texture/swash-red.avif') type('image/avif'),url('/studio/assets/texture/swash-red.webp') type('image/webp'),url('/studio/assets/texture/swash-red.png') type('image/png'));
 --brush-frame-ink:image-set(url('/studio/assets/texture/frame-ink.avif') type('image/avif'),url('/studio/assets/texture/frame-ink.webp') type('image/webp'),url('/studio/assets/texture/frame-ink.png') type('image/png'));
 --brush-frame-pale:image-set(url('/studio/assets/texture/frame-pale.avif') type('image/avif'),url('/studio/assets/texture/frame-pale.webp') type('image/webp'),url('/studio/assets/texture/frame-pale.png') type('image/png'));
 --brush-frame-red:image-set(url('/studio/assets/texture/frame-red.avif') type('image/avif'),url('/studio/assets/texture/frame-red.webp') type('image/webp'),url('/studio/assets/texture/frame-red.png') type('image/png'));
 --brush-rule:image-set(url('/studio/assets/texture/rule.avif') type('image/avif'),url('/studio/assets/texture/rule.webp') type('image/webp'),url('/studio/assets/texture/rule.png') type('image/png'));
 --brush-rule-2:var(--brush-rule);
 --brush-dab-red:image-set(url('/studio/assets/texture/dab-red.avif') type('image/avif'),url('/studio/assets/texture/dab-red.webp') type('image/webp'),url('/studio/assets/texture/dab-red.png') type('image/png'));
 --brush-dab-gold:image-set(url('/studio/assets/texture/dab-gold.avif') type('image/avif'),url('/studio/assets/texture/dab-gold.webp') type('image/webp'),url('/studio/assets/texture/dab-gold.png') type('image/png'));
 /* 한지 결: 섬유의 밝고 어두운 결만 남긴 투명 타일(바탕색은 각 카드 것 그대로) */
 --paper-grain:image-set(url('/studio/assets/texture/paper-grain.avif') type('image/avif'),url('/studio/assets/texture/paper-grain.webp') type('image/webp'),url('/studio/assets/texture/paper-grain.png') type('image/png'));
 /* 밤 종이 결(투명 불필요한 회색 타일): 128이 '변화 없음'. 바탕색 위에 soft-light로 얹는다 */
 --night-grain:image-set(url('/studio/assets/texture/night-grain.avif') type('image/avif'),url('/studio/assets/texture/night-grain.webp') type('image/webp'),url('/studio/assets/texture/night-grain.jpg') type('image/jpeg'));
}

/* 테두리 그림은 400px 판의 가장자리 80px 안에 붓 획이 든다. 크게 잘라 화면에서는 가는 획으로 보이게 한다 */
.panel,.book-card,.node-card,.shelf-item,.stats,.guide-banner,.identity-empty,.saved-card,.party-member,.relation-card,.glossary-card,.identity-card,
.life-reveal,.discovery-card,.keep-ending,.reason-card,.reading-figure,.pillar,.narrator-bubble,.secret-scroll,.recent-person,.life-saju,
.cr-doc,.chip,.cr-toc a,.welcome-jobs__track span,.ink-button,.button:not(.primary):not(.light),.result-navigation button,.record-toc button,.record-tools button,
.welcome-jobs__pills button,.birth-examples button,.reveal-tags span,
.welcome-steps article,.life-form.issue,.work-scene,.more-menu>summary,.quiet-tools>.toolbar,.hero,.party-banner{border-image-slice:80!important}

/* 한지 결: 카드 바탕색 위에 섬유가 비친다 */
.life-result,.panel,.book-card,.node-card,.shelf-item,.stats,.guide-banner,.identity-empty,.secret-scroll,.saved-card,.party-member,.relation-card,
.glossary-card,.identity-card,dialog,.pillar,.reason-card,.reading-figure,.more-links,.narrator-bubble{background-size:320px 320px}
.cr-doc,.cr-bang{background-size:320px 320px,100% 100%,auto}
.work-scene__clue{background-size:320px 320px,auto}

/* 밤 바탕: 먹 번짐 아래에 쪽빛으로 물들인 종이 결 */
body::before{background:var(--ink-wash) center/cover no-repeat,var(--night-grain) 0 0/420px 420px repeat var(--bg,#141a18);
 background-blend-mode:normal,soft-light}

/* 붓으로 쓸어 칠한 버튼: 그림의 갈라진 털끝이 보이도록 가로로 조금 넘치게 */
.life-primary,.button.light,.button.primary{background-size:106% 118%!important;background-position:center!important}
.life-primary:hover,.button.light:hover,.button.primary:hover{background-size:110% 126%!important}
}