/* 진주텃밭 출퇴근 — q.html / me.html 공통 컴포넌트
   전제: 페이지가 :root 에 --green, --green-dark, --amber 를 정의한다.
   사용자에 어르신이 포함된다 — 글씨·버튼 크기를 줄이지 말 것. */

/* 한국어 줄바꿈: 어절 단위로 끊는다.
   없으면 "위치를 확인하지 못했습니 / 다" 처럼 낱글자가 넘어간다. */
body { word-break: keep-all; overflow-wrap: break-word; }

.big-btn {
  display: block; width: 100%; border: none; border-radius: 18px; padding: 26px 0;
  font-size: 30px; font-weight: 800; color: #fff; cursor: pointer;
  margin-top: 14px; font-family: inherit;
}
.big-btn.in { background: var(--green); }
.big-btn.out { background: var(--amber); }
.big-btn:active { filter: brightness(.9); }
.big-btn:disabled { opacity: .55; }
/* 보조 선택지 — 같은 화면의 두 번째 버튼 */
.big-btn.sub { font-size: 18px; padding: 14px 0; opacity: .75; }

.status { font-size: 18px; color: #555; line-height: 1.6; margin-bottom: 6px; }
.result-icon { font-size: 64px; margin-bottom: 10px; }
.result-main { font-size: 28px; font-weight: 800; margin-bottom: 12px; }
.result-sub { font-size: 19px; color: #444; line-height: 1.7; }
.warn { color: #b71c1c; }

.spin {
  display: inline-block; width: 28px; height: 28px; border: 4px solid #ccc;
  border-top-color: var(--green); border-radius: 50%;
  animation: jj-sp 1s linear infinite; margin-bottom: 10px;
}
@keyframes jj-sp { to { transform: rotate(360deg); } }

/* 본인확인 폼 */
.jj-input {
  width: 100%; border: 2px solid #cfd8cf; border-radius: 14px; padding: 16px 14px;
  font-size: 24px; font-family: inherit; margin-bottom: 12px;
  background: #fff; color: #222; text-align: center;
}
.jj-input:focus { outline: none; border-color: var(--green); }
.jj-input::placeholder { color: #aaa; font-size: 20px; }
.jj-msg { font-size: 17px; color: #b71c1c; line-height: 1.6; margin-top: 14px; }
.jj-msg.ok { color: var(--green-dark); }

/* 매장 선택 버튼 */
.pick-btn {
  display: block; width: 100%; border: 2px solid var(--green); background: #fff;
  color: var(--green-dark); border-radius: 16px; padding: 20px 0;
  font-size: 25px; font-weight: 700; font-family: inherit; cursor: pointer; margin-top: 12px;
}
.pick-btn:active { background: #eef5ee; }
.pick-btn .dist { display: block; font-size: 15px; font-weight: 400; color: #777; margin-top: 4px; }

/* 홈 화면 추가 안내 */
.jj-home { padding: 0; overflow: hidden; }
.jj-home > summary {
  list-style: none; cursor: pointer; padding: 16px 18px;
  font-size: 18px; font-weight: 700; color: var(--green-dark);
}
.jj-home > summary::-webkit-details-marker { display: none; }
.jj-home > summary::after { content: " ▾"; color: #999; }
.jj-home[open] > summary::after { content: " ▴"; }
.jj-home .body {
  padding: 0 18px 18px; font-size: 17px; line-height: 1.85; color: #444;
  border-top: 1px solid #eee; padding-top: 14px;
}
.jj-home .body .dim { color: #777; font-size: 15px; }