risum 모듈 — RISU modules[] — 기능 확장
👍 41 · 조회 1864 · 2026-04-10
미연시 1인/2인 상태창
1인 ver
귀하의 브라우저는 html5 video를 지원하지 않습니다.
귀하의 브라우저는 html5 video를 지원하지 않습니다.
스탠딩
일러스트
2인 ver
귀하의 브라우저는 html5 video를 지원하지 않습니다.
귀하의 브라우저는 html5 video를 지원하지 않습니다.
스탠딩
일러스트
이름이랑 선택지 좌우 장식은 원래 이 상태창이 제작 중인 봇 전용으로 만들던거라
내가 추가해둔거고 다운로드 파일에서는 1인 상태창처럼 장식 없이 첨부되어있음
구성
날짜, 시간, 장소, 상태, 속마음
예시
1인: [ Date: Friday, May 14th, 2026 | Time: 23:00 PM | Location: Bedroom | Status: Cuddled up under the blanket. | I should sleep now... ]
2인: [ Date: Friday, May 14th, 2026 | Time: 3:21 PM ] [ {{char}} | Location: Living room | Status: Standing by the window, watching outside. | There's still some time left. ] [ {{user}} | Location: Hallway | Status: Pausing in place, glancing around. | What was I about to do? ]
지시문에도 예시가 포함되어있음
최대한 캐릭터 해석에 영향을 안주려고 무난한 문장으로 적어뒀는데
예민한 사람들은 예시문장을 삭제하거나 수정해서 사용해줘
날짜, 시간
장소
장소, 상태
속마음
일부러 첫 화면에서 대화창 클릭할 때 날짜, 시간, 장소는 쉽게 볼 수 있도로 해뒀어
선택지 클릭 후 장소가 한 번 더 상태랑 언급되지만
두번 출력시키는 건 아니고 보이는 것만 두번 보이게 해둠 (상태랑 연관지어서 같이 보려고)
처음 화면으로 되돌아가려면 대화창 하단에 작은 특수기호 버튼을 눌러주면 됨
2인은 1인이랑 동일한데 차이점은 선택지로 장소, 상태, 속마음을 캐릭터마다 구분해서 볼 수 있음
로어북
정규식 스크립트
모듈 임포트하면 상태창 지시문이 담긴 로어북이랑 CSS/HTMl이 담긴 정규식이 있음
스탠딩, 일러스트 택1로 사용해야하고
1인으로 할 것인지 2인으로 할 것인지
2인은 또 봇&페소, 봇1&봇2로 지시문 나눠두었어서 거기서 택1하면 됨
유동적 1/2인 상태창은 테스트를 많이 안해봤는데 2인봇 기준으로 만든거고
장면에 등장하는 캐릭터의 수에 따라 1/2인 상태창 중 하나가 나옴
그래서 얘는 사용시 1인, 2인 정규식 둘 다 활성화를 해줘야함
불안정할수도... 일단 넣어봤어
모듈안에 설명 적어뒀으니 참고해줘
필요한 이미지랑 이미지를 어떻게 추가에셋에 넣어야 하는지도 같이 적어뒀어
어렵지 않으니 거기서 확인해주셈
다운로드
고마운 자료
지시문을 많이 참고했어요
2인(+3인) 상태창 타임 다이얼 ver
이모지 알림 상태창: 3종 재공유 | 11/06 업데이트
이 상태창이 재밌는 게 개조를 다양하게 할 수 있음
디자인 꾸미는 걸 되게 다양하게 할 수 있어
Lua 이용하면 일러스트들도 매번 다르게 나타나게 할 수도 있고
gif나 동영상 넣어서 움짤 사용해도 되고....
예쁜 디자인들 개조해서 배포해주면 정말 기쁠 듯
이 상태에서 되게 좋았던 세팅은
타이틀 일러스트를 움짤로 하는 거나
이전화면이랑 이후 화면 연결되는 이미지로
하는 것도 좋았음
근데 코드가 ㄹㅇ 이상태라.... 갑자기 이상해질수도 있고 하 몰라 저 너무 지쳤어요
CC BY-NC-SA 4.0
국제 라이선스 적용 이 저작물은 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다. 이 저작물은 아카라이브 커뮤니티 - AI 채팅 채널을 위해 공개되었으며, AI 채팅 채널 외 타 채널 혹은 커뮤니티에 공유, 배포 등으로 이용할 때에는 반드시 원 저작자의 이름과 출처를 명시해야 합니다. 상업적 용도의 경우 어떠한 이유로도 이용할 수 없습니다. 리믹스, 변형, 2차적 저작물을 작성하고 그 결과물을 공유할 경우에는 원 저작물과 동일한 조건의 CCL을 적용하여야 합니다.{
"name": "🎮 미연시 1인/2인 상태창",
"description": "",
"id": "e7a9ed21-350c-4803-9f0c-1dcca16471fc",
"assets": [],
"hideIcon": false,
"lorebook": [
{
"key": "",
"comment": "⚙ Char/User 2인 상태창",
"content": "@@depth 0\n### Status Interface\n- Always place this format at the very end of the output.\n - format: [ Date: Day of the week, month day, year | Time: Current time ] [ {{char}}'s name | Location: Current position of {{char}} | Status: The current state of {{char}} | {{char}}'s Internal monologue. ] [ {{user}}'s name | Location: Current position of {{user}} | Status: The current state of {{user}} | {{user}}'s Internal monologue. ]\n Example:\n [ Date: Friday, May 14th, 2026 | Time: 3:21 PM ] [ {{char}} | Location: Living room | Status: Standing by the window, watching outside. | There's still some time left. ] [ {{user}} | Location: Hallway | Status: Pausing in place, glancing around. | What was I about to do? ]\n\n- Location: Briefly in words, not sentences.\n- Status: refers to the actions that {{char}}/{{user}} is currently performing, not their emotional state.\n- Internal monologue: {{char}}/{{user}}'s private thought—single line only. Deadpan observation with subtle emotional weight underneath.",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"useRegex": false,
"bookVersion": 2
},
{
"key": "",
"comment": "⚙ Char 1인 상태창",
"content": "@@depth 0\n### Status Interface\n- Always place this format at the very end of the output.\n [ Date: Day of the week, month day, year | Time: Current time | | Location: Current location | Status: The current state of {{char}} | {{char}}'s Internal monologue ]\n Example:\n [ Date: Friday, May 14th, 2026 | Time: 11:00 PM | Location: Bedroom | Status: Cuddled up under the blanket. | I should sleep now... ]\n\n- Location: Briefly in words, not sentences.\n- Status: refers to the actions that {{char}} is currently performing, not their emotional state.\n- Internal monologue: {{char}}'s private thought—single line only. Deadpan observation with subtle emotional weight underneath.",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"useRegex": false,
"bookVersion": 2
},
{
"key": "folder:5009b2ed-9d80-48b7-bb15-2d1f816c47a1",
"comment": "For Char1/Char2 ",
"content": "",
"mode": "folder",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"bookVersion": 2
},
{
"key": "",
"comment": "ㅤ➤ 설명",
"content": "⚙ 유동적 1인/2인 상태창: 장면에 따라 1인 상태창 혹은 2인 상태창 둘 중 하나로 출력시키는 지시임\n⚙ 고정 2인 상태창: 페소와 봇이 아니라 Char1/Char2, 즉 2인봇을 위한 상태창 위와 달리 고정적으로 반드시 두명분의 상태창을 출력함\n\n지시문 읽어보고 'Char1이름' 'Char2이름' 에 사용할 캐릭터 이름을 채워줘\n\n➤ '유동적 1인/2인 상태창' 사용시 정규식에 있는 2인 상태창과 1인 상태창을 함께 활성화할 것",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"folder": "folder:5009b2ed-9d80-48b7-bb15-2d1f816c47a1",
"useRegex": false,
"bookVersion": 2
},
{
"key": "",
"comment": "⚙ 유동적 1인/2인 상태창",
"content": "@@depth 0\n### Status Interface\n- Always place this format at the very end of the output. (Char1= Char1이름, Char2= Char2이름)\n- Distinguish between the single-person status interface and the two-person status interface formats. When only one Char appears in a scene, use the single-person status interface; when both Chars appear in a scene, use the two-person status interface. Do not use both formats at the same time.\n\n - Single-person format: [ Char1/Char2's name | Date: Day of the week, month day, year | Time: Current time | | Location: Current location | Status: The current state of Char1/Char2 | Char1/Char2's Internal monologue ]\n Example:\n [ Char1이름 | Date: Friday, May 14th, 2026 | Time: 11:00 PM | Location: Bedroom | Status: Cuddled up under the blanket. | I should sleep now... ]\n\n - Two-person format: [ Date: Day of the week, month day, year | Time: Current time ] [ Char1's name | Location: Current position of Char1 | Status: The current state of Char1 | Char1's Internal monologue. ] [ Char2's name | Location: Current position of Char2 | Status: The current state of Char2 | Char2's Internal monologue. ]\n Example:\n [ Date: Friday, May 14th, 2026 | Time: 3:21 PM ] [ Char1이름 | Location: Living room | Status: Standing by the window, watching outside. | There's still some time left. ] [ Char2이름 | Location: Hallway | Status: Pausing in place, glancing around. | What was I about to do? ]\n\n- Location: Briefly in words, not sentences.\n- Status: refers to the actions that Char1/Char2 is currently performing, not their emotional state.\n- Internal monologue: Char1/Char2's private thought—single line only. Deadpan observation with subtle emotional weight underneath.",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"useRegex": false,
"bookVersion": 2,
"folder": "folder:5009b2ed-9d80-48b7-bb15-2d1f816c47a1"
},
{
"key": "",
"comment": "⚙ 고정 2인 상태창",
"content": "@@depth 0\n### Status Interface\n- Always place this format at the very end of the output. (Char1= Char1이름, Char2= Char2이름)\n - format: [ Date: Day of the week, month day, year | Time: Current time ] [ Char1's name | Location: Current position of Char1 | Status: The current state of Char1 | Char1's Internal monologue. ] [ Char2's name | Location: Current position of Char2 | Status: The current state of Char2 | Char2's Internal monologue. ]\n Example:\n [ Date: Friday, May 14th, 2026 | Time: 3:21 PM ] [ Char1이름 | Location: Living room | Status: Standing by the window, watching outside. | There's still some time left. ] [ Char2이름 | Location: Hallway | Status: Pausing in place, glancing around. | What was I about to do? ]\n\n- Location: Briefly in words, not sentences.\n- Status: refers to the actions that Char1/Char2 is currently performing, not their emotional state.\n- Internal monologue: Char1/Char2's private thought—single line only. Deadpan observation with subtle emotional weight underneath.",
"mode": "normal",
"insertorder": 100,
"alwaysActive": false,
"secondkey": "",
"selective": false,
"useRegex": false,
"bookVersion": 2,
"folder": "folder:5009b2ed-9d80-48b7-bb15-2d1f816c47a1"
}
],
"regex": [
{
"comment": "ㅤ➤ 설명",
"in": "",
"out": "# 스탠딩 이미지 리스트\n## 2인 상태창 \n- standingbg: 스탠딩 이미지의 뒷배경\n- standing{{char}}/Char1: 캐릭터1의 스탠딩 이미지\n- standing{{user}}/Char2: 캐릭터2의 스탠딩 이미지\n\n## 1인 상태창 \n- titleillust: 상태창 메인 배경 이미지\n(2인이 아니기 때문에 스탠딩 이미지가 썰렁하게 하나 있기보단 메인 이미지가 있는 게 나을 것 같았음)\n- standingbg\n- standing{{char}}\n\n# 일러스트 이미지 리스트\n## 2인 상태창 \n- titleillust\n- illust{{char}}/Char1\n- illust{{user}}/Char2\n\n## 1인 상태창 \n- titleillust\n- illust{{char}}\n\n---\n\n예시: \n'치즈'라는 봇과 '집사'라는 페소로 2인 상태창 중 스탠딩을 사용한다고 가정시\n- standingbg: 스탠딩 이미지의 뒷배경을 standingbg 라는 이름으로 추가 에셋에 등록\n- standing{{char}}/Char1: standing치즈 라는 이름으로 치즈의 스탠딩 이미지를 추가 에셋에 등록\n- standing{{user}}/Char2: standing집사 라는 이름으로 집사의 스탠딩 이미지를 추가 에셋에 등록\n\n봇과 페소가 아니라 치즈라는 캐릭터1, 김밥이라는 캐릭터2로 구성된 2인봇 등록도 마찬가지로 예시를 들어보자면\n'standing치즈'는 그대로 standing치즈 라는 이름으로\n'standing집사'는 standing집사라는 이름으로 추가 에셋에 등록하며 됨\n\n종류가 많기 때문에 이해를 돕기위해 풀어서 말했지만 그냥 standing+이름으로 등록하라는 말임\n",
"type": "disabled",
"ableFlag": false
},
{
"comment": "ㅤㅤㅤㅤㅤㅤ⤵ 고정 1인 상태창",
"in": "",
"out": "",
"type": "disabled",
"ableFlag": false
},
{
"comment": "스탠딩 1인 상태창",
"in": "\\[ Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| Status: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none; }\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative; width: 47em; height: 27.8em; margin: auto; overflow: hidden;\n border: 1px solid #575759; z-index: 10; font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff; border-radius: 7px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1;\n}\n.vn-bg::after {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.2) 100%); z-index: 1;\n}\n.bg-title { opacity: 1; transition: opacity 0.5s ease; }\n.bg-standing { opacity: 0; transition: opacity 0.5s ease; }\n.vn-container:has(.route-1:checked) .bg-standing { opacity: 1; }\n.vn-container:has(.route-1:checked) .bg-title { opacity: 0; }\n\n.vn-standing {\n position: absolute; bottom: 0px; background-size: contain;\n background-position: bottom center; background-repeat: no-repeat;\n z-index: 2; transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.vn-stand1 {\n left: -5%; bottom: -20px; transform: translateX(0); width: 70%; height: 105%; opacity: 0;\n}\n\n/* 스탠딩 캐릭터 애니메이션 */\n.vn-container:has(.route-1:checked) .vn-stand1 {\n left: 50%; transform: translateX(-50%) scale(1.05); z-index: 3; opacity: 1;\n}\n\n.vn-choices {\n position: absolute; left: 50%; bottom: 178px; transform: translateX(-50%);\n display: flex; flex-direction: column; gap: -10px; z-index: 10;\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7); border: 1px solid #575759;\n padding: 4px 90px; border-radius: 5px; margin-top: -8px;\n text-align: center; cursor: pointer; font-size: 0.95em;\n transition: all 0.2s ease; display: block; color: #fff; position: relative;\n}\n\n.vn-choice-btn:hover { border-color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.8); }\n\n.vn-name {\n position: absolute; left: 40px; bottom: 87px; background-color: #080708;\n padding: 3px 30px; font-weight: bold; font-size: 1.1em; border-radius: 5px;\n z-index: 6; letter-spacing: 1px; border: 1px solid #575759; color: #fff;\n}\n\n\n/* 하단 대화창 디자인 (Fallback 색상 추가) */\n.vn-dialogue {\n position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;\n background-color: rgba(0, 0, 0, 0.75);\n background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.72) 70%, rgba(255, 255, 255, 0.02) 100%);\n padding: 25px 30px; box-sizing: border-box; z-index: 5;\n cursor: pointer; display: block; user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative; width: 100%; height: 100%; bottom: 22px; font-size: 1.05em; line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.3s ease-in-out; pointer-events: none; \n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute; bottom: 8px; right: 12px; z-index: 7; background: none; border: none;\n color: rgba(255, 255, 255, 0.35); font-size: 1rem; cursor: pointer; padding: 2px 4px;\n line-height: 1; transition: color 0.2s ease;\n}\n.vn-reset-btn:hover { color: rgba(255, 255, 255, 0.85); }\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none; }\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { opacity: 0; }\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { opacity: 1; }\n\n/* 이름 라우팅 */\n.name-route1 { display: none; }\n.vn-container:has(.route-1:checked) .name-base { display: none; }\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n\n@media (max-width: 768px) {\n .vn-container { font-size: calc(100vw / 47); width: 35em; height: 23em; }\n .vn-stand1 { left: -3.5%; bottom: -14px; transform: translateX(0); width: 70%; height: 105%; }\n .vn-choices { bottom: 6.5em; width: 100%; align-items: center; }\n .vn-choice-btn { font-size: 0.8em; margin-top: -1em; padding: 0.08em 3em; border-radius: 0.32em; white-space: nowrap; width: max-content; max-width: calc(100% - 4.5em); box-sizing: border-box; }\n .vn-name { left: 1.9em; bottom: 6em; padding: 0.01em 1.7em; border-radius: 0.28em; }\n .vn-dialogue { height: 5.25em; padding: 1.56em 1.87em; overflow: hidden; }\n .vn-dialogue-content { position: absolute; top: 1.27em; left: 1.87em; right: 3em; height: auto; width: auto; bottom: 0.5em; }\n .text-default, .text-clicked { position: absolute; top: 0; left: 0; font-size: 0.7em; right: 0; width: auto !important; height: 100%; overflow-y: auto; margin: 0; padding: 0; }\n .text-default::-webkit-scrollbar, .text-clicked::-webkit-scrollbar { display: none; }\n .text-default, .text-clicked { -ms-overflow-style: none; scrollbar-width: none; }\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { pointer-events: none; }\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { pointer-events: auto; }\n .vn-reset-btn { font-size: 2em; bottom: 0.5em; right: 0.75em; padding: 0.12em 0.25em; }\n}\n</style>\n</head>\n<body>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg bg-title\" style=\"background-image: url('{{raw::titleillust}}');\"></div>\n <div class=\"vn-bg bg-standing\" style=\"background-image: url('{{raw::standingbg}}');\"></div>\n <div class=\"vn-standing vn-stand1\" style=\"background-image: url('{{raw::standing{{char}}}}');\"></div>\n <div class=\"vn-name name-base\">{{char}}</div>\n <div class=\"vn-name name-route1\">{{char}}</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$1, $2</div>\n <div class=\"text-clicked\">{{char}} is at $3.</div> \n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$3, $4</div>\n <div class=\"text-clicked\">$5</div> \n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">{{char}}</label>\n </div>\n </div>\n</form>\n</body>",
"type": "disabled",
"ableFlag": false
},
{
"comment": "일러스트 1인 상태창",
"in": "\\[ Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| Status: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none;\n}\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative;\n width: 47em;\n height: 27.8em;\n margin: auto;\n overflow: hidden;\n border: 1px solid #575759;\n z-index: 10;\n font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff;\n border-radius: 4px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n z-index: 1;\n transition: opacity 0.5s ease;\n}\n.vn-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);\n z-index: 1;\n}\n\n/* 선택지 영역 */\n.vn-choices {\n position: absolute;\n left: 50%;\n bottom: 178px;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 0px;\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7);\n border: 1px solid #575759;\n padding: 4px 90px;\n margin-top: -8px; \n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n font-size: 0.95em;\n transition: all 0.2s ease;\n display: block;\n color: #fff;\n position: relative;\n}\n\n.vn-choice-btn:hover {\n border-color: rgba(255, 255, 255, 0.8);\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n.vn-name {\n position: absolute;\n left: 40px;\n bottom: 87px;\n background-color: #080708;\n padding: 3px 30px;\n font-weight: bold;\n font-size: 1.1em;\n border-radius: 5px;\n z-index: 6;\n letter-spacing: 1px;\n border: 1px solid #575759;\n color: #fff;\n position: absolute;\n}\n\n/* 하단 대화창 디자인 */\n.vn-dialogue {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.78) 0%,\n rgba(0, 0, 0, 0.72) 70%,\n rgba(255, 255, 255, 0.02) 100%\n );\n padding: 25px 30px;\n box-sizing: border-box;\n z-index: 5;\n cursor: pointer;\n display: block;\n user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative;\n width: 100%;\n height: 100%;\n bottom: 22px;\n font-size: 1.05em;\n line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n transition: opacity 0.3s ease-in-out;\n pointer-events: none; \n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute;\n bottom: 8px;\n right: 12px;\n z-index: 7;\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.35);\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 4px;\n line-height: 1;\n transition: color 0.2s ease;\n}\n.vn-reset-btn:hover {\n color: rgba(255, 255, 255, 0.85);\n}\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none;\n}\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base { display: none;\n}\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n\n/* 라우트별 배경 표시/숨김 */\n.vn-bg-route1 {\n opacity: 0;\n}\n.vn-container:has(.route-1:checked) .vn-bg-base { opacity: 0; }\n.vn-container:has(.route-1:checked) .vn-bg-route1 { opacity: 1; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { opacity: 0;\n}\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { opacity: 1;\n}\n\n/* 이름 라우팅 */\n.name-route1 { display: none; }\n.vn-container:has(.route-1:checked) .name-base { display: none;\n}\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n\n@media (max-width: 768px) {\n .vn-container {\n font-size: calc(100vw / 47);\n width: 35em;\n height: 23em;\n }\n\n .vn-choices {\n bottom: 6.5em;\n width: 100%;\n align-items: center;\n }\n\n .vn-choice-btn {\nfont-size: 0.8em;\nmargin-top: -1em;\n padding: 0.08em 3em;\n border-radius: 0.32em;\n white-space: nowrap;\n width: max-content;\n max-width: calc(100% - 4.5em);\n box-sizing: border-box;\n }\n .vn-choice-btn::before,\n .vn-choice-btn::after {\n width: 3.94em;\n height: 6.57em;\n }\n .vn-choice-btn::before { left: -2em; }\n .vn-choice-btn::after { right: -2em; }\n\n .vn-name {\n left: 1.9em;\n bottom: 6em;\n padding: 0.01em 1.7em;\n border-radius: 0.28em;\n }\n .vn-name::before,\n .vn-name::after {\n width: 4.4em;\n height: 6.68em;\n }\n .vn-name::before { left: -2.2em; }\n .vn-name::after { right: -2.2em; }\n\n .vn-dialogue {\n height: 5.25em;\n padding: 1.56em 1.87em;\n overflow: hidden;\n\n }\n.vn-dialogue-content {\n position: absolute;\n top: 1.27em;\n left: 1.87em;\n right: 3em;\n height: auto;\n width: auto; /* 이거 추가 */\n bottom: 0.5em; \n}\n\n.text-default, .text-clicked {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 0.7em;\n right: 0;\n width: auto !important;\n height: 100%;\n overflow-y: auto;\n margin: 0;\n padding: 0;\n}\n\n .text-default::-webkit-scrollbar,\n .text-clicked::-webkit-scrollbar {\n display: none;\n }\n .text-default, .text-clicked {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default {\n pointer-events: none;\n }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked {\n pointer-events: auto;\n }\n\n .vn-reset-btn {\n font-size: 2em;\n bottom: 0.5em;\n right: 0.75em;\n padding: 0.12em 0.25em;\n }\n}\n</style>\n</head>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg vn-bg-base\" style=\"background-image: url('{{raw::titleillust}}');\"></div>\n <div class=\"vn-bg vn-bg-route1\" style=\"background-image: url('{{raw::illust{{char}}}}');\"></div>\n <div class=\"vn-name name-base\">{{char}}</div>\n <div class=\"vn-name name-route1\">{{char}}</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$1, $2</div>\n <div class=\"text-clicked\">{{char}} is at $3.</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$3, $4</div>\n <div class=\"text-clicked\">$5</div>\n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">{{char}}</label>\n </div>\n </div>\n</form>",
"type": "disabled",
"ableFlag": false
},
{
"comment": "ㅤㅤㅤㅤㅤㅤ⤵ 2인 상태창",
"in": "",
"out": "",
"type": "disabled",
"ableFlag": false
},
{
"comment": "스탠딩 2인 상태창 0",
"in": "\\[\\s*Date:\\s*(.*?)\\s*\\|\\s*Time:\\s*(.*?)\\s*\\]\\s* \\[\\s*(.*?)\\s*\\|\\s*Location:\\s*(.*?)\\s*\\|\\s*Status:\\s*(.*?)\\s*\\|\\s*(.*?)\\s*\\]\\s* \\[\\s*(.*?)\\s*\\|\\s*Location:\\s*(.*?)\\s*\\|\\s*Status:\\s*(.*?)\\s*\\|\\s*(.*?)\\s*\\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none;\n}\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative;\n width: 47em;\n height: 27.8em;\n margin: auto;\n overflow: hidden;\n border: 1px solid #575759;\n z-index: 10;\n font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff;\n border-radius: 7px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n z-index: 1;\n}\n.vn-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.2) 100%);\n z-index: 1;\n}\n\n.vn-standing {\n position: absolute;\n bottom: 0px; \n background-size: contain;\n background-position: bottom center;\n background-repeat: no-repeat;\n z-index: 2;\n transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.vn-stand1 {\n left: -5%;\n bottom: -20px; \n transform: translateX(0);\n width: 70%; \n height: 105%;\n}\n\n.vn-stand2 {\n right: -5%;\n bottom: 0px; \n transform: translateX(0);\n width: 75%;\n height: 100%;\n}\n\n.vn-choices {\n position: absolute;\n left: 50%;\n bottom: 170px;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 20px;\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7);\n border: 1px solid #575759;\n padding: 4px 90px;\n border-radius: 5px;\n margin-top: -8px; \n text-align: center;\n cursor: pointer;\n font-size: 0.95em;\n transition: all 0.2s ease;\n display: block;\n color: #fff;\n position: relative;\n}\n\n.vn-choice-btn:hover {\n border-color: rgba(255, 255, 255, 0.8);\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n.vn-name {\n position: absolute;\n left: 40px;\n bottom: 87px;\n background-color: #080708;\n padding: 3px 30px;\n font-weight: bold;\n font-size: 1.1em;\n border-radius: 5px;\n z-index: 6;\n letter-spacing: 1px;\n border: 1px solid #575759;\n color: #fff;\n\n position: absolute;\n}\n\n/* 하단 대화창 디자인 */\n.vn-dialogue {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.78) 0%,\n rgba(0, 0, 0, 0.72) 70%,\n rgba(255, 255, 255, 0.02) 100%\n );\n padding: 25px 30px;\n box-sizing: border-box;\n z-index: 5;\n cursor: pointer;\n display: block;\n user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative;\n width: 100%;\n height: 100%;\n bottom: 22px;\n font-size: 1.05em;\n line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute;\n top: 17px;\n left: 0;\n width: 100%;\n transition: opacity 0.3s ease-in-out;\n pointer-events: none; \n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute;\n bottom: 8px;\n right: 12px;\n z-index: 7;\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.35);\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 4px;\n line-height: 1;\n transition: color 0.2s ease;\n}\n.vn-reset-btn:hover {\n color: rgba(255, 255, 255, 0.85);\n}\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none;\n}\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1, .dialogue-route2 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base, .vn-container:has(.route-2:checked) .dialogue-base { display: none;\n}\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n.vn-container:has(.route-2:checked) .dialogue-route2 { display: block;\n}\n\n/* 스탠딩 캐릭터 애니메이션 */\n.vn-container:has(.route-1:checked) .vn-stand1 { left: 50%; transform: translateX(-50%) scale(1.05); z-index: 3;\n}\n.vn-container:has(.route-1:checked) .vn-stand2 { opacity: 0; right: -15%; } \n\n.vn-container:has(.route-2:checked) .vn-stand2 { right: 50%; transform: translateX(50%) scale(1.05); z-index: 3;\n}\n.vn-container:has(.route-2:checked) .vn-stand1 { opacity: 0; left: -15%; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default,\n.vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-default { opacity: 0;\n}\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked,\n.vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-clicked { opacity: 1;\n}\n\n/* 이름 라우팅 */\n.name-route1, .name-route2 { display: none; }\n.vn-container:has(.route-1:checked) .name-base,\n.vn-container:has(.route-2:checked) .name-base { display: none;\n}\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n.vn-container:has(.route-2:checked) .name-route2 { display: block;\n}\n@media (max-width: 768px) {\n .vn-container {\n font-size: calc(100vw / 47);\n width: 35em;\n height: 23em;\n }\n\n.vn-stand1 {\n left: -3.5%;\n bottom: -14px; \n transform: translateX(0);\n width: 70%; \n height: 105%;\n}\n\n .vn-choices {\n bottom: 6.7em;\n width: 100%;\n align-items: center;\n }\n\n .vn-choice-btn {\nfont-size: 0.8em;\nmargin-top: -1em;\n padding: 0.08em 3em;\n border-radius: 0.32em;\n white-space: nowrap;\n width: max-content;\n max-width: calc(100% - 4.5em);\n box-sizing: border-box;\n }\n\n .vn-name {\n left: 1.9em;\n bottom: 6em;\n padding: 0.01em 1.7em;\n border-radius: 0.28em;\n }\n\n .vn-dialogue {\n height: 5.25em;\n padding: 1.56em 1.87em;\n overflow: hidden;\n\n }\n.vn-dialogue-content {\n position: absolute;\n top: 1.27em;\n left: 1.87em;\n right: 3em;\n \n height: auto;\n width: auto; /* 이거 추가 */\n\n bottom: 0.5em; \n\n}\n\n\n.text-default, .text-clicked {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 0.7em;\n right: 0;\n width: auto !important;\n height: 100%;\n overflow-y: auto;\n margin: 0;\n padding: 0;\n\n}\n\n\n .text-default::-webkit-scrollbar,\n .text-clicked::-webkit-scrollbar {\n display: none;\n }\n .text-default, .text-clicked {\n -ms-overflow-style: none;\n scrollbar-width: none;\n \n\n }\n\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default,\n .vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-default {\n pointer-events: none;\n }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked,\n .vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-clicked {\n pointer-events: auto;\n }\n\n .vn-reset-btn {\n font-size: 2em;\n bottom: 0.5em;\n right: 0.75em;\n padding: 0.12em 0.25em;\n }\n}\n</style>\n</head>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg\" style=\"background-image: url('{{raw::standingbg}}');\"></div>\n <div class=\"vn-standing vn-stand1\" style=\"background-image: url('{{raw::standing$3}}');\"></div>\n <div class=\"vn-standing vn-stand2\" style=\"background-image: url('{{raw::standing$7}}');\"></div>\n <div class=\"vn-name name-base\">{{char}}</div>\n <div class=\"vn-name name-route1\">$3</div>\n <div class=\"vn-name name-route2\">$7</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$1, $2</div>\n <div class=\"text-clicked\">$3 is at $4, $7 is at $8.</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$4, $5</div>\n <div class=\"text-clicked\">$6</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route2\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route2\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$8, $9</div>\n <div class=\"text-clicked\">$10</div>\n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">$3</label>\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-2\">$7</label>\n </div>\n </div>\n</form>",
"type": "disabled",
"ableFlag": true,
"flag": "g<move_top>"
},
{
"comment": "일러스트 2인 상태창 0",
"in": "\\[\\s*Date:\\s*(.*?)\\s*\\|\\s*Time:\\s*(.*?)\\s*\\]\\s* \\[\\s*(.*?)\\s*\\|\\s*Location:\\s*(.*?)\\s*\\|\\s*Status:\\s*(.*?)\\s*\\|\\s*(.*?)\\s*\\]\\s* \\[\\s*(.*?)\\s*\\|\\s*Location:\\s*(.*?)\\s*\\|\\s*Status:\\s*(.*?)\\s*\\|\\s*(.*?)\\s*\\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none; }\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative;\n width: 47em;\n height: 27.8em;\n margin: auto;\n overflow: hidden;\n border: 1px solid #575759;\n z-index: 10;\n font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff;\n border-radius: 4px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n z-index: 1;\n transition: opacity 0.5s ease;\n}\n.vn-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);\n z-index: 1;\n}\n\n/* 라우트별 배경 표시/숨김 */\n.vn-bg-route1, .vn-bg-route2 {\n opacity: 0;\n}\n.vn-container:has(.route-1:checked) .vn-bg-base { opacity: 0; }\n.vn-container:has(.route-1:checked) .vn-bg-route1 { opacity: 1; }\n.vn-container:has(.route-2:checked) .vn-bg-base { opacity: 0; }\n.vn-container:has(.route-2:checked) .vn-bg-route2 { opacity: 1; }\n\n/* 선택지 영역 */\n.vn-choices {\n position: absolute;\n left: 50%;\n bottom: 170px;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 20px;\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7);\n border: 1px solid #575759;\n padding: 4px 90px;\n margin-top: -8px;\n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n font-size: 0.95em;\n transition: all 0.2s ease;\n display: block;\n color: #fff;\n position: relative;\n}\n\n.vn-choice-btn:hover {\n border-color: rgba(255, 255, 255, 0.8);\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n.vn-name {\n position: absolute;\n left: 40px;\n bottom: 87px;\n background-color: #080708;\n padding: 3px 30px;\n font-weight: bold;\n font-size: 1.1em;\n border-radius: 5px;\n z-index: 6;\n letter-spacing: 1px;\n border: 1px solid #575759;\n color: #fff;\n}\n\n/* 하단 대화창 디자인 */\n.vn-dialogue {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.78) 0%,\n rgba(0, 0, 0, 0.72) 70%,\n rgba(255, 255, 255, 0.02) 100%\n );\n padding: 25px 30px;\n box-sizing: border-box;\n z-index: 5;\n cursor: pointer;\n display: block;\n user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative;\n width: 100%;\n height: 100%;\n bottom: 22px;\n font-size: 1.05em;\n line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute;\n top: 17px;\n left: 0;\n width: 100%;\n transition: opacity 0.3s ease-in-out;\n pointer-events: none;\n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute;\n bottom: 8px;\n right: 12px;\n z-index: 7;\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.35);\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 4px;\n line-height: 1;\n transition: color 0.2s ease;\n}\n.vn-reset-btn:hover {\n color: rgba(255, 255, 255, 0.85);\n}\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none; }\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1, .dialogue-route2 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base,\n.vn-container:has(.route-2:checked) .dialogue-base { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n.vn-container:has(.route-2:checked) .dialogue-route2 { display: block; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default,\n.vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-default { opacity: 0; }\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked,\n.vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-clicked { opacity: 1; }\n\n/* 이름 라우팅 */\n.name-route1, .name-route2 { display: none; }\n.vn-container:has(.route-1:checked) .name-base,\n.vn-container:has(.route-2:checked) .name-base { display: none; }\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n.vn-container:has(.route-2:checked) .name-route2 { display: block; }\n\n@media (max-width: 768px) {\n .vn-container {\n font-size: calc(100vw / 47);\n width: 35em;\n height: 23em;\n }\n\n .vn-choices {\n bottom: 6.7em;\n width: 100%;\n align-items: center;\n }\n\n .vn-choice-btn {\n font-size: 0.8em;\n margin-top: -1em;\n padding: 0.08em 3em;\n border-radius: 0.32em;\n white-space: nowrap;\n width: max-content;\n max-width: calc(100% - 4.5em);\n box-sizing: border-box;\n }\n\n .vn-name {\n left: 1.9em;\n bottom: 6em;\n padding: 0.01em 1.7em;\n border-radius: 0.28em;\n }\n\n .vn-dialogue {\n height: 5.25em;\n padding: 1.56em 1.87em;\n overflow: hidden;\n }\n\n .vn-dialogue-content {\n position: absolute;\n top: 1.27em;\n left: 1.87em;\n right: 3em;\n height: auto;\n width: auto;\n bottom: 0.5em;\n }\n\n .text-default, .text-clicked {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 0.7em;\n right: 0;\n width: auto !important;\n height: 100%;\n overflow-y: auto;\n margin: 0;\n padding: 0;\n }\n\n .text-default::-webkit-scrollbar,\n .text-clicked::-webkit-scrollbar {\n display: none;\n }\n .text-default, .text-clicked {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default,\n .vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-default {\n pointer-events: none;\n }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked,\n .vn-container:has(.toggle-route2:checked) .dialogue-route2 .text-clicked {\n pointer-events: auto;\n }\n\n .vn-reset-btn {\n font-size: 2em;\n bottom: 0.5em;\n right: 0.75em;\n padding: 0.12em 0.25em;\n }\n}\n</style>\n</head>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg vn-bg-base\" style=\"background-image: url('{{raw::titleillust}}');\"></div>\n <div class=\"vn-bg vn-bg-route1\" style=\"background-image: url('{{raw::illust$3}}');\"></div>\n <div class=\"vn-bg vn-bg-route2\" style=\"background-image: url('{{raw::illust$7}}');\"></div>\n <div class=\"vn-name name-base\">{{char}}</div>\n <div class=\"vn-name name-route1\">$3</div>\n <div class=\"vn-name name-route2\">$7</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$1, $2</div>\n <div class=\"text-clicked\">$3 is at $4, $7 is at $8.</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$4, $5</div>\n <div class=\"text-clicked\">$6</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route2\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route2\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$8, $9</div>\n <div class=\"text-clicked\">$10</div>\n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">$3</label>\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-2\">$7</label>\n </div>\n </div>\n</form>",
"type": "disabled",
"ableFlag": true,
"flag": "g<move_top>"
},
{
"comment": "ㅤㅤㅤㅤㅤㅤ⤵ 유동적 1인 상태창",
"in": "",
"out": "",
"type": "disabled",
"ableFlag": false
},
{
"comment": "스탠딩 1인 상태창",
"in": "\\[ (.*?) \\| Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| Status: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none; }\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative; width: 47em; height: 27.8em; margin: auto; overflow: hidden;\n border: 1px solid #575759; z-index: 10; font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff; border-radius: 7px; box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 1;\n}\n.vn-bg::after {\n content: ''; position: absolute; inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.2) 100%); z-index: 1;\n}\n.bg-title { opacity: 1; transition: opacity 0.5s ease; }\n.bg-standing { opacity: 0; transition: opacity 0.5s ease; }\n.vn-container:has(.route-1:checked) .bg-standing { opacity: 1; }\n.vn-container:has(.route-1:checked) .bg-title { opacity: 0; }\n\n.vn-standing {\n position: absolute; bottom: 0px; background-size: contain;\n background-position: bottom center; background-repeat: no-repeat;\n z-index: 2; transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n\n.vn-stand1 {\n left: -5%; bottom: -20px; transform: translateX(0); width: 70%; height: 105%; opacity: 0;\n}\n\n/* 스탠딩 캐릭터 애니메이션 */\n.vn-container:has(.route-1:checked) .vn-stand1 {\n left: 50%; transform: translateX(-50%) scale(1.05); z-index: 3; opacity: 1;\n}\n\n.vn-choices {\n position: absolute; left: 50%; bottom: 178px; transform: translateX(-50%);\n display: flex; flex-direction: column; gap: -10px; z-index: 10;\n opacity: 0; pointer-events: none; transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7); border: 1px solid #575759;\n padding: 4px 90px; border-radius: 5px; margin-top: -8px;\n text-align: center; cursor: pointer; font-size: 0.95em;\n transition: all 0.2s ease; display: block; color: #fff; position: relative;\n}\n\n.vn-choice-btn:hover { border-color: rgba(255, 255, 255, 0.8); background-color: rgba(0, 0, 0, 0.8); }\n\n.vn-name {\n position: absolute; left: 40px; bottom: 87px; background-color: #080708;\n padding: 3px 30px; font-weight: bold; font-size: 1.1em; border-radius: 5px;\n z-index: 6; letter-spacing: 1px; border: 1px solid #575759; color: #fff;\n}\n\n\n/* 하단 대화창 디자인 (Fallback 색상 추가) */\n.vn-dialogue {\n position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;\n background-color: rgba(0, 0, 0, 0.75);\n background: linear-gradient(to right, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.72) 70%, rgba(255, 255, 255, 0.02) 100%);\n padding: 25px 30px; box-sizing: border-box; z-index: 5;\n cursor: pointer; display: block; user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative; width: 100%; height: 100%; bottom: 22px; font-size: 1.05em; line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute; top: 0; left: 0; width: 100%; transition: opacity 0.3s ease-in-out; pointer-events: none; \n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute; bottom: 8px; right: 12px; z-index: 7; background: none; border: none;\n color: rgba(255, 255, 255, 0.35); font-size: 1rem; cursor: pointer; padding: 2px 4px;\n line-height: 1; transition: color 0.2s ease;\n}\n.vn-reset-btn:hover { color: rgba(255, 255, 255, 0.85); }\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none; }\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { opacity: 0; }\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { opacity: 1; }\n\n/* 이름 라우팅 */\n.name-route1 { display: none; }\n.vn-container:has(.route-1:checked) .name-base { display: none; }\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n\n@media (max-width: 768px) {\n .vn-container { font-size: calc(100vw / 47); width: 35em; height: 23em; }\n .vn-stand1 { left: -3.5%; bottom: -14px; transform: translateX(0); width: 70%; height: 105%; }\n .vn-choices { bottom: 6.5em; width: 100%; align-items: center; }\n .vn-choice-btn { font-size: 0.8em; margin-top: -1em; padding: 0.08em 3em; border-radius: 0.32em; white-space: nowrap; width: max-content; max-width: calc(100% - 4.5em); box-sizing: border-box; }\n .vn-name { left: 1.9em; bottom: 6em; padding: 0.01em 1.7em; border-radius: 0.28em; }\n .vn-dialogue { height: 5.25em; padding: 1.56em 1.87em; overflow: hidden; }\n .vn-dialogue-content { position: absolute; top: 1.27em; left: 1.87em; right: 3em; height: auto; width: auto; bottom: 0.5em; }\n .text-default, .text-clicked { position: absolute; top: 0; left: 0; font-size: 0.7em; right: 0; width: auto !important; height: 100%; overflow-y: auto; margin: 0; padding: 0; }\n .text-default::-webkit-scrollbar, .text-clicked::-webkit-scrollbar { display: none; }\n .text-default, .text-clicked { -ms-overflow-style: none; scrollbar-width: none; }\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { pointer-events: none; }\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { pointer-events: auto; }\n .vn-reset-btn { font-size: 2em; bottom: 0.5em; right: 0.75em; padding: 0.12em 0.25em; }\n}\n</style>\n</head>\n<body>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg bg-title\" style=\"background-image: url('{{raw::titleillust}}');\"></div>\n <div class=\"vn-bg bg-standing\" style=\"background-image: url('{{raw::standingbg}}');\"></div>\n <div class=\"vn-standing vn-stand1\" style=\"background-image: url('{{raw::standing$1}}');\"></div>\n <div class=\"vn-name name-base\">$1</div>\n <div class=\"vn-name name-route1\">$1</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$2, $3</div>\n <div class=\"text-clicked\">$1 is at $4.</div> \n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$4, $5</div>\n <div class=\"text-clicked\">$6</div> \n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">$1</label>\n </div>\n </div>\n</form>\n</body>",
"type": "disabled",
"ableFlag": false
},
{
"comment": "일러스트 1인 상태창",
"in": "\\[ (.*?) \\| Date: (.*?) \\| Time: (.*?) \\| Location: (.*?) \\| Status: (.*?) \\| (.*?) \\]",
"out": "<head>\n<style>\n/* 전체 폼 리셋 방지 */\n.vn-form { margin: 0; padding: 0; border: none;\n}\n\n/* 전체 컨테이너 설정 */\n.vn-container {\n position: relative;\n width: 47em;\n height: 27.8em;\n margin: auto;\n overflow: hidden;\n border: 1px solid #575759;\n z-index: 10;\n font-family: 'Malgun Gothic', sans-serif;\n color: #ffffff;\n border-radius: 4px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.2);\n}\n\n/* 배경 이미지 설정 */\n.vn-bg {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n z-index: 1;\n transition: opacity 0.5s ease;\n}\n.vn-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);\n z-index: 1;\n}\n\n/* 선택지 영역 */\n.vn-choices {\n position: absolute;\n left: 50%;\n bottom: 178px;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n gap: 0px;\n z-index: 10;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n}\n\n.vn-choice-btn {\n background-color: rgba(0, 0, 0, 0.7);\n border: 1px solid #575759;\n padding: 4px 90px;\n margin-top: -8px; \n border-radius: 5px;\n text-align: center;\n cursor: pointer;\n font-size: 0.95em;\n transition: all 0.2s ease;\n display: block;\n color: #fff;\n position: relative;\n}\n\n.vn-choice-btn:hover {\n border-color: rgba(255, 255, 255, 0.8);\n background-color: rgba(0, 0, 0, 0.8);\n}\n\n.vn-name {\n position: absolute;\n left: 40px;\n bottom: 87px;\n background-color: #080708;\n padding: 3px 30px;\n font-weight: bold;\n font-size: 1.1em;\n border-radius: 5px;\n z-index: 6;\n letter-spacing: 1px;\n border: 1px solid #575759;\n color: #fff;\n position: absolute;\n}\n\n/* 하단 대화창 디자인 */\n.vn-dialogue {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 100px;\n background: linear-gradient(\n to right,\n rgba(0, 0, 0, 0.78) 0%,\n rgba(0, 0, 0, 0.72) 70%,\n rgba(255, 255, 255, 0.02) 100%\n );\n padding: 25px 30px;\n box-sizing: border-box;\n z-index: 5;\n cursor: pointer;\n display: block;\n user-select: none;\n}\n\n.vn-dialogue-content {\n position: relative;\n width: 100%;\n height: 100%;\n bottom: 22px;\n font-size: 1.05em;\n line-height: 1.5;\n}\n.text-default, .text-clicked {\n position: absolute;\n top: 0px;\n left: 0;\n width: 100%;\n transition: opacity 0.3s ease-in-out;\n pointer-events: none; \n}\n.text-clicked { opacity: 0; }\n\n/* ❈ 초기화 버튼 */\n.vn-reset-btn {\n position: absolute;\n bottom: 8px;\n right: 12px;\n z-index: 7;\n background: none;\n border: none;\n color: rgba(255, 255, 255, 0.35);\n font-size: 1rem;\n cursor: pointer;\n padding: 2px 4px;\n line-height: 1;\n transition: color 0.2s ease;\n}\n.vn-reset-btn:hover {\n color: rgba(255, 255, 255, 0.85);\n}\n\n.vn-container:hover .vn-choices { opacity: 1; pointer-events: auto; }\n.vn-dialogue:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-reset-btn:hover ~ .vn-choices { opacity: 0; pointer-events: none; }\n.vn-hidden-input { display: none;\n}\n\n/* 라우트에 따른 대화창 교체 */\n.dialogue-route1 { display: none; }\n.vn-container:has(.route-1:checked) .dialogue-base { display: none;\n}\n.vn-container:has(.route-1:checked) .dialogue-route1 { display: block; }\n\n/* 라우트별 배경 표시/숨김 */\n.vn-bg-route1 {\n opacity: 0;\n}\n.vn-container:has(.route-1:checked) .vn-bg-base { opacity: 0; }\n.vn-container:has(.route-1:checked) .vn-bg-route1 { opacity: 1; }\n\n/* 대화창 무한 토글 */\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default { opacity: 0;\n}\n.vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n.vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked { opacity: 1;\n}\n\n/* 이름 라우팅 */\n.name-route1 { display: none; }\n.vn-container:has(.route-1:checked) .name-base { display: none;\n}\n.vn-container:has(.route-1:checked) .name-route1 { display: block; }\n\n@media (max-width: 768px) {\n .vn-container {\n font-size: calc(100vw / 47);\n width: 35em;\n height: 23em;\n }\n\n .vn-choices {\n bottom: 6.5em;\n width: 100%;\n align-items: center;\n }\n\n .vn-choice-btn {\nfont-size: 0.8em;\nmargin-top: -1em;\n padding: 0.08em 3em;\n border-radius: 0.32em;\n white-space: nowrap;\n width: max-content;\n max-width: calc(100% - 4.5em);\n box-sizing: border-box;\n }\n .vn-choice-btn::before,\n .vn-choice-btn::after {\n width: 3.94em;\n height: 6.57em;\n }\n .vn-choice-btn::before { left: -2em; }\n .vn-choice-btn::after { right: -2em; }\n\n .vn-name {\n left: 1.9em;\n bottom: 6em;\n padding: 0.01em 1.7em;\n border-radius: 0.28em;\n }\n .vn-name::before,\n .vn-name::after {\n width: 4.4em;\n height: 6.68em;\n }\n .vn-name::before { left: -2.2em; }\n .vn-name::after { right: -2.2em; }\n\n .vn-dialogue {\n height: 5.25em;\n padding: 1.56em 1.87em;\n overflow: hidden;\n\n }\n.vn-dialogue-content {\n position: absolute;\n top: 1.27em;\n left: 1.87em;\n right: 3em;\n height: auto;\n width: auto; /* 이거 추가 */\n bottom: 0.5em; \n}\n\n.text-default, .text-clicked {\n position: absolute;\n top: 0;\n left: 0;\n font-size: 0.7em;\n right: 0;\n width: auto !important;\n height: 100%;\n overflow-y: auto;\n margin: 0;\n padding: 0;\n}\n\n .text-default::-webkit-scrollbar,\n .text-clicked::-webkit-scrollbar {\n display: none;\n }\n .text-default, .text-clicked {\n -ms-overflow-style: none;\n scrollbar-width: none;\n }\n\n .text-default { pointer-events: auto; }\n .text-clicked { pointer-events: none; }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-default,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-default {\n pointer-events: none;\n }\n\n .vn-container:has(.toggle-base:checked) .dialogue-base .text-clicked,\n .vn-container:has(.toggle-route1:checked) .dialogue-route1 .text-clicked {\n pointer-events: auto;\n }\n\n .vn-reset-btn {\n font-size: 2em;\n bottom: 0.5em;\n right: 0.75em;\n padding: 0.12em 0.25em;\n }\n}\n</style>\n</head>\n<form class=\"vn-form\">\n <div class=\"vn-container\">\n <input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-init\" checked>\n <div class=\"vn-bg vn-bg-base\" style=\"background-image: url('{{raw::titleillust}}');\"></div>\n <div class=\"vn-bg vn-bg-route1\" style=\"background-image: url('{{raw::illust$1}}');\"></div>\n <div class=\"vn-name name-base\">$1</div>\n <div class=\"vn-name name-route1\">$1</div>\n <label class=\"vn-dialogue dialogue-base\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-base\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$2, $3</div>\n <div class=\"text-clicked\">$1 is at $4.</div>\n </div>\n </label>\n <label class=\"vn-dialogue dialogue-route1\"><input type=\"checkbox\" class=\"vn-hidden-input toggle-route1\">\n <div class=\"vn-dialogue-content\">\n <div class=\"text-default\">$4, $5</div>\n <div class=\"text-clicked\">$6</div>\n </div>\n </label>\n <button type=\"reset\" class=\"vn-reset-btn\">❈</button>\n <div class=\"vn-choices\">\n <label class=\"vn-choice-btn\"><input type=\"radio\" name=\"vn-route\" class=\"vn-hidden-input route-1\">$1</label>\n </div>\n </div>\n</form>",
"type": "disabled",
"ableFlag": false
}
],
"trigger": [
{
"comment": "",
"type": "manual",
"conditions": [],
"effect": [
{
"type": "v2Header",
"code": "",
"indent": 0
}
]
},
{
"comment": "New Event",
"type": "manual",
"conditions": [],
"effect": []
}
],
"lowLevelAccess": false
}