/* =====================================================
   tutorial.css — 첫 방문 튜토리얼 오버레이 (독립 모듈)
   ===================================================== */

#jr-tutorial { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }

.jrt-backdrop { position: absolute; inset: 0; background: rgba(5, 10, 22, .82); backdrop-filter: blur(4px); }

.jrt-card {
    position: relative;
    width: min(460px, calc(100vw - 28px));
    background: linear-gradient(180deg, #14243f, #0f1b30);
    border: 1px solid #2d5a8f;
    border-radius: 16px;
    padding: 26px 24px 18px;
    color: #e8eefc;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    text-align: center;
}

.jrt-icon { font-size: 46px; line-height: 1; margin-bottom: 12px; }

.jrt-card h3 { font-size: 17px; font-weight: 800; margin-bottom: 10px; }

.jrt-card p { font-size: 13px; line-height: 1.75; color: #b8c9e8; margin-bottom: 12px; }
.jrt-card p b { color: #7ee787; }

.jrt-tip {
    font-size: 11.5px;
    background: #0a84ff18;
    border: 1px solid #0a84ff44;
    color: #9fc4f7;
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 14px;
}

.jrt-dots { display: flex; gap: 6px; justify-content: center; }
.jrt-dots span { width: 7px; height: 7px; border-radius: 50%; background: #2d4a75; transition: all .2s; }
.jrt-dots span.on { background: #4fc3f7; width: 18px; border-radius: 4px; }

.jrt-foot { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }

.jrt-btns { display: flex; gap: 8px; justify-content: center; }
.jrt-btns button {
    border: 1px solid #2d5a8f;
    background: #16283f;
    color: #9fc4f7;
    border-radius: 9px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
}
.jrt-btns button:hover:not(:disabled) { background: #0a84ff33; color: #fff; }
.jrt-btns button:disabled { opacity: .35; cursor: default; }
#jrt-next { background: linear-gradient(135deg, #1d7a4f, #14603a); border-color: #22c55e66; color: #fff; min-width: 110px; }
#jrt-next:hover { filter: brightness(1.2); }

#jrt-skip { font-weight: 400 !important; color: #7d93b8 !important; }

.jrt-dontshow { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #7d93b8; cursor: pointer; margin-top: 4px; }

/* 헤더 도움말 버튼 */
.header-help-btn {
    height: 30px;
    padding: 0 11px;
    border-radius: 15px;
    border: 1px solid #ffffff33;
    background: #16213e;
    color: #ffd75e;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.header-help-btn:hover { background: #0a84ff33; }

/* ── 모바일 ── */
@media (max-width: 768px) {
    .jrt-card { padding: 20px 16px 14px; }
    .jrt-icon { font-size: 36px; }
    .jrt-card h3 { font-size: 15px; }
    .jrt-card p { font-size: 12px; }
}