@font-face{font-family:'KekeFont';font-weight:400;font-display:swap;src:url(/fonts/KekeFont-Regular-a-1.200.woff2) format('woff2');unicode-range:U+20-7E,U+A0,U+B0,U+B7,U+D7,U+F7,U+2002-2003,U+2009,U+200B,U+2010-2011,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2190-2194,U+2212}
@font-face{font-family:'KekeFont';font-weight:500;font-display:swap;src:url(/fonts/KekeFont-Medium-a-1.200.woff2) format('woff2');unicode-range:U+20-7E,U+A0,U+B0,U+B7,U+D7,U+F7,U+2002-2003,U+2009,U+200B,U+2010-2011,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2190-2194,U+2212}
@font-face{font-family:'KekeFont';font-weight:700;font-display:swap;src:url(/fonts/KekeFont-Bold-a-1.200.woff2) format('woff2');unicode-range:U+20-7E,U+A0,U+B0,U+B7,U+D7,U+F7,U+2002-2003,U+2009,U+200B,U+2010-2011,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2190-2194,U+2212}
/* 케케폰트 기본 글자 + 직접 그린 악센트(프랑스어·이탈리아어·아랍어 음역) */
@font-face{font-family:'KekeFont';font-weight:400;font-display:swap;src:url(/fonts/KekeLatin-Regular.woff2) format('woff2');unicode-range:U+AB,U+BB,U+C0-17F,U+2BE-2BF,U+1E00-1EFF}
@font-face{font-family:'KekeFont';font-weight:500;font-display:swap;src:url(/fonts/KekeLatin-Medium.woff2) format('woff2');unicode-range:U+AB,U+BB,U+C0-17F,U+2BE-2BF,U+1E00-1EFF}
@font-face{font-family:'KekeFont';font-weight:700;font-display:swap;src:url(/fonts/KekeLatin-Bold.woff2) format('woff2');unicode-range:U+AB,U+BB,U+C0-17F,U+2BE-2BF,U+1E00-1EFF}

:root{
  --bg:#0f1c1a; --glass:rgba(12,22,21,.78); --line:rgba(233,214,170,.18); --text:#f3ead6; --dim:rgba(243,234,214,.62);
  --gold:#c99a3c; --gold2:#e6c06a; --green:#1f5a3a; --live:#5fd08a;
  --ui:'KekeFont','Amiri',system-ui,sans-serif; --ar:'Amiri','KekeFont',serif;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--ui);overflow:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
html[lang=ar] body{--ui:'Amiri','KekeFont',serif}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block;touch-action:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
select{font:inherit;color:var(--text);background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
select option{background:#13221f}
[hidden]{display:none!important}

#top{position:fixed;inset:0 0 auto 0;display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;z-index:5;pointer-events:none;background:linear-gradient(rgba(8,14,13,.55),transparent)}
#top>*{pointer-events:auto}
.brand{display:flex;align-items:center;gap:8px;font-size:18px}
.mark{width:22px;height:26px;background:var(--gold);clip-path:path('M11 0 C5 6 0 9 0 16 V26 H22 V16 C22 9 17 6 11 0 Z')}
.sp{flex:1}
.pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);box-shadow:0 0 0 0 rgba(95,208,138,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(95,208,138,0)}100%{box-shadow:0 0 0 0 rgba(95,208,138,0)}}
#liveN,#liveN2{font-variant-numeric:tabular-nums;font-weight:700}
.seg{display:inline-flex;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:3px;backdrop-filter:blur(8px)}
.seg button{padding:6px 10px;border-radius:999px;font-size:13px;color:var(--dim)}
.seg button.on{background:var(--gold);color:#16120a;font-weight:700}
.seg.big button{padding:10px 26px;font-size:17px}

.overlay{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,rgba(15,28,26,.55),rgba(8,14,13,.9))}
.box{width:min(460px,100%);text-align:center;padding:30px 24px 22px;border-radius:24px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.arch{width:64px;height:76px;margin:0 auto 12px;background:linear-gradient(var(--gold2),var(--gold));clip-path:path('M32 0 C16 18 0 26 0 46 V76 H64 V46 C64 26 48 18 32 0 Z')}
.box h1{font-size:34px;letter-spacing:.02em}
.sub{color:var(--dim);margin-top:6px}
.live2{margin:14px 0 4px;display:flex;justify-content:center;align-items:center;gap:8px;font-size:15px}
.q{margin:14px 0 8px;color:var(--dim);font-size:14px}
.primary{display:block;width:100%;margin-top:18px;padding:14px;border-radius:14px;background:linear-gradient(var(--gold2),var(--gold));color:#16120a;font-weight:700;font-size:17px}
.link{display:block;margin:12px auto 0;padding:8px 14px;color:var(--gold2);font-size:15px;text-decoration:underline;text-underline-offset:4px}
.seg.big{margin-top:16px}
.primary{font-size:20px;padding:18px}
.primary:disabled{opacity:.55;cursor:wait}
.note{margin-top:14px;font-size:12px;line-height:1.55;color:var(--dim)}

#card{position:fixed;z-index:6;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(640px,calc(100% - 32px));max-height:56vh;overflow:auto;padding:16px 18px;border-radius:20px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:rise .35s ease}
@keyframes rise{from{opacity:0;transform:translate(-50%,10px)}}
.row1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
#cStep{font-weight:700;color:var(--gold2);font-size:17px}
#cMeta{font-size:13px;color:var(--dim);display:flex;gap:10px;align-items:center}
.ar{font-family:var(--ar);font-size:26px;line-height:1.9;margin-top:8px;text-align:center}
.ar.small{font-size:20px;margin-top:2px;color:var(--dim)}
.ar:empty{display:none}
.tr{font-style:italic;color:var(--dim);text-align:center;font-size:14px}
.tr:empty{display:none}
#cDesc{margin-top:8px;line-height:1.6;font-size:15px}
#cDesc:empty{display:none}
#cBtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;justify-content:center}
#cBtns button{padding:10px 18px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.06);font-size:15px}
#cBtns button.go{background:linear-gradient(var(--gold2),var(--gold));color:#16120a;font-weight:700;border:0}
#cBtns select{padding:9px 10px}
.prog{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:10px;overflow:hidden}
.prog i{display:block;height:100%;background:var(--gold);transition:width .3s linear}

#views{position:fixed;z-index:6;top:calc(max(10px,env(safe-area-inset-top)) + 50px);left:50%;transform:translateX(-50%);display:flex;gap:6px;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none}
#views button{white-space:nowrap}
#povBtn.on{background:var(--gold);color:#16120a}
#views button.on{background:var(--gold);color:#16120a}

#panel{position:fixed;z-index:7;top:calc(max(10px,env(safe-area-inset-top)) + 50px);inset-inline-end:16px;width:min(320px,calc(100% - 32px));max-height:calc(100% - 90px);overflow:auto;padding:14px 16px;border-radius:18px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);display:flex;flex-direction:column;gap:10px}
.ph{display:flex;justify-content:space-between;align-items:center;font-size:17px}
.x{font-size:24px;line-height:1;color:var(--dim)}
#hijri{color:var(--gold2);font-family:var(--ar);font-size:17px}
.loc{display:flex;gap:6px}
.loc select{flex:1;min-width:0}
#tlist{list-style:none;padding:0;display:grid;gap:2px}
#tlist li{display:flex;justify-content:space-between;padding:7px 10px;border-radius:10px;font-variant-numeric:tabular-nums}
#tlist li.next{background:rgba(201,154,60,.2);color:var(--gold2);font-weight:700}
#tlist li.sun{color:var(--dim)}
.qib{display:flex;gap:14px;align-items:center;color:var(--text)}
#qDeg{font-size:22px;font-weight:700;color:var(--gold2)}
.dim{color:var(--dim);font-size:13px}
#panel label{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
#panel label select{max-width:60%}

@media (max-width:640px){
  .brand b,#timesBtn span{display:none}
  #top{gap:6px}
  .seg button{padding:5px 8px;font-size:12px}
  .pill{padding:6px 10px;font-size:13px}
  .ar{font-size:22px}
  .ar.small{font-size:17px}
  #card{max-height:52vh;padding:14px}
}

/* 예배 중에는 장면이 보이게 카드를 작게 */
#card.compact{max-height:34vh;padding:12px 16px}
#card.compact .ar{font-size:20px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:4px}
#card.compact #cAr2,#card.compact #cTr{display:none}
#card.compact #cDesc{font-size:14px;margin-top:4px}