/* 모션 미리보기 — 확정본 위에 움직임만 더한다 (motion_preview.py 가 사본 oh/ 로 복사).
   모든 규칙은 html.mlab(JS 가 붙임) + 효과별 html.mxN 이 있을 때만 걸린다 → JS 가 꺼지면 확정본과 같다.
   동작 줄이기 설정이면 JS 가 mxN 을 하나도 붙이지 않는다. */
html,body{overflow-x:clip}   /* oh.css 의 hidden 대신 — sticky(5번)가 동작하게 */

/* 1 빛 알갱이 */
.mlab-pc{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;mix-blend-mode:screen;display:none}
html.mx1 .mlab-pc{display:block}

/* 2 글자 띠 (얇게, 확정본 색) */
.mlab-mq{display:none;float:left;width:100%;box-sizing:border-box;overflow:hidden;background:#fff;border-block:1px solid rgba(201,164,92,.35);padding:9px 0}
html.mx2 .mlab-mq{display:block}
.mlab-mq .row{display:flex;gap:36px;white-space:nowrap;width:max-content;font:800 15px/1 "Archivo","Noto Sans KR",sans-serif;letter-spacing:.18em;color:#7D6234;will-change:transform}
.mlab-mq .row span:nth-child(even){color:#C9A45C}

/* 3 단어 켜짐 */
html.mx3 .mw{opacity:.16;transition:opacity .3s}
html.mx3 .mw.on{opacity:1}

/* 4 창문 열림 + 살짝 시차 */
html.mx4 .mrv{transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1)}
html.mx4 .mrv.wait{clip-path:inset(14% 14% 14% 14%)}
html.mx4 .mrv.wait.mopen{clip-path:inset(-80px)}
html.mx4 .mpar{scale:1.08;will-change:translate}

/* 5 교회사역기관 가로 흐름 */
@media (min-width:900px){
  html.mx5 .oh-rm .raise_ministry_area{display:flow-root;position:sticky;top:var(--mtop,90px)}
  html.mx5 .oh-rm .oh-ig{overflow:clip;min-width:0;padding-block:8px 14px}
  html.mx5 .oh-rm .igrid{display:flex;gap:20px;width:max-content;will-change:transform}
  html.mx5 .oh-rm .igc{flex:0 0 340px}
  html.mx5 .oh-rm .iglink{display:none}
}
@media (max-width:899px){
  html.mx5 .oh-rm .oh-ig{min-width:0}
  html.mx5 .oh-rm .igrid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:none}
  html.mx5 .oh-rm .igrid::-webkit-scrollbar{display:none}
  html.mx5 .oh-rm .igc{scroll-snap-align:start}
}

/* 6 3D 기울기 + 빛 */
.mshine{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,236,196,.32),transparent 50%)}
html.mx6 .mtilt:hover>.mshine{opacity:1}
html.mx6 .mtilt{transition:transform .25s ease-out}

/* 7 지구본: oh.js 고리로 동작 (CSS 없음) */

/* 8 자석 버튼 + 따라오는 원 */
html.mx8 .mmag{transition:translate .25s cubic-bezier(.2,.8,.2,1)}
.mlab-cur{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border:1px solid #C9A45C;border-radius:50%;pointer-events:none;z-index:9998;display:none;transition:width .25s,height .25s,margin .25s,background .25s}
.mlab-cur.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(201,164,92,.16)}
@media (hover:hover) and (pointer:fine){html.mx8 .mlab-cur{display:block}}

/* 9 그려지는 길 */
.mlab-line{position:absolute;left:-10px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(#C9A45C,#7D6234);transform-origin:top;transform:scaleY(0);display:none}
html.mx9 .mlab-line{display:block}
html.mx9 .oh-cd .sched{position:relative}
html.mx9 .ohx-steps li.mon .no{box-shadow:0 0 0 6px #fff,0 0 0 9px rgba(201,164,92,.55),0 0 26px rgba(201,164,92,.6);transition:box-shadow .5s}

/* 10 금색 커튼 */
.mlab-cut{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;grid-template-columns:repeat(5,1fr)}
.mlab-cut i{background:#C9A45C;transform:scaleY(0);transform-origin:bottom}
.mlab-cut.cover i{animation:mlCover .24s cubic-bezier(.7,0,.3,1) forwards}
.mlab-cut.shut i{transform:scaleY(1)}
.mlab-cut.open i{transform-origin:top;animation:mlOpen .22s cubic-bezier(.7,0,.3,1) forwards}
.mlab-cut i:nth-child(2){animation-delay:.015s}.mlab-cut i:nth-child(3){animation-delay:.03s}.mlab-cut i:nth-child(4){animation-delay:.045s}.mlab-cut i:nth-child(5){animation-delay:.06s}
@keyframes mlCover{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes mlOpen{from{transform:scaleY(1)}to{transform:scaleY(0)}}

/* 효과 판 */
.mlab-pn{position:fixed;left:12px;bottom:12px;z-index:10000;font:13px/1.4 "Noto Sans KR",sans-serif;color:#0B0B0C}
.mlab-pn>button{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:1px solid #0B0B0C;border-radius:999px;background:#F7F5F0;color:#0B0B0C;font:700 13px/1 "Noto Sans KR",sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(11,11,12,.18)}
.mlab-pn>button b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#C9A45C;color:#0B0B0C;font:800 10px/1 "Archivo",sans-serif}
.mlab-pn .bx{position:absolute;left:0;bottom:44px;width:min(300px,calc(100vw - 24px));max-height:calc(100vh - 80px);overflow:auto;padding:12px 12px 10px;border:1px solid #0B0B0C;border-radius:14px;background:#F7F5F0;box-shadow:0 14px 34px rgba(11,11,12,.25)}
.mlab-pn .bx[hidden]{display:none}
.mlab-pn h3{margin:0 0 2px;font-size:14px;font-weight:900}
.mlab-pn .nt{margin:0 0 8px;font-size:11.5px;color:#5E5B56}
.mlab-pn label{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:5px 2px;border-top:1px solid rgba(11,11,12,.08);cursor:pointer}
.mlab-pn label i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#0B0B0C;color:#C9A45C;font:800 11px/1 "Archivo",sans-serif;font-style:normal}
.mlab-pn label.nb i{background:#C9A45C;color:#0B0B0C}
.mlab-pn label span small{display:block;font-size:10.5px;color:#7a766e}
.mlab-pn input{width:18px;height:18px;accent-color:#C9A45C;margin:0}
.mlab-pn .rs{margin-top:8px;width:100%;padding:7px;border:1px solid #0B0B0C;border-radius:8px;background:#fff;font:700 12px "Noto Sans KR",sans-serif;cursor:pointer}
.mlab-bd{position:absolute;z-index:9990;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#C9A45C;color:#0B0B0C;border:2px solid #0B0B0C;font:800 12px/1 "Archivo",sans-serif;pointer-events:none;box-shadow:0 3px 10px rgba(0,0,0,.3)}
@media (max-width:899px){.mlab-pn{bottom:92px}}

/* 11 입자 로고 첫 화면 — html.mx11 일 때만 보임 */
.mlab-intro{display:none;position:relative;background:#0B0B0C;color:#F4F1EA}
.mx11 .mlab-intro{display:block;height:200vh}
.mlab-intro .st{position:sticky;top:0;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:grid;place-items:center}
.mlab-intro canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.mlab-intro .wd{position:relative;margin:0 0 8vh;font:900 clamp(40px,17vw,210px)/1 "Archivo",sans-serif;color:#C9A45C;transition:opacity .6s}
.mlab-intro.ready .wd{opacity:0}
.mlab-intro .cap{position:absolute;left:0;right:0;bottom:15vh;margin:0;padding:0 20px;text-align:center;font:700 clamp(17px,2.4vw,28px)/1.45 "Noto Sans KR",sans-serif;word-break:keep-all;opacity:var(--o,1);transform:translateY(calc((1 - var(--o,1)) * 24px));pointer-events:none}
.mlab-intro .cap em{font-style:normal;color:#C9A45C}
.mlab-intro .hint{position:absolute;left:0;right:0;bottom:6vh;margin:0;text-align:center;font:600 12px "Archivo",sans-serif;letter-spacing:.14em;color:#A8A397;pointer-events:none;animation:mlab-bob 1.8s ease-in-out infinite}
@keyframes mlab-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.mx11 .mlab-intro,html .mlab-intro{height:auto}.mlab-intro .st{position:relative}.mlab-intro .hint{animation:none}}