html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

html.eee-option-1,
html.eee-option-1 body { background: #08150b; }
html.eee-option-2,
html.eee-option-2 body { background: #e8f5c8; }
html.eee-option-3,
html.eee-option-3 body { background: #081408; }

#c {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: block;
}

.fallback {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, #06110a, #0b2e16);
}
.eee-option-2 .fallback { background: linear-gradient(180deg, #e8f5c8, #cfe3a8); }
.eee-option-3 .fallback { background: linear-gradient(180deg, #04140a, #123a1c); }

/* 하단 정보 영역과 겹치지 않으며 밝은 배경 조각에서도 읽히는 공통 내비게이션. */
.nav {
  position: fixed;
  left: 12px;
  top: calc(8px + env(safe-area-inset-top));
  z-index: 40;
  font: 10px/1.4 -apple-system, system-ui, sans-serif;
  letter-spacing: .12em;
  color: #cfe8c0;
  text-decoration: none;
  opacity: .5;
  text-shadow: 0 0 5px rgba(4, 12, 6, .9), 0 1px 2px rgba(4, 12, 6, .9);
}

/* 하프톤에서는 반투명 종이색 판이 글자와 함께 흐려지지 않도록 opacity를 쓰지 않는다. */
.eee-option-2 .nav {
  color: rgba(11, 46, 22, .72);
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(232, 245, 200, .82);
  opacity: 1;
  text-shadow: none;
}