/* ───── v47 고성 스킨: 석벽 배경 + 목재 상단 + 양피지 읽는 면 ─────
   style.css 뒤에 불러와 색 토큰과 겉모습만 바꾼다(구조·기능 규칙은 style.css 그대로). */

:root {
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", "Noto Serif CJK KR", Georgia, serif;
  --bg: #242321;
  --panel: #f5ebdd;
  --panel2: #ede0c6;
  --line: #cbb78c;
  --text: #30271f;
  --muted: #6a5b46;
  --head: #3a2a14;
  --gold: #7a5a1c;
  --accent: #4a3a2c;
  --on-accent: #f5ebdd;
  --soft: #e6d6b3;
  --good: #3f6b3a;
  --warn: #8a5a14;
  --bad: #8a2f35;
  --story: #7a5a1c;
  --event: #3d5870;
  --choice-bg: #efe2c4;
  --banner-bg: #f0e2bf;
  --banner-bad-bg: #f1d9d3;
  --tag-bg: #e6d8b9;
  --tag-fg: #4b3f2e;
  --toast-bg: #2a2218ee;
  --shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 3px 10px rgba(0, 0, 0, .42);
  --radius: 5px;
  --veil: rgba(245, 235, 221, .80);
  --stone-veil: rgba(22, 20, 18, .38);
  --focus: #a78a52;
  --wood: #352920;
  --wood2: #2a2018;
  --brass: #a78a52;
  --seal: #6b3034;
}
:root[data-theme="dark"] {
  --bg: #181a18;
  --panel: #24231f;
  --panel2: #302b23;
  --line: #504735;
  --text: #e8dfc9;
  --muted: #b9af9b;
  --head: #e3cf9c;
  --gold: #c2a66d;
  --accent: #c2a66d;
  --on-accent: #1b1915;
  --soft: #3a3326;
  --good: #9fb58a;
  --warn: #d4b278;
  --bad: #d99589;
  --story: #c2a66d;
  --event: #a2b8c3;
  --choice-bg: #2b271f;
  --banner-bg: #332c1c;
  --banner-bad-bg: #38221f;
  --tag-bg: #3a3326;
  --tag-fg: #d9cfb8;
  --toast-bg: #000d;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 4px 14px rgba(0, 0, 0, .55);
  --veil: rgba(32, 31, 27, .93);
  --stone-veil: rgba(10, 11, 10, .55);
  --focus: #c2a66d;
  --wood: #211c18;
  --wood2: #181410;
  --brass: #c2a66d;
  --seal: #8a4348;
}

/* 바깥 배경: 석벽(내용 뒤에서는 대비를 낮춘다) */
html { background: var(--bg); }
body { background: transparent; position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--stone-veil), var(--stone-veil)), url(/img/stone.webp) 72% center / cover no-repeat;
}
body:not(.shell-on)::before {
  background: linear-gradient(rgba(10, 10, 9, .0), rgba(10, 10, 9, .18)), url(/img/stone.webp) 72% center / cover no-repeat;
}
:root[data-theme="dark"] body:not(.shell-on)::before {
  background: linear-gradient(rgba(6, 7, 6, .12), rgba(6, 7, 6, .34)), url(/img/stone.webp) 72% center / cover no-repeat;
}

/* 글꼴: 제목은 명조 계열, 본문·조작은 고딕 계열 */
h1, h2, .brand, .pp-title { font-family: var(--serif); }
h1 { color: var(--gold); }
h2 { font-size: 1.12rem; letter-spacing: .01em; }
.card h2 { border-bottom: 1px solid var(--line); padding-bottom: 4px; margin-bottom: 9px; }
.card h2.nobd, .noticecard h2, .cardhead h2 { border-bottom: 0; padding-bottom: 0; }

/* 읽는 면: 균일한 양피지(질감은 아주 약하게) */
.card {
  background-color: var(--panel);
  background-image: linear-gradient(var(--veil), var(--veil)), url(/img/paper.webp);
  background-size: auto, 360px;
  border: 1px solid var(--line);
  border-top-color: color-mix(in srgb, var(--brass) 55%, var(--line));
  border-radius: var(--radius);
}
.card.choice { border-color: var(--brass); }
.card.battle { border-color: var(--bad); }

/* 입력과 버튼 */
input[type=text], input[type=password], select, textarea {
  background: color-mix(in srgb, var(--panel2) 70%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--muted) 55%, var(--line));
  border-radius: 3px;
}
:root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=password],
:root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--panel2); border-color: #88785b; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
button { border-radius: 3px; background: color-mix(in srgb, var(--panel2) 80%, var(--panel)); }
button:hover:not(:disabled) { border-color: var(--brass); }
button:focus-visible, a:focus-visible, .tm-chip:focus-visible, .tm-dotb:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--brass); color: var(--on-accent); }
button.primary:hover:not(:disabled) { filter: brightness(1.12); }
:root[data-theme="dark"] button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button.ghost { background: transparent; }
.chip, .pill { border-radius: 3px; }
.pill { border-radius: 999px; }

/* 상단 바·탭: 짙은 목재 + 황동 선 (이 안에서는 밝은 글자색 토큰으로 바꾼다) */
.topbar, .tabs {
  --text: #eadfc8; --muted: #bdb29d; --line: #5b4a38; --gold: #d8bd80; --head: #e9d9ae;
  --panel2: rgba(255, 255, 255, .07); --soft: rgba(255, 255, 255, .10); --accent: #d8bd80; --on-accent: #1b1915;
  color: var(--text);
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood2) 100%);
  border: 1px solid #14100c;
  border-bottom: 2px solid var(--brass);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
}
.tabs { border-radius: 0; border-left: 0; border-right: 0; }
.topbar button, .tabs button { background: transparent; color: var(--text); border-color: transparent; }
.topbar button:hover:not(:disabled) { border-color: var(--brass); background: rgba(255, 255, 255, .06); }
.topbar .chip.gal { color: #e6cf94; border-color: #a78a52; background: rgba(0, 0, 0, .18); }
.topbar .chip { background: rgba(255, 255, 255, .07); border-color: #5b4a38; color: var(--muted); }
.topbar .chip.house { color: var(--text); }
.topbar .pill b { color: #f3e8ce; }
.tabs button.active { color: #f0d996; box-shadow: inset 0 3px 0 var(--brass); }
.guidelink { color: #e6cf94; border-color: transparent; }
.guidelink:hover { background: rgba(255, 255, 255, .08); }
.topbar a { color: #e6cf94; }

/* 학생 정보 칸의 이동 메뉴(왼쪽): 종이 위 먹물 선택 표시 */
.sidenav button.active { box-shadow: inset 0 -2px 0 var(--brass); }

/* 지도: 오래된 목재 프레임(황동 모서리) */
.mapframe {
  --fw: clamp(8px, 1.8vw, 20px);
  position: relative;
  border: var(--fw) solid transparent;
  border-image: url(/img/frame.webp) 130 / var(--fw) stretch;
  background: #3a2c20;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
:root[data-theme="dark"] .mapframe { filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6)) drop-shadow(0 0 14px rgba(214, 160, 80, .14)); }
.townmap { border: 0; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55) inset; }

/* 장소 이름표(누르면 정보 열기) */
.tm-chip {
  pointer-events: auto; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.25;
  background: rgba(244, 233, 202, .95); color: #30271f; border: 1px solid #4a3720; border-radius: 3px;
  padding: 2px 9px; font-family: var(--serif); font-size: .78rem; font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.tm-chip .tm-n2 { font-family: inherit; font-size: .66rem; font-weight: 600; color: #6a5030; }
.tm-chip:hover { background: #fbf1d4; }
.tm-chip.on { border: 2px double #6b3034; box-shadow: 0 0 0 2px #a78a52, 0 2px 6px rgba(0, 0, 0, .5); padding: 1px 8px; }
.tm-dotb { border-radius: 50%; }
.tm-more { display: inline-block; margin-left: 2px; font-size: .68rem; line-height: 14px; font-weight: 700; color: #30271f; background: rgba(244, 233, 202, .92); padding: 0 4px; border-radius: 3px; border: 1px solid #4a3720; }
@media (max-width: 520px) { .tm-chip { font-size: .64rem; padding: 1px 6px; } .tm-chip .tm-n2 { font-size: .58rem; } }

/* 같은 장소로 갈 수 있는 목록(키보드·좁은 화면용) */
.placetabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.placetab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; min-height: 40px; font-family: var(--serif); font-weight: 700; }
.placetab .pt-n { font-family: var(--font-sans, inherit); font-weight: 500; font-size: .8rem; color: var(--muted); }
.placetab .pt-here { font-size: .7rem; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 3px; padding: 0 5px; }
.placetab.on { border: 2px double var(--seal); background: var(--soft); box-shadow: 0 0 0 1px var(--brass); }
.placepanel { margin-top: 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--seal); border-radius: 3px; background: color-mix(in srgb, var(--panel2) 75%, var(--panel)); }
.pp-title { margin: 0; font-size: 1.15rem; color: var(--head); }
.pp-desc { margin: 6px 0 8px; line-height: 1.6; }
.pp-who { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pp-who .tl-who { padding: 2px 0 2px 6px; }

/* 봉인된 편지: 안 읽은 쪽지·초대·공지 */
.seal { display: inline-block; height: auto; flex: none; vertical-align: middle; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); user-select: none; }
.seal.sm { width: 36px; }
.seal.xs { width: 24px; margin: 0 2px; }
.alertrow .row { flex-wrap: nowrap; }
.noticecard.compact .cardhead .seal { margin-right: -2px; }

/* 목록·기록의 선은 종이 위 잉크선 */
.feeditem, .tunefld { border-bottom-color: color-mix(in srgb, var(--line) 80%, transparent); }
.log { border-left-color: var(--brass); }

/* 알림 토스트 */
.toast { border: 1px solid var(--brass); border-radius: 4px; }

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}



/* 좁은 화면 상단: 이름 줄 아래에 메뉴를 한 줄 묶음으로 */
@media (max-width: 899px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 4px; padding: 7px 9px; }
  .tb-left { flex-wrap: nowrap; }
  .tb-left b { max-width: 14ch; }
  .tb-right { gap: 2px; justify-content: flex-start; }
  .tb-right .chip.gal { margin-right: 4px; }
  .tb-right button.icon, .tb-right .guidelink { padding: 4px 7px; font-size: .8rem; }
}

/* 장소 정보: 지도 위에 뜨는 쪽지 */
.placepanel.pop { position: absolute; left: 50%; transform: translateX(-50%); width: min(94%, 420px); z-index: 3; margin: 0;
  background: var(--panel); box-shadow: 0 6px 18px rgba(0, 0, 0, .55); max-height: 44%; overflow-y: auto; padding: 8px 12px; }
.placepanel.pop.down { top: 8px; }
.placepanel.pop.up { bottom: 8px; }
.placepanel.pop .pp-desc { margin: 4px 0 6px; font-size: .9rem; }
.placepanel.pop .pp-list { max-height: 90px; overflow-y: auto; }

/* 일지 홈 배치: 알림 줄 → 지도 + 오른쪽(수정구 / 학교 안 사람들 2분할, 지도 높이에 맞춤) → 채팅 */
.loghome { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; align-items: start; }
.loghome > div { min-width: 0; }
.lh-banners:empty { display: none; }
.fortune.compact .crystalrow { gap: 10px; }
.fortune.compact .crystal { flex: none; width: 46px; height: 46px; }
.fortune.compact p { margin: 2px 0; }
.crystalstory.one { margin-top: 0; font-size: .88rem; line-height: 1.5; }
.fdetail { margin-top: 6px; }
.fdetail summary { cursor: pointer; color: var(--muted); }
.fdetail .row { margin: 4px 0; }
.rightlog { display: flex; flex-direction: column; gap: 11px; flex: 1; min-height: 0; }
.rightlog > .card { margin: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.rightlog .scrollbox { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.rightlog .feed { max-height: none; }
@media (min-width: 1100px) {
  .loghome { grid-template-columns: minmax(0, 1fr) 255px; }
  .lh-banners { grid-column: 1 / -1; }
  .lh-map { grid-column: 1; grid-row: 2; }
  .lh-side { grid-column: 2; grid-row: 2; align-self: stretch; contain: size; display: grid; grid-template-rows: 1fr 1fr; gap: 11px; margin-bottom: 11px; min-height: 0; overflow: hidden; }
  .lh-side > .card { margin: 0; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  .lh-chat { grid-column: 1 / -1; grid-row: 3; }
  .shell .lh-chat .dockcard .chatbox { height: 300px; flex: none; }
  .shell .lh-chat .dockcard { display: block; }
  .shell .side-right .onlinecard { max-height: 24%; }
}

.lh-map .mapframe { max-width: 760px; margin-left: auto; margin-right: auto; }

/* 모든 칸은 안에서 스크롤되어 맨 아래까지 볼 수 있다(스크롤바는 황동색으로 눈에 띄게) */
.side, .maincol, .side-right, .scrollbox, .chatbox, .onlist, .noticebody, .lh-side > .card, .placepanel.pop, .pp-list, .rightlog > .card {
  scrollbar-width: thin; scrollbar-color: var(--brass) transparent;
}
.side::-webkit-scrollbar, .maincol::-webkit-scrollbar, .side-right::-webkit-scrollbar, .scrollbox::-webkit-scrollbar, .chatbox::-webkit-scrollbar,
.onlist::-webkit-scrollbar, .noticebody::-webkit-scrollbar, .lh-side > .card::-webkit-scrollbar, .placepanel.pop::-webkit-scrollbar, .pp-list::-webkit-scrollbar { width: 8px; height: 8px; }
.side::-webkit-scrollbar-thumb, .maincol::-webkit-scrollbar-thumb, .side-right::-webkit-scrollbar-thumb, .scrollbox::-webkit-scrollbar-thumb, .chatbox::-webkit-scrollbar-thumb,
.onlist::-webkit-scrollbar-thumb, .noticebody::-webkit-scrollbar-thumb, .lh-side > .card::-webkit-scrollbar-thumb, .placepanel.pop::-webkit-scrollbar-thumb, .pp-list::-webkit-scrollbar-thumb { background: var(--brass); border-radius: 4px; }
@media (min-width: 1100px) {
  .shell .side-right { overflow-y: auto; overflow-x: hidden; }
  .shell .side-right > .card, .shell .side-right > .rightlog { flex-shrink: 0; }
  .rightlog { flex: 1 0 auto; }
  .rightlog > .card { flex: 1 1 0; min-height: 220px; }
  .shell .onlinecard { flex-shrink: 0; }
  .lh-side > .card { min-height: 170px; }
  .loghome { padding-bottom: 8px; }
}

/* v47: 채팅은 오른쪽 칸(기존 위치)에 길게, 학교 일지·지금 아이들은은 지도 아래에 같은 크기로 나란히 */
@media (min-width: 1100px) {
  .lh-pair { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
  .lh-pair > .card { margin: 0 0 8px; height: 340px; display: flex; flex-direction: column; min-height: 0; }
  .lh-pair .scrollbox, .lh-pair .feed { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
  .shell .side-right .onlinecard { max-height: 30%; }
}

/* 학교 안 사람들: 칸 안쪽을 작게 */
.npccard h2 { font-size: 1rem; margin-bottom: 4px; }
.npccard > p.muted { display: none; }
.npclist { gap: 4px; margin-top: 4px; }
.npcrow { padding: 4px 8px; gap: 6px; border-radius: 3px; }
.npcrow b { font-size: .86rem; }
.npcrow .muted.small { font-size: .72rem; line-height: 1.3; }
.npcrow button.sm { padding: 2px 7px; font-size: .78rem; }
.npctalk { margin-top: 6px; padding: 6px 8px; }
.npcline { font-size: .88rem; line-height: 1.5; }
.npcchoices { gap: 4px; }
.npcchoices .pick { padding: 5px 8px; font-size: .84rem; }

/* 장소 정보 쪽지: 이름 → 지금 있는 사람 → 버튼 → 설명(작게) */
.placepanel.pop { width: min(92%, 330px); padding: 6px 10px 7px; max-height: 60%; }
.placepanel.pop .pp-head { gap: 6px; flex-wrap: nowrap; }
.placepanel.pop .pp-title { font-size: .98rem; }
.placepanel.pop .pp-head button { padding: 1px 7px; font-size: .74rem; }
.placepanel.pop .pp-who { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 2px 0 5px; padding: 0; border: 0; font-size: .8rem; }
.placepanel.pop .pp-count { color: var(--muted); font-size: .74rem; }
.placepanel.pop .pp-p { font-weight: 600; }
.placepanel.pop .pp-acts { gap: 5px; margin-bottom: 4px; }
.placepanel.pop .pp-acts button { padding: 2px 9px; font-size: .78rem; }
.placepanel.pop .pp-desc { margin: 0; font-size: .7rem; line-height: 1.4; color: var(--muted); }

/* 전투 탭 하위(탐험·토벌·수련·현상금·규칙): 작고 균형 있게 */
.subbody .card { padding: 8px 11px; margin-bottom: 8px; }
.subbody .card h2 { font-size: .98rem; margin-bottom: 5px; padding-bottom: 3px; }
.subbody .card h3 { font-size: .9rem; margin-bottom: 4px; }
.subbody p { margin: 0 0 5px; }
.subbody .muted.small, .subbody p.small { font-size: .76rem; line-height: 1.45; }
.subbody button { padding: 4px 10px; font-size: .84rem; }
.subbody button.primary { padding: 4px 11px; }
.subbody .chip { font-size: .7rem; padding: 0 6px; }
.subbody .bar { height: 6px; margin: 4px 0; }
.subbody .log { padding: 4px 8px; font-size: .84rem; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.cgrid > .card, .cgrid > .pick { margin: 0; }
@media (min-width: 700px) { .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sub-explore .cgrid { margin-top: 0; }
.sub-explore .cgrid .card .row.small { gap: 4px; margin-top: 3px; }
.sub-explore .cgrid .card button.primary { width: 100%; margin-top: 2px; }
.sub-skill .cgrid > .pick { padding: 7px 9px; }
.sub-skill .skillrow .nm { font-size: .9rem; }
.sub-skill .skillrow .mt { margin-top: 4px; }
.sub-skill .skillrow button { width: 100%; }
.sub-raid .raidmeters { gap: 5px 10px; margin: 5px 0; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.sub-raid .raidhints { margin: 4px 0; padding: 4px 8px; }
.sub-raid .pick, .sub-bounty .pick { padding: 6px 9px; }
.sub-raid .skillpick, .sub-raid .row.mt { margin-top: 5px; }
.sub-rules .ruledoc { padding: 6px 11px; }
.sub-rules .ruledoc > summary { margin-bottom: 4px; font-size: .9rem; }
.sub-rules .ruletable { font-size: .76rem; }
.sub-rules .ruletable th, .sub-rules .ruletable td { padding: 2px 6px; }
.sub-rules .ruledoc p, .sub-rules .ruledoc li { font-size: .8rem; line-height: 1.5; }

/* 장소 창: 이름 → 지금 있는 학생과 하는 일 → 버튼 */
.placepanel.pop .pp-who { display: block; margin: 2px 0 5px; font-size: .78rem; }
.placepanel.pop .pp-count { font-size: .72rem; margin-bottom: 1px; }
.placepanel.pop .pp-list { max-height: 64px; overflow-y: auto; }
.placepanel.pop .pp-p { padding: 1px 0; line-height: 1.35; }
.placepanel.pop .pp-p .muted { font-size: .72rem; }

/* 상점 물건 목록: 3열 격자, 작은 카드 */
.itemgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; margin-top: 6px; }
@media (min-width: 520px) { .itemgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .itemgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.itemgrid > .itemcard { margin: 0; padding: 6px 9px; display: flex; flex-direction: column; gap: 2px; }
.itemgrid .itemcard .nm { font-size: .88rem; }
.itemgrid .itemcard > .muted.small { font-size: .74rem; line-height: 1.4; flex: 1; }
/* 카드 아래쪽 줄(보유·가격·버튼): 좁아도 글자가 한 글자씩 세로로 떨어지지 않게, 보유 표시는 윗줄에 통째로 두고 가격·버튼은 아랫줄에 나란히 */
.itemgrid .itemcard .row.mt { flex-wrap: wrap; align-items: center; }
.itemgrid .itemcard .row.mt > .muted.small { flex: 1 1 100%; font-size: .74rem; line-height: 1.3; white-space: normal; word-break: keep-all; }
.itemgrid .itemcard .row.mt > b { flex: 0 0 auto; white-space: nowrap; }
.itemgrid .itemcard .row.mt > button { flex: 0 0 auto; white-space: nowrap; margin-left: auto; }
.itemgrid .itemcard .nm { word-break: keep-all; overflow-wrap: anywhere; }
.itemgrid .itemcard .row.mt { margin-top: 3px; gap: 4px 6px; flex-wrap: wrap; }
.itemgrid .itemcard .row.mt b { font-size: .84rem; }
.itemgrid .itemcard button { padding: 3px 10px; font-size: .8rem; }
.itemgrid .itemcard .chip { font-size: .66rem; padding: 0 5px; }

/* 채팅·쪽지 글자 살짝 작게 */
.msg .tx, .dmmsg { font-size: .88rem; line-height: 1.4; }
.msg .t, .dmwho .t { font-size: .68rem; }
.msg .tx { padding: 5px 8px; }
.msg { margin-bottom: 7px; }

/* 착장: 선화 마네킹 + 부위별 이름표 (그림은 마스크라 라이트·다크 글자색을 그대로 따른다) */
.lookfig { position: relative; width: 100%; max-width: 360px; aspect-ratio: 100 / 105; margin: 6px auto 2px; color: var(--text); }
.lf-img { position: absolute; left: 50%; top: 8.1%; height: 83.8%; aspect-ratio: 182 / 256; transform: translateX(-50%); pointer-events: none;
  background: var(--brass, #a78a52); -webkit-mask: url(/img/avatar-figure.png) center / contain no-repeat; mask: url(/img/avatar-figure.png) center / contain no-repeat; }
.lf-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lf-line { stroke: var(--muted); stroke-width: .3; stroke-dasharray: 1.2 1.2; opacity: .7; }
.lf-line.on { stroke: var(--brass, #a78a52); stroke-dasharray: none; opacity: 1; }
.lf-dot { fill: none; stroke: var(--muted); stroke-width: .3; }
.lf-dot.on { fill: var(--brass, #a78a52); stroke: var(--brass, #a78a52); }
.lf-lab { position: absolute; width: 23%; transform: translateY(-50%); display: flex; flex-direction: column; line-height: 1.25; font-size: .78rem; }
.lf-lab.l { left: 1%; text-align: left; align-items: flex-start; }
.lf-lab.r { right: 1%; text-align: right; align-items: flex-end; }
.lf-slot { color: var(--muted); font-size: .68rem; }
.lf-name { word-break: keep-all; overflow-wrap: anywhere; }
.lf-lab:not(.on) .lf-name { color: var(--muted); }
.lf-lab.on .lf-name { font-weight: 700; }
.lf-off { margin-top: 2px; padding: 0 8px; font-size: .7rem; }

/* 가방 화면: 왼쪽 착장(벗기) / 오른쪽 위 보내기 두 칸 나란히 + 아래 소모품 사각형 / 맨 아래 착용 가능한 아이템. 길면 본문 스크롤. */
.bagwrap { container-type: inline-size; }
.baghead { margin-bottom: 12px; }
.baggrid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.baggrid > .card, .bg-sendcol > .card { margin: 0; min-width: 0; }
.bg-sendcol { display: grid; gap: 12px; min-width: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: stretch; }
.sendcard { display: flex; flex-direction: column; }
.bagline.last { margin-top: auto; padding-top: 6px; }
.bagline.last .block { width: 100%; }
.bg-sendcol h3 { margin-bottom: 4px; }
.bg-sendcol .muted.small { font-size: .74rem; line-height: 1.35; }
.bagitems { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)) !important; align-items: start; }
.bagitems .giftnote { max-height: 5.6em; overflow-y: auto; scrollbar-width: thin; }
.bagitems .itemcard > .muted.small { flex: 0 0 auto; }
.bagline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.bagline > :first-child { flex: 1 1 140px; min-width: 0; }
.bagline select { flex: 1 1 130px; min-width: 0; }
.bagline .numin { width: 100%; flex: 1 1 auto; }
.bagline .giftcount { width: 64px; flex: 0 0 auto; }
.bagscroll { overflow-y: auto; min-height: 0; max-height: 320px; scrollbar-width: thin; padding-right: 2px; }
@container (min-width: 640px) {
  .baggrid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-areas: "equip send" "equip misc" "equip wear"; align-items: start; }
  .bg-equip { grid-area: equip; position: sticky; top: 8px; }
  .bg-sendcol { grid-area: send; }
  .bg-misc { grid-area: misc; }
  .bg-wear { grid-area: wear; }
  .bagscroll { max-height: 360px; }
}

/* 보내기·선물하기 칸을 작고 촘촘하게 */
.sendcard { padding: 10px 12px; }
.sendcard h3 { font-size: 1rem; margin: 0 0 2px; }
.sendcard .muted.small { font-size: .7rem; line-height: 1.3; margin: 0 0 2px; }
.sendcard input, .sendcard select, .sendcard button { font-size: .82rem; }
.sendcard input, .sendcard select { padding: 5px 8px; min-height: 0; }
.sendcard .bagline { margin-top: 5px; gap: 5px; }

.roomtools{margin:4px 0}
.roompanel{max-height:240px;overflow:auto;margin-top:6px;padding:8px;border:1px solid var(--line,#8886);border-radius:8px;display:flex;flex-direction:column;gap:6px}
.roompanel input{width:100%}
.row.wrap{flex-wrap:wrap;gap:4px}

.chanbar{position:relative}
.chandd{display:flex;align-items:center;gap:6px;width:100%;justify-content:space-between}
.chanmenu{position:absolute;left:0;right:0;top:100%;z-index:30;margin-top:4px;max-height:260px;overflow:auto;display:flex;flex-direction:column;gap:2px;padding:4px;border:1px solid var(--line,#8886);border-radius:8px;background:var(--panel,#f4ecd8);box-shadow:0 6px 18px #0005}
.chanitem{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left;padding:6px 8px;border-radius:6px;background:transparent;border:0;color:inherit}
.chanitem:hover,.chanitem.on{background:#8883}
#chanbar.chanbar{overflow:visible}
.chanbar:not(#chanbar){overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch}
.chanbar:not(#chanbar) > .chan{flex:none;white-space:nowrap}

.chatrow{position:relative}
.mentionsug{position:absolute;left:0;right:0;bottom:100%;z-index:30;margin-bottom:4px;display:flex;flex-direction:column;padding:4px;border:1px solid var(--line,#8886);border-radius:8px;background:var(--panel,#f4ecd8);box-shadow:0 6px 18px #0005}
.mentionsug[hidden]{display:none}
.sugrow{display:flex;align-items:center;gap:6px;text-align:left;padding:5px 8px;border:0;border-radius:6px;background:transparent;color:inherit}
.sugrow:hover{background:#8883}
.mention{font-weight:700;color:#2f5f9e;background:#5b8fd433;border-radius:4px;padding:0 2px}
.mention.me{background:#e0a82e55;color:inherit}
.msg .tx em{font-style:italic}.msg .tx strong{font-weight:800}
.roompanel input[type=checkbox]{width:auto;flex:none;margin:0}.roompanel label.row{display:flex;flex-direction:row;align-items:center;gap:6px}

.msg .tx.dicemsg{font-weight:700;background:#b08a3e33;border:1px dashed #b08a3e;border-radius:8px}

.celebover{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000a;padding:16px;animation:celebin .5s ease}
.celebcard{max-width:420px;width:100%;text-align:center;padding:26px 22px;border:2px solid #b08a3e;border-radius:14px;background:var(--panel,#f4ecd8);color:var(--ink,inherit);box-shadow:0 10px 40px #000a}
.celebkind{font-size:.8rem;letter-spacing:.3em;opacity:.7;margin-bottom:10px}
.celebline{margin:6px 0;font-size:1.05rem;line-height:1.5}
.celebhouse{margin:12px 0 6px;font-size:2rem;font-weight:800}
@keyframes celebin{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.celebover{animation:none}}

.giftnote{margin-top:4px;color:#8a5a1f;font-weight:700}

.giftnote .gn-from{font-weight:700}
.gn-text{margin-top:2px;padding:4px 8px;border-left:3px solid #b08a3e;background:#b08a3e1f;border-radius:4px;font-weight:400;white-space:pre-wrap;word-break:break-word;font-size:.85rem}
.giftnoteinput{width:100%;resize:vertical;min-height:44px;box-sizing:border-box}
.right{text-align:right}
.giftlog{margin-top:12px}
.giftlist{max-height:280px;overflow-y:auto}
.giftrow{padding:6px 0;border-bottom:1px dashed #8884}
.tabs{position:fixed!important;bottom:0;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}

/* 폰 하단 메뉴: 칸이 많거나 글자가 크면 옆으로 밀어서 모두 볼 수 있다 */
.tabs{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex:1 0 auto;min-width:3.4em;padding-left:8px;padding-right:8px}