:root {
  --night: #1c1922; --night2: #2a2631; --line: #4a4452;
  --paper: #f3ead7; --paper2: #e6d8bd; --ink: #2b2420; --brown: #7a5a3a; --brown2: #5a4128;
  --red: #9e2b25; --blue: #3d6aa8; --green: #5f7a4a; --muted: #cfc4ae;
  --font-title: 'Gowun Batang', serif; --font-body: 'Gowun Dodum', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--font-body); }
button, input, select { font-family: inherit; }
button { cursor: pointer; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a { color: var(--muted); }

/* ── 로그인 ── */
.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.gate-box { width: 100%; max-width: 380px; background: var(--paper); border: 3px solid var(--brown); border-radius: 6px; padding: 28px; }
.gate-box h1 { margin: 0 0 18px; font-family: var(--font-title); text-align: center; }
.gate-box form { display: flex; flex-direction: column; gap: 12px; }
.gate-box label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.gate-box input { height: 44px; border: 2px solid #cfbf9f; border-radius: 4px; padding: 0 10px; font-size: 15px; background: #fffaf0; }
.btn-main { height: 48px; border: none; border-radius: 4px; background: var(--red); color: #fff; font-size: 16px; }
.err { background: #f7d9d4; color: #7a1f1a; padding: 8px 12px; border-radius: 4px; }
.switch { text-align: center; font-size: 14px; }
.switch a { color: var(--red); }

/* ── 전체 ── */
.wrap { max-width: 1480px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo { font-family: var(--font-title); font-weight: 700; font-size: 28px; color: var(--paper); letter-spacing: 2px; }
.top-r { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 14px; }
.cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }

/* ── 왼쪽 목록 ── */
.list { position: relative; z-index: 10; flex: 1 1 200px; max-width: 220px; display: flex; flex-direction: column; gap: 10px; }
.list .label { color: var(--muted); font-size: 13px; letter-spacing: 1px; }
.char { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 72px; text-align: left; border-radius: 6px; background: var(--paper); border: 3px solid var(--brown); transition: transform .2s, box-shadow .2s, opacity .2s; }
.char.on { border-color: var(--red); transform: translateX(32px) scale(1.06); box-shadow: 6px 8px 18px rgba(0,0,0,.35); }
.char.dim { opacity: .75; }
.face { width: 52px; height: 52px; border-radius: 50%; background: #d9cbb0; border: 2px solid var(--brown); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; font-size: 20px; color: var(--brown2); flex-shrink: 0; object-fit: cover; }
.cinfo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cinfo b { font-size: 16px; }
.tag { font-size: 12px; padding: 2px 8px; border-radius: 10px; color: #fff; }
.cinfo small { font-size: 12px; color: var(--brown2); }

/* ── 가운데 ── */
.center { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.scene { position: relative; height: 520px; border: 3px solid var(--paper); border-radius: 6px; overflow: hidden; background: #9cc0d4 center / cover no-repeat; image-rendering: pixelated; }
.scene > svg.bgart { position: absolute; inset: 0; width: 100%; height: 100%; }
.place-tag { position: absolute; top: 12px; left: 12px; background: rgba(28,25,34,.75); color: var(--paper); font-size: 13px; padding: 4px 10px; border-radius: 4px; }
.party { position: absolute; left: 0; right: 0; bottom: 60px; display: flex; justify-content: center; gap: 80px; flex-wrap: wrap; }
.party figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.party img { height: 180px; image-rendering: pixelated; }
.party figcaption { background: rgba(28,25,34,.7); color: var(--paper); font-size: 13px; padding: 2px 8px; border-radius: 4px; }
.away { position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); background: rgba(28,25,34,.82); color: var(--paper); padding: 18px 28px; border-radius: 6px; text-align: center; display: flex; flex-direction: column; gap: 6px; }
.away b { font-family: var(--font-title); font-size: 22px; }

.dialog { background: var(--paper); border: 3px solid var(--brown); border-radius: 6px; padding: 18px 24px; min-height: 130px; display: flex; flex-direction: column; gap: 8px; }
.dlg-who { font-family: var(--font-title); font-weight: 700; font-size: 15px; color: var(--red); }
.dlg-text { font-size: 18px; line-height: 1.7; flex: 1; }
.dlg-foot { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #6b5a48; }
#dlg-next[hidden] { display: none; }
#dlg-next { min-width: 44px; height: 44px; border: none; background: transparent; display: flex; align-items: center; gap: 6px; color: var(--brown); font-size: 14px; }

.actions { background: var(--night2); border: 2px solid var(--line); border-radius: 6px; padding: 14px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--paper); }
.btn { height: 48px; padding: 0 22px; border: 2px solid var(--muted); background: transparent; color: var(--paper); border-radius: 4px; font-size: 16px; }
.btn.red { border-color: var(--red); background: var(--red); color: #fff; }
.btn.sm { height: 44px; padding: 0 14px; font-size: 14px; }
.btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.actions select { height: 44px; border-radius: 4px; border: 2px solid var(--muted); background: var(--night); color: var(--paper); padding: 0 10px; font-size: 15px; }
.explore-box { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.hint { font-size: 13px; color: var(--muted); }

/* ── 오른쪽 ── */
.side { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.panel { background: var(--paper); border: 3px solid var(--brown); border-radius: 6px; overflow: hidden; }
.map-head { background: var(--brown); color: var(--paper); font-family: var(--font-title); font-weight: 700; padding: 6px 14px; }
#map svg { display: block; width: 100%; height: auto; }
.chat { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-title { font-family: var(--font-title); font-weight: 700; }
.chat-log { height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.5; }
.chat-log .sys { color: var(--brown); font-size: 13px; }
.chat-log .who { font-weight: 700; margin-right: 6px; }
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; min-width: 0; height: 44px; border: 2px solid #cfbf9f; border-radius: 4px; padding: 0 10px; font-size: 14px; background: #fffaf0; }
.chat-form button { height: 44px; padding: 0 16px; border: none; background: var(--brown); color: var(--paper); border-radius: 4px; }

.note { position: relative; z-index: 10; background: var(--paper2); border-radius: 10px 10px 6px 6px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.note-top { height: 34px; background: #8b6844; }
.ribbon { position: absolute; top: 0; right: 28px; width: 22px; height: 66px; }
.note-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.note-id { display: flex; gap: 14px; align-items: center; }
.note-pic { width: 72px; height: 84px; background: var(--paper); border: 2px solid var(--brown2); display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 26px; font-weight: 700; color: var(--brown2); object-fit: cover; }
.note-id b { font-family: var(--font-title); font-size: 20px; display: block; }
.note-id span { font-size: 14px; color: var(--brown2); }
.bars { display: grid; grid-template-columns: 34px minmax(0,1fr) 70px; gap: 6px 8px; align-items: center; font-size: 13px; }
.bar { height: 12px; background: var(--paper); border: 1px solid var(--brown2); }
.bar i { display: block; height: 100%; }
.toggle { height: 44px; border: none; background: transparent; display: flex; align-items: center; gap: 8px; padding: 0; font-size: 15px; color: var(--ink); }
.toggle svg { transition: transform .15s; }
.toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.items { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.items div { background: var(--paper); border: 1px solid #b7a27e; border-radius: 4px; padding: 8px 4px; text-align: center; font-size: 12px; }
.empty { font-size: 13px; color: #6b5a48; }

/* ── 프로필 ── */
.profile { position: fixed; inset: 0; z-index: 5; background: rgba(255,255,255,.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow-y: auto; }
.profile[hidden] { display: none; }
.pf-in { min-height: 100%; display: flex; flex-wrap: nowrap; gap: 24px; padding: 40px 380px 40px 270px; background: linear-gradient(90deg, rgba(70,64,74,.72) 0%, rgba(70,64,74,.35) 40%, rgba(70,64,74,0) 65%); }
.pf-text { flex: 1 1 400px; max-width: 520px; display: flex; flex-direction: column; gap: 16px; color: #fffaf0; }
.pf-head { display: flex; justify-content: space-between; align-items: center; }
.pf-head h2 { margin: 0; font-family: var(--font-title); font-size: 44px; }
.pf-close { width: 44px; height: 44px; border: 1px solid rgba(255,250,240,.6); border-radius: 50%; background: rgba(28,25,34,.4); color: #fffaf0; display: flex; align-items: center; justify-content: center; }
.pf-info { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 28px; }
.pf-info div { display: flex; gap: 10px; align-items: center; }
.pf-info div::before { content: ''; width: 10px; height: 10px; border: 2px solid #fffaf0; flex-shrink: 0; }
.pf-info span:first-child { width: 56px; }
.pf-box { background: rgba(255,250,240,.9); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; }
.pf-box > .toggle { width: 100%; height: 48px; padding: 0 14px; font-weight: 700; font-size: 17px; }
.pf-box .inner { padding: 0 16px 16px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px; }
.stats div { display: flex; justify-content: space-between; border-bottom: 1px dashed #b7a27e; padding-bottom: 4px; }
.pf-box .items { grid-template-columns: repeat(5, minmax(0,1fr)); }
.pf-pers { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.pf-pers b { font-size: 17px; }
.pf-pers div { max-height: 170px; overflow-y: auto; line-height: 1.7; white-space: pre-line; }
.pf-body { flex: 0 0 260px; display: flex; align-items: flex-end; justify-content: center; }
.pf-body img, .pf-body svg { max-height: 600px; max-width: 100%; image-rendering: pixelated; }

@media (max-width: 900px) {
  .pf-in { flex-wrap: wrap; padding: 24px; background: rgba(70,64,74,.6); }
  .pf-body { flex: 1 1 100%; }
  .char.on { transform: none; }
  .list { z-index: auto; }
  .note { z-index: auto; }
  .list, .side { max-width: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 16px; }
  .scene { height: 360px; }
  .party img { height: 120px; }
  .pf-head h2 { font-size: 32px; }
}

/* ── 로고 이미지 ── */
.logo img { max-height: 48px; display: block; }
.gate-box h1 img { max-width: 100%; max-height: 120px; display: block; margin: 0 auto; }

/* ── 관리 화면 ── */
.adm { color: var(--ink); }
.adm-wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; display: flex; flex-direction: column; gap: 16px; }
.adm-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-tabs a, .pills a { padding: 10px 16px; border-radius: 4px; background: var(--night2); color: var(--paper); text-decoration: none; border: 2px solid var(--line); }
.adm-tabs a[aria-current], .pills a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills a { background: transparent; color: var(--ink); border-color: #cfbf9f; }
.pills a[aria-current] { background: var(--brown); color: var(--paper); border-color: var(--brown); }
.flash { margin: 0; padding: 10px 14px; border-radius: 4px; background: #dbe8cf; }
.flash.bad { background: #f7d9d4; }
.adm-sec { background: var(--paper); border: 3px solid var(--brown); border-radius: 6px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.adm-sec h2 { margin: 0; font-family: var(--font-title); }
.hint { margin: 0; font-size: 13px; color: #6b5a48; }
.card { background: #fffaf0; border: 2px solid #cfbf9f; border-radius: 6px; }
.card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 44px; }
.card > summary::-webkit-details-marker { display: none; }
.card > summary::after { content: '▾'; margin-left: auto; color: var(--brown); }
.card[open] > summary { border-bottom: 1px solid #e3d6bb; }
.card[open] > summary::after { content: '▴'; }
.card .face { width: 40px; height: 40px; font-size: 16px; }
.tag.role-player { background: var(--red); } .tag.role-companion { background: var(--blue); } .tag.role-npc { background: var(--green); }
.form { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.card-plain { padding: 0; }
.adm label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.adm label.chk { flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
.adm input:not([type=checkbox]):not([type=file]):not([type=color]):not([type=range]), .adm select, .adm textarea { min-height: 40px; border: 2px solid #cfbf9f; border-radius: 4px; padding: 6px 10px; font: inherit; font-size: 15px; background: #fff; color: var(--ink); width: 100%; }
.adm textarea { resize: vertical; line-height: 1.6; }
.adm input[type=checkbox] { width: 18px; height: 18px; }
.adm fieldset { border: 1px solid #e3d6bb; border-radius: 4px; padding: 10px 12px 12px; margin: 0; }
.adm legend { font-size: 14px; font-weight: 700; padding: 0 4px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.adm label.color { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; }
.adm input[type=color] { width: 44px; height: 36px; padding: 0; border: 1px solid #cfbf9f; border-radius: 4px; background: none; cursor: pointer; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.img-field, .map-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.img-field img { max-width: 100%; max-height: 160px; object-fit: contain; align-self: flex-start; border: 1px solid #e3d6bb; background: #f3ead7; image-rendering: pixelated; }
.noimg { font-size: 13px; color: #6b5a48; }
.lbl { font-size: 14px; }
.mappick { width: 100%; height: auto; cursor: crosshair; border: 1px solid #cfbf9f; border-radius: 4px; display: block; }
.xy { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.xy input { width: 80px !important; }
.row-end { display: flex; justify-content: flex-end; }
.btn-main.sm, .btn-del.sm { height: 40px; padding: 0 14px; font-size: 14px; }
.btn-main { padding: 0 22px; cursor: pointer; }
.btn-del { height: 40px; padding: 0 14px; border: 2px solid var(--red); background: transparent; color: var(--red); border-radius: 4px; font-size: 14px; cursor: pointer; }
.del { padding: 0 16px 16px; display: flex; justify-content: flex-start; }
.add-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding-top: 8px; border-top: 1px dashed #cfbf9f; }
.add-row label { flex: 1 1 220px; }
.add-row .btn-main { height: 44px; }
.ev { background: #fffaf0; border: 2px solid #cfbf9f; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ev.add { border-style: dashed; }
.ev-opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ev-opts label { width: 90px; }
.ev-opts label:first-child { width: 160px; }
.ev-opts label.grow { flex: 1 1 240px; width: auto; }
.pct { font-size: 13px; color: #6b5a48; min-height: 40px; display: flex; align-items: center; }
.codes { display: flex; flex-direction: column; gap: 6px; }
.code-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: #fffaf0; border: 1px solid #e3d6bb; border-radius: 4px; }
.code-row code { font-size: 16px; font-weight: 700; }
@media (max-width: 640px) {
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .grid4, .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-sec { padding: 14px; }
}

/* ── 배경음악 ── */
.music { display: flex; align-items: center; gap: 8px; }
.music-btn { height: 36px; padding: 0 12px; border: 1px solid var(--muted); border-radius: 18px; background: transparent; color: var(--paper); display: flex; align-items: center; gap: 6px; font-size: 13px; }
.music-btn[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.music input[type=range] { width: 90px; accent-color: var(--red); }
.music small { color: var(--muted); }
.yt-holder { position: fixed; left: -9999px; top: 0; width: 200px; height: 200px; overflow: hidden; pointer-events: none; }

.ev-opts label.wide { width: 180px; }
.ing { display: flex; gap: 6px; }
.ing select { flex: 1 1 auto; min-width: 0; }
.ing input { width: 70px !important; flex: 0 0 70px; }
.add-card { border-style: dashed; }

/* ── 레벨·제작·보스 ── */
.tags { display: flex; gap: 6px; align-items: center; }
.lv { font-size: 12px; font-weight: 700; color: var(--brown); margin-left: 6px; }
.note-id b .lv { font-size: 13px; }
.btn.on { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn.red.on { background: var(--paper); color: var(--ink); }
.btn.alert { border-color: #e8c040; color: #e8c040; animation: pulse 1.4s infinite; }
.btn.ghost { border-color: var(--line); color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(232,192,64,.25); } }
@media (prefers-reduced-motion: reduce) { .btn.alert { animation: none; } }
.panel-box { flex-basis: 100%; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.busy-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--paper); }
.recipe { display: flex; gap: 12px; align-items: center; justify-content: space-between; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 4px; padding: 10px 12px; }
.r-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.r-main small { color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; padding: 2px 8px; border-radius: 10px; background: rgba(255,255,255,.12); }
.chip.lack { background: rgba(184,67,58,.35); }
.pts-btn { min-height: 40px; border: 2px dashed var(--red); background: transparent; color: var(--red); border-radius: 4px; font-size: 14px; font-weight: 700; }
.item-use { background: var(--paper); border: 1px solid var(--brown); border-radius: 4px; padding: 6px 4px; font-size: 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--ink); }
.item-use small { font-size: 11px; color: var(--red); font-weight: 700; }
.pf-lv { font-family: var(--font-title); font-size: 20px; font-weight: 700; }
.pts { margin: 0 0 8px; font-size: 14px; color: var(--red); font-weight: 700; }
.sv { display: flex; gap: 8px; align-items: center; }
.plus { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--red); background: #fff; color: var(--red); font-size: 18px; font-weight: 700; line-height: 1; }
.stat-help { display: block; margin-top: 8px; color: #6b5a48; font-size: 12px; }
.battle { position: absolute; inset: 0; background: rgba(20,16,24,.72); color: var(--paper); display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.b-head { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center; font-family: var(--font-title); font-size: 20px; }
.b-head span { font-family: var(--font-body); font-size: 14px; }
.bar.boss { height: 14px; }
.bar.boss i { background: #e05040; transition: width .3s; }
.b-stage { flex: 1; min-height: 0; display: flex; gap: 16px; align-items: stretch; }
.b-img { flex: 1 1 50%; min-width: 0; max-height: 100%; object-fit: contain; image-rendering: pixelated; align-self: center; height: 100%; }
.b-side { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.b-mem { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px; font-size: 14px; }
.b-mem small { color: var(--muted); }
.b-mem.down { opacity: .5; }
.b-log { flex: 1; min-height: 80px; overflow-y: auto; background: rgba(0,0,0,.35); border-radius: 4px; padding: 8px 10px; font-size: 13px; line-height: 1.6; }
.b-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.b-actions select { height: 44px; border-radius: 4px; border: 2px solid var(--muted); background: var(--night); color: var(--paper); padding: 0 8px; }
.b-result { font-family: var(--font-title); font-size: 22px; }
@media (max-width: 640px) { .b-stage { flex-direction: column; } .b-img { max-height: 120px; } }

.ops { background: #fbf3e2; }
.inv-edit { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; }
.inv-edit label { width: 150px; }
.give { max-width: 420px; }
.gold { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; border-top: 1px dashed #b7a27e; }
.gold b { font-size: 15px; }

/* ── 팝업 ── */
.modal[hidden] { display: none; }
.m-back { position: fixed; inset: 0; z-index: 30; background: rgba(20,16,24,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.m-panel { width: 100%; max-width: 780px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--paper); border: 3px solid var(--brown); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.45); color: var(--ink); }
.m-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 2px solid var(--brown); background: var(--paper2); border-radius: 6px 6px 0 0; }
.m-head h2 { margin: 0; font-family: var(--font-title); font-size: 24px; flex: 1; }
.m-gold { font-weight: 700; }
.m-close { width: 44px; height: 44px; border: none; border-radius: 50%; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; }
.m-close:hover { background: rgba(0,0,0,.06); }
.m-msg { margin: 0; padding: 10px 18px; background: #efe3c8; font-weight: 700; }
.m-body { overflow-y: auto; padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.m-body h3 { margin: 8px 0 0; font-family: var(--font-title); font-size: 18px; }
.modal .panel-box { border-top: none; padding-top: 0; }
.modal .recipe { background: #fffaf0; border-color: #cfbf9f; }
.modal .recipe.on { border-color: var(--red); border-width: 2px; }
.modal .r-main small { color: #6b5a48; }
.modal .chip { background: #efe3c8; }
.modal .chip.lack { background: #f2c9c2; }
.modal .busy-line { color: var(--ink); background: #efe3c8; padding: 8px 12px; border-radius: 4px; }
.modal .btn { color: var(--ink); border-color: var(--brown); }
.modal .btn.red { color: #fff; border-color: var(--red); background: var(--red); }
.modal .btn.ghost { color: #6b5a48; border-color: #cfbf9f; }
.modal .hint { color: #6b5a48; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.slot { border: 2px dashed #cfbf9f; border-radius: 6px; padding: 12px; display: flex; flex-direction: column; gap: 6px; min-height: 120px; background: #fffaf0; }
.slot.filled { border-style: solid; border-color: var(--brown); }
.slot-name { font-size: 13px; color: #6b5a48; }
.slot small { color: #6b5a48; }
.slot .btn { align-self: flex-start; }
.g-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.g-stats div { background: #efe3c8; border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; }
.g-stats b { font-size: 20px; }
.g-stats small { font-size: 11px; color: #6b5a48; }
.g-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fighting { color: var(--red) !important; font-weight: 700; }
.hint.warn { color: #e8c040; flex-basis: 100%; }
.gb { color: var(--red); font-size: 12px; }
.pf-gear { margin-top: 8px; font-size: 13px; }
@media (max-width: 640px) { .slots, .g-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.gear-edit { display: flex; gap: 8px; align-items: center; background: #fffaf0; border: 1px solid #e3d6bb; border-radius: 4px; padding: 4px 8px; }
.gear-edit label { width: 80px !important; flex-direction: row !important; align-items: center; gap: 4px !important; }
.gear-edit label.chk { width: auto !important; min-height: 0; }

.loot-wrap { padding: 0 16px 12px; }
.item-loot { padding: 0 0 6px 24px; margin-top: -6px; }
.loot { border: 1px dashed #cfbf9f; border-radius: 4px; background: #fbf3e2; }
.loot > summary { cursor: pointer; padding: 10px 12px; font-weight: 700; font-size: 14px; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.loot-form { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 6px; }
.loot-row { display: grid; grid-template-columns: minmax(0, 2fr) 80px 70px 70px 80px; gap: 6px; align-items: center; }
.loot-row.head { font-size: 12px; color: #6b5a48; }
.loot-row.new { border-top: 1px dashed #cfbf9f; padding-top: 6px; }
.loot-row .chk { min-height: 0 !important; font-size: 13px; }
.src { margin: 0; font-size: 13px; color: #5a4128; }
.src.none { color: var(--red); }
@media (max-width: 640px) { .loot-row { grid-template-columns: minmax(0,1fr) 60px 56px 56px; } .loot-row > :last-child { grid-column: 1 / -1; } }
.yields { color: var(--brown) !important; }

/* ── 구역·NPC ── */
.npc-fig { margin: 0; padding: 0; border: none; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.npc-fig:hover img, .npc-fig:hover svg { filter: brightness(1.1) drop-shadow(0 0 6px rgba(255,240,200,.8)); }
.npc-cap { background: rgba(28,25,34,.8); color: var(--paper); font-size: 13px; padding: 3px 10px; border-radius: 4px; display: flex; gap: 6px; align-items: center; }
.npc-cap small { background: var(--red); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 11px; }
.spot-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spot-btn { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid rgba(255,250,240,.7); background: rgba(28,25,34,.75); color: var(--paper); font-size: 14px; }
.spot-btn:hover { background: rgba(28,25,34,.9); }
.spot-btn.out { border-color: var(--muted); }
.spot-desc { color: var(--paper); background: rgba(28,25,34,.65); padding: 6px 10px; border-radius: 4px; font-size: 13px; }
.move-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.move-row > span { min-width: 70px; color: var(--muted); font-size: 13px; }
.npc-top { display: flex; gap: 14px; align-items: center; }
.face.big { width: 72px; height: 72px; font-size: 28px; }
.npc-aff { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.aff-line { display: flex; gap: 10px; align-items: baseline; }
.aff-line span, .npc-aff small { font-size: 13px; color: #6b5a48; }
.npc-say { background: #fffaf0; border: 2px solid var(--brown); border-radius: 6px; padding: 12px 14px; }
.npc-say b { font-family: var(--font-title); color: var(--red); }
.npc-say p { margin: 6px 0 0; font-size: 17px; line-height: 1.6; }
.npc-acts, .npc-gift { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.npc-gift select { min-height: 40px; border: 2px solid #cfbf9f; border-radius: 4px; padding: 0 8px; background: #fff; }
.qty { width: 64px; min-height: 40px; border: 2px solid #cfbf9f; border-radius: 4px; padding: 0 6px; }

.npc-set { margin-top: 4px; }
.line-row { display: grid; grid-template-columns: 90px minmax(0,1fr) 80px; gap: 6px; align-items: center; }
.line-row.head { font-size: 12px; color: #6b5a48; }
.line-row.new { border-top: 1px dashed #cfbf9f; padding-top: 6px; }
.spot-edit { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; padding: 10px; background: #fffaf0; border: 1px solid #e3d6bb; border-radius: 4px; }
.spot-edit label { width: 150px; }
.spot-edit label.grow { flex: 1 1 220px; width: auto; }
.spot-edit label.chk { width: auto; }
.spot-edit .img-field img { max-height: 60px; }
.spot-edit.new { border-style: dashed; }

.spot-bar { flex-direction: column; align-items: flex-start; }
.spot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.spot-btn.talk { border-color: #e8c040; }
.btn.floo { border-color: #6fbf73; }
.spot-edit label.full { flex: 1 1 100%; width: auto; }

.party { bottom: 116px; }
@media (max-width: 640px) { .party { bottom: 120px; } }

/* 프로필 창: 여백은 app.js가 화면에 맞춰 정해요 */
.pf-in { padding: 32px 24px 40px 24px; }
.pf-head h2 { font-size: clamp(28px, 3vw, 44px); word-break: keep-all; line-height: 1.2; }
.pf-text { flex: 1 1 380px; max-width: 560px; }
.pf-in.narrow .pf-body { display: none; }
.pf-in.narrow .pf-text { max-width: none; }
.stats div { gap: 8px; }
.stats div > span:first-child { white-space: nowrap; }
@media (max-width: 900px) { .list, .note { z-index: auto !important; } }

/* ── 집 배치도 ── */
.plan { padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #efe3c8; }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.room { min-height: 64px; border: 2px solid #b7a27e; border-radius: 4px; background: #fffaf0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; text-align: left; color: var(--ink); }
.room b { font-size: 14px; }
.room small { font-size: 11px; }
.room .who-p { color: var(--red); font-weight: 700; }
.room .who-a { color: #5f7a4a; }
.room.here { border-color: var(--red); background: #fff; box-shadow: inset 0 0 0 2px rgba(158,43,37,.15); }
.plan-foot { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-foot .btn { color: var(--ink); border-color: var(--brown); }
/* ── 반려동물 창 ── */
.m-warn { margin: 0; padding: 8px 12px; background: #f7d9d4; border-radius: 4px; font-size: 14px; }
.pet-card { border: 2px solid #cfbf9f; border-radius: 6px; background: #fffaf0; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pet-card.focus { border-color: var(--red); }
.pet-head { display: flex; gap: 12px; align-items: center; }
.pet-head > div:nth-child(2) { display: flex; flex-direction: column; flex: 1; }
.pet-head small { color: #6b5a48; }
.pet-mood { width: 160px; display: flex; flex-direction: column; gap: 2px; }
.pet-rel { margin: 0; font-size: 13px; color: #5a4128; }
.pet-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.pet-stats > div { display: grid; grid-template-columns: 48px minmax(0,1fr) 28px; gap: 6px; align-items: center; font-size: 13px; }
.pet-stats .bar i { background: #5f7a4a; }
.pet-stats .low .bar i { background: #b8433a; }
.pet-stats .low span { color: #b8433a; font-weight: 700; }
.pet-inc { display: flex; flex-direction: column; gap: 6px; }
.inc { display: flex; gap: 10px; align-items: center; justify-content: space-between; background: #f7e6c8; border-radius: 4px; padding: 8px 10px; font-size: 14px; }
.inc.sick { background: #f7d9d4; }
.pet-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.rels div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.4fr) 40px; gap: 8px; border-bottom: 1px dashed #b7a27e; padding: 3px 0; }
.place-need { color: var(--red) !important; }

.rel-edit { display: grid; grid-template-columns: 140px minmax(0,1fr) 80px 70px; gap: 6px; align-items: center; }
.rel-edit.new { grid-template-columns: 180px minmax(0,1fr) 80px; }
.rx-row { display: grid; grid-template-columns: 110px 170px 70px minmax(0,1fr) 70px; gap: 6px; align-items: center; }
.adm-sec h3 { margin: 10px 0 0; font-family: var(--font-title); }
@media (max-width: 760px) { .rx-row, .rel-edit, .rel-edit.new { grid-template-columns: 1fr 1fr; } }

.scene-dot { image-rendering: pixelated; }
.pf-petstats { margin-top: 6px; }
.pf-care { align-self: flex-start; color: var(--ink); border-color: var(--brown); }

/* 프로필 전신 그림: 남는 칸을 넓게 쓰고, 화면 높이에 맞춰 비율 유지 */
.pf-body { flex: 1 1 320px; min-width: 0; position: sticky; top: 0; align-self: flex-start;
  height: calc(100vh - 72px - var(--pf-bottom, 0px)); display: flex; align-items: flex-end; justify-content: center; }
.pf-body .pf-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center bottom; image-rendering: auto; }
.pf-body .pf-img.dot { image-rendering: pixelated; }
.pf-body svg { max-height: 100%; }
@media (max-width: 900px) { .pf-body { position: static; height: auto; } .pf-body .pf-img { height: auto; max-height: 70vh; } }

/* 수첩 접기 — 책갈피를 누르면 간단히 */
.ribbon { position: absolute; top: 0; right: 28px; width: 30px; height: 70px; padding: 0 4px; border: none; background: transparent; cursor: pointer; z-index: 2; transition: transform .2s; }
.ribbon svg { width: 22px; height: 66px; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.ribbon:hover { transform: translateY(3px); }
.ribbon:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.note.folded .ribbon { height: 50px; }
.note.folded .ribbon svg { height: 46px; }
.note.folded .note-top { height: 20px; }
.note-body.mini { padding: 10px 70px 12px 16px; gap: 8px; }
.note-mini-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.note-mini-id b { font-family: var(--font-title); font-size: 17px; }
.note-mini-id .lv { font-size: 13px; color: var(--brown2); }
.note-mini-id .mini-gold { margin-left: auto; font-size: 13px; }
.note-body.mini .bars { font-size: 12px; grid-template-columns: 26px minmax(0,1fr) 62px; }
.note-body.mini .bar { height: 9px; }
.mini-pts { color: var(--red); font-weight: 700; }

/* 아직 가 본 적 없는 곳 */
.btn.unknown, .spot-btn.unknown, .room.unknown { opacity: .55; border-style: dashed; cursor: not-allowed; }