/* 예배 순서 미리보기 — Flutter 앱 "예배 순서" 화면과 같은 모양 (joobo-order-preview.js) */
.jop {
  --jop-ink: #2F2A25;
  --jop-muted: #6B635C;
  --jop-dot: #CFC7BF;
  --jop-accent: #C2602F;
  --jop-accent-dot: #EBB99A;
  --jop-accent-bg: #F6EBE3;
  color: var(--jop-ink);
  font-size: 15px;
  line-height: 1.4;
}
.jop-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 3px solid var(--jop-ink);
}
/* 굵은 선 아래 얇은 선 (앱의 이중선) */
.jop-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  border-bottom: 1px solid var(--jop-ink);
}
.jop-heading {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.jop-worship {
  font-size: 13px;
  color: var(--jop-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jop-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.jop-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 10px;
  margin: 0 -10px;
  border-radius: 12px;
}
.jop-title {
  flex: 0 0 auto;
  min-width: 4.6em;
  font-weight: 700;
  white-space: nowrap;
}
.jop-title-spread {
  display: inline-flex;
  justify-content: space-between;
  width: 4.6em;
}
.jop-dots {
  flex: 1 1 12px;
  min-width: 8px;
  height: 4px;
  background-image: radial-gradient(circle, var(--jop-dot) 1.1px, transparent 1.4px);
  background-size: 6px 4px;
  background-repeat: repeat-x;
  background-position: left center;
}
/* 좁은 화면에서는 점선이 먼저 줄고, 글자는 띄어쓰기 단위로 줄바꿈한다. */
.jop-content {
  flex: 0 1 auto;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.jop-people {
  flex: 0 1 auto;
  color: var(--jop-muted);
  text-align: right;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.jop-note {
  justify-content: center;
  min-height: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 13px;
  color: var(--jop-muted);
  text-align: center;
}
.jop-sermon {
  background: var(--jop-accent-bg);
}
.jop-sermon .jop-title,
.jop-sermon .jop-content {
  color: var(--jop-accent);
  font-weight: 700;
}
.jop-sermon .jop-dots {
  --jop-dot: var(--jop-accent-dot);
}
.jop-empty {
  margin: 24px 0 8px;
  font-size: 13px;
  color: var(--jop-muted);
  text-align: center;
  line-height: 1.6;
}