/* 화면별 스타일: 로비 지도, 알림판, 집, 랭킹, 기념사진, 메모판, 로그인 */

/* ┌─ 여백·배치 조절판 ──────────────────────────────────────────────┐
   │ 화면 배치·여백·크기·색은 아래 :root 값만 고치면 된다(단위 px).   │
   │ 이 파일의 규칙들이 이 값을 쓴다. 공통 색·글꼴·간격은 tokens.css. │
   │ 값을 바꾼 뒤 브라우저 새로고침(Ctrl+F5)만 하면 된다.             │
   └─────────────────────────────────────────────────────────────────┘ */
:root {
  /* 글자 */
  --page-title-size: 30px;     /* 화면 제목(노란 리본) 글자 */
  --tab-title-size: 22px;      /* 칸 제목(파란 탭) 글자 */
  --map-ribbon-size: 30px;     /* 지도 제목(노란 리본) 글자 */

  /* 리본 제목 */
  --ribbon-h: 84px;            /* 리본 높이 (글자 30px 기준. 글자를 바꾸면 2.1배쯤으로) */
  --ribbon-end: 54px;          /* 리본 양 끝 접힌 부분 너비 */
  --map-ribbon-h: var(--ribbon-h); /* 지도 제목 리본 높이 (절반이 상자 위로 나온다) */
  --red-ribbon-h: 60px;        /* 이웃·주민 소식 빨간 리본 제목 높이 */
  --red-ribbon-pad-top: 9px;   /* 그 리본 글자 위 여백 */
  --ribbon-red-ink: #9c2c3c;   /* 이웃·주민 소식 칸 제목(빨간 리본) 글자 테두리 */

  /* 갈색 판 (화면 내용 전체를 감싸는 판) */
  --board-out: 26px;           /* 판이 내용보다 좌우로 더 나오는 폭 */
  --board-top: 30px;           /* 화면 맨 위 ~ 판 윗선 (화면 제목 리본이 이 선에 걸친다) */
  --board-pad: 35px;           /* 마지막 칸 ~ 판 아랫선 (판 안쪽 아래 여백) */
  --book-edge-bottom: 52px;    /* 이웃·주민 소식 책 판: 아래 책장 두께 (마지막 칸 ~ 책 아랫선 여백에 더해진다) */

  /* 칸 (크림 점선 상자) */
  --panel-pad: 40px;           /* 칸 안쪽 여백 (점선 안쪽 ~ 내용) */
  --board-gap: 18px;           /* 칸과 칸 사이 간격 (위아래·좌우 같이). layout/boardMasonry.ts 도 읽는다 */
  --tab-h: 50px;               /* 칸 제목 탭 높이 = 칸 위로 튀어나오는 높이 */
  --tab-indent: -12px;         /* 칸 제목 탭이 칸 왼쪽 끝에서 들어온 거리 */
  --title-tools-drop: -10px;   /* 칸 오른쪽 위 ?·작은 단추가 칸 윗선 아래로 내려오는 깊이 */
  --title-tools-raise: 20px;   /* 칸 오른쪽 위 ?·더 보기 같은 작은 단추를 이만큼 더 위로 (지도 칸의 ? 는 리본 옆이라 빼고) */
  --title-side: 290px;         /* 넓은 화면에서 제목 줄 좌우를 같게 비우는 폭 (왼쪽 바탕 로고 자리) */
  --chip-drop: 0px;            /* 코인 칩을 더 내리거나(+) 올릴(-) 양 */
  --help-size: 28px;           /* ? 단추(IconsOutline30) 크기 */
  --mute-size: 26px;           /* 배경음 음소거 단추(IconsOutline2·3) 크기 */
  --map-help-gap: 12px;        /* 지도 리본 오른쪽 끝과 ? 단추 사이 */
  --map-help-drop: 16px;       /* 지도 리본 윗선에서 ? 단추 윗선까지 (리본 글자 높이에 맞춤) */
  --book-help-gap: 10px;       /* 리본 오른쪽 끝과 ? 단추 사이 */

  /* 아래 메뉴 (가방 단축칸) · 구석 고정 칸 */
  --hotbar-h: 114px;           /* 아래 메뉴 전체 높이 (본문 아래 여백·구석 칸 위치가 이 값을 따른다) */
  --hotbar-slot-w: 76px;       /* 메뉴 칸 너비 */
  --hotbar-slot-h: 84px;       /* 메뉴 칸 높이 */
  --hotbar-font: 16px;         /* 메뉴 글자 */
  --dock-gap: 12px;            /* 화면 가장자리 ~ 고정 칸(핫바·시계·BGM) 사이 */
  --clock-w: 176px;            /* 왼쪽 아래 시계 칸 너비 */
  --bgm-w: 300px;              /* 오른쪽 위 BGM 칸 최대 너비 */

  /* 로비 */
  --side-ratio-roster: 1fr;    /* 오른쪽 세 칸 높이 비율: 지금 마을에서는(랭킹·시세). fr 단위 그대로 적는다 (예: 1.2fr) */
  --side-ratio-news: 1fr;      /* 마을 소식 */
  --side-ratio-board: .5fr;    /* 마을 알림판 */
  --news-more-top: calc(var(--tab-h) + 28px); /* 마을 소식 '더 보기' 단추 위치 */
  --news-more-right: 18px;
  --ticker-h: 34px;            /* 지도 위 확성기 띠 높이 */
  --ticker-step: .22s;         /* 확성기 띠: 글자 하나가 지나가는 시간 (클수록 느리게 흐른다) */
  --news-green: #3c7a2c;       /* 마을 뉴스 탭 글자 테두리 */
  --omen-ink: #7a4fb8;         /* 마을 뉴스 조짐(예고): 보라색 글자 */
  --omen-bg: #f1e9fb;          /* 그 배경 */

  /* 맨 위 공지 띠 */
  --announce-h: 38px;          /* 맨 위 공지 띠 높이 */
  --announce-w: min(760px, calc(100vw - 32px)); /* 맨 위 공지 띠 너비 */
  --announce-step: .2s;        /* 공지 띠: 글자 하나가 지나가는 시간 (클수록 느리다) */
  --announce-bg: #fff4c2;      /* 공지 띠 바탕 (패치 안내는 하늘색, 점검은 분홍) */

  /* 일정표 */
  --cal-festival: #d9487a;     /* 축제 (분홍) */
  --cal-system: #2f86c4;       /* 마을 행사 (경마·특별 이벤트·생일, 시스템이 자동 등록) */
  --cal-town: #3c8a2e;         /* 마을 일정 (관리자) */
  --cal-mine: #8a54c9;         /* 내 일정 */
  --cal-ink: #b03a68;          /* 일정표 탭 글자 테두리 */
  --cal-day: 30px;             /* 달력 한 칸 높이 */

  /* 낚시 */
  --fish-row1-h: 460px;        /* 윗줄(낚시터·시세) 최소 높이 */
  --fish-row2-h: 420px;        /* 아랫줄(방치 낚시·도감) 최소 높이 */
  --idle-btn-cols: 2;          /* 방치 낚시 '걸어 두기' 단추 열 수 */
  --idle-btn-h: 92px;          /* 방치 낚시 '걸어 두기' 단추 최소 높이 */
  --idle-btn-font: 20px;       /* 그 단추 글자 */
  --idle-btn-top: 14px;        /* 단추 묶음 위 여백 */
  --idle-action-font: 17px;    /* 방치 낚시 '건진 것 n마리 가방에 넣기'·'낚싯대 거두기' 글자 */
  --idle-action-pad: 9px 16px; /* 그 단추 안쪽 여백 */
  --catch-cell-w: 200px;       /* 건진 물고기 한 칸 최소 너비 */
  --boom-bg: #e4f6c4;          /* 시세 '대박' 줄 배경 (연두) */
  --boom-line: #7dbb3c;        /* 시세 '대박' 줄 테두리 */

  /* 제작 · 주식 · 직업 */
  --craft-list-h: 520px;       /* 제작 칸 높이 (요리 칸은 진행 중 + 제작 높이에 맞춰진다). 넘치면 칸 안에서 스크롤 */
  --craft-tab-scale: 1.5;      /* 크래프트 '만들기·하우징' 탭 크기 배율 */
  --ing-have: #3c7a2c;         /* 제작 재료: 가진 재료 글자 */
  --ing-have-bg: #e4f6c4;
  --ing-missing: #c0392b;      /* 제작 재료: 모자란 재료 글자 */
  --ing-missing-bg: #fde3df;
  --market-h: 660px;           /* 주식 거래 · 시세 흐름 칸 높이 (둘이 같다). 넘치면 칸 안에서 스크롤 */
  --play-h: 460px;             /* 직업: 현재 활동 · 일 목록 칸 높이 (둘이 같다) */

  /* 카지노 · 슬라임 경주 */
  --wheel-size: 180px;         /* 룰렛 바퀴 지름 */
  --wheel-spin: 3.6s;          /* 룰렛이 도는 시간 */
  --sym-h: 64px;               /* 슬롯 릴 한 칸 높이 */
  --casino-red: #d8443a;
  --casino-black: #3b2f2f;
  --casino-gold: #f2b632;
  --slime-size: 60px;          /* 경주 슬라임 그림 크기 (원본 60px) */

  /* 마이페이지 · 반려동물 */
  --quick-w: 8.5rem;           /* 마이페이지 빠른 이동: 판 밖 오른쪽 칸 너비 */
  --quick-gap: 14px;           /* 판과 빠른 이동 사이 */
  --pet-cell-w: 140px;         /* 반려동물 데려오기: 동물 칸(노란 띠 카드) 너비 */
  --pet-band-h: 26px;          /* 반려동물 고르기: 동물 칸 위 노란 띠 높이 (동물 이름이 이 안에 들어간다) */

  /* 이웃·주민 소식 책 판 · 메모판 */
  --book-max-w: 1280px;        /* 책 판 최대 너비 */
  --book-spine-gap: 72px;      /* 왼쪽 쪽 칸 ~ 오른쪽 쪽 칸 사이 (책등 자리) */
  --book-page-h: calc(100vh - 400px); /* 한 쪽 칸 내용 최대 높이: 책 아래 끝이 아래 메뉴 위에서 끝나게 */
  --book-page-min-h: 420px;    /* 화면이 아주 낮아도 이만큼은 */
  --memo-board-h: max(340px, calc(100vh - 530px)); /* 메모판 높이: 탭·리본·메모 붙이기 줄 몫을 뺀 나머지 */
}
/* 모바일: 아래 메뉴·고정 칸을 줄인다 */
@media (max-width: 760px) {
  :root { --hotbar-h: 100px; --dock-gap: 8px; --clock-w: 150px; }
}

/* 로비 머리: 시계 → DAY 를 가운데에 쌓는다 */
.lobby-greeting { justify-content: center; padding: var(--space-4); }
.day-stack { display: grid; justify-items: center; gap: var(--space-2); }
.world-clock { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); }
.world-clock strong { font-weight: 700; }
.world-clock time { font: 500 var(--text-sm) var(--font-mono); color: var(--color-text-muted); }
.day-bubble { display: flex; align-items: baseline; gap: var(--space-2); }
.day-bubble span, .day-bubble small { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; color: var(--color-text-muted); }
.day-bubble strong { font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--color-leaf-deep); }

/* 월드 지도: 확대·축소·끌기. 구역·장소 좌표는 game/world.py */
.world-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-4); }
.world-viewport { position: relative; height: clamp(380px, 66vh, 620px); overflow: hidden; border: var(--border-card); background: var(--map-sea, #59a8d2); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-width: 3px; border-radius: var(--radius-lg); box-shadow: 0 3px 0 rgba(151, 81, 62, .35); }
.world-viewport.is-dragging { cursor: grabbing; }
.world-map { position: absolute; left: 0; top: 0; width: 4800px; height: 3200px; transform-origin: 0 0; background: var(--map-overlay, none) center / 100% 100% no-repeat, var(--map-sea, #59a8d2) var(--map-image) center / 100% 100% no-repeat; image-rendering: pixelated; --inv: 1; }
.world-map > * { position: absolute; text-decoration: none; color: var(--color-text); image-rendering: auto; }
.world-map img { -webkit-user-drag: none; pointer-events: none; }
.world-map > .district-label { z-index: 2; padding: 2px 10px; border: 0; border-radius: 999px; background: none; font: 700 19px/1.3 var(--font-display); letter-spacing: .22em; color: rgba(31, 41, 35, .42); white-space: nowrap; cursor: pointer; text-shadow: 0 0 4px #fff, 0 0 4px #fff;
  transform: translate(-50%, -50%) scale(max(1, var(--inv))); transition: background .2s, color .2s; }
.world-map > .district-label.is-island { color: rgba(30, 75, 110, .5); }
.world-map > .district-label:hover, .world-map > .district-label.is-active { color: var(--color-leaf-deep); background: rgba(255, 255, 255, .78); text-shadow: none; }
/* 전체 지도에서는 구역 이름을 이름표처럼 또렷하게 */
.is-overview .world-map > .district-label { background: rgba(255, 255, 255, .72); color: rgba(31, 41, 35, .72); letter-spacing: .12em; font-size: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); text-shadow: none; }
.is-overview .world-map > .district-label.is-island { color: #2c5f80; }
.world-map > .district-label.is-other { opacity: .55; }
/* 지역(구·군·읍·면·군도) 이름표: 전체 지도에서만. 지역을 누르면 그 지역의 동네(구역) 이름표가 보인다 */
.world-map > .region-label { z-index: 3; padding: 4px 14px; border: 2px solid rgba(255, 255, 255, .9); border-radius: 999px; background: rgba(255, 250, 240, .9); font: 700 17px/1.3 var(--font-display); letter-spacing: .08em; color: #6b4a2f; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 6px rgba(40, 30, 20, .16); transform: translate(-50%, -50%) scale(var(--inv)); }
.world-map > .region-label.is-island { background: rgba(236, 246, 252, .92); color: #2c5f80; }
.world-map > .region-label:hover { background: #fff; color: var(--color-leaf-deep); }
.world-viewport:not([data-mode="overview"]) .world-map > .region-label { display: none; }
.world-viewport[data-mode="overview"] .world-map > .district-label { display: none; }
.world-map.is-tiny > .region-label { padding: 1px 8px; font-size: 12px; letter-spacing: 0; }
.world-back-region::after { content: " ›"; }
.world-map > .place-spot { z-index: 3; padding: 2px 4px; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%) scale(max(1, calc(var(--inv) * .75))); }
.place-name { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 500; color: rgba(31, 41, 35, .62); white-space: nowrap; text-shadow: 0 0 3px #fff, 0 0 3px #fff; }
.place-spot:hover .place-name, .place-spot.is-active .place-name { color: var(--color-leaf-deep); font-weight: 700; }
/* 아주 작게 볼 때는 장소 이름을 숨기고 아이콘만 (마우스를 올리면 이름) */
.world-map.is-far > .place-spot { transform: translate(-50%, -50%) scale(var(--inv)); }
.world-map.is-far .place-text { display: none; }
.world-map.is-far .place-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .85); font-size: 13px; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.world-map.is-far .place-spot:hover .place-text, .world-map.is-far .place-spot:focus-visible .place-text { display: inline; padding: 0 4px; background: rgba(255, 255, 255, .92); border-radius: 4px; }
/* 구역 보기: 고른 구역 밖은 살짝 어둡게 */
.world-map > .focus-ring { z-index: 1; border-radius: 48px; box-shadow: 0 0 0 9999px rgba(24, 40, 32, .2); outline: 4px dashed rgba(255, 255, 255, .85); outline-offset: -4px; pointer-events: none; animation: focus-in .45s ease-out; }
@keyframes focus-in { from { opacity: 0; } to { opacity: 1; } }
/* 전체 지도의 주민 핀: 화면에서 늘 같은 크기 (--inv), 장소 이름 바로 위에 꽂힌다 */
.world-map > .map-pin { z-index: 4; display: grid; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 0 0;
  transform: scale(var(--inv)) translate(calc(-50% + var(--dx, 0) * 1px), calc(-100% - 12px)); animation: pin-drop .35s ease-out backwards; }
.map-pin .pin-head { position: relative; display: flex; padding: 2px; border-radius: 999px; background: #fff; box-shadow: 0 2px 5px rgba(20, 32, 25, .28); }
.map-pin .pin-head::after { content: ""; position: absolute; top: calc(100% - 2px); left: 50%; margin-left: -6px; border: 6px solid transparent; border-top: 8px solid #fff; filter: drop-shadow(0 2px 1px rgba(20, 32, 25, .18)); }
.map-pin .pin-head > img, .map-pin .pin-initial { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; font-size: 13px; font-weight: 700; color: #3a3226; }
.map-pin.is-group .pin-head > * + * { margin-left: -12px; box-shadow: -2px 0 0 #fff; }
.map-pin .pin-count { position: absolute; top: -7px; right: -9px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--color-berry); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.map-pin.is-sleeping .pin-head { opacity: .72; }
.map-pin:hover .pin-head, .map-pin:focus-visible .pin-head { box-shadow: 0 0 0 3px var(--color-sun), 0 2px 5px rgba(20, 32, 25, .28); }
@keyframes pin-drop { from { opacity: 0; translate: 0 -10px; } }
/* 휴대폰처럼 지도가 아주 작을 때: 장소 아이콘은 숨기고 구역 이름과 핀만 작게 */
.world-map.is-tiny > .place-spot, .world-map.is-tiny > .map-house { display: none; }
.is-overview .world-map.is-tiny > .district-label { padding: 0 5px; font-size: 10px; letter-spacing: 0; }
.world-map.is-tiny > .map-pin { transform: scale(calc(var(--inv) * .72)) translate(calc(-50% + var(--dx, 0) * 1px), calc(-100% - 4px)); }
.world-back { position: absolute; left: var(--space-3); top: var(--space-3); z-index: 5; display: flex; align-items: center; gap: var(--space-2); max-width: calc(100% - 2 * var(--space-3)); padding: 4px 10px 4px 4px; border: var(--border-card); border-radius: var(--radius-md); background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(20, 32, 25, .12); animation: bubble-in .25s ease-out; }
.world-back-name { display: grid; line-height: 1.25; min-width: 0; }
.world-back-name strong { font-size: var(--text-sm); }
.world-back-name small { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-places { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-2) 0 var(--space-3); }
.area-chip { font: inherit; cursor: pointer; }
.map-label { padding: 0 5px; font-size: 11px; font-weight: 500; white-space: nowrap; background: rgba(255, 255, 255, .9); border-radius: 4px; }
.world-map > .map-house { z-index: 2; display: grid; gap: 2px; transform: translate(-50%, calc(-100% + 44px)); justify-items: center; }
.map-house img { width: 70px; height: 70px; }
.world-map.is-far > .map-house .map-label, .world-map.is-far > .map-house .map-crops { display: none; }
.world-map > .map-resident { z-index: 4; display: grid; justify-items: center; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -100%); }
.map-resident img { width: 30px; height: 30px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.map-resident.has-token img { width: auto; height: 48px; border: 0; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .25)); }
.map-resident .map-label { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) scale(var(--inv)); transform-origin: top center; margin-top: 2px; }
.world-map.is-close .map-resident .map-label, .map-resident:hover .map-label, .map-resident.is-found .map-label { display: block; }
.map-resident.is-walking img { animation: resident-step .45s ease-in-out infinite alternate; }
.map-resident.face-left img { scale: -1 1; }
.map-resident.is-found img { filter: drop-shadow(0 0 5px var(--color-sun)) drop-shadow(0 0 5px var(--color-sun)); }
.talk-bubble { position: absolute; bottom: 100%; left: 50%; z-index: 6; width: max-content; max-width: 220px; margin-bottom: 6px; padding: 6px 10px; border: var(--border-card); border-radius: 12px; background: var(--color-surface); box-shadow: 0 3px 0 var(--color-border-strong); font-size: 13px; line-height: 1.45; text-align: left; color: var(--color-text); transform: translateX(-50%) scale(var(--inv)); transform-origin: bottom center; animation: bubble-in .2s ease-out; pointer-events: none; }
.talk-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
@keyframes bubble-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes resident-step { from { translate: 0 0; } to { translate: 0 -2px; } }
.world-zoom { position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 5; display: grid; overflow: hidden; border: 2px solid var(--cozy-outline); border-radius: 12px; gap: 0; box-shadow: 0 3px 0 var(--cozy-outline); }
.world-zoom button { width: 36px; height: 36px; border: 0; font-size: 1.05rem; cursor: pointer; background: var(--cozy-cream); color: var(--cozy-ink); font-weight: 700; }
.world-roster { max-height: clamp(380px, 66vh, 620px); overflow-y: auto; overflow-x: hidden; }
.world-roster h3 { margin-bottom: var(--space-2); font-size: var(--text-md); }
.roster-item { display: grid; gap: 2px; width: 100%; padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--color-border); background: none; font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.roster-item:hover .roster-what { color: var(--color-leaf-deep); }
.roster-where { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); }
.roster-what { font-size: var(--text-sm); line-height: 1.5; }
/* 로비 오른쪽 첫 칸: '지금 마을에서는' / '랭킹' 탭 (모양은 .social-tabs). 칸 안에서 스크롤해도 탭은 위에 붙어 있다. */
.lobby-tabs { position: sticky; top: calc(-1 * var(--space-4)); z-index: 1; }
.ranking-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); }
.ranking-chips [aria-selected="true"] { border-color: var(--color-leaf); }
.ranking-board h3 { margin-bottom: 2px; }
.ranking-board .ranking-row { gap: var(--space-2); padding: 6px var(--space-2); }
.ranking-board .ranking-rank { flex-basis: 30px; font-size: var(--text-sm); }
.ranking-board .ranking-face { flex-basis: 32px; width: 32px; height: 32px; }
.ranking-board .ranking-name { font-size: var(--text-sm); }
.map-legend { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); }

/* 알림판: 누르면 본문이 펼쳐진다 */
.notice-list .notice { border-top: 1px solid var(--color-border); }
.notice-list .notice:first-child { border-top: 0; }
.notice summary { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; cursor: pointer; list-style: none; }
.notice summary::-webkit-details-marker { display: none; }
.notice summary::after { content: "＋"; color: var(--color-text-muted); }
.notice[open] summary::after { content: "－"; }
.notice-title { flex: 1; font-weight: 500; }
.notice[open] .notice-title { font-weight: 700; }
.notice .long-text { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-md); }

/* 주민 정보 창 */
.resident-dialog { width: min(380px, calc(100% - 2 * var(--space-6))); padding: var(--space-6) var(--space-5) var(--space-5); text-align: center; max-height: 86vh; overflow-y: auto; background: linear-gradient(var(--cozy-wood) 0 46px, var(--cozy-wood-lip) 46px 49px, var(--cozy-outline) 49px 51px, transparent 51px) top / 100% 51px no-repeat, var(--color-surface); }
.resident-dialog::backdrop { background: var(--color-overlay); }
.resident-dialog > button { position: absolute; right: var(--space-3); top: var(--space-3); }
.dialog-face { width: 80px; height: 80px; margin: 0 auto var(--space-3); border-radius: 50%; border: var(--border-card); background: var(--color-surface-alt); object-fit: cover; }

/* 집 */
.house-room { padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.house-room.is-building { place-items: center; min-height: 200px; border-style: dashed; }
.house-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.furniture { display: grid; place-items: center; min-height: 90px; padding: var(--space-3); text-align: center; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.furniture small { color: var(--color-text-muted); }

/* 랭킹 */
.ranking-tabs { display: flex; flex-wrap: wrap; margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: 2px dashed color-mix(in srgb, var(--cozy-outline) 30%, transparent); }
.ranking-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 4px; background: none; font: 500 var(--text-sm) var(--font-body); cursor: pointer; }
.ranking-tabs [aria-selected="true"] { border-bottom-color: var(--color-leaf); font-weight: 700; }
.ranking-list { margin: 0; padding: 0; list-style: none; }
.ranking-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.ranking-row:first-child { border-top: 0; }
.ranking-row.is-me { background: var(--color-leaf-soft); outline: 2px solid var(--color-leaf); outline-offset: -2px; }
.ranking-rank { flex: 0 0 40px; text-align: center; font-weight: 700; font-size: var(--text-lg); color: var(--color-text-muted); }
.ranking-row.is-top1 .ranking-rank { color: var(--color-sun); }
.ranking-row.is-top2 .ranking-rank, .ranking-row.is-top3 .ranking-rank { color: var(--color-leaf-deep); }
.ranking-face { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: var(--border-card); background: var(--color-surface-alt); object-fit: cover; }
.ranking-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-name small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.ranking-value { flex: 0 0 auto; font-weight: 700; text-align: right; }
.ranking-value small { margin-left: 2px; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.ranking-mine { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 2px dashed var(--color-border); }

/* 기념사진 */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }
.event-photo { margin: 0; padding: var(--space-2) var(--space-2) var(--space-3); background: var(--color-surface); border: var(--border-card); border-radius: var(--radius-md); }
.photo-stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-sky-soft) var(--photo-bg) center / cover no-repeat; }
/* 사람 한 명: left/bottom/z-index 와 --s(크기) --r(기울기) --f(좌우 반전 -1) 를 snapshot 에서 받는다.
   높이 48%·26% 는 CommunityPage.tsx 의 FIGURE_H·INITIAL_H 와 같아야 말풍선이 머리 위에 붙는다. */
.photo-figure { position: absolute; height: calc(48% * var(--s, 1)); max-width: 46%; transform: translateX(-50%); display: flex; align-items: flex-end; justify-content: center; }
.photo-figure .photo-body { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; transform: rotate(var(--r, 0deg)) scaleX(var(--f, 1)); transform-origin: 50% 85%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.photo-figure.is-initial { height: calc(26% * var(--s, 1)); aspect-ratio: 1; }
.photo-figure.is-initial .photo-body { display: grid; transform: rotate(var(--r, 0deg)); place-items: center; aspect-ratio: 1; border-radius: 50%; border: 2px solid #fff; background: var(--color-sun-soft); font-size: calc(1.2rem * var(--s, 1)); font-weight: 700; }
.photo-bubble { position: absolute; z-index: 200; width: max-content; max-width: 64%; padding: 3px 8px; transform: translate(-50%, -6px); background: #fff; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); font-size: .72rem; line-height: 1.35; color: #333; text-align: center; word-break: keep-all; }
.photo-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; }
.photo-stage small { position: absolute; left: var(--space-2); top: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-sm); background: rgba(255, 255, 255, .85); font-size: var(--text-xs); }
.event-photo figcaption { padding: var(--space-2) var(--space-1) 0; }

/* 마을 메모판: 다같이 붙이는 메모 */
.memo-board { background: #f1ede4; }
.memo-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-4); }
.memo { --memo: #fff8dc; --tilt: -.6deg; position: relative; display: flex; flex-direction: column; gap: var(--space-1); min-height: 160px; padding: var(--space-5) var(--space-4) var(--space-3); background: var(--memo); color: var(--color-text); text-decoration: none; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .06); transform: rotate(var(--tilt)); transition: transform .15s, box-shadow .15s; }
.memo:nth-child(5n+2) { --memo: #fdecef; --tilt: .7deg; }
.memo:nth-child(5n+3) { --memo: #e9f5ec; --tilt: -.3deg; }
.memo:nth-child(5n+4) { --memo: #e8f2fb; --tilt: .9deg; }
.memo:nth-child(5n) { --memo: #f2edfb; --tilt: -.8deg; }
a.memo:hover, a.memo:focus-visible { transform: rotate(0); box-shadow: 0 2px 4px rgba(0, 0, 0, .1), 0 8px 18px rgba(0, 0, 0, .08); }
.memo strong { font-size: var(--text-md); font-weight: 700; line-height: 1.4; }
.memo p { flex: 1; margin: 0; font-size: var(--text-sm); white-space: pre-line; }
.memo small { color: var(--color-text-muted); font-size: var(--text-xs); }
.memo-pin { position: absolute; left: 50%; top: 8px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--color-berry); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.memo--detail { --tilt: 0deg; min-height: 0; max-width: 760px; margin: 0 auto; padding: var(--space-6); }
.memo--detail h1 { margin-bottom: var(--space-2); }
.memo-wall--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.memo-wall--small .memo { min-height: 100px; }
.memo-wall > .empty { grid-column: span 2; align-self: center; text-align: left; background: none; }

/* 마을 메모판 (스티커보드): 판은 1600x1000 비율, 메모는 판 크기에 대한 % 자리에 붙는다 (frontend/src/components/MemoBoard.tsx).
   글자·메모 크기는 판 폭(cqw)을 따라 커지고 작아진다. 좁은 화면에서는 판을 옆으로 밀어 본다. */
.paper-yellow { --memo: #fff6c9; } .paper-pink { --memo: #fde2e7; } .paper-mint { --memo: #def3e3; }
.paper-sky { --memo: #dcecfa; } .paper-lilac { --memo: #ebe3fa; } .paper-kraft { --memo: #e3cfae; }
.memo-compose { margin-bottom: var(--space-3); border: 1px dashed #cfc8b8; border-radius: var(--radius-md, 8px); background: var(--color-surface); }
.memo-compose summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); padding: var(--space-3) var(--space-4); list-style: none; cursor: pointer; }
.memo-compose summary::-webkit-details-marker { display: none; }
.memo-compose summary small { color: var(--color-text-muted); font-size: var(--text-xs); }
.memo-compose__form { padding: 0 var(--space-4) var(--space-4); }
.memo-compose__photo img { display: block; max-width: 160px; max-height: 120px; margin-top: var(--space-2); border-radius: 4px; object-fit: cover; }
.memo-compose__chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; border: 0; }
.memo-compose__chips legend { width: 100%; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: 700; }
.memo-chip { position: relative; display: inline-flex; cursor: pointer; }
.memo-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.memo-chip > span:not(.memo-swatch) { display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 var(--space-2); border-radius: 18px; background: var(--color-surface); font-size: 1.15rem; border: 2px solid var(--cozy-outline); box-shadow: inset 0 -3px 0 var(--cozy-lip-soft); }
.memo-chip input:focus-visible + span { outline: 2px solid var(--color-sky); outline-offset: 2px; }
.memo-swatch { display: inline-block; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; background: var(--memo); cursor: pointer; }
.memo-swatch.is-on { box-shadow: 0 0 0 2px var(--color-leaf); }
.sticker-board-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 6px; box-shadow: inset 0 0 0 6px #a9805a, 0 2px 8px rgba(0, 0, 0, .12); padding: 6px; background: #a9805a; }
.sticker-board { position: relative; width: 100%; min-width: 820px; container-type: inline-size; overflow: hidden; border-radius: 3px; cursor: copy;
  background-color: #d2ab7c;
  background-image: radial-gradient(rgba(120, 80, 40, .22) 1px, transparent 1.6px), radial-gradient(rgba(255, 240, 210, .25) 1px, transparent 1.4px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; }
.sticker-board.is-dragging { cursor: grabbing; }
.sticker-board__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #5b3f22; font-size: 1.6cqw; pointer-events: none; }
.sticker-board__spot { position: absolute; display: grid; place-items: center; width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border: 2px dashed #fff; border-radius: 50%; color: #fff; font-size: 2cqw; pointer-events: none; z-index: 100000; animation: memo-spot 1.2s ease-in-out infinite; }
@keyframes memo-spot { 50% { transform: scale(1.15); } }
.sticker { --r: 0deg; --s: 1; position: absolute; display: flex; flex-direction: column; gap: .35cqw; width: calc(11.5cqw * var(--s)); padding: calc(1.4cqw * var(--s)) calc(.9cqw * var(--s)) calc(.7cqw * var(--s));
  background: var(--memo); color: var(--color-text); text-decoration: none; border-radius: 2px; transform: translate(-50%, -50%) rotate(var(--r));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 .5cqw 1cqw rgba(60, 35, 10, .18); font-size: calc(.92cqw * var(--s)); line-height: 1.4;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.sticker:hover, .sticker:focus-visible { box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 .8cqw 1.6cqw rgba(60, 35, 10, .22); }
.sticker:focus-visible { outline: 3px solid var(--color-sky); outline-offset: 3px; }
.sticker.is-movable { cursor: grab; touch-action: none; }
.sticker.is-mine::after { content: ""; position: absolute; right: .4cqw; bottom: .4cqw; width: .55cqw; height: .55cqw; border-radius: 50%; background: var(--color-leaf); opacity: .7; }
.sticker.is-selected { outline: 2px dashed var(--color-leaf); outline-offset: 4px; }
.sticker.is-dragging { cursor: grabbing; transition: none; transform: translate(-50%, -50%) rotate(var(--r)) scale(1.05); box-shadow: 0 4px 8px rgba(0, 0, 0, .2), 0 1.6cqw 2.6cqw rgba(60, 35, 10, .3); }
.sticker strong { font-size: 1.12em; line-height: 1.3; overflow-wrap: anywhere; }
.sticker p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.sticker small { color: var(--color-text-muted); font-size: .82em; }
.sticker__pin { position: absolute; left: 50%; top: .5cqw; width: .8cqw; height: .8cqw; margin-left: -.4cqw; border-radius: 50%; background: var(--color-berry); box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sticker__tape { position: absolute; left: 50%; top: -.7cqw; width: 4.5cqw; height: 1.4cqw; margin-left: -2.25cqw; background: rgba(255, 255, 255, .55); box-shadow: 0 0 1px rgba(0, 0, 0, .15); transform: rotate(-3deg); }
.sticker--photo { width: calc(13cqw * var(--s)); padding: calc(.7cqw * var(--s)) calc(.7cqw * var(--s)) calc(.9cqw * var(--s)); background: #fffdf8; }
.sticker__photo { display: block; width: 100%; max-height: calc(14cqw * var(--s)); object-fit: cover; border-radius: 1px; background: var(--memo); pointer-events: none; }
.sticker--emoji { width: auto; padding: 0; background: none; box-shadow: none; }
.sticker--emoji:hover, .sticker--emoji:focus-visible { box-shadow: none; }
.sticker__emoji { font-size: calc(5.5cqw * var(--s)); line-height: 1; filter: drop-shadow(0 .3cqw .25cqw rgba(60, 35, 10, .35)); }
.sticker__badge { position: absolute; right: -1cqw; top: -1cqw; font-size: calc(2.4cqw * var(--s)); line-height: 1; transform: rotate(12deg); filter: drop-shadow(0 .15cqw .15cqw rgba(0, 0, 0, .3)); }
.memo-tools { align-items: center; margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md, 8px); background: var(--color-surface); }
.memo-detail__sticker { position: absolute; right: var(--space-4); top: var(--space-3); font-size: 2.6rem; transform: rotate(10deg); }
.memo-detail__photo { display: block; max-width: 100%; max-height: 520px; margin: var(--space-3) 0; padding: var(--space-2); background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }

/* 로그인·가입 */
.auth-card { max-width: 440px; margin: var(--space-5) auto 0; }
.auth-card .btn { width: 100%; }
.auth-card .auth-logo { display: block; width: 160px; margin: 0 auto var(--space-3); }
.auth-card h1, .auth-card .eyebrow { text-align: center; }
/* 입주 준비 (40차, WelcomePage): 단계 표시 · 성향 눈금 */
.welcome-steps { display: flex; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; font-size: var(--text-sm); counter-reset: step; }
.welcome-steps li { padding: 2px 10px; border-radius: 999px; background: var(--color-surface-alt); color: var(--color-text-muted); counter-increment: step; }
.welcome-steps li::before { content: counter(step) ". "; }
.welcome-steps li.is-now { background: var(--color-leaf-soft); color: var(--color-leaf-deep); font-weight: 700; }
.welcome-steps li.is-done { text-decoration: line-through; }
.welcome-traits { margin: 0; padding: var(--space-3); border: 2px dashed color-mix(in srgb, var(--cozy-outline) 40%, transparent); border-radius: var(--radius-md); }
.welcome-traits legend { padding: 0 var(--space-2); font-weight: 700; }
.auth-card .welcome-traits .btn { width: auto; }
.auth-card .welcome-submit { margin-top: 20px; }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.auth-links { margin-top: var(--space-4); text-align: center; font-size: var(--text-sm); }

@media (max-width: 760px) {
  .world-layout { grid-template-columns: 1fr; }
  .world-viewport { height: clamp(340px, 60vh, 560px); }
  /* 좁은 화면의 전체 지도: 칸을 지도 비율에 맞춰 빈 바다 없이 한눈에. 구역을 누르면 다시 길어진다. */
  .world-viewport.is-overview { height: auto; aspect-ratio: 3 / 2.1; min-height: 0; }
  .world-viewport.is-overview .world-zoom { grid-auto-flow: column; right: var(--space-2); bottom: var(--space-2); }
  .world-viewport.is-overview .world-zoom button { width: 30px; height: 30px; font-size: .9rem; }
  .world-roster { max-height: 320px; }
  .house-grid { grid-template-columns: 1fr 1fr; }
  .memo-wall { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .memo { min-height: 120px; padding: var(--space-4) var(--space-3) var(--space-2); }
  .memo-wall > .empty { grid-column: 1 / -1; }
}

/* 캐릭터 이미지 등록 */
.image-setup { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.image-current { display: flex; gap: var(--space-4); }
.image-current figure { margin: 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.token-frame, .portrait-frame { display: grid; place-items: center; border: var(--border-card); border-radius: var(--radius-md); background: repeating-conic-gradient(#f3f5f1 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.token-frame { width: 150px; height: 210px; padding: var(--space-2); }
.token-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.portrait-frame { width: 96px; height: 96px; overflow: hidden; border-radius: 50%; }
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; }
.item-thumb { width: 48px; height: 48px; }
/* 기본 픽셀 아이콘(static/img/items, 64px): 흐리지 않게 정수 배율로 */
img.item-thumb[src*="/img/items/"] { width: 48px; height: 48px; image-rendering: pixelated; }
@media (max-width: 760px) { .image-setup { grid-template-columns: 1fr; } }
.photo-shoot { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--color-surface-alt); border-radius: var(--radius-md); }
.photo-shoot label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }

.place-panel h3 { margin: var(--space-3) 0 0; }
.talk-log { margin: var(--space-3) 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.talk-log li { font-size: var(--text-sm); line-height: 1.5; }
.talk-log strong { margin-right: 6px; color: var(--color-leaf-deep); }
.talk-log li.is-now { background: var(--color-sun-soft); border-radius: var(--radius-sm); padding: 2px 6px; margin: 0 -6px; }
.photo-credit { display: block; font-size: 11px; color: var(--color-text-muted); }

/* 성향·직업 */
.personality-box { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; }
.personality-result { padding: var(--space-4); background: var(--color-surface-alt); border-radius: var(--radius-md); }
.personality-result h3 { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-xl); }
.personality-result p { font-size: var(--text-sm); color: var(--color-text-muted); }
.trait-form { display: grid; gap: var(--space-3); }
.trait-row { display: grid; grid-template-columns: 56px 52px 1fr 52px; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.trait-name { font-weight: 700; }
.trait-end { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
.trait-row input { width: 100%; accent-color: var(--color-leaf); }
.trait-form .btn { justify-self: start; }
.career-now { display: flex; align-items: center; gap: var(--space-2); }
.career-icon { font-size: 1.4rem; }
.career-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.career-card { display: grid; gap: 2px; padding: var(--space-3); font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.career-card small { color: var(--color-text-muted); font-size: var(--text-xs); line-height: 1.4; }
.career-card:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 760px) { .personality-box { grid-template-columns: 1fr; } .trait-row { grid-template-columns: 48px 44px 1fr 44px; } }

/* 이웃 */
.neighbor-layout { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0 var(--space-5); align-items: start; }
.neighbor { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.neighbor:first-of-type { border-top: 0; padding-top: 0; }
.neighbor-face { flex: 0 0 56px; width: 56px; height: 56px; }
.neighbor-info { flex: 1; min-width: 0; }
.neighbor-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.neighbor-info p { margin: var(--space-1) 0; }
.rel-bar { height: 6px; margin-bottom: var(--space-2); border-radius: 3px; background: var(--color-surface-alt); overflow: hidden; }
.rel-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-berry), var(--color-sun) 50%, var(--color-leaf)); }
.neighbor-actions { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.neighbor-actions select { max-width: 200px; }
.rel-lover, .rel-married, .rel-crush { color: var(--color-berry); }
.rel-rival { color: var(--color-text-muted); }
.story-feed { margin: 0; padding: 0; list-style: none; }
.story-feed li { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.story-feed li:first-child { border-top: 0; padding-top: 0; }
.story-feed p { margin: 0; }
.story-feed small { color: var(--color-text-muted); font-size: var(--text-xs); }
@media (max-width: 760px) { .neighbor-layout { grid-template-columns: 1fr; } }

/* 마당 텃밭 */
.garden { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); background: #e7dcc4; }
.garden-plot { display: grid; justify-items: center; gap: 4px; padding: var(--space-3); border-radius: var(--radius-sm); background: #b98b5a repeating-linear-gradient(0deg, transparent 0 14px, rgba(0, 0, 0, .06) 14px 16px); color: #fff; text-align: center; }
.garden-plot.is-thirsty { background-color: #c9a273; }
.garden-plot.is-growing { background-color: #8a6239; }
.garden-plot.is-ripe { box-shadow: 0 0 0 3px var(--color-sun); }
.garden-icon { font-size: 2.2rem; line-height: 1.1; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); min-height: 2.4rem; }
.garden-plot small { font-size: var(--text-xs); opacity: .9; }
.garden-plot form { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0; }
.garden-plot select { max-width: 140px; font-size: var(--text-xs); }
.garden-bar { width: 80%; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.garden-bar span { display: block; height: 100%; background: #9fe07a; }
@media (max-width: 760px) { .garden { grid-template-columns: 1fr 1fr; } }

/* 하늘: 시간대와 날씨 */
.world-sky { position: absolute; inset: 0; z-index: 4; pointer-events: none; transition: background .6s; }
.sky-dawn { background: rgba(255, 190, 150, .12); }
.sky-evening { background: linear-gradient(180deg, rgba(255, 140, 80, .22), rgba(120, 60, 140, .12)); }
.sky-night { background: rgba(20, 30, 70, .32); }
.weather-cloudy { box-shadow: inset 0 0 0 9999px rgba(120, 130, 140, .12); }
/* 비·눈: components/WeatherCanvas.tsx 가 canvas 로 그린다 */
.weather-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.map-resident.is-sleeping img { opacity: .85; }
.map-resident.is-sleeping::after { content: "💤"; position: absolute; top: -14px; right: -10px; font-size: 16px; transform: scale(var(--inv)); animation: zz 2s ease-in-out infinite; }
@keyframes zz { 50% { translate: 3px -4px; opacity: .6; } }
.map-crops { display: block; margin-top: 2px; font-size: 16px; letter-spacing: -2px; line-height: 1; }
.lobby-bottom { display: grid; grid-template-columns: 1.3fr 1fr; gap: 0 var(--space-5); align-items: start; }
.resident-profile { text-align: left; }
.resident-profile h3 { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); }
.profile-tags { font-weight: 700; font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-1); text-align: center; }
.profile-list { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); }
@media (max-width: 760px) { .lobby-bottom { grid-template-columns: 1fr; } }

/* 게이지 낚시 */
.fishing-spots { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.fishing-spot-wrap { position: relative; }
.fishing-spot-wrap .admin-edit { position: absolute; top: 6px; right: 6px; }
.fishing-spot { display: grid; justify-items: start; gap: 2px; width: 100%; padding: var(--space-4); font: inherit; text-align: left; color: var(--color-text); cursor: pointer; }
.fishing-spot i { font-size: 1.4rem; color: var(--color-sky); }
.fishing-spot small { color: var(--color-text-muted); }
.fishing-spot:hover:not(:disabled) { border-color: var(--color-sky); }
.fishing-spot:disabled { opacity: .5; cursor: wait; }
.fishing-game { display: grid; justify-items: center; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: #1f3b4d; color: #fff; }
.fishing-game[hidden] { display: none; }
.fishing-status { font-weight: 700; text-align: center; }
.fishing-play { display: flex; gap: var(--space-3); height: 300px; }
.fishing-track { position: relative; width: 56px; height: 100%; border-radius: 10px; background: linear-gradient(#5aa9d6, #1d5f86); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25); overflow: hidden; }
.fishing-zone { position: absolute; left: 4px; right: 4px; bottom: 0; border-radius: 6px; background: rgba(140, 220, 120, .55); border: 2px solid #9fe07a; transition: background .1s; }
.fishing-zone.is-on { background: rgba(160, 240, 120, .85); }
.fishing-fish { position: absolute; left: 50%; bottom: 50%; transform: translateX(-50%); font-size: 22px; color: #ffd36b; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.fishing-progress { position: relative; width: 14px; height: 100%; border-radius: 7px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.fishing-progress span { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(#ffe066, #7bd56b); }
.fishing-help { max-width: 420px; color: #cfe3ef; text-align: center; }
.fishing-hold { min-width: 200px; touch-action: none; user-select: none; }
.fishing-hold.is-holding { filter: brightness(.85); transform: scale(.97); }
.fishing-game.is-biting .fishing-status { color: #ffd36b; }
.fishing-game.is-win { background: #24513a; }
.fishing-game.is-lose { background: #4a2f35; }
.fish-book { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-2) var(--space-4); }
.fish-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.fish-row small { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--text-xs); }
.fish-stars { color: var(--color-sun); letter-spacing: -1px; font-size: var(--text-xs); }
.garden-icon .fa-circle-dot { color: #6b4a2b; font-size: 1.2rem; }
.garden-icon .fa-seedling, .garden-icon .fa-leaf { color: #9fe07a; }
.garden-icon .fa-spa { color: #ffd6e8; }
.crop-carrot .fa-carrot { color: #ff9b3d; }
.crop-tomato .fa-apple-whole, .crop-strawberry .fa-heart { color: #ff5a5a; }
.crop-pumpkin .fa-circle { color: #ff9b3d; }
.crop-lettuce .fa-leaf { color: #b8f27a; }
.career-icon i { color: var(--color-leaf-deep); }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); } .invite-row code { font-size: var(--text-md); font-weight: 700; letter-spacing: .05em; }

/* 로비 한눈에 보기: 지도 + 오른쪽 세로 칸 */
.lobby-map-head { flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.lobby-map-head .day-stack { display: flex; align-items: center; gap: var(--space-3); }
.lobby-map-head .day-bubble strong { font-size: 1.5rem; }
.lobby-side { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.lobby-card { margin-top: 0; padding: var(--space-4); max-height: 420px; display: flex; flex-direction: column; overflow: visible; }
.lobby-card h2 { font-size: var(--text-lg); }
.lobby-card .story-feed p, .lobby-card .notice-title { margin-bottom: 2px; font-size: var(--text-sm); }
.lobby-card .story-feed li { padding: var(--space-2) 0; }
@media (min-width: 761px) and (max-width: 1199px) {
  .lobby-side { grid-template-columns: 1fr 1fr; }
  .lobby-side > .world-roster { grid-column: 1 / -1; max-height: 300px; }
}
@media (min-width: 1200px) {
  /* 화면 높이에 맞춰 스크롤 없이 지도·주민·소식·알림판이 한 번에 보이게. 각 칸 안에서만 스크롤한다. */
  .lobby-dash { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 26vw, 400px); gap: var(--space-4); min-height: 560px; height: calc(100vh - var(--hotbar-h) - var(--dock-gap) - var(--board-top) - var(--tab-h) - 4px - var(--board-pad) - var(--space-4) - 18px); }
  .lobby-map { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: var(--space-4); }
  .lobby-map .world-viewport { flex: 1 1 auto; height: auto; min-height: 0; }
  .lobby-map .map-legend { margin-top: var(--space-2); }
  .lobby-side { margin: 0; min-height: 0; grid-template-rows:
    minmax(0, var(--side-ratio-roster))
    minmax(0, var(--side-ratio-news))
    minmax(0, var(--side-ratio-board));
    row-gap: calc(var(--space-4) + var(--tab-h) + 4px); /* 위로 튀어나온 탭 자리를 칸 사이 간격으로 빼서, 눈에 보이는 상자 높이가 정확히 비율대로 나오게 */ }
  .lobby-card { min-height: 0; max-height: none; }
  .lobby-side > .world-roster { max-height: none; }
}

/* 마이페이지: 내 대사·내 상호작용 */
.personal-form { margin-top: var(--space-2); }
.personal-form input[name=text] { flex: 1 1 260px; min-width: 0; }
.personal-form select { max-width: 220px; }
.personal-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.personal-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.personal-row .grow { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.mood-good { background: var(--color-leaf-soft); }
.mood-bad { background: #fde8e4; }

/* 마이페이지 안쪽 탭 (내 정보 / 캐릭터 / 대사·상호작용 / 선물 / 직업·생활). 머리줄과 탭은 위에 붙어 있고 내용만 바뀐다. */
.mypage-tabs { margin: var(--space-3) 0 0; overflow-x: auto; border-radius: var(--radius-md); }
.mypage-tabs [role="tab"] { white-space: nowrap; }

/* 빠른 이동: 좁은 화면에서는 탭 아래 한 줄, 넓은 화면에서는 모든 탭 오른쪽에 붙어 있는 작은 메뉴 */
.mypage-quick { display: flex; align-items: center; gap: var(--space-1); margin: var(--space-3) 0; overflow-x: auto; scrollbar-width: none; }
.mypage-quick::-webkit-scrollbar { display: none; }
.mypage-quick-title { flex: 0 0 auto; margin-right: var(--space-1); color: var(--color-text-muted); font-family: var(--font-display); font-size: var(--text-sm); }
.mypage-quick a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-1); text-decoration: none; white-space: nowrap; }
.mypage-quick .ui-icon { color: var(--color-leaf-deep); }

@media (min-width: 960px) {
  .game-stage.is-board > .mypage-top { grid-column: 1 / -1; padding-bottom: var(--space-2); }
  /* 탭 내용(두 칸 배치) + 오른쪽 빠른 이동 */
  .game-stage.is-board > .mypage-body { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; gap: var(--space-4); align-items: start; }
  .mypage-body > .mypage-quick { grid-column: 2; grid-row: 1; position: sticky; z-index: 4;
    flex-direction: column; align-items: stretch; gap: var(--space-1); margin: 0; padding: var(--space-2); overflow: visible;
    background: var(--color-surface); border: var(--border-card); border-radius: var(--radius-md); box-shadow: 0 2px 8px var(--color-shadow); }
  .mypage-body > .mypage-quick .mypage-quick-title { margin: 0 0 var(--space-1); text-align: center; }
  .mypage-body > .mypage-quick a { justify-content: flex-start; padding: 2px var(--space-2) 6px; border-radius: 0; }
  .mypage-body > .mypage-panel { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
  .mypage-panel > * { min-width: 0; margin: 0; }  /* 아래는 base.css .is-board 규칙과 같은 것 */
  .mypage-panel > :is(.panel--wide, .panel-grid),
  .mypage-panel > .panel:has(.card-grid, .photo-grid, .house-grid) { grid-column: 1 / -1; }
  .mypage-panel > :not(.panel) > .panel { margin-top: 0; }
}

/* 마이페이지 > 선물·관계: 좋아하는 선물과 싫어하는 선물 */
.gift-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.gift-columns h3 { margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.gift-form select { max-width: 220px; }
.gift-form input[name=note] { flex: 1 1 180px; min-width: 0; }
.gift-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-1); }
.gift-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.gift-row .item-thumb { width: 28px; height: 28px; object-fit: contain; }
.gift-row img.item-thumb[src*="/img/items/"] { width: 32px; height: 32px; }
.gift-row button { margin-left: auto; }
.gift-hint { overflow-wrap: anywhere; }

/* 크레딧 (/credits/) */
.site-credits { padding: 0 0 var(--space-6); text-align: center; font-size: var(--text-xs); opacity: .8; color: #2f5f55; z-index: 1; }
.site-credits a { color: inherit; text-decoration: underline; }
.credit-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ── 상점 진열 교체 안내 ── */
.shop-rotation { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: calc(-1 * var(--space-2)) 0 var(--space-3); padding-top: 0; }

/* ── 물고기 시세표 (로비 '시세' 탭, 낚시 화면) ── */
.fish-price-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }
.fish-prices.is-compact .fish-price-list { grid-template-columns: 1fr; gap: 4px; }
.fish-price-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 4px var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 2px 0 var(--color-border-strong); }
.fish-price-icon { width: 32px; height: 32px; image-rendering: pixelated; object-fit: contain; }
.fish-price-name { display: grid; min-width: 0; line-height: 1.3; }
.fish-price-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.fish-price-name small, .fish-price-value small { color: var(--color-text-muted); font-size: var(--text-xs); }
.fish-price-value { display: grid; justify-items: end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.fish-price-value .is-up { color: var(--color-berry); font-weight: 700; }
.fish-price-value .is-down { color: var(--color-sky); font-weight: 700; }
.stock-price-list li { grid-template-columns: 32px minmax(0, 1fr) 64px auto; }
.stock-spark { display: block; overflow: visible; }
.stock-spark path { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.stock-spark.is-up path { stroke: var(--color-berry); }
.stock-spark.is-down path { stroke: var(--color-sky); }
.stock-spark-base { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 2 2; }

/* ── 특별 이벤트: 알림 띠 + 관전 창 (frontend/src/layout/SpecialEvents.tsx) ── */
.special-banner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); position: fixed; z-index: 99; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 32px)); margin: 0; justify-content: center; text-align: center; padding: 20px 22px 20px 58px; }
.special-banner .btn { margin-bottom: 2px; }
.special-banner.is-live .special-badge { animation: special-pulse 1.6s ease-in-out infinite; }
.special-badge { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: var(--color-berry); color: #fff; font-size: var(--text-xs); font-weight: 700; }
.special-text { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 2px var(--space-2); align-items: baseline; min-width: 0; font-size: var(--text-sm); }
.special-watching { color: var(--color-text-muted); }
@keyframes special-pulse { 50% { transform: scale(1.06); } }
.special-dialog { width: min(640px, calc(100% - 2 * var(--space-4))); max-height: calc(100vh - 2 * var(--space-5)); padding: 0; overflow: hidden; background: var(--color-surface); color: var(--color-text); }
.special-dialog[open] { display: flex; flex-direction: column; }
.special-dialog::backdrop { background: var(--color-overlay); }
/* 사용 안내 (40차, components/GuideDialog.tsx): 특별 이벤트 창 모양을 같이 쓴다 */
.guide-lines { display: grid; gap: var(--space-3); margin: 0; padding: var(--space-5) var(--space-6) var(--space-4) calc(var(--space-6) + 1em); line-height: 1.6; }
.guide-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); }
.guide-dots { display: flex; gap: 6px; margin-right: auto; }
.guide-dots i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--cozy-outline) 30%, transparent); }
.guide-dots i.is-now { background: var(--color-leaf); }
.special-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); background: var(--cozy-wood); border-bottom: var(--cozy-line) solid var(--cozy-outline); box-shadow: inset 0 -3px 0 var(--cozy-wood-lip); }
.special-head h2 { margin: 0; }
.special-head p { margin: 0; }
.special-progress { margin: var(--space-2) var(--space-4) 0; border-radius: 999px; background: var(--color-surface-alt); overflow: hidden; height: 8px; border: 2px solid var(--cozy-outline); box-sizing: content-box; }
.special-progress span { display: block; height: 100%; background: var(--color-leaf); transition: width 1s linear; }
.special-stage { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; align-items: end; gap: var(--space-2); margin: var(--space-3) var(--space-4) 0; padding: var(--space-3) var(--space-2) 0; border-radius: var(--radius-md); background: linear-gradient(var(--color-sky-soft), var(--color-leaf-soft)); min-height: 170px; }
.special-person { display: grid; justify-items: center; gap: 2px; margin: 0; transition: transform .25s; }
.special-person > :first-child { height: 120px; max-width: 100%; }
.special-person img { height: 96px; width: 96px; border-radius: 50%; object-fit: cover; }
.special-person.is-b > :first-child { transform: scaleX(-1); }
.special-person.is-speaking { transform: translateY(-6px); }
.special-person figcaption { padding: 0 8px; border-radius: 999px; background: var(--color-surface); font-size: var(--text-xs); font-weight: 700; box-shadow: 0 2px 0 var(--color-border-strong); }
.special-now { align-self: center; display: grid; place-items: center; }
.special-now p { margin: 0; padding: var(--space-2) var(--space-3); border-radius: 14px; background: var(--color-surface); box-shadow: 0 3px 0 var(--color-border-strong); font-size: var(--text-sm); text-align: center; animation: bubble-in .25s ease-out; }
.special-now p.is-narration { background: transparent; box-shadow: none; color: var(--color-text-muted); font-style: italic; }
.special-log { flex: 1 1 auto; display: grid; align-content: start; gap: 6px; max-height: 34vh; margin: var(--space-3) 0 0; padding: 0 var(--space-4) var(--space-2); overflow-y: auto; list-style: none; }
.special-log li { max-width: 80%; padding: 4px 10px; border-radius: 12px; background: var(--color-surface-alt); font-size: var(--text-sm); animation: bubble-in .25s ease-out; }
.special-log li strong { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.special-log li.is-b { justify-self: end; background: var(--color-leaf-soft); text-align: right; }
.special-log li.is-narration { justify-self: center; max-width: 92%; background: none; color: var(--color-text-muted); font-style: italic; text-align: center; }
.special-log li.is-waiting { justify-self: center; background: none; color: var(--color-text-muted); letter-spacing: .2em; }
.special-result { margin: var(--space-2) var(--space-4) 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-sun-soft); box-shadow: 0 2px 0 var(--color-sun); font-weight: 700; font-size: var(--text-sm); }
.special-watchers { display: flex; flex-wrap: wrap; gap: 4px var(--space-2); align-items: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.special-watchers span { flex-basis: 100%; }
@media (max-width: 760px) {
  .special-stage { grid-template-columns: 76px minmax(0, 1fr) 76px; min-height: 130px; }
  .special-person > :first-child { height: 86px; }
  .special-person img { width: 64px; height: 64px; }
}


/* ════════════════════════════════════════════════════════════════════
   코지 UI 팩 스킨 (static/img/ui/cozy/, 원본: UIpack/DEMO_Cozy_UI_Pack_doboui)
   이미지 버튼·체크박스·종이·나무판은 9조각(border-image)으로 늘려 쓴다. 이미지는 화면 크기의 2배로 저장해
   고해상도 화면에서도 또렷하다 (그래서 border-image-width 는 slice 의 절반).
   팩에 없는 부품(입력창·탭·뱃지·표·알림)은 같은 갈색 테두리·크림 바탕·아랫면으로 CSS 로 흉내 낸다.
   이미지 위 글자는 테마(밤 등)와 상관없이 읽히도록 .cozy-light 변수 묶음으로 진한 갈색을 쓴다.
   ════════════════════════════════════════════════════════════════════ */

/* 이미지(밝은 바탕) 위 영역: 안쪽 글자·바탕 변수를 밝은 팩 색으로 고정 */
.page-header, .life-hud, .toast, .balance-chip, .panel > h2:first-child, .panel > .section-title:first-child,
.lobby-tabs, .social-tabs, .special-head {
  --color-text: var(--cozy-ink); --color-text-muted: var(--cozy-ink-muted);
  --color-surface: var(--cozy-cream); --color-surface-alt: #fbefd9; --color-border: #edd3bd;
  --color-leaf-deep: #3f7a0e; --color-leaf-soft: #eaf4d4; --color-sun-soft: #fff1d6; --color-berry-soft: #fde3df;
  color: var(--color-text);
}

/* 바탕: 숲 초록 + 옅은 점무늬 */
h1, h2, h3 { color: var(--color-text); }

/* ── 상단 바: 나무판(WoodenContainer1) ── */
.life-hud {
  background: none; border: 0 solid transparent;
  border-image: url("../img/ui/cozy/plank.png") 16 30 18 30 fill / 8px 0 9px 0 / 0 round stretch;
  padding-bottom: 6px;
}
.hud-player small { color: var(--cozy-ink-muted); }
.hud-face { border: 2px solid var(--cozy-outline); background: var(--cozy-cream); }
.game-nav a { margin: 4px 0 6px; padding: 3px var(--space-3) 6px; border: 0 solid transparent; border-radius: 999px; color: var(--cozy-ink); font-weight: 700; }
.game-nav a:hover { color: var(--cozy-ink); background: rgba(255, 254, 235, .35); }
.game-nav a[aria-current="page"] { color: var(--cozy-ink); background: none;
  border-image: url("../img/ui/cozy/pill-white.png") 26 32 34 32 fill / 12px 15px 15px 15px / 0 stretch; }
.game-nav a i { color: var(--cozy-ink); }
@media (min-width: 1200px) {
  .life-hud { padding-top: 0; padding-bottom: 4px; }
  .game-nav { align-items: center; }
  .game-nav a { padding: 4px var(--space-3) 8px; margin: 0; }
}

/* ── 화면 머리: 상자 없이 제목(노란 리본)만. 관리자가 배너 이미지를 넣었으면 배너 + 갈색 테두리 ── */
.page-header { border-radius: 0; overflow: visible; background: none; filter: none; box-shadow: none; border: 0; padding: 0 0 var(--space-3); min-height: 0; align-items: flex-end; }
html[style*="--page-banner"] .page-header {
  border: var(--border-card); border-radius: var(--radius-lg); overflow: hidden; filter: none;
  background: var(--cozy-cream) var(--page-banner) center / cover no-repeat; box-shadow: var(--shadow-card);
  padding: var(--space-5);
}
.eyebrow { color: var(--color-leaf-deep); letter-spacing: .08em; }

/* ── 보유 코인: 연어색 상자(Container1) ── */
.balance-chip { border-radius: 0; display: inline-flex; align-items: center; gap: 0; padding: 0; border: 0; border-image: none; background: none; box-shadow: none; filter: none;
}

/* ── 패널·카드: 크림 바탕 + 굵은 갈색 테두리 + 분홍 아랫면 (Container/CardRegular 모양) ── */
/* 칸 제목: CardRegular1_wood 의 나무색 머리띠 */
.panel > h2:first-child, .panel > .section-title:first-child h2 { font-size: var(--text-lg); }
.card { padding-bottom: calc(var(--space-3) + 3px); }
.card--highlight { border-color: var(--cozy-outline); background: var(--color-leaf-soft); box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--color-leaf) 35%, var(--color-leaf-soft)), 0 2px 0 var(--color-shadow); }
.card--career { border-color: var(--cozy-outline); }
.quick-links a, .career-card, .fishing-spot, .house-room, .expression-card, .body-card, .hair-card {
  border: var(--border-card); box-shadow: var(--shadow-card);
}
.quick-links a:hover, .career-card:hover:not(:disabled) { background: var(--color-surface-alt); border-color: var(--cozy-outline); }
.career-card.is-current { border-color: var(--cozy-outline); background: var(--color-leaf-soft); }
.body-card.is-current, .hair-card.is-current { border-color: var(--cozy-outline); background: var(--color-sun-soft); box-shadow: inset 0 -4px 0 var(--color-sun), 0 2px 0 var(--color-shadow); }
.empty { background: var(--color-surface-alt); border: 2px dashed color-mix(in srgb, var(--cozy-outline) 40%, transparent); border-radius: var(--radius-md); }
.feed > article, .stat-list > div, .roster-item, .race + .race { border-color: color-mix(in srgb, var(--cozy-outline) 22%, transparent); }
.feed > article { border-top-style: dashed; }
.stat-list > div { border-bottom-style: dashed; }

/* 접기: 화살표 이미지(ArrowBrownOuline19/18) */
details.fold { border: 2px solid color-mix(in srgb, var(--cozy-outline) 35%, transparent); }
details.fold > summary, .memo-compose > summary { list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before {
  content: ""; display: inline-block; width: 7px; height: 15px; margin-right: 8px; vertical-align: -2px;
  background: url("../img/ui/cozy/arrow-right.png") center / contain no-repeat;
}
details.fold[open] > summary::before { width: 13px; height: 7px; vertical-align: 2px; background-image: url("../img/ui/cozy/arrow-down.png"); }

/* ── 버튼: SquareButton2 (흰색 = 기본, 초록(흉내) = 주 버튼, 빨강 = 위험) ──
   이미지에 테두리·아랫면이 그려져 있어 box-shadow 대신 이미지를 쓰고, 누르면 아랫면이 얇은 그림으로 바꾼다. */
.btn, form button:not([class]) {
  --btn-img: url("../img/ui/cozy/btn-white.png"); --btn-img-down: url("../img/ui/cozy/btn-white-down.png");
  --btn-ink: var(--cozy-ink); --btn-glow: none;
  min-height: 34px; padding: 3px var(--space-4) 8px; margin-bottom: 2px;
  color: var(--btn-ink); text-shadow: var(--btn-glow);
  background: none; border: 0 solid transparent; border-radius: 0; box-shadow: none;
  border-image: var(--btn-img) 16 34 22 40 fill / 8px 17px 11px 20px / 0 stretch;
  transition: filter .12s;
}
.btn:hover, form button:not([class]):hover { transform: none; box-shadow: none; filter: brightness(1.05) saturate(1.05); }
.btn:active, form button:not([class]):active {
  transform: none; box-shadow: none; filter: brightness(.97);
  border-image: var(--btn-img-down) 20 34 18 40 fill / 10px 17px 9px 20px / 0 stretch;
  padding-top: 5px; padding-bottom: 6px;
}
.btn--primary {
  --btn-img: url("../img/ui/cozy/btn-green.png"); --btn-img-down: url("../img/ui/cozy/btn-green-down.png");
  --btn-ink: #fffeeb; --btn-glow: 0 1px 0 #2f6a08, 0 0 2px rgba(47, 106, 8, .7);
  background: none; border-color: transparent; color: var(--btn-ink);
}
.btn--danger {
  --btn-img: url("../img/ui/cozy/btn-red.png"); --btn-img-down: url("../img/ui/cozy/btn-red-down.png");
  --btn-ink: #fffeeb; --btn-glow: 0 1px 0 #8a1830, 0 0 2px rgba(138, 24, 48, .7);
  background: none; border-color: transparent; color: var(--btn-ink);
}
.btn--wood { --btn-img: url("../img/ui/cozy/btn-wood.png"); --btn-img-down: url("../img/ui/cozy/btn-wood-down.png"); }
.btn--small { min-height: 28px; padding: 1px var(--space-3) 6px; margin-bottom: 2px; border-image-width: 6px 13px 9px 15px; }
.btn--small:hover { box-shadow: none; }
.btn--small:active { border-image-width: 8px 13px 7px 15px; padding-top: 3px; padding-bottom: 4px; }
.btn:disabled, form button:disabled, .btn:disabled:hover {
  opacity: .55; filter: grayscale(.35); transform: none; box-shadow: none;
  border-image-source: var(--btn-img);
}
.btn.is-current, .rig-poses .btn.is-current { outline: 0; --btn-img: url("../img/ui/cozy/btn-wood.png"); --btn-img-down: url("../img/ui/cozy/btn-wood-down.png"); }
.field-row .btn--small { min-height: 30px; }

/* ── 입력창 (팩에 없음: 크림 바탕 + 갈색 테두리 + 안쪽 그림자로 흉내) ── */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select, textarea {
  border: 2px solid color-mix(in srgb, var(--cozy-outline) 75%, var(--color-surface));
  border-radius: 10px; background-color: var(--color-surface);
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--cozy-outline) 10%, transparent);
}
input:focus, select:focus, textarea:focus { border-color: var(--color-leaf); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-leaf) 30%, transparent); }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: .8; }
/* 고르기: 갈색 테두리 아래 화살표(ArrowBrownOuline18) */
select:not([multiple]) {
  -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("../img/ui/cozy/arrow-down.png"); background-repeat: no-repeat;
  background-position: right 10px center; background-size: 13px 7px;
}

/* 체크박스: Checkbox2 이미지 / 라디오: RoundButton1 흰 단추 + 초록 점 */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto;
  width: 20px; height: 21px; margin: 0 4px 0 0; vertical-align: middle;
  background: url("../img/ui/cozy/check-off.png") center / 100% 100% no-repeat; border: 0;
}
input[type="checkbox"]:checked { background-image: url("../img/ui/cozy/check-on.png"); }
input[type="radio"]:checked { background: radial-gradient(circle at 50% 43%, #5c9e1c 0 4px, #3e7f0a 4.5px 5px, transparent 5.6px), url("../img/ui/cozy/knob.png") center / 100% 100% no-repeat; }
input[type="checkbox"]:active, input[type="radio"]:active { transform: translateY(1px); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .5; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 2px; border-radius: 6px; }
.memo-chip input, .memo-chip input:checked { background: none; width: auto; height: auto; }

/* 슬라이더: 크림 홈 + 흰 둥근 단추(RoundButton1_white) */
input[type="range"] { height: 26px; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border: 2px solid var(--cozy-outline); border-radius: 999px; background: var(--cozy-lip); box-shadow: inset 0 2px 0 rgba(151, 81, 62, .2); }
input[type="range"]::-moz-range-track { height: 6px; border: 2px solid var(--cozy-outline); border-radius: 999px; background: var(--cozy-lip); }
input[type="range"]::-moz-range-progress { height: 6px; border: 2px solid var(--cozy-outline); border-radius: 999px; background: var(--color-leaf); }
input[type="range"]::-webkit-slider-thumb {
  width: 20px; height: 23px; margin-top: -9px; border: 0; border-radius: 0; box-shadow: none;
  background: url("../img/ui/cozy/knob.png") center / 100% 100% no-repeat;
}
input[type="range"]::-moz-range-thumb { width: 20px; height: 23px; border: 0; border-radius: 0; box-shadow: none; background: url("../img/ui/cozy/knob.png") center / 100% 100% no-repeat; }
input[type="range"]:active::-webkit-slider-thumb { transform: translateY(1px); box-shadow: none; }

/* 스크롤바: 나무색 막대 + 갈색 테두리 */
* { scrollbar-color: var(--cozy-wood) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: color-mix(in srgb, var(--cozy-outline) 8%, transparent); border-radius: 999px; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: var(--cozy-wood) padding-box; box-shadow: inset 0 0 0 2px var(--cozy-outline); }
::-webkit-scrollbar-thumb:hover { background-color: #e7ab8c; }

/* ── 아이템 그림: 가방 칸(ItemSlot) 위에 ── */
.item-thumb, img.item-thumb[src*="/img/items/"] {
  box-sizing: border-box; padding: 8px 8px 9px; object-fit: contain;
  background: url("../img/ui/cozy/slot-on.png") center / 100% 100% no-repeat;
}
.gift-row .item-thumb, .gift-row img.item-thumb[src*="/img/items/"] { padding: 4px 4px 5px; }

/* ── 탭: 둥근 단추(RoundButton2). 고른 탭 = 나무색, 나머지 = 글자만 ── */
.social-tabs, .ranking-tabs, .lobby-tabs { gap: 4px; }
.social-tabs { padding: 6px 6px 4px; background: var(--cozy-wood); border-bottom: var(--cozy-line) solid var(--cozy-outline); box-shadow: inset 0 -3px 0 var(--cozy-wood-lip); }
.social-tabs [role="tab"], .ranking-tabs [role="tab"] {
  padding: 3px var(--space-3) 7px; border: 0 solid transparent; border-radius: 999px; font-weight: 700;
}
.ranking-tabs [role="tab"] { color: var(--color-text-muted); }
.social-tabs [role="tab"]:hover, .ranking-tabs [role="tab"]:hover { background: rgba(255, 254, 235, .3); }
.social-tabs [aria-selected="true"], .ranking-tabs [aria-selected="true"] { background: none;
}
.mypage-tabs { margin-top: var(--space-3); padding: 6px 8px 4px; border: var(--border-card); }
.social-panel { border: 3px solid var(--cozy-outline); border-radius: var(--radius-lg); box-shadow: 0 4px 0 rgba(151, 81, 62, .35), 0 10px 26px rgba(0, 0, 0, .18); }
.social-form, .dm-new, .dm-head, .dm-threads button { border-color: color-mix(in srgb, var(--cozy-outline) 25%, transparent); }
.chat-line p { border: 1.5px solid color-mix(in srgb, var(--cozy-outline) 30%, transparent); }

/* 칩: 흰 둥근 단추, 고른 칩 = 나무색 둥근 단추 */
.area-chip, .mypage-quick a, .social-toggle {
  padding: 2px 12px 6px; border: 0 solid transparent; border-radius: 999px; background: none; box-shadow: none; margin-bottom: 0;
  border-image: url("../img/ui/cozy/pill-white.png") 26 32 34 32 fill / 10px 13px 13px 13px / 0 stretch;
  color: var(--cozy-ink);
}
.area-chip:hover, .mypage-quick a:hover { filter: brightness(1.04); background: none; border-color: transparent; color: var(--cozy-ink); }
.area-chip:active { transform: translateY(1px); box-shadow: none; }
.area-chip[aria-selected="true"], .ranking-chips [aria-selected="true"], .area-chip.is-active {
  background: none; font-weight: 700;
  border-image-source: url("../img/ui/cozy/pill-wood.png");
}

/* 메모 칩·고르기 칩 (팩 모양 흉내) */
.memo-chip input:checked + span { border-color: var(--cozy-outline); background: var(--cozy-wood); box-shadow: inset 0 -3px 0 var(--cozy-wood-lip); color: #fffeeb; text-shadow: 0 1px 0 #8a3f2c; }

/* ── 뱃지·알림 (흉내) ── */
.tag { padding: 0 7px; border: 1.5px solid var(--cozy-outline); border-radius: 999px; background: #f45d65; color: #fffeeb; box-shadow: inset 0 -2px 0 rgba(120, 10, 40, .25); line-height: 1.5; }
.tag--soft { background: #d6eeb0; color: #355f0a; box-shadow: inset 0 -2px 0 rgba(60, 120, 10, .2); }
.social-badge { border: 1.5px solid var(--cozy-outline); background: #f45d65; line-height: 16px; }
.toast {
  background: none; border: 0 solid transparent; border-radius: 0;
  border-image: url("../img/ui/cozy/note.png") 26 10 26 32 fill / 18px 8px 18px 24px / 0 stretch round;
  padding: var(--space-3) var(--space-4) var(--space-3) calc(24px + var(--space-3));
  filter: drop-shadow(0 2px 0 rgba(151, 81, 62, .3));
}
.admin-edit { border-color: var(--cozy-outline); background: var(--cozy-cream); color: var(--cozy-outline); }
.admin-edit:hover { background: var(--cozy-lip); }

/* ── 창(대화상자): CardRegular 처럼 나무색 머리띠 ── */
.resident-dialog, .special-dialog {
  border: 3px solid var(--cozy-outline); border-radius: 18px;
  box-shadow: inset 0 -5px 0 var(--cozy-lip-soft), 0 5px 0 rgba(151, 81, 62, .45), 0 14px 36px rgba(0, 0, 0, .25);
}
.special-person figcaption, .special-now p { border: 2px solid var(--cozy-outline); }

/* ── 지도 테두리·확대 단추 ── */
.world-zoom button + button { border-top: 2px solid var(--cozy-lip); }
.world-zoom button:hover { background: var(--cozy-lip); }
.world-zoom button:active { background: var(--cozy-lip-line); }

/* 진행 막대(관계·텃밭·낚시)도 팩 테두리로 */
.rel-bar, .garden-bar, .fishing-progress { border: 1.5px solid var(--cozy-outline); }

/* 표 (팩에 없음: 나무색 머리줄 + 갈색 테두리) */
table { border-collapse: separate; border-spacing: 0; border: var(--border-card); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
th { background: var(--cozy-wood); text-align: left; padding: 6px 10px; border-bottom: 2px solid var(--cozy-outline); }
td { padding: 6px 10px; border-top: 1px dashed color-mix(in srgb, var(--cozy-outline) 25%, transparent); }

@media (max-width: 760px) {
  .life-hud { border-image-width: 8px 0 9px 0; }
  .game-nav a { padding: 2px var(--space-2) 6px; }
}

/* 길 위의 주민 (game/travel.py): 핀 모양 그대로 길을 따라 움직이고, 타고 가는 것을 작게 붙인다 */
.world-map > .map-traveler { z-index: 5; animation: none; }
.map-traveler .trip-mode { position: absolute; right: -10px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fffde8; border: 2px solid #9a5244; font-size: 11px; line-height: 1; }
.map-traveler.face-left .trip-mode { right: auto; left: -10px; scale: -1 1; }
.map-traveler .map-label { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px; white-space: nowrap; }
.map-traveler:hover .map-label, .map-traveler.is-found .map-label, .world-map.is-close .map-traveler .map-label { display: block; }
.map-traveler.is-found .pin-head { box-shadow: 0 0 0 3px var(--color-sun), 0 2px 5px rgba(20, 32, 25, .28); }
/* 구역 보기: 주민 옆을 따라다니는 반려동물 */
.map-resident img.map-pet { position: absolute; left: calc(100% - 12px); bottom: -4px; width: 32px; height: 32px; border: 0; border-radius: 0; background: none; box-shadow: none; image-rendering: pixelated; animation: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.map-resident.face-left img.map-pet { left: auto; right: calc(100% - 12px); }

/* 방치 낚시 (components/IdleFishingPanel.tsx) */
.idle-catch { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.idle-catch li { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 2px solid #9a5244; border-radius: 10px; background: #fffde8; }
.idle-catch img { width: 28px; height: 28px; image-rendering: pixelated; }
.idle-catch small { color: #e0a43a; letter-spacing: -1px; }
/* 반려동물 (pages/PetSection.tsx) */
.pet-card { display: flex; gap: var(--space-3, 12px); align-items: flex-start; flex-wrap: wrap; }
.pet-image { width: 96px; height: 96px; padding: 8px; box-sizing: content-box; border: 2px solid #9a5244; border-radius: 14px; background: #fffde8; image-rendering: pixelated; box-shadow: inset 0 -4px 0 #f7c0b8; }
.pet-info { flex: 1 1 260px; min-width: 0; }
.pet-info h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; }
.pet-meter { margin-right: 10px; }
.pet-info meter { width: 140px; vertical-align: middle; }
.pet-away { padding: 8px 12px; border-radius: 10px; background: #fde3df; color: #8a2f2a; font-weight: 700; }
.pet-diary, .life-log { margin: 6px 0 0; padding: 0; list-style: none; max-height: 320px; overflow: auto; }
.pet-diary li, .life-log li { padding: 6px 2px; border-bottom: 1px dashed rgba(154, 82, 68, .35); overflow-wrap: anywhere; }
.pet-diary small, .life-log small { color: var(--color-muted, #8a7a6a); margin-right: 6px; }
.life-log .is-minus { color: #c0443c; } .life-log .is-plus { color: #3b8a2a; }
.pet-choices { display: grid; margin-bottom: 10px; grid-template-columns: repeat(auto-fill, minmax(var(--pet-cell-w), 1fr)); gap: 10px; }
.pet-choice { justify-items: center; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 8px 12px; min-height: 150px; border: 0 solid transparent; border-radius: 0; background: none; border-image: url("../img/ui/cozy/card-pet.png") 66 30 36 30 fill / 33px 15px 18px 15px / 0 stretch; }
.pet-choice img { width: 64px; height: 64px; image-rendering: pixelated; margin-top: auto; }
.debt-note { padding: 8px 12px; border-radius: 10px; background: #fde3df; }

/* ════════════════════════════════════════════════════════════════════
   2026-10 손질: 픽셀 아이콘 · 아래 고정 핫바 메뉴 · 왼쪽 아래 로고+BGM · 버튼 글꼴 · 나무색 위 밝은 글자
   ════════════════════════════════════════════════════════════════════ */

/* 픽셀 아이콘 (Fa 의 "px:번호" → static/img/ui/px-icons.png, items_sheet 16×16). 16px 의 정수 배로만 그린다. */
.px-icon {
  --px-s: 1;
  display: inline-block; flex: 0 0 auto; width: calc(16px * var(--px-s)); height: calc(16px * var(--px-s)); vertical-align: -3px;
  background: url("../img/ui/px-icons.png") calc(var(--px-x) * -16px * var(--px-s)) calc(var(--px-y) * -16px * var(--px-s)) / calc(256px * var(--px-s)) auto no-repeat;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.btn .px-icon, [role="tab"] .px-icon { vertical-align: -3px; }

/* 버튼 글꼴: 넥슨 메이플스토리, 조금 크게 */
.btn, form button:not([class]), [role="tab"], .area-chip, .social-toggle, .mypage-quick a {
  font-family: var(--font-btn); font-weight: 700; font-size: calc(var(--text-sm) + 1px); letter-spacing: -.01em;
}
.btn--small, .area-chip, .mypage-quick a { font-size: calc(var(--text-xs) + 1px); }

/* BGM 상자: 덜 둥글게 */
.bgm-player { border-radius: 5px; }

/* 연어색 상자(box-wood.png) 위 글자: 밝게 */
.balance-chip small, .balance-chip strong { color: #fffeeb; opacity: 1; text-shadow: 0 1px 0 #8a3f2c, 0 0 2px rgba(110, 47, 34, .7); }

/* 나무색(--cozy-wood) 바탕 위 글자: 밝게 (칸 제목띠·탭 줄·표 머리줄·특별 이벤트 머리·주민 창 머리) */
.panel > h2:first-child, .panel > .section-title:first-child, .social-tabs, .lobby-tabs, .special-head, th {
  --color-text: #fffeeb; --color-text-muted: #fbe6d8;
}
.panel > h2:first-child, .panel > .section-title:first-child h2, th, .special-head h2, .special-head h3 {
  color: #fffeeb; text-shadow: 0 1px 0 #8a3f2c, 0 0 2px rgba(110, 47, 34, .6);
}
.panel > .section-title:first-child > :not(h2):not(.btn):not(a.btn),
.panel > .section-title:first-child .card-meta, .panel > .section-title:first-child small, .panel > .section-title:first-child p {
  color: #fffeeb; opacity: .92; text-shadow: 0 1px 0 rgba(138, 63, 44, .8);
}
.social-tabs [role="tab"] { color: #fffeeb; text-shadow: 0 1px 0 #8a3f2c, 0 0 2px rgba(110, 47, 34, .6); }
.social-tabs [role="tab"]:hover { background: rgba(255, 254, 235, .18); }
.special-head, .special-close, .social-close { color: #fffeeb; }
.resident-dialog > h2 { color: var(--cozy-ink); }
.area-chip[aria-selected="true"], .ranking-chips [aria-selected="true"], .area-chip.is-active { color: #fffeeb; text-shadow: 0 1px 0 #8a3f2c; }
.btn--wood, .btn.is-current, .rig-poses .btn.is-current { --btn-ink: #fffeeb; --btn-glow: 0 1px 0 #8a3f2c, 0 0 2px rgba(110, 47, 34, .6); }

/* 칸 안 스크롤이 제목띠와 겹치지 않게: 제목띠는 그대로 두고 그 아래 내용만 스크롤 */
.lobby-card > :first-child { flex: 0 0 auto; }
.lobby-card > :not(:first-child) { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
.lobby-card > :not(:first-child):not(:last-child) { flex: 0 0 auto; overflow: visible; }


/* ── 아래 고정 메뉴: 가방 단축칸(InventoryHotbar) + 칸(ItemSlot) ── */
body { padding-bottom: calc(var(--hotbar-h) + var(--dock-gap)); background: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, .16) 1.2px, transparent 1.8px) 0 0 / 22px 22px, var(--mint); }
/* 로그인 전·입주 준비 중: 아래 메뉴가 없으니 그 자리를 비우지 않는다 (Layout.tsx is-outside) */
body.is-outside { padding-bottom: 0; }
.game-nav.hotbar {
  position: fixed; z-index: 44; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; align-items: center; width: max-content; max-width: calc(100vw - 12px); height: auto; margin: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  border: 0 solid transparent; border-image: url("../img/ui/cozy/hotbar.png") 40 50 46 50 fill / 20px 25px 23px 25px / 0 stretch;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .28));
  gap: 5px;
}
.game-nav.hotbar :is(a, .hotbar-slot) {
  flex: 0 0 auto; display: grid; justify-items: center; align-content: center; margin: 0; box-sizing: border-box;
  border: 0; border-radius: 0; border-image: none; background: url("../img/ui/cozy/slot.png") center / 100% 100% no-repeat;
  color: #fffeeb; font: 700 11px/1.1 var(--font-btn); text-shadow: 0 1px 0 #6e2f22, 0 0 2px rgba(80, 30, 20, .7);
  white-space: nowrap; text-decoration: none; transition: transform .12s, filter .12s;
  height: var(--hotbar-slot-h);
}
.game-nav.hotbar :is(a, .hotbar-slot) span { overflow: hidden; text-overflow: ellipsis; letter-spacing: -.03em; max-width: calc(var(--hotbar-slot-w) - 4px); }
.game-nav.hotbar :is(a, .hotbar-slot) i { margin: 0; opacity: 1; color: #fffeeb; }
.game-nav.hotbar :is(a, .hotbar-slot):hover { color: #fffeeb; background-color: transparent; filter: brightness(1.1); transform: translateY(-2px); }
.game-nav.hotbar :is(a, .hotbar-slot)[aria-current="page"] {
  border-image: none; background: url("../img/ui/cozy/slot-on.png") center / 100% 100% no-repeat;
  color: var(--cozy-ink); text-shadow: none; transform: translateY(-3px);
}
.game-nav.hotbar :is(a, .hotbar-slot)[aria-current="page"] i { color: var(--cozy-ink); }

/* ── 왼쪽 아래: 로고 + BGM (핫바와 겹치면 핫바 위로 올린다) ── */
.corner-dock { position: fixed; z-index: 43; display: grid; gap: 8px; pointer-events: none; left: var(--dock-gap); width: var(--clock-w); justify-items: stretch; }
.corner-dock > * { pointer-events: auto; }
.corner-dock .life-logo img { display: block; height: 69px; width: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.corner-dock .music-widget { position: static; }
@media (max-width: 1659px) {
  .corner-dock, .social-dock { bottom: calc(var(--hotbar-h) + var(--dock-gap)); }
  /* 쪽지 창이 핫바 위로 올라간 만큼 줄여서 위쪽이 화면 밖으로 나가지 않게 */
  .social-panel { max-height: calc(100dvh - var(--hotbar-h) - var(--dock-gap) - 12px); }
}
@media (max-width: 760px) {
  .game-nav.hotbar { left: 0; right: 0; bottom: 0; transform: none; width: auto; max-width: none; justify-content: flex-start; }
  .corner-dock .life-logo img { height: 40px; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-10 2차: 위쪽 바 없음(내 정보·로그아웃은 아래 핫바) · 민트 바탕 · 게임 화면처럼
   ════════════════════════════════════════════════════════════════════ */
.game-stage { padding-top: var(--space-4); margin-top: 6px; margin-bottom: var(--space-5); z-index: auto; width: calc(var(--wide-width, min(var(--content-width), 100vw - 2 * var(--space-4))) - 2 * var(--board-out)); padding-bottom: var(--board-pad); }
@media (min-width: 1200px) { .game-stage { padding-top: var(--space-4); } }

/* 화면 제목: 리본(Headers/Header2) + 설명은 작은 크림 쪽지 */
.page-header h1 {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  border: 0 solid transparent;
  filter: drop-shadow(0 3px 0 rgba(110, 47, 34, .25));
  color: var(--cozy-ink);
  border-image: url("../img/ui/cozy/ribbon-yellow.png") 0 80 0 80 fill / 0 44px 0 44px / 0 stretch;
  font-size: var(--page-title-size);
}
.page-header p {
  display: inline-block; margin-top: var(--space-2); padding: 4px 12px 6px; color: var(--cozy-ink);
  background: var(--cozy-cream); border: 2px solid var(--cozy-outline); border-radius: 10px; box-shadow: inset 0 -3px 0 var(--cozy-lip);
}
.page-header .eyebrow { display: block; color: #1f6e5e; }
.page-header .page-portrait { background: var(--cozy-cream); }

/* 핫바 왼쪽 끝: 내 주민 · 오른쪽 끝: 로그아웃 */
.game-nav.hotbar .hotbar-slot { border: 0; cursor: pointer; appearance: none; -webkit-appearance: none; }
.game-nav.hotbar .hotbar-player {
  display: flex; align-items: center; gap: 8px; width: auto; margin-right: 6px; padding: 0 14px 0 2px;
  background: none; border-right: 3px dotted rgba(110, 47, 34, .4); color: #fffeeb; font: 700 15px/1.25 var(--font-btn); text-align: left;
  height: var(--hotbar-slot-h);
}
.game-nav.hotbar .hotbar-player:hover { transform: none; }
/* '관리' 칸 숫자: 신고·문의 새 답변 (운영자는 처리 안 한 글) */
.game-nav.hotbar a:has(.hotbar-badge) { position: relative; }
.hotbar-badge { position: absolute; top: 2px; right: 2px; min-width: 20px; padding: 1px 5px; border-radius: 999px; background: #d9443a; color: #fff; font: 700 12px/18px var(--font-btn); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fffeeb; }
.hotbar-player img { box-sizing: border-box; object-fit: cover; object-position: top; background: url("../img/ui/cozy/slot-on.png") center / 100% 100% no-repeat; padding: 6px 6px 10px; }
.hotbar-player > span { display: grid; gap: 2px; max-width: 110px; }
.hotbar-player strong { overflow: hidden; text-overflow: ellipsis; }
.hotbar-player small { opacity: .95; }

/* 채팅·쪽지: 오른쪽 아래 가방 칸 단추 (아이콘 IconsDefault9) */
.social-toggle {
  position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; width: 74px; height: 78px; padding: 6px 2px 11px;
  border: 0; border-image: none; border-radius: 0; background: url("../img/ui/cozy/slot.png") center / 100% 100% no-repeat;
  color: #fffeeb; font: 700 11px/1.1 var(--font-btn); text-shadow: 0 1px 0 #6e2f22, 0 0 2px rgba(80, 30, 20, .7);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); box-shadow: none;
}
.social-toggle:hover { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)) brightness(1.08); transform: translateY(-2px); }
.social-toggle-icon { width: 47px; height: 34px; }
.social-toggle .social-badge { position: absolute; top: -4px; right: -4px; }

/* 진행 막대(meter): ProgressBarBackground + ProgressBar1 */
meter { -webkit-appearance: none; appearance: none; height: 14px; border: 0; background: url("../img/ui/cozy/bar-bg.png") center / 100% 100% no-repeat; }
meter::-webkit-meter-bar { height: 14px; border: 0; background: transparent; }
meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
  border-radius: 999px; background: url("../img/ui/cozy/bar-fill.png") left center / 100% 100% no-repeat;
}
meter::-moz-meter-bar { border-radius: 999px; background: url("../img/ui/cozy/bar-fill.png") left center / 100% 100% no-repeat; }

@media (max-width: 760px) {
  .game-nav.hotbar .hotbar-player > span { display: none; }
  .social-toggle { width: 62px; height: 66px; }
  .social-toggle span:not(.social-badge) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-10 3차: 바탕 로고 · 왼쪽 아래 시계 · 모든 화면 2단 배치
   ════════════════════════════════════════════════════════════════════ */
/* 왼쪽 위 바탕 로고: 원본 크기 그대로, 반투명. 칸들은 그 위에 놓인다 */
.bg-logo { position: absolute; top: 10px; left: 14px; opacity: .4; z-index: -2; }
.bg-logo img { display: block; width: auto; height: auto; max-width: none; }
.game-stage, .site-credits { position: relative; }

/* 시계·날짜·날씨 (BGM 바 위) */
.hud-clock {
  display: grid; justify-items: start; gap: 5px; padding: 8px 14px 9px; border-radius: 12px;
  background: rgba(31, 112, 95, .55); color: #fff; font-family: var(--font-btn); text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  backdrop-filter: blur(2px);
}
.hud-clock-time { display: flex; align-items: baseline; gap: 6px; padding: 0 2px 5px; border-bottom: 2px solid rgba(255, 255, 255, .9); font-weight: 700; line-height: 1; }
.hud-clock-time small { font-size: 17px; letter-spacing: .02em; }
.hud-clock-time time { font-size: 34px; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.hud-clock-date { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.hud-clock-day { padding: 0 6px; border-radius: 4px; background: #fff; color: #2f7d6b; text-shadow: none; font-size: 12px; line-height: 18px; }
.hud-clock-weather { margin-left: 4px; }
@media (max-width: 760px) {
  .bg-logo img { height: 70px; }
  .hud-clock { padding: 5px 10px 6px; }
  .hud-clock-time time { font-size: 22px; }
  .hud-clock-time small { font-size: 12px; }
  .hud-clock-date { font-size: 12px; }
}

/* 로비 '시세'·'랭킹' 탭도 칸 안에서 스크롤 */
.world-roster.lobby-card > [role="tabpanel"] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }

/* 모든 화면 2단: 칸을 두 줄로 나란히, 칸 높이는 화면에 맞추고 긴 목록은 칸 안에서 스크롤 */
@media (min-width: 960px) {
  .game-stage.is-board > .panel:has(.card-grid, .house-grid) { grid-column: auto; }
  .game-stage.is-board > .panel:not(.panel--wide) { display: flex; flex-direction: column; overflow: visible; max-height: none; }
  .game-stage.is-board > .panel > * { flex: 0 0 auto; }
  .game-stage.is-board > .panel > :is(.card-grid, .feed, ul, ol, .notice-list, .career-grid, .gift-list, .gift-columns, table, .fish-book, .house-grid, .stat-list, .house-room, .garden) {
    flex: 0 1 auto; min-height: 120px; overscroll-behavior: contain;
  }
  .game-stage.is-board .card-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}

/* 시계 글자는 흰색 (전역 time 색 덮어쓰기) */
.hud-clock time { color: inherit; }

/* ════════════════════════════════════════════════════════════════════
   2026-10 4차: BGM 오른쪽 위 · 시계 왼쪽 아래 고정 · 알림 팝업 · ? 안내 · 빈칸 채우기
   ════════════════════════════════════════════════════════════════════ */
.hotbar-player { flex: 0 0 auto; cursor: default; }

/* 시계: 왼쪽 아래 고정 (핫바는 시계 오른쪽 남은 폭의 가운데) */
.corner-dock { bottom: var(--dock-gap); }
@media (max-width: 1659px) { .corner-dock { bottom: var(--dock-gap); } }
@media (min-width: 761px) {
  .game-nav.hotbar { left: calc(var(--clock-w) + 2 * var(--dock-gap)); right: calc(84px + 2 * var(--dock-gap)); transform: none; margin: 0 auto; max-width: none; }
}
/* BGM: 오른쪽 위 고정. 화면 제목 줄은 오른쪽을 비워 둔다 */
.bgm-dock { position: fixed; z-index: 43; top: 12px; right: var(--dock-gap); display: flex; align-items: flex-start; gap: 6px; }
/* 효과음 켜기·끄기 (layout/Notifier.tsx) */
.sfx-toggle { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--line, #c9a77a); background: var(--paper, #fff8ea); font-size: 16px; line-height: 1; cursor: pointer; padding: 0; }
.sfx-toggle[aria-pressed="false"] { opacity: .65; }
.bgm-dock .music-widget { position: static; }
.bgm-dock .bgm-player { max-width: var(--bgm-w); }
.game-stage > :is(.page-header, .mypage-top):first-child { padding-right: calc(var(--bgm-w) + var(--space-3)); }
@media (max-width: 760px) {
  .corner-dock { bottom: calc(var(--hotbar-h) + var(--dock-gap)); }
  .bgm-dock { top: 6px; }
  .game-stage > :is(.page-header, .mypage-top):first-child { padding-right: 0; padding-top: 40px; }
}


/* 알림: 화면 가운데 팝업 */
.alert-layer { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(31, 60, 52, .28); animation: alert-in .15s ease-out; }
.alert-box {
  display: grid; justify-items: center; gap: 12px; min-width: min(320px, 100%); max-width: 460px;
  color: var(--cozy-ink); text-align: center;
  padding: 26px 30px 24px 58px;
}
.alert-box .toast { width: auto; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-weight: 700; }
.alert-box[data-kind="error"] { border-color: #b3261e; }
.alert-box .toast[data-kind="error"] { color: #b3261e; }
@keyframes alert-in { from { opacity: 0; } }
/* 특별 이벤트 알림도 맨 위 띠 대신 화면 가운데 팝업 */
.special-banner .special-close { position: absolute; top: -14px; right: -14px; }

/* ? 안내 */
.help-tip { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.help-btn {
  color: var(--cozy-ink); font: 700 14px/1 var(--font-btn);
}
.help-pop {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: -10px; width: max-content; max-width: min(360px, 80vw); color: var(--cozy-ink);
  font: 400 var(--text-sm)/1.55 var(--font-body); text-align: left; white-space: normal; text-shadow: none;
  border: 0 solid transparent;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .18));
  border-image: url("../img/ui/cozy/paper.png") 30 30 34 30 fill / 10px 10px 12px 10px / 0 stretch;
  padding: 10px 14px 14px;
}
.section-title .help-pop { left: auto; right: -10px; }
.page-header .help-tip { align-self: center; margin-left: 10px; }
.page-header > div:has(> .help-tip) { display: flex; align-items: center; flex-wrap: wrap; }

/* 빈칸 채우기 */
@media (min-width: 960px) {
  .game-stage.is-board { grid-auto-flow: row dense; column-gap: var(--board-gap); row-gap: var(--board-gap); }
  .game-stage.is-board > [role="tablist"], .game-stage.is-board > .neighbor-layout { grid-column: 1 / -1; }
  .game-stage.is-board > .panel:has(.card-grid, .house-grid, .fish-book):not(.panel--wide) { grid-row: span 2; }
  /* 이웃: 주민은 두 줄 카드, 소식은 넓게 · 둘 다 칸 안에서 스크롤 */
  .neighbor-layout { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr); gap: var(--tab-h) var(--board-gap); }
  .neighbor-layout > .panel { overscroll-behavior: contain; margin: 0; overflow: visible; max-height: none; }
  .neighbor-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-3); align-content: start; max-height: none; }
  .neighbor-list > h2 { grid-column: 1 / -1; }
  .neighbor-list > .neighbor { margin: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-10 5차: Cozy UI Pack 정식판 부품 (design/ui/gen_cozy_full.py)
   모바일 게임처럼 크게 부풀리지 않고, PC 웹게임처럼 작고 단정하게: 폴더 탭 · 액자 · 점선 팝업 · 구분선
   ════════════════════════════════════════════════════════════════════ */
/* 탭: 고른 탭은 크림색 폴더 탭(InventoryTabLong1)이 아래 칸과 이어지고, 나머지는 나무띠 위 글자 */
.social-tabs, .lobby-tabs, .mypage-tabs.social-tabs { align-items: flex-end; padding-bottom: 0; }
.social-tabs [role="tab"], .lobby-tabs [role="tab"] {
  margin-bottom: 0; padding: 6px var(--space-3) 7px; border: 0 solid transparent; border-radius: 0;
}
.social-tabs [aria-selected="true"], .lobby-tabs [aria-selected="true"] {
  color: var(--cozy-ink); text-shadow: none;
  border-image: url("../img/ui/cozy/tab-on.png") 16 22 2 22 fill / 8px 11px 1px 11px / 0 stretch;
}
.social-tabs [aria-selected="true"] .px-icon, .lobby-tabs [aria-selected="true"] .px-icon { filter: none; }
.ranking-tabs [aria-selected="true"] {
  border-image: url("../img/ui/cozy/tab.png") 16 22 2 22 fill / 8px 11px 1px 11px / 0 stretch; color: #fffeeb;
  text-shadow: 0 1px 0 #8a3f2c;
}

/* 얼굴 액자 (Frame1) */
.page-portrait, .neighbor-face {
  box-sizing: border-box; padding: 7px; border: 0 solid transparent; border-radius: 0; box-shadow: none; object-fit: cover; object-position: top;
  background: #fffde8; border-image: url("../img/ui/cozy/frame.png") 30 30 34 30 fill / 10px 10px 12px 10px / 0 stretch;
}
.neighbor-face { padding: 5px; border-image-width: 8px 8px 10px 8px; }

/* 알림 팝업: 점선 크림 상자(InventoryModal) */
.alert-box, .special-banner {
  border: 0 solid transparent; border-radius: 0; background: none;
  box-shadow: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22));
  border-image: url("../img/ui/cozy/note-alert.png") 20 20 24 44 fill / 20px 20px 24px 44px / 0 stretch round;
}
.special-banner { box-shadow: 0 0 0 100vmax rgba(31, 60, 52, .28); }
/* 목록 사이 구분선 (CozySeparator) */
.feed > article + article, .neighbor-feed > article + article {
  border-top: 0; background: url("../img/ui/cozy/separator.png") top center / 100% 3px no-repeat;
}
/* 라디오 단추 */
input[type="radio"] {
  -webkit-appearance: none; appearance: none; width: 20px; height: 20px; margin: 0 4px 0 0; vertical-align: -4px; flex: 0 0 auto;
  background: url("../img/ui/cozy/radio-off.png") center / 100% 100% no-repeat; border: 0; cursor: pointer;
}
input[type="radio"]:checked { background-image: url("../img/ui/cozy/radio-on.png"); }

/* ════════════════════════════════════════════════════════════════════
   2026-10 6차: Cozy UI 데모 화면처럼 — 점선 크림 상자(InventoryModal) 위로 튀어나온 파란 탭 제목,
   노란 리본 화면 제목, 자원 칩, 빨간 동그라미 닫기, 더 큰 글자
   ════════════════════════════════════════════════════════════════════ */

/* 칸: 점선 크림 상자 */
.panel {
  background: none; border: 0 solid transparent; border-radius: 0; box-shadow: none;
  border-image: url("../img/ui/cozy/modal.png") 44 fill / 44px / 0 stretch;
  filter: drop-shadow(0 4px 0 rgba(151, 81, 62, .28));
  --pad: var(--panel-pad);
  padding: var(--pad);
}
/* 칸 제목: 상자 위로 튀어나온 파란 폴더 탭(InventoryTabLong3). 오른쪽 단추·? 는 상자 윗선에 걸친다 */
.panel > h2:first-child, .panel > .section-title:first-child {
  position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2);
  margin: calc(-1 * var(--pad) - var(--tab-h) + 6px) 10px calc(var(--pad) - 6px) var(--tab-indent); padding: 0; min-height: var(--tab-h);
  background: none; border: 0; border-radius: 0; box-shadow: none;
}
.panel > h2:first-child, .panel > .section-title:first-child > h2 {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: var(--tab-h);
  padding: 12px 22px 8px; border: 0 solid transparent; border-radius: 0;
  border-image: url("../img/ui/cozy/tab-blue.png") 16 22 2 22 fill / 10px 14px 1px 14px / 0 stretch;
  color: #fff; font: 700 var(--tab-title-size) / 1.2 var(--font-btn);
  text-shadow: -1.5px -1.5px 0 #1d6f93, 1.5px -1.5px 0 #1d6f93, -1.5px 1.5px 0 #1d6f93, 1.5px 1.5px 0 #1d6f93, 0 2px 0 #1d6f93;
  white-space: nowrap;
}
.panel > h2:first-child .px-icon, .panel > .section-title:first-child > h2 .px-icon { filter: drop-shadow(0 1px 0 #1d6f93); }
.panel > .section-title:first-child > h2 { margin: 0; }
.panel > .section-title:first-child > :not(h2) { margin-bottom: -14px; color: var(--cozy-ink); text-shadow: none; opacity: 1; }
.panel > .section-title:first-child .card-meta, .panel > .section-title:first-child small { color: var(--cozy-ink); text-shadow: none; }
.panel > .section-title:first-child a:not(.btn) { color: var(--cozy-ink); }
.panel > .section-title:first-child .help-btn { width: 28px; height: 28px; font-size: 16px; }

/* 탭 제목이 있는 칸은 탭 높이만큼 위를 띄우고, 칸 자체는 잘리지 않게(스크롤은 안쪽 목록이 맡는다) */
.panel:has(> .section-title:first-child, > h2:first-child) { margin-top: calc(var(--tab-h) + 4px); }
.lobby-dash .lobby-map { margin-top: 0; }
.panel > .section-title:first-child { flex-wrap: wrap; }
.panel > .section-title:first-child > :is(p, small, .card-meta) { flex: 1 0 100%; order: 9; }
@media (min-width: 960px) {
  .neighbor-layout > .panel:not(.neighbor-list) > :not(:first-child) { max-height: max(380px, calc(100vh - var(--hotbar-h) - 220px)); overflow-y: auto; }
}

/* 로비 오른쪽 첫 칸의 탭 줄 / 크래프트·마이페이지 탭 줄: 나무 탭 + 고른 탭은 파란 탭 */
.lobby-tabs, .social-tabs.mypage-tabs, .social-tabs.craft-tabs {
  margin: 0 0 var(--space-2); padding: 0 4px; gap: 4px; background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 2px dashed rgba(154, 82, 68, .3);
}
.lobby-card > .lobby-tabs { margin: 0 0 var(--space-2); }
:is(.lobby-tabs, .mypage-tabs, .craft-tabs) [role="tab"] {
  padding: 5px 14px 8px; color: #fffeeb; text-shadow: 0 1px 0 #8a3f2c;
  border-image: url("../img/ui/cozy/tab.png") 16 22 2 22 fill / 9px 12px 1px 12px / 0 stretch;
}
:is(.lobby-tabs, .mypage-tabs, .craft-tabs) [aria-selected="true"] {
  color: #fff; text-shadow: -1px -1px 0 #1d6f93, 1px -1px 0 #1d6f93, -1px 1px 0 #1d6f93, 1px 1px 0 #1d6f93;
  border-image-source: url("../img/ui/cozy/tab-blue.png");
}
.game-stage.is-board > .craft-tabs, .mypage-tabs { background: none; box-shadow: none; }


/* 보유 코인: 자원 칩(아이콘 + 숫자) */
.balance-chip small { display: none; }
.balance-chip .px-icon { position: relative; z-index: 1; margin-right: -14px; filter: drop-shadow(0 2px 0 rgba(110, 47, 34, .35)); }
.balance-chip strong {
  min-width: 96px; padding: 4px 14px 6px 24px; text-align: right; font: 700 calc(var(--text-lg) + 2px) / 1.2 var(--font-btn);
  color: var(--cozy-ink); text-shadow: none;
  background: #fffde8; border: 3px solid var(--cozy-outline); border-radius: 10px; box-shadow: inset 0 -4px 0 #f3d9bd;
}

/* 카드: 크림 상자(Container2) */
.card, .fishing-spot, .career-card, .quick-links a {
  border: 0 solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: url("../img/ui/cozy/paper.png") 30 30 34 30 fill / 12px 12px 15px 12px / 0 stretch;
}

/* 닫기: 빨간 동그라미 단추 */
.social-close, .special-close, .resident-close, dialog .dialog-close, .history-close {
  display: inline-grid; place-items: center; width: 34px; height: 38px; padding: 0 0 4px; border: 0; border-radius: 0; cursor: pointer;
  background: url("../img/ui/cozy/btn-close.png") center / 100% 100% no-repeat; color: #fff;
  font: 700 22px/1 var(--font-btn); text-shadow: 0 1px 0 #8a1830;
}

/* ════════════════════════════════════════════════════════════════════
   2026-10 7차: 제목은 더 크게·본문은 조금 작게, 콘텐츠를 감싸는 갈색 판(ContainerAdvanced1),
   더 큰 아래 메뉴, 로그아웃 왼쪽 점선, 지도 동네 이름은 Noto Sans
   ════════════════════════════════════════════════════════════════════ */


/* 갈색 판: 화면 내용 전체를 감싼다. 화면 제목 리본은 판 윗선에 걸친다 */
.game-stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: var(--board-top); left: calc(-1 * var(--board-out)); right: calc(-1 * var(--board-out)); bottom: 0;
  border: 0 solid transparent; border-image: url("../img/ui/cozy/board.png") 34 34 40 34 fill / 34px 34px 40px 34px / 0 stretch;
  filter: drop-shadow(0 6px 0 rgba(110, 47, 34, .25));
}
.game-stage > .page-header:first-child { z-index: 1; }
/* 로그인·가입·입주 준비 화면은 갈색 판 없이 점선 바탕 위에 카드만 */
body.is-outside .game-stage::before { content: none; }
/* 쌓는 순서: 갈색 판 < 로고(반투명) < 화면 내용 */
.game-stage > :not(.mypage-top) { position: relative; z-index: 1; }
/* 로비 위 여백: 오른쪽 색깔 탭이 판 윗선 아래·BGM 막대 아래에 오도록 '판 윗선 + 탭 높이'만큼 띄운다.
   더 붙이고 싶으면 마지막 +4px 를 줄이면 된다 (음수로 하면 탭이 판 밖으로 나간다) */
.lobby-dash { padding: 0 1% 2%; margin-top: calc(var(--board-top) + var(--tab-h) + 4px); }
.site-credits { position: relative; }

/* 아래 메뉴: 칸·아이콘(3배)·글씨 키우기 */
.game-nav.hotbar { padding: 14px 20px 16px; }
.game-nav.hotbar :is(a, .hotbar-slot) { padding: 4px 2px 10px; gap: 2px; }
.game-nav.hotbar :is(a, .hotbar-slot) i:not(.px-icon) { font-size: 30px; line-height: 48px; height: 48px; }
.hotbar-player img { width: 68px; height: 76px; }
.hotbar-player small { font-size: 13px; }
/* 로그아웃 왼쪽 점선 (내 주민 오른쪽 점선과 같은 모양) */
.game-nav.hotbar .hotbar-logout { position: relative; margin-left: 20px; overflow: visible; }
.game-nav.hotbar .hotbar-logout::before { content: ""; position: absolute; left: -13px; top: 0; bottom: 0; border-left: 3px dotted rgba(110, 47, 34, .4); }

/* 지도 동네 이름: Noto Sans */
.world-map > .district-label { font-family: "Noto Sans KR", sans-serif; }

/* ════════════════════════════════════════════════════════════════════
   2026-10 8차: 잘린 테두리·혼자 떨어진 칸·여백 정리
   (값은 이 파일 맨 위 '여백·배치 조절판' :root 에서 고친다)
   ════════════════════════════════════════════════════════════════════ */
.game-nav.hotbar :is(a, .hotbar-slot) { width: var(--hotbar-slot-w); font-size: var(--hotbar-font); }

/* 칸 제목 줄: 탭은 왼쪽, ?·단추는 오른쪽에서 칸 윗선에 걸친다 */
.panel > .section-title:first-child > :not(h2):not(p):not(small):not(.card-meta),
.panel > .section-title:first-child .help-tip { margin-bottom: calc(-1 * var(--title-tools-drop)); align-self: flex-end; margin-right: -30px; }
/* 제목 줄 밑에 붙은 설명 글: 점선과 겹치지 않게 칸 안쪽으로 */
.panel > .section-title:first-child > :is(p, small, .card-meta) { margin: calc(var(--pad) + 2px) 0 -4px calc(-1 * var(--tab-indent)); }

/* 두 칸 배치: 벽돌 쌓기(빈틈 없이). 줄 높이는 layout/boardMasonry.ts 가 칸마다 정한다 */
@media (min-width: 960px) {
  .game-stage.is-board.is-masonry, .mypage-panel.is-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; grid-auto-flow: row dense; }
  .mypage-panel { column-gap: var(--board-gap); }
}

/* 마이페이지 머리줄: 붙박이(sticky)를 풀고 바탕을 비운다 — 판 윗선을 민트 띠가 가리던 것 */
.game-stage.is-board > .mypage-top { position: relative; top: auto; z-index: 1; background: none; }
.mypage-body > .mypage-quick { top: var(--space-3); }

/* 칸 안 목록을 칸 높이에 맞춰 자르지 않는다 (잘린 카드가 보이던 것). 길면 화면 전체가 스크롤된다 */
@media (min-width: 960px) {
  .game-stage.is-board > .panel > :is(.card-grid, .feed, ul, ol, .notice-list, .career-grid, .gift-list, .gift-columns, table, .fish-book, .house-grid, .stat-list, .house-room, .garden),
  .game-stage.is-board :is(.feed, .photo-grid) { max-height: none; overflow: visible; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-10 9차: 로비 — 지도 제목은 노란 리본(상자 윗선에 걸침),
   오른쪽 '지금 마을에서는·랭킹·시세'는 위로 튀어나온 색깔 탭
   ════════════════════════════════════════════════════════════════════ */

/* 지도 제목: 노란 리본(Header10). 리본 가운데가 상자 윗선에 온다 */
.lobby-map > .section-title:first-child {
  margin-top: calc(-1 * var(--pad) - var(--map-ribbon-h) / 2);
  min-height: var(--map-ribbon-h); align-items: center;
  margin-bottom: calc(var(--pad) - var(--map-ribbon-h) / 2);
  justify-content: flex-start;
  grid-template-columns: 1fr auto 1fr;
  margin-left: 0;
}
#island-title {margin-top: -15px;}
.lobby-map > .section-title:first-child > h2 {
  color: var(--cozy-ink); text-shadow: none;
  border-image: url("../img/ui/cozy/ribbon-yellow.png") 0 80 0 80 fill / 0 44px 0 44px / 0 stretch;
  filter: drop-shadow(0 3px 0 rgba(110, 47, 34, .25));
  font-size: var(--map-ribbon-size);
  grid-column: 2;
}
.lobby-map > .section-title:first-child > :not(h2) { margin-bottom: 0; align-self: center; }

/* 오른쪽 위 탭: 마을 소식·마을 알림판 제목처럼 상자 위로 튀어나온다. 탭마다 색이 다르다
   (탭 이미지는 tab-blue.png, 탭마다 글자 테두리 색은 --tab-ink) */
.world-roster > .lobby-tabs:first-child {
  position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 4px;
  margin: calc(-1 * var(--pad) - var(--tab-h) + 19px) 0 calc(var(--pad) - 19px) var(--tab-indent); padding: 0; /* 19px = 탭이 칸 안으로 들어온 깊이 */
  min-height: var(--tab-h); background: none; border: 0; border-radius: 0; box-shadow: none;
}
.world-roster > .lobby-tabs [role="tab"] {
  --tab-ink: #1d6f93;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px;
  min-height: calc(var(--tab-h) - 6px); padding: 4px 16px 7px; border: 0; border-image: none; background: none;
  color: #fff; font: 700 16px / 1.2 var(--font-btn); white-space: nowrap; cursor: pointer;
  text-shadow: -1.5px -1.5px 0 var(--tab-ink), 1.5px -1.5px 0 var(--tab-ink), -1.5px 1.5px 0 var(--tab-ink), 1.5px 1.5px 0 var(--tab-ink), 0 2px 0 var(--tab-ink);
  opacity: .52; transition: transform .12s, opacity .12s;
}
.world-roster > .lobby-tabs [role="tab"]::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border: 0 solid transparent;
  border-image: url("../img/ui/cozy/tab-blue.png") 16 22 2 22 fill / 10px 14px 1px 14px / 0 stretch;
  filter: none;
}
#lobby-tab-town { --tab-ink: #3c7a2c; }      /* 지금 마을에서는: 초록 */
#lobby-tab-ranking { --tab-ink: #a8700f; }  /* 랭킹: 주황 */
#lobby-tab-prices { --tab-ink: #b0466f; }    /* 시세: 분홍 */
.world-roster > .lobby-tabs [role="tab"]:hover { opacity: 1; }
.world-roster > .lobby-tabs [aria-selected="true"] { opacity: 1; transform: none; min-height: var(--tab-h); font-size: 17px; z-index: 1; }
.world-roster > .lobby-tabs [role="tab"] .px-icon { filter: drop-shadow(0 1px 0 var(--tab-ink)); }
/* 지도 상자 윗선을 오른쪽 상자와 맞춘다 (탭 제목용 위 여백을 빼기) */
.lobby-dash > .panel.lobby-map { margin-top: 0; }

/* ════════════════════════════════════════════════════════════════════
   2026-10 10차: 팩 이미지 교체 (design/ui/gen_cozy_full.py 로 만든다)
   부모 판 ContainerAdvanced2 · 이웃/주민 소식 칸 BookContainer2(펼친 책) · 반려동물 칸 CardAdvanced1_yellow
   알림 팝업 NoteContainer1 · 재화 IconsOutline26 · 지금 마을에서는 IconsOutline51 · 랭킹 IconsOutline57
   ════════════════════════════════════════════════════════════════════ */


/* 아이콘 (Cozy UI 아이콘은 매끈한 그림이라 크기를 자유롭게 줄여도 된다) */
.cozy-icon { display: inline-block; flex: 0 0 auto; width: calc(16px * var(--ci-s, 1)); height: calc(16px * var(--ci-s, 1)); vertical-align: -.2em; background: center / contain no-repeat; }
.cozy-icon--coin { background-image: url("../img/ui/cozy/icon-coin.png"); }
.cozy-icon--pin { background-image: url("../img/ui/cozy/icon-pin.png"); width: 18px; height: 22px; }
.cozy-icon--trophy { background-image: url("../img/ui/cozy/icon-trophy.png"); width: 24px; height: 20px; }
.balance-chip .cozy-icon { position: relative; z-index: 1; width: 36px; height: 36px; margin-right: -14px; filter: drop-shadow(0 2px 0 rgba(110, 47, 34, .35)); }
.world-roster > .lobby-tabs [role="tab"] .cozy-icon { filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }

/* 이웃·주민 소식: 부모 판(갈색 판 자리)을 펼친 책으로. 책등이 늘어나지 않게
   왼쪽 쪽은 판의 ::before, 오른쪽 쪽은 ::after 로 따로 깐다. 칸들은 다른 화면과 같은 점선 상자 */
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage::before {
  right: 50%; border-image: url("../img/ui/cozy/book-l.png") 34 12 50 34 fill / 34px 12px 50px 34px / 0 stretch;
}
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: var(--board-top); left: 50%; right: calc(-1 * var(--board-out)); bottom: 0;
  border: 0 solid transparent; border-image: url("../img/ui/cozy/book-r.png") 34 34 50 12 fill / 34px 34px 50px 12px / 0 stretch;
  filter: drop-shadow(0 6px 0 rgba(110, 47, 34, .25));
}
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage { padding-bottom: calc(var(--board-pad) + var(--book-edge-bottom) - 20px); }



/* ════════════════════════════════════════════════════════════════════
   2026-10 11차: 판 안 맨 위 탭 → 버튼, 로비 세 탭 → InventoryTabLong4·5·6, 리본 제목 키우기
   ════════════════════════════════════════════════════════════════════ */

/* 리본 제목: 화면 제목과 지도 제목을 같은 크기로 */
.page-header h1, .lobby-map > .section-title:first-child > h2 {
  min-height: var(--ribbon-h); box-sizing: border-box; padding: 6px calc(var(--ribbon-end) + 20px) 30px;
  border-image-width: 0 var(--ribbon-end) 0 var(--ribbon-end); line-height: 1.2;
}
.page-header h1 .px-icon { --px-s: 2; }

/* 판 안 맨 위 탭(마이페이지·크래프트): 탭 대신 버튼. 고른 것은 나무 버튼 */
.social-tabs.mypage-tabs, .social-tabs.craft-tabs { gap: 8px; padding: 0; border-bottom: 0; flex-wrap: wrap; align-items: center; }
:is(.mypage-tabs, .craft-tabs) [role="tab"] {
  min-height: 36px; padding: 3px var(--space-4) 9px; margin: 0;
  color: var(--cozy-ink); text-shadow: none; font: 700 15px / 1.2 var(--font-btn);
  border: 0 solid transparent; border-image: url("../img/ui/cozy/btn-white.png") 16 34 22 40 fill / 8px 17px 11px 20px / 0 stretch;
}
:is(.mypage-tabs, .craft-tabs) [role="tab"]:hover { filter: brightness(1.05); }
:is(.mypage-tabs, .craft-tabs) [aria-selected="true"] {
  color: #2f5d18; text-shadow: 0 1px 0 rgba(255, 255, 235, .8);
  border-image: url("../img/ui/cozy/btn-lime-down.png") 20 34 18 40 fill / 10px 17px 9px 20px / 0 stretch;
  padding-top: 5px; padding-bottom: 7px;
}
:is(.mypage-tabs, .craft-tabs) [role="tab"] .px-icon { filter: none; }

/* 로비 세 탭: 팩 탭 이미지(초록 InventoryTabLong4 · 노랑 5 · 분홍 6). 물들이기(hue-rotate)는 끈다 */
#lobby-tab-town::before { border-image-source: url("../img/ui/cozy/tab-green.png"); }
#lobby-tab-ranking::before { border-image-source: url("../img/ui/cozy/tab-yellow.png"); }
#lobby-tab-prices::before { border-image-source: url("../img/ui/cozy/tab-pink.png"); }

/* 12차: 이웃·주민 소식은 바탕이 책이라 칸의 점선 크림 상자를 없앤다 (제목 탭·내용만 책 위에) */
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage .panel {
  border-image: none; background: none; box-shadow: none; filter: none;
}

/* ════════════════════════════════════════════════════════════════════
   13차: 칸 본문(제목 제외)은 칸 테두리에서 위·좌·우·아래 모두 --panel-pad(40px) 떨어진 가운데에.
   제목 탭은 칸 윗선에 걸쳐 있으므로, 제목 줄 아래 여백 = 패딩 - 6px(탭이 칸 안으로 들어온 깊이)
   ════════════════════════════════════════════════════════════════════ */
.lobby-card { --pad: var(--panel-pad); }
/* 제목 줄에 붙은 설명 글도 본문으로 본다: 설명이 40px 자리에 오고, 그 아래 본문은 조금 띄운다 */
.panel > .section-title:first-child > :is(p, small, .card-meta) { margin-top: calc(var(--pad) - 6px); margin-bottom: 0; }
.panel > .section-title:first-child:has(> :is(p, small, .card-meta)) { margin-bottom: var(--space-3); }
/* 본문 첫 줄·마지막 줄의 자체 여백은 없앤다 (간격은 칸 패딩 하나로) */
.panel > .section-title:first-child + *, .panel > h2:first-child + *, .world-roster > .lobby-tabs:first-child + * { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
/* 제목 줄 없이 h2 만 있는 칸: inline-flex 면 음수 위 여백이 먹지 않아 탭이 내려앉는다 → 블록(flex)으로 */
.panel > h2:first-child { display: flex; width: fit-content; }
/* 칸 자체가 grid(이웃 목록)면 grid 간격만큼 빼서 같은 40px 로 */
.neighbor-list > h2:first-child { grid-column: 1 / -1; align-self: start; margin-top: calc(-1 * (var(--pad) - var(--space-3)) - var(--tab-h) + 6px); margin-bottom: 0; }
.neighbor-list { padding-top: calc(var(--pad) - var(--space-3)); }
/* 두 칸을 나란히 놓는 묶음(.panel-grid) 안의 칸은 옆 칸 높이에 맞춰 늘어나지 않게 (아래 여백도 40px) */
.panel-grid { align-items: start; }
/* ===== 14차: 로비 오른쪽 세 칸 높이 비율 =====
   위에서부터 지금 마을에서는(랭킹·시세) : 마을 소식 : 마을 알림판.
   숫자(맨 위 조절판의 --side-ratio-*)만 바꾸면 비율이 바뀐다. 내용이 칸보다 길면 칸 안에서 스크롤된다. */
@media (min-width: 1200px) {
  .lobby-side > .panel.lobby-card:nth-child(n) { margin-top: 0; }
}

/* ===== 15차: 지도 ? 단추를 리본 바로 옆으로 ===== */
.panel.lobby-map > .section-title:first-child > .help-tip { align-self: flex-start; margin: var(--map-help-drop) 0 0 var(--map-help-gap); grid-column: 3; justify-self: start; }

/* ===== 16차·18차: 모든 화면의 리본 제목을 화면 가운데로 =====
   ? 단추·초상화·코인 칩은 가운데 맞춤 계산에서 빠지게 따로 띄운다. */
.game-stage > .page-header:first-child, .mypage-top > .page-header {
  position: relative; display: flex; justify-content: center;
}
@media (min-width: 961px) {
  .game-stage > :is(.page-header, .mypage-top):first-child { padding-left: 0; padding-right: 0; }
  .game-stage > .page-header:first-child, .mypage-top > .page-header { padding-left: var(--title-side); padding-right: var(--title-side); }
}
.game-stage > .page-header:first-child > div:not(.balance-chip) { position: relative; flex: 0 0 auto; }
.game-stage > .page-header:first-child > div > .help-tip {
  position: absolute; left: calc(100% + var(--book-help-gap)); top: 50%; transform: translateY(-50%); margin: 0;
}
/* 코인 칩: 판 안쪽 여백(부모 패딩)은 그대로 두고 맨 오른쪽 위에 붙인다 */
.game-stage > .page-header:first-child > .balance-chip, .mypage-top > .page-header > .balance-chip {
  position: absolute; right: 0; margin: 0;
  /* 판 윗선에서 판 옆 여백(--board-out)만큼 안쪽. --space-4 = 제목 줄 위 여백 */
  top: calc(var(--board-top) + var(--board-out) - var(--space-4) + var(--chip-drop));
}

/* 마이페이지: 초상화 | 리본 | (빈칸) 세 칸으로 리본을 가운데에, 자기소개는 리본 아래 */
.mypage-top > .page-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: var(--space-3); }
.mypage-top > .page-header > .page-portrait { grid-column: 1; justify-self: end; }
.mypage-top > .page-header > .grow { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; }
.mypage-top > .page-header > .grow > p { margin: 0; text-align: center; }

/* 로비 지도 리본도 지도 상자 가운데로: 빈칸 | 리본 | ? 세 칸 (? 위치는 15차 변수 그대로) */
.lobby-map > .section-title:first-child { display: grid; }

/* ===== 20차: 반투명 바탕 로고는 맨 뒤 (갈색 판·책 그림보다 아래) ===== */

/* ===== 21차: 상점 화면 배치. 왼쪽 상점 칸 | 오른쪽 초대코드 + 내 가방.
   내 가방 칸은 아래로 늘어나 상점 칸과 아래끝이 맞는다 (두 칸 배치일 때만).
   벽돌 쌓기(boardMasonry.ts)가 칸마다 적는 줄 위치보다 앞서도록 !important. ===== */
@media (min-width: 960px) {
  body[data-page="shop"] .game-stage.is-board.is-masonry {
    grid-auto-rows: auto; grid-template-rows: auto auto 1fr; row-gap: var(--board-gap);
  }
  body[data-page="shop"] .game-stage.is-masonry > .page-header:first-child { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  body[data-page="shop"] .game-stage.is-masonry > .shop-main { grid-row: 2 / span 2 !important; grid-column: 1 !important; }
  body[data-page="shop"] .game-stage.is-masonry > .shop-invite { grid-row: 2 !important; grid-column: 2 !important; }
  /* 내 가방: 상점 칸 아래끝을 넘지 않고, 넘치는 물건은 칸 안에서 스크롤 (36차) */
  body[data-page="shop"] .game-stage.is-masonry > .shop-bag { grid-row: 3 !important; grid-column: 2 !important; align-self: stretch;
    display: flex; flex-direction: column; contain: size; box-sizing: border-box; }  /* 크기 봉쇄: 칸 안 물건 수가 줄 높이를 늘리지 않고, 위 여백(탭 자리)까지 빼고 늘어난다 (39차) */
  body[data-page="shop"] .game-stage.is-board > .panel.shop-bag > .shop-bag__list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; }
}
#shop-tab-furniture { --tab-img: url("../img/ui/cozy/tab-green.png"); --tab-ink: var(--news-green); }
/* 가격의 동전 그림 */
.coin-price { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.coin-price .cozy-icon { vertical-align: middle; }

/* ===== 22차: 낚시 화면 2×2 블록 배치 =====
   낚시터 | 물고기 시세
   방치 낚시 | 물고기 도감
   같은 줄의 두 칸은 높이가 같다. 시세표·도감은 칸 안에서 스크롤해 줄 높이를 늘리지 않는다. */
@media (min-width: 960px) {
  body[data-page="fishing"] .game-stage.is-board.is-masonry {
    grid-auto-rows: auto; row-gap: var(--board-gap); align-items: stretch;
    grid-template-rows: auto minmax(var(--fish-row1-h), auto) minmax(var(--fish-row2-h), auto);
  }
  body[data-page="fishing"] .game-stage.is-masonry > .page-header:first-child { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  body[data-page="fishing"] .game-stage.is-masonry > .fish-spots-panel { grid-row: 2 !important; grid-column: 1 !important; }
  body[data-page="fishing"] .game-stage.is-masonry > .fish-prices-panel { grid-row: 2 !important; grid-column: 2 !important; }
  body[data-page="fishing"] .game-stage.is-masonry > .fish-idle { grid-row: 3 !important; grid-column: 1 !important; }
  body[data-page="fishing"] .game-stage.is-masonry > .fish-book-panel { grid-row: 3 !important; grid-column: 2 !important; }
  /* 시세표·도감: 남은 높이만큼만 차지하고 넘치면 스크롤 (contain: size = 줄 높이 계산에 끼지 않음) */
  body[data-page="fishing"] :is(.fish-prices-panel, .fish-book-panel) { display: flex; flex-direction: column; }
  body[data-page="fishing"] .fish-prices-panel > .fish-prices { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body[data-page="fishing"] :is(.fish-prices-panel .fish-price-list, .fish-book-panel > .fish-book) {
    flex: 1 1 auto; contain: size; overflow-y: auto; padding-right: 6px; align-content: start;
  }
}
/* 재도전 기다리는 낚시터 */
.fishing-spot.is-cooling { opacity: .75; }
.fishing-spot.is-cooling small { color: var(--cozy-ink); }

/* ===== 23차: 낚시 화면 다듬기 ===== */
/* 물고기 도감: 칸 안에서 스크롤 (위 '목록을 자르지 않는다' 규칙보다 앞서게 선택자를 세게) */
@media (min-width: 960px) {
  body[data-page="fishing"] .game-stage.is-board > .fish-book-panel.panel > .fish-book,
  body[data-page="fishing"] .game-stage.is-board > .fish-prices-panel.panel .fish-price-list {
    flex: 1 1 auto; contain: size; max-height: none; overflow-y: auto; padding-right: 6px; align-content: start;
  }
}
/* 방치 낚시 '걸어 두기' 단추: 칸을 가득 채운다 */
.fish-idle { display: flex; flex-direction: column; }
.fish-idle .idle-spots {
  flex: 1 1 auto; display: grid; grid-template-columns: repeat(var(--idle-btn-cols), minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--space-3);
  margin-top: var(--idle-btn-top);
}
.fish-idle .idle-spots > .btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; padding: var(--space-3); white-space: normal; text-align: center;
  min-height: var(--idle-btn-h);
  font-size: var(--idle-btn-font);
}
.fish-idle .idle-spots > .btn .px-icon { --px-s: 2 !important; }
/* 시세 '대박' 줄: 연두 */
.fish-price-list li.is-boom { border-color: var(--boom-line); background: var(--boom-bg); box-shadow: 0 2px 0 var(--boom-line); }

/* ===== 24차: 알림창(노트 배경) 글꼴 → 학교안심 나들이체 (글꼴 등록은 tokens.css) ===== */
:is(.alert-box, .special-banner), :is(.alert-box, .special-banner) :not(.btn, button, input, select, textarea, .px-icon, .cozy-icon, i) {
  font-family: var(--note-font);
}

/* ===== 25차 ===== */


/* 칸 제목 자리의 탭 여러 개 (로비 마을 소식 | 마을 뉴스, 직업 일 목록). 모양은 칸 제목 탭과 같고, 고르지 않은 탭은 흐리다 */
.panel > .section-title:first-child > .title-tabs { display: flex; align-items: flex-end; gap: 4px; min-height: var(--tab-h); }
.title-tabs [role="tab"] {
  --tab-img: url("../img/ui/cozy/tab-blue.png"); --tab-ink: #1d6f93;
  display: inline-flex; align-items: center; gap: 8px; min-height: calc(var(--tab-h) - 6px); padding: 10px 20px 7px;
  border: 0 solid transparent; border-image: var(--tab-img) 16 22 2 22 fill / 10px 14px 1px 14px / 0 stretch; background: none;
  color: #fff; font: 700 var(--tab-title-size, var(--text-lg)) / 1.2 var(--font-btn); white-space: nowrap; cursor: pointer;
  text-shadow: -1.5px -1.5px 0 var(--tab-ink), 1.5px -1.5px 0 var(--tab-ink), -1.5px 1.5px 0 var(--tab-ink), 1.5px 1.5px 0 var(--tab-ink), 0 2px 0 var(--tab-ink);
  opacity: .55; transition: opacity .12s;
}
.title-tabs [role="tab"]:hover { opacity: .85; }
.title-tabs [aria-selected="true"] { opacity: 1; min-height: var(--tab-h); }
.title-tabs [role="tab"] .px-icon { filter: drop-shadow(0 1px 0 var(--tab-ink)); }
#news-tab-town, #jobs-tab-career { --tab-img: url("../img/ui/cozy/tab-green.png"); --tab-ink: var(--news-green); }

/* 로비 마을 소식 칸: 탭 내용이 칸 안에서 스크롤 */
.lobby-news > [role="tabpanel"]:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }

/* 마을 뉴스 목록 */
.town-news { margin: 0; padding: 0; list-style: none; }
.town-news li { padding: var(--space-2) 0; border-top: 1px dashed var(--color-border); }
.town-news li:first-child { border-top: 0; padding-top: 0; }
.town-news p { margin: 0 0 2px; }
.town-news-title { font-weight: 700; color: var(--cozy-ink); }
.town-news-body { font-size: var(--text-sm); }
.town-news small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--color-text-muted); font-size: var(--text-xs); }
.town-news small b, .stock-news b { padding: 0 6px; border-radius: var(--radius-pill); font-weight: 700; }
:is(.town-news, .stock-news) b.is-up { color: #c0392b; background: #fde3df; }
:is(.town-news, .stock-news) b.is-down { color: #2463a8; background: #e3eefa; }
.town-news li.is-casino .town-news-title { color: #a8700f; }
.town-news-new { margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--news-green); color: #fff; font-size: 11px; vertical-align: middle; }

/* 지도 위 확성기 띠: 막 난 뉴스가 오른쪽에서 왼쪽으로 흘러간다 */
.news-ticker {
  display: flex; align-items: center; gap: 8px; height: var(--ticker-h); margin: 0 0 var(--space-2); padding: 0 12px 0 8px;
  border: 2px solid var(--cozy-outline); border-radius: var(--radius-pill); background: #fff8d8; box-shadow: inset 0 -3px 0 #f3dc9a;
  overflow: hidden;
}
.news-ticker-horn { flex: 0 0 auto; font-size: 20px; animation: ticker-horn 1.2s ease-in-out infinite; }
.news-ticker-track { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.news-ticker-text {
  display: inline-block; margin: 0; padding-left: 100%; white-space: nowrap; color: var(--cozy-ink); font: 700 15px / var(--ticker-h) var(--font-btn);
  animation: ticker-run calc(var(--ticker-len) * var(--ticker-step) + 10s) linear infinite;
}
.news-ticker:hover .news-ticker-text { animation-play-state: paused; }
@keyframes ticker-run { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes ticker-horn { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .news-ticker-text { animation: none; padding-left: 0; }
  .news-ticker-horn { animation: none; }
}

/* 세부 시세 흐름 창 */
.stock-price-list li.is-clickable { cursor: pointer; transition: transform .1s; }
.stock-price-list li.is-clickable:hover { transform: translateY(-1px); outline: 2px solid var(--color-sun); outline-offset: -2px; }
.stock-dialog { width: min(620px, calc(100% - 2 * var(--space-6))); text-align: left; }
.stock-dialog h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); }
.stock-dialog h2 img { width: 32px; height: 32px; image-rendering: pixelated; }
.stock-dialog h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); }
.stock-chart { display: block; width: 100%; height: auto; margin-top: var(--space-2); border: 2px solid var(--color-border); border-radius: var(--radius-md); background: #fffdf2; }
.stock-chart-grid { stroke: var(--color-border); stroke-dasharray: 4 4; }
.stock-chart-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.stock-chart.is-up .stock-chart-line { stroke: #d2453b; }
.stock-chart.is-down .stock-chart-line { stroke: #2f74c0; }
.stock-chart.is-up .stock-chart-area { fill: rgba(210, 69, 59, .12); }
.stock-chart.is-down .stock-chart-area { fill: rgba(47, 116, 192, .12); }
.stock-chart text { fill: var(--color-text-muted); font-size: 11px; }
.stock-news { max-height: 200px; overflow-y: auto; text-align: left; }
.stock-news li { display: flex; align-items: center; gap: 8px; }
.stock-news li > span { color: var(--color-text-muted); font-size: var(--text-xs); white-space: nowrap; }
.stock-news li > b { margin-left: auto; white-space: nowrap; }

@media (min-width: 960px) {
  /* 제작: 탭 줄 아래 왼쪽 진행 중 + 제작, 오른쪽 요리 (요리 칸 높이 = 진행 중 + 제작). 레시피 목록은 칸 안에서 스크롤 */
  body[data-page="craft"] .game-stage.is-board.is-masonry {
    grid-auto-rows: auto; row-gap: var(--board-gap); align-items: stretch;
    grid-template-rows: auto auto auto var(--craft-list-h);
  }
  body[data-page="craft"] .game-stage.is-masonry > .page-header:first-child { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  body[data-page="craft"] .game-stage.is-masonry > .craft-tabs { grid-row: 2 !important; grid-column: 1 / -1 !important; }
  body[data-page="craft"] .game-stage.is-masonry > .craft-progress { grid-row: 3 !important; grid-column: 1 !important; }
  body[data-page="craft"] .game-stage.is-masonry > .craft-group--make { grid-row: 4 !important; grid-column: 1 !important; }
  body[data-page="craft"] .game-stage.is-masonry > .craft-group--cook { grid-row: 3 / span 2 !important; grid-column: 2 !important; }
  /* 주식: 거래 | 시세 흐름 같은 높이 */
  body[data-page="market"] .game-stage.is-board.is-masonry {
    grid-auto-rows: auto; row-gap: var(--board-gap); align-items: stretch; grid-template-rows: auto var(--market-h);
  }
  body[data-page="market"] .game-stage.is-masonry > .page-header:first-child { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  body[data-page="market"] .game-stage.is-masonry > .market-trade { grid-row: 2 !important; grid-column: 1 !important; }
  body[data-page="market"] .game-stage.is-masonry > .market-board { grid-row: 2 !important; grid-column: 2 !important; }
  /* 직업: 현재 활동 | 일 목록 같은 높이 */
  body[data-page="play"] .game-stage.is-board.is-masonry {
    grid-auto-rows: auto; row-gap: var(--board-gap); align-items: stretch; grid-template-rows: auto auto minmax(var(--play-h), auto);
  }
  body[data-page="play"] .game-stage.is-masonry > .page-header:first-child { grid-row: 1 !important; grid-column: 1 / -1 !important; }
  body[data-page="play"] .game-stage.is-masonry > p.panel { grid-row: 2 !important; grid-column: 1 / -1 !important; }
  body[data-page="play"] .game-stage.is-masonry > .play-now { grid-row: 3 !important; grid-column: 1 !important; }
  body[data-page="play"] .game-stage.is-masonry > .play-jobs { grid-row: 3 !important; grid-column: 2 !important; }

  /* 칸 안에서 스크롤하는 목록 (예전 '목록을 자르지 않는다' 규칙보다 세게) */
  body .game-stage.is-board > :is(.craft-group, .market-trade, .market-board, .play-jobs).panel { display: flex; flex-direction: column; }
  body .game-stage.is-board > .market-board.panel > .fish-prices { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  body .game-stage.is-board > :is(.craft-group, .market-trade, .play-jobs).panel > .card-grid,
  body .game-stage.is-board > .market-board.panel .stock-price-list {
    flex: 1 1 auto; contain: size; max-height: none; overflow-y: auto; padding-right: 6px; align-content: start;
  }
}

/* ===== 26차: 세부 시세 창 — 화면 가운데, 갈색 머리띠 없이, 닫기는 쪽지 창과 같은 빨간 단추 ===== */
.stock-dialog[open] { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 40px); }
.resident-dialog.stock-dialog { background: var(--color-surface); padding-top: var(--space-5); }
.stock-dialog > .dialog-close { position: absolute; top: 10px; right: 12px; }
.stock-dialog > h2 { padding-right: 44px; }
.panel:not(.lobby-map) > .section-title:first-child > :not(h2):not(p):not(small):not(.card-meta):not(.title-tabs) { translate: 0 calc(-1 * var(--title-tools-raise)); }

/* ===== 27차: 주식 거래 카드 — 이름 한 줄, 그 아래 동전 그림 + 시세 한 줄 (줄바꿈 없이) ===== */
.market-trade .card-head { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.market-trade .card-head h3 { max-width: 100%; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.market-trade .market-price { white-space: nowrap; font-size: var(--text-lg); }
/* 판 안쪽 아래 여백 +15px (--board-pad 30 → 45). 로비는 지도 칸 높이를 화면에 맞추므로 따로 15px 더한다 */
@media (min-width: 1200px) { .lobby-page .game-stage { padding-bottom: calc(var(--space-4) + 15px); } }

/* ===== 28차 ===== */

/* 방치 낚시: 건진 물고기는 고른 크기 칸으로 위에서부터 채우고(늘어나지 않게), 넘치면 칸 안에서 스크롤. 단추는 맨 아래 */
.fish-idle .idle-catch {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--catch-cell-w), 1fr)); grid-auto-rows: auto; align-content: start;
  gap: 6px; flex: 1 1 auto; min-height: 0; margin: var(--space-2) 0; overflow-y: auto;
}
@media (min-width: 960px) { .fish-idle .idle-catch { contain: size; } }
.fish-idle .idle-catch li { padding: 4px 10px 4px 4px; min-height: 0; }
.fish-idle .idle-catch li span { flex: 1 1 auto; white-space: nowrap; }
.fish-idle .idle-actions { flex: 0 0 auto; display: flex; gap: var(--space-3); margin-top: auto; }
.fish-idle .idle-actions > .btn { flex: 1 1 0; justify-content: center; padding: var(--idle-action-pad); font-size: var(--idle-action-font); white-space: nowrap; }

/* 직업 레벨 */
.career-level { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--cozy-outline); border-radius: var(--radius-md); background: #fff8d8; }
.career-level-head { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--cozy-ink); }
.career-level-head strong { color: var(--color-leaf-deep); font-size: var(--text-lg); }
.career-level-head .help-tip { margin-left: auto; }
.career-bar { height: 14px; border: 2px solid var(--cozy-outline); border-radius: var(--radius-pill); background: #f3e3c3; overflow: hidden; }
.career-bar > span { display: block; height: 100%; background: linear-gradient(#8fd14f, var(--color-leaf)); transition: width .4s; }
.career-level .card-meta { margin: 6px 0 0; }

/* 제작: 거르기 단추와 재료 색 */
.craft-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-3); flex: 0 0 auto; }
.craft-filter .area-chip { font-size: var(--text-sm); padding: 4px 12px; }
.recipe-ings { display: flex; flex-wrap: wrap; gap: 3px; }
.recipe-ings .ing { padding: 0 6px; border-radius: var(--radius-pill); white-space: nowrap; }
.recipe-ings .ing.is-have { color: var(--ing-have); background: var(--ing-have-bg); }
.recipe-ings .ing.is-missing { color: var(--ing-missing); background: var(--ing-missing-bg); font-weight: 700; }
.card.is-ready { box-shadow: inset 0 0 0 2px var(--ing-have-bg); }

/* 이웃·주민 소식: 칸 제목을 파란 탭 대신 빨간 리본(Cozy Header9, ribbon-red.png) */
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage .panel > h2:first-child,
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage .panel > .section-title:first-child > h2 { padding: var(--red-ribbon-pad-top) 48px 0; box-sizing: border-box;
  border-image: url("../img/ui/cozy/ribbon-red.png") 0 60 0 60 fill / 0 30px 0 30px / 0 stretch;
  text-shadow: -1.5px -1.5px 0 var(--ribbon-red-ink), 1.5px -1.5px 0 var(--ribbon-red-ink), -1.5px 1.5px 0 var(--ribbon-red-ink), 1.5px 1.5px 0 var(--ribbon-red-ink), 0 2px 0 var(--ribbon-red-ink); display: flex; align-items: flex-start; height: var(--red-ribbon-h); min-height: var(--red-ribbon-h); width: fit-content; margin-left: auto; margin-right: auto;
}
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage .panel > :is(h2, .section-title > h2) .px-icon { filter: drop-shadow(0 1px 0 var(--ribbon-red-ink)); }

/* 주민 소식: 두 쪽(메모판 / 사진·뉴스·교류) 탭 */
.game-stage.is-masonry > .community-tabs { grid-column: 1 / -1 !important; }

/* ===== 29차 ===== */
.cozy-icon--help { background-image: url("../img/ui/cozy/icon-help.png"); }
.cozy-icon--muted { background-image: url("../img/ui/cozy/icon-muted.png"); }
.cozy-icon--sound { background-image: url("../img/ui/cozy/icon-sound.png"); }

/* ? 단추: 동그라미 테두리 대신 팩 아이콘 그대로 */
.help-btn, .help-btn[aria-expanded="true"] {
  display: inline-grid; place-items: center; width: var(--help-size); height: var(--help-size); padding: 0;
  border: 0; border-radius: 0; background: none; box-shadow: none; cursor: pointer;
}
.help-btn .cozy-icon { width: 100%; height: 100%; filter: drop-shadow(0 2px 0 rgba(110, 47, 34, .3)); }
.help-btn:hover .cozy-icon { filter: brightness(1.06) drop-shadow(0 2px 0 rgba(110, 47, 34, .3)); }
.help-btn[aria-expanded="true"] .cozy-icon { transform: translateY(1px); filter: none; }

/* 배경음: 음소거 단추 + 소리 크기 */
.bgm-mute { display: inline-grid; place-items: center; flex: 0 0 auto; width: var(--mute-size); height: var(--mute-size); padding: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
.bgm-mute .cozy-icon { width: 100%; height: 100%; }
.bgm-mute:hover .cozy-icon { filter: brightness(1.08); }
.bgm-player input[type="range"]:disabled { opacity: .45; }

/* 판 안 맨 위 탭 줄(마이페이지·크래프트·주민 소식)은 가운데 정렬 */
.mypage-tabs, .craft-tabs, .community-tabs, .social-tabs.mypage-tabs, .social-tabs.craft-tabs { justify-content: center; }

/* 대사·상호작용: 개수는 제목 오른쪽 글자로 */
.title-count { margin-left: 8px; font: 700 var(--text-sm)/1 var(--font-body); color: inherit; opacity: .85; white-space: nowrap; }

/* 마이페이지 빠른 이동: 판(부모 상자) 밖 오른쪽에 붙여 둔다. 판은 그만큼 좁아진다 */
@media (min-width: 1200px) {
  body[data-page="mypage"] { --wide-width: min(1480px, calc(100vw - 2 * (var(--quick-w) + var(--quick-gap) + var(--space-5)))); }
  body[data-page="mypage"] .game-stage.is-board > .mypage-body { grid-template-columns: minmax(0, 1fr); }
  body[data-page="mypage"] .mypage-body > .mypage-quick {
    position: fixed; z-index: 30; grid-column: auto; grid-row: auto;
    top: calc(var(--sticky-top, 0px) + var(--mypage-top-h, 0px) + 120px);
    left: calc(50% + var(--wide-width) / 2 + var(--quick-gap)); width: var(--quick-w); box-sizing: border-box;
  }
}

/* 반려동물 데려오기: 동물 칸마다 노란 띠 카드(CardAdvanced1_yellow), 이름은 띠 안에 */
.pet-choice strong { order: -1; display: flex; align-items: center; justify-content: center; height: var(--pet-band-h); margin-top: 3px; color: #7a4a14; font-size: var(--text-sm); white-space: nowrap; }
.pet-choice:hover { filter: brightness(1.04); }
.pet-choice.is-current { background: none; box-shadow: none; filter: drop-shadow(0 0 0 #8bc93a) drop-shadow(0 0 3px #8bc93a) drop-shadow(0 0 2px #8bc93a); }

/* 캐릭터 상태 딱지 (game/condition.py) */
.condition-badge { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; background: #e4f6c4; color: #3c7a2c; }
.condition-badge.is-mood { background: #fff1b8; color: #8a5a00; }
.condition-badge.is-sick, .condition-badge.is-admitted { background: #fde3df; color: #c0392b; }
.roster-what .condition-badge { margin-right: 2px; font-size: var(--text-xs); }

/* ? 안내를 열면 그 칸을 옆 칸들보다 위로 (옆 칸에 가려지지 않게) */
.game-stage > :has(.help-btn[aria-expanded="true"]), .panel:has(.help-btn[aria-expanded="true"]) { position: relative; z-index: 50; }
.career-level-head .help-pop { left: auto; right: -10px; }

/* 크래프트 맨 위 '만들기·하우징' 탭: 3배 크기 */
.social-tabs.craft-tabs { gap: calc(8px * var(--craft-tab-scale)); }
.social-tabs.craft-tabs [role="tab"] {
  min-height: calc(36px * var(--craft-tab-scale)); padding: calc(3px * var(--craft-tab-scale)) calc(var(--space-4) * var(--craft-tab-scale)) calc(9px * var(--craft-tab-scale));
  font-size: calc(15px * var(--craft-tab-scale));
  border-image-width: calc(8px * var(--craft-tab-scale)) calc(17px * var(--craft-tab-scale)) calc(11px * var(--craft-tab-scale)) calc(20px * var(--craft-tab-scale));
}
.social-tabs.craft-tabs [aria-selected="true"] {
  border-image-width: calc(10px * var(--craft-tab-scale)) calc(17px * var(--craft-tab-scale)) calc(9px * var(--craft-tab-scale)) calc(20px * var(--craft-tab-scale));
}

/* 하우징 탭: 칸이 내용만큼만 (요리 칸 높이에 맞춰 늘어나지 않게) */
@media (min-width: 960px) {
  /* 32차: 칸마다 4px 줄을 여러 개 차지하므로(boardMasonry) 줄 사이 간격을 없애야 아래가 길게 비지 않는다 */
  body[data-page="craft"] .game-stage.is-board.is-masonry:not(:has(> .craft-group)) {
    grid-template-rows: auto auto; grid-auto-rows: 4px; row-gap: 0; align-items: start;
  }
  body[data-page="craft"] .game-stage.is-masonry:not(:has(> .craft-group)) > .craft-tabs { margin-bottom: var(--board-gap); }
}


/* ===== 30차 ===== */
/* ? 말풍선: 칸 제목 줄의 글자 흐림(opacity .92)을 물려받아 배경이 비쳐 보이던 것 */
.panel > .section-title:first-child > .help-tip:not(h2):not(.btn):not(a.btn) { opacity: 1; }
/* 직업 전용 일: 직업 레벨이 모자라 잠긴 일 */
.job-level { margin-left: 6px; padding: 0 7px; border-radius: var(--radius-pill); background: #e4f6c4; color: #3c7a2c; font-size: var(--text-xs); font-weight: 700; vertical-align: middle; }
.card.is-locked { filter: grayscale(.6); opacity: .75; }
.card.is-locked .job-level { background: #eee2cf; color: #8a6a4a; }
.job-hours { min-width: 84px; padding: 4px 8px; border: 2px solid #c9a978; border-radius: 10px; background: #fffaf0; color: var(--color-text, #5a3d2b); font: inherit; }

/* ===== 카지노 연출 (30차): 룰렛 바퀴·슬롯 릴·긁는 복권 (frontend/src/components/CasinoStage.tsx) ===== */
.casino-card { display: flex; flex-direction: column; gap: 8px; }
.casino-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border-radius: var(--radius-md);
  background: radial-gradient(circle at 50% 30%, #2f6b4f, #1e4a37); box-shadow: inset 0 0 0 3px #8a5a2b, inset 0 0 0 6px #e3b866; color: #fffeeb; }
.casino-hint { margin: 0; font-size: var(--text-sm); color: #fff7d6; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); }
.casino-verdict { margin: 0; padding: 4px 14px; border-radius: var(--radius-pill); font-weight: 800; font-size: var(--text-lg); background: #fffeeb; color: var(--cozy-ink); animation: verdict-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
.casino-verdict.is-win { background: #ffe9a8; color: #8a4a00; }
.casino-verdict.is-jackpot { background: linear-gradient(90deg, #ffd34d, #fff1a8, #ffd34d); color: #8a2b00; animation: verdict-pop .45s cubic-bezier(.2, 1.6, .4, 1), jackpot-glow 1s ease-in-out infinite alternate; }
.casino-stage.is-win, .casino-stage.is-jackpot { animation: stage-flash .9s ease-out 2; }
@keyframes verdict-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes jackpot-glow { from { box-shadow: 0 0 6px var(--casino-gold); } to { box-shadow: 0 0 22px var(--casino-gold); } }
@keyframes stage-flash { 0%, 100% { filter: none; } 40% { filter: brightness(1.35) saturate(1.3); } }

/* 룰렛 */
.roulette-wheel {
  position: relative; width: var(--wheel-size); height: var(--wheel-size); border-radius: 50%; border: 6px solid #8a5a2b;
  background: repeating-conic-gradient(var(--casino-red) 0 30deg, var(--casino-black) 30deg 60deg);
  box-shadow: 0 0 0 3px #e3b866, 0 6px 14px rgba(0, 0, 0, .4); transition: transform var(--wheel-spin) cubic-bezier(.12, .7, .16, 1);
}
.roulette-wheel > span { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 6px; font-size: 15px; pointer-events: none; }
.roulette-hub { position: absolute; inset: 36%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3c4, var(--casino-gold) 60%, #a8700f); box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.roulette-pointer { position: absolute; z-index: 2; top: 6px; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 22px solid #fffeeb; filter: drop-shadow(0 2px 0 #6e2f22); }

/* 슬롯머신 */
.slots-window { position: relative; display: flex; gap: 6px; padding: 8px; border-radius: 10px; background: #6e2f22; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .5); }
.slots-reel { width: 64px; height: var(--sym-h); overflow: hidden; border-radius: 6px; background: linear-gradient(#e9e2d0, #fffeeb 30%, #fffeeb 70%, #e9e2d0); }
.slots-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--reel-n) * -1 * var(--sym-h))); }
.slots-strip > span { display: grid; place-items: center; height: var(--sym-h); font-size: 38px; }
.slots-strip.is-spinning { animation: reel-spin var(--reel-t) cubic-bezier(.3, .1, .2, 1) both; }
.slots-strip.is-spinning > span { filter: blur(.6px); }
@keyframes reel-spin { from { transform: translateY(0); } to { transform: translateY(calc(var(--reel-n) * -1 * var(--sym-h))); } }
.slots-lever { position: absolute; right: -16px; top: 4px; width: 8px; height: 58px; border-radius: 4px; background: #c9ccd2; transform-origin: 50% 100%; transition: transform .25s; }
.slots-lever i { position: absolute; top: -10px; left: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--casino-red); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25); }
.slots-lever.is-pulled { transform: scaleY(-.6); }
.casino-stage.slots.is-jackpot .slots-reel, .casino-stage.slots.is-win .slots-reel { box-shadow: 0 0 0 3px var(--casino-gold); }

/* 즉석 복권 */
.lottery-card { position: relative; width: 300px; max-width: 100%; aspect-ratio: 3 / 1; border-radius: 10px; overflow: hidden; background: #fff8dc; box-shadow: 0 0 0 3px #e3b866, 0 4px 10px rgba(0, 0, 0, .35); touch-action: none; }
.lottery-faces { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-around; font-size: 44px; }
.lottery-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.lottery-card canvas.is-live { cursor: grab; }
/* 카지노: 룰렛·슬롯·복권 칸은 판 너비 전체에 세 칸으로 (경마·최근 결과는 그 아래) */
@media (min-width: 960px) {
  body[data-page="arcade"] .game-stage.is-masonry > .casino-games { grid-column: 1 / -1 !important; }
}
.game-stage .card-grid.casino-grid, .card-grid.casino-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.casino-card .casino-stage { flex: 1 1 auto; justify-content: center; min-height: 270px; }

/* ───────── 31차: 일정표 탭 · 맨 위 공지 띠 · 씀씀이 · 연애 상대 지정 ───────── */

/* 일정표 탭: 분홍 탭 */
#news-tab-calendar { --tab-img: url("../img/ui/cozy/tab-pink.png"); --tab-ink: var(--cal-ink); }
.town-cal { display: flex; flex-direction: column; gap: 6px; }
.town-cal-head { display: flex; align-items: center; justify-content: center; gap: 10px; }
.town-cal-head strong { font: 700 var(--text-md) var(--font-btn); min-width: 7em; text-align: center; }
.town-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.town-cal-dow { text-align: center; font-size: 12px; color: var(--color-muted, #8a7a66); }
.town-cal-dow:first-child { color: var(--cal-festival); }
.town-cal-day {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: var(--cal-day);
  padding: 2px 0 0; border: 1.5px solid transparent; border-radius: 8px; background: #fffdf3; color: var(--cozy-ink); font: 600 13px/1.1 var(--font-btn); cursor: pointer;
}
.town-cal-day:hover { border-color: #e7c98a; }
.town-cal-day.is-today { background: #ffe9a8; }
.town-cal-day.is-picked { border-color: var(--cal-ink); box-shadow: 0 0 0 1px var(--cal-ink); }
.town-cal-icon { position: absolute; top: -2px; right: 0; font-size: 11px; font-style: normal; }
.town-cal-dots { display: flex; gap: 2px; margin-top: auto; padding-bottom: 3px; }
.town-cal-dots i, .town-cal-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; }
.town-cal-legend .is-festival > i, .town-cal-dots .is-festival { background: var(--cal-festival); }
.town-cal-legend .is-system > i, .town-cal-dots .is-system { background: var(--cal-system); }
.town-cal-legend .is-town > i, .town-cal-dots .is-town { background: var(--cal-town); }
.town-cal-legend .is-mine > i, .town-cal-dots .is-mine { background: var(--cal-mine); }
.cal-today-badge { margin-left: 2px; font-size: .85em; text-shadow: none; }
.town-cal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 12px; }
.town-cal-legend span { display: inline-flex; align-items: center; gap: 4px; }
.town-cal-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 0; font-size: var(--text-md); }
.town-cal-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.town-cal-list li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-left: 4px solid var(--cal-c, #ccc); border-radius: 8px; background: color-mix(in srgb, var(--cal-c, #ccc) 10%, #fff); }
.town-cal-list li.empty { border-left-color: transparent; background: none; }
.town-cal-list li > div { flex: 1 1 auto; min-width: 0; }
.town-cal-list p { margin: 0; }
.town-cal-list em { margin-left: 4px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--cal-c); color: #fff; font-size: 11px; font-style: normal; }
.town-cal-list.is-compact li { padding: 3px 8px; }
.town-cal-list .is-festival { --cal-c: var(--cal-festival); }
.town-cal-list .is-system { --cal-c: var(--cal-system); }
.town-cal-list .is-town { --cal-c: var(--cal-town); }
.town-cal-list .is-mine { --cal-c: var(--cal-mine); }
.town-cal-emoji { flex: 0 0 auto; width: 1.6em; text-align: center; font-size: 18px; }
.town-cal-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.town-cal-form input[name="title"] { flex: 1 1 8em; }
.town-cal-form input[name="memo"] { flex: 2 1 10em; }
input.town-cal-emoji { width: 2.6em; padding: 4px; }

/* 맨 위 공지 띠 (모든 화면): 위에서 내려와 정해진 횟수만큼 흐르고 올라가 사라진다 */
.announce-bar {
  position: fixed; z-index: 60; top: 6px; left: 50%; width: var(--announce-w); height: var(--announce-h); transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; overflow: hidden;
  border: 2px solid var(--cozy-outline); border-radius: var(--radius-pill); background: var(--announce-bg);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .2);
  animation: announce-in .4s ease-out both;
}
.announce-bar.is-patch { --announce-bg: #dff1ff; }
.announce-bar.is-maintenance { --announce-bg: #ffe1e6; }
.announce-bar.is-event { --announce-bg: #e6f8d8; }
.announce-bar.is-leaving { animation: announce-out .4s ease-in both; }
.announce-horn { flex: 0 0 auto; font-size: 20px; animation: ticker-horn 1.2s ease-in-out infinite; }
.announce-track { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.announce-track a { color: inherit; text-decoration: none; }
.announce-text {
  display: inline-block; margin: 0; padding-left: 100%; white-space: nowrap; color: var(--cozy-ink); font: 700 15px / var(--announce-h) var(--font-btn);
  animation: ticker-run calc(var(--announce-len) * var(--announce-step) + 8s) linear var(--announce-repeat) both;
}
.announce-bar:hover .announce-text { animation-play-state: paused; }
.announce-close { flex: 0 0 auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); color: var(--cozy-ink); cursor: pointer; }
@keyframes announce-in { from { transform: translate(-50%, -150%); } to { transform: translate(-50%, 0); } }
@keyframes announce-out { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -150%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .announce-text { animation-duration: 12s; animation-timing-function: steps(1); padding-left: 0; }
}

/* 마이페이지 자동 생활: 씀씀이·절약 생활 */
.spending-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; }
.spending-label { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; min-width: 5.5em; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.seg .btn.is-on { filter: none; }
.seg .btn:not(.is-on) { opacity: .7; }
.frugal-input { width: 6em; }
.frugal-tag { background: #ffe3a3; }

/* 마이페이지 연애 상대 지정 */
.love-only-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.love-only-list li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: var(--radius-pill); background: #ffe4ee; }

/* ───────── 32차: 카지노 하루 횟수 · 슬라임 경주 · 연애 상대 아이콘 · 로비 더 보기 ───────── */
.casino-left { margin: 0; font-size: var(--text-sm); }
.casino-left b { color: var(--casino-red, #c0392b); font-size: 1.1em; }
.casino-left.is-empty b { color: #999; }
.race-entry { align-items: center; text-align: center; }
.race-slime { display: block; width: var(--slime-size); height: var(--slime-size); margin: 0 auto 4px; image-rendering: pixelated; animation: slime-hop 1.4s ease-in-out infinite; }
.race-entry:nth-child(2) .race-slime { animation-delay: -.45s; }
.race-entry:nth-child(3) .race-slime { animation-delay: -.9s; }
.race-entry.is-winner { box-shadow: 0 0 0 3px var(--color-sun, #f5c542); }
.race-winner-img { width: 24px; height: 24px; margin: 0 2px 0 4px; vertical-align: middle; image-rendering: pixelated; }
@keyframes slime-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-6px) scale(.95, 1.06); } 60% { transform: translateY(0) scale(1.08, .92); } }
@media (prefers-reduced-motion: reduce) { .race-slime { animation: none; } }
.cozy-icon--heart { background-image: url("../img/ui/cozy/icon-heart.png"); --ci-s: 1.5; }
/* 로비 마을 소식 '더 보기': 탭 줄을 밀어내지 않고 칸 오른쪽 위 안쪽에 붙는다 (위치는 --news-more-top/right) */
.lobby-news { position: relative; }
.lobby-news > .section-title > .btn { position: absolute; z-index: 2; top: var(--news-more-top); right: var(--news-more-right); margin: 0; }

/* 마을 뉴스 조짐(예고): 보라색, 결과 배지 · 적중 기록 */
.town-news li.is-omen .town-news-title { color: var(--omen-ink); }
.town-news li.is-omen { background: linear-gradient(90deg, var(--omen-bg), transparent 70%); }
.town-news small b.omen-state.is-wait { color: var(--omen-ink); background: var(--omen-bg); }
.town-news small b.omen-state.is-true { color: #2f7a2a; background: #e2f5dc; }
.town-news small b.omen-state.is-false { color: #8a7a66; background: #eee6da; }
.omen-watch { color: var(--omen-ink); }
.omen-record { margin: 0 0 6px; font-size: var(--text-sm); color: var(--omen-ink); }

/* 이웃·주민 소식 빨간 리본 제목: 높이 60px, 글자는 위쪽(9px)부터, 각 칸 가운데 (높이·여백은 --red-ribbon-h / --red-ribbon-pad-top) */
:is(body[data-page="neighbors"], body[data-page="community"]) .game-stage .panel > .section-title:first-child { justify-content: center; }

/* ════════════════════════════════════════════════════════════════════
   33차: 책 모양 판(이웃·주민 소식) 크기 제한 + 칸을 왼쪽·오른쪽 쪽 가운데에
   - 책 너비는 --book-max-w 까지만 (넓은 화면에서 옆으로 늘어나지 않게)
   - 두 쪽 사이(책등) 간격 --book-spine-gap: 칸이 책등을 넘지 않고 각 쪽 가운데에 온다
   - 한 쪽 칸 높이는 --book-page-h 까지만, 넘치면 칸 안에서 스크롤 (책이 아래로 길게 늘어나지 않게)
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  :is(body[data-page="neighbors"], body[data-page="community"]) { --wide-width: min(var(--book-max-w), calc(100vw - 2 * var(--space-5))); }
  /* 두 쪽: 같은 너비, 책등 간격만큼 띄운다 */
  :is(body[data-page="neighbors"], body[data-page="community"]) .game-stage.is-board { column-gap: var(--book-spine-gap); }
  body[data-page="neighbors"] .neighbor-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--book-spine-gap); }
  /* 혼자 남은 반쪽 칸도 두 쪽에 걸쳐 늘리지 않는다 (자기 쪽 가운데에) */
  :is(body[data-page="neighbors"], body[data-page="community"]) .game-stage.is-masonry > .panel:not(.panel--wide, .memo-board)[data-alone] { grid-column: auto !important; }
  /* 한 쪽 칸의 내용(제목 리본 아래 마지막 덩어리)은 화면 높이까지만, 넘치면 그 안에서 스크롤.
     칸 자체를 스크롤시키면 칸 윗선에 걸친 리본이 잘리므로 내용에만 건다. 메모판은 끌어 옮기므로 제외 */
  body[data-page="neighbors"] .neighbor-layout > .panel,
  body[data-page="community"] .game-stage.is-board > .panel:not(.memo-board) { max-height: none; overflow: visible; }
  body[data-page="neighbors"] .neighbor-layout > .panel > :last-child:not(:first-child),
  body[data-page="community"] .game-stage.is-board > .panel:not(.memo-board) > :last-child:not(:first-child) {
    max-height: max(var(--book-page-min-h), var(--book-page-h)); overflow-y: auto; overscroll-behavior: contain;
  }
}
/* 이웃 목록: 주민 카드는 .neighbor-scroll 안에서 줄을 지어 놓이고, 길면 그 안에서 스크롤 */
.neighbor-list > .neighbor-scroll { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: var(--space-3); align-content: start; }
.neighbor-scroll > .neighbor { margin: 0; }
/* 33차: 마을 메모판도 책 아래로 넘치지 않게. 판(16:10)의 높이를 화면 높이에 맞춰 줄이고 가운데에 둔다 */
@media (min-width: 960px) {
  body[data-page="community"] .memo-board .sticker-board-scroll { max-width: calc(var(--memo-board-h) * 1.6 + 12px); margin-inline: auto; }
  body[data-page="community"] .memo-board .sticker-board { min-width: 0; }
}

/* ── 34차 ───────────────────────────────────────────── */
/* 카지노: 상금표와 '버튼 + 코인 값' (숫자 입력 없이 한 판 값이 정해져 있다) */
.casino-prizes { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--text-sm); }
.casino-prizes small { color: var(--color-text-muted, #8a7a6a); }
.casino-prizes .is-lose { color: var(--color-text-muted, #8a7a6a); }
.casino-play { display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; align-self: center; padding-inline: 18px; }
.casino-cost { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px 2px 4px; border-radius: 999px; background: rgba(40, 20, 50, .55); color: #fff; font-weight: 700; line-height: 1.4; }
.casino-cost .cozy-icon { width: 20px; height: 20px; }
/* 제작 카드: 그림·이름·재료·시간은 위에 붙이고, 버튼만 맨 아래로 */
.craft-group .card:has(> .item-thumb) { align-items: start; align-content: stretch; grid-template-rows: auto auto auto 1fr; }
.craft-group .card:has(> .item-thumb) > .item-thumb { align-self: start; }
.craft-group .card:has(> .item-thumb) > .actions { align-self: end; }
/* 지금 어디로 갈까?: 갈 곳 + 걸어서·버스·택시 고르기 */
.move-form { display: grid; gap: var(--space-2); justify-items: start; }
.move-form select { max-width: 100%; }
.move-modes { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.move-mode { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 2px solid var(--color-border); border-radius: 10px; background: var(--color-surface); cursor: pointer; }
.move-mode input { position: absolute; opacity: 0; pointer-events: none; }
.move-mode__icon { font-size: 1.4em; }
.move-mode b, .move-mode small { display: block; line-height: 1.25; }
.move-mode small { color: var(--color-text-muted); font-size: var(--text-xs); }
.move-mode.is-on { border-color: var(--color-leaf); background: var(--color-leaf-soft); }
.move-mode.is-poor { opacity: .55; cursor: not-allowed; }
.move-mode:has(input:focus-visible) { outline: 3px solid var(--color-sky); outline-offset: 2px; }
/* 지도 위 집: 집터(3×3칸 = 96px) 아래쪽에 맞춰 도트 그림을 세운다 */
.map-house img.map-house__img { width: 96px; height: auto; image-rendering: pixelated; filter: drop-shadow(0 3px 1px rgba(40, 30, 10, .25)); }
.map-house > .map-label { position: absolute; top: calc(100% - 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.map-house > .map-crops { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); }
.world-map > .map-house.is-building { pointer-events: none; }
/* 하우징: 집 도트 그림 (원본의 정수배, 또렷하게) */
.house-sprite { display: block; width: 96px; height: auto; image-rendering: pixelated; }
.house-type__preview { display: grid; place-items: end center; height: 150px; overflow: hidden; padding: 8px; border-radius: 8px; background: linear-gradient(#cfe8f6 0 62%, #a9cf7a 62%); }
.house-type__preview .house-sprite { height: 128px; max-width: 100%; width: auto !important; object-fit: contain; }
.house-type__preview.is-small { height: 96px; }
.house-type__preview.is-small .house-sprite { max-height: 80px; width: auto !important; }
.card.house-type, .card.house-listing { display: flex; flex-direction: column; gap: 6px; }
.house-type .recipe-ings .cozy-icon { width: 16px; height: 16px; vertical-align: -3px; }
.house-room.is-building { display: grid; gap: var(--space-2); }
.my-house__head { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-2); }
.my-house__head .house-sprite { max-height: 120px; width: auto !important; }
.house-apartment__row { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.house-apartment__row .house-sprite { max-height: 160px; width: auto !important; }
.placed-note { color: var(--color-leaf-deep, #3d6b2e); }

/* 방 꾸미기 (frontend/src/components/RoomEditor.tsx) */
.room-editor { display: grid; gap: var(--space-3); }
.room-editor__stage { position: relative; outline: none; border-radius: 6px; }
.room-editor__stage:focus-visible { box-shadow: 0 0 0 3px var(--color-sky); }
.room-stage { position: relative; width: 100%; overflow: hidden; border: 4px solid #7a5232; border-radius: 6px; background-color: #d8b88a; image-rendering: pixelated; touch-action: none; user-select: none; }
.room-stage.is-holding { cursor: copy; }
.room-wall-edge { position: absolute; left: 0; right: 0; top: var(--wall-h); height: 4px; background: rgba(60, 35, 15, .35); pointer-events: none; }
.room-item { position: absolute; height: auto; transform: translate(-50%, -100%) scaleX(var(--flip, 1)); image-rendering: pixelated; -webkit-user-drag: none; }
.room-item.is-movable { cursor: grab; }
.room-item.is-movable:active { cursor: grabbing; }
.room-item.is-selected { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #ffd34d) drop-shadow(0 0 2px #ffd34d); }
.room-hint { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: var(--text-sm); box-shadow: 0 1px 4px rgba(0, 0, 0, .2); z-index: 2000; }
.room-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.room-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.room-surfaces { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.room-shelf__tabs { display: flex; gap: 6px; margin-bottom: 6px; }
.room-shelf__tabs button { padding: 4px 12px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.room-shelf__tabs button[aria-selected="true"] { border-color: #8cc152; background: #e4f7c6; color: #2f5d18; font-weight: 700; }
.room-shelf__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 280px; overflow-y: auto; margin: 0; padding: 2px; list-style: none; overscroll-behavior: contain; }
.room-shelf__item { display: grid; justify-items: center; align-content: end; gap: 2px; width: 100%; min-height: 104px; padding: 6px 4px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font: inherit; cursor: grab; }
.room-shelf__item img { max-height: 56px; height: auto; image-rendering: pixelated; object-fit: contain; }
.room-shelf__item.is-holding { border-color: var(--color-sun, #f0b429); box-shadow: 0 0 0 2px var(--color-sun, #f0b429); }
.room-shelf__item:disabled { opacity: .5; cursor: not-allowed; }
.room-shelf__name { font-size: var(--text-xs); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.room-shelf__item small { font-size: 11px; color: var(--color-text-muted); }

/* 방명록 */
.guestbook-form { display: grid; gap: 6px; margin-bottom: var(--space-3); }
.guestbook-form textarea { width: 100%; resize: vertical; }
.guestbook-form .field-row { justify-content: space-between; }
.guestbook { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.guestbook li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; border-radius: 8px; background: var(--color-surface-alt, #fbf6ea); }
.guestbook li p { margin: 0; grid-column: 1; }
.guestbook li small { grid-column: 1; color: var(--color-text-muted); font-size: var(--text-xs); }
.guestbook li .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.house-sale label { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.house-sale input[type="number"] { width: 9em; }

/* 텃밭 작물 단계 그림 (Sprout Lands, static/img/crops): 자라는 동안은 살랑살랑, 목마르면 시들고, 다 자라면 통통 튄다 */
.garden-sprite { display: block; width: 72px; height: 72px; image-rendering: pixelated; transform-origin: 50% 100%; }
.garden-plot.is-growing .garden-sprite { animation: crop-sway 2.4s ease-in-out infinite; }
.garden-plot.is-thirsty .garden-sprite { filter: saturate(.55) brightness(.95); transform: rotate(-7deg); }  /* 목마르면 시든다 */
.garden-plot.is-ripe .garden-sprite { animation: crop-bounce 1.6s ease-in-out infinite; }
@keyframes crop-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes crop-bounce { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-3px) scale(1.05, .97); } }
.map-crops img { width: 20px; height: 20px; margin: 0 -2px; image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { .garden-sprite { animation: none !important; } }

/* ===== 36차: 집 밖 마당 꾸미기, 바닥·벽지 견본 ===== */
.room-stage--yard { background-color: #a6c86a; margin-bottom: var(--space-3); }
.yard-house { position: absolute; height: auto; transform: translate(-50%, -100%); image-rendering: pixelated; -webkit-user-drag: none; pointer-events: auto; }
.yard-sign {
  position: absolute; transform: translate(-50%, -100%); padding: 3px 8px 4px; max-width: 30%;
  border: 3px solid #6e4a2e; border-radius: 3px; background: #e9c48c; color: #4a2f1c;
  font: 700 var(--text-sm) / 1.2 var(--font-btn); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 3px 0 #6e4a2e;
}
.yard-sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 4px; height: 14px; margin-left: -2px; background: #6e4a2e; }
.room-where { margin-bottom: var(--space-2); }
.yard-sign-form { align-items: center; }
.yard-sign-form input { width: 12em; }
.surface-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.surface-picker legend { float: left; margin-right: 6px; padding: 0; font-weight: 700; line-height: 34px; }
.surface-swatch { width: 34px; height: 34px; padding: 0; border: 2px solid var(--color-border); border-radius: 6px; background-size: 32px auto; image-rendering: pixelated; cursor: pointer; }
.surface-swatch.is-current { border-color: var(--color-sun); box-shadow: 0 0 0 2px var(--color-sun); cursor: default; }
.surface-swatch.is-locked { opacity: .35; cursor: not-allowed; filter: grayscale(.6); }
.surface-swatch:disabled { cursor: default; }
/* 주민 소식 > 뉴스·교류: 칸 높이를 고정하고 목록만 칸 안에서 스크롤 (리본 제목은 제자리) */
body[data-page="community"] .game-stage .panel:is(.community-news, .community-feed) { display: flex; flex-direction: column; height: min(640px, 74vh); }
body[data-page="community"] .panel:is(.community-news, .community-feed) > :first-child { flex: 0 0 auto; }
body[data-page="community"] .panel:is(.community-news, .community-feed) > :not(:first-child) { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
/* 조짐 적중 기록·이번 주 일기예보는 제목 아래 고정 (스크롤 안 함, 37차) */
body[data-page="community"] .panel.community-news > :is(.omen-record, .weather-forecast) { flex: 0 0 auto; overflow: visible; }
.inventory-tabs { flex-wrap: wrap; margin-bottom: var(--space-3); }
.inventory-tabs small { opacity: .7; }
.market-gain { margin: 4px 0; font-size: var(--text-sm); }
.market-gain small { display: block; opacity: .8; }
.market-gain.is-up b { color: #d23b3b; }
.market-gain.is-down b { color: #2f6fd6; }
.my-house__intro { display: grid; gap: 4px; }
.house-intro input { width: min(22em, 100%); }
/* 슬라임 경주 역대 결과: 카드 대신 줄, 누르면 맞힌 주민이 펼쳐진다 */
#race-tab-history { --tab-img: url("../img/ui/cozy/tab-green.png"); --tab-ink: var(--news-green); }
.race-history { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
.race-history details { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.race-history summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; cursor: pointer; }
.race-history__name { font-weight: 700; }
.race-history__winner { display: inline-flex; align-items: center; gap: 4px; }
.race-history__winners { margin: 0; padding: 4px 16px 10px 32px; font-size: var(--text-sm); }
.race-history details > .empty { margin: 0; padding: 4px 16px 10px; }
.inventory-list { position: relative; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 2px; }

/* ===== 37차: 주식 거래 카드는 한 줄에 두 개 ===== */
@media (min-width: 640px) {
  body[data-page="market"] .market-trade > .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== 37차: 이번 주 일기예보 (마을 뉴스 맨 위에 한 주 내내) ===== */
.weather-forecast { margin: 0 0 var(--space-2); padding: 8px 10px; border: 2px solid #9fd0e8; border-radius: 12px; background: linear-gradient(180deg, #eef8fd, #fffdf4); }
.weather-forecast__title { margin: 0 0 6px; font-weight: 700; color: #1d6f93; }
.weather-forecast__title small { margin-left: 4px; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.weather-forecast__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.weather-forecast__days li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 0; border-radius: 8px; background: rgba(255, 255, 255, .7); font-size: var(--text-xs); }
.weather-forecast__days li b { color: var(--cozy-ink); }
.weather-forecast__days li span { font-size: 18px; line-height: 1.2; }
.weather-forecast__days li.is-today { outline: 2px solid #8cc152; background: #e4f7c6; }
.weather-forecast__days li.is-past { opacity: .5; }
.weather-forecast__days li:nth-child(6) b { color: #2463a8; }
.weather-forecast__days li:nth-child(7) b { color: #c0392b; }
.weather-forecast__body { margin: 6px 0 0; font-size: var(--text-sm); }

/* ===== 37차: 지금 어디로 갈까? 작은 지도 (로비 지도 그림을 줄여서) ===== */
.move-minimap { position: relative; width: 100%; max-width: 560px; aspect-ratio: 3 / 2; margin: 0 auto var(--space-2); overflow: hidden;
  border: 3px solid #b8826a; border-radius: 12px; background: #9fd6e8 var(--map-image) center / 100% 100% no-repeat; }
.move-minimap__route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.move-minimap__route line { stroke: #c0392b; stroke-width: 3px; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.move-minimap__dot { position: absolute; width: 10px; height: 10px; padding: 0; translate: -50% -50%; border: 2px solid #fffeeb; border-radius: 50%;
  background: #6e4b3a; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); cursor: pointer; }
.move-minimap__dot:hover { scale: 1.4; z-index: 2; }
.move-minimap__dot.is-locked { background: #8a8a8a; }
.move-minimap__dot:is(.is-here, .is-dest) { width: 14px; height: 14px; z-index: 3; }
.move-minimap__dot.is-here { background: #2f7a2a; }
.move-minimap__dot.is-dest { background: #c0392b; }
.move-minimap__dot > span { position: absolute; left: 50%; bottom: 60%; translate: -30% 0; font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 0 #fff); pointer-events: none; }
.move-minimap__label { position: absolute; translate: -50% 10px; padding: 0 6px; border-radius: 999px; background: rgba(255, 254, 235, .9); color: var(--cozy-ink);
  font-size: 11px; font-weight: 700; white-space: nowrap; pointer-events: none; z-index: 2; }

/* ===== 37차: 내 정보 맨 위 프로필 쪽지 (NoteContainerFrame) ===== */
.profile-note { display: flex; justify-content: center; }
.profile-note__card { position: relative; width: min(100%, 620px); aspect-ratio: 1090 / 330;
  background: url("../img/ui/cozy/note-frame.png") center / 100% 100% no-repeat; filter: drop-shadow(0 3px 0 rgba(110, 47, 34, .25)); }
.profile-note__photo { position: absolute; left: 7.4%; top: 9%; width: 22.4%; height: 82%; object-fit: contain; border-radius: 10px; }
.profile-note__text { position: absolute; left: 36%; right: 4%; top: 10%; bottom: 10%; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
.profile-note__text h2 { margin: 0; font: 700 clamp(18px, 3vw, 26px) / 1.2 var(--font-btn); color: var(--cozy-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0; }
.profile-note__text p { margin: 0; font-size: var(--text-sm); color: var(--color-text); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.profile-note__birthday { color: #a8700f; font-weight: 700; }
.stack-form .birthday-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stack-form .birthday-fields label { flex: 0 0 100%; }
.stack-form .birthday-fields select { display: inline-block; width: 120px; max-width: 45%; margin: 0; }
.birthday-fields span { flex: 0 0 100%; display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
/* 37차: 캐릭터 이미지 칸이 반쪽 너비라 그림 줄 → 그 아래 올리기 칸 */
#character-images .image-setup { grid-template-columns: 1fr; gap: var(--space-3); }
#character-images .image-current { justify-content: center; }
/* 37차: 성향 칸은 늘 넓게 (인벤토리가 비어 반쪽이 되면 눈금 줄이 사라지던 것) */
@media (min-width: 960px) { .mypage-panel > #personality { grid-column: 1 / -1; } }

/* ===== 39차: 지도의 집 둘레에 마당 꾸미기 (하우징 '마당'과 같은 자리) ===== */
.map-house > .map-house__img { position: relative; z-index: 1; }
.map-house > .map-yard { position: absolute; left: calc(50% - 120px * var(--yard-k, 1.5)); top: calc(100% - 96px * var(--yard-k, 1.5));
  width: calc(240px * var(--yard-k, 1.5)); height: calc(160px * var(--yard-k, 1.5)); pointer-events: none; }
.map-yard img { position: absolute; z-index: 0; height: auto; image-rendering: pixelated; transform: translate(-50%, -100%) scaleX(var(--flip, 1)); }
.map-yard img.is-front { z-index: 2; }
.world-map.is-far > .map-house .map-yard { display: none; }

/* ===== 39차: 내 정보 두 칸씩 (같은 줄은 같은 높이), 역대 기록, 하우징 칸 ===== */
.mypage-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5); }
.mypage-pairs > .panel { margin: 0; min-width: 0; }
.mypage-pairs > #personality { grid-column: auto; }
.mypage-pairs #personality .personality-box { grid-template-columns: 1fr; }
@media (max-width: 860px) { .mypage-pairs { grid-template-columns: 1fr; } }
.history .section-title { flex-wrap: wrap; gap: var(--space-2); }
.history-tools { display: flex; gap: var(--space-2); align-items: center; }
.history-tabs { margin-bottom: var(--space-2); }
.history-list { max-height: 360px; overflow-y: auto; position: relative; }
.history-kind { color: var(--color-leaf-deep, #3c7a2c); font-size: var(--text-xs); }
.history.is-all { position: fixed; top: 76px; bottom: calc(var(--hotbar-h) + var(--dock-gap) + 16px); left: max(16px, 10vw); right: max(16px, 10vw);
  z-index: 80; display: flex; flex-direction: column; margin: 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.history.is-all .history-list { flex: 1; max-height: none; min-height: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.housing-card__body { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3) var(--space-4); align-items: center; }
.housing-card__body > .btn { grid-column: 1 / -1; justify-self: start; }
/* 새내기 쉼터 안내 (40차, components/ShelterNote.tsx) */
.shelter-note { margin: var(--space-3) 0 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #fff4d6; color: #6a4a12; font-size: var(--text-sm); }
.game-stage > .shelter-note { margin: 0 0 var(--space-3); grid-column: 1 / -1; }

/* 신고·문의 (40차, SupportPage) */
.support-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.support-mine { --pad: calc(var(--panel-pad) + var(--space-3)); }
.support-item { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-alt); }
.support-item.is-open { box-shadow: inset 4px 0 0 #f0b23c; }
.support-item.is-answered { box-shadow: inset 4px 0 0 var(--color-leaf); }
.support-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.support-status { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.support-new { color: #d9443a; font-style: normal; font-weight: 700; }
.support-body { margin: var(--space-2) 0 0; white-space: pre-wrap; }
.support-answer { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #e6f4d4; }
.support-answer p { margin: var(--space-1) 0 0; white-space: pre-wrap; }
.support-reply { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-2); align-items: start; margin-top: var(--space-2); }
.support-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.tag--warn { background: #ffd9cf; color: #8a2a12; }
@media (max-width: 760px) { .support-reply { grid-template-columns: 1fr; } }
.housing-card .house-sprite { width: 128px; }

/* ═══ 44차 모바일 (폭 760px 이하): 이미지 틀·버튼·픽셀 아트는 그대로 두고 배치만 바꾼다. 데스크톱 규칙은 건드리지 않는다 ═══ */
@media (max-width: 760px) {
  /* 아래 메뉴의 실제 높이(칸 84 + 틀)에 맞춰 본문 여백을 잡고, 그 위에 뜨는 시계·편지 칸 몫(약 70px)도 비워 둔다 */
  :root { --hotbar-h: 114px; --panel-pad: 20px; --tab-title-size: 17px; --page-title-size: 24px; }
  body:not(.is-outside) { padding-bottom: calc(var(--hotbar-h) + 72px + var(--dock-gap) + env(safe-area-inset-bottom, 0px)); }
  .game-nav.hotbar { scroll-snap-type: x proximity; padding-bottom: env(safe-area-inset-bottom, 0px); }
  .game-nav.hotbar :is(a, .hotbar-slot) { scroll-snap-align: start; flex: none; }

  /* 로비·랭킹: 오른쪽 칸 묶음이 탭 줄 길이만큼 넓어지던 것 → 화면 폭에 맞추고 탭 줄은 그 안에서 옆으로 민다 */
  .lobby-side { grid-template-columns: minmax(0, 1fr); }
  .lobby-side > *, .lobby-card { min-width: 0; }
  .title-tabs, .world-roster > .lobby-tabs { max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .title-tabs::-webkit-scrollbar, .world-roster > .lobby-tabs::-webkit-scrollbar { display: none; }
  .title-tabs [role="tab"] { padding: 9px 12px 6px; flex: none; }

  /* 카드 줄: 최소 폭이 화면보다 넓으면 한 줄에 하나 */
  .neighbor-list > .neighbor-scroll { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }
  .game-stage .card-grid.casino-grid, .card-grid.casino-grid { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }

  /* 화면 제목 리본: 글자만 줄이고, 리본이 줄보다 길면 접어서 두 줄로 (리본 끝 그림은 그대로) */
  .page-header h1 { max-width: 100%; white-space: normal; flex-wrap: wrap; }
  /* 화면 제목 줄: 리본 | (?) 를 가운데에, 코인 칩은 리본 위에 겹치지 않게 그 아래 줄로 */
  .game-stage > .page-header:first-child { flex-direction: column; align-items: center; gap: var(--space-2); }
  .game-stage > .page-header:first-child > div:not(.balance-chip) { flex: 0 1 auto; max-width: calc(100% - 44px); min-width: 0; }
  .game-stage > .page-header:first-child > div > .help-tip { left: calc(100% + 4px); }
  .game-stage > .page-header:first-child > .balance-chip { position: static; align-self: flex-end; }
  .section-title { min-width: 0; }
  .section-title > h2 { max-width: 100%; min-width: 0; }

  /* 이웃·메모판: 펼친 책(두 쪽) 그림을 한 칸짜리 판으로 (한 줄로 쌓이면 책등이 글 가운데를 지나간다) */
  :is(body[data-page="neighbors"], body[data-page="community"]) .game-stage::before {
    right: calc(-1 * var(--board-out)); border-image: url("../img/ui/cozy/board.png") 34 34 40 34 fill / 34px 34px 40px 34px / 0 stretch;
  }
  :is(body[data-page="neighbors"], body[data-page="community"]) .game-stage::after { content: none; }

  /* 손가락으로 누르기: 그림은 그대로 두고 누르는 자리만 넓힌다 (44px 안팎) */
  .help-btn, .btn--small { position: relative; }
  .help-btn::after { content: ""; position: absolute; inset: -8px; }
  .btn--small::after { content: ""; position: absolute; inset: -8px -2px; }

  /* 로비 지도 리본: 좁은 화면에서 글자가 리본 밖으로 나가고 ? 가 겹치던 것 → 글자·안쪽 여백만 줄이고 가운데 칸이 남는 폭을 다 쓴다 */
  :root { --map-ribbon-size: 22px; }
  .lobby-map > .section-title:first-child { grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(32px, 1fr); }
  .lobby-map > .section-title:first-child > h2 { padding-left: calc(var(--ribbon-end) + 6px); padding-right: calc(var(--ribbon-end) + 6px); white-space: nowrap; max-width: none; }
  .panel.lobby-map > .section-title:first-child > .help-tip { margin-left: 2px; }

  /* 지도 확대·축소, 배경 음악, 아래쪽 링크도 누르는 자리만 넓힌다 */
  .world-viewport .world-zoom button { width: 40px; height: 40px; }
  .bgm-mute { position: relative; }
  .bgm-mute::after { content: ""; position: absolute; inset: -9px; }
  /* 폰 주소창이 접혔다 펴질 때 지도 높이가 따라 출렁이지 않게 작은 화면 높이(svh)로 */
  .world-viewport { height: clamp(320px, 62svh, 560px); }

  /* 통합 점검: 텃밭 칸의 씨앗 고르기(최대 140px)·이웃 카드의 긴 글이 칸을 밀어 320px 에서 넘치던 것 */
  .garden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garden-plot select { max-width: 100%; }
  .neighbor-scroll > .neighbor, .neighbor-info { min-width: 0; }
  .neighbor-info { overflow-wrap: anywhere; }
  .neighbor-actions select { max-width: 100%; min-width: 0; }
}
/* 아주 좁은 폰(400px 이하): 리본이 가운데 칸을 다 쓰고, ? 는 리본 오른쪽 끝 위에 겹치지 않게 판 모서리로 */
@media (max-width: 400px) {
  :root { --map-ribbon-size: 20px; }
  .lobby-map > .section-title:first-child { position: relative; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .lobby-map > .section-title:first-child > h2 { grid-column: 1; padding-left: calc(var(--ribbon-end) + 2px); padding-right: calc(var(--ribbon-end) + 2px); }
  .panel.lobby-map > .section-title:first-child > .help-tip { position: absolute; right: -6px; top: -14px; margin: 0; grid-column: auto; z-index: 2; }
}
/* 터치 화면에는 hover 가 없으니 누르는 동안 눌린 모습을 보여 준다 (그림을 바꾸지 않고 밝기·위치만) */
@media (hover: none) {
  .game-nav.hotbar :is(a, .hotbar-slot):active, .title-tabs [role="tab"]:active, .lobby-tabs [role="tab"]:active { filter: brightness(.9); transform: translateY(1px); }
}
/* 44차: 못 받은 그림은 자리만 남기고 깨진 그림 표시는 숨긴다 (main.tsx 가 data-broken 을 붙인다) */
img[data-broken] { visibility: hidden; }

/* ═══ 46차: 밝은 바탕 위 안내문 · 반려동물 고르기 칸 · 모바일 다듬기 ═══ */
/* 칸 제목 아래 안내문(p·small·card-meta)은 제목 리본/탭 아래 줄로 내려와 밝은 칸 바탕 위에 놓인다 → 흰 글자 대신 진한 갈색 */
.panel > .section-title:first-child > :is(p, small, .card-meta):not(h2):not(.btn):not(a.btn),
.panel > .section-title:first-child > :not(h2):not(.title-tabs) :is(p, small, .card-meta):not(.btn):not(a.btn) {
  color: var(--cozy-ink-muted); opacity: 1; text-shadow: none;
}
/* 반려동물 고르기: 카드 그림의 노란 띠(원본 66px 중 위 4~40px)를 이름 칸 높이(26px)에 맞게 키우고, 도트 아래 여백을 20px 늘린다 */
.pet-choice { min-height: 170px; padding-bottom: 32px; border-image-width: 48px 15px 18px 15px; }
.pet-choice strong { max-width: 100%; }

@media (max-width: 959px) {
  /* 로비: '지금 마을에서는' 탭이 칸 위로 튀어나온 만큼 위 칸(지도)과 띄운다 */
  .lobby-side > .world-roster { margin-top: calc(var(--tab-h) - 10px); }
}
@media (max-width: 760px) {
  /* 직업 일 탭: 옆으로 밀리며 오른쪽이 칸 밖으로 잘리던 것 → 글자를 줄이고 긴 이름은 두 줄로 */
  .play-jobs .title-tabs { overflow: visible; }
  .play-jobs .title-tabs { gap: 2px; }
  .play-jobs .title-tabs [role="tab"] { flex: 0 1 auto; min-width: 0; padding: 8px 9px 6px; gap: 4px; font-size: 13px; }

  /* 마이페이지·크래프트·소식 단추 탭: 작게 */
  :root { --craft-tab-scale: .9; }
  .social-tabs.mypage-tabs:not(.craft-tabs) [role="tab"] { min-height: 30px; padding: 2px 10px 7px; font-size: 13px; }
  .social-tabs.mypage-tabs:not(.craft-tabs) { gap: 4px; }

  /* 마이페이지 빠른 이동: 옆으로 숨지 않게 줄을 바꿔 다 보인다 */
  .mypage-quick { flex-wrap: wrap; overflow: visible; row-gap: 6px; }

  /* 이웃·소식: 연어색 판 위 글을 밝은 점선 칸에 올려 읽기 쉽게 (메모 붙이기 칸과 같은 모양) */
  :is(body[data-page="neighbors"], body[data-page="community"]) :is(.neighbor-scroll > .neighbor, .story-feed > li, .community-feed .feed > article, .community-news .town-news li) {
    margin-bottom: var(--space-2); padding: var(--space-3); border: 1px dashed #cfc8b8; border-radius: var(--radius-md, 8px); background: var(--color-surface);
  }
  :is(body[data-page="neighbors"], body[data-page="community"]) .story-feed > li:first-child { padding-top: var(--space-3); }
}
@media (max-width: 400px) { .play-jobs .title-tabs [role="tab"] { padding: 8px 7px 6px; font-size: 12px; } }

/* 47차: 마이페이지 토큰 칸 아래 PSD(파넬라) 호환 안내 */
.stack-form .psd-note { display: block; margin-top: 4px; font-size: 12px; color: var(--cozy-ink-muted, #7a6553); }
.stack-form .psd-note a { color: inherit; text-decoration: underline; }

/* 48차: 상점 아이템 칸은 아이콘·이름을 위에 붙인다. 판매 단추·수량이 없는 칸도 옆 칸 높이에 끌려 가운데로 내려가지 않게,
   단추 줄은 맨 아래로 */
body[data-page="shop"] .card:has(> .item-thumb) { align-items: start; align-content: stretch; grid-template-rows: auto auto 1fr; }
body[data-page="shop"] .card:has(> .item-thumb) > .item-thumb { align-self: start; }
body[data-page="shop"] .card:has(> .item-thumb) > :is(form, .actions, .field-row) { align-self: end; }

/* 49차: 마이페이지 '내 몸 직접 올리기' 부위 칸은 한 줄에 하나씩 (두 줄로 놓으면 파일 칸이 옆 칸까지 삐져나간다) */
.own-upload .own-parts { grid-template-columns: minmax(0, 1fr); }
.own-upload .own-part input[type=file] { width: 100%; box-sizing: border-box; }