:root {
  --sky: #cfeaf8;
  --ink: #1d2733;
  --muted: #4a5868;
  --paper: #ffffff;
  --line: #d9e2ec;
  --accent: #2f5d9e;
  --pill: rgba(24, 34, 46, .88);
  --safe: #2e9d5a;
  --warn: #e8742a;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--sky); color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
a { color: var(--accent); }

#stage { position: fixed; inset: 0; }
#poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s; touch-action: none; }
#gl.on { opacity: 1; }

/* 하늘 · 바닥 어디서나 읽히도록 안내 글은 어두운 반투명 바탕에 흰 글씨 */
.pill { background: var(--pill); color: #fff; border-radius: 999px; padding: 8px 16px; font-size: 14px; line-height: 1.45; font-weight: 600; }

.top { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px; pointer-events: none; }
.brand { margin: 0; background: var(--pill); color: #fff; font-weight: 800; font-size: 18px; padding: 6px 16px; border-radius: 999px; }
a.plain { pointer-events: auto; min-height: 44px; display: inline-flex; align-items: center; background: #fff; color: var(--ink); text-decoration: none;
  padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 700; box-shadow: 0 1px 6px rgba(0, 30, 60, .25); }
a.plain:focus-visible, button:focus-visible { outline: 3px solid #1a4fd8; outline-offset: 2px; }

.hint { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 760px;
  width: fit-content; text-align: center; transition: opacity .5s; pointer-events: none; }
.hint.gone { opacity: 0; }


.arrow { position: fixed; bottom: calc(72px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; white-space: nowrap; pointer-events: none; }
.arrow[hidden] { display: none; }
.arrow-ico { display: inline-block; width: 22px; height: 22px; line-height: 22px; text-align: center; font-size: 15px; color: #ffd97a; }


.tags { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.tags[hidden] { display: none; }
.tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; background: var(--pill); color: #fff; border-radius: 999px; padding: 6px 15px 6px 7px;
  font-size: 16px; font-weight: 800; white-space: nowrap; will-change: transform; border: 2px solid transparent; }
.tag i { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; flex: none; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 800; color: var(--ink); }
.tag.near { background: #fff; color: var(--ink); border-color: var(--ink); font-size: 17px; box-shadow: 0 2px 10px rgba(0, 30, 60, .35); }
.tag.seen { background: rgba(24, 34, 46, .6); }
.tag.seen span::after { content: " ✓"; color: #8fe3a8; }
.tag.near.seen span::after { color: #1f7a45; }
.tag.edge { border-color: #ffd97a; box-shadow: 0 0 0 3px rgba(255, 217, 122, .35); }
.sign-tag:not(.seen):not(.near) { animation: tagpulse 1.8s ease-in-out infinite; }
@keyframes tagpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); } 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .45); } }

.signs { position: fixed; left: 12px; top: calc(72px + env(safe-area-inset-top)); max-width: 240px; }
.signs-label { margin: 0 0 6px 4px; font-size: 13px; font-weight: 700; color: #fff; background: var(--pill); display: inline-block; padding: 2px 10px; border-radius: 999px; }
.signs ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.signs button { width: 100%; text-align: left; background: rgba(255, 255, 255, .95); color: var(--ink); border: 0; border-radius: 12px; min-height: 44px;
  padding: 0 12px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; gap: 8px; align-items: center; box-shadow: 0 1px 4px rgba(0, 30, 60, .2); }
.signs button i { width: 24px; height: 24px; border-radius: 50%; flex: none; border: 2px solid var(--ink); display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 800; color: var(--ink); }
.signs button .check { margin-left: auto; font-style: normal; color: #1f7a45; visibility: hidden; }
.signs button.seen .check { visibility: visible; }
.signs button[aria-current="true"] { box-shadow: 0 0 0 3px var(--accent); }

.presenter { position: fixed; z-index: 4; pointer-events: none; will-change: left, top, width, height; }
.presenter[hidden] { display: none; }
.presenter canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 8px 10px rgba(0, 30, 60, .3)); }

.joy { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; background: rgba(255, 255, 255, .3);
  border: 2px solid rgba(255, 255, 255, .85); pointer-events: none; }
.joy span { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .95); }
.joy[hidden] { display: none; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); padding: 24px; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px), (max-height: 500px) {
  .top { flex-wrap: wrap; }
  /* 폰 하단: 「표지판 n/5」 알약 한 줄 — 누르면 목록이 위로 펼쳐진다 */
  .signs { top: auto; bottom: calc(60px + env(safe-area-inset-bottom)); left: 12px; right: 12px; max-width: none; }
  .signs-label { cursor: pointer; min-height: 32px; line-height: 28px; padding: 2px 14px; font-size: 14px; }
  .signs-label::after { content: " ▴"; }
  .signs.open .signs-label::after { content: " ▾"; }
  .signs ol { display: none; position: absolute; left: 0; right: 0; bottom: 40px; }
  .signs.open ol { display: grid; }
  .signs button { white-space: nowrap; }
  .hint { bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 13px; }
      .arrow { bottom: calc(152px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #gl, .hint { transition: none; }
  .sign-tag { animation: none !important; }
}

.presenter::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -8px; height: 16px; background: radial-gradient(ellipse at center, rgba(40, 25, 10, .38), transparent 70%); }
@media (max-width: 720px), (max-height: 500px) {
  /* 이름표가 가장자리에서 겹치지 않게: 가까운 표지판만 글자를 보이고 나머지는 번호 동그라미만 */
  .sign-tag:not(.near) { padding: 5px; gap: 0; }
  .sign-tag:not(.near) span { display: none; }
}

/* 게시판 위를 기어가는 애벌레 — 눈에 띄지 않는 작은 크기로, 끝에서 방향을 바꿀 때 한 바퀴 돈다 */
.caterpillar { position: absolute; left: 0; top: -44px; height: 30px; width: auto; pointer-events: none; transform-origin: 50% 100%; will-change: transform; filter: drop-shadow(0 2px 2px rgba(50, 28, 8, .35)); }
@media (max-width: 720px), (max-height: 500px) { .caterpillar { height: 24px; top: -38px; } }
/* 가로로 돌린 폰(높이 500 이하): 카드는 오른쪽 옆 판, 목록은 아래 알약으로 접힌다 */
@media (max-height: 500px) and (min-width: 721px) {
  .panel { top: calc(56px + env(safe-area-inset-top)); bottom: auto; left: auto; right: 8px; width: min(52vw, 500px); height: calc(100dvh - 68px - env(safe-area-inset-top)); padding: 34px 10px 10px; }
  .panel-title { font-size: 15px; }
  .weather { right: 132px; width: 44px; padding: 0; justify-content: center; } .weather .wl { display: none; } .sound { right: 184px; }
}

/* 이스터에그 알림 */
.brand { pointer-events: auto; user-select: none; -webkit-user-select: none; cursor: default; }
.toast { position: fixed; top: calc(76px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 8; background: var(--pill); color: #fff; border-radius: 999px; padding: 10px 20px; font-size: 15px; font-weight: 700; pointer-events: none; }
.toast[hidden] { display: none; }

/* 캐롤 음악 끄고 켜는 단추 — 크리스마스 모드에서만 보인다 */
.sound { position: fixed; z-index: 6; right: 232px; top: calc(12px + env(safe-area-inset-top)); /* 「글로 보기」 왼쪽 — 카드와 겹치지 않는다 */ width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--ink);
  font-size: 20px; line-height: 1; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 30, 60, .25); }
.sound[hidden] { display: none; }
/* 날씨 단추 — 「글로 보기」 왼쪽. 서울 기본, 누르면 내 지역(위치 권한은 그때만) */
.weather { position: fixed; z-index: 6; right: 136px; top: calc(12px + env(safe-area-inset-top)); height: 44px; padding: 0 14px; border-radius: 22px; border: 0; background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 1px 6px rgba(0, 30, 60, .25); }
.weather .wi { font-size: 18px; line-height: 1; }
.weather[hidden] { display: none; }
@media (max-width: 520px) { .weather { right: 132px; width: 44px; padding: 0; justify-content: center; } .weather .wl { display: none; } .sound { right: 184px; } }

/* ── 에코 풍 나무 게시판(대표 11-02): 가까이 가면 뜨는 창. 바깥은 둥근 나무판 + 초록 리본 제목 + 새싹 + 도토리빛 단추,
   안은 홈 화면을 줄여 보여 주는 미니어처(이전 판 내용). 가로 480~620 · 세로는 7판보다 조금 더 길게. ── */
.panel { position: fixed; z-index: 5; right: 16px; top: calc(96px + env(safe-area-inset-top)); width: clamp(480px, 33vw, 620px); height: min(max(500px, calc((100dvh - 120px) * 0.84)), calc(100dvh - 112px)); /* 낮은 창에서는 화면 안에 들어오게 */ box-sizing: border-box; padding: 38px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: repeating-linear-gradient(95deg, rgba(150, 100, 50, .07) 0 2px, transparent 2px 9px), linear-gradient(180deg, #f8e2b8, #efcb92);
  border-radius: 28px; box-shadow: 0 12px 26px rgba(80, 50, 20, .32), inset 0 0 0 3px #d9ab68, inset 0 0 0 7px #fcefd3; }
.panel[hidden] { display: none; }
.panel-title { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); margin: 0; padding: 7px 20px; max-width: calc(100% - 90px); box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: #a9dc78; color: #24470f; font-size: 17px; font-weight: 800; border-radius: 999px; box-shadow: 0 3px 0 #6fa046, 0 6px 10px rgba(60, 90, 30, .25); } /* 어두운 초록 글씨 — 대비 약 6:1 */
.panel-bar[hidden] { display: none; }
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 0 4px; }
.bar-label { color: #6b4a2a; font-size: 14px; font-weight: 800; margin-right: 2px; }
.bar-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 3px solid #d9ab68; background: #fff7e6; color: #6b4a2a; font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; box-shadow: 0 2px 0 #d9ab68; }
.bar-btn:hover { background: #fff0d2; }
.bar-btn:active { transform: translateY(2px); box-shadow: none; }
.panel-go { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px;
  background: #ffa965; color: #4a2208; font-size: 15px; font-weight: 800; text-decoration: none; box-shadow: 0 3px 0 #d9783a, 0 6px 10px rgba(120, 60, 20, .2); white-space: nowrap; }
.panel-go:hover { background: #ffb87d; }
.panel-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9783a; }
.panel-close { position: absolute; top: -12px; right: -10px; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 3px solid #d9ab68; background: #fff; color: #8a5a2b; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 3px 8px rgba(80, 50, 20, .3); }
.panel-close:hover { background: #fff3dc; }
.panel-body { position: relative; flex: 1; min-height: 0; overflow: hidden; border-radius: 16px; background: #fffdf6; box-shadow: inset 0 0 0 3px #d9ab68; }
.mini-wrap { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mini-wrap iframe { width: 100%; height: 100%; border: 0; display: block; background: #fffdf6; }
.mini-loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: #6b4a2a; font-size: 15px; font-weight: 700; }
.mini-loading[hidden] { display: none; }
.mini-text { position: absolute; inset: 0; overflow-y: auto; padding: 16px 20px 22px; background: #fffdf6; color: var(--ink); line-height: 1.7; font-size: 15px; z-index: 2; }
.mini-text[hidden] { display: none; }
/* 새싹 — 에코 머리 위 잎처럼, 게시판 왼쪽 윗모서리에 */
.sprout { position: absolute; left: 22px; top: -22px; width: 26px; height: 22px; pointer-events: none; transform: scaleX(-1); /* 좌우를 뒤집어 둔다(대표 11-03 「나뭇잎 좌우를 바꿔」) */ }
.sprout::before, .sprout::after { content: ""; position: absolute; bottom: 0; width: 13px; height: 17px; background: #8fcf6a; border: 2px solid #5f9438; box-sizing: border-box; }
.sprout::before { left: 0; border-radius: 100% 0 100% 0; transform: rotate(-8deg); }
.sprout::after { right: 0; border-radius: 0 100% 0 100%; transform: rotate(8deg); background: #a8dc80; }
@media (max-width: 720px) {
  /* 폰: 화면 아래 절반을 채우는 게시판. 에코는 윗변 왼쪽에 서서 설명한다 */
  .panel { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); height: 54dvh; padding: 36px 12px 12px; }
  .panel-title { font-size: 16px; }
  .bar-label, #zoom-in, #zoom-out { display: none; } /* 폰은 원래 폭으로 고정 */
  .sprout { left: auto; right: 22px; }
}