/* 로그인 한 화면. 지도 두 곳이 같이 쓴다.

   ★ 이 판은 **막는 벽이 아니라 문**이다. 사람은 지금 하려던 일이 있고,
     여기는 그 일로 가는 한 걸음이다. 그래서 맨 위에 **하려던 일**을 그대로
     되짚고, 단추 하나로 끝낸다. 가입이라는 별도 걸음은 없다.
   ★ 색을 직접 박지 않고 지도가 쓰는 값을 따른다 — 결이 갈리면 로그인 판만
     남의 것처럼 보인다. */

.ltt-auth-덮 {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(14, 15, 18, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: ltt-덮등장 .16s ease-out;
}
@keyframes ltt-덮등장 { from { opacity: 0 } to { opacity: 1 } }

.ltt-auth-판 {
  position: relative; width: 100%; max-width: 372px;
  box-sizing: border-box; padding: 26px 24px 18px;
  border-radius: 20px; background: #fff; color: #16181d;
  border: 1px solid rgba(0, 0, 0, .06);
  box-shadow: 0 20px 56px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .12);
  font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
        "Noto Sans KR", "Segoe UI", sans-serif;
  animation: ltt-판등장 .2s cubic-bezier(.2, .9, .3, 1);
}
@keyframes ltt-판등장 {
  from { opacity: 0; transform: translateY(10px) scale(.985) }
  to   { opacity: 1; transform: none }
}

/* ★ 하려던 일을 크게 되짚는다. 이것이 이 판의 주인공이다. */
.ltt-auth-판 h2 {
  margin: 0 0 6px; font-size: 17.5px; font-weight: 700;
  line-height: 1.42; letter-spacing: -.01em; text-wrap: balance;
  padding-right: 26px;                 /* 닫기 단추 자리 */
}
.ltt-auth-왜 {
  margin: 0 0 20px; font-size: 13px; color: #7b838e; font-weight: 500;
}

/* 받는 것·좋아지는 것 — 읽기보다 훑기 좋게 왼쪽 정렬에 점을 찍는다 */
.ltt-auth-판 ul {
  margin: 0 0 20px; padding: 14px 15px; list-style: none;
  font-size: 12.5px; line-height: 1.55; color: #59626e; text-align: left;
  background: #f6f7f9; border-radius: 12px;
}
.ltt-auth-판 li { position: relative; padding: 3px 0 3px 17px; }
.ltt-auth-판 li + li { margin-top: 2px; }
.ltt-auth-판 li::before {
  content: ""; position: absolute; left: 3px; top: 11px;
  width: 5px; height: 5px; border-radius: 50%; background: #c2c8d0;
}

.ltt-auth-단추자리 { display: flex; justify-content: center; min-height: 44px; }
.ltt-auth-잔 { margin: 11px 0 0; font-size: 11px; color: #99a1ab; text-align: center; }
.ltt-auth-잔 a { color: #99a1ab; text-decoration: none; }
.ltt-auth-잔 a:hover { color: #59626e; text-decoration: underline; }

/* ★ 조용히 실패하면 "왜 안 되지" 가 된다. 반드시 말한다. */
.ltt-auth-탈 {
  margin: 14px 0 0; padding: 9px 11px; font-size: 12.5px; line-height: 1.45;
  color: #a8342a; background: #fdf0ee; border-radius: 9px; text-align: left;
}

.ltt-auth-x {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #a7aeb8; font-size: 19px; line-height: 1;
  cursor: pointer; transition: background .12s, color .12s;
}
.ltt-auth-x:hover { background: #f0f2f5; color: #4a5563; }
.ltt-auth-x:focus-visible { outline: 2px solid #4a90d9; outline-offset: 2px; }

@media (prefers-color-scheme: dark) {
  .ltt-auth-판 {
    background: #1b1e24; color: #e9ecf1; border-color: rgba(255, 255, 255, .07);
    box-shadow: 0 20px 56px rgba(0, 0, 0, .62), 0 2px 8px rgba(0, 0, 0, .4);
  }
  .ltt-auth-왜 { color: #8b94a1; }
  .ltt-auth-판 ul { background: #23272e; color: #9aa3b2; }
  .ltt-auth-판 li::before { background: #4c5563; }
  .ltt-auth-잔, .ltt-auth-잔 a { color: #737c88; }
  .ltt-auth-잔 a:hover { color: #a8b0bb; }
  .ltt-auth-탈 { color: #f0a99f; background: #34211e; }
  .ltt-auth-x:hover { background: #2a2e37; color: #c3cad4; }
}

@media (prefers-reduced-motion: reduce) {
  .ltt-auth-덮, .ltt-auth-판 { animation: none; }
  .ltt-auth-덮 { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* 담기 단추의 세 모습 — 그냥 / 담김 / 탈남. 눌렀는데 아무 표시가 없으면
   사람은 다시 누른다. 반드시 눈에 보이게 바뀐다. */
[data-ltt-lock="save"].담김 { opacity: .55; pointer-events: none; }
[data-ltt-lock="save"].탈 { animation: ltt-흔들 .3s; }
@keyframes ltt-흔들 {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-4px); } 75% { transform: translateX(4px); }
}
.못담음 { opacity: .4; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  [data-ltt-lock="save"].탈 { animation: none; outline: 2px solid #c0392b; }
}

/* ── 북마크 표시 ─────────────────────────────────────────────
   ★ 아이콘은 앱과 같은 `bookmark`(`app/tour/[id].tsx`). 담은 것이 있을 때만
     숫자를 얹는다 — 0 을 늘 보여 주면 잔소리다. */
.ltt-북마크 {
  position: relative; display: inline-flex; align-items: center;
  justify-content: center; width: 38px; height: 38px; flex: none; padding: 0;
  border: 1.5px solid var(--outline, #16181d); border-radius: 999px;
  background: var(--surface, #fff); color: var(--txt, #16181d);
  box-shadow: var(--sh, 0 2px 4px rgba(0,0,0,.12)); cursor: pointer;
}
/* ★ 갖다 대면 **바탕만 주황**이고 아이콘·글씨는 검정 그대로다(유저 지시:
   "바탕을 주황, 글씨는 검정"). 흰 아이콘으로 바꾸면 주황 위에서 옅게 보인다. */
.ltt-북마크:hover { background: var(--accent, #ff6933); color: var(--txt, #16181d); }
.ltt-북마크 .mi { font-family: "Material Symbols Rounded"; font-size: 19px; line-height: 1; }
.ltt-북마크수 {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px;
  padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: var(--accent, #ff6933); color: #fff;
  font: 700 10.5px/17px -apple-system, "Noto Sans KR", sans-serif;
  text-align: center; display: none;
}
.ltt-북마크.있음 .ltt-북마크수 { display: block; }

.ltt-담은판 { max-width: 400px; }
.ltt-담은판 h2 { display: flex; align-items: baseline; gap: 7px; }
.ltt-담은수 { font-size: 13px; font-weight: 600; color: #99a1ab; }
.ltt-담은목록 {
  margin: 4px 0 0; padding: 0; list-style: none; text-align: left;
  max-height: 46vh; overflow-y: auto;
}
.ltt-담은목록 li {
  padding: 10px 12px; border-radius: 10px; background: #f6f7f9;
  font-size: 13px; line-height: 1.4;
}
.ltt-담은목록 li + li { margin-top: 5px; }
.ltt-담은목록 b { display: block; font-weight: 600; }
.ltt-담은목록 small { display: block; margin-top: 2px; font-size: 11.5px; color: #7b838e; }
@media (prefers-color-scheme: dark) {
  .ltt-담은목록 li { background: #23272e; }
  .ltt-담은목록 small { color: #8b94a1; }
}