*{box-sizing:border-box;margin:0;padding:0}
html{--cols:1}
body{
    font-family:Pretendard,system-ui;
    background:#0b0f1a;color:#e5e7eb;
}
.bg{
    position:fixed;inset:0;z-index:-1;
    background:
            radial-gradient(70% 60% at 0% 0%,#2b1d4d,transparent),
            radial-gradient(70% 60% at 100% 0%,#123c3a,transparent),
            #0b0f1a;
}
.sticky-wrap{position:sticky;top:0;z-index:1000}
.top{padding:20px 24px 10px}
.top .title{font-size:20px;font-weight:700}
.top span{font-size:13px;color:#9ca3af}
.panel{
    margin:0 24px 16px;padding:16px;border-radius:18px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
}
.selects{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:10px;
    margin-bottom:14px;
}

select{
    height:40px;border-radius:10px;
    background:#0f172a;color:#fff;
    border:1px solid rgba(255,255,255,.14);
    padding:0 10px;
}
#bookSearch{
    grid-column:1/-1;
    height:40px;
    border-radius:10px;
    background:#0f172a;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    padding:0 10px;
    outline:none;
}
#bookSearch::placeholder{color:rgba(229,231,235,.55)}

.versions{display:flex;gap:10px;flex-wrap:wrap}
.ver-pill{display:flex;align-items:center;gap:8px;padding:6px 14px;
    border-radius:999px;background:rgba(255,255,255,.08);cursor:pointer}
.ver-pill input{display:none}
.circle{
    width:16px;height:16px;border-radius:50%;
    border:2px solid rgba(255,255,255,.5);
    position:relative
}
.circle::after{
    content:"";width:8px;height:8px;border-radius:50%;
    background:#6366f1;position:absolute;
    top:50%;left:50%;transform:translate(-50%,-50%);
    opacity:0
}
input:checked + .circle{border-color:#6366f1}
input:checked + .circle::after{opacity:1}

.bible{padding:24px 24px 140px}
.verse-row{
    margin-bottom:16px;padding:16px;border-radius:16px;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
}
.verse-row.selected{
    border-color:#6366f1;background:rgba(99,102,241,.15)
}
.verse-num{
    margin-bottom:12px;padding:4px 10px;border-radius:999px;
    background:rgba(99,102,241,.25);display:inline-block
}
.ver-name{font-size:12px;color:#9ca3af;margin-bottom:4px}
.vtext{font-size:14px;line-height:1.7}

@media(min-width:768px){
    .verse-row{
        display:grid;
        grid-template-columns:repeat(var(--cols),1fr);
        gap:16px
    }
    .verse-num{grid-column:1/-1}
}

#copyBar{
    position:fixed;left:0;right:0;bottom:0;
    display:none;gap:12px;
    justify-content:center;align-items:center;
    padding:12px;background:#0f172a;z-index:1200;
}
#copyBtn{
    background:#6366f1;color:#fff;border:0;
    border-radius:12px;padding:10px 22px
}
@media all and (max-width: 480px) {
    #copyBar {flex-direction: column;}
}
#selInfo{color:#c7d2fe;font-size:14px}
#toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) scale(.96);
    background:#111827;
    color:#fff;
    padding:14px 20px;
    border-radius:14px;
    font-size:14px;
    line-height:1.4;
    box-shadow:0 10px 30px rgba(0,0,0,.45);

    opacity:0;
    pointer-events:none;
    transition:.25s ease;
    z-index:3000;
}

/* 기본 표시 */
#toast.show{
    opacity:1;
    transform:translateX(-50%) scale(1);
    pointer-events:auto;
}

/* 🔥 검색 오류 전용 */
#toast.error{
    background:linear-gradient(135deg,#dc2626,#b91c1c);
    color:#fff;
    font-weight:600;
}

/* 📱 키보드 열렸을 때: 검색창 바로 위 */
#toast.keyboard{
    bottom:auto;
    top:88px;               /* 검색 input 아래쪽 */
}

/* ===== 상단 네비 ===== */
.header-nav{
    display:grid;
    grid-template-columns:40px 1fr 40px;
    align-items:center;
}
.title-wrap{ text-align:center; }
.nav-btn{
    width:36px;
    height:36px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:22px;
    line-height:1;
    cursor:pointer;
}
.nav-btn:hover{ background:rgba(255,255,255,.12); }
.nav-btn:disabled{ opacity:.3; cursor:default; }

/* ===== Sticky Header Gradient ===== */
.sticky-wrap{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(11,15,26,0.92);
}

/* 헤더 아래로 자연스럽게 사라지는 그라데이션 */
.sticky-wrap::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 32px;
    pointer-events: none;
    background: linear-gradient(
            to bottom,
            rgba(11,15,26,0.92) 0%,
            rgba(11,15,26,0.6) 40%,
            rgba(11,15,26,0.25) 70%,
            rgba(11,15,26,0) 100%
    );
}
.copy-options .subtitle{ font-weight: bold; }
.copy-options{
    display:flex;
    gap:12px;
    align-items:center;
    font-size:13px;
    color:#e5e7eb;
    border: 2px solid #fff3;
    padding: 6px 12px;
    border-radius: 8px;
}

.copy-options label{
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer;
}

.copy-options input[type="radio"]{
    accent-color:#6366f1;
}
.copy-info {
    display: flex;
    gap: 10px;
    align-items: center;
}