🌸벚꽃 나무 아래에서 - 벚꽃 한밤 (170977463)

Nocturne
— SAKURA EDITION
ISSUE 02 · 2026 · ₩ 0
Cover Story · Theme Patch
벚꽃 나무
아래에서.
사이드 배지가 카드 안에 갇히고, 스포일러는 다크 배경에 묻혔다. 원본을 살리기 위한 8개의 작은 손길.
패치 노트 · v2.0 · 한밤 변주 포함
floating UI 모듈 호환
소악마 스포일러 가독성
PC 카드 세로 확장
+ 벚꽃 한밤 NEW
DOWNLOAD
수정된 CSS 파일
원본 게시글 ·
arca.live/b/characterai/166675115
REMOVALS
5
ADDITIONS
3
VARIANTS
4
Part I · Summary
수정 요약
#
대상
동작
해결 문제
1
.sakura
content-visibility, contain-intrinsic-size 제거
사이드 배지가 카드 안에 갇힘
2
.sakura__petals
contain: layout style paint 제거
동일 (일관성 확보)
3
.sakura__card
isolation: isolate 제거
뒷 카드에 배지가 덮임
4
.sakura__body
z-index: 1 제거
동일
5
.sakura__fallen
will-change: transform, opacity 제거
35개×N메시지 상시 GPU 레이어 예약 해제
6
customCSS 말미
x-risu-hidden-Spoiler 오버라이드 추가
소악마 스포일러 가독성 복원
7
customCSS 말미
@media
블록 추가
캐릭터 카드 세로 2배 (유저 카드 제외)
8
.sakura__page-left
content-visibility: auto + contain-intrinsic-size 추가
스크롤 밖 카드 렌더링 OFF — 성능 보완
Part II · Removals
제거 항목
원본에서 삭제한 다섯 가지 속성
1.
.sakura — content-visibility 제거
content-visibility: auto는 암묵적으로 contain: layout paint를 적용합니다. 자손 position: fixed 요소의 containing block이 .sakura가 되어, 모듈에서 주입하는 사이드 배지·패널이 카드 안에 갇히는 현상의 근본 원인입니다. 성능 보완은 8번(.sakura__page-left)에서 안전하게 재적용합니다.
.sakura
{
    display: block; width: 1100px; max-width: 96vw;
    margin: 32px auto; position: relative; box-sizing: border-box;
content-visibility: auto;
/* ← 제거 */
contain-intrinsic-size: auto 580px;
/* ← 제거 */
}
2.
.sakura__petals 계열 — contain 제거
명시적 containment로 stacking context를 생성. 일관성을 위해 함께 제거합니다. 벚꽃잎 애니메이션 성능 최적화 효과는 잃지만 실사용 체감 없음.
.sakura__petals
{ ...;
contain: layout style paint;
}
/* ← 제거 */
.sakura__petals-hover
{ ...;
contain: layout style paint;
}
/* ← 제거 */
.sakura__petal-pile
{ ...;
contain: layout style paint;
}
/* ← 제거 */
3.
.sakura__card — isolation: isolate 제거
isolation: isolate는 새로운 stacking context를 생성합니다. 메시지마다 독립 stacking context가 생기면 이전 메시지의 position: fixed 자손이 다음 카드 배경에 덮힙니다.
사이드 배지가 카드 뒤로 숨는 증상의 직접 원인.
.sakura__card
{
    position: relative; overflow: hidden;
isolation: isolate;
/* ← 제거 */
height: 100%;
}
▸ 사이드 배지 · before / after
▷ BEFORE — 배지가 카드에 갇힘
AFTER — 배지 정상 노출
4.
.sakura__body — z-index: 1 제거
position: relative + z-index가 auto가 아닌 값 = stacking context 생성 조건. position: relative는 유지해서 자손 absolute의 기준점은 보존합니다.
.sakura__body
{
    position: relative;
/* ← 유지 */
z-index: 1;
/* ← 제거 */
padding: 30px 28px 28px;
}
5.
.sakura__fallen — will-change 제거
낙화 꽃잎(fallen) 35개가 메시지마다 생성되는데, will-change: transform, opacity가 각 요소를 상시 GPU 컴포지팅 레이어로 올려둡니다. 애니메이션이 끝난 후에도 레이어가 해제되지 않아 VRAM을 낭비합니다. 활성 낙하 중인 .sakura__petal의 will-change는 그대로 유지합니다.
.sakura__fallen
{
will-change: transform, opacity;
/* ← 제거 */
}
Part III · Additions
추가 항목
원본에 없던 세 가지 새 블록
6.
소악마 히든 스포일러 색상 복원
벚꽃 테마가 .sakura__text p { color: var(--sakura-text-primary) !important }처럼 어두운 텍스트를 일괄 강제해서, 소악마 모듈의 다크 배경 스포일러 내부 텍스트까지 덮어써
다크 글자 + 다크 배경 = 안 보임
상태가 됩니다.
핵심 — x-risu- 접두사 필수
· RisuAI의 DOMPurify hook이
class="hidden-Spoiler"
를 자동으로
class="x-risu-hidden-Spoiler"
로 변환
· customCSS는 prefix 없이 그대로 주입 → 수동으로
x-risu-
붙여야 함
· Specificity:
.sakura__text details.x-risu-hidden-Spoiler > div p
(0,2,3) > 테마 (0,1,1) → 이김
/* TW-FIX: restore 소악마 hidden-Spoiler colors */
.sakura__text details.x-risu-hidden-Spoiler > div
,
.sakura__text details.x-risu-hidden-Spoiler > div p
,
.sakura__text details.x-risu-hidden-Spoiler > div li
, ... {
color: #e8e0ec !important;
-webkit-text-fill-color: #e8e0ec !important;
background: transparent !important;
}
.sakura__text details.x-risu-hidden-Spoiler > summary
{
color: #d4c5e0 !important;
}
.sakura__text details.x-risu-hidden-Spoiler > div mark
{
color: #f0c8de !important;
background: rgba(155,127,212,0.15) !important;
}
/* TW-FIX END */
▸ 소악마 히든 스포일러 · before / after
▷ BEFORE — 텍스트 안 보임
AFTER — 텍스트 정상
7.
PC 캐릭터 카드 세로 2배 확장
PC 화면에서 캐릭터 응답 카드만 세로 확대. 가로(width)는 1100px 유지. 유저 입력 카드는 영향 없음.
transform: scale() 안 쓴 이유 — transform은 자손 position: fixed의 containing block을 만들어 3~4번 버그가 재발하므로, 실제 치수를 직접 증가.
/* TW-SIZE: 2x vertical for CHARACTER cards only (PC) */
@media
screen and (min-width: 1200px)
{
.sakura