/* 감사선포 챌린지 — 관리자 화면. 사용자 화면과 같은 정원 팔레트, 애니메이션 없이 단정하게. */
:root {
  --bg: #faf4ef; --ink: #3d2418; --sub: #8c6b5a; --card: #fff; --line: #f0dccf; --soft: #fdf6f1;
  --acc: #e0703a; --acc-deep: #b24c25; --butter: #ffc65c; --danger: #d4483d;
  --f-disp: "Dongle", "IBM Plex Sans KR", sans-serif;
  --f-body: "IBM Plex Sans KR", system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  color-scheme: only light;   /* 안드로이드 강제 다크 모드 끄기 */
}
/* 삼성 인터넷은 color-scheme 을 무시하고 다크 모드에서 화면 색을 뒤집는다 — 다만 사이트에 다크 모드 스타일이 '있으면' 그걸 쓰므로,
   다크 모드 블록을 두고 색은 밝은 화면 그대로 둔다(이 앱은 밝은 화면 하나뿐). */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  body { background: var(--bg); color: var(--ink); }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 14.5px; line-height: 1.55; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc-deep); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--acc) 50%, transparent); outline-offset: 2px; }

.a-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--acc); color: #fff; }
.a-brand { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-family: var(--f-disp); font-size: 28px; font-weight: 700; line-height: 1; }
.a-brand img { background: #fff; border-radius: 8px; }
.a-nav { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.a-nav form { margin: 0; }
/* 링크도 밑줄 하이퍼링크가 아니라 알약 버튼으로 */
.a-pill { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.6); background: none; color: #fff; border-radius: 99px; padding: 4px 12px; cursor: pointer; text-decoration: none; font-size: 13px; line-height: 1.4; }
.a-pill:hover { background: rgba(255,255,255,.15); }
.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.a-main { max-width: 980px; margin: 0 auto; padding: 20px 16px 60px; display: flex; flex-direction: column; gap: 16px; }
.a-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.a-card h2 { margin: 0 0 6px; font-size: 18px; display: flex; align-items: baseline; gap: 8px; }
.a-card h2 small { font-size: 13px; color: var(--sub); font-weight: 500; }
.a-help { margin: 0 0 12px; color: var(--sub); font-size: 13px; font-weight: 400; }
.a-crumb { margin: 0; font-size: 13.5px; }
.a-back { display: inline-flex; align-items: center; gap: 4px; padding: 6px 14px 6px 10px; border-radius: 99px; background: var(--card); border: 1px solid var(--line); color: var(--acc-deep); font-weight: 600; text-decoration: none; transition: border-color .15s, background .15s; }
.a-back:hover { border-color: var(--acc); background: var(--soft); }
.a-empty { color: var(--sub); margin: 6px 0; }
/* 알림 = 토스트: 화면 위 가운데에 잠깐 떴다 사라진다(admin.js). 오류는 조금 더 오래, 누르면 닫힘. */
.a-flash { position: fixed; z-index: 100; top: 18px; left: 50%; transform: translate(-50%, -12px); opacity: 0; max-width: min(92vw, 520px);
  margin: 0; padding: 12px 18px; border-radius: 14px; font-weight: 600; box-shadow: 0 10px 28px rgba(60, 30, 15, .18); cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.3), opacity .25s; }
.a-flash.is-on { transform: translate(-50%, 0); opacity: 1; }
.a-flash--ok { background: #e3f6ec; color: #11613c; }
.a-flash--err { background: #fde9e7; color: #a3291f; }

.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); background: var(--soft); border-radius: 10px; padding: 8px 14px; cursor: pointer; font-weight: 500; white-space: nowrap; }
.a-btn:hover { border-color: var(--acc); }
.a-btn--primary { background: var(--acc); border-color: var(--acc); color: #fff; }
.a-btn--primary:hover { background: var(--acc-deep); }
.a-btn--danger { background: #fff; border-color: #f0c4bf; color: var(--danger); }
.a-btn--ghost { background: #fff; }
.a-btn--sm { padding: 3px 10px; font-size: 12.5px; }
.a-btn--icon { padding: 8px 10px; }

.a-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.a-form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--sub); flex: 1 1 160px; min-width: 0; }
.a-form-row label:first-of-type { flex: 2 1 240px; }
input, select, textarea { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; color: var(--ink); }
textarea { width: 100%; resize: vertical; line-height: 1.7; }
.a-block { display: block; margin: 16px 0 6px; font-weight: 700; }
.a-danger-row { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }

.a-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.a-list a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); }
.a-list a:hover { border-color: var(--acc); background: var(--soft); }
.a-list span { color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.a-tag { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: #eef1ef; color: var(--sub); }
.a-tag--on { background: #fde3d3; color: var(--acc-deep); }
.a-tag--badge { background: #9b2c3b; color: #fff; }
.a-tag--pin { display: inline-flex; align-items: center; gap: 3px; background: #fff1c2; color: #8a6200; }
.a-tag--pin .icon { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; transform: rotate(35deg); }
.a-tag--draft { background: #fff4c2; color: #806300; }
.a-tag--wait { background: #fff; color: var(--acc-deep); box-shadow: inset 0 0 0 1px #f5b088; }   /* 공개 예약 — 그날 새벽에 열림 */

.a-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.a-day { display: flex; flex-direction: column; gap: 1px; padding: 8px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); min-width: 0; font-variant-numeric: tabular-nums; }
.a-day:hover { border-color: var(--acc); }
.a-day-n { font-size: 11px; color: var(--sub); }
.a-day-d { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-day-s { font-size: 11.5px; }
.a-day-c { align-self: flex-start; margin-top: 3px; padding: 1px 8px; border-radius: 99px; background: var(--acc, #e0703a); color: #fff; font-size: 11px; font-weight: 800; }
.a-day.is-pub { background: #fde3d3; border-color: #f5b088; }
.a-day.is-pub .a-day-s { color: var(--acc-deep); font-weight: 700; }
.a-day.is-draft { background: #fff8d9; border-color: #f2df8a; }
.a-day.is-wait { background: #fff; border-style: dashed; }
.a-day.is-none .a-day-s { color: #bfa99b; }
.a-day.is-today { box-shadow: 0 0 0 2px var(--butter); }

.a-day-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.a-day-head h2 { margin: 0; }
.a-step { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.a-step:hover { border-color: var(--acc); }
.a-verse-add { display: flex; width: fit-content; margin-left: auto; }
.a-stack { display: flex; flex-direction: column; gap: 16px; }
.a-verses h2, .a-stack .a-card > h2 { margin-bottom: 12px; }
.a-verses ol { margin: 0 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.a-verse { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.a-verse input { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: #fff; }
/* 입력 + 목록(datalist): 직접 입력도 되고 ▾ 로 고를 수도 있다 */
.a-verse .combo-input { padding-right: 26px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b7a6a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 8px center / 12px; }
.a-verse .combo-input::-webkit-calendar-picker-indicator { opacity: 0; }
/* 목록 팝업(admin.js combo) — 브라우저 기본 목록은 Windows 다크 모드에서 검게 그려져 직접 그린다 */
.a-combo-pop { position: absolute; z-index: 50; margin: 0; padding: 4px; list-style: none; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px rgba(80, 30, 10, .16);
  scrollbar-width: thin; scrollbar-color: #e9cbb8 transparent; }
.a-combo-pop::-webkit-scrollbar { width: 8px; }
.a-combo-pop::-webkit-scrollbar-thumb { background: #e9cbb8; border-radius: 8px; }
.a-combo-pop::-webkit-scrollbar-track { background: transparent; }
.a-combo-pop li { padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.a-combo-pop li:hover, .a-combo-pop li.is-active { background: var(--soft); color: var(--acc-deep); }
.a-combo-pop li.is-current { font-weight: 700; color: var(--acc-deep); }
.a-book { width: 180px; }
.a-num { width: 92px; text-align: left; }
.a-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.a-spacer { flex: 1; }
.a-dialog { border: 0; border-radius: 18px; padding: 20px; width: min(760px, calc(100% - 32px)); }
.a-dialog::backdrop { background: rgba(15, 40, 28, .4); }
.a-dialog h3 { margin: 0 0 10px; }
.a-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.a-preview-grid h4 { margin: 0 0 6px; color: var(--acc-deep); }
.a-preview-grid p { margin: 0 0 6px; line-height: 1.75; }
.a-preview-grid sup { color: var(--acc); font-weight: 700; margin-right: 3px; }
@media (max-width: 640px) { .a-preview-grid { grid-template-columns: 1fr; } .a-grid { gap: 4px; } .a-day { padding: 6px 4px; } .a-day-n { display: none; } }

.a-shares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.a-shares li { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.a-share-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); }
.a-share-meta b { color: var(--ink); }
.a-share-meta form { margin: 0 0 0 auto; }
.a-share-meta form + form { margin-left: 0; }   /* [맨 위 고정]·[삭제] 를 오른쪽 끝에 나란히 */
.a-share-body { margin: 6px 0 0; white-space: pre-wrap; }

.a-login-body { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.a-login { width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.a-login img { background: var(--acc); border-radius: 12px; padding: 4px; }
.a-login h1 { margin: 4px 0 8px; font-family: var(--f-disp); font-size: 34px; line-height: 1; color: var(--acc-deep); }
.a-login label { font-size: 12.5px; color: var(--sub); }
.a-login button { margin-top: 8px; padding: 10px; }

/* 감사 내용 에디터(SunEditor) — 서신과 같은 에디터, 톤만 맞춤 */
.sun-editor { border-radius: 12px; border-color: var(--line); overflow: hidden; font-family: var(--f-body); }
.sun-editor .se-toolbar { background: var(--soft); outline: none; }
.sun-editor-editable { font-family: var(--f-body); font-size: 15px; line-height: 1.75; }
.a-card > :last-child { margin-bottom: 0; }

/* 확인 창(브라우저 confirm 대신) */
.a-confirm { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(40, 22, 14, .38); }
.a-confirm-card { width: min(100%, 380px); background: var(--card); border-radius: 18px; padding: 22px 20px 16px; box-shadow: 0 18px 44px rgba(40, 22, 14, .25); }
.a-confirm-card p { margin: 0 0 18px; font-weight: 600; line-height: 1.5; text-align: center; }
.a-confirm-btns { display: flex; gap: 8px; }
.a-confirm-btns .a-btn { flex: 1; justify-content: center; }
.a-btn--danger-fill { background: #c2412d; border-color: #c2412d; color: #fff; }
/* 날짜 화면 머리: 상태 뱃지는 맨 오른쪽, Day N 은 크게 */
.a-day-head > .a-tag { margin-left: auto; font-size: 13px; padding: 4px 12px; }
.a-day-head h2 small { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 99px; background: var(--acc, #e0703a); color: #fff; font-size: 15px; font-weight: 800; vertical-align: 3px; }

/* 감사말씀 줄: 기본 한 절, [여러 절] 체크하면 끝 장·절 */
.a-multi { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.a-multi input { width: 16px; height: 16px; margin: 0; accent-color: var(--acc); }
.a-multi:has(input:checked) { background: #fff1e6; border-color: var(--acc); color: var(--acc-deep); }
.a-range { display: inline-flex; align-items: center; gap: 6px; }
.a-range[hidden] { display: none; }
/* 홍보 이미지 미리 보기 */
.a-promo .a-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.a-promo-list { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.a-promo-fmts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.a-promo-fmts label { position: relative; display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
.a-promo-fmts input { position: absolute; opacity: 0; pointer-events: none; }
.a-promo-fmts label:has(input:checked) { background: var(--acc); border-color: var(--acc); color: #fff; }
.a-promo-fmts label:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.a-promo-item { flex: 1 1 140px; max-width: 260px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.a-promo-item .a-btn { justify-content: center; }
.a-promo-item figcaption { font-size: 12.5px; color: var(--sub); }
.a-promo-img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(80, 30, 10, .18); background: #c9643a; }

/* 가족 (admin/families) */
.a-family-form { display: flex; flex-direction: column; gap: 10px; }
.a-families { display: flex; flex-direction: column; gap: 8px; }
.a-family { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
.a-family__names { margin: 0 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.a-family__sep { color: var(--sub); font-size: 12.5px; margin-left: 4px; }
.a-family details > summary { list-style: none; display: inline-flex; }
.a-family details > summary::-webkit-details-marker { display: none; }
.a-family details[open] > summary { margin-bottom: 10px; }
.a-family details form + form { margin-top: 10px; }

/* 참여표 (admin/attendance) — 가로로 밀어 보는 표, 이름 칸은 왼쪽에 고정 */
.a-att-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.a-att { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.a-att th, .a-att td { padding: 4px 3px; text-align: center; border-bottom: 1px solid var(--line); white-space: nowrap; }
.a-att thead th { font-weight: 500; color: var(--sub); line-height: 1.25; }
.a-att thead th.is-today { color: var(--acc-deep); font-weight: 700; }
.a-att .a-att__name { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; padding-right: 10px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.a-att .a-att__name small { color: var(--sub); font-weight: 400; margin-left: 4px; }
.a-att .a-att__n { font-weight: 700; padding: 4px 8px; }
.a-att__dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px; background: var(--soft); border: 1px solid var(--line); vertical-align: middle; }
.a-att__dot.is-full { background: var(--acc); border-color: var(--acc); }
.a-att__dot.is-half { background: var(--butter); border-color: #e9a93a; }
.a-help .a-att__dot { width: 12px; height: 12px; vertical-align: -1px; }
.a-att .a-att__full { color: var(--acc-deep); }
.a-att__dot.is-future { background: none; border-style: dashed; }