* { box-sizing: border-box; }
:root {
  --ease: cubic-bezier(0.32, 0.72, 0, 1); /* 공통 움직임 커브: 빨리 시작해 부드럽게 멈춤 */
  /* 회색: 따뜻한 회색 12단계(1~2 바탕, 3~5 면, 6~8 선, 9~10 채움, 11~12 글자) */
  --gray-1: #fdfdfc; --gray-2: #f9f9f8; --gray-3: #f1f0ef; --gray-4: #e9e8e6; --gray-5: #e2e1de; --gray-6: #dad9d6;
  --gray-7: #cfceca; --gray-8: #bcbbb5; --gray-9: #8d8d86; --gray-10: #82827c; --gray-11: #63635e; --gray-12: #21201c;
  /* 주황: 50~700, 브랜드는 500 */
  --orange-50: #fff7f2; --orange-100: #ffeade; --orange-150: #ffdeca; --orange-200: #ffd2b5; --orange-250: #ffc6a0; --orange-300: #ffae7b;
  --orange-350: #fc9757; --orange-400: #f68334; --orange-500: #ef7014; --orange-550: #c95f0d; --orange-600: #a44f08; --orange-700: #7e3d04;
  /* 쓰임별 이름 */
  --ink: var(--gray-12); --ink-hover: #3b3a35; --sub: var(--gray-11); --mute: var(--gray-10); --line: var(--gray-4);
  --paper: #fff; --cream: var(--gray-3); --cream-hover: var(--gray-4); --cream-press: var(--gray-5);
  --accent: var(--orange-500); --accent-soft: var(--orange-100); --accent-soft-hover: var(--orange-150); --accent-ink: var(--orange-600);
  --shadow: 0 2px 10px #0000001a;
}
html, body { margin: 0; height: 100%; overflow: hidden; font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif; font-weight: 400; line-height: 1.5; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere; background: var(--gray-2); color: var(--ink); -webkit-font-smoothing: antialiased; }
/* 굵기는 400·500, 메인 타이틀만 600 */
h1, h2, h3, b, strong, th { font-weight: 500; }
.dtitle h2, .pick-title { font-weight: 600; } /* 600 은 메인 타이틀(아이 이름·선택 창 제목)만, 나머지는 500 이하 */
canvas { display: block; touch-action: none; }
body > canvas:first-child { position: fixed; inset: 0; width: 100%; height: 100%; } /* 3D 화면은 늘 화면 가득(크기는 main.js 가 따라감) */
button { font: inherit; color: inherit; }

/* ---- 맨 위: 관·지역 한 덩어리, 오른쪽에 인원·내 이름 ---- */
header { position: fixed; inset: 12px 12px auto; display: flex; gap: 8px; align-items: center; z-index: 2; pointer-events: none; }
.hud { display: flex; align-items: center; height: 44px; padding: 4px; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow); pointer-events: auto; }
.hud.right { margin-left: auto; gap: 0; padding: 4px; } /* 네 방향 같은 여백(인원 글자가 없을 때도 고르게) */
nav { display: flex; }
nav a { padding: 8px 14px; border-radius: 999px; color: inherit; text-decoration: none; font-weight: 500; white-space: nowrap; }
nav a.on { background: var(--ink); color: #fff; }
/* 고르기 버튼(지역·관): 누르면 펼침 목록, 휴대폰은 시트 */
.pick-trigger { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: 999px; background: none; font-weight: 500; cursor: pointer; transition: background-color 150ms var(--ease), scale 150ms var(--ease); }
.pick-trigger:hover { background: var(--cream); }
.pick-trigger:active { scale: 0.97; }
.pick-trigger .v { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-trigger .chev { color: var(--mute); transition: rotate 200ms var(--ease); }
.pick-trigger[aria-expanded="true"] .chev { rotate: 180deg; }
.pick-trigger.sido { margin-left: 4px; position: relative; }
.pick-trigger.sido::before { content: ""; position: absolute; left: -2px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.pick-trigger.room { display: none; }
nav a { transition: background-color 150ms var(--ease), color 150ms var(--ease); }
nav a:not(.on):hover { background: var(--cream); }
#count { padding: 0 8px 0 10px; font-size: 13px; color: var(--sub); white-space: nowrap; }
#count:empty { display: none; }
.hud .me { display: flex; align-items: center; gap: 6px; height: 36px; margin-left: 0; padding: 0 12px; border: 0; border-radius: 999px; background: var(--cream); font-weight: 500; cursor: pointer; transition: background-color 150ms var(--ease), scale 150ms var(--ease); }
.hud .me:hover { background: var(--cream-hover); }
.hud .me:active { scale: 0.97; }
.hud .me .v { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
header { flex-wrap: nowrap; } /* 맨 위 줄은 두 줄로 꺾이지 않게 */
.hud { min-width: 0; flex-shrink: 1; }
.hud .me { min-width: 0; }

/* ---- 화면 위 이름표·말풍선 ---- */
.label { position: fixed; translate: -50% -100%; padding: 2px 8px; border-radius: 999px; background: #21201ccc; color: #fff; font-size: 12px; pointer-events: none; white-space: nowrap; z-index: 1; }
.label.watch { background: #fff; color: var(--ink); box-shadow: 0 1px 6px #0002; }
/* 가장 가까운 아이 위 핀: 사진 · 품종 · 교감하기 */
#meet { position: fixed; translate: -50% calc(-100% - 8px); display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border: 0; border-radius: 999px; background: var(--paper); box-shadow: var(--shadow); cursor: pointer; z-index: 2; white-space: nowrap; }
#meet::after { content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--paper); }
#meet[hidden] { display: none; }
#meet img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--cream); }
#meet .m-name { font-size: 13px; font-weight: 500; }
#meet .m-go { font-size: 12px; font-weight: 500; color: var(--accent-ink); }

/* ---- 아래: 안내 문구(처음 몇 초만), 출처 ---- */
#source { position: fixed; left: 50%; bottom: 16px; translate: -50% 0; margin: 0; padding: 6px 12px; border-radius: 999px; background: #fffd; color: var(--mute); font-size: 13px; z-index: 2; white-space: nowrap; }
body.focus #lists, body.focus #source, body.acting #source { display: none; }
/* 안내 캐릭터: 왼쪽 아래에 늘 있고, 상황이 바뀔 때 말풍선으로 알려 줌(캐릭터를 누르면 다시 봄) */
#guide { position: fixed; left: 16px; bottom: 16px; z-index: 2; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; transition: bottom 0.25s var(--ease); }
#guide .g-bot { width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; flex: none; }
#guide .g-say { max-width: 300px; margin: 0 0 18px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--paper); box-shadow: var(--shadow); font-size: 13px; line-height: 1.5; white-space: normal; transition: opacity 0.3s var(--ease), translate 0.3s var(--ease); }
#guide .g-say.gone { opacity: 0; translate: -6px 4px; }
body.acting #guide { bottom: 100px; } /* 교감 액션바 위로 비켜 줌 */
body.acting.focus #react { bottom: 176px; }
body.focus #react { bottom: 92px; } /* 왼쪽 아래 안내 캐릭터 위로 */

/* ---- 반응: ❤️ 하나, 누르면 위로 펼침 ---- */
#react { position: fixed; right: 16px; bottom: 16px; z-index: 2; }
#react .toggle { width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow); font-size: 22px; cursor: pointer; }
#react .menu { position: absolute; right: 0; bottom: 56px; display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--paper); border-radius: 999px; box-shadow: var(--shadow); }
#react .menu[hidden] { display: none; }
#react .menu button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 20px; cursor: pointer; }
#react .menu button:hover, #react .toggle:hover { background: var(--cream); }
body.focus #react { right: auto; left: 16px; } /* 오른쪽 창에 가리지 않게 */
body.focus #react .menu { right: auto; left: 0; }
.float { position: fixed; pointer-events: none; z-index: 1; }
.float span { display: block; translate: -50% -100%; font-size: 28px; animation: rise var(--dur) ease-out forwards; }
@keyframes rise { from { transform: translateY(0) scale(0.6); opacity: 0; } 15% { transform: translateY(-8px) scale(1.1); opacity: 1; } to { transform: translateY(-60px) scale(1); opacity: 0; } }

/* ---- 교감 액션바: 화면 아래 가운데 큰 원형 버튼, 하는 동안 진행 원 ---- */
.actbar { position: fixed; left: 50%; bottom: 20px; translate: -50% 0; display: flex; gap: 6px; padding: 8px 10px; background: #fffffff2; border-radius: 28px; box-shadow: 0 4px 18px #0000002a; z-index: 4; transition: bottom 0.2s; }
.actbar[hidden], .actbar.tucked { display: none; }
body.panel .actbar { left: calc((100vw - 444px) / 2); } /* 데스크톱: 오른쪽 창을 뺀 가운데 */
.actbar button { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 2px 0; border: 0; background: none; font-size: 11px; font-weight: 500; color: var(--sub); cursor: pointer; }
.actbar button span { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--cream); font-size: 24px; transition: transform 0.15s; }
.actbar button:hover span { transform: scale(1.06); }
.actbar button:disabled { cursor: default; }
.actbar button:disabled:not(.busy) { opacity: 0.4; }
.actbar button.busy { color: var(--accent-ink); }
.actbar button.busy span::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p, 0) * 100%), var(--gray-5) 0); mask: radial-gradient(farthest-side, #0000 calc(100% - 4px), #000 calc(100% - 3.5px)); } /* 테두리만 남긴 진행 원 */
.actbar button.busy.spin span::before { background: conic-gradient(var(--accent) 25%, var(--gray-5) 0); animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 1turn; } }

/* ---- 상세 창: 고정 머리(이름·이전/다음·닫기) + 내용 + 고정 아래(입양 문의) ---- */
dialog { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: 16px; padding: 0 20px; }
dialog::backdrop { background: #0006; }
dialog:focus { outline: none; }
dialog.side { position: fixed; inset: 0; height: fit-content; margin: auto 24px auto auto; z-index: 3; box-shadow: 0 8px 32px #0003; overflow: auto; }
dialog.side::backdrop { background: transparent; }
.grab { display: none; }
.dhead { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; margin: 0 -20px; padding: 14px 16px 10px 20px; background: var(--paper); }
.dtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.dtitle h2 { margin: 0; font-size: 17px; font-weight: 600; }
.left { padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 500; white-space: nowrap; }
.left:empty { display: none; }
.pager { display: flex; align-items: center; gap: 2px; }
.pager[hidden] { display: none; }
.pager button, dialog .close { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--cream); font-size: 18px; line-height: 1; cursor: pointer; }
.pager button:hover, dialog .close:hover { background: var(--cream-hover); }
#d-pos { min-width: 44px; text-align: center; font-size: 12px; color: var(--mute); }
dialog .close { font-size: 20px; }
/* 사진은 작게, 누르면 크게 */
.photo { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; }
.photo[hidden] { display: none; }
#d-photo { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: 12px; background: var(--gray-3); transition: height 0.25s; }
.photo { position: relative; transition: scale 150ms var(--ease); }
.photo:active { scale: 0.99; }
.photo:not([data-more=""])::after { content: attr(data-more); position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: #21201cb3; color: #fff; font-size: 12px; font-weight: 500; }

/* ---- 라이트박스 ---- */
.lightbox { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: #14110fe6; opacity: 0; transition: opacity 220ms var(--ease); touch-action: none; }
.lightbox.in { opacity: 1; }
.lightbox img { max-width: min(92vw, 1100px); max-height: 84vh; border-radius: 12px; object-fit: contain; opacity: 0; scale: 0.96; transition: opacity 220ms var(--ease), scale 280ms var(--ease); user-select: none; -webkit-user-drag: none; }
.lightbox.in img.ready { opacity: 1; scale: 1; }
.lb-close, .lb-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background-color 150ms var(--ease), scale 150ms var(--ease); }
.lb-close:hover, .lb-nav:hover { background: #ffffff38; }
.lb-close:active, .lb-nav:active { scale: 0.94; }
.lb-close { top: 16px; right: 16px; }
.lb-nav.prev { left: 16px; }
.lb-nav.next { right: 16px; }
.lb-nav[hidden] { display: none; }
.lb-count { position: absolute; bottom: 20px; left: 50%; translate: -50% 0; margin: 0; padding: 4px 10px; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 13px; }
.lb-count:empty { display: none; }
@media (max-width: 599px) { .lb-nav { display: none; } .lightbox img { max-width: 100vw; border-radius: 0; } }
.brief { margin: 4px 0 0; font-size: 14px; color: var(--sub); }
#d-brief { margin-top: 10px; }
.btn.space { display: block; width: 100%; margin: 12px 0 0; background: var(--accent-soft); color: var(--accent-ink); cursor: pointer; }
.btn.space:hover { background: var(--accent-soft-hover); }
.btn.space:empty { display: none; }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 14px; }
dt { color: var(--mute); }
dd { margin: 0; }
/* 펼치기(공고 자세히 보기): 높이가 부드럽게 열림 */
.disc { margin-top: 14px; font-size: 14px; }
.disc-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: var(--cream); font-weight: 500; color: var(--sub); cursor: pointer; transition: background-color 150ms var(--ease); }
.disc-head:hover { background: var(--cream-hover); }
.disc-head .chev { transition: rotate 220ms var(--ease); }
.disc-head[aria-expanded="true"] .chev { rotate: 180deg; }
.disc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 280ms var(--ease); }
.disc-body > div { overflow: hidden; }
.disc-body.open { grid-template-rows: 1fr; }
.disc-body dl { margin: 10px 4px 6px; }
.more-link { display: inline-block; margin: 4px 0; color: var(--accent-ink); font-size: 13px; font-weight: 500; text-decoration: none; }
.more-link[hidden] { display: none; }
.comments { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.comments h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; }
#c-count { color: var(--mute); font-weight: 400; }
#c-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 180px; overflow: auto; font-size: 14px; }
#c-list li { padding: 6px 0; border-bottom: 1px solid var(--gray-4); }
#c-list b { font-weight: 500; margin-right: 6px; }
#c-list small { color: var(--mute); margin-left: 6px; }
#c-list .empty { color: var(--mute); border: 0; }
#c-form { display: flex; gap: 6px; }
/* 글 칸: 테두리 한 겹, 누르면 테두리만 진해짐 */
#c-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--gray-6); border-radius: 10px; background: var(--paper); font: inherit; outline: none; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
#c-form input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #21201c1a; }
#c-form .btn { flex: none; height: 44px; padding: 0 16px; }
.notice { font-size: 13px; background: var(--orange-50); padding: 8px 10px; border-radius: 8px; }
.actions { display: flex; gap: 8px; }
/* 버튼: 높이 46, 모서리 10, 글자 500. 누르면 살짝 줄어듦 */
.btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--cream); color: inherit; text-decoration: none; font-size: 15px; font-weight: 500; cursor: pointer; user-select: none; transition: background-color 150ms var(--ease), scale 150ms var(--ease); } /* 테두리 없이 면으로만 */
.btn:hover { background: var(--cream-hover); }
.btn:active { scale: 0.98; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.primary:hover { background: var(--ink-hover); }
.btn:focus-visible, .pick-trigger:focus-visible, .check:focus-visible, .disc-head:focus-visible, .actbar button:focus-visible { outline: 3px solid #ef701466; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .btn:active, .pick-trigger:active, .actbar button:active span { scale: 1; } }
.btn[hidden] { display: none; }
.time { margin: 10px 0 0; font-size: 12px; color: var(--mute); }
#d-time { margin-bottom: 12px; }
/* 맨 아래 고정: 입양 문의가 가장 큰 버튼. 위에 내용이 더 있으면 경계를 흐리게 */
.cta { position: sticky; bottom: 0; z-index: 3; display: flex; gap: 8px; margin: 0 -20px; padding: 12px 20px 16px; background: var(--paper); border-top: 1px solid var(--line); }
.cta #d-adopt { flex: 2; }
.cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 32px; background: linear-gradient(#fff0, #fff); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
dialog.more .cta::before { opacity: 1; }

/* 체크: 20×20, 모서리 6, 테두리 1.5. 켜지면 채워지고 체크 표시가 살짝 떠오름 */
.check { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.check-box { display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border: 1.5px solid var(--gray-7); border-radius: 6px; background: var(--paper); color: #fff; transition: background-color 150ms var(--ease), border-color 150ms var(--ease), scale 150ms var(--ease); }
.check-box svg { opacity: 0; scale: 0.6; transition: opacity 150ms var(--ease), scale 200ms var(--ease); }
.check:hover .check-box { border-color: var(--gray-9); }
.check[aria-checked="true"] .check-box { background: var(--ink); border-color: var(--ink); }
.check[aria-checked="true"] .check-box svg { opacity: 1; scale: 1; }
.check:active .check-box { scale: 0.92; }

/* 입양 문의: 확인 · 절차 · 보호소를 덩어리로 나누고 줄 간격을 넉넉히 */
.adopt { margin-top: 16px; font-size: 15px; scroll-margin-top: 64px; }
.adopt[hidden] { display: none; }
.a-block { padding: 18px 0; border-top: 1px solid var(--line); }
.a-block:first-child { border-top: 0; padding-top: 4px; }
.adopt h3 { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.adopt .sub { margin: 4px 0 0; color: var(--mute); font-size: 14px; }
.adopt .checks { list-style: none; margin: 12px 0 0; padding: 0; }
.adopt .check { padding: 9px 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.adopt .check-box { margin-top: 1px; }
.adopt .check[aria-checked="true"] { color: var(--sub); }
/* 절차: 번호 원 + 굵은 한 줄 + 설명, 왼쪽에 이어지는 선 */
.adopt .steps { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: step; }
.adopt .steps li { position: relative; display: grid; gap: 1px; padding: 0 0 16px 38px; counter-increment: step; }
.adopt .steps li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; font-weight: 500; }
.adopt .steps li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: 4px; width: 1px; background: var(--line); }
.adopt .steps b { font-size: 15px; font-weight: 500; }
.adopt .steps span { font-size: 14px; color: var(--sub); }
.adopt .notice { display: flex; gap: 8px; margin: 4px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--cream); color: var(--sub); font-size: 13px; line-height: 1.6; }
.adopt .notice span { color: var(--accent-ink); }
/* 보호소 카드 */
.care-card { display: grid; gap: 6px; }
.care-name { margin: 0 0 2px; font-size: 16px; font-weight: 500; }
.care-row { display: flex; gap: 8px; margin: 0; font-size: 14px; color: var(--sub); }
.care-card .actions { margin-top: 10px; }
.btn[aria-disabled="true"] { background: var(--gray-3); color: var(--gray-8); cursor: not-allowed; scale: 1; }
.lock { margin: 2px 0 0; font-size: 13px; color: var(--mute); text-align: center; }
.lock[hidden] { display: none; }

/* 오버레이 스크롤바: 기본 막대 숨김, 스크롤할 때만 얇은 막대(.obar) */
/* 기본 스크롤바는 어디서도 쓰지 않음 */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }
.obar { position: fixed; width: 4px; border-radius: 2px; background: #21201c66; opacity: 0; transition: opacity 0.3s; pointer-events: none; z-index: 50; } /* 선택 창·시트 위에서도 보이게 */
#c-list.more { mask-image: linear-gradient(#000 calc(100% - 32px), #0003); }

/* ---- 관 목록 ---- */
#lists { position: fixed; left: 12px; top: 68px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
#lists aside { padding: 10px 12px; background: #fffe; border-radius: 12px; box-shadow: 0 2px 8px #0001; font-size: 13px; }
#lists aside[hidden] { display: none; }
#lists h3 { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
#lists ol { margin: 0; padding-left: 18px; }
#lists button { border: 0; background: none; padding: 2px 0; cursor: pointer; text-align: left; }
#lists button:hover { text-decoration: underline; }
#lists .left { margin-left: 4px; }

/* 두 번째 공간: 관 목록·인원·지역은 숨기고, 같이 잘 때는 화면을 어둡게 */
body.in-space #lists, body.in-space #count, body.in-space .pick-trigger.sido { display: none; }
body::after { content: ""; position: fixed; inset: 0; background: #1c2340; opacity: 0; pointer-events: none; transition: opacity 1.2s; z-index: 1; }
body.sleeping::after { opacity: 0.45; }

/* ---- 태블릿·휴대폰: 상세 창은 아래에서 올라오는 시트(손잡이로 반만/전체) ---- */
@media (max-width: 899px) {
  #lists { display: none; }
  #count { display: none; } /* 맨 위 줄이 넘치지 않게 인원은 태블릿·휴대폰에서 뺌 */
  dialog.side { margin: auto 0 0; width: 100%; max-width: 100%; height: 46vh; height: 46dvh; max-height: none; border-radius: 18px 18px 0 0; transition: height 0.25s; }
  dialog.side.full { height: 70vh; height: 70dvh; } /* 끝까지 올려도 위에 아이가 보이게(주소창·하단바를 뺀 실제 높이 기준) */
  dialog.side.dragging { transition: none; }
  .grab { display: block; position: sticky; top: 0; z-index: 4; height: 18px; margin: 0 -20px -18px; cursor: grab; touch-action: none; }
  .grab::before { content: ""; display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--gray-7); }
  .dhead { padding-top: 20px; touch-action: none; }
  body.panel .actbar { left: 50%; }
}
@media (max-width: 599px) {
  header { inset: 10px 10px auto; }
  .hud { height: 40px; }
  nav a { padding: 7px 11px; }
  nav { display: none; } /* 휴대폰은 관 전환도 선택으로 */
  .pick-trigger.room { display: flex; padding-left: 12px; }
  .pick-trigger .v { max-width: 84px; }
  #count { display: none; } /* 한 줄에 들어가게 인원은 휴대폰에서 뺌 */
  .hud .me { margin-left: 0; padding: 0 10px; }
  .hud .me .v { max-width: 72px; }
  /* 아래 창: 사진은 왼쪽 작은 정사각형, 정보는 그 옆에(누르면 라이트박스) */
  .photo { float: left; width: 84px; margin: 2px 12px 4px 0; }
  #d-photo { height: 84px; }
  .photo:not([data-more=""])::after { right: 4px; bottom: 4px; padding: 1px 6px; font-size: 11px; }
  #d-brief { margin-top: 4px; }
  .btn.space { clear: both; }
  #guide .g-say { max-width: calc(100vw - 110px); }
  #source { display: none; }
  body.acting #react { bottom: 104px; }
  .actbar { gap: 2px; padding: 6px 8px; }
  .actbar button { width: 58px; }
}

/* ---- 선택 창: 데스크톱은 버튼 아래 펼침 목록, 휴대폰은 아래에서 올라오는 시트 ---- */
.pick { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.pick-box { pointer-events: auto; background: var(--paper); }
.pick.pop .pick-box { position: fixed; max-height: min(60vh, 420px); overflow: auto; padding: 6px; border-radius: 12px; box-shadow: 0 10px 32px #0000002e; opacity: 0; translate: 0 -6px; scale: 0.98; transform-origin: top left; transition: opacity 160ms var(--ease), translate 220ms var(--ease), scale 220ms var(--ease); scrollbar-width: none; } /* 오버레이 스크롤 방식에 맞춰 막대 숨김 */
.pick.pop.in .pick-box { opacity: 1; translate: 0 0; scale: 1; }
.pick.sheet { pointer-events: auto; }
.pick-dim { position: absolute; inset: 0; background: #0006; opacity: 0; transition: opacity 240ms var(--ease); }
.pick.sheet.in .pick-dim { opacity: 1; }
.pick.sheet .pick-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 72vh; overflow: auto; padding: 0 12px calc(16px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; translate: 0 100%; transition: translate 320ms var(--ease); scrollbar-width: none; }
.pick.sheet.in .pick-box { translate: 0 0; }
.pick-grab { width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: var(--gray-7); }
.pick-title { margin: 14px 8px 8px; font-size: 17px; font-weight: 600; }
.pick-list { list-style: none; margin: 0; padding: 0; }
.pick-list li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 500; cursor: pointer; outline: none; transition: background-color 120ms var(--ease); }
.pick.sheet .pick-list li { min-height: 52px; font-size: 16px; }
.pick-list li:hover, .pick-list li:focus-visible { background: var(--cream); }
.pick-list li:active { background: var(--cream-hover); }
.pick-list li .pick-emoji:empty { display: none; }
.pick-list li .pick-label { flex: 1; }
.pick-list li > svg { color: var(--accent-ink); opacity: 0; } /* 체크 표시만(앞쪽 아이콘은 그대로) */
.pick-list li[aria-selected="true"] { font-weight: 500; }
.pick-list li[aria-selected="true"] > svg { opacity: 1; }

/* ---- 알림(토스트) ---- */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 30; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px; background: #21201cf2; color: #fff; font-size: 14px; font-weight: 500; translate: -50% 16px; opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease), translate 280ms var(--ease); }
.toast.in { translate: -50% 0; opacity: 1; }

/* 액션바·상세 창 등장 움직임 */
.actbar button:active span { scale: 0.92; }
.actbar:not([hidden]) { animation: rise-in 280ms var(--ease); }
dialog.side[open] { animation: panel-in 300ms var(--ease); }
@keyframes rise-in { from { opacity: 0; translate: -50% 16px; } }
@keyframes panel-in { from { opacity: 0; translate: 16px 0; } }
@media (max-width: 899px) { @keyframes panel-in { from { translate: 0 40px; opacity: 0; } } }
@media (prefers-reduced-motion: reduce) { .actbar:not([hidden]), dialog.side[open] { animation: none; } }

@media (prefers-reduced-motion: reduce) { .float span { animation-name: fade-only; } #guide .g-say { transition: none; } } /* 떠오르지 않고 제자리에서 나타났다 사라짐 */
@keyframes fade-only { from { opacity: 0; } 20% { opacity: 1; } to { opacity: 0; } }

/* ---- 아이콘(Phosphor): 글자 크기만큼, 색은 글자색 ---- */
.ph { width: 1em; height: 1em; flex: none; display: block; }
.ico { display: inline-flex; align-items: center; color: var(--mute); font-size: 16px; }
.hud .me .ico, .pick-trigger .ico { font-size: 17px; color: var(--sub); }
.pick-trigger .v { display: flex; align-items: center; gap: 6px; }
.pick-trigger .v .ph { font-size: 18px; color: var(--accent-ink); }
.pick-list .pick-emoji { display: flex; font-size: 22px; color: var(--accent-ink); }
.pager button .ph { font-size: 16px; }
dialog .close .ph { font-size: 18px; }
.btn.space { display: flex; align-items: center; justify-content: center; gap: 6px; }
.btn.space .ph { font-size: 20px; }
.actbar button span { font-size: 26px; color: var(--orange-550); }
.actbar button:disabled:not(.busy) span { color: var(--mute); }
.notice .ico, .care-row .ico { font-size: 16px; margin-top: 2px; }
.notice .ico { color: var(--accent-ink); }
#react .toggle { display: grid; place-items: center; color: #e99a8c; font-size: 24px; }
#react .menu button { display: grid; place-items: center; font-size: 22px; }
#react .e-heart { color: #e99a8c; } #react .e-wave { color: #e9a46a; } #react .e-smile { color: #e2b64f; } #react .e-paw { color: #8a6a55; }
.lb-close .ph, .lb-nav .ph { font-size: 22px; }
.float span .ph { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px #0003); }
/* 꿍한일기 하트: 좌우로 흔들리며 떠오르고, 70% 지점부터 사라짐 */
.float.heart span { animation-name: heart-rise; animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.float.heart svg { width: var(--size); height: var(--size); display: block; margin: calc(var(--size) * -1) 0 0 calc(var(--size) / -2); filter: drop-shadow(0 1px 2px #0002); } /* 가운데 맞춤(span 의 translate 는 움직임에 씀) */
@keyframes heart-rise {
  0% { translate: 0 0; scale: 0.6; opacity: 0; }
  12% { opacity: 1; }
  25% { translate: var(--drift) -16px; scale: 0.9; }
  50% { translate: 0 -34px; scale: 1; }
  70% { translate: calc(var(--drift) * -1) -48px; opacity: 1; }
  100% { translate: 0 -66px; scale: 1; opacity: 0; }
}

/* 한 줄 고치기 창(이름) */
.pick-box.edit { display: grid; gap: 10px; padding: 14px 16px 16px; }
.pick.pop .pick-box.edit { overflow: visible; }
.pick-box.edit .pick-title { margin: 4px 0 0; }
.edit-hint { margin: -6px 0 2px; color: var(--mute); font-size: 13px; }
.edit-field { position: relative; display: block; }
.edit-field input { width: 100%; height: 46px; padding: 0 56px 0 14px; border: 1px solid var(--gray-6); border-radius: 10px; font: inherit; font-size: 16px; outline: none; transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease); }
.edit-field input:focus { border-color: var(--ink); box-shadow: 0 0 0 3px #21201c1a; }
.edit-count { position: absolute; right: 12px; top: 50%; translate: 0 -50%; color: var(--mute); font-size: 12px; }
.pick-box.edit .actions .btn:disabled { opacity: 0.4; cursor: default; }
.pick.sheet .pick-box.edit { padding: 0 16px calc(16px + env(safe-area-inset-bottom)); }