/* 글자 크기 조절값: 설정 → 글자 크기 (작게 -2px · 보통 -1px · 크게 +1px) */
:root { --fd: -1px; }
/* 멍냥이의 버스여행 - 화면 꾸미기 */
/* 마루 부리 (네이버, OFL - 상업적 사용 가능) */
@font-face { font-family: 'MaruBuri'; font-weight: 200; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2) format('woff2'); }
@font-face { font-family: 'MaruBuri'; font-weight: 300; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2) format('woff2'); }
@font-face { font-family: 'MaruBuri'; font-weight: 400; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2) format('woff2'); }
@font-face { font-family: 'MaruBuri'; font-weight: 600; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'MaruBuri'; font-weight: 700; font-display: swap; src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2) format('woff2'); }

:root {
  --ink: #4a3b2c;
  --muted: #8a7660;
  --accent: #eb9a68;
  --accent-dark: #c47548;
  --green: #93b97b;
  --green-dark: #6f945a;
  --cream: #fff8ec;
  --locked: #cdbfae;
  --line: #a8a097;     /* 얇은 회색 테두리 (1px) */
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  height: 100%; overflow: hidden; user-select: none; color: var(--ink);
  background: #f3e6cf;
  font-family: 'MaruBuri', "Apple SD Gothic Neo", "Malgun Gothic", serif;
  font-weight: 600;
}
button { font-family: inherit; }
#app { position: relative; height: 100%; max-width: 560px; margin: 0 auto; overflow: hidden; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.screen.hidden { display: none; }

/* ---------------- 메인 화면 ---------------- */
#menu .scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
#menu img.scene { object-fit: cover; object-position: center; }
img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
/* 꾹 눌러도 복사/저장 메뉴가 뜨지 않게 (닉네임 입력칸만 예외) */
* { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input { -webkit-user-select: text; user-select: text; font-size: 16px; }
/* 두 번 톡톡 눌러도 화면이 확대되지 않게 */
html, body, button, canvas, #app { touch-action: manipulation; }
::selection { background: transparent; }
#menu .sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* 흘러가는 뭉게구름 */
.cloud { position: absolute; left: 0; animation: drift linear infinite; will-change: transform; }
/* 위치(left)를 바꾸면 매번 하늘 전체를 다시 칠해서 무거워요 → transform 으로 GPU가 미끄러뜨리기만 해요 */
@keyframes drift { from { transform: translateX(-280px); } to { transform: translateX(105vw); } }
/* 계절 입자: 벚꽃잎 / 나뭇잎 / 단풍 / 눈 */
.fx { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.particle { position: absolute; top: -30px; animation: fall linear infinite; will-change: transform; }
.particle > * { display: block; }
/* 나뭇잎·꽃잎·눈: 떨어지면서 좌우로 흔들리고 빙글 도는 움직임을 하나로 (가벼워요) */
.particle.sway { animation-name: fallsway; animation-timing-function: ease-in-out; }
@keyframes fallsway {
  0%   { transform: translate(-14px, 0) rotate(-30deg); }
  25%  { transform: translate(14px, 25vh) rotate(40deg); }
  50%  { transform: translate(-14px, 50vh) rotate(-30deg); }
  75%  { transform: translate(14px, 75vh) rotate(40deg); }
  100% { transform: translate(-14px, calc(100vh + 60px)) rotate(-30deg); }
}
@keyframes fall { to { transform: translateY(calc(100vh + 60px)); } }
@keyframes sway { from { transform: translateX(-18px) rotate(-35deg); } to { transform: translateX(18px) rotate(45deg); } }
/* 눈송이: 하얀 눈밭 위에서도 보이도록 아주 옅은 푸른 테두리 */
.snow { border-radius: 50%; background: #fff; opacity: .95;
  box-shadow: 0 0 0 .6px rgba(140, 160, 185, .55), 0 0 4px rgba(255, 255, 255, .9); }
/* 설정 창의 계절 고르기 */
.seasonPick { display: flex; gap: 4px; flex-wrap: nowrap; justify-content: center; margin: 6px 0 4px; }
.seasonPick button {
  height: 30px; padding: 0 7px; border-radius: 15px; font-size: calc(12px + var(--fd)); cursor: pointer; white-space: nowrap; flex: none;
  background: rgba(255, 250, 240, .85); color: var(--ink); border: 1px solid var(--line);
}
.seasonPick button.on { background: #f6dd92; color: var(--ink); }
.hello {
  position: absolute; top: 14px; left: 12px; z-index: 4; white-space: nowrap;
  padding: 6px 14px; border-radius: 16px; font-size: calc(13px + var(--fd)); background: rgba(255, 250, 240, .85); border: 1px solid var(--line);
}
.hello:empty, .weather:empty { display: none; }
.weather {
  position: absolute; top: 52px; left: 12px; z-index: 4; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 14px; font-size: calc(12px + var(--fd)); color: var(--muted);
  background: rgba(255, 250, 240, .75); border: 1px solid var(--line);
}
.hearts {
  position: absolute; top: 14px; right: 62px; z-index: 4; display: flex; align-items: center; gap: 5px; white-space: nowrap;
  height: 32px; padding: 0 11px 0 8px; border-radius: 16px; font-size: calc(13px + var(--fd));
  background: rgba(255, 250, 240, .9); border: 1px solid var(--line);
}
.hearts small { color: var(--muted); font-size: calc(11px + var(--fd)); }
/* 날씨: 비 */
.rain { width: 1.2px; height: 16px; background: linear-gradient(rgba(170, 190, 210, 0), rgba(150, 175, 200, .85)); }
.particle.rainy { animation-timing-function: linear; }
.particle.rainy > * { animation: none; transform: rotate(12deg); }
/* 시간대에 따라 들판을 살짝 물들이는 막 (밤엔 푸르스름, 노을엔 주황빛) */
.tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background 2s; }
/* 단계 지도는 지평선 아래 들판에서만 보여요 */
#menu > #mapScroll {
  position: absolute; left: 0; right: 0; top: 26%; bottom: 0; overflow-y: auto; scrollbar-width: none; z-index: 2;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
}
.nickInput {
  width: 100%; padding: 12px 14px; margin-top: 4px; border-radius: 12px; font: inherit; font-size: 16px; text-align: center;
  background: #fffdf7; color: var(--ink); border: 1px solid var(--line); outline: none;
}
.nickInput:focus { border-color: #e2bf5c; }
#mapScroll::-webkit-scrollbar { display: none; }
#mapInner { position: relative; width: 100%; }
#mapRoad { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 단계 원: 얇은 갈색 테두리, 차분한 색 */
.node {
  position: absolute; width: 74px; height: 62px; margin: -34px 0 0 -37px; padding: 0;
  background: none; border: none; color: #fffaf1; font-size: calc(22px + var(--fd)); line-height: 1; cursor: pointer;
  --fill: #d8ccb9;
}
/* 고양이·강아지 실루엣 (바깥 테두리만 얇게) */
.node .nodeShape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 3px 3px rgba(70, 50, 30, .16)); }
.node .nodeShape .ol { fill: var(--line); stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; }
.node .nodeShape .fl path { stroke: var(--fill); stroke-width: 1.2; stroke-linejoin: round; }   /* 귀 끝을 한 번 더 둥글게 */
.node .nodeShape .ol path { stroke-width: 3.4; }   /* 귀는 위 칠하기가 테두리를 0.6 덮으니 그만큼 두껍게: 얼굴과 같은 굵기 */
.node .nodeShape .fl { fill: var(--fill); }
.node .nodeIn { position: absolute; left: 0; right: 0; top: 22px; text-align: center; font-size: calc(18px + var(--fd)); }   /* 숫자+별을 얼굴 한가운데에 */
.node.dog .nodeIn { top: 20px; }
.node small { display: block; font-size: calc(7.5px + var(--fd)); letter-spacing: 0; margin-top: 2px; color: rgba(255, 250, 241, .9); }
.node.done { --fill: #c3dd96; color: var(--ink); }   /* 깬 단계: 노란 버튼과 어울리는 연두 */
.node.done small { color: #6f8f45; }
.node.current { --fill: #f6dd92; color: var(--ink); animation: breathe 2.4s ease-in-out infinite; }
.node.locked { --fill: #d8ccb9; cursor: pointer; }
.node.locked .nodeShape { filter: drop-shadow(0 2px 2px rgba(70, 50, 30, .1)); }
.node.locked .nodeIn { top: 25px; }
.node.dog.locked .nodeIn { top: 23px; }
.node.locked .nodeIn svg { display: block; margin: 0 auto; }
.node .busIcon {
  position: absolute; left: 50%; top: -24px; width: 40px; transform: translateX(-50%);
  animation: bob 1.6s ease-in-out infinite; pointer-events: none;
}
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
#menu > #settingsBtn { position: absolute; top: 10px; right: 12px; z-index: 4; }

/* ---------------- 게임 화면 ---------------- */
#game { background: linear-gradient(#cfe0dc, #f2e7d0 40%, #eee0c4); }
header { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px 4px; }   /* 양쪽 버튼을 가장자리 쪽으로 */
/* 양쪽 버튼 자리를 같은 폭으로 → 단계 제목이 정가운데 */
header .hbtns { flex: 0 0 88px; display: flex; gap: 4px; justify-content: flex-end; align-self: flex-start; margin-top: -2px; }   /* 버튼 두 개를 가깝게, 위쪽에 붙여서 */
header .hbtns.left { justify-content: flex-start; }
#title { flex: 1; }
.hbtns { display: flex; gap: 8px; }
.round {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--cream); color: var(--ink); font-size: calc(20px + var(--fd));
  border: 1px solid var(--line); box-shadow: 0 2px 5px rgba(70, 50, 30, .15);
}
.round:active { transform: translateY(1px); box-shadow: none; }
#title { text-align: center; }
#levelLabel { font-size: calc(22px + var(--fd)); }
#leftLabel { font-size: calc(13px + var(--fd)); color: var(--muted); word-break: keep-all; line-height: 1.35; }
#stage { flex: 1; position: relative; min-height: 0; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
footer { display: flex; gap: 22px; justify-content: center; padding: 4px 14px 10px; }   /* 아이템은 동그란 아이콘으로 (멍냥이 자리를 넓게) */
.booster {
  position: relative; flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: var(--cream); color: var(--ink); font-size: calc(16px + var(--fd));
  border: 1px solid var(--line); box-shadow: 0 2px 5px rgba(70, 50, 30, .15);
}
.booster:active { transform: translateY(1px); box-shadow: none; }
.booster:disabled, .booster.off { opacity: .45; cursor: default; }
.booster.off:active { transform: none; box-shadow: 0 2px 5px rgba(70, 50, 30, .15); }
.booster.active { background: #f3dc9c; }
.booster.super { background: #fdf0c4; border-color: #e3c06a; }
.booster.super .cnt { background: #e39a4c; }
.booster .cnt {
  position: absolute; top: -9px; right: -7px; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 11px; background: #8fae78; color: #fffaf1; font-size: calc(12px + var(--fd)); line-height: 19px;
  border: 1px solid var(--line);
}

/* 설정 / 단계 팝업 */
.setRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0 4px; font-size: calc(14px + var(--fd)); }
.setRow input[type=range] { flex: 1; accent-color: #b98a64; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span {
  position: absolute; inset: 0; border-radius: 13px; background: #d8ccb9; border: 1px solid var(--line);
  transition: background .2s; cursor: pointer;
}
.switch span::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--cream); border: 1px solid var(--line); transition: transform .2s;
}
.switch input:checked + span { background: #8fae78; }
.switch input:checked + span::after { transform: translateX(19px); }
.stars { font-size: calc(21px + var(--fd)); letter-spacing: 2px; color: #e9bf4f; margin: 2px 0 6px; }
.stars .off { color: #dccfbc; }

#toast {
  position: absolute; left: 50%; top: 68px; transform: translateX(-50%);
  background: rgba(74, 59, 44, .92); color: #fffaf1; padding: 10px 16px; border-radius: 12px;
  font-size: calc(16px + var(--fd)); pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 6;
  /* 긴 알림은 화면 밖으로 나가지 않게 낱말 단위로 줄을 바꿔요 */
  width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; text-align: center; word-break: keep-all; line-height: 1.4;
}
#toast.show { opacity: 1; }

#overlay {
  position: absolute; inset: 0; background: rgba(40, 34, 25, .5); z-index: 5;
  display: none; align-items: center; justify-content: center;
}
#overlay.show { display: flex; }
.card {
  position: relative;
  background: var(--cream); border-radius: 20px; padding: 18px 18px 16px; text-align: center; width: min(82%, 310px);
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(60, 40, 20, .25);
}
/* 팝업 상자 위에 걸터앉은 고양이·강아지 그림판 */
.card canvas.perch {
  position: absolute; inset: auto; left: 50%; top: -112px; transform: translateX(-50%);
  width: 300px; height: 125px; pointer-events: none;
}
.card small { font-size: calc(11px + var(--fd)); color: var(--muted); }
.heartNow { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px + var(--fd)); color: var(--ink); margin-top: 4px; }
.heartNow svg { width: 15px; height: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.card h2 { font-size: calc(20px + var(--fd)); font-weight: 700; margin-bottom: 4px; }
#levelLabel, .btn, .node { font-weight: 700; }
.card p { margin-bottom: 8px; color: var(--muted); line-height: 1.45; font-size: calc(13px + var(--fd)); }
.btn {
  display: block; width: 100%; padding: 10px; margin-top: 8px; border-radius: 12px; cursor: pointer;
  font-size: calc(15px + var(--fd)); background: #f6dd92; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 2px 5px rgba(70, 50, 30, .15);
}
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn.alt { background: #f1e5cf; color: var(--ink); }

/* 설명서 버튼 (메인 화면 왼쪽 아래) + 설명서 팝업 */
#menu > #helpBtn { position: absolute; right: 12px; bottom: 166px; z-index: 4; }
#menu > #noticeBtn { position: absolute; right: 12px; bottom: 216px; z-index: 4; }
.card.help { max-height: 86vh; overflow-y: auto; text-align: left; }
.card.help h2 { text-align: center; }
.card.help h3 { font-size: calc(15px + var(--fd)); margin: 4px 0 6px; color: var(--ink); }
.card.help .helpPage h3 + ul + h3 { margin-top: 12px; }
/* 설명서 쪽 고르기: 네모 버튼, 누르면 그 쪽으로 */
.bookmarks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin: 2px 0 10px; }
.bm { border: 1px solid #b9ab94; border-radius: 8px; background: #f3ead9; padding: 7px 2px;
  font: inherit; font-size: calc(12px + var(--fd)); color: var(--muted); cursor: pointer; white-space: nowrap; }
.bm.on { background: #f6dd92; color: var(--ink); font-weight: 700; }
.helpPage { background: #fffaf0; border: 1px solid #e2d6bf; border-radius: 10px; padding: 10px 12px; min-height: 190px; }
.helpNav { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 2px; font-size: calc(13px + var(--fd)); color: var(--muted); }
.helpNav .btn:disabled { opacity: .4; }
.backupCode { font-size: calc(22px + var(--fd)); letter-spacing: 2px; color: var(--ink); background: #fffaf0; border: 1px dashed #c9b99c; border-radius: 10px; padding: 10px; margin: 6px 0 4px; user-select: text; -webkit-user-select: text; }
.consent { text-align: left; margin: 4px 0 6px; }
.consent .setRow { font-size: calc(14px + var(--fd)); }
.consent small { color: var(--muted); }
.linkBtn { background: none; border: none; font: inherit; font-size: calc(13px + var(--fd)); color: var(--muted); text-decoration: underline; margin-top: 8px; cursor: pointer; }
.card.help ul { padding-left: 18px; margin: 0; }
.card.help li { font-size: calc(13px + var(--fd)); line-height: 1.5; color: var(--muted); margin-bottom: 2px; }
.card.help li b { color: var(--ink); }
/* 친구 버튼 (설명서 버튼 옆) + 선물 도착 빨간 점 */
#menu > #friendsBtn { position: absolute; right: 12px; bottom: 66px; z-index: 4; }
/* 오른쪽 아래 세로 버튼: 엄지에 가까운 맨 아래가 가장 자주 쓰는 것 (아래부터 우편함 → 친구 → 채팅 → 설명서) */
#menu > #mailBtn { position: absolute; right: 12px; bottom: 16px; z-index: 4; }
#friendsBtn, #mailBtn, #noticeBtn { position: relative; }
#friendsBtn .dot, #mailBtn .dot, #noticeBtn .dot { display: none; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 50%; background: #e8768e; border: 1px solid #fff8ec; }
#friendsBtn.hasDot .dot, #mailBtn.hasDot .dot, #noticeBtn.hasDot .dot { display: block; }
/* 친구 순위 */
.friendRow.me { background: #fbf1d3; border-radius: 8px; }
.rank { display: inline-flex; width: 22px; justify-content: center; align-items: center; margin-right: 4px; font-size: calc(12px + var(--fd)); color: var(--muted); vertical-align: middle; }
.friendBtns { display: flex; gap: 4px; flex: none; }
/* 우편함 */
.mailList { max-height: 46vh; overflow-y: auto; margin: 6px 0; text-align: left; }
.mailRow { display: flex; gap: 8px; padding: 8px 4px; border-bottom: 1px dashed #e2d6bf; font-size: calc(13.5px + var(--fd)); line-height: 1.45; }
.mailRow.unread { background: #fdf3dc; border-radius: 8px; }
.mailRow .mi { flex: none; width: 24px; text-align: center; padding-top: 1px; }
.mailRow .mb { flex: 1; min-width: 0; color: var(--ink); }
.mailRow .mb small { color: var(--muted); font-size: calc(11px + var(--fd)); }
.mailRow .letter { display: block; margin-top: 3px; padding: 6px 8px; background: #fffaf0; border: 1px solid #e8dcc4; border-radius: 8px; word-break: break-all; }
.mailRow .btn.mini { align-self: center; }
.letterBox { width: 100%; box-sizing: border-box; min-height: 84px; resize: none; font: inherit; font-size: 16px; padding: 10px; border: 1px solid #c9b99c; border-radius: 10px; background: #fffaf0; color: var(--ink); }
.letterCount { text-align: right; font-size: calc(11px + var(--fd)); color: var(--muted); margin: 2px 2px 8px; }
/* 친구 창 */
.codeRow { display: flex; gap: 6px; align-items: stretch; justify-content: center; margin: 4px 0 8px; }
.codeRow .nickInput { margin: 0; padding: 8px 10px; font-size: 16px; }
.myCode { font-size: calc(20px + var(--fd)); letter-spacing: 2px; color: var(--ink); }
.btn.mini { width: auto; margin: 0; padding: 7px 12px; font-size: calc(13px + var(--fd)); white-space: nowrap; flex: none; }
.friendList { max-height: 34vh; overflow-y: auto; margin: 6px 0; }
.friendRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 2px; border-bottom: 1px dashed #e2d6bf; font-size: calc(14px + var(--fd)); text-align: left; }
.friendRow small { color: var(--muted); font-size: calc(11px + var(--fd)); }
/* 알림이 안 켜질 때 이유 (작게) */
.pushWhy { font-size: calc(11px + var(--fd)); color: #b0675a; text-align: left; margin: -4px 0 6px; word-break: break-all; }
.pushWhy:empty { display: none; }
.verLine { font-size: calc(10.5px + var(--fd)); color: #b3a58e; margin: 6px 0 0; }
.weather .wIc { display: inline-flex; } .weather .wIc svg { display: block; } .weather .wDot { opacity: .6; }
/* 우편함 N 표시 (안 받은 하트·안 읽은 쪽지) */
#mailBtn .dot { width: 16px; height: 16px; top: -2px; right: -2px; font-size: calc(10px + var(--fd)); font-weight: 700; line-height: 15px; color: #fffaf1; text-align: center; font-family: inherit; }
.btn.mini.claimAll { display: block; margin: 0 auto 8px; }
.btn.mini.more { padding: 7px 8px; letter-spacing: 1px; }
/* 친구 줄: 이름은 한 줄(길면 …), 단계는 아래 작은 글씨 */
.friendRow > span:first-child { flex: 1; min-width: 0; word-break: break-all; line-height: 1.3; }   /* 긴 닉네임도 잘리지 않고 다 보여요 */
.friendRow > span:first-child small { display: block; }
.friendRow > span:first-child .rank ~ small { margin-left: 26px; }
.friendRow .btn.mini { padding: 7px 9px; }
.friendRow .btn.mini.more { padding: 7px 7px; }

/* 채팅 버튼 (우편함 옆) */
#menu > #chatBtn { position: absolute; right: 12px; bottom: 116px; z-index: 4; }
/* 친구 창: 구역 제목, 찾기 결과, 접속 표시 */
.secTitle { text-align: left; font-size: calc(12.5px + var(--fd)); color: var(--muted); margin: 8px 2px 2px; font-weight: 700; }
.findList { max-height: 24vh; overflow-y: auto; }
.findList:empty { display: none; }
.friendRow .tag { color: var(--muted); font-size: calc(11.5px + var(--fd)); flex: none; }
.friendRow small { display: block; }
.onDot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; vertical-align: middle; background: #cfc6b6; border: 1px solid rgba(96,90,84,.35); }
.onDot.on { background: #6cc46a; border-color: #4e9a4d; }
.reqList .friendRow { background: #fdf3dc; border-radius: 8px; }
/* 전체 채팅 */
.chatList { height: 46vh; overflow-y: auto; text-align: left; background: #fffaf0; border: 1px solid #e2d6bf; border-radius: 10px; padding: 8px; margin: 4px 0 8px; }
.chatMsg { margin: 0 0 8px; font-size: calc(13.5px + var(--fd)); }
.chatMsg b { display: block; font-size: calc(11.5px + var(--fd)); color: var(--muted); margin: 0 0 2px 2px; }
.chatMsg .bubble { display: inline-block; max-width: 78%; padding: 6px 10px; border-radius: 12px 12px 12px 4px; background: #f3ead9; border: 1px solid #e2d6bf; color: var(--ink); word-break: break-all; }
.chatMsg small { font-size: calc(10px + var(--fd)); color: #b3a58e; margin-left: 4px; }
.chatMsg.mine { text-align: right; }
.chatMsg.mine .bubble { background: #f6dd92; border-color: #e3c56e; border-radius: 12px 12px 4px 12px; text-align: left; }
.chatInput { margin-top: 0; }

/* 지도 위 친구 이름표 (친구가 지금 있는 단계 옆) */
.fMark { position: absolute; transform: translateY(-50%); z-index: 2; white-space: nowrap; cursor: pointer;
  padding: 3px 9px; border-radius: 12px; font-size: calc(11.5px + var(--fd)); color: var(--ink);
  background: rgba(255, 250, 240, .92); border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(70, 50, 30, .12); }

/* 친구 줄 아이콘 버튼: 작고 동그랗게 */
.friendRow .btn.mini.ic { width: 34px; height: 30px; padding: 0; display: inline-grid; place-items: center; font-size: calc(11.5px + var(--fd)); letter-spacing: 0; }
.friendRow .btn.mini.ic svg { display: block; }
.friendBtns { gap: 5px; }
/* 순위 아이콘은 왼쪽에 고정, 이름이 길면 이름 칸 안에서만 줄바꿈 */
.friendRow .fName { display: flex; align-items: flex-start; }
.friendRow .fName .rank { flex: none; margin-top: 1px; }
.friendRow .fTxt { min-width: 0; word-break: break-all; }
.friendRow .fTxt small { margin-left: 0 !important; }

/* 설정: 가벼운 모드 고르기 (계절 고르기와 같은 모양) */
.litePick { display: flex; gap: 3px; flex: none; }
.litePick button { font: inherit; font-size: calc(12px + var(--fd)); padding: 4px 8px; border-radius: 12px; border: 1px solid #c9b99c; background: #f3ead9; color: var(--muted); cursor: pointer; }
.litePick button.on { background: #f6dd92; color: var(--ink); font-weight: 700; }

/* 공지사항 · 문의 */
.noticeList { max-height: 44vh; overflow-y: auto; text-align: left; margin: 6px 0 10px; }
.notice { padding: 9px 10px; margin-bottom: 8px; background: #fffaf0; border: 1px solid #e8dcc4; border-radius: 10px; font-size: calc(13px + var(--fd)); color: var(--ink); }
.notice > b { display: block; font-size: calc(14px + var(--fd)); }
.notice > small { color: var(--muted); font-size: calc(11px + var(--fd)); }
.notice .nBody { margin-top: 4px; line-height: 1.5; word-break: break-all; }
.notice .reply { margin-top: 6px; padding: 7px 9px; background: #fbf1d3; border-radius: 8px; line-height: 1.5; }
.notice .wait { display: block; margin-top: 4px; color: #b3a58e; }

/* ---------- 일시정지: 화면을 까맣게 덮고 멍냥이들이 엎드려 쿨쿨 ---------- */
#pauseCover { position: absolute; inset: 0; z-index: 8; display: none; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(16, 14, 22, .95); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#pauseCover.show { display: flex; animation: dimIn .35s ease-out; }
@keyframes dimIn { from { opacity: 0; } to { opacity: 1; } }
/* 동그란 하얀 쿠션 위에 강아지(뒤·조금 위)와 고양이(앞·조금 아래)가 엇갈려 꼭 붙어서 자요. 강아지 얼굴은 안 가려져요 */
#pauseCover .sleepers { position: relative; width: 250px; height: 150px; }
#pauseCover .cushion { position: absolute; left: 5px; bottom: -22px; width: 240px; height: 110px; }
#pauseCover .sleeper { position: absolute; width: 170px; }
#pauseCover .sleeper.dog { left: 16px; bottom: 34px; z-index: 1; }
#pauseCover .sleeper.cat { left: 70px; bottom: 8px; z-index: 2; }
#pauseCover .sleeper img { display: block; width: 100%; height: auto; transform-origin: 50% 100%; animation: breatheSleep 3.2s ease-in-out infinite; }
#pauseCover .sleeper.cat img { animation-delay: -1.6s; }
@keyframes breatheSleep { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.02, 1.05); } }
/* z 는 각자 머리 위에서 차례로 떠올라요 */
#pauseCover .zz { position: absolute; left: 32%; top: 10%; color: #c9d3ea; font-weight: 700; opacity: 0; animation: floatZ 3.3s ease-in infinite; }
#pauseCover .zz:nth-of-type(1) { font-size: calc(15px + var(--fd)); }
#pauseCover .zz:nth-of-type(2) { font-size: calc(20px + var(--fd)); animation-delay: 1.1s; }
#pauseCover .zz:nth-of-type(3) { font-size: calc(26px + var(--fd)); animation-delay: 2.2s; }
#pauseCover .sleeper.cat .zz { animation-delay: .55s; }
#pauseCover .sleeper.cat .zz:nth-of-type(2) { animation-delay: 1.65s; }
#pauseCover .sleeper.cat .zz:nth-of-type(3) { animation-delay: 2.75s; }
@keyframes floatZ { 0% { transform: translate(0, 8px); opacity: 0; } 25% { opacity: .95; } 100% { transform: translate(16px, -40px); opacity: 0; } }
#pauseCover .dozeText { margin-top: 40px; font-size: calc(22px + var(--fd)); font-weight: 700; color: #fbf1de; letter-spacing: 1px; }
#pauseCover .dots i { font-style: normal; animation: dotBlink 1.5s infinite; opacity: .2; }
#pauseCover .dots i:nth-child(2) { animation-delay: .25s; }
#pauseCover .dots i:nth-child(3) { animation-delay: .5s; }
@keyframes dotBlink { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
#pauseCover .dozeHint { margin-top: 10px; font-size: calc(13px + var(--fd)); color: rgba(251, 241, 222, .55); }

/* 가로로 돌리면: 세로로 돌려 달라는 안내 (게임은 자동으로 멈춰요) */
#rotateNotice { display: none; position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(16, 14, 22, .96); color: #fbf1de; text-align: center; }
#rotateNotice p { margin: 14px 0 6px; font-size: calc(20px + var(--fd)); font-weight: 700; }
#rotateNotice small { color: rgba(251, 241, 222, .6); font-size: calc(13px + var(--fd)); }
@media (orientation: landscape) and (max-height: 540px) { #rotateNotice { display: flex; } }
/* 채팅: 닉네임 옆 단계 + 1·2·3위 메달 */
.chatMsg .lvTag { font-weight: 400; font-size: calc(10.5px + var(--fd)); color: #b3a58e; margin-left: 5px; display: inline-flex; align-items: center; gap: 2px; }
.chatMsg .lvTag .medal { vertical-align: -1px; }
.chatMsg .meTag { display: block; text-align: right; margin: 0 2px 2px 0; }
/* 친구 창: 찾기 칸과 "친구 N명" 사이를 가깝게 */
.codeRow + .findList + .secTitle { margin-top: 0; }
.codeRow:has(#findNick) { margin-bottom: 4px; }
.card > h2:first-child { margin-top: -8px; margin-bottom: 8px; }   /* 모든 창 제목을 조금 위로 (친구 창과 똑같이) */

/* 창 오른쪽 위 X 닫기 버튼 */
.xBtn { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: #f3ead9; border: 1px solid #c9b99c; z-index: 2; }
.xBtn:active { transform: translateY(1px); }
.xBtn svg { display: block; }

/* 설정: 고르기 버튼 묶음 (해상도·글자 크기) */
.pickRow { display: flex; gap: 3px; flex: none; }
.pickRow button { font: inherit; font-size: calc(12px + var(--fd)); padding: 4px 9px; border-radius: 12px; border: 1px solid #c9b99c; background: #f3ead9; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pickRow button.on { background: #f6dd92; color: var(--ink); font-weight: 700; }
.setRow > span:first-child { white-space: nowrap; }

/* 친구 창은 넓게: 10글자 닉네임과 접속 동그라미가 한 줄에 들어가요 */
.card.wide { width: min(94%, 372px); padding-left: 14px; padding-right: 14px; }
.card.wide .friendRow { gap: 6px; }
.card.wide .friendRow .btn.mini.ic { width: 32px; }
/* 입력칸 안내 글씨(placeholder)는 작게 — 입력한 글씨는 16px 그대로라 아이폰에서 확대되지 않아요 */
.nickInput::placeholder, .letterBox::placeholder { font-size: calc(13px + var(--fd)); }
/* 멍냥이의 응원 팝업: 선물 상자 */
.cheerGift { background: #fbf1d3; border: 1px dashed #e2bf5c; border-radius: 12px; padding: 8px 10px; margin: 8px 0 12px; }
.cheerGift b { color: #8a6a2c; }

/* 빨리감기 버튼 (설정 왼쪽): 누르면 노랗게 켜지고, 다시 누르면 꺼져요 */
.round.ffBtn { font-size: calc(11px + var(--fd)); font-weight: 700; letter-spacing: -.5px; line-height: 1; }
.round.ffBtn.on { background: #f6dd92; }

/* 오늘의 추천 친구 */
.friendRow.suggest { background: #f4f0e2; border-radius: 8px; border-bottom: none; padding: 7px 8px; }

/* 전체 채팅: 닉네임 옆 친구 요청 아이콘 */
.chatReq { display: inline-grid; place-items: center; vertical-align: middle; margin-left: 3px; width: 22px; height: 20px; padding: 0;
  border: none; background: none; cursor: pointer; }   /* 테두리 없이 아이콘만 */
.chatReq:active { transform: scale(.9); }
.chatReq.sent { width: auto; padding: 0 2px; font-size: calc(10px + var(--fd)); font-weight: 400; color: var(--muted); cursor: default; }
/* 단계 팝업: 친구 랭킹 */
.lvRank { margin: 2px auto 12px; max-width: 250px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px; }   /* 둥근 테두리 안 하얀 판 */
.lvRank:empty { display: none; }
.lvRank .rk { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: calc(13px + var(--fd)); }
.lvRank .rk b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lvRank .rk small { color: var(--muted); }
.lvRank .rk.me { background: #fbf1d3; border-radius: 8px; }
.lvRank .rkTitle { text-align: center; font-size: calc(12px + var(--fd)); color: var(--muted); margin-bottom: 2px; }

/* 관리자 왕관 (채팅·친구 목록 닉네임 옆) */
svg.crown { display: inline-block; vertical-align: -1px; margin-left: 3px; }

/* 1:1 문의 안내 */
.privNote { margin: -4px 0 6px; }

/* 별 모으기: 단계 팝업 위로 삐죽 올라온 별 세 개 (가운데가 커요) */
.starCrown { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 2px; pointer-events: none; }
.starCrown svg { width: 30px; height: 28px; filter: drop-shadow(0 1px 1px rgba(80,60,30,.2)); }
.starCrown .sc0 { transform: rotate(-14deg) translateY(4px); }
.starCrown .sc1 { width: 40px; height: 37px; }
.starCrown .sc2 { transform: rotate(14deg) translateY(4px); }
.starCrown.inline { position: static; transform: none; justify-content: center; margin: 6px 0 10px; }
.winStars { margin: -2px 0 4px; }
.winStars small { display: block; margin-top: 4px; }   /* 별과 글자 사이 띄우기 */
.node small .off { opacity: .35; }

/* 오늘의 경쟁: 지도 왼쪽 아래 엄지 버튼 + 순위 */
#menu > #dailyBtn { position: absolute; left: 12px; bottom: 16px; z-index: 4; }
.dailyRank { margin: 4px auto 6px; max-width: 270px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px; }
.dailyRank .rk { display: flex; align-items: center; gap: 6px; padding: 3px 8px; font-size: calc(13px + var(--fd)); }
.dailyRank .rk .pos { width: 18px; text-align: center; color: var(--muted); font-size: calc(12px + var(--fd)); }
.dailyRank .rk b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dailyRank .rk small { color: var(--muted); }
.dailyRank .rk.me { background: #fbf1d3; border-radius: 8px; }
.dailyRank .rkTitle { text-align: center; font-size: calc(12px + var(--fd)); color: var(--muted); margin-bottom: 2px; }
.dailyRank .rkGap { text-align: center; color: var(--muted); line-height: 1; }
.dailyMe { margin: 0 0 8px; }

/* 축하 창: 하트를 돌려받았어요 줄의 하트를 글자 크기에 맞춰요 */
.refund svg { width: 1.05em; height: 1em; vertical-align: -0.15em; margin-right: 3px; }

/* 전체 채팅 버튼: 안 읽은 글 수 (우편함 N과 같은 모양) */
#chatBtn { position: relative; }
#chatBtn .dot { display: none; position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e8768e; border: 1px solid #fff8ec;
  font-size: calc(10px + var(--fd)); font-weight: 700; line-height: 15px; color: #fffaf1; text-align: center; font-family: inherit; }
#chatBtn.hasDot .dot { display: block; }

/* 공지사항 버튼: 새 공지 N 배지 (우편함 N과 같은 모양) */
#noticeBtn .dot { width: 16px; height: 16px; top: -2px; right: -2px; font-size: calc(10px + var(--fd)); font-weight: 700; line-height: 15px; color: #fffaf1; text-align: center; font-family: inherit; }

/* 단계 설명: 줄마다 한 줄 고정 (넘치면 …), 게임 중 머리줄 높이가 변하지 않게 */
#leftLabel .ll { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#title { min-width: 0; }

/* 지도: 받은 별이 없는 단계는 숫자만 얼굴 가운데에 */
.node.nostar .nodeIn { top: 27px; }
.node.dog.nostar .nodeIn { top: 25px; }

.booster[hidden] { display: none; }   /* 색 섞기가 없는 단계에서는 숨겨요 */

/* 게임 화면: 단계 제목 위 작은 회색 난이도 */
#tierLabel { font-size: calc(11px + var(--fd)); color: var(--muted); line-height: 1.2; margin-bottom: -2px; }

/* 단계 랭킹: 순위 번호 칸 */
.lvRank .rk .pos { width: 18px; text-align: center; color: var(--muted); font-size: calc(12px + var(--fd)); }
.lvRank .rkGap { text-align: center; color: var(--muted); line-height: 1; }

/* 단계 랭킹: 제목 왼쪽 + 친구만 체크 오른쪽, 5명 높이로 스크롤, 내 기록은 아래 고정 */
.lvRank .rkHead { display: flex; align-items: center; justify-content: space-between; padding: 0 6px; margin: -5px 0 7px; }   /* 제목 줄만 위로 바짝 (위 여백↓), 아래 목록과는 조금 띄워요 */
.lvRank .rkHead .rkTitle { margin: 0; text-align: left; }
.lvRank .rkOnly { display: inline-flex; align-items: center; gap: 3px; font-size: calc(10px + var(--fd)); color: var(--muted); cursor: pointer; }
.lvRank .rkOnly input { width: 11px; height: 11px; margin: 0; accent-color: #c99a2e; }   /* 글자 크기만큼 작게, 글자 오른쪽 끝에 */
.lvRank .rkList { max-height: 132px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lvRank .rkMine { border-top: 1px dashed #e2d6bf; margin-top: 4px; padding-top: 4px; }
.lvRank .rkNone { text-align: center; margin: 8px 0; }

/* 점수: 축하 창 */
.winScore { font-weight: 700; font-size: calc(17px + var(--fd)); color: #8a6a2c; margin: -2px 0 2px; }
.winScore .combo { display: inline-block; font-size: calc(12px + var(--fd)); color: #d0703a; background: #fdeedd; border-radius: 10px; padding: 1px 8px; margin-left: 4px; vertical-align: 2px; }

/* 지도 왼쪽 위: 1줄 인사(하트 왼쪽까지만, 넘치면 …) / 2줄 날씨 + 점수 */
.topLeft { position: absolute; top: 14px; left: 12px; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.topLeft .hello, .topLeft .weather { position: static; }
.topLeft .hello { max-width: min(calc(100vw - 150px), 410px); display: flex; }
.topLeft .hello .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }

/* 하트는 맨 위 오른쪽 끝 (설정 버튼은 오른쪽 아래 묶음으로) */
#menu > .hearts { right: 12px; }
/* 오른쪽 아래 버튼 묶음: 위에서부터 설정·공지·설명서·채팅·친구·우편함, 맨 아래 접기 버튼 */
.sideCol { position: absolute; right: 12px; bottom: 16px; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sideBtns { display: flex; flex-direction: column; gap: 8px; }
.sideCol .sideBtns .round { position: relative; top: auto; right: auto; bottom: auto; }
.sideCol.folded .sideBtns { display: none; }
.sideToggle { position: relative; }   /* 다른 동그란 버튼과 같은 크기 */
.sideToggle .dot { display: none; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #e8768e; border: 1px solid #fff8ec; }
.sideToggle.hasDot .dot { display: block; }

/* 채팅: 글마다 ⋯ → 신고·차단(관리자는 지우기) */
.chatMsg { position: relative; }
.chatMore { border: none; background: none; color: var(--muted); font-size: calc(14px + var(--fd)); padding: 0 4px; cursor: pointer; vertical-align: middle; }
.chatAct { display: flex; gap: 6px; margin: 2px 0 4px; }
.chatAct[hidden] { display: none; }
.chatAct button { border: 1px solid #c9b99c; background: #fbf3e2; border-radius: 10px; font: inherit; font-size: calc(11px + var(--fd)); padding: 2px 8px; cursor: pointer; }
.verLine a { color: var(--muted); }

/* 좁은 폰: '여행 중'은 빼서 닉네임·단계·점수가 다 보이게 */
@media (max-width: 400px) { .topLeft .hello .trip { display: none; } }

/* 운영자: 모든 문의 */
.aqTabs { display: flex; gap: 8px; justify-content: center; margin: 2px 0 8px; }
.aqTabs .btn { width: auto; margin: 0; padding: 6px 14px; }
.aqTabs .btn.on { background: #f3dc9c; }
.aq .aqHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aqSt { font-size: calc(11px + var(--fd)); padding: 1px 8px; border-radius: 9px; background: #efe6d4; color: var(--muted); white-space: nowrap; }
.aqSt.new { background: #f3c2c2; color: #7a3a3a; }
.aqSt.ok { background: #d9e8cc; color: #4d6b3a; }
.aq .aqOpen, .aq .aqSend { width: auto; margin: 6px 0 0; padding: 5px 14px; }
.aq .aqText { min-height: 70px; margin-top: 6px; }

/* 아이템 꾹 누르면 뜨는 설명 */
#boostTip { position: fixed; z-index: 60; padding: 9px 12px; border-radius: 14px; background: #fffaf1; color: var(--ink);
  border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(70, 50, 30, .2); font-size: calc(13px + var(--fd)); line-height: 1.5; text-align: center; word-break: keep-all; pointer-events: none; }
#boostTip small { color: var(--muted); }
.booster { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* 초특급 열기구는 언제나 맨 오른쪽 */
#superBtn { order: 99; }

/* 운영자: 모든 멤버 */
.amSum { margin: 0 0 6px; text-align: center; }
.am small { display: block; color: var(--muted); }
.amTags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.amTags span { font-size: calc(11px + var(--fd)); padding: 1px 7px; border-radius: 9px; background: #efe6d4; color: var(--ink); }
.amTags span.off { color: var(--muted); }
.am .aqSt { margin-left: 8px; }

/* 친구 N명 옆: 하트 모두 보내기 */
.secTitle.friendHead { display: flex; align-items: center; gap: 8px; }
.friendHead .sendAll { margin-left: auto; }   /* 오른쪽 끝에 */
.sendAll { position: relative; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 12px; cursor: pointer;
  font: inherit; font-size: calc(12.5px + var(--fd)); font-weight: 700; color: var(--ink); line-height: 1.3;
  background: #f6dd92; border: 1px solid var(--line); }
.sendAll:active { transform: translateY(1px); }
.sendAll:disabled { background: #efe6d4; opacity: .5; cursor: default; }
.sendAll svg { display: block; }
.sendAll .cnt { position: absolute; top: -8px; right: -7px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #8fae78; color: #fffaf1;
  font-size: calc(10px + var(--fd)); line-height: 13px; border: 1px solid var(--line); font-weight: 700; }