:root {
  --night: #05060b;
  --ink: #eceff7;
  --ink-1: #d9deea;
  --ink-2: #aeb5c8;
  --ink-3: #8a92a8;
  --lantern: #ffc488;
  --lantern-ink: #1d1307;
  --serif: "Gowun Batang", "AppleMyungjo", "Nanum Myeongjo", serif;
  --sans: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* 일본어: 고운 글꼴에 가나가 없어서 Zen 글꼴(R18 6번). 단어 사이 띄어쓰기가 없으니 keep-all을 풀고 일본어 줄바꿈 규칙을 쓴다 */
:root:lang(ja) {
  --serif: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif;
}
:lang(ja) body { word-break: normal; line-break: strict; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); }
body { overflow: hidden; font-family: var(--sans); word-break: keep-all; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--lantern); color: var(--lantern-ink); }
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: 6px; }

.hill { position: fixed; inset: 0; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#sky:active { cursor: grabbing; }

.top {
  position: absolute; inset: 0 0 auto 0;
  padding: max(14px, env(safe-area-inset-top)) 20px 0;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  pointer-events: none;
}
.place { display: flex; flex-direction: column; align-items: flex-start; }
.city {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0; padding: 6px 0 2px; border: 0; background: none; color: var(--ink);
  font: 700 1.375rem/1.2 var(--serif); letter-spacing: -0.01em; cursor: pointer;
}
.city svg { color: var(--ink-2); transform: translateY(1px); }
.basis { margin: 0; color: var(--ink-3); font-size: 0.75rem; line-height: 1.4; }
.clock { margin: 0; color: var(--ink-2); font-size: 0.875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.me-tag {
  position: absolute; left: 0; top: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font: 0.75rem/1 var(--sans); color: var(--ink);
  pointer-events: none;
}
.me-name { transition: opacity 1.2s ease; }
.me-tag.quiet .me-name { opacity: 0.5; }
.me-hint {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  white-space: nowrap; color: var(--ink-2); font-size: 0.75rem; line-height: 1.35;
  opacity: 0; transition: opacity 0.9s ease;
}
.me-tag.hinting .me-hint { opacity: 1; }
/* 아래 글과 부딪힐 때만 안내를 머리 위로(main.js가 --lift를 정한다). 낮·노을의 밝은 하늘 앞에서도 읽히게 어두운 바탕을 깐다 */
.me-tag.lift .me-hint {
  position: absolute; left: 50%; bottom: calc(100% + var(--lift, 48px));
  transform: translateX(-50%);
  padding: 8px 14px; border-radius: 14px;
  background: rgba(5, 6, 11, 0.62); color: var(--ink-1);
}

.intro {
  position: absolute; left: 50%; top: 30%; margin: 0;
  width: min(320px, calc(100% - 48px)); transform: translateX(-50%);
  text-align: center; pointer-events: none;
  font: 700 1.0625rem/1.5 var(--serif); color: var(--ink); text-wrap: balance;
  text-shadow: 0 0 14px rgba(5, 6, 11, 0.95), 0 0 4px rgba(5, 6, 11, 0.9);
  transition: opacity 1.2s ease;
  animation: intro-in 1.6s var(--ease-out);
}
.intro.gone { opacity: 0; }
.intro-sub { display: block; margin-top: 6px; font: 0.75rem/1.4 var(--sans); color: var(--ink-2); }
@keyframes intro-in { from { opacity: 0; } }

.foot {
  position: absolute; inset: auto 0 0 0;
  padding: 0 20px max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.event { margin: 0 0 4px; color: var(--ink-1); font: 700 1.125rem/1.3 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.event:empty { display: none; }
.rate { margin: 0; color: var(--ink-2); font-size: 0.875rem; line-height: 1.4; text-wrap: balance; }
.rate .seg { display: inline-block; }

.event, .rate { transition: opacity 0.5s ease; }
.foot.passing .event, .foot.passing .rate { opacity: 0.4; }
/* 곁눈 방향 글을 기기에서 처음 보여 줄 때만 물러나지 않는다(main.js showRate) */
.foot.passing .rate.lit { opacity: 1; color: var(--ink-1); }

.wish-slot { margin-top: 12px; min-height: 48px; display: grid; place-items: center; }
.waiting { margin: 0; color: var(--ink-3); font-size: 0.8125rem; line-height: 1.4; text-wrap: balance; }
.waiting:empty { display: none; }
.wish {
  min-width: 168px; min-height: 48px; padding: 0 24px; border-radius: 999px;
  border: 0; background: var(--lantern); color: var(--lantern-ink);
  font: 700 0.9375rem/1 var(--serif); cursor: pointer;
  animation: wish-in 0.45s var(--ease-out);
}
@keyframes wish-in { from { opacity: 0; transform: scale(0.96); } }

.wished {
  margin: 0; color: var(--ink); font: 700 0.9375rem/1.45 var(--serif); text-wrap: balance;
  animation: soft-in 0.6s var(--ease-out);
}
.keep {
  margin-top: 10px; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(236, 239, 247, 0.24); background: rgba(5, 6, 11, 0.35); color: var(--ink-1);
  font: 0.8125rem/1 var(--sans); cursor: pointer;
  animation: soft-in 0.6s var(--ease-out);
}
.keep:hover { border-color: rgba(236, 239, 247, 0.45); }
@keyframes soft-in { from { opacity: 0; transform: translateY(4px); } }

/* 도시 메뉴: 아래에서 올라오는 판 */
.sheet {
  --sheet: #0d1019;
  margin: auto auto 0; padding: 0; border: 0;
  width: 100%; max-width: 480px; max-height: min(86dvh, 640px);
  border-radius: 20px 20px 0 0; background: var(--sheet); color: var(--ink);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  overflow: auto; overscroll-behavior: contain;
  transition: transform 0.38s var(--ease-out), opacity 0.3s ease, overlay 0.38s allow-discrete, display 0.38s allow-discrete;
}
.sheet:not([open]) { transform: translateY(28px); opacity: 0; }
@starting-style { .sheet[open] { transform: translateY(28px); opacity: 0; } }
.sheet::backdrop { background: rgba(3, 4, 8, 0.55); transition: background 0.38s ease, overlay 0.38s allow-discrete, display 0.38s allow-discrete; }
@starting-style { .sheet[open]::backdrop { background: rgba(3, 4, 8, 0); } }
.sheet:focus-visible { outline: none; }
.sheet-body { padding: 18px 20px max(20px, env(safe-area-inset-bottom)); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sheet-head h2 { margin: 0; font: 700 1.125rem/1.3 var(--serif); letter-spacing: -0.01em; }
.sheet-head form { margin: 0; }
.sheet-close {
  width: 44px; height: 44px; margin-right: -10px; border: 0; border-radius: 999px;
  display: grid; place-items: center; background: none; color: var(--ink-2); cursor: pointer;
}
.sheet-close:hover { color: var(--ink); }
/* 도시 56곳: 지역 제목으로 묶고, 목록만 따로 굴린다(아래 저장·소개 줄은 늘 보이게). 아래 끝을 흐리게 해 더 있다는 걸 알린다 */
.city-groups {
  max-height: min(46dvh, 360px); overflow: auto; overscroll-behavior: contain;
  margin: 0 -4px; padding: 0 4px 14px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.city-group + .city-group { margin-top: 16px; }
.city-group h3 { margin: 0 2px 8px; color: var(--ink-3); font: 0.75rem/1.3 var(--sans); letter-spacing: 0.02em; }
/* 칸 너비: 한국어 이름은 대개 두세 글자라 보통 폰에서 한 줄에 넷, 영어는 셋.
   일본어 가타카나 이름(ブエノスアイレス 8자)은 줄이 바뀌면 읽기 어려워서 글자를 조금 줄이고 좁은 폰에서는 둘 */
.cities { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); gap: 8px; }
:lang(en) .cities { grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); }
:lang(ja) .cities { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); }
.city-pick {
  width: 100%; min-height: 46px; padding: 6px 4px; border: 1px solid transparent; border-radius: 12px;
  background: rgba(236, 239, 247, 0.05); color: var(--ink-1);
  font: 0.9375rem/1.2 var(--sans); text-wrap: balance; cursor: pointer;
  word-break: normal; overflow-wrap: anywhere; /* 긴 이름(부에노스아이레스)은 버튼 안에서 두 줄로 */
}
:lang(ja) .city-pick { font-size: 0.875rem; }
.city-pick:hover { background: rgba(236, 239, 247, 0.09); }
.city-pick[aria-current="true"] { border-color: rgba(214, 230, 255, 0.5); background: rgba(214, 230, 255, 0.1); color: var(--ink); }
.sheet-note { margin: 12px 2px 0; color: var(--ink-3); font-size: 0.75rem; line-height: 1.5; text-wrap: pretty; }
.sheet-rows { margin-top: 16px; border-top: 1px solid rgba(236, 239, 247, 0.08); }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 2px;
  border: 0; border-bottom: 1px solid rgba(236, 239, 247, 0.08); background: none;
  color: var(--ink-1); font: 0.9375rem/1.2 var(--sans); text-align: left; text-decoration: none; cursor: pointer;
}
.row svg { flex: none; color: var(--ink-2); }
.row:hover { color: var(--ink); }
.row[hidden] { display: none; }
/* 언어 고르기: 한 줄로, 지금 언어만 밝게 */
.langs { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 14px; }
.langs a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
  color: var(--ink-3); font: 0.8125rem/1 var(--sans); text-decoration: none;
}
.langs a:lang(ko) { font-family: "Gowun Dodum", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
.langs a:lang(ja) { font-family: "Zen Maru Gothic", "Hiragino Sans", "Yu Gothic", sans-serif; }
.langs a:hover { color: var(--ink-1); }
.langs a[aria-current="true"] { color: var(--ink); background: rgba(236, 239, 247, 0.07); }

/* 공유 미리보기 그림(og.png)을 만들 때만 쓰는 화면 */
.og-title {
  position: absolute; left: 0; right: 0; top: 18%; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; pointer-events: none;
  text-shadow: 0 0 24px rgba(5, 6, 11, 0.9);
}
#og-name { font: 700 4.5rem/1 var(--serif); letter-spacing: -0.02em; }
.og-sub { font: 1.5rem/1.3 var(--sans); color: var(--ink-1); }
.og .top, .og .foot, .og .me-tag { display: none; }

.noscript { position: absolute; inset: 40% 24px auto; margin: 0; text-align: center; color: var(--ink-1); }

/* 하늘이 뜨지 않을 때 안내(boot.js). 하늘이 뜨면(main.js가 data-sky="on") 바로 거둔다 */
.boot-note {
  position: absolute; inset: 36% 24px auto; display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center; color: var(--ink-1); animation: soft-in 0.6s var(--ease-out);
}
[data-sky="on"] .boot-note { display: none; }
.boot-note p { margin: 0; max-width: 22rem; font-size: 0.9375rem; line-height: 1.6; text-wrap: balance; }
.boot-retry {
  min-height: 44px; padding: 0 22px; border: 1px solid rgba(236, 239, 247, 0.25); border-radius: 999px;
  background: none; color: var(--ink); font: 0.9375rem/1 var(--sans); cursor: pointer;
}
.boot-retry:hover { border-color: rgba(236, 239, 247, 0.45); }

/* 앱 안 브라우저에서 저장: 그림을 띄워 길게 눌러 저장하게 한다(main.js showKeep) */
.keep-img {
  display: block; max-width: 100%; max-height: 60vh; max-height: min(60dvh, 560px); margin: 0 auto;
  border-radius: 12px; box-shadow: 0 0 0 1px rgba(236, 239, 247, 0.08);
  -webkit-touch-callout: default; -webkit-user-select: auto; user-select: auto;
}

@media (prefers-reduced-motion: reduce) {
  .wish, .intro, .wished, .keep { animation: none; }
  .me-name, .me-hint, .intro, .event, .rate, .sheet, .sheet::backdrop { transition: none; }
}