cnation STS — 첨탑을 오르다

Version 1.3.11

원작 Slay the Spire (1편) 의 규칙을 그대로 재현한 모바일 세로형 웹 게임입니다. 스마트폰 브라우저에서 바로 실행되며, 컴퓨터(AI)가 조종하는 몬스터와 1층부터 50층까지 대결합니다.

• 카드/UI : HTML + CSS + 인라인 SVG (외부 이미지 파일 0개, 모든 문양은 벡터로 생성)
• 캐릭터/몬스터 : three.js 절차적 저폴리 모델 (외부 3D 모델·텍스처 0개)
• 효과음 : WebAudio 합성 (외부 음원 파일 0개)
• 빌드 도구 불필요 — 순수 ES 모듈, 정적 호스팅만으로 동작

---

1. 실행 방법

로컬

# 정적 서버라면 무엇이든 가능합니다
npx serve .            # 또는  npm run dev
python3 -m http.server 8080

→ 브라우저에서 http://localhost:8080 접속 (모바일 뷰로 보면 가장 자연스럽습니다).

file:// 로 직접 열면 ES 모듈 CORS 정책 때문에 동작하지 않습니다. 반드시 서버로 여세요.

Vercel 배포

정적 사이트라 별도 설정이 필요 없습니다.

vercel            # 프리뷰
vercel --prod     # 프로덕션

• Framework Preset : Other
• Build Command : 비움
• Output Directory : .

vercel.json 에 캐시/보안 헤더가 이미 들어 있습니다. 배포 후 모바일에서 홈 화면에 추가 하면 전체화면 앱처럼 실행됩니다 (manifest.webmanifest 포함).

---

2. 조작 방법 (세로형 원터치)

동작	조작
캐릭터 선택	새 게임 → 4명 중 선택 → 시작 보너스 선택
카드 선택	카드를 탭 (선택된 카드는 가운데에서 크게 표시)
카드 사용	선택된 카드를 한 번 더 탭 하거나 위로 밀기(스와이프)
대상 지정	적이 둘 이상이면 빨간 화살표가 뜬 적을 탭
턴 종료	우측 하단 턴 종료
더미 확인	좌/우 하단 뽑을 · 버린 · 소각 버튼
물약 사용	하단 물약 슬롯 탭
상태이상 설명	적/플레이어의 아이콘 탭
유물 설명	상단 유물 아이콘 탭

진행 상황은 매 층마다 localStorage 에 자동 저장되며 타이틀의 이어하기 로 복귀합니다.

---

3. 재현한 원작 규칙

층 구조 (요청 사양 그대로)

막	층	보스
1막	1 ~ 17층	17층 중간 보스
2막	18 ~ 34층	34층 중간 보스
3막	35 ~ 50층	50층 최종 보스

• 중간 보스(17층·34층)를 처치하면 다음 막을 체력 최대치로 시작합니다.
• 지도는 원작처럼 분기형이며, 각 막 중간에 보물 방, 보스 직전 행에 모닥불이 고정 배치됩니다.
• 방 종류 : 전투 / 정예 / ? 의문(이벤트) / 모닥불 / 상점 / 보물 / 보스

전투 규칙

• 매 턴 에너지 3, 카드 5장 드로우. 손패 최대 10장.
• 방어도는 턴 종료 시 사라짐 (바리케이드·캘리퍼스 예외).
• 피해 계산 순서 : 기본값 + 힘(+활력) → 약화 ×0.75 → 취약 ×1.5 → 내림 후 방어도 차감.
• 취약 받는 공격 피해 +50% / 약화 주는 피해 −25% / 허약 얻는 방어도 −25%
• 중독은 해당 액터의 턴 시작에 피해 후 1 감소, 금속화·도금 갑옷·연소·재생은 턴 종료에 발동.
• 인공물이 디버프를 1개씩 무효화, 무형은 받는 피해를 1로, 완충은 체력 손실 1회 무효.
• 지속시간형 디버프(취약/약화/허약/무형)는 소유자 턴 종료 시 1 감소.
• 소각 / 소멸 / 내재 / 보존 / X 비용 / 혼란(무작위 비용) 모두 구현.
• 적의 의도(Intent) 를 아이콘 + 예상 피해량(힘·약화·취약 반영)으로 표시. 룬 돔은 의도를 가립니다.
• 분열(슬라임), 형태 변환(수호자), 각성(깨어난 자), 시간 왜곡(시간 포식자), 수하 소환 등 보스 고유 기믹 포함.

보상 규칙

• 일반 1020G / 정예 2535G / 보스 95~105G
• 카드 보상 3장 (물음표 카드 +1, 부서진 왕관 −2, 기도 바퀴 일반전투 +1)
• 희귀도 롤 : 일반 → 고급 → 희귀, 희귀가 나오면 다음 확률 보정(원작의 rarity bonus 방식)
• 2막 12.5% / 3막 25% 확률로 보상 카드가 강화 상태로 등장
• 물약 드랍 확률 40% 에서 획득 시 −10%p, 실패 시 +10%p
• 정예 처치 시 유물, 보스 처치 시 보스 유물 3종 중 택 1

---

4. 구현 범위

항목	수량	비고
카드	363종	아이언클래드 75 · 사일런트 77 · 디펙트 76 · 와쳐 83 · 무색 33 · 상태이상 5 · 저주 14
캐릭터	4종	아이언클래드 / 사일런트 / 디펙트 / 와쳐
몬스터	57종	1~3막 일반·정예 + 보스 9종 전부
유물	117종	시작/일반/고급/희귀/보스 + 캐릭터 전용
물약	30종
? 이벤트	14종
시작 보너스	15종	혜택 10 + 대가가 따르는 보너스 5
힘·상태이상	115종

보스 목록

• 1막 : 수호자 / 육각유령 / 슬라임 보스
• 2막 : 청동 자동인형 / 챔피언 / 수집가
• 3막 : 깨어난 자 / 시간 포식자 / 도누와 데카

캐릭터별 고유 시스템

캐릭터	체력	시작 유물	고유 시스템
아이언클래드	80	작열하는 피	힘 축적 / 체력 회복
사일런트	70	뱀의 반지	중독 · 단검(Shiv) · 카드 버리기 연계
디펙트	75	금 간 핵	구체(Orb) — 번개/냉기/암흑/플라즈마 충전·발동, 집중(Focus)
와쳐	72	순수한 물	자세(Stance) — 분노(×2)/평온/신성(×3), 주문(Mantra), 통찰(Scry)

---

5. 프로젝트 구조

index.html                 진입점 (importmap + 화면 골격)
css/style.css              모바일 세로형 레이아웃 / 카드 스타일
vendor/three.module.min.js three.js (로컬 동봉 → 오프라인·CDN 차단 환경에서도 동작)
audio/                     배경음악 mp3 15곡 (128kbps · 약 34MB)
js/
 ├ main.js                 게임 컨트롤러 : 화면 전환, 지도, 전투 UI, 보상/상점/이벤트
 ├ util.js                 시드 난수(RNG), DOM 헬퍼
 ├ audio.js                WebAudio 합성 효과음 + 소리 설정 저장
 ├ bgm.js                  배경음악 : 화면별 곡 지정 · 크로스페이드 · 전투곡 랜덤
 ├ data/
 │   ├ carddb.js           카드 클래스 / 레지스트리
 │   ├ cards_ironclad.js   아이언클래드 75종
 │   ├ cards_colorless.js  무색 + 상태이상 + 저주
 │   ├ cards.js            카드 인덱스
 │   ├ monsters.js         몬스터 57종 + 조우 테이블
 │   ├ relics.js           유물 102종
 │   ├ potions.js          물약 30종
 │   └ events.js           ? 방 이벤트 14종
 ├ engine/
 │   ├ powers.js           힘·상태이상 정의
 │   ├ battle.js           전투 엔진 (턴·피해·AI·카드 해결)
 │   └ run.js              런 진행 : 지도 생성, 보상, 막 전환, 저장/불러오기
 ├ ui/
 │   ├ icons.js            SVG 글리프 35종 + 아이콘 매핑
 │   └ cardview.js         카드 렌더러 (HTML/CSS + SVG)
 └ three/
     └ scene3d.js          절차적 저폴리 캐릭터 · 전투 연출

---

6. 다음 단계 후보

• 카드/몬스터 전용 이미지 아트 도입 (현재는 SVG 문양 + 저폴리 3D)
• 상승(Ascension) 난이도 1~20
• 하트(4막) 및 열쇠 3종
• 카드 사용 애니메이션 강화(궤적, 파티클), 햅틱 피드백
• 통계·업적, 클라우드 저장(Supabase) 연동

---

7. 라이선스 / 고지

Slay the Spire 는 Mega Crit 의 저작물입니다. 이 저장소는 원작의 규칙을 학습·연구 목적으로 재구현한 비영리 팬 프로젝트이며, 원작의 이미지·음원·3D 에셋을 일절 포함하지 않고 모든 그래픽과 사운드를 코드로 생성합니다. 포함된 three.js 는 MIT 라이선스입니다 (vendor/THREE-LICENSE.txt).

---

8. 변경 이력

v1.5.15 — 전투 중 물약을 쓰면 그 전투가 건너뛰어지던 문제

v1.5.14 를 내보낸 직후 제보가 들어왔다. 엘리트 전투 중에 강제 종료했더니 다시 켰을 때 그 엘리트를 지나 다음 방(보물)에 서 있었다. v1.5.8 에서 고쳤다고 한 바로 그 증상이다.

재현해 보니 범인은 물약이었다.

// js/main.js — usePotion() 끝
async function usePotion(idx, target) {
  …
  saveRun(run);   // ← 전투 중인지 따지지 않는다
}

전투 중에 물약을 쓰거나 버리면 여기서 저장이 돈다. 저장 형식에는 전투가 담기지 않으므로 남는 것은 "그 방에 이미 들어갔다" 는 사실뿐이다. 그대로 앱을 닫으면 그 전투가 통째로 없던 일이 되고 다음 방에서 시작한다 — 보상도 없이.

v1.5.8 이 왜 이걸 놓쳤나. 그때는 저장 지점 두 곳(enterRoom·visibilitychange)만 막았다. 그런데 main.js 에는 저장하는 자리가 열아홉 군데 있었고, 새 저장 지점이 생길 때마다 "전투 중인가" 를 다시 따져야 하는 구조였다. 하나는 반드시 빠진다.

그래서 저장을 한 곳으로 모았다.

/** 저장. 전투 중에는 절대 저장하지 않는다 */
function persist(run = G.run) {
  if (G.battle) return;   // 전투가 끝나면 endBattle → showRewards 가 올바른 상태로 저장한다
  if (run) saveRun(run);
}

main.js 의 saveRun( 열아홉 곳을 전부 persist( 로 바꿨다. 이제 전투를 막는 일은 한 줄에서 한 번만 일어난다. visibilitychange 의 !G.battle 조건도 지웠다 — 두 군데에서 같은 것을 따지면 또 갈라진다.

같은 버그가 두 번 났으므로 검사 도구를 만들었다 (tools/check-save.mjs).

  OK  persist() 가 있다
  OK  persist() 가 전투 중 저장을 막는다
  OK  main.js 는 saveRun 을 직접 부르지 않는다 (전부 persist 를 거친다)
  OK  visibilitychange 가 방 안에서는 저장하지 않는다
  OK  enterRoom 이 방에 들어가기 전에 저장한다

가드를 주석 처리하거나 saveRun 을 직접 부르면 바로 FAIL 한다 (둘 다 일부러 망가뜨려 확인했다).

고치기 전/후를 브라우저에서 같은 각본으로 돌린 결과:

[전] 물약 쓴 뒤 : visited 1 → 이어하기 : visited 1  ❌ 엘리트를 지나침
[후] 물약 쓴 뒤 : visited 1 → 이어하기 : visited 0  ✅ 그 방 앞으로 · 쓴 물약도 돌아옴

전투 중에 쓴 물약이 되돌아오는 것은 의도한 동작이다 — 그 전투를 처음부터 다시 치르기 때문이다.

v1.5.14 — 강제 종료해도 상점·보상이 그대로 (되감기 꼼수 차단)

v1.5.8 에서 전투 중 강제 종료를 고쳤는데, 나머지 방은 그대로였다. 점검해 보니 상점·모닥불·? 방·보물 방·보상 화면에서 앱을 닫으면 그 방이 통째로 사라지고 있었다.

어디서 닫았나	전	후
전투 중	그 방 앞 지도 (v1.5.8)	그대로
보상 화면	골드·카드·유물 전부 날아감	그 화면 그대로 복원
상점	상점 통째로 날아감	재고·할인·산 물건까지 그대로
모닥불	휴식도 강화도 못 하고 날아감	그대로 복원
? 이벤트	선택지도 못 보고 날아감	같은 이벤트 그대로
보물	유물 날아감	그대로 복원
보스 유물	후보가 다시 굴려짐	같은 후보 그대로

보상 화면이 가장 나빴다. G.battle = null 이 showRewards() 앞에 있어서, 이기고 나서 보상을 고르는 동안에는 "전투 중이 아니다" 로 판정돼 저장이 돌았다. 전투는 이긴 것으로 끝나 있는데 보상은 하나도 못 받는 상태로 저장된 것이다.

단순히 "방 앞으로 되돌리기" 로 고치면 더 큰 구멍이 난다. 상점에 들어갔다가 마음에 드는 물건이 없으면 앱을 껐다 켜서 재고를 다시 굴리면 되기 때문이다. 그래서 방 상태를 통째로 저장하는 쪽으로 갔다.

// js/engine/run.js — 지금 들어가 있는 방
this.room = null;   // {kind:'shop'|'rewards'|'event'|'eventResult'|'bossRelic'|'rest', …}

// js/main.js
function beginRoom(room) { G.run.room = room; saveRun(G.run); }   // 방에 들어선 순간 확정
function endRoom() { if (G.run) G.run.room = null; }              // goMap() 이 늘 불러 준다
function resumeRun() { G.run.room ? <그 방을 다시 연다> : goMap(); }

규칙은 "run.room 이 있으면 이 화면은 그대로 다시 열 수 있다" 이다. 그래서

• 방에 들어선 순간 한 번 저장한다 → 재고·보상 목록이 그때 확정된다
• 되돌리면 안 되는 일(구매·보상 받기)마다 다시 저장한다 → 산 것은 남는다
• 방 안에서 고르는 중(강화할 카드 고르기 등)에는 저장하지 않는다 → 닫으면 방이 열린 순간으로 돌아가 아무 일도 없던 것이 된다. 이득도 손해도 없다
• 그래서 visibilitychange 는 !G.battle && !G.run.room 일 때만 저장한다

덤으로 잡은 것 — 조우 주머니가 리셋되고 있었다. toJSON 에 세 조우 큐가 빠져 있어서 fromJSON 이 복원한 난수로 다시 섞고 있었다.

// 전 — 불러올 때마다 난수가 세 번 움직인다
r.monsterQueue = r.rng.shuffle(ENCOUNTERS[r.act].weak.slice());

그 바람에 ① 난수 위치가 어긋나 v1.5.8 이 약속한 "같은 전투" 가 지켜지지 않았고 ② 주머니가 가득 다시 채워져 이미 치른 조합이 되살아났다 (실측: 약체 4개 남은 것이 6개로 복구). 큐를 저장에 담아 둘 다 고쳤다. 1.5.13 이전 저장은 큐가 없으므로 예전처럼 새로 섞는다.

받은 보상을 다시 못 받게 하는 것도 css 에서 코드로 옮겼다. .reward-row.taken 의 pointer-events: none 은 손가락만 막을 뿐이라, 받은 표시가 저장에 남게 된 이상 기대면 안 된다. row.disabled = true 를 함께 건다.

실제로 확인한 것 (브라우저):

상점 재고 3번 껐다 켜기 → 세 번 다 같은 재고            ✅ 되감기 막힘
상점에서 카드 구매 후 종료 → 골드·덱·판매 표시 그대로   ✅
전투 중 종료 → 그 방 앞 지도, 다시 들어가니 같은 전투   ✅
보상에서 골드만 받고 종료 → 골드 유지, 남은 보상 그대로 ✅
받은 보상 줄을 억지로 눌러도 두 번 받히지 않음          ✅

v1.5.13 — 2·3막 첫 전투도 몸풀기로 (체력 50% · 피해 50%)

v1.5.12 에서 1막에 깔아 둔 몸풀기 경사로를 2막·3막의 첫 전투에도 넣었다. 보스를 막 넘어와 체력이 가득 찬 채로 새 막에 들어서는 자리라, 그 막의 몬스터가 어떤 것들인지 한 판 보고 가라는 뜻이다.

	1번째 전투	2번째 전투	그 뒤
1막	체력 55% · 피해 50%	체력 75% · 피해 70%	정가
2막	체력 50% · 피해 50%	정가	정가
3막	체력 50% · 피해 50%	정가	정가

1막만 두 계단인 이유는 그곳이 게임을 처음 배우는 자리이기 때문이다. 2·3막에 들어설 무렵이면 조작은 이미 알고 있으니 한 판이면 충분하다.

조건문 대신 표로 바꿨다. v1.5.12 의 NEW_RUN_TUNING 은 1막 전용이라 막이 늘면 if (this.act === …) 가 따라 늘어난다. 막·전투 번호를 모두 받는 표로 접었다.

// js/engine/run.js
export const ACT_RAMP = {
  1: {
    1: { hp: 0.55, dmg: 0.5, label: '아주 약함' },
    2: { hp: 0.75, dmg: 0.7, label: '약함' },
  },
  2: { 1: { hp: 0.5, dmg: 0.5, label: '약함' } },
  3: { 1: { hp: 0.5, dmg: 0.5, label: '약함' } },
};
…
const tuning = (ACT_RAMP[this.act] || {})[this.monsterCount] || null;

표에 없는 전투는 정가다. 경사로를 늘리고 줄이는 일이 줄 하나 더하고 빼는 일이 되었으므로, 앞으로 보정을 손볼 때는 조건문을 새로 만들지 말고 이 표만 고칠 것 (CLAUDE.md 에도 적었다).

세는 기준인 monsterCount 는 막마다 0 에서 다시 시작하고 엘리트·보스는 세지 않는다. 그래서 엘리트나 보스는 어느 막에서도 보정을 받지 않는다.

실제 판으로 확인한 결과:

2막 1번째 [약함] 뱀 식물   체력 39(정가 75~79) · 공격 7 → 3
3막 1번째 [약함] 가시돌이  체력 26(정가 42~56) · 공격 7 → 3
                 반발체    체력 17(정가 29~35) · 공격 11 → 5
2막 2번째 [정가] 새 28/29, 공격 1/12/3 그대로
엘리트 보정 없음 · 보스 보정 없음 · 전투 카운터 0

v1.5.12 — 1막 첫 두 전투를 몸풀기로 (55%/50% · 75%/70%)

CLAUDE.md 에는 처음부터 이렇게 적혀 있었다.

1막 첫 전투 체력 55%/피해 50%, 두 번째 전투 75%/70%

그런데 코드는 첫 전투 하나만, 그것도 75%/70% 로 깎고 있었다. 두 번째 전투는 보정이 아예 없어 바로 정가였다. 의도했던 두 계단짜리 경사로가 한 계단으로 뭉개져 있었던 셈이다.

	전	후
1번째 전투	체력 75% · 피해 70%	체력 55% · 피해 50%
2번째 전투	보정 없음 (정가)	체력 75% · 피해 70%
3번째부터	정가	정가

전투 번호 → 배율을 표로 빼서, 경사로를 늘리거나 줄이는 일이 한 줄로 끝나게 했다.

// js/engine/run.js
export const NEW_RUN_TUNING = {
  1: { hp: 0.55, dmg: 0.5, label: '아주 약함' },
  2: { hp: 0.75, dmg: 0.7, label: '약함' },
};
…
const tuning = this.act === 1 ? NEW_RUN_TUNING[this.monsterCount] || null : null;

tuning 은 몬스터 자료(monsters.js)를 고치는 것이 아니라 그 한 전투에만 걸리는 배율이다. 전투 엔진의 딱 두 군데에서 곱해진다.

// addEnemy — 적을 만들 때 최대 체력에
if (tuning.hp) hp = Math.max(1, Math.round(hp * tuning.hp));

// attackValue — 적이 주는 피해에만 (!src.isPlayer)
if (!src.isPlayer && tuning.dmg) d *= tuning.dmg;

!src.isPlayer 가 핵심이다 — 내가 주는 피해는 그대로라, 체력이 55% 로 깎인 적은 두 배 가까이 빨리 죽는다. 때리는 맛은 살리고 맞는 아픔만 줄이는 쪽이다.

실제 판으로 확인한 결과 (씨앗 11·22·33):

1번째 [아주 약함] 붉은 벌레 체력 6 · 작은 가시 슬라임 7/7, 공격 5 → 2
2번째 [약함]     광신도 체력 37, 공격 6 → 4 · 중간 산성 슬라임 22, 공격 7/10 → 4/7
3번째 [정가]     턱벌레 체력 42, 공격 11 그대로

2·3막, 엘리트, 보스는 보정을 받지 않는다 (엘리트·보스는 monsterCount 도 올리지 않는다).

v1.5.11 — 용어집 '휘발' 삭제 · 소각과 소멸의 차이 설명 보강

백과사전 → 용어 에 휘발이라는 항목이 있었다. 두 가지가 잘못돼 있었다.

1. 원작 Slay the Spire 에 없는 말이다. 원작의 카드 키워드는 Exhaust(소각) · Ethereal(소멸) · Innate(내재) · Retain(보존) · Unplayable(사용 불가) 뿐이다.
2. 이 게임에도 그 말을 쓰는 카드가 한 장도 없었다. keywords.js 한 줄이 전부였고, volatile 플래그도 카드 글의 "휘발" 도 0건이었다.

게다가 설명("뽑은 턴이 끝날 때까지 사용하지 않으면 소각됩니다")이 소멸과 사실상 같은 말이라, 읽는 사람에게 "둘이 뭐가 다르지?" 라는 없어도 될 의문만 만들고 있었다. 지웠다 (용어 42개 → 41개).

대신 소각·소멸의 차이를 설명에 못 박았다. 둘은 같은 층위의 말이 아니다.

	언제	무슨 일
소각	카드를 썼을 때	버린 더미가 아니라 소각 더미로 간다 → 이번 전투에 다시 못 뽑음
소멸	카드를 안 썼을 때	턴 끝에 손에 남아 있으면 → 소각된다

소각은 결과("이 카드는 사라진다")이고 소멸은 조건("안 쓰면 소각시킨다")이라, 소멸의 처리 결과가 소각이다. 코드도 그 모양 그대로다.

// 카드를 다 쓰고 난 뒤 — 행선지를 정하는 곳
if (card.exhaust || corrupted) this.exhaustCard(card);   // 소각
else this.discardPile.push(card);

// 내 턴이 끝날 때
for (const c of [...this.hand]) {
  if (c.ethereal) this.exhaustFromHand(c);               // 소멸 → 소각
}

그래서 소각 카드를 쓰지 않고 턴을 넘기면 여느 카드처럼 버려질 뿐이고, 덱을 다시 섞으면 이번 전투에 또 뽑을 수 있다. 반대로 소멸 카드는 안 쓰면 그 자리에서 소각된다. 다만 소멸 카드가 카드 효과로 버려진 경우에는 소각이 아니라 버린 더미로 간다 — 손에 남아 있을 때만 소각된다. 이 세 가지를 용어집 상세 설명에 적어 두었다.

v1.5.10 — 덧없는 자 밸런스 조정 · 남은 턴 '덧없음' 표시

3막 일반 전투에 나오는 덧없는 자(Transient)가 너무 무거웠다. 원작 수치를 그대로 옮겨 둔 탓인데, 이 게임의 3막 일반 전투로는 맞지 않았다.

	전	후
체력	999	400
첫 공격	30	18
턴마다 증가	+10	+6
4턴 합계	180	108

진짜 문제는 수치가 아니라 안 보이는 것이었다. 덧없는 자는 다섯 턴을 버티면 스스로 사라지는데, 남은 턴이 s.fade 라는 내부 값에만 있었다. 화면에 보이는 것은 999 체력과 턴마다 커지는 공격뿐이라, 이길 수 없는 싸움에 갇힌 것처럼 보였다.

// 전 — 남은 턴이 화면 어디에도 없다
init: (B, s) => { s.fade = 5; s.atk = 30; },
ai: (B, s) => { s.fade--; if (s.fade <= 0) B.fleeEnemy(s); return 'attack'; },

// 후 — 같은 값을 '덧없음' 상태로 내보낸다
init: (B, s) => { s.fade = 5; s.atk = 18; B.setPower(s, 'fading', 5); },
ai: (B, s) => {
  s.fade--;
  B.setPower(s, 'fading', s.fade);
  if (s.fade <= 0) B.fleeEnemy(s);
  return 'attack';
},

s.fade 가 여전히 유일한 기준이고 fading 은 그것을 비추기만 한다 — 두 곳에서 따로 세면 반드시 갈라진다. 전투가 시작되면 이름표 옆에 덧없음 4 가 붙고 적의 턴이 끝날 때마다 줄어든다. 0 이 되면 도망치고 전투가 끝나며, 잡지 못해도 보상은 그대로 받는다.

상태가 118종 → 119종이 되었으므로 js/ui/powerart.js 에 고유한 상태 아이콘 (아래는 남고 위로 갈수록 흩어지는 몸)을, js/data/statehelp.js 에 백과사전 설명을 함께 넣었다. node tools/check-powerart.mjs · check-keywords.mjs 통과.

v1.5.9 — 시작 체력 +10 · 시작 보너스 5개 중 2개 선택

조금 더 캐주얼하게. 두 가지를 바꿨다.

① 시작 최대 체력 +10 (js/data/characters.js)

캐릭터	전	후
아이언클래드	80	90
사일런트	70	80
디펙트	75	85
와쳐	72	82

1막 초반 조정(첫 전투 체력 55%·피해 50%, 두 번째 75%·70%)은 그대로 두었다. 체력만 올렸으므로 중후반 체감이 가장 크게 달라진다.

② 시작 보너스 : 5개 중 2개 (js/data/neow.js · js/main.js)

예전에는 네 가지 중 하나였다. 이제 다섯을 내주고 둘을 고른다.

// neow.js — 혜택 4 + 대가 1
export function rollNeowOptions(rng) {
  const benefits = rng.shuffle(NEOW_BENEFITS.slice()).slice(0, 4);
  const drawback = rng.pick(NEOW_DRAWBACKS);
  return rng.shuffle([...benefits, drawback]);
}

// main.js
const NEOW_PICKS = 2;

대가가 따르는 것(골드 +250 · 저주 1장 같은 것)은 언제나 한 자리뿐이라, 둘 다 대가를 짊어지는 일은 없다. 한 번 고른 것은 목록에서 빠지고 위쪽에 남아 무엇을 집었는지 보이며, 두 번째까지 고르면 결과 두 줄을 한꺼번에 보여 준다. 카드 제거·강화·변환처럼 중간에 카드를 고르는 보너스도 둘 다 정상 동작한다 (아이언클래드·사일런트·디펙트 세 캐릭터로 끝까지 확인).

v1.5.8 — 전투 중 강제 종료 시 그 전투가 건너뛰어지던 문제

전투 도중 앱을 강제로 닫고 다시 열면 그 전투가 통째로 없던 일이 되고 다음 층 지도에서 시작했다. 싸우지도 않았는데 방은 지나간 것으로 처리되고 보상도 사라졌다.

원인 — 두 군데에서 "이미 방에 들어갔다" 는 상태를 저장하고 있었다.

function enterRoom(pos) {
  const node = run.enterNode(pos);   // 층·방문 표시가 여기서 바뀐다
  …startBattle(…)
  saveRun(run);                      // ← 들어간 뒤 상태를 저장
}
addEventListener('visibilitychange', () => {
  if (document.hidden && G.run) saveRun(G.run);   // ← 앱을 내릴 때 또 저장
});

앱을 강제로 닫으면 visibilitychange 가 먼저 뜨면서 전투 중인 상태가 저장된다. 그런데 저장 형식에는 전투가 담기지 않으므로, 남는 것은 "그 방을 지나왔다" 는 사실뿐이었다.

고친 방법 — 저장 시점을 바꿨다.

• enterRoom : 방에 들어가기 전에 저장한다 (들어간 뒤 저장은 없앴다).
• visibilitychange : 전투 중에는 저장하지 않는다 (!G.battle).

그래서 전투 중에 앱이 죽으면 디스크에는 그 방 앞 상태만 남는다. 다시 열면 지도로 돌아오고, 씨앗(rngSeed)도 그 시점 그대로라 같은 전투를 처음부터 치른다.

상점·모닥불처럼 안에서 무언가를 고르는 방은 고를 때마다 saveRun 이 불리므로 그대로다. 보상 화면은 전투가 이미 끝나 G.battle 이 비어 있어 평소처럼 저장된다.

	전	후
전투 중 강제 종료 → 이어하기	다음 층 지도 (전투·보상 사라짐)	그 전투 앞 지도 (다시 싸울 수 있다)
이기고 보상까지 받은 뒤	정상	정상 (골드 99 → 163 · 방문 1 확인)

v1.5.7 — 위쪽 여백 기본값 82px

v1.5.6 으로 보정이 드디어 실제 기기에 닿았고, 그 위에서 관리자 모드 → 화면 여백 조정으로 직접 맞춰 보니 자동 62 + 손 20 = 82px 이 알맞았다. 그래서 그 값을 기본값으로 올렸다.

상단바 82~161 · 물약칸 90~117 · 메뉴 123~155      (아이폰 15 Pro Max 홈 화면 앱)

상태바가 59px 이니 23px 이 숨 쉬는 자리로 남는다.

손조정에는 판 번호가 붙는다. 손조정은 "그때의 자동값에 얼마를 더했나" 이므로, 자동값을 올리면 옛 손조정이 겹쳐 두 배가 된다 (62+20 으로 맞춰 둔 기기가 82+20=102 가 된다). sts.safeAdjustV 가 그것을 막는다 — 자동값을 바꾼 판에서는 옛 손조정을 한 번 지운다. 앞으로 자동값을 또 손보면 VER 을 올릴 것.

v1.5.6 — 여백 계산을 js 모듈로 (캐시에 묶인 index.html 이 v1.5.5 를 막고 있었다)

v1.5.5 를 올렸는데 타이틀 버전만 1.5.5 로 바뀌고 전투 화면은 v1.5.4 와 픽셀까지 같았다.

왜 안 먹었나 — v1.5.5 의 계산을 index.html 의 인라인 스크립트에 두었다. iOS 홈 화면 앱은 시작 문서(index.html)를 캐시에 묶어 두는 일이 있다. js/*.js 는 새로 받아 오므로 js/version.js 의 1.5.5 는 보이는데, 정작 여백을 심는 인라인 스크립트는 옛 문서라 아예 없었다 — 그래서 아무 일도 일어나지 않았다.

고친 방법 — 계산을 js/safearea.js 로 옮기고 js/main.js 가 맨 먼저 부른다. index.html 에도 같은 값을 심는 사본이 남아 있지만 그건 깜빡임을 없애려는 덤이고, 본체는 모듈이다. 캐시에 묶인 문서로 접속하는 상황을 테스트로도 재현해 두었다 (index.html 에서 인라인 스크립트를 지운 채 띄워도 62px 이 적용된다).

• 위쪽 62px — 다이내믹 아일랜드(59px)를 넘어선다.
• 아래쪽은 건드리지 않는다. 지금도 충분하고, 늘리면 손패가 그만큼 좁아진다.
• 관리자 모드 → 화면 여백 조정 : − 10 / − 4 / + 4 / + 10 으로 위쪽 여백을 손수 맞출 수 있다. 이 기기에만 저장된다(localStorage). 자동값이 안 맞는 기기가 또 나오면 그 자리에서 맞추면 된다.

상단바 62~141 · 물약칸 70~97 · 메뉴 103~135      (아이폰 15 Pro Max 홈 화면 앱)

여백 계산을 index.html 에 두지 말 것. 홈 화면 앱에서 그 파일만 옛것으로 남을 수 있다. 고칠 일이 생기면 js/safearea.js 를 고친다.

v1.5.5 — env() 를 버리고 화면 비율로 아이폰 여백을 정한다

v1.5.2 · v1.5.3 · v1.5.4 세 번 고쳤는데 실제 아이폰에서는 화면이 한 픽셀도 움직이지 않았다. v1.5.3 과 v1.5.4 스크린샷을 픽셀로 겹쳐 보니 위쪽 배치가 완전히 같았다.

왜 안 먹었나 — 세 번 다 env(safe-area-inset-*) 을 바탕으로 바닥값을 계산했다. 그런데 그 기기에서 env(safe-area-inset-bottom) 이 0 으로 온다. 그러면 min(0 × 3, 62px) = 0 이라 바닥값이 통째로 사라진다. 계산식이 아무리 정교해도 0 을 곱한 것과 같았다.

고친 방법 — env 를 아예 쓰지 않는다. index.html 의 인라인 스크립트가 화면 비율로 판단한다.

var sw = Math.min(screen.width, screen.height);
var sh = Math.max(screen.width, screen.height);
if (sh / sw >= 2.1) {                       // 노치·다이내믹 아일랜드 아이폰
  d.style.setProperty('--safe-t', 'max(env(safe-area-inset-top, 0px), 62px)');
  d.style.setProperty('--safe-b', 'max(env(safe-area-inset-bottom, 0px), 30px)');
}

기기	세로비	결과
아이폰 X ~ 16 Pro Max (노치·아일랜드)	2.16 ~ 2.17	위 62 · 아래 30
아이폰 SE · 8 (홈 버튼)	1.78	그대로
아이패드	1.33	그대로
사파리(막대 있음) · 안드로이드 · 컴퓨터	—	그대로 (조건 자체가 안 걸린다)

두 가지를 바꾼 것이 핵심이다.

1. env 값에 곱하거나 비례하지 않는다. 0 이 와도 62 는 확보된다 (max).
2. 스타일시트가 아니라 화면 요소에 직접 심는다. 인라인 스타일은 어떤 규칙보다 세고, css/style.css 가 캐시에 묶여 있어도 반드시 적용된다.

재어 보면 (아이폰 15 Pro Max 홈 화면 앱 기준)

상단바 62~141 · 물약칸 70~97 · 메뉴 103~135 · 손패 691~835 · 턴 종료 847~890

물약칸이 상태바(59) 아래로 완전히 빠지고, 아래쪽도 홈 인디케이터를 피한다. 관리자 모드 → 이 기기 정보의 표시 모드에 iOS 앱 · 노치 보정 켜짐, 기기 화면에 430×932 · 세로비 2.17 이 찍히는지로 확인할 수 있다.

v1.5.4 — 아이폰이 알려 주는 안전 여백을 믿지 않는다

전투 화면에서 물약칸이 다이내믹 아일랜드에 가려 눌리지 않았다. 스크린샷(아이폰 15 Pro Max · 1290×2796)을 픽셀로 재어 보니

	실제	아이폰이 알려 준 값
위 (상태바)	59px	약 30px
아래 (홈 인디케이터)	34px	약 22px

black-translucent 로 설치된 홈 화면 앱은 env(safe-area-inset-*) 을 실제보다 작게 준다. v1.5.2 의 아래 × 1.7 바닥값도 22 × 1.7 = 37px 밖에 안 되어 여전히 모자랐다.

고친 방법 — iOS 홈 화면 앱에서만 바닥값을 62px 에서 끊어 잡는다.

html.ios-app {
  --safe-t: max(env(safe-area-inset-top, 0px),
                min(calc(env(safe-area-inset-bottom, 0px) * 3), 62px));
}

기기가 알려 주는 값	결과
30 / 22 (값이 작게 오는 아이폰)	min(66, 62) → 62px
59 / 34 (제대로 오는 기기)	min(102, 62) → 62px
20 / 0 (홈 버튼 아이폰)	20px — 달라지는 것이 없다

html.ios-app 은 index.html 의 인라인 스크립트가 iOS + 홈 화면 앱일 때만 붙인다. 브라우저와 안드로이드는 이 규칙에 걸리지 않는다 (안드로이드는 env 를 제대로 주므로 건드릴 이유가 없다).

재어 보면 전투 화면이 이렇게 내려온다 — 물약칸이 상태바(59px) 아래로 완전히 빠진다.

상단바 62~141 · 물약칸 70~97 · 메뉴 103~135 · 전투 무대 141~

관리자 모드 → 이 기기 정보의 표시 모드에 iOS 앱 보정 이 붙는지로 확인할 수 있다.

v1.5.3 — 메뉴 버튼을 유물 줄로 내리고, 이름을 알기 쉽게

v1.5.2 로 상단 여백은 고쳤지만 여전히 누르기 어려웠다. 맨 윗줄은 화면 꼭대기라 엄지가 닿기도 멀고, 상태바·다이내믹 아일랜드와 붙어 있어 조금만 위로 빗나가면 iOS 가 가져간다.

• 메뉴 버튼을 2행(유물 줄) 오른쪽 끝으로 내렸다. 안전 여백 59px 을 넣고 재면 버튼이 화면 위에서 100~132px — 상태바에서 충분히 떨어진다.
• 그림만 있던 버튼에 "메뉴" 글자를 붙였다 (☰ 메뉴). 62×32px.
• 유물이 많아 줄이 넘쳐도 유물 줄만 옆으로 밀리고 메뉴는 오른쪽에 고정이다 (.relic-row { flex: 1 1 auto; overflow-x: auto } + .menu-btn { flex: 0 0 auto }).
• 유물이 하나도 없어도 이 줄은 보인다 — 예전의 .tb-row2.empty { display: none } 은 없앴다.

메뉴 안 항목도 이름만 보고 알 수 있게 한 줄 설명을 달았다.

항목	설명
내 덱 보기	지금 가지고 있는 카드 전부
내 유물 보기	가진 유물과 그 효과
백과사전	카드 · 유물 · 물약 · 몬스터 · 용어 사전
게임 방법	규칙과 화면 보는 법
설정	소리 · 백과사전 · 런 포기

v1.5.2 — 아이폰에서 상단 메뉴(☰)가 안 눌리던 문제

아이폰 홈 화면 앱에서 오른쪽 위 ☰ 를 눌러도 아무 반응이 없었다. 브라우저(폰·태블릿·컴퓨터)에서는 멀쩡히 열려서 한참 헤맸다.

원인 — 스크린샷을 픽셀로 재어 보니 ☰ 가 화면 위에서 37~65px 자리에 있었다. 다이내믹 아일랜드 기기의 상태바는 59px 이다. 버튼이 상태바 밑에 깔려 있었고, 그 자리의 탭은 iOS 가 가져간다 (상태바 탭 = 맨 위로 스크롤). 그래서 게임까지 오지 않았다.

apple-mobile-web-app-status-bar-style=black-translucent 로 설치된 아이콘에서 env(safe-area-inset-top) 이 실제 상태바보다 작게 오는 것이 화근이었다 (약 30px).

고친 방법 — 홈 화면 앱일 때 위쪽 여백에 바닥값을 둔다.

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root { --safe-t: max(env(safe-area-inset-top, 0px),
                        calc(env(safe-area-inset-bottom, 0px) * 1.7)); }
}

아래 홈 인디케이터가 있는 기기(노치·다이내믹 아일랜드)면 34 × 1.7 ≈ 58px 이 되어 상태바를 넘어선다. 인디케이터가 없는 옛 기기는 아래가 0 이라 이 식도 0 — 아무 영향이 없다. 브라우저에서는 이 미디어 쿼리 자체가 걸리지 않는다.

black-translucent 를 black 으로 바꾸는 길도 있지만 그러지 않았다. 그 값은 홈 화면에 추가할 때 읽혀서 이미 설치한 아이콘은 그대로이고, 새로 설치한 쪽은 iOS 가 비워 주는 자리와 CSS 여백이 겹쳐 위가 두 배로 빈다.

• 메뉴 버튼을 30×28 → 34×32 로 키웠다.
• 관리자 모드 → 이 기기 정보에 표시 모드 · 안전 여백(env → 적용) · 메뉴 버튼 위치를 적어 둔다. 같은 일이 또 생기면 그 화면 숫자만 보면 된다 (js/viewport.js 의 safeInsets() 가 자로 잰다).

v1.5.1 — 백과사전 상세 설명 · 구체 연출 시간차 · 설정의 백과사전

1. 백과사전에 긴 설명을 넣었다

백과사전은 "따로 들어가서 자세히 보는 화면" 이므로 자리를 더 쓰더라도 길게 적는다.

파일	무엇
js/data/statehelp.js	상태 118종 전부의 상세 설명
js/data/cardhelp.js	글만으로는 규칙이 안 보이는 카드 45장의 보충 설명

상세 글에는 수치를 다시 적지 않는다. 바로 위에 powers.js 의 한 줄이, 카드에는 카드 글이 이미 있다. 여기에 또 적으면 수치를 고칠 때 반드시 갈라진다 (몬스터 도감과 같은 원칙). 상세 글에는 언제 붙고 언제 사라지는지 · 정확히 무엇에 적용되는지 · 흔한 오해만 적는다.

용어집에서 이름이 상태와 같은 낱말(조준·중독·완충 …)은 statehelp.js 것을 자동으로 끌어다 쓴다 — 사전에 또 적지 않는다. 이름이 겹치는 것(자세 분노 vs 상태 분노)만 사전에 직접 적어 둔다.

백과사전에서 카드를 누르면 효과 → 자세히 → 용어(+상세) 순으로 펼쳐진다. 전투 중 길게 누르기는 짧게 그대로 둔다 — 거기서는 빨리 보는 것이 목적이다.

2. 구체 동작 사이에 시간차

이중 시전이 번개를 두 번 치는데 거의 동시에 터져 한 번 친 것처럼 보였다. 엔진의 구체 동작을 async 로 바꾸고 동작마다 pace() 로 사이를 띄웠다 (ORB_GAP).

충전 3개 : 0ms → 400ms → 800ms
이중 시전 : 0ms → 500ms        (번개가 두 번 치는 게 보인다)
턴 종료 패시브 : 왼쪽 구체부터 하나씩

• 기다릴 수 없는 곳(피해 처리 도중의 정전기 방전, 전투 시작 유물)은 channelOne() 을 쓴다 — 사이를 띄우지 않는 같은 동작.
• startActorTurn · endActorTurn · afterCardPlayed 가 async 가 되었고, 디펙트 카드의 play 도 await 한다.
• UI 쪽의 임시 시차(index * 0.22초)는 뺐다. 이제 엔진이 사이를 띄우므로 겹으로 밀리면 안 된다.
• node tools/sim-cards.mjs 로 캐릭터 4종 × 전 카드 × 강화 전/후 2904회를 돌려 회귀를 확인했다.

3. 설정에서 백과사전

게임 중 메뉴 ☰ → 설정 안에서도 백과사전으로 바로 들어갈 수 있다.

v1.5.0 — 상태 아이콘 118종 전면 재설계

전투 중 이름표 옆에 붙는 작은 그림("상태 아이콘")을 118종 모두 새로 그렸다.

고치기 전 실태

그림이 아예 없던 상태	50종 — POWER_GLYPH 에 매핑이 없어 전부 같은 별표로 떨어졌다 (조준 · 완충 · 집중 · 주문 · 표식 …)
그림이 있던 상태	68종. 그나마 25가지 문양을 돌려 썼다 — 금속화 · 고통 감지 불가 · 완충 · 허약 · 바리케이드가 전부 같은 방패, 휘감김 · 압박 · 속박이 전부 같은 사슬

새 구조 — js/ui/powerart.js

유물·물약(v1.4.0)과 같은 길을 갔다. 한 아이콘은 [path, 색, 불투명도?] 의 여러 겹이고, '@a' 자리에 상태 색(버프 노랑 / 디버프 보라)이 들어간다. 나머지 색은 뜻을 나른다 — 불 주황 · 피 빨강 · 독 초록 · 번개 노랑 · 얼음 하늘 · 신성 미색.

path 를 손으로 쓰지 않고 도형 헬퍼로 짠다 (circle · ring · bar · star · arcBand · drop · flame · skull · shield · gear · lotus · ekg …). 그래서 118종이 같은 자를 쓰고, 같은 함수를 같은 값으로 부르면 지문이 같아져 검사가 중복을 잡아낼 수 있다.

조준   = 고리 + 십자 눈금 + 가운데 점     (과녁)
중독   = 초록 물방울 + 해골 얼굴
창조적 AI = 전구
각성 전 = Z Z Z
오메가  = Ω

• node tools/check-powerart.mjs — 빠진 것 · 남는 것 · 겹치는 모양 · 성하지 않은 path 를 본다. 색만 다르고 모양이 같으면 중복으로 친다. 겹은 4장까지(12px 에서 그 이상은 뭉갠다).
• POWER_GLYPH 는 없앴다. 이제 powerIcon() 은 POWER_ART 만 본다.
• 백과사전 → 용어 → 상태 아이콘 에서 118종을 그림과 함께 볼 수 있다.

"문양" 이 아니라 "상태 아이콘" 이라고 부른다. 카드 그림은 문양, 유물·물약은 아이콘, 몸에 붙는 것은 상태 아이콘 — 플레이어가 화면에서 보는 말로 통일했다.

v1.4.2 — 조준 등 상태 설명 보강 · 백과사전 상태 도감

카드에는 적에게 조준을 3 부여합니다 라고만 적혀 있고, 조준이 무엇인지는 게임 어디에도 없었다. 전투 중에 이미 걸린 뒤 유닛을 눌러야만 설명이 나왔다.

• 용어 사전(js/data/keywords.js)에 조준 · 완충 · 표식 을 더했다 → 카드를 길게 누르면 뜨는 용어 칸에 바로 나온다.
• 백과사전 용어 탭을 용어 / 상태 두 갈래로 나눴다. 상태 쪽은 전투 중 몸에 붙는 118종 전부를 약화 21 · 강화 97 로 나눠 보여 준다.
• 상태 설명은 js/engine/powers.js 의 것을 그대로 받아 적는다. 따로 적어 두면 수치를 고칠 때 반드시 둘이 갈라진다 (몬스터 도감과 같은 원칙). 수치는 1 을 넣어 보여 주고, 머리글에 그렇게 적어 두었다.
• node tools/check-keywords.mjs — 카드 글에 나오는 상태 이름은 모두 사전에 있어야 한다. 이 검사를 먼저 만들었더니 조준 말고도 완충·표식이 같이 걸렸다. 이름만 같고 그 상태가 아닌 것(카드 종류를 뜻하는 저주, 카드 이름인 오메가, 자세인 분노)은 예외로 적어 둔다.

상태 목록에는 문양을 붙이지 않았다. 118종 가운데 50종에 아직 고유 문양이 없어 별표만 줄줄이 늘어선다 (전투 중 상태 칩도 같은 상태다 — 따로 할 일).

v1.4.1 — 큰 화면에서도 폰 비율 유지 (태블릿·컴퓨터 레터박스)

이 게임은 스마트폰 세로 화면을 겨냥해 만들었다. 태블릿이나 컴퓨터에서 열면 가로가 넓어져 레이아웃이 늘어나 버리므로, 폰에 가까운 비율의 상자 안에만 그리고 양옆을 비운다.

--app-w: min(100vw, calc(100vh * 0.62), 560px);
--app-h: min(100vh, calc(var(--app-w) / 0.40));

허용 비율	뜻
0.62 보다 넓으면	양옆을 비운다 (16:9 폰 = 0.5625 → 꽉 참)
0.40 보다 길쭉하면	위아래를 비운다 (21:9 폰 = 0.429 → 꽉 참)
560px 상한	큰 화면에서 폰보다 지나치게 커지지 않게

폰에서는 아무것도 달라지지 않는다. 어떤 폰이든 100vw 가 가장 작아서 상자가 화면을 꽉 채운다. 여백은 아이패드 세로(0.75)부터 생긴다.

크기 계산을 js 로 하지 않는다. js 로 재서 CSS 변수에 심으면 첫 프레임에 전체 너비로 한 번 깜빡인다. min() 이면 CSS 만으로 같은 값이 나온다. js/viewport.js 는 창 좌표가 필요한 몇 곳(툴팁 가두기·관리자 정보)에 쓸 자만 내준다.

vw/vh 를 전부 갈아 끼웠다 (10곳). 상자가 좁아져도 vw 는 바깥 창 기준이라 따라 줄지 않는다. 데스크톱에서 calc(3.25vw - 0.9px) 는 62px 이 되어 백과사전 카드가 터진다. 상자의 1%를 가리키는 --vw / --vh 를 만들어 바꿨다.

--vw: calc(var(--app-w) / 100);
--desc-fs: calc(var(--vw) * 3.25 - 0.9px);   /* 예전 : calc(3.25vw - 0.9px) */

커스텀 속성은 calc() 토큰 그대로 남으므로 getPropertyValue('--vw') 로는 px 를 못 읽는다(NaN). 실제로 적용됐는지는 그걸 쓰는 요소의 계산된 크기로 확인해야 한다 — 회귀 테스트도 그렇게 짰다.

js 쪽 세 곳도 창이 아니라 상자를 보게 고쳤다 — 툴팁 가두기(showTooltip), 손패 폭 기본값, 관리자 정보의 화면 줄(창 크기와 화면 틀을 따로 보여 준다).

여백 표시는 @media (min-aspect-ratio: 62/100), (min-width: 561px), (max-aspect-ratio: 40/100) 로 낸다 — 위 min() 이 무엇에 걸리느냐와 조건이 정확히 같다. 폰에서는 테두리 1px 도 그리지 않는다.

v1.4.0 — 유물 117 · 물약 30 아이콘 전면 재설계 (147개 전부 고유)

지금까지는 형태 25가지를 돌려 쓰고 색만 달랐다. ring 하나에 유물 14개(닻·염주 팔찌·흑요석 목걸이…), heart 하나에 7개(딸기·베개·생강…)가 매달려 있었고, 8개는 매핑이 없어 기본값 gem 으로 떨어져 있었다. 익숙해지면 이름보다 모양을 먼저 보는데, 겹치면 문양을 두는 의미가 없다 — 카드가 v1.3.9 에서 이미 지킨 기준을 유물·물약만 못 따라가고 있었다.

147개를 하나씩 새로 만들었다. 굽는 비용은 그대로다(아이템 개수가 정하지 형태의 다양성이 정하지 않는다) — 실측 147개 679ms · 0.70MB.

부품 목록을 데이터로 적는다 (js/three/parts3d.js)

anchor: () => [
  P.torus(0.19, 0.06, C.iron, { y: 0.74, ...MET }),          // 고리
  P.cyl(0.08, 0.08, 1.3, C.iron, { y: -0.06, ...MET }),      // 기둥
  P.box(0.96, 0.13, 0.13, C.iron, { y: 0.4, ...MET }),       // 가로대
  ...[-1, 1].map((s) => P.cone(0.18, 0.4, C.iron, { x: s * 0.52, y: -0.5, rz: s * 34 * R, ...MET })),
],

• 한 줄이 곧 "고리", "가로대" 처럼 읽힌다
• 겹침을 기계가 검사할 수 있다 — 배열을 그대로 견주면 된다
• 카드 문양(js/ui/cardart.js)이 [path, 색] 배열인 것과 같은 결이다

parts3d.js 는 three.js 를 부르지 않는다. 순수 데이터라야 tools/check-icons.mjs 가 브라우저 없이 Node 에서 돌아간다. 실제 메시로 바꾸는 일(buildParts)은 items3d.js 가 맡는다.

색도 뜻에 맞췄다. 예전에는 id 해시로 색상환에 흩뿌렸다. 이제는 얼어붙은 알 = 얼음색 · 녹아내린 알 = 용암색 · 유독성 알 = 독색 처럼 이름이 색으로도 읽힌다. 색은 C 사전에 이름으로 둔다(C.blood · C.frost · C.toxic …, 56종).

물약 30개는 형태만으로는 금방 섞여서 세 가지를 겹쳐 갈랐다 — 병 실루엣(둥근 플라스크·각진 병·호리병·시험관·주머니) × 안에 든 것(불꽃·번개·톱니·가시·날개) × 마개(코르크·금속·왕관).

tools/check-icons.mjs 를 반드시 돌릴 것. 빠진 것·겹치는 것·부품 값이 이상한 것을 잡는다. 유물과 물약 사이의 겹침까지 본다. 부품이 3개 미만이면 실루엣이 밋밋해서 그것도 걸린다.

두 번 다시 본 것 — 처음 구워 놓고 보니 20개가 이름과 연결되지 않았다(닻은 흐릿하고, 부적은 T자, 펜촉은 느낌표, 금도금 케이블은 사다리로 보였다). 두 차례 더 손봤다.

• P.disc(r, 두께, 색, 옵션) 에서 두께를 빠뜨려 색 문자열이 치수 자리로 들어갔다. 검사 도구가 터지길래 잡았고, 값이 이상하면 터지지 않고 알려 주도록 함께 고쳤다
• Z축 회전은 +Y 를 (-sinθ, cosθ) 로 보낸다. 텅스텐 막대의 끝 캡을 (+sinθ, cosθ) 에 두어 막대에서 떨어져 나가 있었다

v1.3.19 — 앱 아이콘 교체

홈 화면 아이콘과 파비콘을 새 일러스트로 바꿨다. 래스터라서 SVG 하나로는 안 되고 쓰임새별로 나눠 넣었다 (icon-192.png · icon-512.png · apple-touch-icon.png 180x180 불투명 풀블리드 · icon-maskable-512.png).

안드로이드 마스크용을 따로 둔 이유 — 새 그림은 모서리가 투명한 데다 제목 글자가 가장자리까지 차서, 그대로 두면 마스크에 잘린다. 그림을 안전 영역(80%) 안으로 줄이고 배경을 #0b0910 으로 채운 판을 따로 만들었다.

이 작업은 다른 세션에서 main 에 먼저 올라갔고 js/version.js 는 올리지 않았다. v1.4.0 에서 번호와 이력을 맞춰 두었다.

v1.3.18 — 엔딩을 한 두루마리로 이어 천천히 흐르게

v1.3.15 는 1장 → 2장 → 3장을 display:none 으로 갈아 끼웠다. 장면이 툭툭 바뀌어 읽을 새가 없었다. 세 장을 한 두루마리로 이어 두고 화면이 그 위를 천천히 내려가는 방식으로 바꿨다.

• 먼저 3초 머물며 1장의 문구가 한 줄씩 떠오르는 것을 보여 준다
• 그 뒤 맨 아래까지 약 14초에 걸쳐 내려간다. 속도는 clamp(스크롤 거리 / 14초, 80, 300) 이라 덱이 길든 짧든 걸리는 시간이 비슷하다
• 오른 길의 칸은 화면이 지나갈 때 켜진다 (scrollTop + 화면높이 × 0.72 선을 넘으면). 스크롤과 점등이 따로 놀지 않는다
• 보스 칸에서는 0.9초 멈추고 이름을 띄운다. .ed-now 를 position: sticky 로 두어 오른 길을 지나는 동안 계속 따라온다
• 3D 무대는 스크롤 위치에 비례해 어두워진다 (--dim, 1장이 화면을 빠져나가는 동안에 걸쳐서)
• 손을 대면(wheel·touchstart·pointerdown·keydown) 자동 스크롤을 놓아 준다. 칸 켜기와 장막은 계속 따라가므로 위로 올려 다시 봐도, 손으로 내려도 화면이 어긋나지 않는다
• prefers-reduced-motion 이면 자동으로 내려가지 않고 처음부터 손에 맡긴다

프레임마다 조금씩 더하면 안 된다. 처음에 scrollTop += 속도 × dt 로 짰더니 소프트웨어 렌더러에서 93px/s 로 맞춘 것이 48px/s 로 나왔다 — dt 를 50ms 로 자르고 있는데 실제 프레임 간격이 그보다 길었던 것이다. 느린 기기에서 그만큼 느려진다. 시작 시각을 기준으로 "지금 어디쯤이어야 하는지" 를 계산하도록 고쳤다 (보스에서 쉰 시간은 따로 더해 뺀다).

장마다 padding-bottom 으로 숨 쉴 자리를 준다 (1장 18vh · 2장 12vh). 붙여 두면 천천히 내려가도 1장을 읽는 동안 2장이 이미 화면에 들어와 있어 장면이 겹쳐 보인다.

v1.3.17 — 시작 보너스 화면의 숨은 버튼 제거

v1.3.16 에서 관리자 모드에 "자원 2배로 시작" 이 생겨 같은 일을 더 분명하게 할 수 있게 됐다. 시작 보너스 화면 네 번째 선택지 아래 있던 아무 표시 없는 다섯 번째 자리(.choice-secret, 높이 54px)를 걷어냈다.

• 모르고 눌러 판을 버리는 사고가 없어진다 — 보이지 않는 54px 짜리 버튼이 선택지 바로 아래 있었다
• NEOW_SECRET 자체는 그대로 둔다. 관리자 모드가 쓴다 (adminStartRun)
• .choice-secret CSS 도 함께 지웠다. run.cheat 규칙(전적에 남기지 않음)은 변함없다

v1.3.16 — 관리자 모드

설정 화면 맨 아래 작은 "관리자 모드" 링크 → 숫자 4자리를 넣으면 열린다. 한 번 풀면 그 실행 동안 다시 묻지 않는다.

기능	하는 일
자원 2배로 시작	숨겨진 시작 보너스(NEOW_SECRET)를 그대로 얹는다
1층부터 시작	캐릭터만 고르고 바로
층을 골라 시작	1~50 중 하나. 1막 보스·3막·최종 보스 같은 빠른 선택 버튼 6개
엔딩 화면 보기	캐릭터를 고르면 엔딩이 바로 열린다 (엔딩은 캐릭터별 1종, 모두 4종)
이 기기 정보	버전 · 계정 · uid · 전적 수 · 이어하기 유무 · 저장소 사용량 · 자료 개수 · 화면 크기

여기서 시작한 판은 전부 run.cheat 를 켠다. 테스트로 만든 판이 전적에 섞이면 통계가 망가진다 (v1.3.1 에서 정한 규칙). 화면 맨 위에도 그렇게 적어 둔다.

엔딩 보기는 실제로 오른 판이 아니라서 journal 이 없다 → 그럴듯한 여정을 만들어 채운다. 막마다 전투가 많고 모닥불·상점·보물이 섞이며 17·34·50층은 보스(그 막의 보스 목록에서 무작위). 덱도 그 캐릭터 카드 12장을 더하고 유물 5개를 얹는다 — 시작 덱만 있으면 기록 장이 허전하다.

이 숫자는 자물쇠가 아니라 문고리다. 브라우저에서 돌아가는 코드라 소스를 열면 그대로 보인다. 남이 봐서 곤란한 것(다른 사람의 전적 따위)은 절대 여기에 두지 말 것 — 그건 firestore.rules 로 막아야 한다.

pinBox() 는 자릿수를 받도록 고쳤다 (pinBox(4)). CSS 는 --pin-n 변수로 칸 수를 받는다.

v1.3.15 — 엔딩 화면 (정복의 순간 → 오른 길 → 기록)

지금까지 최종 보스를 잡으면 모달 하나에 통계 다섯 줄이 전부였다. 모달이라는 게 문제의 절반이다 — 모달은 "닫아야 할 것" 으로 읽혀서 오래 볼 마음이 생기지 않는다. 전용 화면(scr-ending)으로 옮기고 세 장(章)이 차례로 쌓이게 했다. 12_victory.mp3 가 약 3분이라 연출 시간은 넉넉하다.

1장 · 정복의 순간 — js/three/ending3d.js 가 빛기둥·먼지·낮은 단을 세우고 그 위에 내 캐릭터를 올려 천천히 돌린다. 캐릭터별 엔딩 문구(js/data/ending.js)가 1.1초 간격으로 한 줄씩 나타난다.

원작(Mega Crit)의 엔딩 텍스트는 가져오지 않았다. 네 캐릭터 문구 모두 이 프로젝트에서 새로 썼다.

2장 · 오른 길 — 1층부터 50층까지 한 칸씩 켜진다. 보스 세 곳(17·34·50층)에서는 1초 멈추고 그 보스 이름을 띄운다. 지켜보게 만드는 장치가 이것이다.

이걸 하려면 층별 기록이 필요한데 없었다. run.stats 는 합계만 세고 run.map 은 지금 막의 지도만 가진다(막마다 새로 만들어서 1·2막 지도는 이미 사라진다). Run.journal 을 새로 만들어 enterNode() 에서 한 줄씩 쌓고 toJSON/fromJSON 에 넣었다. 보스 칸에는 어느 보스였는지도 함께 적는다. 1.3.14 이전 저장에는 journal 이 없다 → 없으면 2장을 건너뛰고 1·3장만 보여 준다.

3장 · 기록 — 걸린 시간 · 남은 체력 · 처치 · 엘리트 · 보스 · 골드 타일과, 모은 유물 전부, 최종 덱 전부(카드를 누르면 상세 설명).

건너뛰기는 언제나 있고(두 번째 클리어부터는 지루하면 안 된다) 마지막 장에서는 사라진다. 화면을 탭하면 지금 장을 끝내고 다음으로 넘어간다.

만들며 밟은 함정 둘

• #scr-ending { position: relative } 로 덮었더니 화면 높이가 0 이 됐다. .screen 이 이미 position: absolute; inset: 0 이라 relative 로 바꾸면 inset 이 풀린다. 안의 절대 배치 요소가 통째로 사라지고 건너뛰기 버튼이 눌리지 않았다
• 켜진 칸을 따라가느라 scrollIntoView() 를 썼더니 바깥쪽 스크롤 상자까지 전부 굴려 화면이 통째로 밀렸다. 엔딩 무대(#ending-stage)만 굴리도록 getBoundingClientRect 차이로 직접 계산한다
• 2장부터는 .ed-veil::after 로 3D 무대를 뒤로 물린다. 장막은 화면에 고정이고 글은 스크롤되므로, 안 물리면 글이 인물 위에 그대로 얹힌다

v1.3.14 — 백과사전 몬스터 탭 (57종 · 행동 168개)

행동 설명을 손으로 쓰지 않았다. 몬스터의 run 을 기록용 가짜 전투판에 한 번 돌려 보고, 무슨 일이 일어나는지 받아 적어 문장으로 만든다 (js/data/monsterdex.js).

• 설명의 출처가 실제로 돌아가는 그 코드라서, 밸런스 수치를 고쳤을 때 설명이 어긋날 수가 없다. 데이터에 eff 같은 사본을 두면 언젠가 반드시 둘이 갈라진다
• run 은 B(전투)와 s(자기 자신)만 만지고 바깥 상태를 건드리지 않아 이렇게 돌려 봐도 안전하다. 가짜 판은 enemyAttack · addPower · addCardToDiscard 등 19개 메서드를 받아 적는다
• 주사위를 낮게·높게 두 번 돌린다. 값이 갈리면 5~7 피해 처럼 폭으로 보여 준다 (벌레의 물기)
• B.player.hp 를 NaN 으로 두어 체력에 비례하는 피해(육각유령의 분할)를 가려낸다 → "내 체력에 비례한 피해 ×6"
• B.living().find((e) => e.mid === 'mystic') 처럼 동료를 찾는 코드는, 찾는 이름을 소스에서 읽어 맞춰 준다
• 쓸수록 세지는 행동은 s.x += n · s.x++ · s.x = (s.x || 30) + 5 자국으로 가려내 배지를 붙인다 (수호자의 쌍둥이 강타, 찌르기의 책, 작업반장, 덧없는 자, 거대한 머리)
• 켜고 끄는 상태(혼란·휘감김)는 isSingleton() 으로 판단해 숫자를 빼고 적는다

tools/check-monsterdex.mjs 를 반드시 돌릴 것. 가짜 판이 모르는 메서드를 부르는 행동이 새로 들어오면 여기서 걸린다. 행동 168개가 전부 설명으로 바뀌는지, 빈 설명이 생기지 않았는지, 어느 분류에도 안 들어간 몬스터가 없는지 확인한다.

화면 — 막별(1막 25종 / 2막 18종 / 3막 16종) + 소환·분열 3종으로 나눈다. 지도에서 직접 만나지 않는 청동 구체 · 횃불 머리 · 단검이 소환·분열 쪽이다. 등장 위치("1막 약체·강체")는 ENCOUNTERS 에서 자동으로 뽑는다. 엘리트·보스는 테두리 색으로 구분한다.

초상 — monsterPortrait3D() 가 buildEnemy(shape) 를 v1.3.13 의 bakeSized 로 굽는다.

• bakeSized(group, w, null) 은 모델 생김새에 맞춰 틀의 세로를 정한다. 납작한 슬라임을 세로로 긴 틀에 담으면 위아래가 빈 채로 굽혀 카드에 헛공간이 생긴다
• 한 막에 25종이라 한꺼번에 구우면 화면이 멈칫한다 → IntersectionObserver 로 보이는 것만 굽는다 (탭 여는 데 1초, 처음에 8종만)

v1.3.13 — 백과사전 캐릭터 초상 확대 + 설정 아이콘 교체

캐릭터 초상이 작았던 진짜 이유는 크기가 아니라 비율이었다. bake() 는 정사각형(96×96) 에 바운딩 구(sphere) 를 맞춰 담는다. 캐릭터는 세로로 긴 모양이라 정사각형에 담으면 좌우가 통째로 비고, 그만큼 캐릭터가 작게 그려진다. 그래서 세로로 긴 틀에 다시 굽는 bakeSized(group, w, h) 를 만들었다.

• 바운딩 박스의 가로·세로를 각각 화각에 맞춰 보고 더 빡빡한 쪽을 쓴다. 깊이의 절반을 거리에 더해 앞으로 튀어나온 부분이 잘리지 않게 했다
• characterPortrait3D() 는 264×396 (2:3) 으로 굽는다. 목록용 characterIcon3D() (96² ) 는 그대로 두었다 — 크게 보여 주는 자리만 해상도를 올린다. 4장뿐이고 한 번 구우면 캐시된다
• 다 굽고 나면 카메라 비율과 렌더러 크기를 정사각형으로 되돌린다 (유물·물약 쪽이 같은 렌더러를 쓴다)
• CSS : .cx-portrait 를 align-items: stretch 로 카드 높이만큼 늘이고 폭 78 → 110px
• 결과 : 그려지는 캐릭터가 약 60×73 → 98×147 (키 2배)

숨쉬기 연출 — @keyframes cx-breathe 로 4.4초에 걸쳐 scale(1) ↔ scale(1.09). 캐릭터마다 animation-delay 를 0.9초씩 밀어 네 장이 한꺼번에 뛰지 않게 했다. prefers-reduced-motion 에서는 멈춘다.

.cx-portrait 의 안쪽 여백(padding: 5px 6px)은 가장 커졌을 때 틀을 넘지 않게 잡은 값이다. object-fit: contain 은 <img> 박스 크기는 그대로 두고 그 안에 여백을 두어 그린다 — 그래서 getBoundingClientRect() 로는 잘림을 판정할 수 없고, 원본 비율로 그려진 그림을 계산해야 한다.

설정 아이콘 — 기존 gear 글리프는 톱니가 아니라 꼭짓점 10개짜리 별 모양 덩어리였다. 톱니 8개 + 가운데 구멍을 가진 cog 글리프를 새로 만들어 타이틀 우상단 버튼에 물렸다 (22 → 24px).

• 구멍은 바깥 윤곽과 반대 방향(sweep 0) 으로 그려야 한다. svgIcon() 이 fill-rule 을 지정하지 않아 기본값 nonzero 로 칠해지기 때문이다
• 예전 gear 는 남겨 두었다 — 지금은 오토마톤의 modeShift 의도 아이콘 하나만 쓴다 (유물의 톱니는 SVG 가 아니라 items3d.js 의 3D gear(c) 형태라 무관)

v1.3.12 — 가입할 때 이름 직접 정하기

지금까지는 이메일 앞부분([email protected] → mmk75)을 그대로 이름으로 썼다. 주소를 그대로 보여 주면 게임 화면에 어울리지 않고, 이메일 전체를 쓰자니 타이틀 칩(.pc-name, 최대 150px)을 넘긴다. 가입할 때 직접 정하게 했다.

• 가입 폼(authForm)에 이름칸 한 줄 추가 — 이메일 → 이름 → PIN 순서, maxlength 12, 비워 두면 예전처럼 이메일 앞부분
• 계정 화면에 "이름 바꾸기" (promptRename) — 언제든 고칠 수 있다
• 저장 위치는 Firebase 계정의 displayName (accounts:update, REST). 기기 안이 아니라 계정에 붙어 있어 기기를 바꿔 다시 로그인해도 같은 이름이 나온다
  • 가입은 계정이 생긴 뒤에야 이름을 붙일 수 있어 signUp → setDisplayName 두 번 호출이다. 이름 붙이기가 실패해도 가입 자체는 성립시킨다 (이메일 앞부분으로 떨어질 뿐)
  • 이름을 비워 두면 accounts:update 를 아예 부르지 않는다
• cleanName() 으로 앞뒤 공백·연속 공백을 정리하고 12자로 자른다. Firestore 문서에도 name 필드를 같이 올린다
• 1.3.11 이전에 가입한 계정은 displayName 이 비어 있으므로 그대로 이메일 앞부분으로 떨어진다 — 마이그레이션 없음

버그 수정 — PIN 을 잊었어요 버튼이 메일을 보낸 뒤 다시 눌리지 않았다. e.currentTarget 은 이벤트 처리가 끝나면 null 이 되는데, await 뒤에서 다시 읽고 있었다(disabled = false 가 예외로 죽어 버튼이 잠긴 채 남았다). 버튼을 먼저 지역 변수에 붙잡아 두도록 고쳤다.

v1.3.11 — PIN 네모 6칸 + 입력칸 스타일 복구

버그 — .name-input CSS 규칙이 v1.3.5 에서 계정 화면 CSS 를 통째로 갈아 끼울 때 함께 사라져 있었다. 이메일 입력칸이 브라우저 기본 모양(높이 21px · 글자 13.3px)으로 나오고 있었다. 규칙을 되살리며 크기도 키웠다 (52.8px · 16px).

font-size 를 16px 아래로 내리면 iOS 사파리가 입력칸을 누를 때 화면을 확대한다. 16px 은 그걸 막는 값이라 더 줄이지 말 것.

PIN 입력 (pinBox()) — 폰 잠금화면처럼 네모 6칸.

• 칸마다 <input> 을 두지 않았다. 그러면 지우기·붙여넣기·자동완성이 전부 깨진다. 대신 투명한 <input> 하나가 위를 덮어 입력을 받고, 네모는 값에 따라 그려 주기만 한다
• 채워진 칸은 금색 점, 다음 들어갈 칸은 테두리 강조
• type="tel" + inputmode="numeric" — 폰에서 숫자판이 확실히 뜬다. 가림(●)은 네모 쪽에서 하므로 type="password" 가 필요 없다

측정 : 이메일칸 21px → 52.8px, PIN 네모 54.5×54.5 정사각 6칸. 지우기·6자리 초과 입력 차단·숫자만 입력 모두 확인.

v1.3.10 — 이메일 + 6자리 PIN 로그인 (구글 로그인 철회)

구글 계정이 없는 사람이 많다는 점, 그리고 실기기 테스트에서 로그인이 실패한 점 때문에 재검토.

실패 원인은 구글이 아니었다 — cnation-project.firebaseapp.com 이 낸 "The requested action is invalid." 와 REST 로 확인한 CONFIGURATION_NOT_FOUND 는 콘솔에서 Authentication 을 한 번도 켜지 않아서였다. 어떤 방식이든 똑같이 실패했을 상태.

다만 그 화면이 떴다는 건 iOS 사파리 팝업이 정상적으로 열려 firebaseapp.com 까지 갔다는 뜻이다. v1.3.5 에서 "실기기 확인이 필요하다" 고 남겼던 유일한 미검증 구간은 실제로 통과했다.

그래도 바꾼 이유 — 구글 계정 없는 사용자, 그리고 아래의 실질적 이득.

이메일 + 6자리 PIN (accounts:signUp / signInWithPassword / sendOobCode)

• Firebase SDK 112KB 를 통째로 제거 (vendor/firebase-auth.js, tools/build-firebase.sh, 라이선스 고지). 팝업이 필요 없어 REST 로 끝난다 — 로그인한 사람도 추가 다운로드 0
• iOS 사파리의 팝업·ITP 위험이 구조적으로 사라졌다
• PIN 분실 시 재설정 메일로 복구 가능

PIN 이 6자리인 이유 — Firebase 의 비밀번호 최소 길이가 6자다. 4자리를 쓰려면 뒤에 무언가 덧붙여야 하는데, 그러면 Firebase 재설정 페이지에서 사용자가 정한 새 비밀번호와 규칙이 어긋나 PIN 찾기가 깨진다. 6자리면 그대로 쓸 수 있고, 경우의 수도 1만 → 100만으로 늘어난다.

입력 — PIN 칸은 inputmode="numeric" + 숫자만 필터링(글자를 쳐도 숫자만 남는다) + 자간을 벌려 자릿수를 세기 쉽게 했다.

검증 (신원을 모델링한 Auth REST 스텁, 13항목 전부 통과) 가입 · 4자리 거절 · 숫자만 입력 · 전적 업로드 · 저장소를 통째로 비운 새 기기에서 같은 이메일+PIN 으로 전적 복구 · 틀린 PIN · 재설정 메일 · 중복 가입 거절 · 통신 불가 시 게스트 진행 · SDK 요청 0회

콘솔 준비물 — Authentication → Sign-in method → 이메일/비밀번호 사용 설정 (구글은 켤 필요 없음) + Firestore 규칙(firestore.rules)

v1.3.9 — 카드 문양 전면 재작업

게임에 익숙해지면 글자보다 문양을 먼저 보게 되는데, 문양이 겹쳐 있으면 문양을 보고 이름을 또 확인해야 해서 문양을 두는 의미가 없었다.

고치기 전 실태 (tools/check-art.mjs 로 측정)

계열	장수	서로 다른 문양	겹치는 카드
아이언클래드	75	24종	68장
사일런트	77	24종	68장
디펙트	76	18종	73장 (lightning 한 문양에 13장)
와쳐	83	20종	77장 (shield 한 문양에 11장)
무색	33	18종	24장
저주	14	—	문양 없음

한 일

• js/ui/cardart.js 신설 — 색을 쓰는 여러 겹 문양 224종. 한 겹은 [path, 색, 불투명도?]
• '@a' 를 쓰면 그 카드 종류(공격·스킬·파워)의 색이 들어가, 종류별 배경색과 따로 놀지 않는다
• 성격에 맞는 색 — 불은 주황(fire), 얼음은 하늘색(ice), 독은 초록(poison), 저주는 보랏빛 그림자(shadow)
• 363장 전부 다시 매핑. 같은 계열 안에서 중복 0, 문양 없는 카드 0
• 렌더러(cardArtSVG)가 여러 겹·색을 그리도록 확장. 유물·상태이상용 단색 GLYPH 는 그대로 쓴다
• tools/check-art.mjs — 중복·누락·없는 문양 참조를 검사한다. 앞으로 카드를 추가하면 이걸로 확인할 것

문양이 설 자리

• 백과사전 카드의 그림 칸 27% → 42%, 비율 74:156 — 보이는 그림 칸이 21px → 59px 로 2.5배
• 카드를 그만큼 늘려 글자 잘림은 세 화면 모두 여전히 0
• 이름표가 그림 칸 아래를 덮으므로 preserveAspectRatio 를 xMidYMin 으로 바꿔 윗부분이 항상 보이게 했다
• 문양 크기는 그림 칸이 가장 좁은 전투 손패 기준으로 맞췄다 (백과사전·손패 모두 안 잘림을 측정으로 확인)
• 유물·물약 아이콘 한 번 더 확대 : 그림 42px → 50px (액자 69px 은 그대로 — 여백이 충분했다)

v1.3.8 — 백과사전 더 크게

v1.3.7 에서 세로만 길어져 비율이 어색해졌다는 지적. 폭을 넓히고 글자를 더 키웠다.

• 격자 간격 10px → 5px, #codex-body 좌우 여백 14px → 7px — 줄인 만큼 카드 폭으로
• 비율 74:124 → 74:132, 그림 영역 30% → 27%
• 설명 글자 clamp(8.4px, 2.5vw, 11.5px) → calc(3.25vw - 0.9px) (카드 폭의 약 13%), 이름 calc(3.7vw - 1px)
• 카드 안쪽 여백을 % 로 바꿨다 — px 로 두면 좁은 화면에서 글상자를 상대적으로 더 많이 먹어, 같은 비율인데도 좁은 폰에서만 설명이 잘렸다 (v1.3.7 의 360px 에서 8장 잘림의 원인)
• 유물·물약 아이콘 가로세로 1.5배 — 칸 46px → 69px, 그림 28px → 42px (백과사전에서만. 보상·상점·물약 상세는 그대로)

측정 (아이언클래드 75장)

화면	v1.3.7	v1.3.8	설명 잘린 카드
360px	76×127 · 9.0px	83×148 · 10.8px	8 → 0
390px	83×139 · 9.8px	90×161 · 11.8px	0 → 0
430px	93×156 · 10.8px	100×179 · 13.1px	0 → 0

비율은 세 화면 모두 1:1.78~1.79 로 일정하다. 안쪽 여백을 % 로 바꾼 덕에 화면 폭이 달라도 같은 모양이 나온다.

v1.3.7 — 백과사전 카드 크게 (한 줄 4장)

백과사전은 카드를 읽는 화면이므로 한 줄에 4장만 두고 키웠다.

• .card-grid.cx-cards — 백과사전 전용 클래스. grid-template-columns: repeat(4, 1fr) 로 화면 폭과 무관하게 항상 4열
• 카드 비율을 전투용 74:106 대신 74:124 로 세로를 늘려 설명 칸을 넓혔다 (어차피 스크롤하는 화면)
• 그림 영역 40% → 30%, 설명 글자 7.6px → clamp(8.4px, 2.5vw, 11.5px), 이름 10px → clamp(11px, 3.15vw, 14px)
• 이름표를 끌어올리는 --nb-lift 는 margin 의 % 가 너비 기준이므로 높이 13% 를 너비 21.8% 로 환산해 반응형으로 바꿨다

측정 (아이언클래드 75장 기준)

화면	이전	이후	설명 잘린 카드
360px	4열 · 74×106 · 7.6px	4열 · 76×127 · 9.0px	15 → 8
390px	4열 · 74×106 · 7.6px	4열 · 83×139 · 9.75px	15 → 0
430px	5열 · 74×106 · 7.6px	4열 · 93×156 · 10.75px	15 → 0

글자를 키우면 잘림이 늘 것 같지만, 카드를 세로로 늘리고 그림을 줄여 글상자를 키웠기 때문에 모든 폭에서 오히려 줄었다.

.card-grid 는 덱 보기·보상·더미 보기에서도 쓰이므로 건드리지 않았다 — 그쪽 카드는 74×106 · 7.6px 그대로.

v1.3.6 — 타이틀 먼저 열기

v1.3.5 는 첫 실행에 게스트/로그인 선택 모달이 타이틀을 가로막았다. 계정은 타이틀에서 고르는 것으로 바꿨다.

• 부팅 시 askMode() 자동 호출 제거 — Account.init() 은 화면을 막지 않고 표시만 갱신한다
• 모드가 none 인 채로 새 게임 / 이어하기를 눌러도 바로 시작한다 (조용히 게스트로 확정)
• 계정 칩(#btn-profile)을 누르면 언제나 계정 화면 — 거기에 게스트 카드와 구글로 로그인 버튼이 있다
• 로그인하지 않았을 때만 칩 아래 #login-hint 한 줄이 보인다 (눌러도 계정 화면으로)
• 쓰이지 않게 된 askMode() 모달 제거

v1.3.5 — 게스트 / 구글 로그인

v1.3.4 에서 "로그인 없이 원격 저장은 성립하지 않는다" 고 결론 낸 것에 대한 답. 신원을 기기 밖(구글 계정)에 둔다.

왜 이건 되는가 — v1.3.2 익명 인증은 토큰이 localStorage 에 있어 저장소가 비워지면 신원까지 날아갔다. 구글 계정은 기기 밖에 있으므로, 저장소가 비워져도 다시 로그인하면 같은 uid 가 나오고 전적이 그대로 돌아온다.

	게스트	구글 로그인
이어하기 (진행 중인 런)	O (로컬)	O (로컬)
전적 · 통계	X	O (Firestore)
기기 변경 · 저장소 초기화 후	—	O 복구
SDK 내려받기	0 KB	33 KB (gzip, 누를 때만)

구조 (js/account.js)

• SDK 는 "구글로 로그인" 을 누르는 순간에만 import() — 게스트는 한 바이트도 안 받는다
• vendor/firebase-auth.js — esbuild 로 트리셰이킹한 자체 번들 112 KB / gzip 33 KB (tools/build-firebase.sh)
• 전적은 users/{uid} 문서 하나에 JSON 한 덩어리. localStorage 는 화면을 바로 그리기 위한 사본이고 정답은 Firestore
• 로컬에만 있던 기록과 서버 기록은 id 기준으로 합친다 (중복 없이, 끝난 시각 순)
• 모든 요청 15초 제한, 3초 디바운스 업로드, 실패하면 다음 기회에 재시도
• 통신이 안 되면 전적만 못 쌓이고 게임은 평소대로 돌아간다

걷어낸 것 — v1.3.0 의 로컬 5계정 시스템(js/profile.js). 구글 계정이 곧 플레이어다. js/legacy.js 가 예전 전적을 모아 두었다가 첫 로그인 때 가져올지 한 번 묻는다 (치트 판은 제외).

Firebase 콘솔 준비물

1. Authentication → Sign-in method → Google 사용 설정
2. Authentication → Settings → 승인된 도메인에 배포 도메인 추가
3. Firestore 규칙 — firestore.rules 참고 (자기 uid 문서만 접근)

검증 한계 : 이 개발 환경은 브라우저가 googleapis.com 에 나갈 수 없어, 실제 구글 로그인 팝업 왕복은 확인하지 못했다. 그 외 경로(게스트 분기·전적 저장/복구·병합·오프라인·마이그레이션)는 신원을 모델링한 스텁으로 검증했다.

v1.3.4 — 클라우드 백업 철회 (v1.3.2 되돌림)

v1.3.2 에서 넣은 Firebase 백업을 도로 걷어냈다. 구조적으로 제구실을 할 수 없었다.

왜 성립하지 않는가

• 백업이 쓸모 있는 유일한 상황은 localStorage 가 지워졌을 때다 (사파리 ITP 7일 규칙 등)
• 그런데 익명 사용자를 식별하는 refreshToken 도 같은 localStorage 에 있다
• 지워지면 신원도 함께 사라지고, 다음 실행에 accounts:signUp 이 전혀 다른 uid 를 발급한다
• 새 uid 의 backups/{uid} 는 비어 있고, 예전 백업은 영영 고아가 된다
• 토큰만 남고 계정 데이터만 사라지는 경우는 없다 — ITP·데이터 삭제·기기 변경·저장공간 회수 모두 origin 단위로 통째로 지운다

재현 (가짜 Firebase 에 신원 발급을 제대로 모델링):

백업 올림        → backups/uid1
ITP 가 지움
새 신원 발급     → uid2
읽으려 한 문서   → backups/uid2  (비어 있음)
결과            → 복구 실패, 빈손으로 시작

v1.3.2 때의 검증이 틀렸다. 가짜 서버가 uid 를 고정값으로 돌려줘 신원이 바뀌는 상황을 모델링하지 못했고, "복구된다" 는 통과는 허상이었다.

제대로 하려면 진짜 로그인(구글 계정·이메일)이 필요하다. 비밀번호 없이 쓴다는 이 게임의 전제와 어긋나므로 넣지 않는다.

대신 기록을 지키는 가장 확실한 방법은 홈 화면에 추가(PWA 설치) 다. iOS 는 설치된 웹앱을 ITP 7일 규칙에서 제외한다. manifest.webmanifest 는 이미 갖춰져 있다.

지운 것 — js/cloud.js (276줄) · firestore.rules · profile.js 의 onProfileChange 훅 · 계정 화면의 백업 상태 줄 · 저장소에 들어가 있던 Firebase 설정

v1.3.3 — 웹폰트 동봉 (시작 지연 해소)

글꼴을 구글 폰트 CDN 에서 받지 않고 저장소 안에 동봉한다. 런타임 외부 의존이 0 이 됐다.

왜

• index.html 이 구글 폰트를 차단형 <link> 로 불러, 그 <link> 가 뒤따르는 스크립트 실행까지 붙잡고 있었다
• 글꼴 서버를 8초 지연시켜 재어 보니 게임 시작이 8초 넘게 밀렸다. 서버를 끊으면 더 나빴다
• three.js(vendor/)·배경음악(audio/) 을 이미 로컬로 두고 있던 원칙과도 어긋났다

무엇을

• fonts/ — woff2 조각 189개 · 1.52 MB, css/fonts.css — @font-face 188+1개 (112 KB / gzip 26 KB)
• 구글이 잘라 둔 unicode-range 조각을 그대로 옮겨 왔다. 브라우저는 예전처럼 화면에 실제로 쓰인 글자에 해당하는 조각만 받는다 (타이틀 화면 기준 13조각 · 119 KB)
• IBM Plex Sans KR 은 400/700 만 담았다 (css/style.css 가 그 둘만 쓴다 — 500·600 은 한 번도 안 쓰임)
• Kirang Haerang 은 타이틀 cnation Slay the Spire 전용이라 라틴 조각 1개만 담았다 (93개 중)
• 이 둘 덕에 4.4 MB / 469조각 → 1.52 MB / 189조각
• tools/fetch-fonts.py 가 이 꾸러미를 만든다 — 폰트를 새로 올릴 때만 다시 돌리면 된다
• vercel.json 에 /fonts/(.*) immutable 캐시 헤더 추가 (한 번 받으면 1년간 재요청 없음)
• 두 서체 모두 SIL Open Font License 1.1 — 재배포 허용. 전문을 fonts/OFL.txt 에 실었다

결과 — 글꼴 서버를 완전히 차단한 상태에서 게임 시작까지 8초 초과 → 0.7초, 구글로 나가는 요청 0건

v1.3.2 — 계정·전적 클라우드 백업 (v1.3.4 에서 철회됨 — 아래 참고)

계정과 전적을 Firebase 에 한 벌 더 떠 둔다. 동기화가 아니라 백업이다.

설계 (js/cloud.js)

• 로컬이 언제나 정답 — 클라우드는 복사본일 뿐. 여기서 예외가 밖으로 새지 않도록 전부 안에서 삼킨다
• SDK 를 쓰지 않고 REST 로 직접 호출 — 빌드 도구·외부 의존 0개 원칙을 지키고, SDK 배포처(gstatic)가 막힌 망에서도 돌아간다
• 익명 인증(accounts:signUp) → refreshToken 만 로컬에 보관, idToken 은 메모리에만
• 저장은 backups/{uid} 문서 하나에 JSON 한 덩어리. 1 MiB 제한에 닿으면 오래된 기록부터 덜어 낸다
• 모든 요청에 12초 시간 제한 — 응답이 없어도 매달리지 않는다
• 로컬이 바뀌면 4초 디바운스 후 업로드. 실패하면 dirty 를 남겨 다음 기회에 다시 시도
• 백업 대상은 계정 목록 + 계정별 전적. 진행 중인 런은 넣지 않는다 (덩치가 크고 다시 하면 그만)

복구 규칙

• 이 기기에 계정이 하나도 없을 때만 되살린다 (사파리 ITP 가 7일 미사용 시 localStorage 를 비우는 경우)
• 계정이 이미 있으면 클라우드로 덮어쓰지 않는다
• 복구 대기는 최대 4초 — 그 안에 응답이 없으면 그냥 게임을 시작한다

빠뜨릴 수 없는 구조

• profile.js 의 commit() / Records.add / Records.clear 한 곳에서만 변경을 알린다 (onProfileChange). 호출부에서 백업 갱신을 잊을 수가 없다

Firebase 쪽 준비물 — firestore.rules 참고

• 콘솔에서 Authentication → 익명(Anonymous) 로그인 사용 설정이 필요하다 (안 켜져 있으면 CONFIGURATION_NOT_FOUND)
• Firestore 규칙은 자기 uid 문서만 읽고 쓰도록 제한한다
• apiKey 는 Firebase 웹 앱에서 공개를 전제로 한 식별자다. 실제 보호는 위 보안 규칙이 한다

v1.3.1 — 테스트용 판은 전적에서 제외

• 숨겨진 시작 보너스를 쓴 판은 게임 테스트용이므로 전적에 아예 기록하지 않는다 (recordRun 이 run.cheat 이면 바로 반환)
• 요약 · 캐릭터별 표 · 막대그래프뿐 아니라 최근 기록 목록에서도 사라진다
• 1.3.0 이전에 쌓인 기록에 그런 판이 남아 있을 수 있어 Records.stats 가 recent 까지 한 번 더 걸러 낸다 (used 기준으로 변경)
• 표시할 일이 없어진 ★ 칸과 "숨겨진 보너스를 쓴 N판은 집계에서 제외" 안내 문구, cheatRuns 집계값을 제거
• Records.stats 의 includeCheat 옵션도 함께 제거 — 포함할 경로가 더는 없다

v1.3.0 — 계정 · 전적

한 기기를 여러 사람이 쓸 수 있도록 계정 개념을 넣고, 계정마다 전적 통계를 남긴다.

계정 (js/profile.js)

• 한 기기에 최대 5개. 비밀번호 없음, 기기 간 동기화 없음 — 각자 자기 기기에서 쓰는 전제
• 처음 실행하면 이름을 받아 계정을 만들고 바로 시작 (askFirstProfile)
• 타이틀 화면의 이름표(.profile-chip) 를 누르면 계정 목록 — 전환 · 추가 · 전적 보기 · 삭제
• 마지막에 쓴 계정이 다음 실행에도 그대로 선택된다 (activeId 저장)
• 삭제는 확인창 한 번 — 그 계정의 전적과 진행 중인 게임까지 함께 지운다
• 같은 이름은 거절 (이미 있는 이름입니다.), 이름은 12자까지

저장 분리

• 저장 키가 계정별로 갈라진다 : cnation_sts_save_<계정id> · cnation_sts_runs_<계정id>
• run.js 에 setSaveKey() / getSaveKey() 추가 — 계정을 바꾸면 이어하기 대상도 함께 바뀐다
• 타이틀의 이어하기 버튼은 지금 계정에 진행 중인 런이 있을 때만 활성
• 계정 도입 전 저장(cnation_sts_save_v1)이 있으면 첫 계정으로 1회 이전 (Profiles.migrateLegacy)

전적 (Records)

• 한 판이 끝날 때마다 한 건 기록 — 사망 · 클리어 · 포기 (최대 500건, 오래된 것부터 밀려난다)
• 남기는 값 : 캐릭터 · 결과 · 도달 층 · 막 · 처치 수 · 엘리트/보스 처치 · 덱 장수 · 유물 수 · 소요 시간 · 치트 여부
• 통계는 저장하지 않고 읽을 때 계산한다 — 기록과 통계가 어긋날 일이 없다
• 전적 화면 : 요약 4칸(총 판수 · 클리어 · 평균 도달 층 · 최고 기록) + 캐릭터별 표 + 막별 막대그래프 + 최근 30판
• 포기한 판은 평균·클리어율에서 빼고 따로 센다 (숨겨진 시작 보너스를 쓴 판의 처리는 v1.3.1 참고)

로컬 우선

• 전부 localStorage — 서버 없이 완전히 동작한다. 클라우드 백업은 v1.3.2 에서 추가

버그 수정

• 지도 화면의 설정 버튼이 눌리지 않던 문제 — 타이틀 톱니 버튼과 id="btn-settings" 가 겹쳐 있어 이벤트가 전부 타이틀 쪽에 붙고 있었다. 타이틀 쪽을 btn-settings-title 로 분리

v1.2.4 — 변경 이력 강조 표시

• 변경 이력에서 minor 버전(끝자리 0) 항목의 제목을 굵고 밝은 흰색으로 강조 (.rel.big .rel-note)
• 판정은 /^\d+\.\d+\.0$/ — 현재 1.1.0 · 1.2.0 두 건이 해당

v1.2.3 — 전체 대상 카드 수정

• 버그 수정 — 모든 적에게 거는 카드인데 대상 선택창이 뜨던 문제
  • 원인 : Card.target 게터가 def.target 만 보고 있어 강화로 대상 범위가 바뀌는 카드를 반영하지 못했다. exhaust/ethereal/innate/retain 은 이미 ~U 접미사로 강화판을 지원하고 있었는데 target 만 빠져 있었다
  • 수정 : def.targetU 지원 추가 후 실명(blind) · 걸어 넘어뜨리기(trip) 에 targetU: ALL 지정
  • 363장 전수 감사 — 텍스트의 "모든 적" 여부와 play 안의 living() 사용 여부를 대조. 해당 2장 외에 문제 없음을 확인
    • 시체 폭발 · 압점 · 볼링 강타 는 단일 대상 지정이 맞아 그대로 둠 (전체 효과는 지정한 적을 기점으로 발생)
    • target: all 로 이미 올바른 카드 22장, 반대 방향 오류 0건, 물약 0건
  • 카드 상세의 대상 표기(적 1체 지정 / 적 전체)도 강화 여부에 따라 바뀐다

v1.2.2 — 복귀 후 소리 복구 · 기본 음량 50%

• 버그 수정 — 앱을 전환했다 돌아오면 배경음악·효과음이 둘 다 무음이 되고, 설정 토글로도 복구되지 않던 문제
  • 원인 : iOS/Android 는 백그라운드 전환 시 AudioContext 를 suspend 시키는데 복귀 시 resume() 을 호출하지 않았다. 효과음(합성)과 배경음(MediaElementSource)이 같은 컨텍스트를 공유하므로 둘 다 죽었다
  • 수정 : audio.js 에 wakeAudio() 추가. visibilitychange(보이게 됨) · pageshow · focus 에서 resume() 하고, 실패하면 armGesture() 로 다음 화면 터치에서 재시도
  • onAudioWake() 구독 창구를 만들어, 컨텍스트가 살아난 뒤 bgm.js 가 재생을 다시 시작하고 게인 램프를 다시 건다 (suspend 중 예약된 램프가 날아갈 수 있음)
  • 설정을 만졌을 때도 컨텍스트가 잠들어 있으면 깨운다
  • bgm.js 의 visibilitychange 는 이제 멈추는 일만 하고, 되살리는 일은 onAudioWake 가 맡는다 (두 리스너의 실행 순서에 의존하지 않도록 document.hidden 을 직접 읽는다)
• 첫 실행 기본 음량 배경음 30% · 효과음 35% → 둘 다 50%. 이미 값을 조절한 기기는 저장된 값을 그대로 쓴다

v1.2.1 — 음악 프리페치

• 다음에 쓸 곡을 미리 받아 전환 버퍼링 제거 (BGM.prefetch / BGM.prefetchBattle)
  • 타이틀 → 02_spire_explore, 지도 → 다음 전투 곡을 미리 받는다
  • prefetchBattle 은 다음 전투 곡을 미리 정해 두고(reserved) 그 곡을 받는다. 실제 전투가 시작되면 정해 둔 곡을 그대로 쓰므로 미리 받은 것이 낭비되지 않는다. "직전 곡 제외" 규칙은 예약 시점에 적용
  • 슬롯을 2장 → 3장으로. 미리 받아 둔 슬롯을 그대로 재생에 쓴다(slotFor). 처음엔 전용 프리페치 엘리먼트를 따로 뒀는데, 느린 회선에서 그 엘리먼트가 대역폭을 독점해 오히려 10배 느려졌다(3G 기준 682ms → 6330ms). 같은 엘리먼트를 재사용하도록 바꿔 해결
  • 실측(Fast 3G 1.6Mbps, 2.10MB 곡) : 프리페치 없음 ~690ms / 0.9초만 미리 받음 ~76ms / 충분히 미리 받음 ~63ms
  • 전투 진입 시 추가 네트워크 요청 0건 (미리 받은 버퍼를 그대로 사용)
  • 배경음이 꺼져 있거나 백그라운드 상태면 미리 받지 않는다

v1.2.0 — 배경음악

• 배경음악 15곡 도입 (js/bgm.js, audio/)
  • <audio> 2장을 번갈아 쓰고 효과음과 같은 AudioContext 에 MediaElementSource 로 물려 GainNode 로 페이드. 전곡 디코드(decodeAudioData) 대신 스트리밍이라 메모리를 거의 안 쓴다
  • 화면별 매핑 : 타이틀 01 / 지도·보상·보물상자·막 전환 02 / 일반 전투 03_a·04_b·03_c·03_d / 엘리트 05_a·05_b / 모닥불·이벤트 06 / 상점 07 / 1·2·3막 보스 08·09·10 / 게임 오버 11 / 최종 승리 12
  • 전투 곡은 직전에 쓴 곡을 제외하고 랜덤
  • 전환 : 기본 크로스페이드 1.5초, 전투 진입 1.5+0.2+0.8초, 보스 진입 1.2+0.5+1.5초(무음을 길게 둬 임팩트), 게임 오버 0.8+0.3+1.0초, 최종 승리 1.5+0.6+1.5초
  • 같은 트랙이 다시 지정되면 무시 → 모닥불에서 지도로 나와도 다시 시작하지 않음
  • 11_fail(9.9초)·12_victory 는 스팅어라 반복하지 않음
  • iOS 자동재생 정책 대응 : 타이틀 아무 곳이나 터치하면 잠금 해제 후 재생
  • visibilitychange 로 백그라운드 전환 시 일시정지·복귀
• 소리 설정 (showSettings) — 배경음악 / 배경음 음량 / 효과음 / 효과음 음량. localStorage(cnation_sts_audio_v1) 에 저장되어 새로고침해도 유지
• 타이틀 우상단 설정(톱니) 버튼 추가 (.title-gear) — 게임 중에는 메뉴 ☰ → 설정
• 음원은 196kbps 원본을 128kbps 로 재인코딩(커버 아트 제거 포함) — 49.9MB → 34.1MB (68%)
• vercel.json 에 /audio/ 영구 캐시 헤더 추가

v1.1.16

• 손패 두 줄 펼치기 — 손패가 많을 때 카드가 서로를 가려 이름·설명을 못 읽던 문제
  • 측정 : 10장일 때 카드 한 장당 32%(102px 중 33px)만 보였고, 이름·설명이 가운데 정렬이라 그 32% 에는 글자가 없었음
  • HAND_TWO_ROW = 7 장 이상이면 두 줄로 분배 (renderHand). 뒷줄 floor(n/2) · 앞줄 나머지
  • HAND_TWO_ROW_SCALE = 0.85 로 카드를 줄여 각 줄이 거의 겹치지 않게 → 10장 기준 84% 가시
  • 카드 크기는 --hand-scale 변수 하나로 width/height/--nb-lift/--desc-fs 를 함께 조절
  • 뒷줄은 .handbar 높이를 키우지 않고 3D 무대 아래쪽 빈 공간으로 올라감 → 무대 높이 524px 그대로, 리플로우 없음
  • #scr-battle.hand-two-rows 에 --row-lift 를 걸어 .hand-side(더미 버튼) 와 .battle-log 도 같이 올림
  • 두 줄일 때 선택 배율 1.55 → 1.82 (한 줄일 때와 같은 절대 크기)

v1.1.15

• 버그 수정 — 고른 카드가 오른쪽 카드들에 가려지던 문제
  • 원인 : renderHand() 이 부채꼴 순서대로 c.style.zIndex = 10 + i 를 인라인으로 넣고 있어서, CSS 의 .card.selected { z-index: 60 } 이 항상 밀렸다. 고른 카드보다 오른쪽(인덱스가 큰) 카드가 전부 위로 올라옴
  • 수정 : c.style.zIndex = isSel ? 80 : 10 + i — 선택 시 인라인 값 자체를 최상단으로. 드래그 중 값도 80 으로 맞추고 CSS 규칙도 80 으로 통일
  • 손패 9장 전수 확인 : 수정 전 7장이 가려짐 → 수정 후 0장

v1.1.14

• 물약 칸이 가득 찼을 때 교체 선택 (takePotion / showPotionSwap / confirmPotionSwap)
  • 종전 : run.addPotion() 이 실패하면 토스트만 띄우고 보상을 못 받았음
  • 개선 : 새로 얻을 물약과 가진 물약을 설명과 함께 보여 주고, 버릴 물약을 고르거나 받지 않기 로 포기 선택
  • 확인 단계는 openModal(..., { stack: true }) 로 얹어 취소하면 목록으로 복귀 (v1.1.7 모달 스택 활용)
  • 전투 보상 · 상점 구매 양쪽에 적용. 상점은 실제로 받았을 때만 골드 차감
  • 소주(Sozu) 유물이 있으면 교체 화면 대신 안내 토스트
  • 물약 설명에 실제 배율(potionMult()) 반영

v1.1.13

• 버그 수정 — 설명이 긴 카드에서 설명 앞부분이 보이지 않던 문제 (지옥의 칼날 등)
  • 원인 1 : .card-namebar 가 position:absolute; top:27% 라 .card-body 의 위쪽 6~17px 를 덮고 있었음 (363장 전부 해당)
  • 원인 2 : .card-body 가 align-items:center + overflow:hidden 이라, 글이 넘치면 위아래가 함께 잘려 첫 줄부터 사라졌음
  • 수정 1 : 이름표를 흐름 안으로 되돌리고 margin-top: calc(-1 * var(--nb-lift)) (카드 높이의 13% = 기존 top:27% 와 같은 자리) 로 그림 위에 겹쳐 올림 → 보이는 위치는 그대로면서 글상자가 이름표 아래에서 시작
  • 수정 2 : .card-desc { max-height: 100%; overflow: hidden; } → 글상자를 넘지 못하므로 항상 첫 줄부터 보이고 뒷부분만 잘림
  • 수정 3 : 설명 길이에 따라 글자 축소 (d-long 39자↑ ×0.92 / d-xlong 48자↑ ×0.84). 글자 크기는 --desc-fs 변수로 일원화
  • .card.small 의 임시 대응(padding-top:11px + line-clamp:4) 은 구조가 해결하므로 제거

v1.1.12

• 버그 수정 — 방어도 배지(.unit-block) 가 체력바가 아닌 엉뚱한 높이에 표시되던 문제
  • 원인 : 배지가 .unit 기준 position:absolute; left:-8px; top:16px 로 고정 좌표를 쓰고 있었음. .unit 은 [의도] [이름] [체력바] [상태칩] 세로 스택이라 의도 아이콘 유무에 따라 체력바의 높이가 달라져 배지가 이름 옆으로 밀렸고, .unit 의 폭(max-content)과 체력바 폭(인라인 barW)이 달라 가로 위치도 어긋났음
  • 수정 : 체력바를 .unit-hp-row(position:relative, 폭 = barW) 로 감싸고 배지를 그 안에 넣어 left:-8px; top:50%; translateY(-50%) 로 앵커. 의도·이름·체력바 폭과 무관하게 항상 체력바 왼쪽 끝 · 세로 중앙
  • positionUnits() 의 좌측 클램프에 배지 돌출분(8px) 만큼 여유 추가

v1.1.11

• 숨겨진 시작 보너스에 골드 2배 추가 — 아래 "숨겨진 기능" 항목 참고

v1.1.10

• 시작 보너스 선택 처리를 take(o) 하나로 묶어 정리
• 숨겨진 시작 보너스 추가 — 아래 "숨겨진 기능" 항목 참고 (게임 내 변경 이력에는 일부러 넣지 않음)

v1.1.9

• 버그 수정 — 슬라임 분열 직후 몬스터가 화면에서 사라지고, 플레이어가 카드를 한 장 사용해야 나뉜 슬라임이 나타나던 문제
  • 원인 : 새 적의 3D 모델을 만드는 S3.layoutEnemies() 가 playCardNow() / usePotion() 에서만 호출되고 있었음. 분열·소환은 적 턴에 일어나므로 battleUI.render() → renderBattle() 경로로는 모델이 생기지 않아 screenPos() 가 null → 라벨까지 display:none
  • 수정 : renderBattle() 이 매번 S3.layoutEnemies(B) 를 호출한다. 대신 layoutEnemies 가 살아 있는 적의 uid 목록을 키로 기억해, 구성이 그대로면 즉시 반환 (매 렌더마다 위치를 덮어써 공격 모션 중인 모델이 튕기는 것을 방지)
  • 같은 원인이던 수하 소환(summon) 도 함께 해결

v1.1.8

• 유닛 탭 → 걸린 상태 전체 설명 (statusTooltip / showStatusInfo)
  • 머리 위 .pw 칩(29×19px)이 작아 개별 탭이 어렵던 문제 → 칩의 개별 클릭 핸들러를 없애고 .unit(이름·체력바·상태칩 묶음) 과 .unit-hit(본체) 이 탭을 받아 전체 상태를 한 창에 표시
  • 체력 · 방어도 · (플레이어는) 자세 + 걸린 힘/상태이상 전부를 이름·수치·설명과 함께 나열
  • 내 캐릭터 라벨도 동일하게 동작
  • G.selectedCard 가 있으면 종전대로 대상 지정이 우선 (onTargetTap)
  • 의도 배지(.intent) 는 계속 다음 행동 설명 — stopPropagation 으로 분리
• showTooltip(ev, title, text, rows) — 줄 수에 따라 표시 시간 연장(최대 9초), 화면 하단 탭 시 위쪽으로 열림

v1.1.7

• 버그 수정 — 전투 보상의 카드 선택 중 카드를 길게 눌러 상세 설명을 보고 닫으면, 보상 모달까지 통째로 닫혀 done() 콜백이 호출되지 않아 전투 화면에서 조작 불가 상태가 되던 문제
  • 원인 : openModal() 이 #modal-box 를 매번 덮어쓰고 closeModal() 이 #scr-modal 을 그냥 숨겨 버려서, 모달 위에 모달을 띄우면 아래 모달이 복구되지 않았음
  • 수정 : openModal(builder, { stack: true }) 로 열면 기존 모달의 DOM 노드를 그대로 보관했다가 closeModal() 에서 되돌린다 (snapshotModal / restoreModal). 이벤트 핸들러·스크롤 위치가 유지됨
  • 카드 상세 설명만 stack: true 로 열고, 나머지 모달은 종전대로 교체 방식 유지
  • 화면 전환(showScreen) 시 clearModal() 로 쌓인 모달을 정리
  • 상세 설명 안의 큰 카드(.cd-card)는 길게 누르기 대상에서 제외 (무한 중첩 방지)

v1.1.6

• 카드 설명글의 용어에 붙던 점선 밑줄 제거 (.card-desc .kw-* 의 border-bottom)
• 용어 구분은 색상만으로 유지

v1.1.5

• 도감 → 백과사전 으로 이름 변경
• 진입 버튼을 게임 방법 모달에서 타이틀 화면으로 이동 — 이어하기 아래에 게임 방법 · 백과사전 두 버튼을 가로로 나란히 배치 (.title-menu-row)
• 게임 중에는 기존대로 메뉴(☰) → 백과사전
• Revision History 화면 상단 홈으로 버튼 왼쪽에 제작 : cnation(문명국) 표기 추가 (.history-credit)

v1.1.4

• 도감 추가 (#scr-codex) — 게임 방법의 "용어집" 을 5개 탭으로 확장. 메뉴(☰)에서도 진입

  탭	내용
  카드	363장 — 아이언클래드 75 · 사일런트 77 · 디펙트 76 · 와쳐 83 · 무색 33 · 상태/저주 19. 누르면 상세 설명
  유물	117개 — 3D 아이콘 + 설명, 등급별 보기, 캐릭터 전용 표시
  물약	30종 — 3D 아이콘 + 효과, 등급 · 전투 전용 표시
  캐릭터	4종 — 3D 초상, 시작 체력 / 시작 유물 / 시작 덱, 운영 방식 설명
  용어	39개 — 기존 용어집

  • 캐릭터 초상은 전투 씬의 절차적 모델(buildPlayer)을 그대로 구워서 사용
• 작은 카드의 설명글이 이름표 위로 삐져나오던 문제 수정 (줄 수 제한 + 이름표 아래에서 시작) — 덱 보기 화면에도 함께 적용

v1.1.3

• 카드 뽑는 연출 개선 — "뽑을 더미에서 날아온다" 가 아니라 "제자리에서 펼쳐진다" 로 보이던 문제
  • 원인 : 감속 곡선(cubic-bezier(.2,.86,.3,1))이 지나치게 앞쪽에 몰려 첫 0.08초에 거리의 72% 를 이동
  • CSS 트랜지션 → 키프레임 애니메이션으로 교체해 직선이 아닌 호(弧) 를 그리게 함 (60% 지점을 목표보다 48px 위로 잡아 솟았다 내려앉음)
  • 출발 시 카드가 −36° 기울어져 있다가 날아오며 바로 세워짐
  • 한 장 0.42s → 0.62s, 장 사이 간격 0.055s → 0.1s 로 늘려 한 장씩 따라 볼 수 있게 조정
  • 더미 위에서 작게 보이던 카드가 처음부터 보이도록 수정 (기존엔 출발 직후에야 나타남)
  • 효과음도 2단(날아오는 바람 → 손에 닿는 순간)으로 교체해 새 타이밍에 맞춤

v1.1.2

• 게임 방법 화면 전면 개편 — 6개 항목 21줄 (목표 / 전투 조작 / 눌러서 보는 정보 / 화면 구성 / 지도 / 알아 두면 좋은 것)
  • 그동안 추가된 기능을 모두 수록 : 카드 길게 눌러 상세 설명, 적 의도 아이콘 탭해 다음 행동 설명, 화면 맨 아래를 탭해 선택 카드 취소, 몬스터 본체를 탭해 대상 지정, 상단바 물약 사용, 카드 더미 열람, 선택 화면의 체력·골드·물약칸 표시, 실시간 수치 반영
  • 가운데 정렬 한 덩어리 글 → 왼쪽 정렬 항목 목록으로 바꿔 가독성 개선 (길어서 스크롤, 버튼 줄과 구분선)

v1.1.1

• 와쳐 자세 기운 연출 : 자세에 들어가면 캐릭터 주위에 색 기운이 피어오름 (머리 위 글자 표시도 유지)

  자세	색	특징
  분노	붉은빛	알갱이 18개가 빠르게 솟고 고리가 빠르게 회전
  평온	밝은 파랑	알갱이 13개가 천천히 잔잔하게
  신성	금빛	알갱이 22개 + 머리 위 후광 고리

  • 구성 : 발밑 이중 고리(서로 반대로 회전·맥동) + 위로 갈수록 사라지는 기운 기둥(꼭짓점 색 페이드)
    • 나선을 그리며 떠올라 흩어지는 알갱이
  • 무자세로 돌아가면 기운을 걷고, 전투를 새로 시작하면 초기화

v1.1.0

카드 상세 설명 도입을 기점으로 버전을 1.1 계열로 올렸습니다. (기존 1.0.22 → 1.1.0)

• 턴 시작 드로우 비행 연출 복구 (버그 수정)
  • 드로우 직후 다른 이유로 renderHand() 가 한 번 더 돌면, 비행 시작 위치(scale 0.16 · 더미 위치)를 최종 위치로 덮어써 버려 애니메이션이 통째로 사라지던 문제. 턴 전환 중에는 렌더가 11~17회 발생
  • 비행 대기 상태(flyPending)를 두고, 그동안에는 목표값만 갱신하고 style 은 건드리지 않도록 수정
  • 측정 : 수정 전 scale 변화 없음 → 수정 후 0.16 → 0.54 → 0.85 → 1.0
• 카드 상세 설명 : 카드를 길게 누르면(0.42초) 상세 화면
  • 큰 카드 + 유형·희귀도·비용·대상 + 현재 효과 + 강화 후 효과 + 카드 성질(소각·소멸·보존·내재)
  • 그 카드에 쓰인 용어의 뜻풀이를 함께 표시 (예: 정확도 → 단검이 무엇인지)
  • 손패·보상·상점·덱 보기 등 카드가 보이는 모든 화면에서 동작, 기존 탭/드래그 조작은 그대로
• 키워드 사전 39개 (js/data/keywords.js) — 카드 렌더러의 키워드 색 입히기도 이 사전을 참조하도록 통합
  • 카드 설명의 용어에 점선 밑줄, 게임 방법 화면에 "용어집" 버튼 추가

v1.0.21

• 카드 비행 연출 : 카드가 더미에서 오고 더미로 돌아가는 움직임을 눈으로 따라갈 수 있게 함
  • 드로우 : "뽑을" 더미 위치에서 scale 0.16 으로 출발해 커지면서 손패 자리로 날아옴 (0.42s, 장당 0.055s 시차)
  • 사용/버림 : 손패 위치에서 "버린" 더미로 작아지며(scale 0.14) 날아가 사라짐, 살짝 회전
  • 소각 : 같은 방식으로 "소각" 더미로 날아감
  • 턴 종료 : 손에 남은 카드가 모두 차례로 "버린" 더미로 날아 들어감
• 효과음 : 드로우는 기존 cardDraw, 버림은 새 cardToss(아래로 떨어지는 바람소리), 소각은 기존 exhaust. 여러 장이면 0.05s 시차로 재생
• 날아오는 중에 화면이 다시 그려져도 연출이 끊기지 않도록 비행 중인 카드 노드를 유지
• 사라진 카드는 원본 노드를 그대로 떼어 잔상으로 재사용 (직렬화·복제 없음)

v1.0.20

• 골드 아이콘을 금빛 주화로 재설계 : 두꺼운 테두리 + 살짝 튀어나온 앞면 + 가운데 마름모 각인 + 둘레 돋을새김 10점, 세 닢을 좌우로 벌려 겹쳐 각 원반 윤곽이 또렷하게
  • 금속성(metalness)이 0.95 로 너무 높아 환경맵 없이 어둡게 죽던 문제를 금속감/발광 재조정으로 해결
• 카드 보상 아이콘을 3D 카드로 교체 : 책 모양 SVG → 부채꼴로 펼친 카드 3장 (뒤 2장은 카드 뒷면, 앞 1장은 앞면 + 문양)

v1.0.19

• 적의 다음 행동 아이콘 옆 물음표 표시 제거 — 아이콘을 그냥 터치하면 설명이 나오는 동작은 유지

v1.0.18

• 적 의도 아이콘 탭 설명 : 적 머리 위의 다음 행동 아이콘을 누르면 설명이 뜸
  • 아이콘 15종(공격 / 공격+방어 / 공격+약화 / 공격+강화 / 방어 / 방어+강화 / 방어+약화 / 강화 / 약화 / 강한 약화 / 주술 / 알 수 없음 / 수면 / 기절 / 도주)별 한 줄 설명
  • 몬스터 정의의 run 에서 실제 효과를 읽어 내 구체적으로 표시 — 내 덱에 현혹 2장 넣음, 자신에게 힘 3, 나에게 약화 2, 새로운 적을 부름, 체력을 나눠 둘로 분열
  • 예상 피해 · 타수 · 합계 · 얻는 방어도를 함께 표시 (힘/약화/취약 반영된 현재 값)
  • 아이콘 옆에 작은 물음표로 "눌러 볼 수 있다"는 힌트 표시
  • 카드 대상을 고르는 중에는 기존대로 적 선택이 우선 (설명이 방해하지 않음)

v1.0.17

• 머리 위 정보(다음 행동) 잘림 해결 — 1막 보스전처럼 키 큰 적에서 의도 아이콘이 화면 위로 잘리던 문제
  • 라벨 기준점을 크기 추정치(1.6 + size×1.5) 대신 실제 모델 바운딩 박스 높이로 계산 → 몬스터마다 자기 머리 바로 위에 붙음
  • 라벨이 화면 밖으로 나가려 하면 라벨의 실제 높이만큼 여유를 두고 안쪽으로 붙여 의도 아이콘까지 항상 보이게 (기존에는 아래쪽 기준으로만 잘라 윗부분이 사라졌음)
  • 키 큰 보스가 등장하면 카메라 시점을 통째로 위로 이동(최대 2.6 단위)해 보스 전신과 머리 위 정보가 함께 담기도록 자동 보정

v1.0.16

• 타이틀의 "모바일 에디션 · 전 50층" 부제 삭제
• 하단 버전 표시 / Revision History 링크 복구 — v1.0.15 의 타이틀 CSS 교체 과정에서 .version-bar 규칙이 함께 삭제되어 표시가 사라졌던 문제
• 같이 삭제됐던 변경 이력 화면 스타일 전체 복구 (#scr-history · .rel*)

v1.0.15

• 제목 서체를 Kirang Haerang(키랑해랑체)으로 변경 — cnation Slay the Spire 한 줄 구성, 화면 폭에 따라 크기가 자동 조절(clamp)
• 타이틀 레이아웃 재구성 : 제목을 위로, 버튼 간격을 줄여 가운데에 3D 무대 공간 확보
• 캐릭터 4종 3D 무대 (js/three/title3d.js) — 전투 씬의 절차적 모델을 그대로 재사용
  • 배치는 반원 + 뒤쪽 보스 그림자(throne) 안을 채택 (일직선/쐐기/포위 안과 비교 후 결정)
  • 전투 화면과 동일한 아이들 모션 : 호흡(몸통 확대/축소), 상하 흔들림, 고개 끄덕임, 무기 흔들림
  • 아치 너머에서 붉은 눈의 거대한 그림자가 내려다보는 연출
• 타이틀이 보이지 않는 동안에는 3D 렌더링을 멈춰 배터리 소모 방지

v1.0.14

• 상단바를 원작과 동일한 2행 구조로 전면 개편
  • 1행 : ♥ 66/77 · 🪙 108 · 물약 슬롯 3칸 · 1막 · 3층 · 메뉴
  • 2행 : 유물을 왼쪽부터 차례로 (가로 스크롤)
  • 상단 체력 막대를 없애고 숫자로 표시 — 전투 중 체력은 캐릭터 머리 위 막대로 보이므로 중복 제거
  • 물약을 전투 액션바 / 지도 하단에서 상단바로 이동 (탭해서 사용하는 동작은 동일)
• 아이템 전면 3D 아이콘화 (js/three/items3d.js)
  • 유물 117종 : 형태 26종(고리·보석·병·물방울·해골·심장·칼·별·책·불꽃·번개·사슬·날개·망치·톱니·왕관·도리이·모래시계·눈·발톱·방패·물고기·장화·상자·손) × 고유 색
  • 물약 30종 : 병 모양 6종(둥근·삼각·긴·구체·각진·물방울) × 고유 액체색 + 마개 + 등급 링 + 기포
  • 골드(금화 더미)·체력(하트)도 3D
  • 전투 보상 / 상점 / 보물상자 / 유물 목록 / 물약 사용 창까지 모두 동일한 3D 아이콘 사용
  • 굽는 해상도를 96px 로 고정하고 머티리얼을 재사용해 셰이더 재컴파일 제거 (117종 7.3초 → 0.43초)
• 타이틀을 cnation Slay the Spire 로 변경 — cnation 은 원작 로고를 가리지 않는 차분한 청록

v1.0.13

• 보스 아이콘 재설계 : 붉은 보석 → 마왕의 두개골 (마디 3개로 휘어 오르는 거대한 뿔, 움푹 팬 눈구멍 속 이글거리는 붉은 눈, 위아래 송곳니, 정수리의 부러진 가시, 뒤에서 맥동하는 붉은 기운). 회전시키지 않아 늘 정면을 응시
• 범례 아이콘 크기 차등 : 실제 몬스터 덩치를 반영해 일반 몬스터(29px) 기준 엘리트 +20%(35px) · 보스 +40%(41px). 아이콘 크기가 달라도 설명글 줄은 아래로 정렬
• 썸네일을 구울 때 후광 같은 장식면은 프레이밍 계산에서 제외해 본체가 작아지지 않도록 수정

v1.0.12

• 보물 상자를 금빛으로 재설계 : 황금 몸통 + 밝은 금테 2줄 + 반원 뚜껑 금테 후프, 뚜껑 위 보석 3알(청/분홍/연두), 자물쇠판의 큰 보석, 모서리 금장 못, 뚜껑 틈에서 새어 나와 천천히 명멸하는 빛
• 모닥불을 세 갈래 불꽃으로 재설계 : 가운데가 가장 높고 양옆이 바깥으로 기울어진 3개의 불꽃 (각 불꽃은 겉불꽃 + 속불꽃 2겹), 삼각으로 기대어 쌓은 장작 3개와 잉걸불, 세 불꽃이 서로 다른 박자로 일렁임

v1.0.11

• 범례 아이콘 20% 추가 확대 (24px → 29px, 썸네일 굽는 해상도 64 → 80px)
• 범례를 두 줄 배치로 변경 : 아이콘을 위, 설명글을 아이콘 아래에 두어 아이콘이 더 크게 보이도록 조정

v1.0.10

• 범례 아이콘 20% 확대 (20px → 24px, 썸네일 굽는 해상도도 48 → 64px)
• "정예" → "엘리트" : 원작 명칭에 맞춰 지도 범례·방 이름·유물/이벤트 설명·결과 화면 전부 변경
• 의문 방 아이콘을 실제 물음표로 재설계 : 오른쪽 아래가 열린 고리 + 꼬리 + 점, 회전시키지 않고 항상 정면을 유지해 어느 각도에서도 ? 로 읽힘
• 상점 아이콘을 노점 형태로 재설계 : 빨강/흰 줄무늬 차양, 판매대와 카운터, 금빛 앞단 테두리, 진열된 물약병과 금화 더미
• 지도 배경 그라디언트 : 새카만 바탕 대신 위쪽 보랏빛 · 아래쪽 주황빛이 은은하게 도는 다층 그라디언트 + 가장자리 비네팅

v1.0.9

• 막별 배경 색 계통 분리 : 1막(117층) 어두운 회색 석조 · 2막(1834층) 어두운 갈색 목조 · 3막(35~50층) 어두운 보라 심층. 안개·바닥·기둥·아치 색과 조명(주광/역광/환경광/불빛) 색조까지 함께 바뀜
• 층별 절차적 변주 : 기둥 수(711)·높이·굵기·면수, 아치 개수(24)·크기·간격, 바닥 무늬 링(1~3), 색조 지터가 층마다 달라져 같은 막 안에서도 배경이 조금씩 다름
• 층별 소품 2종 무작위 배치 : 돌무더기 / 늘어진 사슬 / 횃불 / 떠 있는 수정 / 뒤쪽 계단 (횃불은 일렁이고 수정은 위아래로 부유)
• 층 번호로 고정된 난수를 쓰므로 같은 층은 다시 들어가도 같은 배경

v1.0.8

• 하단 탭으로 선택 카드 취소 : 전투 화면 맨 아래(물약 슬롯 아래쪽) 빈 영역을 탭하면 떠올라 있던 카드가 취소되며 손패 제자리로 되돌아감
  • 액션바의 빈 공간을 눌러도 동일하게 동작 (에너지·물약·턴 종료 버튼은 기존 동작 유지)
  • 버튼이나 안내 문구 없이, 카드를 고른 동안에만 아주 옅은 기척만 남김
  • 되돌아갈 때 미끄러지듯 이동하는 애니메이션 적용, 물약 대상 지정 중에도 동일하게 취소 가능

v1.0.7

• 타이틀 버전 표기 위치 변경 : 화면 맨 아래로 옮기고 부가 설명 없이 버전 숫자만 표시
• Revision History 링크 : 버전 옆의 텍스트 링크를 누르면 v1.0.0 부터의 전체 변경 이력 화면으로 전환 (최신 버전은 "현재" 배지로 강조, 세로 스크롤)
• 이력 화면의 "홈으로" 버튼으로 타이틀 화면 복귀
• 변경 이력 데이터를 js/data/changelog.js 로 분리 — 새 버전을 올릴 때 이 파일도 함께 갱신

v1.0.6

• 모달 상단 상태 띠 : 보상·보물상자·모닥불·상점·이벤트·네오우 등 선택 화면 어디서나 현재 체력 / 보유 골드 / 물약 슬롯을 위쪽에 고정 표시
  • 물약 슬롯은 채워진 칸(물약 색)과 빈 칸(점선)을 그대로 보여 주고 "빈칸 N" 또는 "가득참" 표기
  • 체력 회복이 걸린 선택(모닥불·이벤트)에서는 체력바를, 물약을 얻는 선택(보상·상점)에서는 빈 물약 칸을 반짝여 강조. 체력이 30% 이하면 체력바가 붉게 강조됨
  • 보상을 받을 때마다 즉시 갱신되므로 남은 칸·골드를 보고 이어서 판단 가능
• 모닥불 휴식 미리보기 : "체력을 24 회복합니다. (47 → 71 / 80)" 처럼 회복 후 체력을 함께 표시

v1.0.5

• 갈 수 없는 길의 어둡기 완화 : 거의 보이지 않을 만큼 어둡던 처리를 밝은 영역과의 중간 밝기로 조정 (채도 0.25→0.62, 명도 0.55→0.82, 불투명도 0.42→0.72) — 지나온 길·연결선도 같은 기조로 밝힘
• 경로 화살표로 교체 : 갈 수 있는 방 머리 위의 위쪽 화살표를 없애고, 현재 위치에서 갈 수 있는 방으로 뻗어 나가는 금색 화살표를 경로 위에 표시 (아직 첫 발을 딛지 않은 1층에서는 바닥에서 올라오는 진입 화살표)
• 범례를 3D 아이콘 썸네일로 : 상단 안내를 단색 동그라미 대신 지도에서 실제로 쓰이는 3D 아이콘을 작게 구워 그대로 사용

v1.0.4

• 디펙트 외 캐릭터의 빈 구체 슬롯 제거 — 구체 시스템은 디펙트 전용으로만 표시
• 번개 구체 개별 발사 : 번개 구체가 2개 이상일 때 구체 수만큼 각각의 위치에서 시차를 두고 따로 발사 (기존에는 한 줄기에 피해만 합산되어 보였음)
• 전투 연출 속도 2배 : 플레이어·몬스터의 공격 모션과 피격·사망 연출, 턴 간 딜레이를 모두 2배로 늘려 눈에 잘 보이도록 조정
• 배경 노이즈 제거 : 게임 내내 깔리던 "우우웅" 앰비언스 사운드 완전 삭제
• 몬스터 본체 탭으로 대상 선택 : 머리 위 이름표가 아니라 몬스터 3D 본체를 직접 눌러 공격 대상 지정 (대상 지정 중에는 붉은 링 표시)
• 내 체력바를 녹색 계열로 변경 (상단바·유닛 체력바 모두)
• 체력바 길이 차등 : 최대 체력에 따라 막대 길이를 다르게 하되 차이를 1/4 로 압축 (내 2배 체력 → 길이 +25%, 내 60% 체력 → 길이 −10%)
• IBM Plex Sans KR 전면 적용 (제목·카드·UI 전체)
• 카드 설명 글씨 15% 확대 — 스마트폰에서의 가독성 개선

v1.0.3

• 디펙트 모델에서 장식용 하늘색 오브(위성 모양)와 머리 위 후광 링 제거 — 충전한 구체가 놓이는 자리(오른쪽·머리 위)와 겹쳐 구분이 어려웠음
• 구체가 떠 있을 때 플레이어 이름/체력바를 위로 올려 구체와 겹치지 않게 보정

v1.0.2

• 실시간 수치 반영 : 힘·약화·취약·민첩·허약·자세가 적용된 실제 수치를 그대로 표시
  • 적 머리 위 의도 : 약화를 걸면 그 즉시 예상 피해가 줄어든 값으로 바뀜
  • 손에 든 카드 : 힘을 얻으면 피해 수치가 즉시 증가하며, 달라진 숫자만 초록(증가)/주황(감소) 으로 강조
• 지도 가독성 : 현재 위치에 빛기둥·흰 링 표식, 갈 수 있는 길은 금색 화살표 + 굵고 밝은 경로, 갈 수 없는 길은 흐리게 처리
• 상점 : 카드 제거 시 "이 카드를 제거하시겠습니까?" 확인 단계 추가, 매 상점마다 무작위 상품 1개가 반값 또는 80% 할인 (할인 배지 + 원가 취소선)
• 디펙트 구체 : 주인공 주위를 도는 3D 구체로 전면 교체
  • 원작과 동일한 배치 — 먼저 발동할 구체가 오른쪽(몬스터 쪽), 다음이 머리 위, 그다음이 왼쪽
  • 새 구체는 왼쪽에서 충전되고 기존 구체가 한 칸씩 밀려 이동하는 애니메이션
  • 발동 연출 : 번개는 갈라지는 번개 줄기, 암흑은 투사체, 냉기는 방어막, 플라즈마는 상승 섬광
  • 전용 합성 효과음 4종(천둥·얼음·암흑·플라즈마) + 충전음 추가
• 강화 절차 간소화 : 카드를 고르면 곧바로 강화 전/후 비교 화면으로 (중간 확인 1단계 제거)
• 초반 난이도 : 첫 전투를 기존 2번째 전투 수준(체력 75%·피해 70%)으로, 두 번째 전투부터는 일반 난이도
• 버그 수정 : 턴 시작 피해(유물·중독 등)로 마지막 적이 죽어도 전투가 끝나지 않던 문제

v1.0.1

• 시작 보너스 : 새 게임 시작 시 네오우의 축복 4개 중 1개 선택 (혜택 10종 + 대가형 5종)
• 강화 확인 UI : 카드를 고르면 강화 전/후 카드와 변경점을 보여주고 확인을 받음
• 초반 밸런스 : 1막 첫 전투(체력 55%·피해 50%), 두 번째 전투(75%·70%)로 완화
• 밝은 톤 : 캐릭터·몬스터 색상 명도 +0.16, 조명/바닥/배경 전면 상향
• 호흡 애니메이션 : 몬스터 확대·축소 폭 2배, 플레이어도 숨 쉬는 모션 추가
• 3D 지도 : three.js 입체 아이콘(모닥불·상자·해골·천막·결정) + 상단 아이콘 안내 범례
• 유물 전체 적용 : 염주 팔찌·작은 상자·도박 칩·날개 부츠 구현, ? 방 종류 분기 추가
• 캐릭터 4종 : 사일런트·디펙트·와쳐 추가 (구체/자세/주문/통찰 시스템 포함)
• 체력바 개선 : 두께 20% 증가, 수치를 정중앙 정렬
• 타이틀 화면에 버전 표시

v1.0.0

• 최초 초안 : 아이언클래드, 50층 3막 구조, 전투/지도/보상/상점/모닥불/이벤트

---

9. 테스트용 자원 2배 (NEOW_SECRET)

발동 방법 — 설정 → 관리자 모드(숫자 4자리) → 자원 2배로 시작 을 켠 뒤 판을 시작합니다.

v1.3.16 까지는 시작 보너스 화면의 네 번째 선택지 아래 아무 표시 없는 자리(.choice-secret, 높이 54px)를 탭하는 방식이었습니다. v1.3.17 에서 그 숨은 버튼을 없앴습니다 — 관리자 모드가 같은 일을 더 분명하게 하고, 모르고 눌러 판을 버리는 일이 없어집니다. 효과 자체(NEOW_SECRET)는 그대로 씁니다.

효과 (NEOW_SECRET in js/data/neow.js)

항목	내용
최대 체력	2배 (그만큼 회복해서 가득 찬 상태로 시작)
공격 카드 피해	2배 — attackValue() 에서 card && run.cheat 일 때만. 가시·중독 같은 카드 외 피해는 그대로
방어 카드 방어도	2배 — gainBlock() 에서 card && !raw && run.cheat 일 때만. 유물·힘으로 얻는 방어도는 그대로
물약 효과	2배 — 신성한 나무껍질 유물과 같은 배율
골드	선택 즉시 가진 골드가 2배, 이후 얻는 골드도 전부 2배 — gainGold() 한 곳에서 처리하므로 전투 보상·상자·이벤트·유물 전부 적용
유물	일반 유물 1개 + 엘리트 유물 1개(relicReward())

run.cheat 플래그로 관리하며 저장/불러오기에 함께 보존됩니다.