(stroke)이 아니라 평범한
원형 (border)로 그리도록 맞췄다 — 47_luminis_find.js의
renderFilm() 참고. */
/* [2026-08-30 되돌림] 필름 구조를 SVG 방식(구멍이 안정적으로
잘 보이는 원본 버전)으로 복원하면서, 반짝임 링도 다시 SVG
(stroke 기반)로 그린다 — 47_luminis_find.js의 renderFilm()
참고. */
.lf-hole-glow{
stroke:#ffffff;
stroke-width:2.5;
filter:drop-shadow(0 0 4px rgba(255,255,255,0.9));
animation:lf-hole-glow-pulse 1.4s ease-in-out infinite;
}
@keyframes lf-hole-glow-pulse{
0%,100%{ opacity:0.55; stroke-width:2; }
50%{ opacity:1; stroke-width:3.5; }
}
/* [추가] 47_luminis_find.js 전용 — "필름 하단에 흰색 잘 보이도록
정답은 L에 있다 글자를 남겨줘. 기울임효과 넣어서. 퍼즐 내부
사용하는 글꼴 그대로 사용." 퍼즐 배경/노이즈 글자가 쓰는 것과
동일한 Share Tech Mono 글꼴을 그대로 사용하고, 필름과 함께
움직이도록 필름 요소(#…-film) 내부에 렌더링된다(renderFilm()
참고) — 필름 바로 아래 중앙에 고정된 위치로 표시.
[2026-08-27 수정] 요청사항 — "L 주변에 원 자체가 있는것도 확인이
될까?" — 확인 결과 이 텍스트는 필름 하단 바깥쪽에 붙는 것이라
구멍/글자 판독에는 영향 없음(별도 대응 불필요, 참고 메모). */
.lf-hint-text{
position:absolute;
left:50%;
top:100%;
transform:translate(-50%,6px);
font-family:'Share Tech Mono',monospace;
font-style:italic;
font-size:13px;
letter-spacing:0.08em;
color:#ffffff;
text-shadow:0 0 6px rgba(0,0,0,0.85),0 0 2px rgba(0,0,0,0.9);
white-space:nowrap;
pointer-events:none;
user-select:none;
}
/* [레거시] puzzle-sub-btn — 아직 mountBottomBar()로 마이그레이션되지
않은 개별 퍼즐 파일(도움말/다시하기/힌트/SKIP을 자체 HTML로
그리는 기존 방식)을 위해 당분간 유지한다. 순차적으로 각 퍼즐
파일을 옮기면서 이 블록은 점차 쓰이지 않게 될 예정이다. */
.puzzle-btn-row{display:flex;gap:6px;width:100%;}
.puzzle-sub-btn{
position:relative;overflow:hidden;outline:none;
cursor:pointer;font-family:var(--font-ui,'Noto Sans KR',sans-serif);
font-weight:600;letter-spacing:.02em;
border-radius:clamp(6px,1.8cqi,9px);
transition:transform .08s,filter .08s;
padding:0;height:var(--pz-btn-height);display:flex;align-items:center;justify-content:center;
font-size:var(--pz-btn-font-size);-webkit-tap-highlight-color:transparent;user-select:none;
background:#e0871f;
border:none;
color:#ffffff;
/* [입체감 제거] 요청사항 — "그림자 전부 없애기로 했어" */
box-shadow:none;
text-shadow:none;
}
.puzzle-sub-btn.large{flex:1.8;}
.puzzle-sub-btn.small{flex:1;font-size:var(--pz-btn-font-size);}
.puzzle-sub-btn:hover{
filter:brightness(1.06);
}
.puzzle-sub-btn:active{
transform:scale(0.97);
filter:brightness(0.9);
}
.puzzle-sub-btn:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;}
/* [제거] 요청사항 — "퍼즐 공통 버튼의 글자 중 skip 버튼만 다르거든?
아마 거기에서만 따로 - 값이 붙었던거 같아. 그거 지워서 다른
글자와 동일하게 해줘." 예전엔 SKIP 버튼(id가 "-skip-btn"으로
끝나는 모든 요소)에 font-size:9.5px !important를 전역으로 강제해서
다른 버튼(도움말/힌트/다시하기 등)보다 글자가 작게 보였다. 이제
그런 차이 없이 다른 버튼과 동일한 크기를 그대로 상속받는다(새
5버튼 구조·아직 마이그레이션 전인 다른 퍼즐 모두 동일하게 적용). */
/* [모듈화] 요청사항 — "퍼즐 내부에서 게임 성공 실패 다시하기 등등
토스트 메시지로 뜨는거 그거도 공통파일에 모듈화 해줘. 글씨 크기
색상 내용 전부 공통파일에서 수정하도록". puzzle_common.js의
_showSuccessToast()가 이 클래스 하나로 배경/테두리/글자를 모두
그린다(퍼즐 화면 상단 중앙, "알람을 껐다." "연결에 성공했다."
"다시 하기" 등). 위치 이동(fade in/out)만 JS가 .show 클래스
토글로 제어하고, 나머지 디자인은 이 블록만 고치면 모든 퍼즐에
한번에 반영된다. */
.pzc-toast{
/* [버그 수정] 요청사항 — "하단 다시하기 글자 나오고 사라짐". 기존
position:absolute는 부모(mount, 보통 #puzzle-view)의 위치·스크롤
상태에 따라 엉뚱한 곳(화면 하단 등)에 나타나는 문제가 있었다.
position:fixed로 바꿔 항상 뷰포트(화면) 기준 상단 중앙에 뜨도록
고정한다 — 부모 요소의 position/overflow와 완전히 무관해진다. */
/* [버그 수정] 요청사항 — "01,02,03번 퍼즐 토스트가 위로 올라간 것
같다 / 헤더 영역을 넘어오면 안 된다". 퍼즐 화면 진입 시 #scene-hdr
(장면이름 바)는 숨고 #header(로고 바)만 남는데, 기존 top:72px는
#scene-hdr까지 있던 상태를 기준으로 잡힌 값이라 실제로는 헤더에
더 붙어 보였다. 또한 고정 72px는 노치 기기의
env(safe-area-inset-top)을 고려하지 않아 헤더와 겹칠 수도 있었다.
헤더 높이(padding 10px+8px+안전영역+내부 컨텐츠) 아래로 항상
여유를 두도록 calc()로 안전영역을 명시적으로 더한다. */
position:fixed;
top:calc(64px + env(safe-area-inset-top)); /* 헤더 아래 + 여유(안전영역 보정) */
left:50%;
transform:translateX(-50%) translateY(-10px);
background:rgba(16,12,4,0.93);
border:1px solid rgba(180,130,40,0.5);
border-radius:10px;
padding:9px 22px;
font-family:var(--pzc-font, 'Noto Sans KR', 'Gowun Batang', sans-serif);
font-size:var(--font-b, 12px);
font-weight:700;
color:#e8d49a;
letter-spacing:1.5px;
white-space:nowrap;
box-shadow:0 4px 20px rgba(0,0,0,0.6);
z-index:300;
pointer-events:none;
opacity:0;
transition:opacity 0.3s ease, transform 0.3s ease;
}
.pzc-toast.show{
opacity:1;
transform:translateX(-50%) translateY(0);
}
/* [모듈화] 요청사항 — "상단 우측에 나오는 타이머 경우는 공통파일에
있나? 디자인 수정 한번에 되나해서". puzzle_common.js의 타이머
기능(opts.timer)이 만드는 숫자 표시 요소의 폰트/글자크기/자간
디자인을 이 클래스 하나로 전담한다 — 위치(top/right 등)와 위험
구간 색상만 퍼즐별로 JS가 인라인으로 지정하고, 나머지는 이
블록만 고치면 모든 퍼즐의 타이머 디자인이 한번에 바뀐다. */
.pzc-timer{
font-family:'Share Tech Mono',monospace;
font-size:var(--font-a, 14px);
color:rgba(212,168,76,0.65);
letter-spacing:1px;
pointer-events:none;
z-index:50;
transition:color 0.3s;
}
/* [2026-08-30 신설] 퍼즐모드 전용 상단 스톱워치 — 요청사항 —
"퍼즐모드에서 01번 불러오면 상단 중앙에 둥근사각배경으로 타이머좀
넣어줘. 소수점 2자리까지 나오는 숫자. 시간 흐르는거." 다른 퍼즐
에서도 그대로 재사용되는 공통 클래스(puzzle_common.js의
_pmEnsureStopwatchEl()이 생성) — 여기 디자인만 고치면 모든 퍼즐의
퍼즐모드 스톱워치가 한번에 바뀐다. */
/* [2026-09-06 수정] 요청사항 — "타이머를 헤더 중앙에 붙여줘." 이제
이 배지는 #header-center-slot(flex; justify-content:center) 안에
일반 흐름으로 들어가므로 position:absolute/top/left/transform이
더 이상 필요 없다 — 부모의 flex 정렬이 중앙 배치를 대신 처리한다.
구버전 index.html(그 슬롯이 없는 경우)에서는 puzzle_common.js가
기존 방식(퍼즐 컨테이너 내부)으로 폴백해 붙이므로, 그 경로에서도
보기 흉하지 않도록 크기/색/폰트 등 디자인 속성은 그대로 둔다. */
.pzc-pmstopwatch{
padding:4px 14px;
border-radius:12px;
background:rgba(10,10,14,0.55);
border:1px solid rgba(212,168,76,0.35);
backdrop-filter:blur(3px);
font-family:'Share Tech Mono',monospace;
font-size:var(--font-a, 14px);
font-weight:700;
letter-spacing:1px;
color:#f0e6c8;
pointer-events:none;
white-space:nowrap;
}
/* pzc-skip-wrap / pzc-skip-toast — SKIP 딜레이 타이머용 말풍선 (puzzle_common.js 동적 생성) */
.pzc-skip-wrap{position:relative;}
.pzc-skip-toast{
position:absolute;
left:50%;
bottom:calc(100% + 10px);
transform:translateX(-50%);
background:rgba(16,12,4,0.93);
border:1px solid rgba(180,130,40,0.5);
border-radius:8px;
padding:4px 10px;
font-family:var(--pzc-font, 'Noto Sans KR', 'Gowun Batang', sans-serif);
font-size:11px;
font-weight:700;
color:#e8d49a;
letter-spacing:.5px;
white-space:nowrap;
box-shadow:0 3px 12px rgba(0,0,0,.55);
pointer-events:none;
z-index:5;
animation:pzc-skip-toast-float 2.2s ease-in-out infinite;
}
.pzc-skip-toast::after{
content:'';
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
border:5px solid transparent;
border-top-color:rgba(180,130,40,0.5);
}
@keyframes pzc-skip-toast-float{
0%,100%{ transform:translateX(-50%) translateY(0); }
50%{ transform:translateX(-50%) translateY(-5px); }
}
/* ══ 팝업 공통 (cpz) ══ */
/* ══ 퍼즐 팝업 공통 (cpz) ══ */
.cpz-popup-overlay{
visibility:hidden;
opacity:0;
pointer-events:none;
position:fixed;inset:0;
background:transparent;
z-index:300;
display:flex;
align-items:center;justify-content:center;padding:20px;
transition:opacity 0.15s ease, visibility 0.15s ease;
will-change:opacity;
}
.cpz-popup-overlay.show{
visibility:visible;
opacity:1;
pointer-events:auto;
/* [수정] 요청사항 — "가방에서 퍼즐 열 때 카운트다운 98%(92%)
투명도를 100%로 바꾼 것처럼, 도움말 창 뜰 때도 동일하게 해줘.
퍼즐 시작하자마자 깜박거린다." 기존 60%(rgba(...,.6))는 40%
투명이라, #puzzle-view/#item-puzzle-body 안에서 별도로 깔아주는
완전 불투명 ::before 레이어가 없는 곳(또는 그 레이어가 아직 덜
그려진 찰나)에서는 뒤가 옅게 비쳐 깜박이는 것처럼 보일 수
있었다. 완전 불투명(100%)으로 바꿔 그 레이어 유무와 무관하게
항상 확실히 가리도록 한다. */
background:rgba(0,0,0,1);
}
/* puzzle-view 또는 item-puzzle-body 안에서만 게임 화면 완전 암전
(헤더/하단 패널은 그대로) — item-puzzle-body는 아이템/오브젝트
액션에서 여는 퍼즐(item_actions.js)의 마운트 위치, 이게 빠지면
도움말 뒤로 게임 화면(광원/그림자 등)이 비쳐 보이는 문제가 생김 */
#puzzle-view .cpz-popup-overlay.show::before,
#item-puzzle-body .cpz-popup-overlay.show::before{
content:'';
position:absolute;inset:0;
background:rgba(6,6,4,1);
z-index:-1;
animation:cpzMaskIn .18s ease forwards;
}
@keyframes cpzMaskIn{from{opacity:0;}to{opacity:1;}}
.cpz-popup-box{
background:linear-gradient(160deg,#2a2418 0%,#1e1a10 100%);
border:2px solid #8a6830;border-radius:8px;
padding:28px 22px 20px;max-width:310px;width:100%;
display:flex;flex-direction:column;align-items:center;gap:16px;
box-shadow:0 0 0 1px #4a3010,0 8px 40px rgba(0,0,0,.85),inset 0 1px 0 rgba(220,180,90,.08);
animation:cpzPopIn .18s ease;
will-change:transform,opacity;
transform:translateZ(0);
}
@keyframes cpzPopIn{from{opacity:0;transform:scale(.94) translateY(8px);}to{opacity:1;transform:none;}}
.cpz-popup-label{
/* [폰트 통일] 요청사항 — "팝업창 내부 제목 글꼴도 통일시켜줘. 색상만
그대로, 크기도 맞춰주고. 자간이나 글자 변형 없이 기본으로".
공통 버튼(.pzc-bar-btn)과 동일한 폰트(--font-pz-btn)+굵기(bold)로
통일. letter-spacing/text-transform(자간·글자 변형)은 제거해
기본값으로 되돌림. 색상(#b8902e)만 기존 그대로 유지.
[크기 조정] 요청사항 — "팝업내부 +2 한거 +1로 줄여줘". 제목·설명
모두 공통버튼 크기(--pz-btn-font-size)에서 +1px로 통일했었다.
[2026-08-24 재조정] 요청사항 — "글자가 더 잘 안보이는데... 팝업
내부 글자 +1 크기 해주고." +1px → +2px(원본 +1px 주석 보존).
[2026-08-24 폰트 교체 → 되돌림] 한때 진짜 700 파일
(NanumSquareRoundB, --font-pz-popup-bold)로 바꿨다가, "L+bold로
다시 돌려놓자" 요청에 따라 원래대로 --font-pz-btn
(NanumSquareRoundL + 합성 볼드)으로 되돌린다. */
font-family:var(--font-pz-btn,'Noto Sans KR',sans-serif);font-weight:bold;
font-size:calc(var(--pz-btn-font-size) + 2px);/* 원본:+1px */color:#b8902e;
}
.cpz-popup-close-btn{
/* [폰트 통일] 요청사항 — "폰트 크기 굵기 종류 색상도 전부 공통버튼과
통일". 공통 버튼(.pzc-bar-btn)과 동일한 --font-pz-btn + font-weight
bold로 통일(기존엔 --font-ui + 600이라 서체가 미묘하게 달랐음).
[2026-08-24 폰트 교체 → 되돌림] 위 .cpz-popup-label과 동일 —
L+bold로 되돌림. */
font-family:var(--font-pz-btn,'Noto Sans KR',sans-serif);font-weight:bold;
color:#ffffff;letter-spacing:.02em;
/* [색상 통일] 요청사항 — "퍼즐 공통 버튼 눌러 나오는 팝업을 보면
취소가 빨간색이고 그러던데?" 예전엔 취소 버튼만 빨간 계열
(#a24940)로 따로 강조돼 있었는데, "계속하기" 버튼과 완전히
동일한 스타일로 통일해달라는 요청에 맞춰 배경/그림자 색도 오렌지
계열로 맞춘다.
[입체감 제거] 요청사항 — "그림자 전부 없애기로 했어" */
background:#e0871f;
border:none;border-radius:clamp(6px,1.8cqi,9px);
cursor:pointer;transition:transform .08s,filter .08s;width:100%;text-align:center;
text-shadow:none;
box-shadow:none;
/* [원복] 요청사항 — "팝업 내부 버튼 크기는 원래대로 해줘". 88%로
축소했던 걸 되돌려 공통 버튼과 동일한 --pz-btn-height 그대로 사용. */
padding:0;height:var(--pz-btn-height);display:flex;align-items:center;justify-content:center;
font-size:var(--pz-btn-font-size);
}
.cpz-popup-close-btn:hover{filter:brightness(1.06);}
.cpz-popup-close-btn:active{transform:scale(0.97);filter:brightness(0.9);}
.cpz-continue-btn{
/* [2026-08-24 폰트 교체 → 되돌림] 위 .cpz-popup-label과 동일 —
L+bold로 되돌림. */
font-family:var(--font-pz-btn,'Noto Sans KR',sans-serif);font-weight:bold;letter-spacing:.02em;
color:#ffffff;
background:#e0871f;
border:none;border-radius:clamp(6px,1.8cqi,9px);
cursor:pointer;transition:transform .08s,filter .08s;width:100%;text-align:center;
text-shadow:none;
box-shadow:none;
/* [통일] 요청사항 — "다시하기, 힌트, skip 눌렀을 때 나오는 팝업의
버튼 크기와 색, 글꼴, 글자색 등을 도움말 팝업의 '계속하기' 버튼과
동일하게". 배경/글자색은 이미 .puzzle-sub-btn과 같았지만, 높이
(padding 기반 vs 고정 height)와 글자 크기 변수가 서로 달라
팝업마다 버튼 크기가 미묘하게 다르게 보였다. .puzzle-sub-btn과
동일한 높이/폰트 크기 변수를 그대로 가져와 완전히 통일한다.
[입체감 제거] 요청사항 — "그림자 전부 없애기로 했어"
[원복] 요청사항 — "팝업 내부 버튼 크기는 원래대로 해줘". */
padding:0;height:var(--pz-btn-height);display:flex;align-items:center;justify-content:center;
font-size:var(--pz-btn-font-size);
}
.cpz-continue-btn:hover{filter:brightness(1.06);}
.cpz-continue-btn:active{transform:scale(0.97);filter:brightness(0.9);}
.cpz-help-body{display:flex;flex-direction:column;gap:12px;width:100%;}
.cpz-help-section{
/* [2026-08-24 수정 → 되돌림] 요청사항 — "글자 뒤 배경도 검정으로
바꿔줘." 완전 불투명 검정(#000000)으로 바꿨었으나, 이후 "다시
원래대로 바꿔줘" 요청에 따라 원본 rgba(0,0,0,.25)(연한 반투명
검정)로 되돌린다. 참고로 팝업 폰트를 진짜 700 파일
(NanumSquareRoundB, --font-pz-popup-bold)로 교체한 상태라, 대비
문제는 검정 배경이 아니라 그쪽에서 개선된 상태다. */
background:rgba(0,0,0,.25);border:1px solid rgba(200,160,60,.18);
border-radius:5px;padding:13px 15px;display:flex;flex-direction:column;gap:8px;
}
/* CONTROLS 섹션(두 번째 section) 숨김 */
.cpz-help-body .cpz-help-section:nth-child(2){ display:none; }
.cpz-help-section-title{
display:none;
}
.cpz-help-rule{
/* [폰트/크기/굵기 통일] 요청사항 — "설명도 통일해야해" → "제목 설명
같도록 +2로 해줘". 제목(.cpz-popup-label)과 완전히 동일하게
공통버튼 폰트(--font-pz-btn)+굵기(bold)+크기(--pz-btn-font-size
+ 2px)로 통일했었다.
[2026-08-24 재조정 → 되돌림] 요청사항 — "내용이 너무 굵어서 얇게
해줘." 당시엔 --font-pz-btn(NanumSquareRoundL)이 Bold 전용
파일이 없어 font-weight:bold가 가짜 볼드(합성 볼드)로 렌더링돼
실제보다 두껍게 보였고, 그래서 font-weight를 normal로 낮췄었다.
[2026-08-24 폰트 교체 → 재차 되돌림] 한때 진짜 700 파일
(NanumSquareRoundB)로 바꿨다가 "L+bold로 다시 돌려놓자" 요청에
따라 --font-pz-btn(NanumSquareRoundL) + font-weight:bold(합성
볼드) 조합으로 최종 복원한다.
[2026-08-24 재조정] 요청사항 — "글자가 더 잘 안보이는데... 팝업
내부 글자 +1 크기 해주고." +1px → +2px(원본 +1px 주석 보존).
[2026-08-24 재조정] 요청사항 — "03번 퍼즐(destination_puzzle) 힌트
팝업 글자가 다른 퍼즐(13px)보다 크게(15px) 나온다" — 이 클래스가
.cpz-help-desc와 같은 "설명" 취급을 못 받고 +2px 그대로 남아있던
것이 원인이었다. .cpz-help-desc와 동일하게 +2px → +1px로 맞춘다. */
font-family:var(--font-pz-btn,'Noto Sans KR',sans-serif);font-weight:bold;
font-size:calc(var(--pz-btn-font-size) + 1px);color:#ffffff;
line-height:2.2;text-align:center;letter-spacing:2px;
}
.cpz-help-rule .on{color:#d4a83c;}
.cpz-help-rule .off{color:#6a5630;}
.cpz-help-desc{
/* [폰트/크기/굵기 통일] 요청사항 — "설명도 통일해야해" → "제목 설명
같도록 +2로 해줘". 제목(.cpz-popup-label)과 완전히 동일하게
공통버튼 폰트(--font-pz-btn)+굵기(bold)+크기(--pz-btn-font-size
+ 2px)로 통일했었다.
[2026-08-24 재조정 → 되돌림 → 재차 되돌림] 위 .cpz-help-rule과
동일한 흐름(normal → 진짜 Bold+bold → "L+bold로 다시" 요청에
따라 최종적으로 --font-pz-btn + font-weight:bold(합성 볼드)로
복원).
[2026-08-24 재조정] 요청사항 — "팝업 내부 글자 +1 크기 해주고."
+1px → +2px(원본 +1px 주석 보존).
[2026-08-24 재조정] 요청사항 — "설명 부분의 글자 크기를 1 줄여줘."
+2px → +1px로 되돌림. */
font-family:var(--font-pz-btn,'Noto Sans KR',sans-serif);font-weight:bold;
font-size:calc(var(--pz-btn-font-size) + 1px);
color:#ffffff;line-height:1.9;text-align:center;letter-spacing:.3px;
}
/* ══ 카운트다운 ══ */
@keyframes cpzCountPop{
0% {opacity:0;transform:scale(1.5);}
20% {opacity:1;transform:scale(1.0);}
70% {opacity:1;transform:scale(1.0);}
100%{opacity:0;transform:scale(.7);}
}
.cpz-countdown-ov{
display:none;position:fixed;inset:0;z-index:200;
align-items:center;justify-content:center;
/* [수정] 요청사항 — "가방에서 06번 열 때, 카운트다운 도중 하단
닫기 버튼이 흐릿하게 비쳐 보인다. 배경 검정에 투명도를 빼줘."
기존 92%(rgba(...,.92))는 8% 투명이라, 이 오버레이 뒤에 있는
요소가 옅게 비쳐 보일 수 있었다(가방 경로 전용 틀에서만
증상이 보였음 — 정식 진행 경로는 겹치는 층 구조가 달라 92%로도
티가 안 났던 것으로 보임). 완전 불투명(100%)으로 바꿔 어느
경로에서 열리든, 뒤에 무엇이 있든 확실히 안 비치게 한다. */
background:rgba(5,5,12,1);
will-change:opacity;
transform:translateZ(0);
/* [버그 수정] 요청사항 — "카운트다운 뜰때 게임영역이 이미 진행
중인가? 클릭하니까 카운트다운 숫자가 깜박거리는데?" 원인: 이
오버레이가 화면을 시각적으로는 덮지만 pointer-events를 지정하지
않아(기본값 auto라 사실 막고는 있었으나) puzzle_common.js의
runCountdown()이 이 오버레이와 별개로 만드는 임시 오버레이가
pointer-events:none이라, 두 오버레이의 z-index 관계와 클릭 통과
여부가 퍼즐마다 다르게 겹칠 수 있었다. 여기서 명시적으로
pointer-events:auto를 지정해, 카운트다운이 떠 있는 동안(.show)은
뒤쪽 게임 영역의 클릭/터치가 절대 전달되지 않도록 확실히 막는다. */
pointer-events:auto;
}
.cpz-countdown-ov.show{display:flex;}
.cpz-countdown-num{
font-family:'Impact','Anton',sans-serif;font-weight:900;font-size:96px;
color:#c49030;
text-shadow:
0 0 14px rgba(180,130,40,.55),0 0 36px rgba(160,110,20,.25),
0 4px 0 rgba(60,30,0,.85),0 6px 12px rgba(0,0,0,.65);
animation:cpzCountPop 1s ease forwards;line-height:1;letter-spacing:2px;
will-change:transform,opacity;
transform:translateZ(0);
}
/* 퍼즐 내 패딩 래퍼 */
#pz-body > div{padding:8px 8px;display:flex;flex-direction:column;flex:1;}
/* 토스트 */
#toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) translateY(-4px);background:rgba(8,8,20,0.95);border:1px solid rgba(212,168,76,0.25);padding:7px 16px;border-radius:2px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:0.14em;color:var(--gold);opacity:0;transition:opacity 0.22s,transform 0.22s;pointer-events:none;z-index:500;white-space:nowrap;}
#toast.show{opacity:1;transform:translate(-50%,-50%) translateY(0);}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* 모바일 미디어쿼리 */
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
/* 모바일 폰트 축소 */
@media(max-width:480px){
:root{
--font-tab-label: 10px;
--font-tab-icon: 22px; /* 아이콘은 패딩 확대와 함께 더 크게 (라벨은 축소 유지) */
--font-obj-label: 9px;
--font-log-body: 12px;
--font-archive-note: 14px;
}
/* 모바일: 헤더/탭바 세로 크기 키우기 */
#header{padding:16px 16px 14px;padding-top:calc(16px + env(safe-area-inset-top));}
.tb{padding:22px 0 20px !important;}
/* 조사수첩 팝업 — 좁은 화면에서 프레임 여백/제목 여백도 함께 축소 */
#archive-note-frame{padding:24px 18px 18px;}
#archive-note-title{margin-bottom:10px;padding-bottom:8px;}
#archive-note-close{font-size:16px;padding:5px;}
}
/* ── 낮은 화면 높이 대응 (노트북 125% 확대, 가로형 등) ──
노트북에서 브라우저 확대율 125% 적용 시 실제 레이아웃 높이가
600px 이하로 줄어드는 경우를 px 기반 max-height 미디어쿼리로 처리.
dvh는 OS/브라우저 확대율에 따라 기대와 다르게 계산될 수 있어 사용하지 않음. */
@media(max-height:700px){
/* msg-body 패딩 축소 */
#msg-body{padding:16px 24px 60px !important;}
/* 선택지 버튼 — 높이+글자 축소 */
.cb,.cb.pri,.sb{height:33px !important;min-height:33px !important;}
/* 탭바 축소 */
.tb{padding:10px 0 9px !important;}
:root{ --font-tab-icon: 16px; --font-archive-note: 14px; }
/* scene-hdr 패딩 */
#scene-hdr{padding:7px 14px !important;}
/* 조사수첩 팝업 — 낮은 화면에서 프레임 여백도 함께 축소해 내용이 잘리지 않게 */
#archive-note-frame{padding:20px 18px 16px !important;max-height:88vh;}
#archive-note-title{margin-bottom:8px !important;padding-bottom:6px !important;}
}
@media(max-height:580px){
#msg-body{padding:12px 20px 52px !important;}
.cb,.cb.pri,.sb{height:29px !important;min-height:29px !important;}
.tb{padding:8px 0 7px !important;}
:root{ --font-tab-icon: 14px; --font-tab-label: 9px; --font-sbb: 12px; --font-archive-note: 13px; }
#scene-hdr{padding:5px 14px !important;}
/* 조사수첩 팝업 — 더 낮은 화면에서 한 번 더 축소 */
#archive-note-frame{padding:16px 14px 14px !important;max-height:92vh;}
#archive-note-title{margin-bottom:6px !important;padding-bottom:5px !important;}
#archive-note-close{font-size:15px !important;padding:4px !important;}
}
@media(max-height:460px){
#msg-body{padding:8px 16px 46px !important;}
.cb,.cb.pri,.sb{height:26px !important;min-height:26px !important;}
.tb{padding:6px 0 !important;}
:root{ --font-tab-label: 9px; --font-tab-icon: 13px; --font-sbb: 11px; }
}
/* 종료 확인 팝업 — 오버레이(배경 딤/블러)만 여기서 담당하고, 내부
박스/텍스트/버튼 디자인은 공용 클래스(.pop-card/.pop-title/
.pop-desc/.settings-popup-btn, style.css 상단 참고)로 통일했다
(요청사항 — "디자인 통일"). */
#exit-popup{
display:none;position:absolute;inset:0;
background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);
/* [수정] 요청사항 — "퍼즐 접어두기를 누르면... 상단좌측 로고
눌렀을 때 뜨는 팝업까지도 막아버리네." #minimize-block(퍼즐
접어두기 시 scene-view 클릭 차단용, z-index:999)이 이 팝업
(기존 z-index:500)보다 높아서 팝업이 화면엔 보여도 클릭이
막혔다. #minimize-block을 건드리지 않고, 이 팝업 쪽을 그보다
높게 올려 항상 위에서 클릭 가능하게 한다. */
justify-content:center;align-items:center;z-index:1000;
padding:20px;box-sizing:border-box;
}
#exit-popup.show{display:flex;}
#exit-popup-box{
width:100%;max-width:300px;text-align:center;
}
.fade-out{animation:fo 0.25s ease forwards;}
@keyframes fo{to{opacity:0;}}
/* 엔딩 씬 헤더 — 배드 엔딩 강조 */
#scene-hdr.ending .hdr-badge {
border-color: #8b1a1a;
background: rgba(139, 26, 26, 0.2);
color: #9b2d6e;
}
#scene-hdr.ending .hdr-title {
color: #9b2d6e;
}
/* 인터루드 (챕터 전환) */
#interlude-ov{
display:none;
position:fixed;inset:0;z-index:500;
background:#000;
flex-direction:column;align-items:center;justify-content:center;
text-align:center;padding:40px;gap:16px;
will-change:opacity;
transform:translateZ(0);
}
#interlude-ov.show{display:flex;}
#interlude-ov.fade-in{animation:ilvFadeIn 1.2s ease forwards;}
#interlude-ov.fade-out{animation:ilvFadeOut 0.8s ease forwards;}
/* 인터루드 전용 전체화면 오버레이 (카운트다운과 동일한 구조) */
#ilv-ov{
display:none;
position:fixed;inset:0;
z-index:600;
background:rgba(5,5,12,1);
flex-direction:column;
align-items:center;justify-content:center;
text-align:center;
padding:40px;
gap:20px;
will-change:opacity;
transform:translateZ(0);
}
#ilv-ov.show{display:flex;}
#ilv-msg{
display:flex;flex-direction:column;
align-items:center;gap:6px;
width:100%;padding:0 32px;box-sizing:border-box;
will-change:opacity;
transform:translateZ(0);
}
/* ilv-msg 안의 mp — 기본 .mp 스타일 그대로 사용, 인터루드용 최소 재정의만 */
#ilv-msg .mp{
text-align:center !important;
text-indent:0 !important;
padding:0 !important;
border:none !important;
}
#ilv-msg .mp.narrc{
text-align:center !important;
text-indent:0 !important;
padding:0 !important;
}
#ilv-msg .mp.narr{
text-align:center !important;
text-indent:0 !important;
padding:0 !important;
border:none !important;
}
#ilv-msg .mp.scene{
text-align:center !important;
text-indent:0 !important;
padding:0 !important;
}
#ilv-tap{
display:none;
position:fixed;
top:70%;left:50%;
transform:translateX(-50%);
z-index:9999;
pointer-events:none;
white-space:nowrap;
}
#ilv-tap.visible{display:block;}
@keyframes ilvFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes ilvFadeOut{from{opacity:1;}to{opacity:0;}}
.ilv-line{
font-family:'Gowun Batang',serif;
font-size:clamp(16px, 4vw, 26px);
color:#ffffff;
letter-spacing:3px;
line-height:1.7;
opacity:0;animation:ilvLineFade 0.8s ease forwards;
}
.ilv-line.gold{color:var(--gold);font-size:clamp(14px,3.2vw,20px);letter-spacing:4px;}
.ilv-line.small{color:rgba(255,255,255,0.65);font-size:clamp(13px,2.8vw,17px);}
@keyframes ilvLineFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
/* ── 설정 팝업 토글 스위치 */
.settings-toggle{
width:48px;height:26px;
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.15);
border-radius:13px;
position:relative;cursor:pointer;
transition:background .22s,border-color .22s;
flex-shrink:0;
}
.settings-toggle.on{
background:#3a68bc;
border-color:rgba(100,160,255,0.5);
}
.settings-toggle-knob{
position:absolute;top:2px;left:2px;
width:20px;height:20px;
background:#fff;border-radius:50%;
box-shadow:0 1px 4px rgba(0,0,0,0.4);
transition:transform .22s;
}
.settings-toggle.on .settings-toggle-knob{transform:translateX(22px);}
@media(max-height:800px){
.cb,.cb.pri,.sb{height:33px !important;min-height:33px !important;}
}
@media(max-width:480px){
.cb,.cb.pri{height:clamp(32px,9vw,40px) !important;min-height:clamp(32px,9vw,40px) !important;}
.sb{height:clamp(32px,9vw,40px) !important;}
:root{
--font-tab-label: clamp(9px,2.5vw,11px);
--font-tab-icon: clamp(18px,5vw,24px);
}
#header{padding:16px 16px 14px;padding-top:calc(16px + env(safe-area-inset-top));}
.tb{padding:clamp(16px,5vw,22px) 0 clamp(14px,4.5vw,20px) !important;}
}
/* ── 퍼즐 글자 크기: puzzle_common.js의 --pzc-content-font-size 시스템으로 통합됨 ── */
/* (이전의 --pz-text-size 강제 셀렉터 블록은 더 이상 필요하지 않아 제거됨.
각 퍼즐 CSS가 var(--pzc-content-font-size) / var(--pzc-font-size)를 직접 사용한다.) */
/* ── settings 숫자 버튼 공통 ── */
.settings-num-btn {
flex:1; height:32px; border-radius:4px;
font-family:'Share Tech Mono',monospace; font-size:12px; font-weight:700;
cursor:pointer; transition:background .15s,border-color .15s,color .15s;
background:rgba(212,168,76,0.05);
border:1px solid rgba(212,168,76,0.2);
color:rgba(212,168,76,0.5);
}
.settings-num-btn.active {
background:rgba(212,168,76,0.22);
border-color:rgba(212,168,76,0.7);
color:var(--gold);
}
/* 요청사항 — "글자 크기 1 2 3 4 5 버튼을 작게해서 퍼즐 텍스트 크기
글자 우측에 넣어줘." 기존 .settings-num-btn(flex:1, height:32px)은
한 줄 전체 폭을 5등분하는 큰 버튼이었는데, 이제 라벨과 같은 줄
오른쪽에 좁게 들어가야 하므로 고정된 작은 크기로 별도 클래스를
뒀다. */
.settings-num-btn-sm {
flex:none; width:22px; height:22px;
font-size:10px;
border-radius:3px;
}
/* ── 스토리 텍스트 크기 CSS 변수 적용 ── */
:root { --story-text-size: 17px; }
.mp { font-size: var(--story-text-size) !important; }
.mp.narr { font-size: var(--story-text-size) !important; }
.mp.narrc { font-size: var(--story-text-size) !important; }
.mp.mono { font-size: var(--story-text-size) !important; }
/* ══════════════════════════════════════════════════════════════
게임 화면 온보딩 가이드 (요청사항) — p1 씬에 처음(또는 아직
game_screen_guide_seen이 아닌 상태로) 도달했을 때, 화면 렌더링이
끝난 뒤 그 위에 단계별로 상단 챕터/장면명 · 저장 표시 · 상단
이미지/오브젝트 영역 · 하단 스토리 영역 · 탭바를 순서대로 짚어
주고, 마지막으로 화면 중앙에 "루미니스 시작" 확인 화면을 보여준다.
게이지 퍼즐(44_afterimage.js 등)의 온보딩 가이드와 완전히
같은 톤(스포트라이트 + 카드 + 다음 버튼)으로 맞췄다.
화면 전체를 대상으로 하므로 컨테이너에 종속되지 않는 position:fixed
레이어로 만든다(게이지 퍼즐은 퍼즐 컨테이너 내부용이라 absolute였지만,
이번엔 body 전체가 대상이라 fixed가 더 안전하다 — 별도 relative
부모가 필요 없다).
══════════════════════════════════════════════════════════════ */
#game-guide-ov{
position:fixed;inset:0;z-index:900;display:none;
/* [버그 수정] pointer-events:none이면 오버레이 자체는 클릭을
가로채지 않고 그대로 통과시켜서, 스포트라이트 대상이 아닌 뒷배경
요소(탭바, 씬 선택지 등)를 가이드가 떠 있는 동안에도 그대로 누를
수 있었다(요청사항으로 확인된 버그 — "가이드 확인 버튼 외에는
못 누르게 막아줘야 하는데 그게 안 됨"). auto로 바꿔 오버레이
자체가 배경 클릭을 막고, 카드(다음 버튼)만 그 안에서
pointer-events:auto로 다시 열어 누를 수 있게 한다.
스포트라이트 대상 요소는 처음부터 실제 요소가 아니라 시각 효과일
뿐이라(box-shadow로 그린 사각형) 그 위를 눌러도 오버레이가
이미 클릭을 가로챈다 — 즉 가이드가 떠 있는 동안은 카드의 [다음]
버튼 외에는 아무 것도 눌리지 않는다. */
pointer-events:auto;
}
#game-guide-ov.show{ display:block; }
#game-guide-spot{
position:absolute;border-radius:10px;
box-shadow:0 0 0 2000px rgba(4,4,8,0.6), 0 0 0 2px rgba(244,208,104,0.95), 0 0 20px rgba(244,208,104,0.75);
transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
pointer-events:none;
}
#game-guide-card{
position:absolute;width:min(280px, calc(100vw - 32px));
background:rgba(18,14,8,0.97);border:1px solid rgba(244,208,104,0.5);
border-radius:12px;padding:14px 16px;
box-shadow:0 8px 24px rgba(0,0,0,0.5);
transition:left .25s ease, top .25s ease, width .25s ease;
pointer-events:auto;
}
#game-guide-text{
font-family:var(--font-ui);
font-size:13px;line-height:1.6;
color:rgba(245,240,225,0.95);
}
#game-guide-step{
font-family:'Share Tech Mono',monospace;
font-size:11px;
color:rgba(244,208,104,0.85);letter-spacing:0.05em;margin-bottom:6px;
}
#game-guide-foot{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
margin-top:12px;
}
#game-guide-next{
padding:7px 16px;border-radius:8px;border:none;cursor:pointer;
font-family:var(--font-ui);font-weight:700;
font-size:12px;color:#2a1c08;
background:linear-gradient(180deg,#f4d068 0%,#c99a3a 100%);
box-shadow:0 2px 0 #8a6e1f;
flex-shrink:0;white-space:nowrap;
}
#game-guide-next:active{ transform:translateY(1px); }
/* ══════════════════════════════════════════════════════════════
01번(clock) 퍼즐 온보딩 가이드 (요청사항 — "01번 퍼즐이 첫번째
퍼즐이라서 가이드를 만들어야겠어"). 위 게임 화면 가이드
(#game-guide-*)와 완전히 동일한 톤·구조라 CSS도 그대로 복제하고
id만 clock-guide-*로 분리했다. 01번 퍼즐 컨테이너 위에 뜨므로
게임 화면 가이드와 마찬가지로 position:fixed(화면 전체 기준)로
만든다 — 퍼즐 컨테이너의 position/overflow와 무관하게 항상 화면
기준으로 스포트라이트/카드 좌표를 잡을 수 있다.
══════════════════════════════════════════════════════════════ */
#clock-guide-ov{
position:fixed;inset:0;z-index:900;display:none;
pointer-events:auto; /* 게임 화면 가이드와 동일 — [다음] 버튼 외 배경 클릭 차단 */
}
#clock-guide-ov.show{ display:block; }
#clock-guide-spot{
position:absolute;border-radius:10px;
box-shadow:0 0 0 2000px rgba(4,4,8,0.6), 0 0 0 2px rgba(244,208,104,0.95), 0 0 20px rgba(244,208,104,0.75);
transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
pointer-events:none;
}
#clock-guide-card{
position:absolute;width:min(280px, calc(100vw - 32px));
background:rgba(18,14,8,0.97);border:1px solid rgba(244,208,104,0.5);
border-radius:12px;padding:14px 16px;
box-shadow:0 8px 24px rgba(0,0,0,0.5);
transition:left .25s ease, top .25s ease, width .25s ease;
pointer-events:auto;
}
#clock-guide-text{
font-family:var(--font-ui);
font-size:13px;line-height:1.6;
color:rgba(245,240,225,0.95);
}
#clock-guide-step{
font-family:'Share Tech Mono',monospace;
font-size:11px;
color:rgba(244,208,104,0.85);letter-spacing:0.05em;margin-bottom:6px;
}
#clock-guide-foot{
display:flex;align-items:center;justify-content:flex-end;gap:10px;
margin-top:12px;
}
#clock-guide-next{
padding:7px 16px;border-radius:8px;border:none;cursor:pointer;
font-family:var(--font-ui);font-weight:700;
font-size:12px;color:#2a1c08;
background:linear-gradient(180deg,#f4d068 0%,#c99a3a 100%);
box-shadow:0 2px 0 #8a6e1f;
flex-shrink:0;white-space:nowrap;
}
#clock-guide-next:active{ transform:translateY(1px); }