/* 새판 공통 부품 모양 — 빨간 띠 · 세 모양(불러오는 중 · 비었음 · 실패) · 목록 · 단추 · 확인 창 · 알림 · 가격 · 빈 화면 */

/* 빨간 띠(core/errors.js) — 화면 맨 위 · 늘 보이게 */
.tm-alarm { position: sticky; top: 0; z-index: 95; }
.tm-alarm-row {
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: #FDF1EF; color: #8E1F15; border-bottom: 3px solid #B3291E; font-weight: 700; line-height: 1.4;
}
.tm-alarm-row .m { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tm-alarm-row button { flex: none; min-height: 40px; min-width: 40px; border: 1px solid #B3291E; background: #fff; color: #8E1F15; border-radius: 10px; font-weight: 700; padding: 0 10px; }

/* 세 모양 */
.tm-state { text-align: center; padding: 28px 12px; color: var(--tm-text-weak); }
.tm-state .msg { margin: 8px 0 0; font-size: var(--tm-text-body); overflow-wrap: anywhere; }
.tm-state .ico { display: block; font-size: 34px; line-height: 1; }
.tm-state .code { display: block; margin-top: 4px; color: var(--tm-text-faint); font-size: 12px; }
.tm-state.fail { color: #8E1F15; }
.tm-state .dots { display: inline-block; width: 44px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, var(--tm-gold-line) 0 30%, var(--tm-gold) 30% 60%, var(--tm-gold-line) 60%); background-size: 200% 100%;
  animation: tm-dots 1.1s linear infinite; }
@keyframes tm-dots { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tm-state .dots { animation: none; } }
.tm-state-act { margin-top: 12px; min-height: var(--tm-tap-min); padding: 0 18px; border: 2px solid var(--tm-gold); border-radius: var(--tm-radius-sm); background: var(--tm-surface); color: var(--tm-gold-deep); font-size: var(--tm-text-button); font-weight: 700; }

/* 목록 */
.tm-list { margin: 0 0 var(--tm-gap); }
.tm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tm-row { min-width: 0; }

/* 단추 */
.tm-btn { min-height: var(--tm-tap-min); padding: 0 16px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-sm); background: var(--tm-surface); color: var(--tm-text); font-size: var(--tm-text-button); font-weight: 700; }
.tm-btn.primary { background: var(--tm-gold); border-color: var(--tm-gold); color: #fff; }
.tm-btn.danger { background: #B3291E; border-color: #B3291E; color: #fff; }
.tm-btn:focus-visible, .tm-state-act:focus-visible { outline: 3px solid var(--tm-gold); outline-offset: 2px; }

/* 확인 창 · 말 고르기 창 */
.tm-modal-box { padding: 16px; }
.tm-modal-title { font-size: var(--tm-text-title); font-weight: 800; margin: 0 0 10px; color: var(--tm-text); }
.tm-dialog-body, .tm-dialog-raw { margin: 0 0 12px; overflow-wrap: anywhere; }
.tm-dialog-raw { white-space: pre-line; line-height: 1.6; }
.tm-dialog-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.tm-dialog-btns .tm-btn { flex: 1 1 120px; }
.tm-modal-close { display: block; width: 100%; margin-top: 12px; min-height: var(--tm-tap-min); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-sm); background: var(--tm-surface-alt); font-size: var(--tm-text-button); font-weight: 700; }

/* 잠깐 뜨는 알림 */
.tm-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 96; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 12px; background: rgba(31, 27, 22, .92); color: #fff; font-size: 15px; overflow-wrap: anywhere; }
.tm-toast[hidden] { display: none; }

/* 가격 · ≈ 값 */
.tm-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.tm-price .now { font-size: var(--tm-text-price); font-weight: 800; color: var(--tm-text); }
.tm-price .was { color: var(--tm-text-faint); font-size: 15px; }
.tm-price .fx { color: var(--tm-text-weak); font-size: 13px; font-weight: 600; }
.tm-fxnote { margin: 16px 0 0; color: var(--tm-text-faint); font-size: 12.5px; line-height: 1.45; overflow-wrap: anywhere; }

/* 빈 화면 안내 */
.tm-emptyscreen { text-align: center; padding: 32px 12px; border: 1px dashed var(--tm-gold-line); border-radius: var(--tm-radius); background: var(--tm-surface); }
.tm-emptyscreen .ico { font-size: 40px; line-height: 1; }
.tm-emptyscreen .h { margin: 10px 0 6px; font-size: var(--tm-text-title); line-height: 1.3; overflow-wrap: anywhere; }
.tm-emptyscreen .b { margin: 0 0 12px; color: var(--tm-text-weak); overflow-wrap: anywhere; }

/* 고르기 창(공유 · 2026-10-16) — 단추 세로로 */
.tm-dialog-btns:has(.tm-pick) { flex-direction: column; align-items: stretch; gap: 8px; }
.tm-dialog-btns:has(.tm-pick) .tm-btn { flex: none; min-height: 48px; height: auto; }

/* 긴급 신고 119 · 112(2026-10-16 · screens/guest/sos.js) — 3초 길게 누르기 막대 · 신고 중 불 1초 깜박(초당 3번 넘지 않게) */
.tm-sos-btns { display: grid; gap: 12px; margin: 12px 0; }
.tm-hold { position: relative; overflow: hidden; width: 100%; min-height: 88px; border-radius: 16px; border: 3px solid #999; font-weight: 800;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; cursor: pointer; }
.tm-sos-call.fire { background: #b3261e; color: #fff; border-color: #7a1712; }
.tm-sos-call.police { background: #0b3d91; color: #fff; border-color: #072a66; }
.tm-sos-lab { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tm-sos-lab .n { font-size: 2rem; line-height: 1.1; }
.tm-hold-bar { position: absolute; left: 0; bottom: 0; height: 10px; width: 0; background: #ffd54a; }
.tm-hold.holding .tm-hold-bar { animation: tm-hold-fill 3s linear forwards; }
.tm-hold.s2.holding .tm-hold-bar { animation-duration: 2s; }
@keyframes tm-hold-fill { from { width: 0; } to { width: 100%; } }
.tm-sos-off { min-height: 64px; margin-top: 8px; background: #fff; color: #b3261e; border-color: #b3261e; }
.tm-sos-lamp { display: flex; align-items: center; gap: 10px; padding: 12px; margin: 8px 0; border-radius: 12px; background: #fff0ef; border: 2px solid #b3261e; color: #b3261e; }
.tm-sos-lamp .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #e53935; box-shadow: 0 0 14px #e53935; animation: tm-sos-blink 1s linear infinite; }
@keyframes tm-sos-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
.tm-sos-coord { font-size: 1.35rem; font-weight: 800; margin: 4px 0; }
.tm-sos-warn { color: #b3261e; }
.tm-entry.tm-entry-sos { color: #b3261e; border-color: #b3261e; }
.tm-entry.tm-entry-sos.on { animation: tm-sos-blink-bg 1s linear infinite; }
@keyframes tm-sos-blink-bg { 0%, 49% { background: #e53935; color: #fff; } 50%, 100% { background: #fff; color: #b3261e; } }
@media (prefers-reduced-motion: reduce) { .tm-sos-lamp .dot, .tm-entry.tm-entry-sos.on { animation: none; } .tm-entry.tm-entry-sos.on { background: #e53935; color: #fff; } }
.tm-entry.tm-hold { min-height: 0; width: auto; border-radius: inherit; border-width: inherit; }   /* 첫 화면 119 · 112 칸 — 불 켜졌을 때 3초 눌러 끄기(막대만 빌림) */
.tm-entry.tm-hold .tm-hold-bar { height: 5px; }
/* 🏪 「내 가게」 맨 위 고정(10-27) — 사장님 · 점주가 손님 화면을 볼 때만 */
.tm-mypin { border: 2px solid var(--tm-gold); background: var(--tm-gold-soft); border-radius: var(--tm-radius-sm); padding: 10px; margin: 8px 0 12px; display: grid; gap: 8px; }
.tm-mypin-h { margin: 0; font-size: var(--tm-text-sub); color: var(--tm-text-weak); }
.tm-mypin-card { display: grid; gap: 6px; background: var(--tm-surface); border-radius: var(--tm-radius-sm); padding: 8px 10px; }
.tm-mypin-card .top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-mypin-card .top .nm { font-size: 18px; }
.tm-mypin-none { margin: 0; font-weight: 600; color: var(--tm-text-weak); }
.tm-mypin-deal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-mypin-act { display: flex; gap: 8px; flex-wrap: wrap; }