/* 가림막 (public/js/loading.js): 먹빛 밤 위에 표구한 한지 한 장 — 지역 이름(붓글씨), 낙관, 먹을 머금는 붓 한 획, 속담 한 줄 */
#loading { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #1a1712 0%, #0d0b09 55%, #050405 100%); opacity: 0; touch-action: none;
  transition: opacity 0.52s ease; font-family: var(--font); }
#loading.hidden { display: none; }
#loading.in { opacity: 1; transition-duration: 0.22s; }
#loading.out { opacity: 0; pointer-events: none; }

/* 표구: 짙은 쪽빛 비단 테두리 + 한지 */
#loading .ld-sheet { position: relative; width: min(620px, calc(100vw - 32px)); padding: 14px; background: #1f2630;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 5px);
  box-shadow: 0 0 0 1px #0b0e12, inset 0 0 0 1px rgba(201,162,79,0.35), 0 24px 70px rgba(0,0,0,0.75);
  transform: translateY(6px) scale(0.985); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
#loading.in .ld-sheet { transform: none; }
#loading.out .ld-sheet { transform: scale(1.015); }
#loading .ld-paper { position: relative; padding: 26px 34px 20px; color: var(--ink); overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(255,250,232,0.5), rgba(196,172,128,0.28) 75%, rgba(150,118,72,0.4) 100%), url("../ui/tex_hanji.png") center / 340px, #e6d8b8;
  box-shadow: inset 0 0 40px rgba(110,80,40,0.35), inset 0 0 4px rgba(60,40,20,0.45); }

#loading .ld-sub { font-family: var(--title); font-size: 15px; letter-spacing: 4px; color: #7a2a1e; opacity: 0.85; min-height: 1.2em; }
#loading .ld-name { font-family: 'East Sea Dokdo', var(--title); font-size: clamp(46px, 11vw, 84px); line-height: 1.05; margin: 4px 70px 6px 0;
  color: #1a120c; letter-spacing: 2px; min-height: 1.05em; --bw-bleed: rgba(40, 24, 12, 0.45); white-space: nowrap; overflow: hidden; text-overflow: clip; }

/* 낙관: 붉은 인주, 가장자리가 고르지 않게 */
#loading .ld-seal { position: absolute; top: 24px; right: 30px; width: 52px; height: 52px; display: grid; grid: 1fr 1fr / 1fr 1fr; grid-auto-flow: column; direction: rtl; place-items: center; padding: 3px; box-sizing: border-box;
  font-family: var(--title); font-size: 18px; line-height: 1; color: #f3e2c4; background: #a3271c; border-radius: 3px 5px 2px 6px; transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px #a3271c, inset 0 0 0 3.5px rgba(243,226,196,0.85), inset 0 0 10px rgba(60,0,0,0.5); opacity: 0.86; mix-blend-mode: multiply; }
#loading .ld-seal span { direction: ltr; }

#loading .ld-stroke { display: block; width: 100%; height: 38px; margin: 10px 0 12px; }

#loading .ld-tip { min-height: 2.8em; font-size: 15px; line-height: 1.45; color: #3a2a1c; opacity: 0; transition: opacity 0.38s ease; }
#loading .ld-tip.on { opacity: 1; }
#loading .ld-tip b { font-family: var(--title); font-weight: 400; font-size: 13px; color: #8e2a22; margin-right: 8px; padding: 0 5px; border: 1px solid rgba(142,42,34,0.55); border-radius: 2px; vertical-align: 1px; }
#loading .ld-more { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: #6a5236; }
#loading .ld-more.hidden { display: none; }
#loading .ld-more button { flex: none; padding: 5px 16px; font-family: var(--title); font-size: 15px; letter-spacing: 2px; color: #ecdcb6; cursor: pointer;
  background: url("../ui/tex_bandaji.png") center / 200px, #3a2416; border: 1px solid #1a0e08; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(216,180,90,0.35), 0 2px 6px rgba(0,0,0,0.4); }
#loading .ld-more button.hidden { display: none; }

@media (max-width: 520px) {
  #loading .ld-sheet { padding: 9px; }
  #loading .ld-paper { padding: 18px 18px 14px; }
  #loading .ld-name { margin-right: 54px; }
  #loading .ld-seal { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 15px; }
  #loading .ld-tip { font-size: 14px; }
}
@media (max-height: 420px) {
  #loading .ld-paper { padding: 14px 24px 12px; }
  #loading .ld-name { font-size: 48px; }
  #loading .ld-stroke { height: 30px; margin: 6px 0 8px; }
}
/* 영어: 지역 이름이 길다 ('Fields outside the Tavern Village') — 자르지 않고 두 줄까지, 글씨를 조금 작게 */
html.lang-en #loading .ld-name { white-space: normal; font-size: clamp(34px, 7vw, 64px); letter-spacing: 1px; }
@media (max-height: 420px) { html.lang-en #loading .ld-name { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { #loading, #loading .ld-sheet { transition: none; } }