:root {
  --bg: #070b1c;
  --glass: rgba(14, 20, 44, 0.58);
  --glass-strong: rgba(14, 19, 42, 0.86);
  --line: rgba(190, 205, 255, 0.16);
  --text: #eef1ff;
  --muted: #a8b1d6;
  --gold: #ffd98a;
  --gold-strong: #ffc65c;
  --danger: #ff9b9b;
  --radius: 18px;
  --font: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }

.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- 상단 정보 ---------- */
.hud {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 14px;
  padding: 12px 16px 12px; border-radius: var(--radius);
  display: grid; gap: 6px; min-width: 210px; z-index: 5;
}
.brand { font-weight: 700; letter-spacing: 0.02em; font-size: 17px; }
.brand { display: flex; align-items: center; gap: 7px; }
.brand-logo { width: 22px; height: 22px; border-radius: 6px; flex: none; }
.hud-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.hud-row.small { font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #7a8099; box-shadow: 0 0 0 3px rgba(122, 128, 153, 0.2); }
.dot.on { background: #8affc1; box-shadow: 0 0 10px #8affc1; }
.nick, .nick-input {
  justify-self: start; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.05);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; color: var(--text);
}
.nick:hover { border-color: rgba(255, 217, 138, 0.5); }
.nick-input { font: inherit; font-size: 13px; outline: none; border-color: var(--gold); width: 180px; }

/* ---------- 하늘 안내 ---------- */
.sky-hint {
  position: fixed; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; color: var(--muted); z-index: 4;
  animation: fadeDown 0.35s ease;
}
.sky-hint strong { color: var(--gold); margin-right: 2px; }
.sky-hint b { color: var(--text); }

/* ---------- 아래 버튼 ---------- */
.dock {
  position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  border-radius: 999px; padding: 6px; display: flex; gap: 6px; z-index: 5;
}
.dock button {
  border: 0; background: transparent; padding: 10px 18px; border-radius: 999px;
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.dock button:hover { background: rgba(255, 255, 255, 0.08); }
.dock .ico { color: var(--gold); font-size: 16px; }
.looking-up .dock #lookBtn { background: rgba(255, 217, 138, 0.14); color: var(--gold); }
/* 하늘을 볼 때만 나오는 버튼: 확대·축소, 별자리 켜고 끄기 */
.dock .sky-only { display: none; }
.looking-up .dock .sky-only { display: flex; }
.dock .toggle { font-size: 13px; }
.dock #scopeBtn .ico { font-size: 15px; }
.dock .toggle[aria-pressed="true"] { color: #b9c8ff; background: rgba(140, 165, 255, 0.14); }

.help {
  position: fixed; left: 16px; bottom: max(16px, env(safe-area-inset-bottom)); margin: 0;
  font-size: 12px; color: rgba(200, 210, 240, 0.55); z-index: 3; max-width: 260px; line-height: 1.5;
}
.help b { color: rgba(230, 235, 255, 0.8); font-weight: 600; }

/* ---------- 휴대폰 조이스틱 ---------- */
#joystick {
  position: fixed; left: 28px; bottom: calc(max(28px, env(safe-area-inset-bottom)) + 8px);
  width: 120px; height: 120px; border-radius: 50%; display: none; z-index: 4; touch-action: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--line);
}
#joystick .knob {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(255, 233, 190, 0.22); border: 1px solid rgba(255, 220, 150, 0.45); transition: transform 0.08s;
}
@media (pointer: coarse) {
  #joystick { display: block; }
  .help { display: none; }
}
/* 휴대폰 점프 버튼: 손가락 기기에서만, 아래 버튼 줄 바로 위 오른쪽 */
#jumpBtn {
  display: none; position: fixed; right: 14px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 74px); z-index: 4;
  width: 64px; height: 64px; border-radius: 50%; font-size: 14px; color: var(--gold); touch-action: none;
}
@media (pointer: coarse) { #jumpBtn { display: block; } }
.looking-up #jumpBtn, .telescope #jumpBtn { display: none !important; }
/* 도움말: 손가락 기기면 터치 설명, 마우스면 키보드 설명 */
.help-list.touch-only { display: none; }
@media (pointer: coarse) { .help-list.touch-only { display: grid; } .help-list.mouse-only { display: none; } }
.help-btn {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1;
}
.help-btn:hover { color: var(--text); border-color: rgba(255, 217, 138, 0.5); }
.help-sheet h2 { margin: 2px 0 12px; font-size: 19px; }
.help-list { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; margin: 0; font-size: 14px; line-height: 1.5; }
.help-list dt { color: var(--gold); font-weight: 700; white-space: nowrap; }
.help-list dd { margin: 0; color: #dfe4ff; }
.hud { padding-right: 44px; }

/* ---------- 알림 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 86px; transform: translate(-50%, 12px); opacity: 0;
  background: var(--glass-strong); border: 1px solid rgba(255, 217, 138, 0.35); color: var(--text);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; pointer-events: none; z-index: 30;
  transition: opacity 0.25s, transform 0.25s; max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 창 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background: rgba(3, 5, 14, 0.45); opacity: 0; transition: opacity 0.22s;
}
.modal.show { opacity: 1; }
.sheet {
  position: relative; width: min(460px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  border-radius: 24px; padding: 18px 20px 20px; background: var(--glass-strong);
  transform: translateY(10px) scale(0.98); transition: transform 0.22s;
}
.modal.show .sheet { transform: none; }
.close {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: rgba(255, 255, 255, 0.06); font-size: 20px; line-height: 1; z-index: 1;
}
.close:hover { background: rgba(255, 255, 255, 0.14); }
.preview {
  display: block; width: 100%; height: auto; aspect-ratio: 560 / 400; border-radius: 18px;
  background: radial-gradient(ellipse at 50% 45%, #1b2350 0%, #0a0f26 60%, #060914 100%);
}
.preview.small { aspect-ratio: 560 / 300; }
.detail-meta { padding: 14px 4px 2px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips span {
  font-size: 12px; padding: 3px 10px; border-radius: 999px; color: var(--accent, var(--gold));
  border: 1px solid color-mix(in srgb, var(--accent, var(--gold)) 45%, transparent);
  background: color-mix(in srgb, var(--accent, var(--gold)) 10%, transparent);
}
.detail-meta h2 { margin: 10px 0 6px; font-size: 22px; letter-spacing: -0.01em; }
.message { margin: 0; font-size: 15px; line-height: 1.65; color: #dfe4ff; white-space: pre-wrap; word-break: break-word; }
.message.empty { color: var(--muted); }
.story { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 217, 138, 0.06); border: 1px solid rgba(255, 217, 138, 0.18); }
.story h3 { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--gold); }
.story p { margin: 0; font-size: 14px; line-height: 1.7; color: #e6e9ff; white-space: pre-line; word-break: keep-all; }
.byline { margin: 14px 0 0; font-size: 13px; color: var(--muted); }
/* 별 공유하기: 별 정보 창·망원경 카드 아래 */
.share-btn {
  margin-top: 14px; padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  color: var(--gold); background: rgba(255, 217, 138, 0.08); border: 1px solid rgba(255, 217, 138, 0.35);
}
.share-btn:hover { background: rgba(255, 217, 138, 0.16); }
.share-btn.small { margin-top: 10px; padding: 6px 12px; font-size: 12px; pointer-events: auto; }

/* ---------- 별 만들기 ---------- */
.editor h2 { margin: 2px 0 12px; font-size: 19px; }
.editor fieldset { border: 0; margin: 12px 0 0; padding: 0; }
.editor legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.options { display: flex; flex-wrap: wrap; gap: 6px; }
.opt {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 5px 10px 5px 6px; font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.opt:hover { border-color: rgba(255, 255, 255, 0.3); }
.opt[aria-pressed="true"] { border-color: var(--gold); background: rgba(255, 217, 138, 0.12); color: #fff3d6; }
.swatch { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); margin-left: 4px; }
.size-dot { width: var(--s); height: var(--s); border-radius: 50%; margin: 0 2px 0 6px; background: radial-gradient(circle, #fff, var(--gold) 60%, transparent 72%); }
.field { display: grid; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--muted); }
.field span { display: flex; justify-content: space-between; }
.field em { font-style: normal; font-size: 12px; color: rgba(168, 177, 214, 0.7); }
.field input, .field textarea {
  font: inherit; font-size: 15px; color: var(--text); background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; outline: none; resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 217, 138, 0.15); }
.form-error { min-height: 18px; margin: 10px 0 0; font-size: 13px; color: var(--danger); }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.actions button { border-radius: 12px; padding: 11px 18px; font-weight: 600; font-size: 14px; border: 1px solid var(--line); }
.ghost { background: transparent; }
.primary {
  border: 0 !important; color: #2a1d05;
  background: linear-gradient(180deg, #ffe3a3, var(--gold-strong));
  box-shadow: 0 6px 22px rgba(255, 198, 92, 0.35);
}
.primary:disabled { opacity: 0.6; cursor: wait; }

/* 이름 붙이기: 작은 창 */
.sheet.editor { width: min(420px, 100%); }
.editor .preview.small { aspect-ratio: 560 / 260; }
.editor .chips { margin-top: 12px; }
.field em b { font-weight: 400; }
.detail-meta h2.unnamed { color: var(--muted); font-weight: 600; }

/* ---------- 천체망원경 ---------- */
:root { --scope-r: min(42vmin, 340px); }
.scope { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.scope-mask {
  position: absolute; inset: 0;
  /* 가운데 동그란 렌즈만 뚫리고 바깥은 검게 (가장자리는 살짝 흐리게) */
  background: radial-gradient(circle at 50% 50%, transparent 0, transparent calc(var(--scope-r) - 10px), rgba(2,3,8,0.97) calc(var(--scope-r) + 8px));
}
.scope-lens {
  position: absolute; left: 50%; top: 50%; width: calc(var(--scope-r) * 2); height: calc(var(--scope-r) * 2);
  transform: translate(-50%, -50%); border-radius: 50%;
  /* 경통 테두리: 두꺼운 검은 링 + 안쪽 그늘 + 렌즈의 은은한 반사광 */
  box-shadow: 0 0 0 16px #07080c, 0 0 0 18px rgba(255,255,255,0.05), inset 0 0 60px 18px rgba(0,0,0,0.85), inset 0 0 2px 1px rgba(160,180,255,0.18);
  background: radial-gradient(circle at 32% 28%, rgba(170,190,255,0.06), transparent 40%);
}
.scope-cross, .scope-cross::before, .scope-cross::after { position: absolute; }
.scope-cross { inset: 0; }
.scope-cross::before, .scope-cross::after { content: ''; background: rgba(210,225,255,0.35); }
.scope-cross::before { left: 50%; top: 6%; bottom: 6%; width: 1px; transform: translateX(-0.5px);
  -webkit-mask: linear-gradient(#000 0 46%, transparent 46% 54%, #000 54%); mask: linear-gradient(#000 0 46%, transparent 46% 54%, #000 54%); }
.scope-cross::after { top: 50%; left: 6%; right: 6%; height: 1px; transform: translateY(-0.5px);
  -webkit-mask: linear-gradient(90deg, #000 0 46%, transparent 46% 54%, #000 54%); mask: linear-gradient(90deg, #000 0 46%, transparent 46% 54%, #000 54%); }
.scope-hint b { color: rgba(230,235,255,0.85); font-weight: 600; }
.scope-hint { position: absolute; left: 50%; top: calc(50% - var(--scope-r) - 30px); transform: translateX(-50%); font-size: 12px; color: rgba(200,210,240,0.6); white-space: nowrap; }
/* 배율 버튼: 렌즈 오른쪽 위 (아래 버튼 줄과 겹치지 않게) */
.scope-power { position: absolute; right: max(16px, calc(50% - var(--scope-r) - 300px)); top: calc(50% - 130px); display: flex; gap: 6px; pointer-events: auto; }
.scope-power button { border: 1px solid var(--line); background: rgba(14,20,44,0.8); color: var(--muted); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; }
.scope-power button[aria-pressed="true"] { color: #fff3d6; border-color: var(--gold); background: rgba(255,217,138,0.14); }
.scope-info {
  /* 배율 버튼 바로 아래에서 시작해, 이야기가 길어져도 버튼을 가리지 않게 */
  position: absolute; right: max(16px, calc(50% - var(--scope-r) - 300px)); top: calc(50% - 86px);
  width: 270px; padding: 14px 16px; border-radius: 16px; pointer-events: none; transition: opacity 0.2s;
}
.scope-info.empty { opacity: 0.55; }
.scope-title { font-size: 17px; font-weight: 700; color: #fff3d6; }
.scope-sub { margin-top: 3px; font-size: 12px; color: var(--muted); }
.scope-story:empty { display: none; }
.scope-story { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.65; color: #cdd3f0; white-space: pre-line; word-break: keep-all; max-height: 42vh; overflow: auto; }
.scope-desc { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: #dfe4ff; white-space: pre-line; }
.telescope .hud, .telescope .sky-hint, .telescope .help { opacity: 0.25; }
@media (max-width: 760px) {
  :root { --scope-r: 44vmin; }
  .scope-info { right: 50%; transform: translateX(50%); top: auto; bottom: calc(50% - var(--scope-r) - 150px); width: min(320px, calc(100% - 32px)); }
  .scope-power { right: 50%; transform: translateX(50%); top: calc(50% - var(--scope-r) - 52px); }
  .scope-hint { display: none; }
}

@keyframes fadeDown { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 배경음악 버튼 (오른쪽 위) ---------- */
.top-actions {
  position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 5;
  display: flex; gap: 8px; align-items: center;
}
.letter-fab {
  width: 36px; height: 36px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  font-size: 17px; color: var(--gold); transition: opacity 0.2s;
}
.letter-fab:hover { border-color: rgba(255, 217, 138, 0.5); }
.letter-ico { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.letter-ico .seal { fill: currentColor; stroke: none; } /* 봉투를 붙인 작은 별 스티커 */
@media (max-width: 600px) { .letter-ico { width: 19px; height: 19px; } }
.telescope .letter-fab { opacity: 0.4; }
.music-fab {
  height: 36px; border-radius: 18px; padding: 0 14px; white-space: nowrap;
  font-size: 13px; color: var(--gold); transition: color 0.2s, opacity 0.2s;
}
.music-fab[aria-pressed="false"] { color: rgba(200, 210, 240, 0.45); }
.music-fab:hover { border-color: rgba(255, 217, 138, 0.5); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.telescope .music-fab { opacity: 0.4; }

/* ---------- 휴대폰 ---------- */
@media (max-width: 600px) {
  .help { display: none; }
  /* 위 정보: 작고 촘촘하게 */
  .hud { min-width: 0; top: max(10px, env(safe-area-inset-top)); left: 10px; padding: 8px 38px 8px 10px; gap: 3px; border-radius: 14px; }
  .brand { font-size: 14px; gap: 6px; }
  .brand-logo { width: 18px; height: 18px; border-radius: 5px; }
  .hud-row { font-size: 11px; gap: 6px; }
  .hud-row.small { font-size: 10px; }
  .nick { font-size: 11px; padding: 2px 9px; }
  .help-btn { top: 8px; right: 8px; width: 24px; height: 24px; font-size: 13px; }
  /* 아래 버튼 줄: 화면 폭 전체, 아이콘 위·글자 아래 */
  .top-actions { top: max(10px, env(safe-area-inset-top)); right: 10px; gap: 6px; }
  .music-fab { height: 32px; padding: 0 12px; font-size: 12px; }
  .letter-fab { width: 32px; height: 32px; font-size: 15px; }
  /* 아래 버튼 줄: 조이스틱 오른쪽 옆에 나란히 (위아래로 겹치지 않게) */
  .dock {
    left: 10px; right: 10px; transform: none; bottom: max(10px, env(safe-area-inset-bottom));
    justify-content: space-around; padding: 4px; border-radius: 20px; gap: 2px;
  }
  .dock button { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 7px 2px 6px; border-radius: 14px; font-size: 11px; white-space: nowrap; }
  .dock .ico { font-size: 18px; line-height: 1; }
  .looking-up .dock .sky-only { display: flex; }
  /* 하늘 안내: 위 정보 바로 아래에 작게 */
  .sky-hint { top: calc(max(10px, env(safe-area-inset-top)) + 112px); bottom: auto; left: 10px; right: 10px; transform: none; width: auto;
    padding: 8px 12px; border-radius: 12px; font-size: 11.5px; line-height: 1.5; text-align: center; animation: none; }
  /* 조이스틱: 아래 버튼 줄 위에 */
  #joystick { left: 12px; bottom: max(10px, env(safe-area-inset-bottom)); width: 112px; height: 112px; }
  #joystick .knob { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .toast { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); font-size: 13px; }
  /* 창: 아래에서 올라오는 시트처럼 */
  .modal { padding: 10px; align-items: end; }
  .sheet { padding: 16px; border-radius: 20px; max-height: calc(100dvh - 20px); }
  .detail-meta h2 { font-size: 19px; }
  .story p { font-size: 13px; }
  /* 망원경: 렌즈는 조금 작게, 정보 카드는 렌즈와 아래 버튼 줄 사이에(길면 그 안에서 스크롤) */
  :root { --scope-r: min(40vw, 30vh); }
  .scope-power { right: 50%; transform: translateX(50%); top: calc(50% - var(--scope-r) - 50px); }
  .scope-hint { display: none; }
  .scope-info {
    left: 10px; right: 10px; width: auto; transform: none;
    top: calc(50% + var(--scope-r) + 22px); bottom: auto; /* 내용만큼만 커지고, 길면 아래 버튼 줄 위에서 스크롤 */
    max-height: calc(50% - var(--scope-r) - 22px - max(10px, env(safe-area-inset-bottom)) - 80px);
    overflow: auto; padding: 10px 12px; border-radius: 14px;
  }
  .scope-title { font-size: 15px; }
  .scope-desc { margin-top: 6px; font-size: 12px; line-height: 1.5; }
  .scope-story { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .sheet, .toast { transition: none; }
  .sky-hint { animation: none; }
}

/* 휴대폰(터치): 아래 버튼 줄을 조이스틱 오른쪽 옆으로 비켜 준다. 위의 휴대폰 규칙보다 뒤에 둬야 적용된다 */
@media (max-width: 600px) and (pointer: coarse) {
  .dock { left: 134px; }
  .toast { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 130px); }
  /* 하늘을 보거나 망원경을 볼 때는 걸을 일이 없으니 조이스틱을 숨기고 버튼 줄을 다시 넓힌다 */
  .looking-up #joystick, .telescope #joystick { display: none; }
  .looking-up .dock, .telescope .dock { left: 10px; }
  .looking-up .toast, .telescope .toast { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 76px); }
}