claude-ai-office 0.34.2 → 0.37.1

package/README.en.md

@@ -96,6 +96,12 @@ Each floor (= project) is assigned an **interior preset** automatically (hash of
 
 A session's rest room (café or terrace) becomes that floor's facility: on a Mint floor the character goes to the Gym (`🏃 working out`) and the log reads `✅ … → 🏃 Gym`. Press **🎨** on the selected floor to pick a preset by hand; the choice is stored on the server (`~/.ai-office/floor-styles.json`) so every browser sees the same floor (`Auto` restores the automatic choice). Building view shows the different layouts too.
 
+**Theme floors**: the bottom of the 🎨 menu has **🎃 Halloween · 🎄 Christmas · 🏖️ Summer vacation**. They keep the floor's layout and facilities and change the floor, walls, colors and decorations — pumpkins, a bubbling cauldron, gravestones, floating ghosts and bats; a tree with twinkling lights, a fireplace with stockings, presents, snowmen and wreaths; parasols, loungers, a pool, beach balls and surfboards. Large pieces block the way only when every seat stays reachable. ⚙️ Settings → **Theme floors** → `📅 Auto by date` puts the season's theme on every floor you did not pick by hand (Halloween 10/15–11/1, Christmas 12/1–12/26, Summer 7/15–8/31).
+
+![Christmas floor](docs/screenshots/fe-63-christmas.jpg)
+
+The whole floor changes: the sky outside the office (a purple night with a big moon and bats / a snowy night / a blue sky with sun and clouds), garlands on every wall including partitions, a rug in every room plus low fog for Halloween, and pumpkins, lanterns or tiki torches along the corridors.
+
 ![Different office on every floor](docs/screenshots/fe-35-overview.jpg)
 
 Subagents wear blue hard hats and are named after the `description` given to the Agent tool. You (`me`) sit at My Desk, and Claude comes over when it has a question or needs permission.
@@ -115,7 +121,9 @@ Open **⚙️ Settings** in the header. Everything here is stored in this browse
 | Demo | Four fake sessions on separate `(demo)` floors | `D` |
 | Character looks | Opens the customizer (below) | |
 | Daylight | Window, terrace and room lighting follow the real clock: morning (06–10), day (10–17), evening (17–20), night (20–06). Can be fixed to one period or turned off | |
-| Floor interior | Interior preset of the floor you are viewing | |
+| Outdoor weather | Rain or snow over outdoor rooms (terrace, rooftop garden): `🎄 Match theme` (default; snow on Christmas floors) · `🌤️ Real weather` (type a city → current weather from [Open-Meteo](https://open-meteo.com) every 30 minutes; only the city name and coordinates are sent) · `☀️ Clear` · `🌧️ Rain` · `❄️ Snow` | |
+| Theme floors | `🎨 Pick manually` (default) or `📅 Auto by date` | |
+| Floor interior | Interior preset or theme of the floor you are viewing | |
 | Language | 한국어 / English | |
 | Shortcuts | Keyboard shortcut panel | `?` |
 
@@ -148,6 +156,8 @@ Characters are the 12 [Kenney Mini Characters](https://kenney.nl/assets/mini-cha
 
 ![Mix parts](docs/screenshots/fe-57-customize.jpg)
 
+**Theme characters**: a row of 🧛 Vampire · 🧟 Zombie · 💀 Skeleton · 👻 Ghost ([Kenney Graveyard Kit](https://kenney.nl/assets/graveyard-kit), CC0), ⛄ Snowman · 🦌 Rudolph ([Kenney Holiday Kit](https://kenney.nl/assets/holiday-kit), CC0) and ready-made 🎃 Pumpkin head · 🎅 Santa. Vampire, zombie and skeleton walk, sit, type and nod like the others and mix with other heads and bodies; snowman and Rudolph are still models that move as a whole. The accessory row adds hand-drawn **Santa hat · reindeer antlers · pumpkin mask** for anyone. Auto still uses only the 12 default characters.
+
 **My characters (your own pictures)**: click **＋ Upload PNG** or drop a file anywhere on the customizer to use a picture with a transparent background.
 
 - The transparent margin is trimmed and the long side scaled to 256 px, then stored in this browser's localStorage (several pictures, up to 24 / about 2.5 MB). Hover a tile and press **×** twice to delete it; targets using it go back to their default.

package/README.md

@@ -100,6 +100,26 @@ node bin/ai-office.js            # 또는 npm run install-hooks && npm start
 
 ![층마다 다른 사무실](docs/screenshots/fe-35-overview.jpg)
 
+**테마 층**: 🎨 메뉴 아래쪽의 **🎃 할로윈 · 🎄 크리스마스 · 🏖️ 여름휴가** 는 층 구조(편의시설)는 그대로 두고 바닥·벽·색과 소품만 바꿉니다.
+
+| 테마 | 바닥 · 벽 | 소품 |
+|---|---|---|
+| 🎃 할로윈 | 보라 체커 · 줄무늬 벽지, 보랏빛 틴트 | 호박 등불, 끓는 솥, 묘비, 촛불, 둥실 유령, 날아다니는 박쥐, 거미줄, 주황·보라 깃발 |
+| 🎄 크리스마스 | 나무 바닥 · 통나무 벽, 따뜻한 빛 | 트리(반짝이는 전구), 벽난로(불꽃·양말), 선물, 눈사람, 리스, 전구 줄 |
+| 🏖️ 여름휴가 | 데크 · 흰 판자 벽(민트 띠) | 파라솔, 선베드, 풀장, 튜브, 비치볼, 아이스박스, 서핑보드, 구명 튜브, 깃발 줄 |
+
+![크리스마스 층](docs/screenshots/fe-63-christmas.jpg)
+
+테마 층은 층 전체가 바뀝니다 — 사무실 밖 하늘(할로윈 보라 밤하늘·큰 달·박쥐 떼 / 크리스마스 눈 내리는 밤 / 여름 파란 하늘·해·구름), 칸막이까지 모든 벽의 깃발·전구 가랜드, 방마다 러그(거미줄 러그·체크 러그·비치 타월)와 할로윈 바닥 안개, 복도의 호박·촛불 / 랜턴 / 횃불.
+
+![할로윈 층](docs/screenshots/fe-63-halloween.jpg)
+
+**야외 날씨**: 야외 방이 있는 구조(테라스·옥상정원)에서는 비가 오면 바닥이 젖은 톤이 되고 빗줄기가, 눈이 오면 바닥이 하얗게 덮이고 눈송이가 내립니다. ⚙️ 설정 **야외 날씨** 를 `🌤️ 실제 날씨` 로 두고 도시 이름(`서울`, `Tokyo` …)을 적으면 [Open-Meteo](https://open-meteo.com)(키 없음, CC BY 4.0)에서 그 도시의 현재 날씨를 30분마다 받아옵니다 — 도시 이름과 좌표만 보냅니다.
+
+![옥상정원의 눈 (크리스마스 층)](docs/screenshots/fe-61-snow.jpg)
+
+트리·벽난로·솥·풀장·선베드처럼 큰 소품은 길을 막지 않을 때만 지나갈 수 없게 둡니다. ⚙️ 설정의 **테마 층** 을 `📅 날짜에 맞춰 자동` 으로 바꾸면 직접 고르지 않은 층에 그 철의 테마가 덮입니다 (10/15~11/1 할로윈 · 12/1~12/26 크리스마스 · 7/15~8/31 여름휴가). 기본은 `🎨 직접 고르기`.
+
 서브에이전트는 파란 안전모를 쓰고, Agent 도구에 적은 description 이 이름이 됩니다. 사용자 본인(`나`)은 내 자리에 앉아 있고, Claude 가 질문하거나 허락을 기다리면 그 옆으로 찾아옵니다.
 
 ## 설정 메뉴와 단축키
@@ -116,7 +136,9 @@ node bin/ai-office.js            # 또는 npm run install-hooks && npm start
 | 테마 | 라이트 / 다크 | `T` |
 | 데모 | 가짜 세션 4개를 띄워 사무실을 북적이게. 실제 세션과 별도 층이고 `(데모)` 가 붙는다 | `D` |
 | 캐릭터 외형 | 외형 모달 열기 (아래 참고) | |
-| 층 인테리어 | 지금 보는 층의 인테리어 프리셋 (층 행의 🎨 와 같음) | |
+| 야외 날씨 | 테라스·옥상정원 같은 야외 방에 비·눈. `🎄 테마에 맞춰`(기본, 크리스마스 층은 눈) · `🌤️ 실제 날씨`(아래 칸에 도시 이름 → [Open-Meteo](https://open-meteo.com) 현재 날씨, 30분마다) · `☀️ 맑음` · `🌧️ 비` · `❄️ 눈` | |
+| 테마 층 | `🎨 직접 고르기`(기본) 또는 `📅 날짜에 맞춰 자동` — 할로윈·크리스마스·여름휴가 철에 직접 고르지 않은 층을 그 테마로 | |
+| 층 인테리어 | 지금 보는 층의 인테리어 프리셋·테마 (층 행의 🎨 와 같음) | |
 | 언어 | 한국어 / English. 화면 문구·캔버스 글자·알림이 바뀐다. 세션 제목·프롬프트·Claude 메시지는 쓴 그대로 | |
 | 시간대 조명 | 실제 시각에 따라 창문·테라스·실내 빛이 아침(06~10)·낮(10~17)·저녁(17~20)·밤(20~06)으로 바뀐다. `자동` 외에 `끔` 이나 시간대 하나로 고정 가능 | |
 | 단축키 | 키보드 단축키 표 패널 | `?` |
@@ -162,6 +184,10 @@ node bin/ai-office.js            # 또는 npm run install-hooks && npm start
 
 ![파트 조합 × 동작 — 맨 오른쪽은 서브에이전트 안전모](docs/screenshots/fe-57-parts.jpg)
 
+**테마 캐릭터**: 같은 창의 테마 캐릭터 줄에서 🧛 뱀파이어 · 🧟 좀비 · 💀 해골 · 👻 유령([Kenney Graveyard Kit](https://kenney.nl/assets/graveyard-kit), CC0)과 ⛄ 눈사람 · 🦌 루돌프([Kenney Holiday Kit](https://kenney.nl/assets/holiday-kit), CC0), 추천 조합 🎃 호박 머리 · 🎅 산타를 고릅니다. 뱀파이어·좀비·해골은 걷기·앉기·타이핑·끄덕임이 그대로 되고 머리·몸을 다른 캐릭터와 섞을 수 있습니다. 눈사람·루돌프는 정지 모델이라 몸 전체를 움직여 보입니다. 소품 줄에는 직접 그린 **산타 모자 · 루돌프 뿔 · 호박 탈** 이 있어 누구에게나 씌울 수 있습니다. 자동 배정은 지금처럼 기본 12명만 씁니다.
+
+![테마 캐릭터 × 동작](docs/screenshots/fe-62-characters.jpg)
+
 **내 캐릭터 (직접 올린 그림)**: 같은 창의 **＋ PNG 올리기** 타일을 누르거나 그 위(창 어디든)에 파일을 끌어다 놓으면, 배경이 투명한 그림을 캐릭터로 씁니다.
 
 ![PNG 올리기 — 고르기 창](docs/screenshots/fe-56-customize.jpg)
@@ -229,6 +255,6 @@ npm run bump:minor   # 0.19.0 → 0.20.0
 
 릴리스: `git tag vX.Y.Z && git push origin vX.Y.Z` 를 올리면 GitHub Actions 가 맥·Windows 앱을 빌드해 Release 에 올리고(updater 용 `latest.json` 포함), Windows 러너에서 설치 → 실행 → 훅까지 확인합니다. 테스트는 push·PR 마다 Ubuntu·Windows·macOS 에서 돕니다.
 
-캐릭터 스프라이트 다시 굽기: [Kenney Mini Characters](https://kenney.nl/assets/mini-characters) 팩을 받아 풀고 `node scripts/bake-characters/bake.js <팩 폴더>` (헤드리스 크롬 + three.js CDN, 결과는 `public/assets/characters/*.webp`). 캐릭터마다 색 시트(머리 레이어 + 몸통 레이어)와 마스크 시트(머리카락·상의·하의 음영), 소품마다 시트 하나를 굽는다. 시트 구성(프레임 크기·동작 행·레이어)과 소품 위치는 `characters.js` 의 `SHEET`·`ACCESSORIES` 에서 정한다.
+캐릭터 스프라이트 다시 굽기: [Kenney Mini Characters](https://kenney.nl/assets/mini-characters) 팩을 받아 풀고 `node scripts/bake-characters/bake.js <팩 폴더>` (헤드리스 크롬 + three.js CDN, 결과는 `public/assets/characters/*.webp`). 캐릭터마다 색 시트(머리 레이어 + 몸통 레이어)와 마스크 시트(머리카락·상의·하의 음영), 소품마다 시트 하나를 굽는다. 시트 구성(프레임 크기·동작 행·레이어)과 소품 위치는 `characters.js` 의 `SHEET`·`ACCESSORIES` 에서 정한다. 테마 캐릭터는 `--graveyard <Graveyard Kit 폴더> --holiday <Holiday Kit 폴더>` 를 더한다.
 
 작업 흐름: GitHub 이슈를 `[FE-30]`, `[BE-13]`, `[APP-03]` 처럼 FE/BE/APP 으로 나눠 만들고, `main` 에서 `feature/FE-30` 식 브랜치를 분리해 작업한 뒤 결과·테스트·캡처를 이슈 댓글로 남긴다.

package/docs/ARCHITECTURE.md

@@ -168,8 +168,9 @@ public/
   index.html          3단 레이아웃 (좌 층별 안내 / 중앙 canvas / 우 사람들·로그), 상단 헤더(층·세션 제목·브랜치·LIVE)
   style.css           라이트/다크 테마 토큰, 패널 카드
   fonts/              서브셋 웹폰트 (scripts/subset-fonts.sh)
-  assets/characters/  캐릭터 스프라이트 webp: 12명 색 시트(머리·몸통 레이어) + 마스크 시트(머리카락·상의·하의 음영) + 소품 4장 (scripts/bake-characters 로 굽는다)
+  assets/characters/  캐릭터 스프라이트 webp: 12명 색 시트(머리·몸통 레이어) + 마스크 시트(머리카락·상의·하의 음영) + 소품 4장 + 테마 캐릭터 6장 (scripts/bake-characters 로 굽는다)
   js/
+    weather.js        야외 날씨 (FE-61): WMO 코드 → 비·눈, Open-Meteo 지오코딩·현재 날씨
     main.js           SSE 연결·재접속, store 갱신, 알림(소리·브라우저 알림), 설정, 키보드(1~9 층 이동)
     store.js          floors/sessions/log 미러, 선택된 층/세션, 층 접기(auto/all/none), subscribe()
     panels.js         좌·우 패널 DOM (층 목록 + 모두 펼치기/접기, 세션 목록, 사람들, 활동 로그, 범례)
@@ -187,6 +188,8 @@ public/
       pathfind.js     A* (4방향), 벽 edge 와 solid 가구 회피
       actors.js       Agent → Actor(위치, 경로, 걷기 애니, 말풍선, 슬롯 점유/해제, 휴식 방 안 배회)
       spots.js        휴식 방 명소 (레이아웃이 채우는 live 객체)
+      decorPlan.js    테마 층 소품 배치 (순수 함수, FE-60)
+      decor.js        테마 층 소품 그리기 (호박·솥·유령·박쥐·트리·벽난로·눈사람·파라솔·선베드·풀장 …)
       characters.js   캐릭터 스프라이트 (Kenney Mini Characters, CC0) 동작 프레임·안전모, 파트 조합('mix:...') 레이어·색 입히기·소품, 커스텀 그림('custom:<id>') 그리기
       render.js       바닥 → 3D AABB 깊이 정렬된 가구/벽/캐릭터 → 방 이름표·말풍선
       sprites.js      가구·벽을 코드로 그리는 함수들 (외부 이미지 없음)
@@ -238,6 +241,9 @@ public/
 - **뷰어 설정은 브라우저에**: 별명·외형·언어·테마는 localStorage. 층 인테리어처럼 모두가 같이 봐야 하는 것만 서버에 둔다.
 - **커스텀 캐릭터도 브라우저에 (FE-56)**: 올린 PNG 는 서버로 보내지 않는다. 투명 여백을 자르고 긴 변 256px 로 줄인 dataURL 을 `aiOffice.customCharacters.v1` 에 두고(최대 24장·2.5MB, 실패하면 되돌림), 고른 값은 `custom:<id>` 로 `aiOffice.characters.v1` 에 섞인다. 키를 나눠 그림 저장이 실패해도 고르기 설정은 남는다. '자동' 해시는 Kenney 12명만 쓴다. 정지 그림 한 장이라 동작은 몸 전체의 오프셋·기울기·눌림으로 보이고, 안전모 위치는 스프라이트와 같은 알파 스캔(`scanHead`)으로 찾는다.
 - **파트 조합은 굽고 겹친다 (FE-57)**: Kenney 12명은 뼈대가 같고 모델이 머리·몸통 두 덩어리라, 굽기에서 머리 레이어(몸통은 깊이만 써서 팔이 앞에 오면 머리가 잘린다)와 몸통 레이어를 따로 굽는다. 모두 같은 배율(가장 큰 캐릭터 기준)·같은 앉기 높이라 아무 머리나 아무 몸 위에 겹치면 맞는다. 색 바꾸기는 팔레트(8열×4띠) 칸으로 부위를 고른다: 피부 = 머리와 팔에 함께 쓰인 칸, 머리카락 = 머리의 그다음 넓은 칸(얼굴에 붙은 납작한 눈·입은 뺌), 상의·하의 = 몸통·팔 / 다리(신발 위)에서 가장 넓은 칸. 그 부위를 흰 알베도 × 상대 밝기로 다시 그린 음영을 마스크 시트에 두고, 그릴 때 선형 색공간에서 음영 × 새 색으로 칠한 레이어를 캐시한다(최근 16개). 소품은 원래 안경이 없는 male-f 의 머리 뼈에 붙여 구운 시트 하나를 모든 머리에 얹는다. 값은 문자열 `mix:<머리>.<몸>.<머리카락>.<상의>.<하의>.<소품>` 이라 기존 저장·정규화·대상별 설정을 그대로 탄다.
+- **테마 층은 구조 위에 덮는 스킨 (FE-60)**: 할로윈·크리스마스·여름휴가는 프리셋과 달리 레이아웃을 바꾸지 않는다. 그리는 키가 `halloween/mint` 처럼 테마/구조라, 서버는 직접 고른 값(`floor.style`)이 테마면 휴식 방 이름을 자동 프리셋(`styleAuto`) 구조로 말한다(`FS.baseOf`). 날짜 자동(설정 '테마 층')은 브라우저 설정이고 직접 고르지 않은 층에만 덮이며, 구조가 그대로라 서버의 휴식 방 말과 어긋나지 않는다. 소품 자리는 `decorPlan.js` 가 레이아웃만 보고 정하고(자리·명소·문 앞 비우기, 구석·뒷벽 우선, 벽 소품은 키 큰 바깥벽에만), `map.js` 가 큰 소품을 막아도 엘리베이터에서 모든 자리·명소에 길이 남을 때만 막는다. 그리기는 `decor.js`(평면 벡터, 반짝이·흔들리는 것만 매 프레임), 바닥 무늬·벽 색·틴트는 팔레트(`palette()`)가 테마에서 준다. 정적 엔티티 캐시는 `레이아웃|테마` 키. 층 전체 분위기(FE-63): 화면 공간 배경 하늘(`drawThemeBackdrop`, 별·달·박쥐 떼·눈송이·구름), 문 구멍 사이 벽 토막마다 가랜드(그 벽 높이에 맞춰), 방마다 러그·안개(`kind: 'flat'` 은 바닥 캐시에 그린다), 복도 빈 타일에 띄엄띄엄 소품.
+- **테마 캐릭터 (FE-62)**: Graveyard Kit 캐릭터는 뼈대 대신 부위별 메시(머리·몸통·팔·다리)로 움직이지만 동작 이름이 미니 캐릭터와 같아, 굽기에서 `head` 메시를 머리 레이어로 나눠 같은 시트 모양(머리 행 + 몸통 행)으로 굽는다(색 마스크 없음). 그래서 뱀파이어·좀비·해골은 `MIX_PARTS` 로 머리·몸 섞기에 들어간다. Holiday Kit 의 눈사람·순록은 동작이 없어 미니 캐릭터 키로 줄여 한 장을 모든 칸에 복사하고, 그릴 때 올린 그림과 같은 몸 전체 움직임(`motionOf`)을 준다. 산타 모자·루돌프 뿔·호박 탈은 굽지 않는 코스튬(`ACCESSORIES` 의 `draw`)으로 안전모처럼 프레임마다 찾은 머리 위치에 그린다(머리 레이어가 비면 몸통 레이어에서 찾는다).
+- **야외 날씨는 브라우저에서 (FE-61)**: 비·눈은 뷰어 설정(`aiOffice.weather`)이라 서버를 거치지 않는다. 실제 날씨는 브라우저가 Open-Meteo 에 직접 묻는다(키·CORS 문제 없음, 도시 이름과 좌표만): 지오코딩은 이름이 같은 작은 마을이 먼저 나오고 한글 짧은 이름('서울')이 안 잡혀, 행정구역 접미사를 붙인 후보까지 모아 인구가 가장 많은 곳을 고른다. 현재 날씨 코드(WMO)를 30분마다 받아 비·눈·맑음으로 줄이고, 지금 내릴 것은 설정·실제 날씨·층 테마(크리스마스는 기본 눈)를 합쳐 매 프레임 정한다(`effectiveWeather`). 그리기는 야외 방 위 상자 안에서 떨어지는 입자(월드 공간, 엔티티 뒤에 그려 앞을 덮음)와 바닥 톤, 비 오는 날 장면 틴트.
 - **범위**: Claude Code 훅만 받는다. claude.ai 채팅·클라우드 세션은 훅이 없어 다루지 않는다.
 
 ## 9. 보안 (BE-21)

package/lib/floorStyle.js

@@ -4,6 +4,13 @@
 // 서버는 층마다 프리셋을 정해(직접 선택 > 층 id 해시) 휴식 방 cafe/terrace 를 그 층의 편의시설 이름·아이콘·말풍선으로 바꿔 말한다.
 
 const PRESET_IDS = ['warm', 'cool', 'mint', 'lavender', 'sand', 'pastel'];
+// 테마 층 (FE-60): 직접 고를 수만 있고, 구조(휴식 방)는 그 층의 자동 프리셋을 따른다
+const THEME_IDS = ['halloween', 'christmas', 'summer'];
+const isTheme = (id) => THEME_IDS.includes(id);
+/** 직접 고를 수 있는 값인지 (프리셋 또는 테마) */
+const isChoice = (id) => PRESET_IDS.includes(id) || isTheme(id);
+/** 층의 구조를 정하는 프리셋: 테마를 골랐으면 자동 프리셋 */
+const baseOf = (floor) => (floor ? (isTheme(floor.style) ? floor.styleAuto : floor.style) : null);
 const DEMO_PRESET = 'pastel';
 const AUTO_PRESETS = PRESET_IDS.filter((id) => id !== DEMO_PRESET);   // 실제 층의 자동 배정 후보 (데모 층은 전체)
 const PRESET_LAYOUT = { warm: 'classic', cool: 'studio', mint: 'fitness', lavender: 'play', sand: 'canteen', pastel: 'classic' };
@@ -68,4 +75,4 @@ function restInfo(presetId, room) {
   return ROOM_REST[id] || { label: id, icon: '☕', bubble: '휴식 중' };
 }
 
-module.exports = { PRESET_IDS, DEMO_PRESET, AUTO_PRESETS, PRESET_LAYOUT, LAYOUT_REST, ROOM_REST, hashStr, isDemoFloor, assignPresets, restRoomIn, restInfo };
+module.exports = { PRESET_IDS, THEME_IDS, isTheme, isChoice, baseOf, DEMO_PRESET, AUTO_PRESETS, PRESET_LAYOUT, LAYOUT_REST, ROOM_REST, hashStr, isDemoFloor, assignPresets, restRoomIn, restInfo };

package/lib/state.js

@@ -33,7 +33,7 @@ function restRoomFor(sessionId) {
 /** 휴식 전이: 방·말풍선·아이콘을 세션의 휴식 장소 + 층의 편의시설(프리셋)에 맞춘다 (FE-36) */
 function rest(bubble, sessionId, floor) {
   const room = restRoomFor(sessionId);
-  const info = FS.restInfo(floor && floor.style, room);
+  const info = FS.restInfo(FS.baseOf(floor), room);
   return { room, activity: 'rest', bubble: bubble || info.bubble, icon: info.icon };
 }
 
@@ -111,7 +111,7 @@ function createState({ me = 'me', statFile = defaultStat, titleOf = defaultTitle
   // ---------- 층 인테리어 프리셋 (FE-36): 직접 선택(styleFile 에 저장) > 층 id 해시 자동 배정 ----------
   const styleOverrides = new Map(); // floorId → presetId
   if (styleFile) {
-    try { for (const [k, v] of Object.entries(JSON.parse(fs.readFileSync(styleFile, 'utf8')))) if (FS.PRESET_IDS.includes(v)) styleOverrides.set(k, v); } catch {}
+    try { for (const [k, v] of Object.entries(JSON.parse(fs.readFileSync(styleFile, 'utf8')))) if (FS.isChoice(v)) styleOverrides.set(k, v); } catch {}
   }
   function saveStyles() {
     if (!styleFile) return;
@@ -129,7 +129,7 @@ function createState({ me = 'me', statFile = defaultStat, titleOf = defaultTitle
   }
   /** 층 프리셋 직접 선택 (null 이면 자동으로). 저장하고 바뀐 층을 'floor' 로 알린다 */
   function setFloorStyle(id, preset) {
-    const p = FS.PRESET_IDS.includes(preset) ? preset : null;
+    const p = FS.isChoice(preset) ? preset : null;
     if (p) styleOverrides.set(id, p); else styleOverrides.delete(id);
     saveStyles();
     for (const f of refreshStyles()) emitter.emit('floor', publicFloor(f));
@@ -395,7 +395,7 @@ function createState({ me = 'me', statFile = defaultStat, titleOf = defaultTitle
         const a = mainAgent(s, now);
         set(a, rest(null, s.id, floor), now);
         s.status = 'idle';
-        entry = pushLog(now, floor, s, a, '✅', `${ev.lastMessage ? cut(ev.lastMessage, 60) : '작업 완료'} → ${a.icon} ${FS.restInfo(floor.style, a.room).label}`);
+        entry = pushLog(now, floor, s, a, '✅', `${ev.lastMessage ? cut(ev.lastMessage, 60) : '작업 완료'} → ${a.icon} ${FS.restInfo(FS.baseOf(floor), a.room).label}`);
         break;
       }
       case 'PreCompact': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-ai-office",
-  "version": "0.34.2",
+  "version": "0.37.1",
   "description": "Claude Code 세션 활동을 아이소메트릭 사무실로 실시간 시각화",
   "keywords": [
     "claude",

package/public/index.html

@@ -42,6 +42,9 @@
             <div class="settings-row"><span class="settings-label">데모 <kbd>D</kbd></span><button id="demo-btn" class="tool" title="가짜 세션 4개로 사무실을 북적이게 (실제 세션과 별도 층, '(데모)' 표시)">🎬 꺼짐</button></div>
             <div class="settings-row"><span class="settings-label">캐릭터 외형</span><button id="customize-btn" class="tool" title="나 / Claude / 서브에이전트 캐릭터 고르기 — 12명 중 하나 또는 머리·몸·색·소품 조합, 세션마다 자동 또는 직접 올린 PNG, 지금 보는 세션의 캐릭터 이름">👤 고르기…</button></div>
             <div class="settings-row"><span class="settings-label">시간대 조명</span><select id="daylight-select" class="tool" title="실제 시각에 따라 창문·테라스·실내 빛이 바뀝니다 (아침 06~10 · 낮 10~17 · 저녁 17~20 · 밤 20~06). 미리보기로 시간대를 고정할 수도 있어요"><option value="auto">🕒 자동 (실제 시각)</option><option value="off">끔</option><option value="morning">🌅 아침</option><option value="day">☀️ 낮</option><option value="evening">🌇 저녁</option><option value="night">🌙 밤</option></select></div>
+            <div class="settings-row"><span class="settings-label">야외 날씨</span><select id="weather-select" class="tool" title="테라스·옥상정원 같은 야외 방에 비·눈 — 테마에 맞춰는 크리스마스 층에 눈, 실제 날씨는 아래 도시의 현재 날씨(Open-Meteo, 30분마다)"><option value="theme">🎄 테마에 맞춰</option><option value="real">🌤️ 실제 날씨</option><option value="clear">☀️ 맑음</option><option value="rain">🌧️ 비</option><option value="snow">❄️ 눈</option></select></div>
+            <div class="settings-row hidden" id="weather-place-row"><span class="settings-label">날씨 도시</span><input id="weather-place" class="tool weather-place" placeholder="예: 서울, Tokyo" autocomplete="off" spellcheck="false" title="도시 이름을 적고 Enter — 도시 이름과 좌표만 Open-Meteo 로 보냅니다"><span id="weather-status" class="muted weather-status"></span></div>
+            <div class="settings-row"><span class="settings-label">테마 층</span><select id="theme-mode-select" class="tool" title="할로윈·크리스마스·여름휴가 테마 층 — 직접 고르기는 🎨 에서 층마다, 날짜에 맞춰 자동은 10/15~11/1 할로윈 · 12/1~12/26 크리스마스 · 7/15~8/31 여름휴가 (직접 고른 층은 그대로)"><option value="manual">🎨 직접 고르기</option><option value="season">📅 날짜에 맞춰 자동</option></select></div>
             <div class="settings-row"><span class="settings-label">층 인테리어</span><button id="floor-style-btn" class="tool" title="지금 보는 층의 인테리어 프리셋 (층별 안내의 🎨 와 같음) — 색과 사무실 구조가 바뀝니다">🎨 고르기…</button></div>
             <div class="settings-row"><span class="settings-label">언어</span><select id="lang-select" class="tool" title="화면 언어"><option value="ko">한국어</option><option value="en">English</option></select></div>
             <div class="settings-row"><span class="settings-label">단축키 <kbd>?</kbd></span><button id="keys-btn" class="tool" title="키보드 단축키 표">⌨️ 보기…</button></div>

package/public/js/customize.js

@@ -1,12 +1,26 @@
 // 캐릭터 고르기 모달: 대상 선택 → 12명 중 하나(Claude 계열은 '자동: 세션마다 다르게'도) 또는 올린 그림 → 걷는 미리보기 → 저장(localStorage)
 // 커스텀 캐릭터(FE-56): '＋ PNG 올리기' 타일에 파일을 고르거나 끌어다 놓으면 투명 여백을 잘라 저장하고 그 그림을 고른다.
 // 파트 바꾸기(FE-57): 머리·몸통을 다른 캐릭터 것으로, 머리카락·상의·하의 색, 얼굴 소품. 값은 'mix:...' (characters.js)
-import { ACCESSORIES, CHARACTERS, DEFAULTS, drawCharacter, isCustomCharacter, lookValue, parseLook, preloadCharacters } from './scene/characters.js';
+import { ACCESSORIES, CHARACTERS, DEFAULTS, MIX_PARTS, SPECIALS, drawCharacter, isCustomCharacter, lookValue, parseLook, preloadCharacters } from './scene/characters.js';
 import { MESSAGES, prepareImage } from './customCharacters.js';
 
 // 색 고르기 칸 (6자리 hex). 그 밖의 색은 색 고르개로
 export const HAIR_COLORS = ['2b2b30', '4a3426', '7b4a2c', 'b5793f', 'e3c16f', 'c4532f', '9aa0ad', 'f1efe8', 'e48bb4', '5b86d6'];
 export const CLOTH_COLORS = ['e8683a', 'f2b51d', '5ac487', '1f8a70', '4f7fd0', '2f3b66', '8a5cc7', 'd0507a', '2b2f3a', 'eceef3', '9aa0ad', '8b5a3c'];
+// 테마 캐릭터 줄 (FE-62): 키트 캐릭터 + 코스튬을 씌운 추천 조합
+export const THEME_LOOKS = [
+  ...SPECIALS.filter((c) => !c.still).map((c) => [c.id, c.label]),
+  ['mix:male-f.male-f.-.2b2f3a.4a3426.pumpkin', '호박 머리'],
+  ['mix:male-b.male-b.f4f4f4.d42a32.b0262e.santa', '산타'],
+  ...SPECIALS.filter((c) => c.still).map((c) => [c.id, c.label]),
+];
+/** 섞을 수 없는 머리·몸(유령·눈사람·루돌프)이 끼면 섞을 수 있게 맞춘다 */
+function fixLook(l) {
+  if (l.head === l.body) return l;
+  if (!MIX_PARTS.includes(l.body)) l.body = MIX_PARTS.includes(l.head) ? l.head : DEFAULTS.me;
+  if (!MIX_PARTS.includes(l.head)) l.head = l.body;
+  return l;
+}
 const COLOR_ROWS = [['hair', '머리카락', HAIR_COLORS], ['top', '상의', CLOTH_COLORS], ['bottom', '하의', CLOTH_COLORS]];
 
 const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
@@ -69,6 +83,8 @@ export function createCustomizer(store, avatars) {
       ${nameRow()}
       <div class="cz-group"><div class="cz-label">캐릭터${allowAuto() ? ' <span class="muted">— 자동이면 세션마다 다르게</span>' : ''}</div>
         <div class="cz-presets">${auto}${CHARACTERS.map((c) => `<button class="cz-preset ${c === draft ? 'on' : ''}" data-char="${c}" title="${c}"><canvas class="cz-thumb" data-char="${c}"></canvas></button>`).join('')}</div></div>
+      <div class="cz-group"><div class="cz-label">테마 캐릭터 <span class="muted">— 할로윈·크리스마스 (자동에는 섞이지 않음)</span></div>
+        <div class="cz-presets">${THEME_LOOKS.map(([v, label]) => `<button class="cz-preset cz-theme ${v === draft ? 'on' : ''}" data-char="${esc(v)}" title="${esc(label)}"><canvas class="cz-thumb" data-char="${esc(v)}"></canvas><span>${esc(label)}</span></button>`).join('')}</div></div>
       ${partsGroup()}
       <div class="cz-group"><div class="cz-label">내 캐릭터 <span class="muted">— 배경 없는 PNG 를 올리거나 끌어다 놓기 · 자동에는 섞이지 않음</span></div>
         <div class="cz-presets">${customs}${upload}</div>
@@ -84,7 +100,7 @@ export function createCustomizer(store, avatars) {
   function setPart(part, value) {
     const l = baseLook();
     l[part] = value || null;
-    draft = lookValue(l); armed = null;
+    draft = lookValue(fixLook(l)); armed = null;
     render();
   }
   /** 파트 바꾸기: 머리·몸통 줄(썸네일), 색 줄(원래 + 팔레트 + 색 고르개), 소품 줄 */
@@ -93,13 +109,13 @@ export function createCustomizer(store, avatars) {
     const thumb = (look, zoom) => `<canvas class="cz-thumb" data-char="${esc(lookValue(look))}"${zoom ? ` data-zoom="${zoom}"` : ''}></canvas>`;
     const tile = (part, value, on, title, inner) => `<button class="cz-preset cz-mini ${on ? 'on' : ''}" data-part="${part}" data-value="${esc(value)}" title="${esc(title)}">${inner}</button>`;
     const row = (label, inner) => `<div class="cz-partrow"><span class="cz-partlabel">${label}</span><div class="cz-presets">${inner}</div></div>`;
-    const heads = CHARACTERS.map((c) => tile('head', c, cur && cur.head === c, `${c} 의 머리`, thumb({ ...l, head: c, hair: null }, 'head'))).join('');
-    const bodies = CHARACTERS.map((c) => tile('body', c, cur && cur.body === c, `${c} 의 몸`, thumb({ ...l, body: c, top: null, bottom: null }))).join('');
+    const heads = MIX_PARTS.map((c) => tile('head', c, cur && cur.head === c, `${c} 의 머리`, thumb(fixLook({ ...l, head: c, hair: null }), 'head'))).join('');
+    const bodies = MIX_PARTS.map((c) => tile('body', c, cur && cur.body === c, `${c} 의 몸`, thumb(fixLook({ ...l, body: c, top: null, bottom: null })))).join('');
     const colors = COLOR_ROWS.map(([part, label, list]) => row(label,
       `<button class="cz-swatch cz-orig ${cur && !cur[part] ? 'on' : ''}" data-part="${part}" data-value="" title="원래 색">원래</button>`
       + list.map((c) => `<button class="cz-swatch ${cur && cur[part] === c ? 'on' : ''}" data-part="${part}" data-value="${c}" title="#${c}" style="--sw:#${c}"></button>`).join('')
       + `<label class="cz-swatch cz-pick ${cur && cur[part] && !list.includes(cur[part]) ? 'on' : ''}" title="다른 색 고르기" style="${cur && cur[part] && !list.includes(cur[part]) ? `--sw:#${cur[part]}` : ''}"><input type="color" class="cz-color" data-part="${part}" value="#${(cur && cur[part]) || list[0]}"></label>`)).join('');
-    const accs = [{ id: '', label: '없음' }, ...ACCESSORIES].map((a) => tile('acc', a.id, cur && (cur.acc || '') === a.id, a.label, `${thumb({ ...l, acc: a.id || null }, 'head')}<span>${esc(a.label)}</span>`)).join('');
+    const accs = [{ id: '', label: '없음' }, ...ACCESSORIES].map((a) => tile('acc', a.id, cur && (cur.acc || '') === a.id, a.label, `${thumb({ ...fixLook({ ...l }), acc: a.id || null }, 'head')}<span>${esc(a.label)}</span>`)).join('');
     return `<div class="cz-group"><div class="cz-label">파트 바꾸기 <span class="muted">— ${cur ? '머리·몸을 섞고 색·소품 고르기' : '지금 캐릭터에서 시작합니다'}</span></div>
       ${row('머리', heads)}${row('몸', bodies)}${colors}${row('소품', accs)}</div>`;
   }

package/public/js/floorStylePicker.js

@@ -1,5 +1,5 @@
 // 층 행의 🎨 버튼 → 인테리어 프리셋 팝오버 (FE-34). 선택은 localStorage(aiOffice.floorStyle.<floorId>) 에 남는다.
-import { PRESETS, presetById } from './scene/floorStyle.js';
+import { PRESETS, THEMES, presetById } from './scene/floorStyle.js';
 import { LAYOUTS } from './scene/layouts.js';
 
 export function createFloorStylePicker(store, book, { onChange } = {}) {
@@ -19,7 +19,9 @@ export function createFloorStylePicker(store, book, { onChange } = {}) {
     pop.innerHTML = `
       <div class="style-pop-head">🎨 ${esc(floor.no)}F 인테리어</div>
       <button class="style-opt ${chosen ? '' : 'on'}" data-preset=""><span class="style-chips">${chips(autoP)}</span><span class="style-name">자동 <span class="muted">(${esc(autoP.label)})</span></span></button>
-      ${PRESETS.map((p) => `<button class="style-opt ${chosen === p.id ? 'on' : ''}" data-preset="${p.id}"><span class="style-chips">${chips(p)}</span><span class="style-name">${p.emoji} ${esc(p.label)}<span class="style-layout">${esc(LAYOUTS[p.layout] ? LAYOUTS[p.layout].label : '')}</span></span></button>`).join('')}`;
+      ${PRESETS.map((p) => `<button class="style-opt ${chosen === p.id ? 'on' : ''}" data-preset="${p.id}"><span class="style-chips">${chips(p)}</span><span class="style-name">${p.emoji} ${esc(p.label)}<span class="style-layout">${esc(LAYOUTS[p.layout] ? LAYOUTS[p.layout].label : '')}</span></span></button>`).join('')}
+      <div class="style-pop-sub">테마 <span class="muted">— 구조는 그대로, 색과 소품만</span></div>
+      ${THEMES.map((t) => `<button class="style-opt ${chosen === t.id ? 'on' : ''}" data-preset="${t.id}"><span class="style-chips">${chips(t)}</span><span class="style-name">${t.emoji} ${esc(t.label)}</span></button>`).join('')}`;
   }
   function open(id, anchor) {
     floorId = id;

package/public/js/i18n.js

@@ -70,6 +70,18 @@ const DICT = {
   '그림이 너무 큽니다 — 한 변 8192px 이하로 올려 주세요': 'Picture is too large — each side must be 8192 px or less', '이미지를 읽지 못했습니다 — 다른 파일로 해 보세요': 'Could not read the image — try another file', '그림이 전부 투명합니다': 'The picture is fully transparent',
   '커스텀 캐릭터가 너무 많습니다 — 안 쓰는 것을 지워 주세요': 'Too many custom characters — delete ones you no longer use', '저장 공간이 부족합니다 — 안 쓰는 커스텀 캐릭터를 지워 주세요': 'Out of storage space — delete custom characters you no longer use',
   '배경이 투명하지 않은 그림이라 사각형 그대로 보입니다': 'The background is not transparent, so it shows as a rectangle', '추가했습니다 — 저장을 누르면 이 대상에 적용됩니다': 'Added — press Save to use it for this target',
+  // 야외 날씨 (FE-61)
+  '야외 날씨': 'Outdoor weather', '🎄 테마에 맞춰': '🎄 Match theme', '🌤️ 실제 날씨': '🌤️ Real weather', '☀️ 맑음': '☀️ Clear', '🌧️ 비': '🌧️ Rain', '❄️ 눈': '❄️ Snow', '날씨 도시': 'Weather city',
+  '예: 서울, Tokyo': 'e.g. Seoul, Tokyo', '도시를 적고 Enter': 'Type a city and press Enter', '받는 중…': 'Fetching…', '찾는 중…': 'Searching…', '날씨를 받지 못했습니다': 'Could not get the weather', '도시를 찾지 못했습니다 (인터넷 연결)': 'Could not look up the city (internet connection)',
+  '테라스·옥상정원 같은 야외 방에 비·눈 — 테마에 맞춰는 크리스마스 층에 눈, 실제 날씨는 아래 도시의 현재 날씨(Open-Meteo, 30분마다)': 'Rain or snow over outdoor rooms such as the terrace or rooftop garden — Match theme snows on Christmas floors, Real weather uses the current weather of the city below (Open-Meteo, every 30 minutes)',
+  '도시 이름을 적고 Enter — 도시 이름과 좌표만 Open-Meteo 로 보냅니다': 'Type a city name and press Enter — only the city name and coordinates are sent to Open-Meteo',
+  // 테마 캐릭터 (FE-62)
+  '테마 캐릭터': 'Theme characters', '— 할로윈·크리스마스 (자동에는 섞이지 않음)': '— Halloween · Christmas (never picked by auto)', '뱀파이어': 'Vampire', '좀비': 'Zombie', '해골': 'Skeleton', '유령': 'Ghost', '호박 머리': 'Pumpkin head', '산타': 'Santa', '루돌프': 'Rudolph', '눈사람': 'Snowman',
+  '산타 모자': 'Santa hat', '루돌프 뿔': 'Reindeer antlers', '호박 탈': 'Pumpkin mask',
+  // 테마 층 (FE-60)
+  '테마 층': 'Theme floors', '🎨 직접 고르기': '🎨 Pick manually', '📅 날짜에 맞춰 자동': '📅 Auto by date', '테마': 'Themes', '할로윈': 'Halloween', '크리스마스': 'Christmas', '여름휴가': 'Summer vacation',
+  '할로윈·크리스마스·여름휴가 테마 층 — 직접 고르기는 🎨 에서 층마다, 날짜에 맞춰 자동은 10/15~11/1 할로윈 · 12/1~12/26 크리스마스 · 7/15~8/31 여름휴가 (직접 고른 층은 그대로)': 'Halloween · Christmas · Summer vacation theme floors — pick per floor from 🎨, or auto by date: Halloween 10/15–11/1 · Christmas 12/1–12/26 · Summer 7/15–8/31 (floors you picked stay as they are)',
+  '— 구조는 그대로, 색과 소품만': '— same layout, new colors and decorations',
   // 파트 바꾸기 (FE-57)
   '파트 바꾸기': 'Mix parts', '— 머리·몸을 섞고 색·소품 고르기': '— mix heads and bodies, pick colors and accessories', '— 지금 캐릭터에서 시작합니다': '— starts from the current character',
   '머리': 'Head', '몸': 'Body', '머리카락': 'Hair', '상의': 'Top', '하의': 'Bottom', '소품': 'Accessory', '원래': 'Original', '원래 색': 'Original color', '다른 색 고르기': 'Pick another color',
@@ -119,6 +131,8 @@ const RULES = [
   [/^(.+) 세션을 목록에서 치우기$/, (m) => `Dismiss this ${tr(m[1])} session`],
   [/^(\d+)F (.+) 의 Claude$/, (m) => `Claude of ${m[1]}F ${m[2]}`],
   [/^(.+) \(나\)$/, (m) => `${m[1]} (me)`],
+  [/^"(.+)" 를 찾지 못했습니다$/, (m) => `Could not find "${m[1]}"`],
+  [/^(🌧️ 비|❄️ 눈|☀️ 맑음) · (\d\d:\d\d)$/, (m) => `${tr(m[1])} · ${m[2]}`],
   [/^(.+) 의 머리$/, (m) => `head of ${m[1]}`],
   [/^(.+) 의 몸$/, (m) => `body of ${m[1]}`],
   [/^🎨 (\d+)F 인테리어$/, (m) => `🎨 ${m[1]}F interior`],

package/public/js/main.js

@@ -10,7 +10,8 @@ import { initTextTips } from './texttip.js';
 import { createAvatarStore } from './avatarStore.js';
 import { createCustomizer } from './customize.js';
 import { createOverview } from './overview.js';
-import { createFloorStyleBook } from './scene/floorStyle.js';
+import { createFloorStyleBook, seasonTheme } from './scene/floorStyle.js';
+import { geocode, currentWeather, REFRESH_MS } from './weather.js';
 import { createFloorStylePicker } from './floorStylePicker.js';
 import { layoutOfPreset } from './scene/map.js';
 import { buildLayout, roomLabelIn } from './scene/layouts.js';
@@ -23,7 +24,8 @@ const tooltip = createTooltip();
 
 // ---------- 🎨 층 인테리어 (프리셋 = 색 + 사무실 구조) ----------
 const floorStyles = createFloorStyleBook(); // 층별 인테리어 프리셋 (FE-34/35): 직접 고른 것 > id 해시 자동 배정
-const styleOfFloor = (f) => floorStyles.resolve(f, store.floorsByNo());
+// 설정 '테마 층: 날짜에 맞춰 자동' 이면 직접 고르지 않은 층에 그 철의 테마(할로윈·크리스마스·여름휴가)를 덮는다 (FE-60)
+const styleOfFloor = (f) => floorStyles.resolve(f, store.floorsByNo(), store.themeMode === 'season' ? seasonTheme() : null);
 function applyFloorStyle() { scene.setFloorStyle(styleOfFloor(store.selectedFloor())); }
 // 캐릭터(createActors)보다 먼저 구독한다: 층이 바뀌면 레이아웃부터 바꾼 뒤 캐릭터를 그 레이아웃의 자리에 배치해야 한다
 store.subscribe((kind) => { if (kind === 'select' || kind === 'snapshot' || kind === 'update' || kind === 'remove') applyFloorStyle(); });
@@ -412,6 +414,56 @@ applyTheme();
 
 // ---------- 시간대 조명 (FE-33): 실제 시각으로 아침·낮·저녁·밤, 설정 행으로 고정 가능 ----------
 const daylightSel = document.getElementById('daylight-select');
+// ---------- 야외 날씨 (FE-61) ----------
+const weatherSel = document.getElementById('weather-select');
+const weatherRow = document.getElementById('weather-place-row');
+const weatherInput = document.getElementById('weather-place');
+const weatherStatus = document.getElementById('weather-status');
+const WEATHER_LABEL = { rain: '🌧️ 비', snow: '❄️ 눈', clear: '☀️ 맑음' };
+let weatherBusy = false, weatherErr = '';
+async function refreshWeather() {
+  if (store.weatherMode !== 'real' || !store.weatherPlace || weatherBusy) return;
+  weatherBusy = true;
+  try { store.setWeatherNow(await currentWeather(store.weatherPlace)); weatherErr = ''; } catch { weatherErr = '날씨를 받지 못했습니다'; renderWeather(); }
+  weatherBusy = false;
+}
+function renderWeather() {
+  if (weatherSel.value !== store.weatherMode) weatherSel.value = store.weatherMode;
+  weatherRow.classList.toggle('hidden', store.weatherMode !== 'real');
+  const p = store.weatherPlace, w = store.weatherNow;
+  if (document.activeElement !== weatherInput) weatherInput.value = p ? p.name : '';
+  weatherStatus.textContent = weatherErr || (!p ? '도시를 적고 Enter' : w ? `${WEATHER_LABEL[w.kind]} · ${new Date(w.at).toTimeString().slice(0, 5)}` : '받는 중…');
+  scene.setWeather({ mode: store.weatherMode, real: w });
+}
+weatherSel.onchange = () => { store.setWeatherMode(weatherSel.value); refreshWeather(); };
+weatherInput.addEventListener('keydown', (e) => {
+  e.stopPropagation(); // 글자 단축키가 새지 않게
+  if (e.key !== 'Enter') return;
+  e.preventDefault();
+  const q = weatherInput.value.trim();
+  if (!q) { store.setWeatherPlace(null); return; }
+  weatherStatus.textContent = '찾는 중…';
+  geocode(q, getLang()).then((p) => {
+    if (!p) { weatherErr = `"${q}" 를 찾지 못했습니다`; renderWeather(); weatherErr = ''; return; }
+    weatherErr = ''; store.setWeatherPlace(p); weatherInput.blur(); refreshWeather();
+  }).catch(() => { weatherErr = '도시를 찾지 못했습니다 (인터넷 연결)'; renderWeather(); weatherErr = ''; });
+});
+store.subscribe((kind) => { if (kind === 'option') renderWeather(); });
+renderWeather();
+refreshWeather();
+setInterval(refreshWeather, REFRESH_MS);
+
+const themeModeSel = document.getElementById('theme-mode-select');
+let appliedThemeMode = store.themeMode;
+function applyThemeMode() {
+  if (themeModeSel.value !== store.themeMode) themeModeSel.value = store.themeMode;
+  if (appliedThemeMode === store.themeMode) return;
+  appliedThemeMode = store.themeMode;
+  applyFloorStyle(); actors.sync(true); overview.invalidate(); dirty = true;
+}
+themeModeSel.onchange = () => store.setThemeMode(themeModeSel.value);
+store.subscribe((kind) => { if (kind === 'option') applyThemeMode(); });
+themeModeSel.value = store.themeMode;
 function applyDaylight() { scene.setDaylight(store.daylight); if (daylightSel.value !== store.daylight) daylightSel.value = store.daylight; }
 daylightSel.onchange = () => store.setDaylight(daylightSel.value);
 store.subscribe((kind) => { if (kind === 'option') applyDaylight(); });