:root {
/* 2026-08-19 — 그림과 9분할 숫자는 **에셋 툴이** `img/ui/frame-vars.css` 에 적는다.
* 여기 있던 하드코딩 분할값(3840x2160 기준 270/330)이 실제로 놓인 파일(960x437)과
* 어긋나 가운데가 사라지는 상태였다. 숫자를 사람이 두 번 적는 자리를 없앤 것이다.
* 그 파일이 없으면 아래 기본값이 쓰이고 화면은 지금과 똑같다. */
--wide-info-safe-x: 8.6%;
--wide-info-safe-top: 7.03%;
--wide-info-safe-bottom: 8.6%;
/* 2026-08-23 — 액자형 빠른칸의 실제 여백을 상단 UI 폭 계산과 공유한다. */
--dock-pad: 14px;
}
/*
* 2026-08-13: 동일 경계의 3840x2160 테마 한 장을 범용 9-slice로 재사용한다.
* 패널마다 이미지나 장식 DOM을 복제하지 않으며 기존 크기·위치·클릭 영역도 유지한다.
*/
.game-ui-frame {
isolation: isolate;
/* 액자가 없는 동안은 흰 솔리드(지도가 비치지 않게). 액자가 들어오면 툴이
* --wide-info-paper 를 한지색으로 적어 주고 그때 바뀐다. */
background-color: var(--wide-info-paper, #fff) !important;
/* 2026-08-23 — 여기 있던 `none` 은 원래 창의 **어두운 그라데이션**을 지우려고 넣은
* 것이었다(.tutorial-box 의 linear-gradient(145deg, #262019, #121823) + 금색 글자).
* 그 그라데이션이 깊이를 내고 있었는데 지우기만 하고 대신 채우지 않아, 창 전체가
* 한지색 한 값으로 납작해졌다 — 액자 창 열한 개가 전부 같은 증상이다.
* 그림이 아니라 CSS 라서 창이 아무리 커져도 안 뭉갠다(액자 변과 달리). */
background-image:
radial-gradient(115% 80% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
radial-gradient(135% 100% at 50% 108%, rgba(120, 95, 55, .17), rgba(120, 95, 55, 0) 58%),
repeating-linear-gradient(90deg,
rgba(120, 95, 55, .042) 0 1px, rgba(120, 95, 55, 0) 1px 3px) !important;
outline: 0 !important;
box-shadow: none !important;
}
.game-ui-frame::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border: 1px solid rgba(47, 38, 26, .24);
/* ⚠ 네 줄 다 툴이 정한다. 그림 크기를 모르는 채로 분할값을 여기 적으면 안 된다 —
* 위+아래 슬라이스가 그림 세로를 넘으면 가운데가 통째로 사라진다.
* 채우는 방식도 **그림에 딸린 성질**이라 툴이 정한다. 변에 장식이 든 그림을
* stretch 로 늘리면 창이 넓을수록 장식이 뭉갠다(2026-08-22: 위 변 127px 을
* 튜토리얼 창 680px 까지 6배로 늘려 금장식이 노란 얼룩이 됐다). */
border-image-source: var(--wide-info-frame-image, none);
border-image-slice: var(--wide-info-frame-slice, 0 fill);
border-image-width: var(--wide-info-frame-width, 0px);
border-image-repeat: var(--wide-info-frame-repeat, stretch);
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .38));
pointer-events: none;
}
/* 2026-08-23 — 원래 static인 시작·퀘스트 콘텐츠에서는 절대배치 액자가 바깥 부모를
* 기준으로 커졌다. :where로 우선순위를 낮춰 좁은 창의 fixed 전환은 그대로 살린다. */
#gameover-overlay > .game-ui-frame,
.tutorial-box.game-ui-frame { position: relative; }
:where(#start-overlay > .game-ui-frame, #quest-tour.game-ui-frame) { position: relative; }
/* 밝은 한지 중앙 위에서 기존 HTML 글자와 버튼이 읽히도록 색만 정리한다. */
.tutorial-box.game-ui-frame { color: var(--ink); }
#tutorial-guide.game-ui-frame,
#tutorial-victory.game-ui-frame { color: var(--ink); }
#tutorial-guide.game-ui-frame strong { color: #a8341f; }
.tutorial-box.game-ui-frame .tutorial-kicker { color: #7a5a24; }
.tutorial-box.game-ui-frame .desc,
.tutorial-box.game-ui-frame .tutorial-skip { color: var(--ink-soft); }
/* 2026-08-23 — 여기 있던 `rgba(47,38,26,.07)` 은 한지 위 7% 라 사실상 안 보였다.
* 버튼이 종이에 **얹힌** 게 아니라 종이에 **찍힌** 것처럼 보이던 원인이다.
* 위 흰 하이라이트 한 줄 + 아래 그림자 한 겹이면 종이 위 조각이 된다. */
.tutorial-box.game-ui-frame .tutorial-choice,
.tutorial-box.game-ui-frame .tutorial-sub-btn {
color: var(--ink);
background: linear-gradient(#fbf5e6, #ecdfc4);
border: 1px solid rgba(122, 90, 36, .45);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(47, 38, 26, .20);
}
.tutorial-box.game-ui-frame .tutorial-choice:hover {
background: linear-gradient(#fffaf0, #f2e7d0);
border-color: rgba(122, 90, 36, .75);
}
/* 고른 것 하나만 도장 붉은색. 금색으로 하면 아래 진한 단추와 같은 급이 된다. */
.tutorial-box.game-ui-frame .tutorial-choice.selected {
background: linear-gradient(#f7e9c6, #e8d29a);
border-color: #a8341f;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 2px rgba(168, 52, 31, .22);
}
/* 머리와 몸 사이 금선. border 가 아니라 배경이다 — border-image 를 쓰면 액자의
* border-image 와 같은 자리를 다투게 된다. */
.tutorial-box.game-ui-frame h1 {
padding-bottom: 13px;
/* 가운데 정렬이라 금선도 대칭이어야 한다 — 왼쪽에서 시작하는 선을 그대로 두면
* 글자만 가운데로 오고 선은 왼쪽에 남아 어긋나 보인다. */
background: linear-gradient(90deg,
transparent, rgba(154, 114, 41, .8) 22%, rgba(154, 114, 41, .8) 78%, transparent)
center bottom / 74% 2px no-repeat;
}
/* 진한 단추는 창마다 하나뿐이어야 한다 — 나머지가 보조로 내려가야 이게 산다. */
.tutorial-box.game-ui-frame #tutorial-begin-btn,
.tutorial-box.game-ui-frame #tutorial-summary-next,
.tutorial-box.game-ui-frame #siege-ending-close {
color: #fff8e6;
background: linear-gradient(#b98c33, #8a6520);
border: 1px solid #6d4f18;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 4px rgba(47, 38, 26, .28);
}
#tutorial-summary-card {
color: var(--ink);
background: rgba(47, 38, 26, .06);
border: 1px solid rgba(47, 38, 26, .14);
}
#menu-pop { position: relative; }
/* ── 튜토리얼 창 레이아웃 (2026-08-23) ───────────────────────────────────────
* 액자를 26px 로 올린 뒤 글자가 나무 기둥 위로 올라왔다. border-image 는 자리를
* 안 비켜 주므로 **여백으로 밀어내는 수밖에 없다** — 두께 26 + 숨 8 = 34px.
* 특히 [건너뛰기]는 top:12/right:14 라 액자 한가운데 박혀 아예 안 읽혔다. */
.tutorial-box.game-ui-frame {
/* 2026-08-23 액자를 26 -> 13px 로 절반 줄이며 여백도 같이 내렸다.
* 여백은 두께에 딸려 있다 — 두께만 줄이면 글자가 창 한가운데로 몰려 뜬다. */
padding: 22px 26px 20px;
text-align: center; /* 부제·제목·설명을 가운데로 */
}
.tutorial-box.game-ui-frame .tutorial-skip {
top: 19px; right: 24px; /* 액자(13px) 안쪽으로 */
font-size: 13px;
}
/* 버튼 글씨가 창 크기에 견줘 너무 작았다(본문과 같은 크기였다). 고르는 것이
* 이 창의 본론이므로 제목 다음으로 큰 글씨여야 한다. */
.tutorial-box.game-ui-frame .tutorial-choice {
min-height: 62px;
font-size: 18px;
letter-spacing: .02em;
}
.tutorial-box.game-ui-frame .tutorial-choice .game-icon {
width: 20px; height: 20px; vertical-align: -3px; margin-right: 4px;
}
.tutorial-box.game-ui-frame .tutorial-choice-grid { gap: 12px; margin: 22px 0 24px; }
/* 진한 단추 — 크기만 키우고 가운데로. 오른쪽 끝에 붙어 있으면 가운데 정렬한
* 나머지와 축이 어긋난다. */
.tutorial-box.game-ui-frame .tutorial-actions { justify-content: center; }
.tutorial-box.game-ui-frame #tutorial-begin-btn,
.tutorial-box.game-ui-frame #tutorial-summary-next,
.tutorial-box.game-ui-frame #siege-ending-close {
min-height: 50px;
padding: 12px 34px;
font-size: 18px;
letter-spacing: .03em;
}
/* ── HUD (2026-08-23) ────────────────────────────────────────────────────────
* 액자를 6 -> 12px 로 올렸다. 속줄(.panel-inner)의 위아래 여백이 딱 12px 이라
* 두께와 같아져 글자가 액자에 닿았다. 20px로 올려 위아래 숨을 8px 남긴다.
* 여백을 늘리는 것은 게임 쪽 일이라는 계약 그대로다(uikit/README.md). */
#hud.game-ui-frame .panel-inner { padding-top: 20px; padding-bottom: 20px; }
/* ① 빈 칸과 든 칸을 가른다.
* 가방 16칸·장비 6칸이 전부 같은 베이지 사각형이라 15개 든 칸과 빈 칸이 같은
* 무게로 보였다(`.filled` 가 있긴 했지만 한지 위 28% 라 거의 같은 색이었다).
* 빈 칸은 **파인 자국**, 든 칸은 **종이 위에 놓인 조각**. 튜토리얼 버튼과 같은 수법. */
.game-ui-frame .inv-slot,
.game-ui-frame .doll-slot {
background-color: rgba(47, 38, 26, .10);
border-color: rgba(47, 38, 26, .18);
box-shadow: inset 0 2px 3px rgba(47, 38, 26, .20), inset 0 -1px 0 rgba(255, 255, 255, .45);
}
.game-ui-frame .inv-slot.filled,
.game-ui-frame .doll-slot.filled {
background-color: #f6ead2;
background-image: linear-gradient(#fdf8ec, #ecdcbb);
border-color: rgba(122, 90, 36, .55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(47, 38, 26, .26);
}
/* 낀 것 초록·쓸 수 있는 것 파랑은 그대로 남긴다 — 위 규칙이 선택자가 더 세서
* 가만 두면 표시가 통째로 지워진다. 조각처럼 뜬 모양에 테만 얹는다. */
.game-ui-frame .inv-slot.equipped {
border-color: #2f8f4e;
box-shadow: inset 0 0 0 1px rgba(47, 143, 78, .55),
inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 3px rgba(47, 38, 26, .26);
}
.game-ui-frame .inv-slot.usable:hover {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, .3),
inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(47, 38, 26, .26);
}
/* ② 바를 유리관으로.
* ⚠ 유리는 `.bar::after` 로 덧씌운다 — `.bar-fill` 의 background-image 는
* `--bar-hp/--bar-mp` 자리이고 **툴이 그림을 넣을 자리**다. 여기서 그걸 덮으면
* 나중에 바 그림을 그려 넣어도 화면에 안 나온다. */
.game-ui-frame .bar {
position: relative;
box-shadow: inset 0 2px 4px rgba(20, 16, 10, .45), inset 0 -1px 0 rgba(255, 255, 255, .30);
}
.game-ui-frame .bar::after {
content: ''; position: absolute; inset: 0; pointer-events: none;
border-radius: inherit;
background: linear-gradient(rgba(255, 255, 255, .34),
rgba(255, 255, 255, .04) 46%, rgba(0, 0, 0, .15));
}
.game-ui-frame .bar-txt { position: relative; z-index: 2; } /* 유리 아래로 안 깔리게 */
/* ③ 탭 — 고른 것만 종이 위로, 나머지는 그늘로.
* 셋이 창과 같은 색이라 탭으로 안 읽혔다. */
.game-ui-frame .ptab {
background: linear-gradient(rgba(47, 38, 26, .09), rgba(47, 38, 26, .15));
box-shadow: inset 0 -3px 5px -3px rgba(47, 38, 26, .38);
}
.game-ui-frame .ptab.active {
background: linear-gradient(#fdf8ec, #f0e3c8);
border-color: rgba(122, 90, 36, .6);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 -1px 3px rgba(47, 38, 26, .16);
}
/* ── 퀘스트 창 (2026-08-23) ──────────────────────────────────────────────────
* 액자 대상에 새로 넣었다(js/wide_frame_theme.js). 액자 12px 을 받으려면 여백이
* 그만큼 있어야 한다 — 원래 10px 12px 이었다. */
#quest-tour.game-ui-frame {
/* 2026-08-23 — 아래 숨이 2px이라 마지막 줄이 나무에 얹혀 있었다. */
padding: 20px 20px 18px;
border-color: transparent; /* 액자가 테두리를 대신한다 */
box-shadow: 0 6px 20px rgba(0, 0, 0, .26);
}
/* ⚠ 줄 하나가 깨져 있었다 — `표시된 적 부대 모두 처치` 줄만 보상이 아래로 밀려
* `+15 / 냥` 으로 두 줄이 됐다. 원인은 칸 수다: 칸은 셋(13px 1fr auto)인데 그 줄만
* 0/3 이 붙어 넷이 되어 보상 이 다음 줄로 떨어졌다.
* 칸을 넷으로 늘리고 자리를 못 박는다 — 그래야 보상이 모든 줄에서 같은 세로선에
* 선다(`auto` 칸은 내용이 없으면 폭 0 이라 나머지 줄은 그대로다). */
#quest-tour.game-ui-frame #quest-tour-list li {
grid-template-columns: 13px 1fr auto auto;
gap: 3px 6px;
min-height: 22px;
padding: 2px 0;
border-bottom: 1px solid rgba(122, 90, 36, .13);
}
#quest-tour.game-ui-frame #quest-tour-list li:last-child { border-bottom: 0; }
#quest-tour.game-ui-frame #quest-tour-list small { grid-column: 3; }
#quest-tour.game-ui-frame #quest-tour-list em {
grid-column: 4;
font-size: 11.5px; font-weight: 800; color: #8a6520;
font-variant-numeric: tabular-nums; /* 숫자 폭을 맞춰 세로로 줄을 세운다 */
}
#quest-tour.game-ui-frame #quest-tour-list li.done em { color: #28784d; }
/* 지금 할 것 하나만 도장 붉은색 — 나머지는 다 같은 무게로 두어야 이게 튄다. */
#quest-tour.game-ui-frame #quest-tour-list li.current { color: #8f3a17; }
#quest-tour.game-ui-frame #quest-tour-list li.current em { color: #a8341f; }
/* 머리 — 튜토리얼 창과 같은 금선. 창마다 다른 방식을 쓰면 한 게임으로 안 보인다. */
#quest-tour.game-ui-frame .quest-tour-head {
align-items: baseline;
padding-bottom: 8px; margin-bottom: 6px;
background: linear-gradient(90deg,
rgba(154, 114, 41, .8), rgba(154, 114, 41, .10) 72%, transparent)
left bottom / 100% 2px no-repeat;
}
#quest-tour.game-ui-frame .quest-tour-head b { font-size: 15px; letter-spacing: .02em; }
/* 진한 단추 — 튜토리얼의 [잠실성 공성 시작]과 같은 금색이어야 같은 급으로 읽힌다. */
#quest-tour.game-ui-frame #quest-siege-btn {
margin-top: 10px; min-height: 34px; padding: 8px 10px;
font-size: 14px; font-weight: 800; letter-spacing: .02em;
color: #fff8e6;
background: linear-gradient(#b98c33, #8a6520);
border: 1px solid #6d4f18;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 4px rgba(47, 38, 26, .28);
}
#quest-tour.game-ui-frame #quest-siege-btn:disabled {
color: rgba(47, 38, 26, .5);
background: linear-gradient(rgba(47, 38, 26, .12), rgba(47, 38, 26, .18));
border-color: rgba(122, 90, 36, .3);
box-shadow: inset 0 2px 3px rgba(47, 38, 26, .18);
}
/* ── 스킬·빠른칸 띠 (2026-08-23) ─────────────────────────────────────────────
* 액자 대상에 새로 넣었다. 여백이 8px 이라 액자 12px 을 못 받는다 — 14px 로. */
#action-dock.game-ui-frame {
--dock-pad: 14px;
border-color: transparent;
box-shadow: 0 6px 18px rgba(0, 0, 0, .26);
}
/* 빈 칸은 파인 자국, 든 칸은 뜬 조각 — 가방과 같은 규칙이어야 한 게임으로 읽힌다.
* ⚠ `background-image` 는 건드리지 않는다. 그 자리는 `--panel-slot`(칸 그림)과
* `--skill-icon`(스킬 아이콘) 이 쓰고 있어서, 덮으면 아이콘이 통째로 사라진다.
* 바꾸는 것은 배경**색**과 그림자뿐이다. */
.game-ui-frame .q-slot {
background-color: rgba(47, 38, 26, .10);
border-color: rgba(47, 38, 26, .18);
box-shadow: inset 0 2px 3px rgba(47, 38, 26, .20), inset 0 -1px 0 rgba(255, 255, 255, .45);
}
.game-ui-frame .q-slot.filled {
background-color: #f3e6cb;
border-color: rgba(122, 90, 36, .55);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(47, 38, 26, .26);
}
/* 아래 셋은 선택자가 더 센 위 규칙에 지워지므로 다시 적는다 — 쓰는 중(초록)·
* 끌어 놓는 자리(파랑)·손이 얹힌 것. 상태 표시가 사라지면 안 된다. */
.game-ui-frame .q-slot.on {
border-color: #24a06a;
box-shadow: inset 0 0 0 2px rgba(36, 160, 106, .55), 0 1px 3px rgba(47, 38, 26, .26);
}
.game-ui-frame .q-slot.drop {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, .45), 0 1px 3px rgba(47, 38, 26, .26);
}
.game-ui-frame .q-slot.filled:hover {
box-shadow: 0 0 0 2px rgba(201, 164, 92, .6),
inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(47, 38, 26, .26);
}
/* 단축키는 남색 딱지였다(rgba(15,23,42,.82)) — 한지·금 위에서 혼자 다른 게임처럼
* 보였다. 먹빛 바탕에 금색 글씨로 바꿔 도장처럼 앉힌다. */
.game-ui-frame .q-hotkey {
top: 3px; left: 3px;
color: #f1d8a0;
background: rgba(47, 38, 26, .88);
box-shadow: 0 1px 2px rgba(47, 38, 26, .35);
}
/* 스킬 이름표가 칸 바탕과 거의 같은 색이라 안 읽혔다. 종이 조각으로 세운다. */
.game-ui-frame .q-skill-name {
background: linear-gradient(#fdf8ec, #f0e3c8);
border: 1px solid rgba(122, 90, 36, .45);
box-shadow: 0 1px 2px rgba(47, 38, 26, .22);
}
/* 버프 줄 — 칸과 붙어 한 덩어리로 보였다. 가는 선으로 뗀다. */
#action-dock.game-ui-frame > .buff-row {
margin-top: 9px; padding-top: 8px;
border-top: 1px solid rgba(122, 90, 36, .18);
}
/* ── HUD 프로필 (2026-08-23) ─────────────────────────────────────────────────
* 초상 칸과 그 위의 레벨 딱지(①)를 뺀다. 얼굴 그림이 아직 없어 빈 네모였고,
* 레벨은 다른 데서도 보이는 값이라 여기 자리를 차지할 이유가 없었다.
* 그 자리를 바 셋(체력·공력·스테미너)이 받아 폭이 넓어진다 — 긴 글("95 / 120
* (부상 0 · 손실 4)")이 잘리던 것도 같이 풀린다.
* ⚠ 지운 게 아니라 감춘 것이다. HTML·hud.js 는 그대로라 되돌리려면 이 한 줄만
* 지우면 된다(js/hud.js 는 부모판과 공유하는 파일이라 손대지 않았다). */
#hud.game-ui-frame #prof-portrait { display: none; }
#hud.game-ui-frame #profile { gap: 0; margin-bottom: 8px; }
/* 바가 넓어진 만큼 키우고 글씨도 함께 — 이게 이 창의 본론이다. */
#hud.game-ui-frame .bar { height: 22px; margin-bottom: 6px; }
/* 2026-08-24 — 뒤에 로드되는 액자 CSS도 큰 화면 글씨 토큰을 보존한다. */
#hud.game-ui-frame .bar-txt { font-size: var(--fs-sm); font-weight: 800; }
/* 금화가 그냥 갈색 글씨라 안 보였다. 금패로 앉힌다 —
* 순금색(#d4af37)은 한지 위에서 오히려 안 읽힌다. 진한 금에 밝은 테를 둘렀다. */
#hud.game-ui-frame .gold-chip {
padding: 3px 12px 3px 10px;
border: 1px solid rgba(122, 90, 36, .65);
border-radius: 999px;
background: linear-gradient(#fdefc0, #e8c86a);
color: #6b4a0c;
font-size: 17px; font-weight: 900; letter-spacing: .01em;
text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(47, 38, 26, .28);
}
#hud.game-ui-frame .gold-chip::before { content: '⬤'; margin-right: 5px; font-size: 11px; color: #b8891f; }
#hud.game-ui-frame .gold-chip b { font-size: 19px; }
/* ── 시작 화면 (2026-08-23) ──────────────────────────────────────────────────
* ⚠ 여기는 **액자를 안 붙인다.** js/wide_frame_theme.js 에서 일부러 뺀 자리이고
* test/ui_theme.js 가 `#start-overlay` 가 프레임 대상에 들어오면 실패시킨다.
* `.start-box` 는 스스로 먹 테두리 + 금 속선을 갖고 있어 액자와 겹친다.
* 그래서 액자 대신 **결과 위계만** 다른 창과 같은 방식으로 맞춘다. */
#start-overlay .start-box {
background-image:
radial-gradient(115% 80% at 50% 0%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
radial-gradient(135% 100% at 50% 108%, rgba(120, 95, 55, .17), rgba(120, 95, 55, 0) 58%),
repeating-linear-gradient(90deg,
rgba(120, 95, 55, .042) 0 1px, rgba(120, 95, 55, 0) 1px 3px);
}
#start-overlay .start-box h1 {
padding-bottom: 13px; margin-bottom: 10px;
background: linear-gradient(90deg,
transparent, rgba(154, 114, 41, .8) 22%, rgba(154, 114, 41, .8) 78%, transparent)
center bottom / 74% 2px no-repeat;
}
/* 국가 단추가 웹 버튼처럼 납작했다 — 쨍한 원색 + 흰 테 + 각진 그림자라
* 한지·먹·금 위에서 혼자 다른 판처럼 보였다. 색은 그대로 두고(진영색은 게임
* 곳곳에서 같은 값으로 쓰인다) **칠한 쇠판**으로 세운다. 눌리는 맛(0 4px 0)은
* 게임다워서 남기고, 테만 흰색 -> 먹색으로 바꿔 종이 위에 앉힌다. */
.main-kingdom-btn {
padding: 16px 12px;
font-size: 17px;
border: 2px solid color-mix(in srgb, var(--kingdom-color) 52%, #2f261a);
background: linear-gradient(color-mix(in srgb, var(--kingdom-color) 86%, #fff),
color-mix(in srgb, var(--kingdom-color) 84%, #000));
text-shadow: 0 1px 2px rgba(0, 0, 0, .38);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45),
0 4px 0 color-mix(in srgb, var(--kingdom-color) 44%, #1b1409),
0 7px 13px rgba(20, 14, 6, .30);
}
.main-kingdom-btn:active {
transform: translateY(2px);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
0 2px 0 color-mix(in srgb, var(--kingdom-color) 44%, #1b1409),
0 3px 7px rgba(20, 14, 6, .28);
}
/* 불러오기 단추는 index.html 에 인라인으로 #334155(회청색)가 박혀 있다 —
* 이 화면에서 혼자 딴 팔레트다. 인라인이라 !important 말고는 못 이긴다. */
#start-overlay #load-save-btn {
color: var(--ink) !important;
background: linear-gradient(#fbf5e6, #ecdfc4) !important;
border: 1px solid rgba(122, 90, 36, .5) !important;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 1px 3px rgba(47, 38, 26, .24);
}
/* ── 확인·대화 상자 셋 (2026-08-23) ──────────────────────────────────────────
* #npc-talk · #dungeon-confirm · #castle-shop-confirm 은 style.css 에서 CSS 가
* 한 글자도 다르지 않다(870·890·912행). 예전 액자 — 먹 outline 2px + 금 inset 3px —
* 를 마지막까지 들고 있던 자리라, 다른 창이 나무 액자로 바뀐 뒤 여기만 톤이 갈렸다.
* .game-ui-frame 이 outline·box-shadow 를 0 으로 누르므로 옛 테는 저절로 사라진다.
*
* 남는 일은 **여백**이다. 액자 두께가 12px 인데 머리줄 여백이 10px 이라 제목이
* 나무 위로 올라간다 — 계약 그대로 두께는 여백의 상한이다. 세 창이 같은 값을
* 쓰므로 한 규칙으로 셋을 같이 민다(창마다 갈라 두면 한 곳만 고치는 사고가 난다). */
#npc-talk.game-ui-frame,
#dungeon-confirm.game-ui-frame,
#castle-shop-confirm.game-ui-frame {
padding-bottom: 16px;
border-radius: 0; /* 액자가 각지므로 둥근 모서리가 나무 밑으로 삐져나온다 */
}
/* 머리줄 — 먹색 실선 대신 다른 창과 같은 금 밑줄. */
#npc-talk.game-ui-frame #npc-talk-head,
#dungeon-confirm.game-ui-frame #dungeon-confirm-head,
#castle-shop-confirm.game-ui-frame #castle-shop-confirm-head {
padding: 15px 18px 11px;
border-bottom: 0;
color: #4a3517;
background: linear-gradient(90deg,
transparent, rgba(154, 114, 41, .78) 6%, rgba(154, 114, 41, .78) 94%, transparent)
center bottom / 100% 2px no-repeat;
}
#npc-talk.game-ui-frame #npc-talk-content { padding: 16px 18px; }
#dungeon-confirm.game-ui-frame p { margin: 15px 18px 6px; }
#dungeon-confirm.game-ui-frame small { margin: 0 18px 15px; }
#castle-shop-confirm.game-ui-frame p { margin: 15px 18px; }
/* 셋 다 반드시 .game-ui-frame 안으로 묶는다. 이 파일은 액자가 붙은 창만
* 건드리는 게 계약이고, 안 묶으면 style.css 와 특이도가 같아져 이기는 이유가
* ' 순서' 뿐이 된다 — 줄 하나 옮기면 조용히 뒤집힌다. */
#npc-talk.game-ui-frame #npc-talk-actions,
#dungeon-confirm.game-ui-frame .dungeon-confirm-actions,
#castle-shop-confirm.game-ui-frame .castle-shop-confirm-actions { padding: 0 18px; }
/* 보조 단추는 종이 조각으로, 진한 단추는 창마다 하나만 — 다른 창과 같은 규칙이다. */
#npc-talk.game-ui-frame button,
#dungeon-confirm.game-ui-frame button,
#castle-shop-confirm.game-ui-frame button {
border: 1px solid rgba(122, 90, 36, .45);
background: linear-gradient(#fbf5e6, #ecdfc4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 1px 2px rgba(47, 38, 26, .20);
}
#npc-talk.game-ui-frame #npc-talk-close,
#dungeon-confirm.game-ui-frame #dungeon-confirm-close,
#castle-shop-confirm.game-ui-frame #castle-shop-confirm-close {
border: 0; background: none; box-shadow: none; color: #6b5330;
}
#npc-talk.game-ui-frame #npc-talk-thanks,
#dungeon-confirm.game-ui-frame #dungeon-enter,
#castle-shop-confirm.game-ui-frame #castle-shop-enter {
color: #fff8e6;
border: 1px solid #6d4f18;
background: linear-gradient(#b98c33, #8a6520);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 4px rgba(47, 38, 26, .28);
}
/* 주민 초상 칸도 한지 위에서 파이게 — HUD 칸과 같은 방식이다. */
#npc-talk.game-ui-frame #npc-talk-portrait {
border: 1px solid rgba(122, 90, 36, .4);
background-color: rgba(47, 38, 26, .07);
box-shadow: inset 0 2px 3px rgba(47, 38, 26, .20);
}