/* 고요 — 장면 위의 작은 창들(방 고르기·함께 있는 사람·설정·장면 담기·처음 도움말)
   식물 카드(.float-card)와 같은 유리·칩·알약 단추 말씨를 씁니다. 공통 부품(.chip·.pill-action·.float-card-close·.float-card-grip)은
   style.css에 있고, 여기에는 창마다의 모습만 블록으로 모읍니다. 유리 색은 data-sky(day · dusk · night)를 따르며 main.js의 paintSky가 넣습니다. */

/* ---- 공통: 떠 있는 작은 창(.pop-card) ----
   .pop-anchored는 위쪽 HUD 단추 바로 아래로 내려오는 팝오버입니다(자리 --pop-top·--pop-left·--pop-right는 main.js의 placePop이 잽니다).
   .pop-sheet는 좁은 화면(560px 이하)에서 아래에 붙는 바텀시트가 됩니다. */
.pop-card, .help-card {
  --card-glass: rgba(14, 22, 20, 0.93);   /* 블러가 없는 환경의 기본값 */
  --card-line: rgba(255, 255, 255, 0.15);
  --card-hi: rgba(255, 255, 255, 0.1);
  --card-chip: rgba(255, 255, 255, 0.08);
  --card-row: rgba(255, 255, 255, 0.055);  /* 묶음 행의 바탕 */
  --card-sep: rgba(255, 255, 255, 0.07);   /* 묶음 안 구분선 */
}
.pop-card[data-sky="night"], .help[data-sky="night"] .help-card { --card-glass: rgba(10, 14, 22, 0.94); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pop-card, .help-card { --card-glass: rgba(22, 32, 28, 0.64); backdrop-filter: blur(22px) saturate(1.35); -webkit-backdrop-filter: blur(22px) saturate(1.35); }
  .pop-card[data-sky="dusk"], .help[data-sky="dusk"] .help-card { --card-glass: rgba(42, 28, 32, 0.6); }
  .pop-card[data-sky="night"], .help[data-sky="night"] .help-card { --card-glass: rgba(10, 15, 26, 0.68); }
}
@media (prefers-reduced-transparency: reduce) {
  .pop-card, .pop-card[data-sky], .help-card, .help[data-sky] .help-card { --card-glass: rgba(14, 20, 20, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.pop-card {
  box-sizing: border-box; width: min(320px, calc(100% - var(--gutter-l) - var(--gutter-r))); max-width: none;
  max-height: calc(100dvh - 32px - var(--safe-t) - var(--safe-b));
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0; /* 안쪽 여백은 자식이 가집니다(대화상자 자신을 누르면 닫히므로 빈 여백을 두지 않습니다) */
  border: 1px solid var(--card-line); border-radius: 22px;
  background: var(--card-glass); color: var(--ink); font-family: var(--font-ui);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--card-hi);
}
.pop-card:not([open]) { display: none; }
.pop-card::backdrop { background: rgba(4, 8, 8, 0.14); }
.pop-card[open] { animation: pop-in 0.26s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
.pop-anchored {
  position: fixed; margin: 0; bottom: auto;
  top: var(--pop-top, calc(56px + var(--safe-t))); left: var(--pop-left, auto); right: auto;
  max-height: calc(100dvh - var(--pop-top, 56px) - 16px - var(--safe-b));
  transform-origin: var(--pop-origin, 50%) 0; /* 누른 단추 쪽에서 자라 나옵니다 */
}
.pop-anchored[data-align="right"] { left: auto; right: var(--pop-right, var(--gutter-r)); }
.pop-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 12px 8px 18px; }
.pop-head h2 { flex: 1; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 17px; line-height: 1.3; }
.pop-head .float-card-close { position: relative; top: auto; right: auto; width: 30px; height: 30px; flex: none; }
.pop-icon-btn {
  position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--card-line); border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: var(--ink); cursor: pointer;
  transition: background 0.2s;
}
.pop-icon-btn:hover { background: rgba(255, 255, 255, 0.18); }
.pop-icon-btn::after { content: ""; position: absolute; inset: -7px; } /* 누르는 자리를 44px로 넓힙니다 */
.pop-icon-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pop-icon-btn[data-busy] svg { animation: pop-spin 0.8s linear infinite; }
@keyframes pop-spin { to { transform: rotate(360deg); } }
.pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 10px 10px; }
.pop-note { flex: none; margin: 0; padding: 10px 18px 14px; border-top: 1px solid var(--card-sep); font-size: 12px; line-height: 1.55; color: var(--ink-dim); word-break: keep-all; }
.pop-note:empty { display: none; }
.pop-card .chip { font-variant-numeric: tabular-nums; }
.pop-card .pill-action[hidden] { display: none; } /* .pill-action의 inline-flex가 hidden을 덮지 않게 */

/* 좁은 화면: 설정과 장면 담기는 아래에 붙는 바텀시트(위쪽 모서리만 둥글게, 손잡이 막대) */
@media (max-width: 560px) {
  .pop-card.pop-sheet, #dlg-settings.pop-sheet, #dlg-share.pop-sheet { /* 창별 폭(#id)보다 앞서도록 */
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%;
    max-height: calc(100dvh - 48px - var(--safe-t));
    border-width: 1px 0 0; border-radius: 26px 26px 0 0; transform-origin: 50% 100%;
  }
  .pop-card.pop-sheet[open] { animation-name: float-sheet-in; } /* style.css의 바텀시트 떠오름 */
  .pop-sheet .pop-head { padding-top: 22px; }
  .pop-sheet .pop-body { padding-bottom: calc(14px + var(--safe-b)); }
}

/* ---- 방 고르기(#dlg-rooms): 방 이름 알약 아래로 내려오는 작은 메뉴 ---- */
#dlg-rooms { width: min(300px, calc(100% - var(--gutter-l) - var(--gutter-r))); }
.pop-group-title { margin: 6px 10px 6px; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; color: var(--ink-dim); }
.pop-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pop-room {
  appearance: none; width: 100%; box-sizing: border-box; min-height: 54px; padding: 8px 10px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 12px; row-gap: 6px;
  border: 1px solid transparent; border-radius: 14px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.pop-room:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); }
.pop-room:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.pop-room:disabled { cursor: default; }
.pop-room[data-full] { color: var(--ink-dim); }
.pop-room[aria-current] { border-color: rgba(233, 201, 143, 0.32); background: rgba(233, 201, 143, 0.09); }
.pop-room-mark {
  grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--card-line); background: var(--card-chip);
}
.pop-room-mark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(239, 233, 220, 0.4); }
.pop-room[data-live] .pop-room-mark::before { background: #a9cf8f; box-shadow: 0 0 8px rgba(169, 207, 143, 0.8); }
.pop-room[aria-current] .pop-room-mark::before { background: var(--accent); box-shadow: 0 0 10px rgba(233, 201, 143, 0.9); }
.pop-room-name { font-family: var(--font-display); font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
.pop-room .chip { grid-row: span 2; }
.pop-room[aria-current] .chip { border-color: rgba(233, 201, 143, 0.5); color: var(--accent); }
.pop-room-bar { grid-column: 2; height: 3px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.1); }
.pop-room-bar i { display: block; width: var(--fill, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7fbf6a, #c4e39a); }
.pop-room[data-full] .pop-room-bar i { background: linear-gradient(90deg, #b08a5c, #d0ad84); }

/* ---- 함께 있는 사람(#dlg-people): 사람 아이콘 아래 팝오버. 스카프 색 아바타와 상태 칩 ---- */
#dlg-people { width: min(300px, calc(100% - var(--gutter-l) - var(--gutter-r))); }
.pop-people { list-style: none; margin: 0; padding: 0; }
.pop-person { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 8px; border-radius: 12px; }
.pop-person + .pop-person { box-shadow: inset 0 1px 0 var(--card-sep); }
.pop-avatar { /* 길손의 몸 색 위에 스카프 띠를 두른 작은 얼굴 */
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(180deg, var(--av-body) 0 56%, var(--av-scarf) 56% 74%, color-mix(in srgb, var(--av-body) 78%, #000) 74%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.pop-person.me .pop-avatar { box-shadow: 0 0 0 2px rgba(10, 14, 14, 0.6), 0 0 0 3.5px var(--accent), 0 2px 6px rgba(0, 0, 0, 0.3); }
.pop-person-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.pop-me-tag { margin-left: 6px; font-size: 11px; color: var(--accent); }
.chip-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 233, 220, 0.45); }
.chip-state[data-state="sit"]::before { background: var(--accent); box-shadow: 0 0 8px rgba(233, 201, 143, 0.8); }
.chip-state[data-state="work"]::before { background: #a9cf8f; box-shadow: 0 0 8px rgba(169, 207, 143, 0.7); }
.chip-state[data-state="walk"] { color: var(--ink-dim); }

/* ---- 설정(#dlg-settings): 정돈된 묶음 행. 데스크톱은 도구 알약 아래 팝오버, 좁은 화면은 바텀시트 ---- */
#dlg-settings { width: min(360px, calc(100% - var(--gutter-l) - var(--gutter-r))); }
.set-title { margin: 14px 10px 6px; font-size: 11.5px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink-dim); }
.set-group { margin: 0; border: 1px solid var(--card-sep); border-radius: 16px; background: var(--card-row); overflow: hidden; }
.set-group + .set-group { margin-top: 10px; }
.set-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; box-sizing: border-box;
  margin: 0; padding: 6px 14px; font-size: 14px; color: var(--ink);
}
.set-group > * + * { border-top: 1px solid var(--card-sep); }
.set-link { appearance: none; width: 100%; border: 0; background: none; font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background 0.2s; }
.set-link:hover { background: rgba(255, 255, 255, 0.06); }
.set-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.set-chev { color: var(--ink-dim); font-size: 18px; line-height: 1; }
.set-note { margin: 0; padding: 12px 14px; font-size: 12.5px; line-height: 1.6; color: var(--ink-dim); word-break: keep-all; }
.set-stats { display: grid; grid-template-columns: 1fr 1fr; }
.set-stat { margin: 0; padding: 10px 14px 11px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-stat + .set-stat { border-left: 1px solid var(--card-sep); }
.set-stat span { font-size: 11.5px; color: var(--ink-dim); }
.set-stat b { font-family: var(--font-display); font-weight: 400; font-size: 19px; line-height: 1.25; }
.set-foot { margin: 14px 10px 2px; font-size: 11px; line-height: 1.55; color: var(--ink-dim); word-break: keep-all; }
.set-foot + .set-foot { margin-top: 4px; }
/* 언어: 작은 둘 칸 고르기 */
#dlg-settings .lang-switch { gap: 0; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, 0.24); }
#dlg-settings .lang-switch button { min-width: 44px; min-height: 28px; text-decoration: none; transition: background 0.2s, color 0.2s; }
#dlg-settings .lang-switch button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.16); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
/* 토글: 둥근 스위치(체크 상자를 그대로 씁니다) */
.switch {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; width: 46px; height: 28px; margin: 0;
  border-radius: 999px; background: rgba(255, 255, 255, 0.16); cursor: pointer; transition: background 0.25s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #f5f1e8; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.3, 1);
}
.switch:checked { background: linear-gradient(180deg, #8fc77a, #69a557); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 볼륨: 얇은 트랙. 채운 길이(--fill)는 main.js의 paintRange가 넣습니다 */
.slim-range { -webkit-appearance: none; appearance: none; --fill: 50%; flex: 0 1 150px; min-width: 96px; height: 24px; margin: 0; background: transparent; cursor: pointer; }
.slim-range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill), rgba(255, 255, 255, 0.16) var(--fill)); }
.slim-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%;
  background: #f5f1e8; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.slim-range::-moz-range-track { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); }
.slim-range::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--accent); }
.slim-range::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: #f5f1e8; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); }
.slim-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---- 장면 담기(#dlg-share): 담은 장면이 주인공인 카드 ---- */
#dlg-share { width: min(440px, calc(100% - var(--gutter-l) - var(--gutter-r))); }
.share-shot { position: relative; flex: none; margin: 10px 10px 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #1a2630; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); }
.share-shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); pointer-events: none; }
.share-preview { display: block; width: 100%; height: 100%; object-fit: cover; }
.share-tag { position: absolute; left: 10px; bottom: 10px; background: rgba(10, 14, 14, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.share-tag:empty { display: none; }
.share-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#dlg-share[open] .share-flash { animation: share-flash 0.7s ease-out both; } /* 셔터를 누른 듯 한 번 번쩍입니다 */
@keyframes share-flash { from { opacity: 0.7; } to { opacity: 0; } }
#dlg-share > .float-card-close { top: 20px; right: 20px; background: rgba(10, 14, 14, 0.42); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.share-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px 18px; }
.share-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; }
.share-note { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); word-break: keep-all; }
.share-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.share-acts .pill-action { flex: 1 1 auto; min-height: 44px; padding: 0 16px; font-size: 14px; text-decoration: none; }
.share-acts .pill-action svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-link {
  display: block; width: 100%; box-sizing: border-box; height: 38px; margin-top: 10px; padding: 0 14px;
  border: 1px solid var(--card-line); border-radius: 999px; background: rgba(0, 0, 0, 0.22);
  color: var(--ink-dim); font: inherit; font-size: 12.5px; text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .pop-sheet .share-shot { margin-top: 22px; }
  #dlg-share > .float-card-close { top: 32px; }
  .share-body { padding-bottom: calc(16px + var(--safe-b)); }
}

/* ---- 처음 도움말(#help): 조작법을 아이콘 타일 격자로, 누르면 아래에 자세한 설명 ---- */
.help {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(4, 8, 8, 0.34); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  --help-gap: 16px; /* 카드 위아래로 남기는 최소 여백 */
  padding-block: calc(var(--help-gap) + var(--safe-t)) calc(var(--help-gap) + var(--safe-b));
  padding-inline: var(--gutter-l) var(--gutter-r);
}
.help-card {
  box-sizing: border-box; width: 100%; max-width: 660px;
  max-height: calc(100dvh - 2 * var(--help-gap) - var(--safe-t) - var(--safe-b));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 22px 22px 18px; border: 1px solid var(--card-line); border-radius: 26px;
  background: var(--card-glass); color: var(--ink);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.18), inset 0 1px 0 var(--card-hi);
}
.help:not([hidden]) .help-card { animation: float-card-in 0.26s cubic-bezier(0.2, 0.8, 0.25, 1) both; }
.help-head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.3; text-wrap: balance; }
.help-head p { margin: 4px 0 0; font-size: 14px; color: var(--ink-dim); }
.help-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.help-tile {
  --tint: 239, 233, 220;
  appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; min-height: 96px; box-sizing: border-box;
  padding: 11px 12px 12px; border: 1px solid var(--card-sep); border-radius: 16px; background: var(--card-row);
  color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.help-tile:hover { background: rgba(255, 255, 255, 0.1); }
.help-tile:active { transform: scale(0.98); }
.help-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.help-tile[aria-expanded="true"] { border-color: rgba(var(--tint), 0.55); background: rgba(var(--tint), 0.12); }
.help-tile[data-tone="sky"] { --tint: 143, 208, 240; }
.help-tile[data-tone="amber"] { --tint: 233, 201, 143; }
.help-tile[data-tone="rose"] { --tint: 244, 163, 184; }
.help-tile[data-tone="wood"] { --tint: 214, 170, 120; }
.help-tile[data-tone="leaf"] { --tint: 169, 207, 143; }
.help-tile[data-tone="flame"] { --tint: 255, 190, 110; }
.help-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: rgba(var(--tint), 0.16); color: rgb(var(--tint)); }
.help-ico .icon, .help-ico svg { width: 18px; height: 18px; }
.help-ico svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-tile-t { font-size: 14px; line-height: 1.25; word-break: keep-all; }
.help-tile-s { font-size: 11.5px; line-height: 1.4; color: var(--ink-dim); word-break: keep-all; }
.help-tile.wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 0; }
.help-tile.wide .help-tile-t { flex: none; }
.help-detail { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, 0.2); min-height: 3.2em; font-size: 13px; line-height: 1.6; }
.help-detail p { margin: 0; word-break: keep-all; }
.help-detail-hint { color: var(--ink-dim); }
.help-foot { flex: none; display: flex; justify-content: flex-end; margin-top: 14px; }
.help-foot .pill-action { flex: 0 0 auto; min-width: 150px; }
html[lang="en"] .help-detail { line-height: 1.5; }
@media (max-width: 560px) {
  .help { --help-gap: 20px; } /* 바깥 배경을 눌러 닫을 수 있게 남깁니다 */
  .help-card { padding: 18px 14px 14px; border-radius: 24px; }
  .help-head h2 { font-size: 18px; }
  .help-head p { font-size: 13px; }
  .help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
  .help-tile { align-items: center; gap: 6px; min-height: 74px; padding: 10px 4px 9px; text-align: center; }
  .help-tile:not(.wide) .help-tile-s { display: none; } /* 좁은 화면은 이름만, 자세한 건 눌러서 */
  .help-tile-t { font-size: 12.5px; }
  .help-tile.wide { padding: 9px 12px; text-align: left; }
  .help-detail { font-size: 12.5px; }
  .help-foot .pill-action { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .pop-card[open], .help:not([hidden]) .help-card, #dlg-share[open] .share-flash, .pop-icon-btn[data-busy] svg { animation: none; }
  .switch, .switch::after, .help-tile { transition: none; }
}