/* 첫 화면 부가 기능 — 이 앱의 금빛·고문서 무드를 그대로 따른다.
   새 토큰을 만들지 않고 #title 에 이미 쓰던 색(#aa8654 #e3c58a #dfd0b6 #171e23)을 쓴다. */

/* ★ #title 은 배경 그림이 깔린 자리다. static 으로 두면 DOM 에는 있는데 화면에서 덮인다.
     이 한 줄이 그 함정을 막는다. */
.lk-chipwrap,
.lk-foot { position: relative; }

/* ───────── 사용 안내 칩 — 타이틀 아래, 시작 버튼 위 ───────── */
.lk-chipwrap { margin: -6px 0 2px; }
.lk-chips {
  display: flex; flex-wrap: wrap; gap: 7px; justify-content: center;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.lk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  /* 주인공은 시작 버튼이다. 눈에 들되 길을 막지 않게 채도를 낮춘다 */
  font: 11px 'YutChronicle', 'Batang', '바탕', serif;
  letter-spacing: 1px; color: #c3b79c;
  background: #10141ac9; border: 1px solid #6d5c3e;
  border-radius: 2px; padding: 4px 9px 5px;
  text-shadow: 0 1px 3px #000;
}
.lk-chip svg { opacity: .75; }
.lk-chips:hover .lk-chip,
.lk-chips:focus-visible .lk-chip { color: #e3c58a; border-color: #aa8654; }
.lk-chips:focus-visible { outline: 3px solid #ffe4a1; outline-offset: 4px; border-radius: 2px; }

/* ───────── 하단 바 + 푸터 ───────── */
.lk-foot { width: min(440px, 92vw); margin-top: 4px; }
.lk-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 7px 10px;
  background: #10141ad9; border: 1px solid #6d5c3e; border-radius: 2px;
  /* ⚠️ overflow 를 걸지 않는다 — 나중에 무언가 떠오르는 것이 바 높이에서 잘린다 */
}
.lk-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0;
  color: #c3b79c; background: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; text-decoration: none; font: inherit;
}
.lk-ico:hover { color: #f4d69a; border-color: #aa8654; background: #1d2630; }
.lk-ico:focus-visible { outline: 3px solid #ffe4a1; outline-offset: 2px; }

/* 버전 — 오른쪽 끝. space-between 대신 이 한 줄로 민다 */
.lk-ver {
  margin-left: auto; padding: 6px 9px;
  font: 11px 'YutChronicle', 'Batang', '바탕', serif; letter-spacing: 1px;
  color: #9d937f; background: none; border: 1px solid transparent; border-radius: 2px;
  cursor: pointer; position: relative;
}
.lk-ver:hover { color: #e3c58a; border-color: #6d5c3e; }
.lk-ver:focus-visible { outline: 3px solid #ffe4a1; outline-offset: 2px; }
/* 새 판이 있으면 점을 찍는다. 이게 없으면 아무도 업데이트 내역을 안 연다 */
.lk-ver.lk-new::after {
  content: ''; position: absolute; top: 3px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #e8b04a; box-shadow: 0 0 6px #e8b04a;
  animation: lk-dot 1.6s ease-in-out infinite;
}
@keyframes lk-dot { 50% { opacity: .35; } }

/* 푸터 — 규격 그대로. 누르는 건 주소가 아니라 이름이다 */
.lk-copy {
  margin: 14px 0 24px; text-align: center;
  font-size: 12px; line-height: 1.7; color: #64748b;
}
.lk-copy a { color: #64748b; text-decoration: underline; text-underline-offset: 3px; }
.lk-copy a:hover { color: #94a3b8; }
.lk-copy a:focus-visible { outline: 2px solid #ffe4a1; outline-offset: 2px; }

/* ───────── 창 ───────── */
.lk-dlg {
  /* ⚠️ 이 앱의 *{margin:0} 리셋이 dialog 의 기본 가운데 정렬(margin:auto)을 죽인다.
     안 되돌리면 창이 화면 좌상단에 붙는다. */
  margin: auto;
  color: #efe3c6; background: #132832; border: 1px solid #bba477; border-radius: 3px;
  padding: 26px 28px; max-width: 540px; width: calc(100% - 30px);
  max-height: 86dvh; overflow: auto;
  font-family: 'YutChronicle', 'Batang', '바탕', serif;
}
.lk-dlg::backdrop { background: #020a12e0; }
.lk-dlg h2 { font-size: 26px; font-weight: 400; color: #f4d69a; margin: 0 0 4px; }
.lk-dlg .lk-sub { color: #c3b79c; font-size: 14px; margin: 0 0 6px; }
.lk-dlg h3 {
  font-size: 13px; font-weight: 400; letter-spacing: 2px; color: #e3c58a;
  margin: 18px 0 6px; padding-left: 13px; position: relative;
}
.lk-dlg h3::before { content: '▸'; position: absolute; left: 0; color: #aa8654; }
.lk-dlg h3 small { letter-spacing: 0; color: #9d937f; margin-left: 8px; font-size: 11px; }
.lk-dlg p { margin: 0; line-height: 1.9; word-break: keep-all; color: #ded3bb; }
.lk-dlg em { display: block; font-style: normal; font-size: 12px; color: #9d937f; margin-top: 3px; }
.lk-dlg ul { margin: 0; padding: 0; list-style: none; }
.lk-dlg li {
  display: flex; gap: 9px; align-items: baseline;
  line-height: 1.85; font-size: 14px; color: #ded3bb; padding: 2px 0;
}
.lk-dlg li b {
  flex: none; font-weight: 400; font-size: 10px; letter-spacing: 1px;
  padding: 2px 6px; border-radius: 2px; border: 1px solid;
}
.lk-dlg li b[data-k='new'] { color: #ffd9a0; border-color: #a9793a; background: #33240f; }
.lk-dlg li b[data-k='fix'] { color: #b7d7e8; border-color: #4a7086; background: #12242e; }
.lk-dlg li b[data-k='up']  { color: #cfe3b0; border-color: #6b8a4a; background: #1d2a15; }
.lk-rel + .lk-rel { border-top: 1px solid #ffffff14; margin-top: 16px; padding-top: 4px; }
.lk-rel.lk-old { opacity: .62; }
.lk-close {
  margin-top: 22px; width: 100%;
  font: inherit; font-size: 16px; color: #11212b; background: #c5a464;
  border: 0; border-radius: 2px; padding: 11px; cursor: pointer;
}
.lk-close:hover { background: #d9bc80; }
.lk-close:focus-visible { outline: 3px solid #ffe4a1; outline-offset: 3px; }

/* ───────── 알림 쪽지 ───────── */
#lkToast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 60; pointer-events: none;
  max-width: 92vw; text-align: center;
  font: 14px 'YutChronicle', 'Batang', '바탕', serif; line-height: 1.6; color: #f0e3c6;
  background: #0d1a22f2; border: 1px solid #aa8654; border-radius: 2px;
  padding: 10px 18px;
  opacity: 0; transition: opacity .25s;
}
#lkToast.show { opacity: 1; }

@media (max-width: 480px) {
  .lk-ico { width: 34px; height: 34px; }
  .lk-chip { font-size: 10px; padding: 3px 7px 4px; }
  .lk-dlg { padding: 20px 18px; }
}

/* 반복 움직임은 취향이 아니라 안전 문제다 — 줄여 달라는 기기에서는 끈다 */
@media (prefers-reduced-motion: reduce) {
  .lk-ver.lk-new::after { animation: none; }
  #lkToast { transition: none; }
}

/* ───────── 낮은 화면에서 촘촘히 ─────────
   바이브용샘 기준은 태블릿 1280×800 이다. 칩·바·푸터를 얹으면서 그 높이를
   넘겨 버렸으므로(907px), 세로가 좁을 때만 간격을 줄여 다시 한 화면에 담는다.
   큰 교실 TV(1080p)에서는 원래의 넉넉한 간격 그대로다. */
@media (max-height: 880px) {
  #title { padding-top: 12px; padding-bottom: 6px; gap: 10px; }
  .lk-chipwrap { margin: -8px 0 -6px; }
  .lk-foot { margin-top: -6px; }
  .lk-bar { padding: 4px 8px; }
  .lk-ico { width: 32px; height: 32px; }
  .lk-copy { margin: 7px 0 8px; }
}
@media (max-height: 560px) {
  #title { padding-top: 10px; gap: 9px; }
  .lk-ico { width: 30px; height: 30px; }
  .lk-chip { font-size: 10px; padding: 3px 7px 4px; }
  .lk-copy { margin: 7px 0 9px; font-size: 11px; }
}