* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #120c08; color: #f3e6d0;
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none; }
#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }

/* 위쪽 */
#topbar { position: fixed; left: 0; right: 0; top: 0; padding: calc(env(safe-area-inset-top) + 12px) 14px 0;
  display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }
.pill { pointer-events: auto; display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px;
  border-radius: 22px; background: rgba(24, 16, 10, .62); border: 1px solid rgba(232, 200, 140, .28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: 16px; font-weight: 600; }
#roomPill span { letter-spacing: .5px; }
#rightPill button { background: none; border: 0; font-size: 20px; padding: 4px; }
.cnt b { font-size: 17px; }

/* 자막 */
#subtitle { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 104px);
  width: min(92vw, 560px); padding: 10px 14px; border-radius: 14px; text-align: center;
  background: rgba(20, 13, 8, .66); border: 1px solid rgba(232, 200, 140, .22); pointer-events: none; }
#subtitle .who { font-size: 11px; color: #d8b77a; margin-bottom: 3px; letter-spacing: 1px; }
#subText { font-size: 15px; line-height: 1.45; word-break: keep-all; transition: opacity .4s; }

/* 행동 단추 */
#actions { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 14px);
  display: flex; gap: 6px; padding: 6px; border-radius: 40px; background: rgba(24, 16, 10, .7);
  border: 1px solid rgba(232, 200, 140, .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#actions button { width: min(70px, 17vw); height: 68px; border-radius: 34px; border: 1px solid transparent; background: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 600; }
#actions button i { font-style: normal; font-size: 22px; line-height: 1; }
#actions button.on { background: rgba(232, 190, 110, .2); border-color: rgba(232, 200, 140, .55); color: #ffe2a8; }

/* 조이스틱 */
#joy { position: fixed; left: calc(env(safe-area-inset-left) + 22px); bottom: calc(env(safe-area-inset-bottom) + 170px);
  width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 240, 210, .08);
  border: 2px solid rgba(232, 200, 140, .3); touch-action: none; }
#knob { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
  background: rgba(240, 210, 150, .45); border: 1px solid rgba(255, 235, 190, .6); }
@media (hover: hover) and (pointer: fine) { #joy { opacity: .55; } }

#toast { position: fixed; left: 50%; top: 80px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px;
  background: rgba(30, 20, 12, .88); border: 1px solid rgba(232, 200, 140, .35); font-size: 14px;
  opacity: 0; transition: opacity .3s; pointer-events: none; width: max-content; max-width: 90vw; text-align: center; word-break: keep-all; }
#toast.show { opacity: 1; }
#toast { z-index: 40; }   /* 기도제목 창·목록 창 위로 보이게 */

/* 입장 화면 */
#enter { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(ellipse at 50% 30%, rgba(80, 50, 25, .55), rgba(10, 6, 4, .92)); z-index: 10; }
#enter .card { width: min(100%, 380px); text-align: center; padding: 30px 24px 24px; border-radius: 22px;
  background: rgba(30, 20, 12, .82); border: 1px solid rgba(232, 200, 140, .3); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
#enter .cross { font-size: 44px; color: #e8c27a; text-shadow: 0 0 20px rgba(255, 200, 110, .6); }
#enter h1 { margin: 6px 0 8px; font-size: 26px; letter-spacing: 2px; font-family: "Nanum Myeongjo", "Batang", serif; }
#enter .sub { margin: 0 0 20px; color: #cdb894; font-size: 14px; line-height: 1.6; }
#enter .autoName { padding: 12px; border-radius: 12px; background: rgba(0, 0, 0, .3); color: #d8c4a0; font-size: 14px; }
#enter .autoName b { display: block; margin-top: 4px; color: #ffe2a8; font-size: 16px; }
#enter .autoName b:empty { display: none; }
#enterBtn { width: 100%; height: 52px; margin-top: 10px; border: 0; border-radius: 12px; font-size: 17px; font-weight: 700;
  background: linear-gradient(#e9c47e, #c99a4c); color: #2a1a0a; }
#enterBtn:disabled { opacity: .6; }
#enter .guide { margin-top: 18px; font-size: 12.5px; color: #b8a07a; line-height: 1.9; text-align: left; }
#enterMsg { margin-top: 10px; color: #ff9f8a; font-size: 13px; min-height: 1em; }



/* 아멘 (나에게만 보이고 들린다) */
#amenPop { position: fixed; left: 50%; top: 42%; transform: translate(-50%, 0) scale(.6); opacity: 0; pointer-events: none;
  font-size: 34px; font-weight: 800; color: #ffe2a8; letter-spacing: 3px;
  text-shadow: 0 0 18px rgba(255, 200, 110, .9), 0 2px 6px rgba(0, 0, 0, .6); }
#amenPop.go { animation: amen 1.4s ease-out; }
@keyframes amen { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  20% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  70% { opacity: 1; transform: translate(-50%, -30px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }

/* 예배당 고르기 */
#roomPill { color: inherit; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
#roomPill small { font-size: 12px; opacity: .7; }
#roomSheet { position: fixed; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .45); }
#roomSheet .sheet, #prayerSheet .sheet { width: min(100%, 420px); max-height: 70vh; overflow: auto; padding: 18px 16px calc(env(safe-area-inset-bottom) + 16px);
  border-radius: 20px 20px 0 0; background: #24180f; border: 1px solid rgba(232, 200, 140, .3); }
.sheetHead { font-size: 17px; font-weight: 700; margin-bottom: 12px; }
.sheetHead small { font-weight: 400; color: #b8a07a; font-size: 13px; }
#roomList button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; margin-bottom: 8px;
  border-radius: 12px; border: 1px solid rgba(232, 200, 140, .25); background: rgba(255, 240, 210, .06); font-size: 16px; }
#roomList button.cur { border-color: #e8c27a; background: rgba(232, 190, 110, .18); }
#roomList button:disabled { opacity: .45; }
#roomList button span { color: #cdb894; font-size: 14px; }
#roomClose { width: 100%; height: 46px; margin-top: 4px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 15px; }
#actions button span { white-space: nowrap; letter-spacing: -.3px; }
@media (max-width: 380px) { #actions button { font-size: 12px; } }

/* 공지 */
#notice { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top) + 112px); z-index: 3;
  width: min(92vw, 520px); padding: 9px 14px; border-radius: 12px; text-align: center; font-size: 14px; line-height: 1.45;
  background: rgba(120, 70, 20, .85); border: 1px solid rgba(255, 210, 140, .5); color: #fff3dc; pointer-events: none; word-break: keep-all; }

/* 관리자 */
#admBtn { position: fixed; right: 14px; top: calc(env(safe-area-inset-top) + 64px); z-index: 20; height: 38px; padding: 0 14px;
  border-radius: 19px; border: 1px solid #ffcf6e; background: rgba(120, 40, 20, .9); color: #ffe7b0; font-size: 14px; font-weight: 700; }
#admSheet { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: flex-end; background: rgba(0, 0, 0, .35); }
.admBox { width: min(100%, 440px); height: 100%; overflow-y: auto; padding: calc(env(safe-area-inset-top) + 12px) 14px 30px;
  background: #1d140d; border-left: 1px solid rgba(232, 200, 140, .3); box-sizing: border-box; }
.admHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.admHead b { font-size: 18px; flex: 1; }
.admHead button { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .12); }
#admPing { font-size: 12px; padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
#admPing.good, .admLevel.good { color: #8fe0a0; } #admPing.warn, .admLevel.warn { color: #ffd36e; } #admPing.bad, .admLevel.bad { color: #ff8f7a; }
.admBox section { margin: 12px 0; padding: 14px; border-radius: 14px; background: rgba(255, 240, 210, .05); border: 1px solid rgba(232, 200, 140, .15); }
.admBox h3 { margin: 0 0 10px; font-size: 15px; } .admBox h3 small { font-weight: 400; color: #a8916c; font-size: 12px; margin-left: 6px; }
.admGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.admGrid div { padding: 8px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.admGrid small { display: block; font-size: 11px; color: #b8a07a; } .admGrid b { font-size: 17px; }
.admLevel { margin: 10px 0 6px; font-size: 14px; font-weight: 700; }
.admRoom { margin-top: 8px; } .admRoom.off { opacity: .5; }
.admRoom .l { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .admRoom .l span { color: #cdb894; }
.admRoom .bar { height: 7px; margin-top: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.admRoom .bar i { display: block; height: 100%; background: linear-gradient(90deg, #8fe0a0, #ffd36e, #ff8f7a); background-size: 300px 100%; }
.admBox details { margin-top: 10px; font-size: 13px; } .admBox pre { white-space: pre-wrap; word-break: break-all; font-size: 11px; color: #e8b9a8; max-height: 160px; overflow: auto; }
.admFoot { margin-top: 8px; font-size: 11px; color: #8f7a5c; line-height: 1.5; }
.admBig { width: 100%; height: 54px; border-radius: 12px; border: 1px solid #5fbf74; background: rgba(60, 140, 80, .25); font-size: 16px; font-weight: 700; }
.admBig.closed { border-color: #e06a55; background: rgba(170, 50, 30, .3); }
.admBox input { width: 100%; height: 44px; margin-top: 8px; padding: 0 12px; box-sizing: border-box; border-radius: 10px;
  border: 1px solid rgba(232, 200, 140, .3); background: rgba(0, 0, 0, .3); color: #fff; font-size: 14px; }
.admHelp { margin: 8px 0 0; font-size: 12px; color: #a8916c; line-height: 1.55; }
.admRow { display: flex; align-items: center; gap: 10px; }
.admRow button { width: 54px; height: 46px; border-radius: 12px; border: 1px solid rgba(232, 200, 140, .3); background: rgba(255, 255, 255, .07); font-size: 20px; }
.admVal { flex: 1; text-align: center; font-size: 15px; } .admVal b { font-size: 26px; } .admVal small { color: #b8a07a; }
.admSeg { display: flex; gap: 6px; } .admSeg button { flex: 1; height: 42px; border-radius: 10px; border: 1px solid rgba(232, 200, 140, .25); background: rgba(255, 255, 255, .05); font-size: 14px; }
.admSeg button.on { background: rgba(232, 190, 110, .25); border-color: #e8c27a; color: #ffe2a8; font-weight: 700; }
.admRow2 { display: flex; gap: 8px; margin-top: 8px; } .admRow2 button { flex: 1; height: 42px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .1); }
.admLogout { display: block; text-align: center; margin-top: 16px; color: #b8a07a; font-size: 14px; }

/* 앱 안 브라우저(스레드·인스타 등)가 끌기를 스크롤·당겨서 새로고침으로 쓰지 못하게 */
html, body { touch-action: none; overscroll-behavior: none; }
/* 페이지 자체를 화면에 못 박는다: 밀릴 내용이 없으면 앱 브라우저도 스크롤을 시작하지 못한다 */
html { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; -webkit-text-size-adjust: 100%; }
#joy, #knob, #actions, #topbar { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sheet, .admBox { touch-action: pan-y; overscroll-behavior: contain; }

/* 앱 안 브라우저 안내 */
#inapp { margin: 12px 0 2px; padding: 12px; border-radius: 12px; background: rgba(255, 200, 110, .1); border: 1px solid rgba(255, 200, 110, .35); }
.inappMsg { font-size: 13.5px; line-height: 1.55; color: #ffe2a8; margin-bottom: 10px; }
#inappOpen { display: flex; align-items: center; justify-content: center; height: 50px; border-radius: 12px; text-decoration: none;
  font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(#4b8df5, #2f6fd8); }
#inappIos { font-size: 13.5px; line-height: 1.6; color: #f3e6d0; }
#inapp.android + #enterBtn { background: rgba(255, 255, 255, .12); color: #f3e6d0; font-weight: 600; }
.admBots { margin-top: 8px; display: grid; gap: 4px; }
.admBots div { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(30, 90, 200, .18); font-size: 13px; }
.admBots span { color: #a9c4f5; font-size: 12px; }

/* 기도제목 */
#prayBtn { position: fixed; left: 14px; top: calc(env(safe-area-inset-top) + 64px); z-index: 4; height: 38px; padding: 0 14px;
  border-radius: 19px; border: 1px solid rgba(232, 200, 140, .45); background: rgba(24, 16, 10, .72); color: #ffe2a8;
  font-size: 14px; font-weight: 700; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#prayBtn.active { border-color: #ffcf6e; background: rgba(120, 70, 20, .85); }
#prayerSheet { position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .45); }
.prHelp { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: #cdb894; }
.prHelp b { color: #ffe2a8; }
#prText { width: 100%; height: 130px; padding: 12px; box-sizing: border-box; border-radius: 12px; resize: none;
  border: 1px solid rgba(232, 200, 140, .4); background: rgba(0, 0, 0, .35); color: #fff; font: inherit; font-size: 15px; line-height: 1.5;
  -webkit-user-select: text; user-select: text; touch-action: auto; }
.prCount { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #a8916c; margin: 4px 2px 8px; }
#prMsg { color: #ff9f8a; font-weight: 700; font-size: 13px; }
#prSend { width: 100%; height: 50px; border: 0; border-radius: 12px; font-size: 16px; font-weight: 700; background: linear-gradient(#e9c47e, #c99a4c); color: #2a1a0a; }
#prSend:disabled { opacity: .6; }
#prayerStatus { padding: 14px; border-radius: 12px; background: rgba(255, 240, 210, .06); border: 1px solid rgba(232, 200, 140, .25); margin-bottom: 8px; }
#prayerStatus .big { font-size: 20px; font-weight: 800; color: #ffe2a8; margin: 4px 0; }
#prayerStatus .sub { font-size: 13px; color: #cdb894; line-height: 1.6; }
#prayerStatus .note { margin-top: 10px; padding: 10px; border-radius: 10px; background: rgba(90, 140, 255, .12); font-size: 13.5px; line-height: 1.6; color: #e6eeff; }
#prayerClose { width: 100%; height: 44px; margin-top: 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 15px; }
.admPrayers { margin-top: 10px; display: grid; gap: 6px; max-height: 340px; overflow-y: auto; font-size: 13px; }
.admPr { padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); border-left: 3px solid #8f7a5c; }
.admPr .h { display: flex; align-items: center; gap: 8px; } .admPr .h b { flex: 1; }
.admPr .s { color: #b8a07a; font-size: 12px; } .admPr .t { margin-top: 4px; color: #e8dcc8; line-height: 1.5; white-space: pre-wrap; word-break: break-all; }
.admPr button { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(224, 106, 85, .35); font-size: 12px; }
.admPr.st-ready, .admPr.st-scheduled { border-left-color: #8fe0a0; } .admPr.st-reading { border-left-color: #ffd36e; }
.admPr.st-rejected, .admPr.st-failed { border-left-color: #e06a55; opacity: .75; } .admPr.st-done { opacity: .6; }
.prHead { display: flex; align-items: center; justify-content: space-between; }
#prayerX { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 18px; line-height: 1; color: #f3e6d0; }

/* "내 사연 기도해 주세요" 단추: 작지만 조금 강조 */
#prayBtn { height: 36px; padding: 0 14px; border-radius: 18px; border: 1.5px solid #fff1cf; color: #2a1405; font-size: 14px; font-weight: 800;
  letter-spacing: -.2px; background: linear-gradient(#f7d998, #dca44c); text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); animation: prayGlow 2.6s ease-in-out infinite; white-space: nowrap; }
#prayBtn.active { color: #ffe9bd; background: rgba(120, 70, 20, .85); border-color: #ffcf6e; text-shadow: none; animation: none; }
@keyframes prayGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 205, 110, .7), 0 2px 10px rgba(0, 0, 0, .35); }
  50% { box-shadow: 0 0 0 7px rgba(255, 205, 110, 0), 0 0 14px rgba(255, 205, 110, .55); } }
#notice { top: calc(env(safe-area-inset-top) + 108px); }

/* 다 같이 아멘 (기도제목 기도의 끝에 모두의 화면 가운데에 뜬다) */
#amenBig { position: fixed; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid #fff1cf; background: radial-gradient(circle at 50% 35%, #ffe7a8, #d99a3e); color: #2a1405;
  font-size: 30px; font-weight: 900; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 0 0 0 rgba(255, 210, 120, .8), 0 10px 30px rgba(0, 0, 0, .45); animation: amenPulse 1.2s ease-in-out infinite; }
#amenBig span { font-size: 36px; line-height: 1; }
#amenBig.done { animation: none; opacity: .0; transition: opacity .6s; pointer-events: none; }
@keyframes amenPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 120, .75), 0 10px 30px rgba(0, 0, 0, .45); transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 0 0 18px rgba(255, 210, 120, 0), 0 10px 30px rgba(0, 0, 0, .45); transform: translate(-50%, -50%) scale(1.06); } }