/* =====================================================================
   천국 네비게이션 · 말씀 마인드맵 (구절 중심)
   - 그누보드(리빌더) 본문 삽입 전제: 모든 스타일은 #hnav-app 안으로 한정
   - 외부 라이브러리 없음. 성경 본문은 krv.js (개역한글 1961, 31,101절)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap');
/* 테마가 넣는 페이지 제목 숨김 + 본문을 화면 전체 폭으로 */
#hnav-app {
    --bg: #f5f5f7; --text: #1d1d1f; --sub: #86868b; --blue: #0071e3; --red: #ff3b30; --purple: #5856d6; --green: #34c759; --orange: #ff9500;
    --card: #ffffff; --line: rgba(0,0,0,0.06);
    width: 100vw; max-width: none; margin: 0 0 0 calc(50% - 50vw); padding: 10px 24px 60px; box-sizing: border-box;
    font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
    color: var(--text); -webkit-font-smoothing: antialiased; word-break: keep-all;
}
#hnav-app * { box-sizing: border-box; }
#hnav-app button, #hnav-app input, #hnav-app select, #hnav-app svg text { font-family: inherit; }

#hnav-app .hn-head { text-align: center; margin: 15px 0 12px; }
#hnav-app .hn-title { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.3; }
#hnav-app .hn-desc { font-size: 15px; color: var(--sub); font-weight: 500; margin-top: 6px; }
#hnav-app .hn-thesis { margin: 12px auto 0; max-width: 760px; font-size: 14px; font-weight: 700; color: #333;
    background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; line-height: 1.7; }
#hnav-app .hn-thesis b { color: var(--blue); }

#hnav-app .hn-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0; }
#hnav-app.compact .hn-head { display: none; }
#hnav-app.compact .hn-tabs { margin: 2px 0 4px; }
#hnav-app.compact .hn-tab { padding: 6px 12px; font-size: 13px; }
#hnav-app.compact .mm-stage { height: 88vh; }
#hnav-app .mm-tools .btn { padding: 7px 10px; font-size: 12.5px; }
#hnav-app .mm-modes button { padding: 5px 10px; font-size: 12.5px; }
#hnav-app .hn-intro-toggle { display: none; font-size: 12px; font-weight: 800; color: var(--sub); background: none; border: none; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
#hnav-app.compact .hn-intro-toggle { display: inline-block; }
#hnav-app .hn-tab { padding: 8px 14px; font-size: 14px; }
#hnav-app .hn-tab { padding: 10px 18px; border-radius: 12px; border: none; background: #fff; color: var(--sub);
    font-weight: 800; font-size: 15px; cursor: pointer; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
#hnav-app .hn-tab.active { background: var(--text); color: #fff; }
#hnav-app .hn-view { display: none; }
#hnav-app .hn-view.active { display: block; }

#hnav-app .hn-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px;
    box-shadow: 0 4px 15px rgba(0,0,0,.04); margin-bottom: 18px; }
#hnav-app .hn-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 900; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; }
#hnav-app .hn-card h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--blue); }
#hnav-app .hn-note { font-size: 13.5px; color: var(--sub); font-weight: 600; line-height: 1.7; }
#hnav-app .btn { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.92); font-weight: 800; font-size: 13px; cursor: pointer; color: var(--text); }
#hnav-app .btn.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
#hnav-app .btn.dark { background: var(--text); color: #fff; border-color: var(--text); }

/* ---------- 네비게이션 지도 ---------- */
#hnav-app .nav-svg { width: 100%; height: auto; display: block; }
/* 정류장: 유리 알약 버튼 (default · hover · focus · pressed · 다녀옴) */
#hnav-app .nav-svg { overflow: visible; }
#hnav-app .nav-stop { cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
#hnav-app .nav-stop .np { transform-box: fill-box; transform-origin: center; transition: transform .2s ease; }
#hnav-app .nav-stop .np-ring { transition: stroke .2s, stroke-width .2s; }
#hnav-app .nav-stop:hover .np { transform: translateY(-3px); }
#hnav-app .nav-stop:hover .np-ring { stroke: #b7aefb; }
#hnav-app .nav-stop:focus-visible .np-ring { stroke: #6c5ce7; stroke-width: 2.5; }
#hnav-app .nav-stop:active .np { transform: scale(.97); }
#hnav-app .nav-stop:active .np-ring { stroke: #6c5ce7; stroke-width: 2; }
#hnav-app .nav-stop .np-check { opacity: 0; transition: opacity .25s; }
#hnav-app .nav-stop.done .np-check { opacity: 1; }
#hnav-app .stage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
#hnav-app .stage-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: #fafafc; }
#hnav-app .stage-num { display: inline-flex; min-width: 30px; height: 24px; padding: 0 10px; border-radius: 980px; font-weight: 800; align-items: center; justify-content: center; font-size: 12.5px; margin-right: 8px; vertical-align: middle; }
#hnav-app .stage-name { font-weight: 900; font-size: 15px; }
#hnav-app .stage-sub { font-size: 13px; color: var(--sub); font-weight: 700; margin: 4px 0 6px; }
#hnav-app .stage-ref { font-size: 13px; font-weight: 700; color: var(--blue); }
#hnav-app .stage-ref button { background: none; border: none; color: var(--blue); font-weight: 800; cursor: pointer; padding: 0 6px 0 0; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 전개도 ---------- */
#hnav-app .net-wrap { overflow-x: auto; padding: 6px 0; }
#hnav-app .net { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, auto); gap: 10px; min-width: 640px; }
#hnav-app .face { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 6px; border-radius: 12px; background: #e9e9ee; }
#hnav-app .face.U { grid-column: 2; grid-row: 1; } #hnav-app .face.L { grid-column: 1; grid-row: 2; }
#hnav-app .face.F { grid-column: 2; grid-row: 2; } #hnav-app .face.R { grid-column: 3; grid-row: 2; }
#hnav-app .face.B { grid-column: 4; grid-row: 2; } #hnav-app .face.D { grid-column: 2; grid-row: 3; }
#hnav-app .cell { min-height: 60px; border-radius: 8px; padding: 6px 4px; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; justify-content: center; gap: 2px; transition: .15s; border: 2px solid transparent; }
#hnav-app .cell:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.12); }
#hnav-app .cell.center { border-color: #1d1d1f; }
#hnav-app .cell.sel { outline: 3px solid #1d1d1f; outline-offset: 1px; }
#hnav-app .cell .sp { font-size: 12.5px; font-weight: 900; line-height: 1.25; }
#hnav-app .cell .fl { font-size: 10.5px; font-weight: 700; line-height: 1.2; opacity: .85; text-decoration: line-through; }
#hnav-app .cell .cnt { font-size: 9.5px; font-weight: 800; opacity: .7; }
#hnav-app .net-ctl { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
#hnav-app .chip { padding: 7px 14px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--sub); }
#hnav-app .chip.on { background: var(--text); color: #fff; border-color: var(--text); }
#hnav-app .face-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
#hnav-app .face-legend span { font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; }
#hnav-app .face-legend i, #hnav-app .pn-face i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }

/* ---------- 마인드맵 ---------- */
#hnav-app .mm-layout { position: relative; width: 100vw; margin-left: -24px; }
#hnav-app .mm-stage { position: relative; background: radial-gradient(circle at center, #ffffff 0%, #eceef2 100%);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); height: 84vh; min-height: 520px; overflow: hidden; touch-action: none; cursor: grab;
    user-select: none; -webkit-user-select: none; -ms-user-select: none; }
#hnav-app .mm-stage svg, #hnav-app .mm-stage svg * { user-select: none; -webkit-user-select: none; }
#hnav-app .mm-stage:active { cursor: grabbing; }
#hnav-app .mm-stage svg { width: 100%; height: 100%; display: block; }
#hnav-app .mm-node { cursor: pointer; }
#hnav-app .mm-card { transform-box: fill-box; transition: transform .18s ease; }
#hnav-app .mm-node:hover .mm-card { transform: translateY(-2px); }
#hnav-app .mm-node:hover .mm-ring { stroke: #8b7cf6; }
#hnav-app .mm-node:active .mm-card { transform: translateY(0); }
#hnav-app .mm-w:hover { text-decoration: underline; }
#hnav-app .mm-edge.exp { stroke-dasharray: 6 4; }
#hnav-app .mm-edge { fill: none; stroke-linecap: round; opacity: .8; }
#hnav-app .mm-jump { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; z-index: 6; }
#hnav-app .mm-jump button { width: 52px; height: 46px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.96); box-shadow: 0 3px 10px rgba(0,0,0,.12); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; color: var(--text); font-family: inherit; transition: transform .12s, background .12s; }
#hnav-app .mm-jump button b { font-size: 16px; line-height: 1; font-weight: 900; }
#hnav-app .mm-jump button span { font-size: 9.5px; line-height: 1; margin-top: 4px; color: var(--sub); font-weight: 700; white-space: nowrap; }
#hnav-app .mm-jump button:hover { background: var(--text); color: #fff; transform: scale(1.06); }
#hnav-app .mm-jump button:hover span { color: #fff; }
#hnav-app .mm-jump button[data-go="top"], #hnav-app .mm-jump button[data-go="bottom"] { background: #0071e3; color: #fff; border-color: #0071e3; }
#hnav-app .mm-jump button[data-go="top"] span, #hnav-app .mm-jump button[data-go="bottom"] span { color: #fff; }
#hnav-app .mm-panel.open ~ .mm-jump, #hnav-app .mm-stage.panel-open .mm-jump { right: 372px; }
@media (max-width: 700px) { #hnav-app .mm-jump { right: 4px; gap: 3px; } #hnav-app .mm-jump button { width: 42px; height: 38px; border-radius: 10px; } #hnav-app .mm-jump button b { font-size: 13px; } #hnav-app .mm-jump button span { font-size: 8px; margin-top: 3px; } }
#hnav-app .mm-tools { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; gap: 6px; z-index: 4; flex-wrap: wrap; align-items: center; }
#hnav-app .mm-search { display: flex; gap: 6px; margin-left: auto; }
#hnav-app .mm-search input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 13px; width: 170px; font-weight: 700; }
#hnav-app .mm-alt { position: absolute; inset: 0; z-index: 2; background: #fafafc; overflow: auto; padding: 105px 20px 30px; display: none; user-select: text; -webkit-user-select: text; }
#hnav-app .mm-alt.open { display: block; }
#hnav-app .alt-verse { max-width: 1100px; margin: 0 auto 16px; background: #fff; border: 2px solid rgba(0,113,227,.2); border-radius: 18px; padding: 20px 22px; font-size: 22px; line-height: 1.9; font-weight: 700; position: relative; }
#hnav-app .alt-verse .v-ref { font-size: 14px; margin-bottom: 6px; }
#hnav-app .alt-row { display: flex; gap: 12px; overflow-x: auto; padding: 6px 2px 14px; max-width: 1100px; margin: 0 auto; }
#hnav-app .alt-card { flex: 0 0 230px; background: #fff; border: 1px solid var(--line); border-top: 5px solid; border-radius: 14px; padding: 14px; cursor: pointer; transition: .15s; }
#hnav-app .alt-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
#hnav-app .alt-card .w1 { font-size: 20px; font-weight: 900; margin-bottom: 6px; }
#hnav-app .alt-card .g { font-size: 14px; font-weight: 700; color: #333; line-height: 1.6; }
#hnav-app .alt-card .r { font-size: 12px; font-weight: 800; color: #9a6b00; margin-top: 6px; }
#hnav-app .alt-card .n { font-size: 12px; font-weight: 800; color: var(--sub); margin-top: 4px; }
#hnav-app .alt-col { max-width: 1100px; margin: 0 auto; }
#hnav-app .alt-col .pn-sec { font-size: 15px; color: var(--text); }
#hnav-app .alt-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1100px; margin: 0 auto; }
#hnav-app .alt-summary { background: #fff8d6; border: 1px solid rgba(229,160,0,.4); border-radius: 14px; padding: 14px 16px; font-size: 15.5px; line-height: 1.8; font-weight: 600; max-width: 1100px; margin: 0 auto 14px; }
#hnav-app .alt-summary b { font-weight: 900; }
#hnav-app .alt-summary small { display: block; color: var(--sub); font-weight: 700; font-size: 12px; margin-top: 6px; }
#hnav-app .mm-modes { display: flex; gap: 4px; background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 12px; padding: 4px; flex-basis: 100%; width: max-content; max-width: 100%; }
#hnav-app .note-box { max-width: 1100px; margin: 0 auto 14px; background: #fff; border: 2px solid rgba(88,86,214,.25); border-radius: 18px; padding: 18px 20px; }
#hnav-app .note-title { font-size: 17px; font-weight: 900; margin-bottom: 10px; color: #5856d6; }
#hnav-app .note-step { padding: 10px 0; border-top: 1px dashed rgba(0,0,0,.1); }
#hnav-app .note-p { font-size: 17px; font-weight: 900; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
#hnav-app .note-n { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 13px; align-items: center; justify-content: center; flex: none; }
#hnav-app .note-q { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin: 4px 0 4px 32px; font-size: 15.5px; line-height: 1.75; }
#hnav-app .note-qt { font-weight: 600; color: #1d1d1f; }
#hnav-app .note-ez { white-space: nowrap; }
#hnav-app .note-box.auto { border-color: rgba(0,113,227,.2); }
#hnav-app .note-box.auto .note-title { color: #0071e3; }
#hnav-app .note-tag { font-size: 11px; font-weight: 900; color: #fff; background: #e5a000; border-radius: 6px; padding: 1px 6px; }
#hnav-app .note-p .w { cursor: pointer; }
#hnav-app .note-arrow { color: #86868b; margin: 0 6px; }
#hnav-app .note-step .pn-links { margin-left: 32px; }
#hnav-app .note-easy { margin-top: 12px; background: #f6f3ff; border-radius: 12px; padding: 12px 14px; font-size: 15.5px; font-weight: 700; line-height: 1.75; }
#hnav-app .note-easy b { color: #5856d6; margin-right: 6px; }
#hnav-app .note-box small { display: block; color: var(--sub); font-weight: 700; font-size: 12px; margin-top: 8px; }
#hnav-app .mm-modes button { border: none; background: transparent; padding: 6px 12px; border-radius: 9px; font-weight: 800; font-size: 13px; cursor: pointer; color: var(--sub); }
#hnav-app .mm-modes button.on { background: var(--text); color: #fff; }
@media (max-width: 900px) { #hnav-app .alt-two { grid-template-columns: 1fr; } #hnav-app .mm-alt { padding-top: 150px; } #hnav-app .mm-search input { width: 130px; } }
#hnav-app .mm-hint { position: absolute; bottom: 10px; left: 12px; right: 12px; font-size: 12px; font-weight: 700; color: var(--sub); text-align: center; pointer-events: none; }
#hnav-app .mm-panel { position: absolute; top: 100px; right: 12px; bottom: 12px; width: 430px; max-width: calc(100% - 24px); z-index: 3;
    background: rgba(255,255,255,.97); border: 1px solid var(--line); border-radius: 20px; padding: 18px; overflow-y: auto; box-shadow: 0 12px 40px rgba(0,0,0,.18);
    display: none; user-select: text; -webkit-user-select: text; }
#hnav-app .mm-panel.open { display: block; }
#hnav-app .pn-close { position: sticky; top: 0; float: right; margin: -6px -6px 0 0; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f0f0f4; font-weight: 900; cursor: pointer; z-index: 2; }
#hnav-app .btn.on { background: var(--text); color: #fff; border-color: var(--text); }
#hnav-app .pn-kind { font-size: 12px; font-weight: 900; letter-spacing: .5px; padding: 4px 10px; border-radius: 20px; display: inline-block; color: #fff; margin-right: 4px; }
#hnav-app .pn-word { font-size: 26px; font-weight: 900; margin: 10px 0 4px; letter-spacing: -0.5px; line-height: 1.3; }
#hnav-app .pn-origin, #hnav-app .pn-desc { font-size: 13px; color: var(--sub); font-weight: 700; margin-bottom: 8px; line-height: 1.6; }
#hnav-app .pn-desc { color: #444; }
#hnav-app .pn-face { font-size: 13px; font-weight: 800; margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px; }
#hnav-app .pn-count { font-size: 13px; font-weight: 800; color: var(--text); margin: 6px 0 10px; display: flex; gap: 6px; flex-wrap: wrap; }
#hnav-app .pn-count span { background: #f0f0f4; padding: 4px 10px; border-radius: 20px; }
#hnav-app .pn-sec { font-size: 13px; font-weight: 900; color: var(--sub); margin: 16px 0 8px; letter-spacing: .3px; display: flex; justify-content: space-between; align-items: center; }
#hnav-app .pn-actions { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
#hnav-app .pn-actions .btn { flex: 1 1 auto; text-align: center; padding: 9px 10px; font-size: 13px; white-space: nowrap; }
#hnav-app .mm-panel .verse-legend { background: #fafafc; border-radius: 10px; padding: 8px 10px; line-height: 1.8; font-size: 11.5px; }
#hnav-app .pn-links { display: flex; flex-wrap: wrap; gap: 6px; }
#hnav-app .pn-link { padding: 6px 10px; border-radius: 8px; background: #f0f0f4; font-size: 13px; font-weight: 800; cursor: pointer; border: none; }
#hnav-app .pn-link:hover { background: #e2e2ea; }
#hnav-app .pn-link.sp { background: rgba(0,113,227,.1); color: var(--blue); }
#hnav-app .pn-link.fl { background: rgba(255,59,48,.1); color: var(--red); }

#hnav-app .vc { border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; line-height: 1.75; cursor: pointer; border: 1px solid var(--line); background: #fafafc; transition: .15s; }
#hnav-app .vc:hover { background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
#hnav-app .vc.key { background: #f4f8fd; border-color: rgba(0,113,227,.2); }
#hnav-app .vc.flesh { background: #fff5f5; border-color: rgba(255,59,48,.15); }
#hnav-app .vc.def { background: #fff8d6; border-color: rgba(229,160,0,.4); }
#hnav-app .def-line { font-size: 16px; font-weight: 800; color: #1d1d1f; margin-bottom: 4px; line-height: 1.6; }
#hnav-app .def-line b { color: #9a6b00; font-size: 17px; }
#hnav-app .vc.big { cursor: default; background: #fff; border: 2px solid rgba(0,113,227,.2); padding: 18px; }
#hnav-app .vc.big .v-text { font-size: 19px; line-height: 1.9; }
#hnav-app .v-ref { font-size: 12.5px; font-weight: 900; display: block; margin-bottom: 3px; color: var(--blue); }
#hnav-app .vc.flesh .v-ref { color: var(--red); }
#hnav-app .v-ref .star { color: #e5a000; margin-right: 3px; }
#hnav-app .v-text { font-size: 14.5px; font-weight: 700; display: block; color: var(--text); }
#hnav-app .v-desc { font-size: 13px; font-weight: 600; color: #555; display: block; margin-top: 6px; }
#hnav-app .v-desc b { color: #111; }
#hnav-app .vc { position: relative; }
#hnav-app .vc-copy { position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 800; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(0,0,0,.12); background: #fff; color: #6e6e73; cursor: pointer; opacity: .75; }
#hnav-app .vc-copy:hover { opacity: 1; background: #f0f0f4; }
#hnav-app .vc-copy.done { background: #34c759; color: #fff; border-color: #34c759; opacity: 1; }
#hnav-app .mm-copy { cursor: pointer; }
#hnav-app .mm-copy:hover rect { fill: #e2e2ea; }
#hnav-app .mm-play { cursor: pointer; }
#hnav-app .mm-play:not(.on):hover rect { fill: #e2e2ea; }
#hnav-app .more { width: 100%; padding: 10px; border-radius: 10px; border: 1px dashed rgba(0,0,0,.2); background: transparent; font-weight: 800; cursor: pointer; color: var(--sub); }
#hnav-app .vnav { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }

/* 말씀 단어 색상 — 클릭 가능 */
#hnav-app .w { cursor: pointer; border-radius: 3px; }
#hnav-app .w:hover { outline: 2px solid rgba(0,0,0,.15); }
#hnav-app .vw-base { color: #6e6e73; font-weight: 600; }
#hnav-app .vw-word { font-weight: 900; }
#hnav-app .vw-god  { color: #5856d6; font-weight: 900; }
#hnav-app .vw-life { color: #0071e3; font-weight: 900; }
#hnav-app .vw-sin  { color: #ff3b30; font-weight: 800; }
#hnav-app .vw-cmd  { color: #1d1d1f; font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(29,29,31,.3); }
#hnav-app .vw-key  { font-weight: 900; background: linear-gradient(transparent 55%, rgba(255,214,0,.55) 55%); padding: 0 2px; }
#hnav-app .verse-legend { font-size: 12px; font-weight: 700; color: var(--sub); display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
#hnav-app .verse-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
#hnav-app .lg-god::before { background: #5856d6; } #hnav-app .lg-life::before { background: #0071e3; }
#hnav-app .lg-sin::before { background: #ff3b30; } #hnav-app .lg-cmd::before { background: #1d1d1f; } #hnav-app .lg-key::before { background: #ffd600; }

/* 성경 66권 띠 */
#hnav-app .books { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
#hnav-app .book { font-size: 11.5px; font-weight: 800; padding: 4px 7px; border-radius: 6px; background: #f0f0f4; color: #9a9aa3; border: none; cursor: default; }
#hnav-app .book.on { background: var(--text); color: #fff; cursor: pointer; }
#hnav-app .book.ot { background: #f7f3ea; }
#hnav-app .book.ot.on { background: #8e6b2f; color: #fff; }

/* ---------- 설교 준비 ---------- */
#hnav-app .sm-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
#hnav-app .sm-form label { font-size: 13px; font-weight: 900; color: var(--sub); display: block; margin-bottom: 6px; }
#hnav-app .sm-form select { width: 100%; padding: 10px; border-radius: 10px; border: 1px solid var(--line); font-size: 14px; font-weight: 700; background: #fff; }
#hnav-app .sm-out { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; line-height: 1.9; }
#hnav-app .sm-out h2 { font-size: 22px; font-weight: 900; margin: 0 0 4px; }
#hnav-app .sm-meta { font-size: 13px; color: var(--sub); font-weight: 700; margin-bottom: 18px; }
#hnav-app .sm-sec { border-top: 1px solid var(--line); padding: 16px 0; }
#hnav-app .sm-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
#hnav-app .sm-sec-h b { font-size: 17px; font-weight: 900; }
#hnav-app .sm-time { font-size: 12.5px; font-weight: 800; color: #fff; background: var(--text); border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
#hnav-app .sm-time.warn { background: var(--red); }
#hnav-app .sm-sec p { margin: 8px 0; font-size: 15px; font-weight: 600; color: #2a2a2e; }
#hnav-app .sm-quote { background: #fafafc; border-left: 4px solid var(--blue); padding: 10px 14px; border-radius: 8px; font-size: 14.5px; font-weight: 700; margin: 8px 0; }
#hnav-app .sm-quote small { display: block; color: var(--sub); font-weight: 800; margin-top: 4px; }
#hnav-app .sm-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
#hnav-app .sm-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#hnav-app .sm-flow span { border: 2px solid; border-radius: 20px; padding: 4px 12px; font-weight: 800; font-size: 13.5px; background: #fff; }
#hnav-app .sm-flow i { color: #86868b; font-style: normal; }
#hnav-app .sm-four { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
#hnav-app .sm-cell { border-radius: 14px; padding: 14px 16px; border: 1px solid var(--line); background: #fff; }
#hnav-app .sm-cell.think { border-top: 5px solid #0071e3; } #hnav-app .sm-cell.joy { border-top: 5px solid #ff9500; } #hnav-app .sm-cell.act { border-top: 5px solid #34c759; } #hnav-app .sm-cell.seal { border-top: 5px solid #5856d6; background: #f6f3ff; }
#hnav-app .sm-cell-h { font-weight: 900; font-size: 15.5px; margin-bottom: 6px; display: flex; justify-content: space-between; }
#hnav-app .sm-cell-h span { font-size: 12px; color: #fff; background: #1d1d1f; border-radius: 20px; padding: 2px 8px; font-weight: 800; }
#hnav-app .sm-cell p { font-size: 14.5px; margin: 4px 0 8px; }
#hnav-app .sm-cell .sm-quote { font-size: 14px; margin: 6px 0; }
#hnav-app .sm-quote.big { font-size: 18px; line-height: 1.9; border-left-width: 6px; }
#hnav-app .sm-week { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 8px; }
#hnav-app .sm-week th, #hnav-app .sm-week td { border: 1px solid rgba(0,0,0,.08); padding: 8px 10px; text-align: left; }
#hnav-app .sm-week th { background: #f0f0f4; font-weight: 900; }
@media (max-width: 800px) { #hnav-app .sm-four { grid-template-columns: 1fr; } }
#hnav-app .sm-bar { display: flex; height: 14px; border-radius: 8px; overflow: hidden; margin: 10px 0 4px; }
#hnav-app .sm-bar div { font-size: 10px; color: #fff; font-weight: 800; text-align: center; line-height: 14px; }

@media (max-width: 900px) {
    #hnav-app .mm-stage { height: 78vh; min-height: 440px; }
    #hnav-app .mm-panel { top: 100px; }
    #hnav-app .hn-title { font-size: 22px; }
}
/* ===== APPLE STYLE OVERRIDE ===== */
#hnav-app#hnav-app { --bg:#f5f5f7; --text:#1d1d1f; --sub:#6e6e73; --blue:#0071e3; --line:rgba(0,0,0,.08);
  font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif; letter-spacing:-.01em; padding-top:18px; }
#hnav-app#hnav-app button, #hnav-app#hnav-app input, #hnav-app#hnav-app select { font-family:inherit; letter-spacing:-.01em; }
/* 머리 */
#hnav-app#hnav-app .hn-head { margin:26px 0 22px; }
#hnav-app#hnav-app .hn-title { font-size:clamp(32px,4.4vw,48px); font-weight:700; letter-spacing:-.03em; line-height:1.08; }
#hnav-app#hnav-app .hn-desc { font-size:19px; font-weight:400; color:var(--sub); margin-top:12px; }
#hnav-app#hnav-app .hn-thesis { max-width:820px; margin-top:22px; background:#f5f5f7; border:none; border-radius:22px; padding:22px 26px; font-size:16px; font-weight:500; color:#1d1d1f; line-height:1.75; }
#hnav-app#hnav-app .hn-thesis b { font-weight:600; }
#hnav-app#hnav-app .hn-intro-toggle { text-decoration:none; color:var(--blue); font-weight:500; font-size:13px; }
#hnav-app#hnav-app .hn-intro-toggle::after { content:" ›"; }
/* 탭 = 세그먼트 컨트롤 */
#hnav-app#hnav-app .hn-tabs { display:inline-flex; gap:2px; margin:6px auto 14px; padding:4px; background:#fff; border:1px solid #ececf3; box-shadow:0 6px 18px rgba(40,36,90,.06); border-radius:980px; left:50%; position:relative; transform:translateX(-50%); max-width:calc(100% - 8px); flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
#hnav-app#hnav-app .hn-tabs::-webkit-scrollbar { display:none; }
#hnav-app#hnav-app .hn-tab { background:transparent; box-shadow:none; border-radius:980px; padding:8px 16px; font-size:14px; font-weight:500; color:#1d1d1f; white-space:nowrap; transition:background .2s, box-shadow .2s; }
#hnav-app#hnav-app .hn-tab:hover:not(.active) { background:#f4f3fb; }
#hnav-app#hnav-app .hn-tab:focus-visible { outline:none; box-shadow:0 0 0 2px #6c5ce7; }
#hnav-app#hnav-app .hn-tab:active { transform:scale(.97); }
#hnav-app#hnav-app .hn-tab.active { background:#fff; color:#1f1d3d; font-weight:800; box-shadow:0 2px 10px rgba(40,36,90,.14), 0 0 0 1px #dcdbe8; }
#hnav-app#hnav-app.compact .hn-tab { padding:6px 13px; font-size:13px; }
/* 버튼 = 알약 */
#hnav-app#hnav-app .btn { border-radius:980px; padding:8px 14px; font-size:13.5px; font-weight:500; color:#1d1d1f; background:rgba(255,255,255,.82); border:1px solid rgba(0,0,0,.08); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:0 1px 3px rgba(0,0,0,.05); transition:background .15s, transform .15s; }
#hnav-app#hnav-app .btn:hover { background:#fff; transform:translateY(-1px); }
#hnav-app#hnav-app .btn.primary { background:var(--blue); color:#fff; border-color:var(--blue); }
#hnav-app#hnav-app .btn.primary:hover { background:#0077ed; }
#hnav-app#hnav-app .btn.dark { background:#1d1d1f; color:#fff; border-color:#1d1d1f; }
#hnav-app#hnav-app .mm-tools .btn { padding:7px 13px; font-size:13px; }
#hnav-app#hnav-app .mm-search input { border-radius:980px; padding:7px 14px; border:1px solid rgba(0,0,0,.1); background:rgba(255,255,255,.85); font-size:13.5px; outline:none; }
#hnav-app#hnav-app .mm-search input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.18); }
#hnav-app#hnav-app .mm-modes { border-radius:980px; padding:3px; background:#e8e8ed; border:none; gap:2px; }
#hnav-app#hnav-app .mm-modes button { border-radius:980px; font-weight:500; font-size:13px; padding:6px 13px; color:#1d1d1f; }
#hnav-app#hnav-app .mm-modes button.on { background:#fff; color:#1d1d1f; box-shadow:0 1px 4px rgba(0,0,0,.12); }
#hnav-app#hnav-app .chip { border-radius:980px; font-weight:500; padding:7px 14px; }
#hnav-app#hnav-app .chip.on { background:#1d1d1f; color:#fff; border-color:#1d1d1f; }
/* 무대 */
#hnav-app#hnav-app .mm-stage { background:#f4f5f9; border-radius:0; }
#hnav-app .mm-edge { opacity: .55; }
#hnav-app#hnav-app .mm-hint { font-weight:400; color:#86868b; }
#hnav-app#hnav-app .mm-jump button { border-radius:14px; border:1px solid rgba(0,0,0,.06); background:rgba(255,255,255,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); box-shadow:0 2px 8px rgba(0,0,0,.08); }
#hnav-app#hnav-app .mm-jump button b { font-weight:600; }
#hnav-app#hnav-app .mm-jump button span { font-weight:500; }
#hnav-app#hnav-app .mm-jump button[data-go="top"], #hnav-app#hnav-app .mm-jump button[data-go="bottom"] { background:var(--blue); border-color:var(--blue); }
/* 카드·패널 */
#hnav-app#hnav-app .hn-card { border:none; border-radius:26px; padding:28px; box-shadow:0 2px 14px rgba(0,0,0,.05); }
#hnav-app#hnav-app .hn-card h3 { font-size:22px; font-weight:700; letter-spacing:-.02em; margin-bottom:14px; }
#hnav-app#hnav-app .hn-card h3::before { display:none; }
#hnav-app#hnav-app .hn-note { font-weight:400; color:var(--sub); }
#hnav-app#hnav-app .stage-item { border:none; background:#f5f5f7; border-radius:18px; padding:18px; }
#hnav-app#hnav-app .stage-name { font-weight:600; }
#hnav-app#hnav-app .stage-sub, #hnav-app#hnav-app .stage-ref { font-weight:500; }
#hnav-app#hnav-app .face { border-radius:16px; background:#e8e8ed; }
#hnav-app#hnav-app .cell { border-radius:10px; }
#hnav-app#hnav-app .mm-panel { border-radius:24px; border:none; box-shadow:0 20px 60px rgba(0,0,0,.16), 0 0 0 .5px rgba(0,0,0,.06); background:rgba(255,255,255,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
#hnav-app#hnav-app .pn-word { font-weight:700; letter-spacing:-.03em; font-size:28px; }
#hnav-app#hnav-app .pn-origin, #hnav-app#hnav-app .pn-desc, #hnav-app#hnav-app .pn-face, #hnav-app#hnav-app .pn-count { font-weight:400; }
#hnav-app#hnav-app .pn-sec { font-weight:600; letter-spacing:0; text-transform:none; }
#hnav-app#hnav-app .pn-link { border-radius:980px; font-weight:500; padding:6px 12px; }
#hnav-app#hnav-app .pn-close { background:#e8e8ed; font-weight:600; }
#hnav-app#hnav-app .vc { border:none; background:#f5f5f7; border-radius:16px; }
#hnav-app#hnav-app .vc:hover { background:#fff; box-shadow:0 6px 18px rgba(0,0,0,.08); }
#hnav-app#hnav-app .v-ref { font-weight:600; }
#hnav-app#hnav-app .v-text { font-weight:500; }
#hnav-app#hnav-app .v-desc { font-weight:400; }
#hnav-app#hnav-app .vc-copy { border-radius:980px; border:none; background:#e8e8ed; font-weight:500; opacity:1; }
#hnav-app#hnav-app .more { border-radius:980px; border:none; background:#f5f5f7; font-weight:500; color:var(--blue); }
#hnav-app#hnav-app .book { border-radius:980px; font-weight:500; }
#hnav-app#hnav-app .verse-legend { font-weight:400; }
/* 구절 나열 보기 */
#hnav-app#hnav-app .mm-alt { background:#f5f5f7; }
#hnav-app#hnav-app .alt-verse { border:none; border-radius:26px; box-shadow:0 2px 14px rgba(0,0,0,.05); font-weight:500; }
#hnav-app#hnav-app .alt-card { border:none; border-top:4px solid; border-radius:18px; box-shadow:0 1px 4px rgba(0,0,0,.04); }
#hnav-app#hnav-app .alt-summary { border:none; background:#fff; border-radius:18px; font-weight:400; box-shadow:0 1px 4px rgba(0,0,0,.04); }
#hnav-app#hnav-app .note-box { border:none; background:#fff; border-radius:24px; box-shadow:0 2px 14px rgba(0,0,0,.05); padding:24px 26px; }
#hnav-app#hnav-app .note-title { font-weight:700; letter-spacing:-.02em; }
#hnav-app#hnav-app .note-p { font-weight:600; }
#hnav-app#hnav-app .note-qt { font-weight:400; }
#hnav-app#hnav-app .note-easy { background:#f5f5f7; border-radius:16px; font-weight:500; }
/* 설교 준비 */
#hnav-app#hnav-app .sm-form label { font-size:13px; font-weight:500; color:var(--sub); }
#hnav-app#hnav-app .sm-form input, #hnav-app#hnav-app .sm-form select { height:44px; border-radius:12px; border:1px solid rgba(0,0,0,.12); background:#fff; font-size:15px; padding:0 14px; outline:none; font-weight:400; }
#hnav-app#hnav-app .sm-form input:focus, #hnav-app#hnav-app .sm-form select:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,113,227,.18); }
#hnav-app#hnav-app .sm-out { border:none; border-radius:26px; box-shadow:0 2px 14px rgba(0,0,0,.05); padding:30px; }
#hnav-app#hnav-app .sm-out h2 { font-weight:700; letter-spacing:-.025em; }
#hnav-app#hnav-app .sm-meta { font-weight:400; }
#hnav-app#hnav-app .sm-time { font-weight:500; }
#hnav-app#hnav-app .sm-quote { background:#f5f5f7; border-left:none; border-radius:14px; padding:12px 16px; font-weight:500; }
#hnav-app#hnav-app .sm-cell { border:none; background:#f5f5f7; border-radius:18px; }
#hnav-app#hnav-app .sm-cell-h { font-weight:600; }
#hnav-app#hnav-app .sm-bar { border-radius:980px; height:10px; }
/* 2026-10-20 버튼 글자 세로 가운데 정렬 (테마가 button 높이·줄간격을 강제하는 것 무력화) */
#hnav-app#hnav-app .btn, #hnav-app#hnav-app .hn-tab, #hnav-app#hnav-app .mm-modes button, #hnav-app#hnav-app .chip, #hnav-app#hnav-app .pn-link, #hnav-app#hnav-app .vnav button, #hnav-app#hnav-app .vnav .btn, #hnav-app#hnav-app .hn-intro-toggle, #hnav-app#hnav-app .mm-jump button, #hnav-app#hnav-app .alt-nav button, #hnav-app#hnav-app .sm-form button, #hnav-app#hnav-app .more, #hnav-app#hnav-app .pn-close, #hnav-app#hnav-app .vc-copy, #hnav-app#hnav-app .mm-copy { display: inline-flex; align-items: center; justify-content: center; line-height: 1 !important; height: auto !important; min-height: 0; box-sizing: border-box; vertical-align: middle; white-space: nowrap; }
#hnav-app#hnav-app .btn { padding: 9px 14px; }
#hnav-app#hnav-app .mm-tools .btn { padding: 8px 13px; }
#hnav-app#hnav-app .hn-tab { padding: 9px 16px; }
#hnav-app#hnav-app .mm-modes button { padding: 7px 13px; }
#hnav-app#hnav-app .chip { padding: 8px 14px; }
#hnav-app#hnav-app .pn-link { padding: 7px 12px; }
#hnav-app#hnav-app .mm-jump button { flex-direction: column; }
#hnav-app#hnav-app .mm-tools, #hnav-app#hnav-app .hn-tabs, #hnav-app#hnav-app .mm-modes, #hnav-app#hnav-app .vnav, #hnav-app#hnav-app .pn-actions, #hnav-app#hnav-app .pn-links { align-items: center; }
#hnav-app#hnav-app .mm-search input { height: 34px; line-height: 1; box-sizing: border-box; }
/* 가로 단어 풀이·구절 나열 화면: 휠·터치 스크롤 허용 */
#hnav-app#hnav-app .mm-alt { touch-action: pan-y; overscroll-behavior: contain; }
#hnav-app#hnav-app .mm-panel { touch-action: pan-y; }
/* 설교문 나열(읽기용) 레이아웃 */
#hnav-app .sm-layout { display: inline-flex; gap: 4px; margin-left: 6px; }
#hnav-app#hnav-app .sm-layout .btn.on { background: #1d1d1f; color: #fff; border-color: #1d1d1f; }
#hnav-app .sm-read { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
#hnav-app .sm-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; border-radius: 18px; background: #f5f5f7; padding: 16px 18px; }
#hnav-app .sm-row.think { border-left: 6px solid #0071e3; } #hnav-app .sm-row.joy { border-left: 6px solid #ff9500; } #hnav-app .sm-row.act { border-left: 6px solid #34c759; } #hnav-app .sm-row.seal { border-left: 6px solid #5856d6; } #hnav-app .sm-row.plain { border-left: 6px solid #8e8e93; }
#hnav-app .sm-row-h { margin-bottom: 6px; display: flex; justify-content: flex-end; align-items: center; }
#hnav-app .sm-row-h span { font-size: 12px; color: #fff; background: #1d1d1f; border-radius: 20px; padding: 2px 8px; font-weight: 600; }
#hnav-app .sm-say p { font-size: 16.5px; line-height: 2; margin: 0 0 8px; }
#hnav-app .sm-say p small { color: var(--sub); font-size: 12.5px; font-weight: 600; }
#hnav-app .sm-ref { display: flex; flex-direction: column; gap: 6px; }
#hnav-app .sm-ref .sm-quote { margin: 0; background: #fff; }
#hnav-app .sm-ref .sm-quote.big { font-size: 15px; }
@media (max-width: 900px) { #hnav-app .sm-row { grid-template-columns: 1fr; } }
/* 설교문: 구절 아래 색칠 단어 풀이 */
#hnav-app .sm-words { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.12); font-size: 12.5px; line-height: 1.7; font-weight: 400; color: #3a3a3c; display: flex; flex-direction: column; gap: 2px; }
#hnav-app .sm-words .sm-wn b { font-weight: 700; margin-right: 4px; }
#hnav-app .sm-words .sm-wn i { font-style: normal; color: var(--sub); }
#hnav-app .sm-quote.big .sm-words { font-size: 13.5px; }
/* 대지 3칸: 말씀 풀기 / 예수 안에서 / 심령에 심는 씨앗 */
#hnav-app .sm-four.three { grid-template-columns: 1fr 1fr 1fr; }
#hnav-app .sm-cell.open, #hnav-app .sm-row.open { border-color: #0071e3; } #hnav-app .sm-cell.christ, #hnav-app .sm-row.christ { border-color: #af52de; } #hnav-app .sm-cell.seed, #hnav-app .sm-row.seed { border-color: #34c759; }
#hnav-app .sm-cell.open { border-top: 5px solid #0071e3; } #hnav-app .sm-cell.christ { border-top: 5px solid #af52de; } #hnav-app .sm-cell.seed { border-top: 5px solid #34c759; background: #f3fbf5; }
#hnav-app .sm-row.open { border-left: 6px solid #0071e3; } #hnav-app .sm-row.christ { border-left: 6px solid #af52de; } #hnav-app .sm-row.seed { border-left: 6px solid #34c759; }
#hnav-app .sm-say p small { color: var(--sub); font-size: 12.5px; }
@media (max-width: 1100px) { #hnav-app .sm-four.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { #hnav-app .sm-four.three { grid-template-columns: 1fr; } }

/* ── godbuilt: 사이트 머리·아래 메뉴 사이에 맞춤 · 위아래 넉넉하게 ── */
#hnav-app { padding-top: 6px; }
#hnav-app.compact .mm-stage { height: calc(100vh - 128px); min-height: 680px; }
@media (max-width: 760px) { #hnav-app.compact .mm-stage { height: calc(100vh - 150px); min-height: 600px; } }
#hnav-app .mm-hint { bottom: 12px; }
#hnav-app .pn-sermon { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; border: 1px solid #f3d9bd; background: #fff8f0; border-radius: 14px; padding: 10px 12px; margin: 6px 0; cursor: pointer; font: inherit; color: #1d1d1f; }
#hnav-app .pn-sermon:hover, #hnav-app .pn-sermon.on { background: #ffedd8; border-color: #e8a25c; }
#hnav-app .pn-sermon .ps-play { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #c2410c; color: #fff; display: grid; place-items: center; font-size: 12px; }
#hnav-app .pn-sermon.on .ps-play { background: #0071e3; }
#hnav-app .pn-sermon b { display: block; font-size: 14.5px; line-height: 1.4; }
#hnav-app .pn-sermon small { display: block; color: #9a5b2a; font-weight: 700; font-size: 12.5px; margin-top: 2px; }
#hnav-app .pn-sermon em { display: block; font-style: normal; color: #6e6e73; font-size: 12.5px; margin-top: 3px; line-height: 1.5; }
#hnav-app .pn-sec.sm { color: #c2410c; }
#hnav-app .pn-chap-go { display: inline-block; margin: 6px 0 4px; font-weight: 800; font-size: 13px; color: #0071e3; text-decoration: none; }
#hnav-app .mm-player { position: fixed; right: 18px; bottom: 18px; width: 400px; max-width: calc(100vw - 24px); z-index: 60; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.08); overflow: hidden; }
#hnav-app .mm-player[hidden] { display: none; }
#hnav-app .mm-player-h { display: flex; gap: 8px; align-items: center; padding: 10px 12px; }
#hnav-app .mm-player-h b { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hnav-app .mm-player-h a { font-size: 12px; font-weight: 800; color: #0071e3; text-decoration: none; white-space: nowrap; }
#hnav-app .mm-player-h button { border: 0; background: #f0f0f4; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 13px; }
#hnav-app .mm-player .player { border-radius: 0; }
@media (max-width: 760px) { #hnav-app .mm-player { left: 8px; right: 8px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); } }
/* ── 사이트 색(남색·금색)에 맞춤: 오른쪽 빨리 가기 · 안내 띠 · 도구 줄 ── */
#hnav-app#hnav-app .mm-jump button { background: rgba(255,255,255,.96) !important; color: #0a1c40 !important; border: 1px solid #e4e8ef !important; box-shadow: 0 4px 12px -6px rgba(10,28,64,.25); }
#hnav-app#hnav-app .mm-jump button span { font-size: 10.5px; color: #56627a; }
#hnav-app#hnav-app .mm-hint { background: rgba(255,255,255,.94); border-radius: 12px; padding: 8px 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(720px, calc(100% - 140px)); color: #56627a; box-shadow: 0 4px 16px -8px rgba(10,28,64,.25); }
#hnav-app#hnav-app .mm-tools .btn { border-radius: 999px; }
#hnav-app#hnav-app .mm-modes button.on { background: #0a1c40; color: #fff; }
#hnav-app#hnav-app .mm-jump button[data-go=up], #hnav-app#hnav-app .mm-jump button[data-go=down], #hnav-app#hnav-app .mm-jump button[data-go^=q] { display: none; }
#hnav-app#hnav-app .mm-search input { width: 230px; }
#hnav-app#hnav-app .mm-tools { background: #fff; border-bottom: 1px solid #e4e8ef; }
#hnav-app#hnav-app .mm-jump { display: none !important; }
#hnav-app#hnav-app .mm-modes { display: inline-flex; width: auto; background: #eef1f6; border-radius: 999px; padding: 4px; gap: 2px; }
#hnav-app#hnav-app .mm-modes button { border-radius: 999px; }
#hnav-app#hnav-app .mm-jump button span { font-size: 11px; }
#hnav-app#hnav-app .mm-hint { animation: mmhint .6s ease 7s forwards; }
#hnav-app#hnav-app .mm-tools { top: 0; left: 0; right: 0; border-radius: 0; padding: 10px 14px; margin: 0; }
#hnav-app#hnav-app .mm-jump { right: 16px; }
#hnav-app#hnav-app.compact:not(.mm-mini) { padding-top: 0; }
#hnav-app#hnav-app .mm-jump button { width: 48px; min-height: 48px; border-radius: 14px !important; }
@keyframes mmhint { to { opacity: 0; visibility: hidden; } }
@media (max-width: 760px) {
  #hnav-app#hnav-app .mm-tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 28px; }
  #hnav-app#hnav-app .mm-tools::-webkit-scrollbar { display: none; }
  #hnav-app#hnav-app .mm-tools > * { flex: none; }
  #hnav-app#hnav-app .mm-search input { width: 150px; }
  #hnav-app#hnav-app .mm-hint { display: none; }
  #hnav-app#hnav-app .mm-jump { display: none; }
}
/* ── 설교 화면에 끼운 작은 지도 (watch.php · .mm-mini) ── */
#hnav-app#hnav-app.mm-mini { width: auto; max-width: none; margin: 0; padding: 0; }
#hnav-app#hnav-app.mm-mini .mm-layout { width: auto; margin-left: 0; }
#hnav-app#hnav-app.mm-mini .mm-stage { height: calc(100vh - 210px); min-height: 460px; border-radius: 18px; border: 1px solid rgba(0,0,0,.06); }
#hnav-app#hnav-app.mm-mini .mm-jump, #hnav-app#hnav-app.mm-mini .mm-hint, #hnav-app#hnav-app.mm-mini .mm-modes, #hnav-app#hnav-app.mm-mini .mm-search,
#hnav-app#hnav-app.mm-mini #mm-nt, #hnav-app#hnav-app.mm-mini #mm-lastverse, #hnav-app#hnav-app.mm-mini .hn-card { display: none !important; }
#hnav-app#hnav-app.mm-mini .mm-tools { padding: 8px; gap: 6px; }
#hnav-app#hnav-app.mm-mini .mm-panel { width: auto; left: 8px; right: 8px; top: 52px; }
@media (max-width: 999px) { #hnav-app#hnav-app.mm-mini .mm-stage { height: 64vh; min-height: 400px; } }

@media (max-width: 760px) { #hnav-app#hnav-app .mm-modes { order: -1; } }
#hnav-app#hnav-app .mm-alt { padding-top: 84px; }   /* 구절 목록 보기: 도구 줄 바로 아래부터 (빈 띠 없이) */

/* ── 디자인 8차: 보기 고르기 띠는 단추만큼만 · 설교 화면 지도 안쪽 테두리 없음 ── */
#hnav-app#hnav-app .mm-modes { flex: 0 0 auto; flex-basis: auto; }
#hnav-app#hnav-app.mm-mini .mm-stage { border: 0 !important; border-radius: 14px; }
#hnav-app#hnav-app .mm-stage { background: #f7f8fb; }