/* index.html — 첫 화면(로그인·가입)
 * 🧹 2026-09-27 `R-4` — index.html 안에서 꺼냈다.
 * ⚠ **이 파일은 `css/` 가 아니라 index.html 옆에 둔다** — `--lg-*: url("ui/…")` 처럼 CSS 변수 안에
 *   상대 경로가 있다. 변수 속 url 을 어느 파일 기준으로 푸는지는 브라우저마다 흔들리므로,
 *   문서와 같은 폴더에 두어 **어느 기준으로 풀어도 같은 주소**가 되게 한다 */

:root {
  /* ① 페이지 — 지금은 게임 화면 우측 창틀 것을 빌려 쓴다 */
  --lg-page: url("ui/frame-login-page.png"); /* 36×36 */
  --lg-page-slice: 12;
  --lg-page-tile: url("ui/login-page.png"); /* 32×32 */
  /* ② 창 — 지금은 팝업 창 것을 빌려 쓴다 */
  --lg-win: url("ui/frame-login.png"); /* 36×36 */
  --lg-win-slice: 12;
  --lg-win-tile: url("ui/login-pop.png"); /* 32×32 */
  /* ③ 타이틀 — 도트를 정수배로 키운다(1 · 2 · 3 …) */
  --lg-title-scale: 2;
  /* ④ 게임 화면과 같은 그림 */
  --lg-btn: url("ui/btn.png"); /* 18×18 · 6 */
  --lg-btn-hot: url("ui/btn-hot.png");
  --lg-btn-down: url("ui/btn-down.png");
  --lg-btn-off: url("ui/btn-off.png");
  --lg-sunken: url("ui/sunken.png"); /* 18×18 · 6 */

  /* 글자색 — 🔴 2026-09-16 yomdo: *새 그림 위에서 글자가 안 어울리고 안 보인다.*
     창 바탕이 `login-pop.png` #b38554 — **게임 우측 창틀(`#panel`)과 같은 갈색**이 됐으므로
     `theme.css` 의 `#panel` 잉크를 그대로 옮겨 왔다(그림을 바꾸면 여기도 다시 본다) */
  --ink-win: #352515; /* #panel --ink */
  --ink-win-dim: #4f3620; /* #panel --ink-dim */
  --ink-win-bright: #070503; /* #panel --ink-bright */
  --ink-win-bad: #441c13; /* #panel --bad */
  --ink-input: #bfe4f5; /* #chat-in --ink-bright — sunken.png 가운데는 여전히 짙은 남색 */
  --ink-btn: #2c2c2c; /* .frow button --ink-bright */
  --ink-btn-off: #68482a; /* #panel --ink-faint — btn-off.png 는 가운데가 비어 창 갈색이 비친다 */
  /* 페이지 바탕 위의 글자 — 타이틀 대체 글자 · 저작권
     🔴 2026-09-16 바탕이 미색에서 **바다(login-page.png #5eb3ce)** 로 바뀌었다 — 갈색이 묻혔다.
     ⟹ 밝은 물빛 글자 + **번지지 않는 1px 그림자**(도트다움) */
  --ink-page: #f4fbff;
  --ink-page-dim: #e2f3fa;
  --ink-page-shadow: #1d5569;
  --bg-outside: #000000; /* 좌우 여백 — `theme.css` --bg-outside 와 같다 */

  /* 🔴 2026-09-16 yomdo: *배경이 화면에 꽉 차지 말고 게임 화면처럼 좁게, 좌우는 검은 여백.*
     게임 화면(`sea.html #stage`) 폭 = 지도 min(100vh, 66vw) (`sea.js sizeWrap`)
       + 우측 창틀 400px (`--panel-w`) + 경계선 1px + 좌우 기둥 6px×2 (`skin.css`)
     ⚠ 셋 중 하나가 바뀌면 여기도 같이 바꾼다 */
  --lg-col-w: min(100vw, calc(min(100vh, 66vw) + 413px));

  /* ══ 효과 (2026-09-16 yomdo — *너무 심심하다*) ══════════════════════════════
     🔑 **도트를 해치지 않는다** — 흐린 블러 대신 **딱 떨어지는 그림자**, 매끈한 흐름 대신
        **한 칸씩 끊기는 움직임**(`steps`). 움직이는 것은 셋뿐: 물결 · 금빛 · 지나가는 배.
     ⚠ `prefers-reduced-motion` 이면 **움직임을 전부 끈다**(맨 아래) */
  --fx-tile: 110px; /* login-page.png 한 변 — 물결이 한 바퀴 돌 거리. 그림 크기가 바뀌면 같이 */
  --fx-drift: 24s; /* 물결이 한 칸(`--fx-tile`) 흐르는 시간 */
  --fx-glint: 7s; /* 금빛이 타이틀을 한 번 훑는 주기 */
  --fx-sail: 70s; /* 배가 기둥을 한 번 건너는 시간 */
  --fx-shadow: #00000059; /* 창 그림자 — 검정 35% */
  --fx-focus: #ffd400; /* 입력칸 포커스 — title.png 의 금색 */
  /* 빛 — 세게/약하게는 알파(끝 두 자리)만 */
  --fx-sun-wash: #fff4c04d; /* 왼쪽 위 밝음 */
  --fx-deep: #00223333; /* 오른쪽 아래 깊음 — 수심 층(⑪)이 생겨 절반으로 물렸다 */
  --fx-ray: #fffbe047; /* 햇살 줄기 */
  --fx-ray-faint: #fffbe026;
}

/* 스크롤바 — `sea.html` 과 같은 한 벌(2026-08-19) */
* {
  scrollbar-width: thin;
  scrollbar-color: #1e4257 transparent;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #1e4257;
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font:
    15px/1.7 system-ui,
    -apple-system,
    "Malgun Gothic",
    sans-serif;
  background: var(--bg-outside);
  color: var(--ink-win);
}

/* ① 페이지 — **화면에 붙박인 한 장**이다. 내용이 길어 스크롤돼도 액자는 제자리 */
body::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--lg-col-w);
  transform: translateX(-50%);
  z-index: -1;
  box-sizing: border-box;
  border: calc(var(--lg-page-slice) * 1px) solid transparent;
  border-image: var(--lg-page) var(--lg-page-slice) repeat;
  background: var(--lg-page-tile) repeat;
  image-rendering: pixelated;
  /* ② 물결 — 1px 씩 끊어 흐른다(`steps` 수 = 타일 폭) */
  animation: fx-drift var(--fx-drift) steps(110) infinite;
}
@keyframes fx-drift {
  to {
    background-position: calc(-1 * var(--fx-tile)) 0;
  }
}

/* ── 효과 층 — 바다 위 · 글자 아래. 액자 안쪽에만 깐다(액자는 어둡히지 않는다) ── */
.fx {
  position: fixed;
  top: calc(var(--lg-page-slice) * 1px);
  bottom: calc(var(--lg-page-slice) * 1px);
  left: 50%;
  width: calc(var(--lg-col-w) - var(--lg-page-slice) * 2px);
  transform: translateX(-50%);
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* ① 빛 — **왼쪽 위에서 비스듬히 드는 햇살**
   🔴 2026-09-16 yomdo — 한가운데 고리는 *빛이 아니라 소용돌이* 로 읽혔다(캐러벨이 빨려 들어간다).
      ⟹ 빛은 **방향이 있어야** 빛으로 읽힌다. 동심원은 방향이 없어 물의 움직임이 된다.
   🔑 두 겹 — ⑴ 판 전체가 왼쪽 위 밝음 → 오른쪽 아래 깊음 ⑵ 그 위에 **햇살 줄기** 몇 가닥.
      줄기는 가장자리가 부드러워야 한다(딱 끊으면 줄무늬 천이 된다) · 오른쪽 아래로 갈수록 사라진다 */
.fx::before,
.fx::after {
  content: "";
  position: absolute;
  inset: 0;
}
.fx::before {
  background: linear-gradient(
    150deg,
    var(--fx-sun-wash) 0%,
    transparent 40%,
    transparent 60%,
    var(--fx-deep) 100%
  );
}
.fx::after {
  background: linear-gradient(
    115deg,
    transparent 8%,
    var(--fx-ray) 11%,
    transparent 15%,
    transparent 20%,
    var(--fx-ray) 25%,
    transparent 31%,
    transparent 37%,
    var(--fx-ray-faint) 40%,
    transparent 44%,
    transparent 52%,
    var(--fx-ray) 57%,
    transparent 63%
  );
  /* 오른쪽 아래로 갈수록 사라진다 */
  -webkit-mask: linear-gradient(150deg, #000 0%, #0000 75%);
  mask: linear-gradient(150deg, #000 0%, #0000 75%);
  /* 햇살이 숨 쉬듯 — 구름이 지나가는 정도로만 */
  animation: fx-ray 9s ease-in-out infinite alternate;
}
@keyframes fx-ray {
  to {
    opacity: 0.45;
  }
}
/* ⑪ 수심 — **게임 바다와 같은 손**(`tiles.js`). 노이즈 해저 → 4×4 디더로 단계 → 반투명 층.
   🔴 2026-09-16 yomdo — *햇살은 좋은데 아직 아쉽다. 인게임의 물깊이 변화처럼.*
   🔑 층은 **2배 도트**로 굽는다(게임도 낮은 해상도로 굽고 키운다) — 경계의 디더가 도트로 보인다.
   🔑 층이 **물결 자국까지 덮으면 바다가 그늘진다**(`tiles.js` 핵심 ①) — 그래서 자국만 뽑아
      `.marks` 로 층 **위에 다시 얹는다.** 바탕과 같은 흐름 애니메이션이라 어긋나지 않는다 */
.fx .depth {
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: pixelated;
}
/* ⑫ 해안 — **항구 화면의 타일과 규칙 그대로**(`port.js drawPort`) 모서리 군데군데에 뭍을 둔다.
   🔴 2026-09-16 yomdo — *아직 심심하다. 항구 그릴 때 쓴 맵타일로 바다 모서리에 해안선을.*
   한 칸 = 16px 타일 × 2. 수심(⑪)과 같은 2배라 도트 크기가 맞는다 */
.fx .coast {
  position: absolute;
  top: 0;
  left: 0;
  image-rendering: pixelated;
}
.fx .marks {
  position: absolute;
  inset: 0;
  background: var(--lg-page-marks, none) repeat;
  image-rendering: pixelated;
  animation: fx-drift var(--fx-drift) steps(110) infinite;
}

/* ⑨ 지나가는 배 — 뱃머리가 왼쪽이라(`ships/README.md`) **오른쪽에서 왼쪽으로** 간다.
   32×32 그림을 2배(정수)로. 움직임도 2px 씩 끊는다 */
.fx .sail {
  position: absolute;
  bottom: 4.2rem;
  left: 100%;
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  animation:
    fx-sail var(--fx-sail) steps(700) infinite,
    fx-bob 2.4s steps(2) infinite;
}
@keyframes fx-sail {
  from {
    left: 100%;
  }
  to {
    left: -64px;
  }
}
@keyframes fx-bob {
  50% {
    translate: 0 2px;
  }
}

.stage {
  width: var(--lg-col-w);
  margin: 0 auto;
  min-height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: 2.5rem 1.2rem;
}

/* ③ 타이틀 */
.title {
  margin: auto 0 0; /* 🔑 위아래 `auto` 둘(여기 · `.copy`)이 남는 자리를 나눠 — 타이틀·창은 가운데, 저작권은 바닥 */
  line-height: 0;
  text-align: center;
}
.title img {
  display: block;
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}
/* ⑤ 금빛 — 빛줄기가 비스듬히 훑는다. **그림 자체를 가면으로 써서** 글자 밖으로 안 번진다.
   ⚠ 그림이 없으면 가면도 비어 **빛줄기도 안 보인다**(대체 글자만 남는다) */
.glint {
  position: relative;
  display: inline-block;
  -webkit-mask: url("ui/title.png") 0 0 / 100% 100% no-repeat;
  mask: url("ui/title.png") 0 0 / 100% 100% no-repeat;
}
.glint[hidden] {
  display: none;
}
.glint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
      110deg,
      #fff0 42%,
      #fffbd0d9 50%,
      #fff0 58%
    )
    0 0 / 300% 100% no-repeat;
  animation: fx-glint var(--fx-glint) steps(36) infinite;
  /* 🔑 `color-dodge` — **검은 테두리는 검은 채로**, 밝은 금색만 더 밝힌다(덮어 칠하면 테두리가 바랜다) */
  mix-blend-mode: color-dodge;
}
@keyframes fx-glint {
  0% {
    background-position: 100% 0;
  }
  20%,
  100% {
    background-position: 0% 0;
  }
}
.title .alt {
  line-height: 1.2;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--ink-page);
  text-shadow: 2px 2px 0 var(--ink-page-shadow);
}

/* ② 창 — 테두리는 **자리를 먹는 transparent 선**으로 잡는다. `border-image` 는 자리를 안 먹어서
 그것만 쓰면 틀이 글자를 덮는다(`skin.css` 머리말 ⑴) */
.win {
  box-sizing: border-box;
  width: min(22rem, 100%);
  border: calc(var(--lg-win-slice) * 1px) solid transparent;
  border-image: var(--lg-win) var(--lg-win-slice) repeat;
  background: var(--lg-win-tile) repeat;
  padding: 0.9rem 1.2rem 1rem;
  image-rendering: pixelated;
  /* ⑥ 물 위에 뜬다 — 번지지 않는 그림자 */
  box-shadow: 4px 4px 0 var(--fx-shadow);
}
.win h2 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  color: var(--ink-win-bright);
  letter-spacing: 0.04em;
}
.win label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-win-dim);
}
.win input {
  width: 100%;
  box-sizing: border-box;
  margin: 0.15rem 0 0.7rem;
  padding: 1px 4px;
  font: inherit;
  color: var(--ink-input);
  outline: 0;
  border: 6px solid transparent;
  border-image: var(--lg-sunken) 6 fill repeat;
  background: transparent;
  image-rendering: pixelated;
}
/* ⑦ 포커스 — 타이틀과 같은 금색 테 */
.win input:focus {
  box-shadow: 0 0 0 2px var(--fx-focus);
}
/* 🔐 로그인 정보 저장 — 체크 칸은 입력칸 테를 쓰지 않는다 */
.win label.keep {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: -0.2rem 0 0.6rem;
  cursor: pointer;
}
.win label.keep input {
  width: auto;
  margin: 0;
  border: 0;
  border-image: none;
}
.win button {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0 8px;
  font: inherit;
  font-weight: 600;
  color: var(--ink-btn);
  cursor: pointer;
  background: transparent;
  border: 6px solid transparent;
  border-image: var(--lg-btn) 6 fill repeat;
  image-rendering: pixelated;
}
.win button:hover:not(:disabled) {
  border-image-source: var(--lg-btn-hot);
}
.win button:active:not(:disabled) {
  border-image-source: var(--lg-btn-down);
}
.win button:disabled {
  border-image-source: var(--lg-btn-off);
  color: var(--ink-btn-off);
  cursor: default;
}

/* 실패 문구 — 비어 있으면 자리를 차지하지 않는다 */
.err {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-win-bad);
}
.err:empty {
  display: none;
}

/* 창 바꾸기 */
.swap {
  margin: 0.9rem 0 0;
  font-size: 0.85rem;
  text-align: center;
  color: var(--ink-win-dim);
}
.swap a {
  color: var(--ink-win-bright);
  font-weight: 600;
}

/* 저작권 — 기둥 바닥에 작게 (2026-09-16 yomdo) */
.copy {
  margin: auto 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-page-dim);
  text-shadow: 1px 1px 0 var(--ink-page-shadow);
}

/* 🔑 움직임을 줄여 달라는 사람에게는 **전부 멈춘다** — 멀미가 나는 사람이 있다 */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .fx .marks,
  .fx::after,
  .fx .sail,
  .glint::after {
    animation: none;
  }
  .fx .sail {
    display: none;
  }
}
.copy p {
  margin: 0;
}