/* Rosary54 Lite styles */
/* Rosary54 Lite - Modern Styles */

/* --- Base --- */
#r54l-root {
  max-width: 520px;
  margin: 2rem auto;
  padding: 0 1rem;
  color: #343A40; /* Darker Grey Text */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.r54l-app {
  background: #F8F9FA; /* Light Grey BG */
  border-radius: 16px;
  border: 1px solid #E9ECEF; /* Subtle Border */
}

.r54l-card {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* --- Typography & Labels --- */
.r54l-label {
  font-weight: 500;
  font-size: 0.9rem;
  color: #495057; /* Medium Grey */
  margin-bottom: -0.75rem; /* Pull closer to control */
}

.r54l-meta {
  font-size: 0.85rem;
  color: #6C757D; /* Light Grey */
  text-align: center;
}

.r54l-link-hint { margin-top: 0.5rem; }

/* --- Buttons --- */
.r54l-btn {
  appearance: none;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.2s ease;
  width: 100%;
}

.r54l-btn-primary {
  background-color: #4A90E2; /* Calming Blue */
  color: #fff;
}
.r54l-btn-primary:hover { background-color: #357ABD; }

.r54l-btn-text {
  background: none;
  color: #6C757D;
  padding: 4px 8px;
  font-weight: 500;
  font-size: 0.85rem;
  width: auto;
}
.r54l-btn-text:hover { color: #343A40; }
.r54l-btn-text:disabled { color: #ADB5BD; cursor: not-allowed; }

/* --- Controls & Inputs --- */
.r54l-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.r54l-toggle-group .r54l-btn {
  background-color: #fff;
  color: #495057;
  border: 1px solid #DEE2E6;
  font-weight: 500;
  padding: 10px;
  width: 100%;
}
.r54l-toggle-group .r54l-btn.active {
  background-color: #4A90E2;
  color: #fff;
  border-color: #4A90E2;
}

.r54l-input-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.r54l-input-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.r54l-input {
  padding: 10px 12px;
  border: 1px solid #DEE2E6;
  border-radius: 10px;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.r54l-input:focus { border-color: #4A90E2; outline: none; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2); }

/* --- Today View --- */
.r54l-today-header {
  text-align: center;
  border-bottom: 1px solid #E9ECEF;
  padding-bottom: 1rem;
  margin-bottom: -0.5rem;
}

.r54l-today-title {
  font-size: 2rem;
  font-weight: 700;
  color: #212529;
  margin: 0;
}

.r54l-badges {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.r54l-badge {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  background: #E9ECEF;
  color: #495057;
  font-size: 0.8rem;
  font-weight: 500;
}

.r54l-progress {
  position: relative;
  height: 16px;
  background: #E9ECEF;
  border-radius: 999px;
  overflow: hidden;
}

.r54l-bar {
  height: 100%;
  width: 0;
  background: #4A90E2;
  transition: width .4s ease-in-out;
}

.r54l-progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: #343A40;
  mix-blend-mode: screen;
  filter: invert(1);
}

.r54l-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.r54l-sub-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.r54l-toast {
  text-align: center;
  color: #D9534F; /* Red for error */
  font-size: 0.9rem;
  height: 1.2em;
}

/* --- Finished View --- */
.r54l-finished {
  text-align: center;
  padding: 2rem 0;
}
.r54l-finished-title { font-size: 1.2rem; margin-bottom: 1rem; color: #495057; }

/* --- Modal --- */
.r54l-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.5); display:none; align-items:center; justify-content:center; z-index:9999; }
.r54l-modal { background:#fff; border-radius:16px; padding:16px; width:min(500px,92vw); max-height:90vh; overflow:auto; }
.r54l-imgbox { border:1px solid #eee; border-radius:12px; padding:8px; text-align:center; background:#F8F9FA; }
.r54l-modal .r54l-actions { margin-top: 1rem; }
.r54l-foot{margin-top:1rem;color:#6C757D;font-size:.9rem;text-align:center;}

#r54l-root .r54l-header h1 { margin: 0 0 6px; font-size: 1.8rem; }
#r54l-root .r54l-header .lead { color: #666; margin: 0 0 14px; }
#r54l-root .r54l-about { display: grid; gap: 14px; margin-bottom: 20px; }
#r54l-root .card { background: #F7F3EA; border: 1px solid #e8e8e8; border-radius: 14px; padding: 14px 16px; }
#r54l-root .r54l-app { border: 1px solid #e8e8e8; border-radius: 16px; padding: 16px; background: #fff; }

.r54l-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.r54l-btn { appearance:none; border:1px solid #8F6D52; background:#8F6D52; color:#fff; border-radius:12px; padding:10px 14px; cursor:pointer; font-weight:600; }
.r54l-btn.sec { background:#fff; color:#2B2B2B; border-color:#ddd; }
.r54l-badge { display:inline-flex; gap:6px; align-items:center; padding:4px 10px; border-radius:999px; background:#9DB9CE; color:#0f2a3a; font-size:.9rem; }
.r54l-meta { color:#777; font-size:.92rem; }
.r54l-input { padding:10px 12px; border:1px solid #ddd; border-radius:10px; }
.r54l-progress { height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; margin:8px 0; }
.r54l-bar { height:100%; width:0; background: linear-gradient(90deg,#6F8A61,#8F6D52); transition: width .35s; }
.r54l-modal-backdrop { position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; align-items:center; justify-content:center; z-index:9999; }
.r54l-modal { background:#fff; border-radius:16px; padding:16px; width:min(640px,92vw); max-height:90vh; overflow:auto; }
.r54l-modal h3 { margin:0 0 8px; font-size:1.2rem; }
.r54l-imgbox { border:1px solid #eee; border-radius:12px; padding:8px; text-align:center; background:#F7F3EA; }
.r54l-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.r54l-toast { color:#2e7d32; margin-left:8px; }

@media (max-width:720px){
  #r54l-root .r54l-header h1 { font-size:1.5rem; }
}

.r54l-foot{margin-top:8px;color:#666;font-size:.8rem;text-align:center;}

/* --- R54L Patch 2025-08-22: Align request/thanks inputs to bottom in one line --- */
#r54l-root .r54l-app { display: flex; flex-direction: column; }
#r54l-root .r54l-actions { order: 20; }
#r54l-root .r54l-input-group { order: 30; margin-top: 8px; }
#r54l-root .r54l-meta, #r54l-root .r54l-progress { order: 40; }
#r54l-root .r54l-input-group { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#r54l-root .r54l-input-group .r54l-input-item { grid-column: 1 / -1; }


/* === R54L UI Hotfix 2025-08-22 (embedded) ===
   목적: 추가 CSS 없이 플러그인 단독으로 깔끔한 레이아웃/타이포 유지
   주요 내용:
   - 제목 크기 축소, 배지 좌정렬
   - 메타 1줄 정렬, 프로그레스 간결화
   - 입력(간구/감사) 카드 하단 1라인 고정
*/
#r54l-root { --r54l-title: 1.4rem; --r54l-text: .95rem; --r54l-muted: #6C757D; }
#r54l-root .r54l-app { background:#fff; border:1px solid #E9ECEF; border-radius:16px; padding:16px; }
#r54l-root .r54l-today-title { font-size: var(--r54l-title); line-height:1.3; margin:0 0 .25rem; }
#r54l-root .r54l-badges { justify-content:flex-start; gap:6px; margin-top:2px; }
#r54l-root .r54l-badge { border-radius:999px; padding:4px 10px; font-size:.85rem; }
#r54l-root .r54l-meta { display:flex; justify-content:space-between; gap:8px; font-size: var(--r54l-text); color: var(--r54l-muted); margin-top:4px; }
#r54l-root .r54l-progress { height:8px; margin:8px 0 0; }
#r54l-root .r54l-progress-label { font-size:.8rem; }

/* 입력(간구/감사) 하단 1라인 고정 */
#r54l-root .r54l-app { display: flex; flex-direction: column; }
#r54l-root .r54l-actions { order: 20; }
#r54l-root .r54l-input-group { order: 30; margin-top: 8px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
#r54l-root .r54l-input-group .r54l-input-item { grid-column: 1 / -1; }
#r54l-root .r54l-meta, #r54l-root .r54l-progress { order: 40; }



/* === R54L additions (2025-08-22) === */
#r54l-intention { font-size:.95rem; color:#6C757D; margin-top:.25rem; }
.r54l-mystery .r54l-intention { display:none !important; } /* 의도 텍스트 하단 카드에서 비노출 */

.r54l-grid { display:grid; gap:12px; }
@media (min-width:1024px){ .r54l-grid.cols-5 { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:767px){ .r54l-grid.cols-2 { grid-template-columns:repeat(2,1fr)); } }


/* --- Mobile Refinements --- */
@media (max-width: 480px) {
  /* Reduce padding on main card for smaller screens */
  .r54l-card {
    padding: 1.2rem;
  }

  /* Adjust title and text size via CSS variables */
  #r54l-root {
    --r54l-title: 1.25rem;
    --r54l-text: .9rem;
  }

  /* Stack the input group on the onboarding screen */
  .r54l-input-group {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Ensure modal action buttons stack vertically */
  .r54l-modal .r54l-actions {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .r54l-modal .r54l-actions .r54l-btn {
    width: 100%;
  }
}