/**
 * 모션 스타일 갤러리로 들어가는 원형 전환 — 사이트 쪽 덮개(js/motion-enter.js · inc/motion-styles.php oppadu_ms_overlay_html).
 * 누른 자리에서 어두운 원이 번져 화면을 다 덮고, 원 안에 갤러리 왼쪽 메뉴 복사본(.gx)이 함께 드러난다.
 * 넘어간 뒤 갤러리 첫 장면의 메뉴와 같은 자리·같은 글꼴로 이어진다 — .gx 값은 갤러리 tools/_motion-styles-assets/css/gallery.css 의
 * .bar-wrap·.side 와 똑같이(바꾸면 같이). 10/8 운영자 확정(시안 A′ · ① 원형 · 「원이 퍼진 뒤 검은 화면이 길다, 메뉴는 빨리」).
 * ⛔ 원 가장자리 흐림(mask radial-gradient)·검은 바탕은 갤러리 전환의 예외(10/8 「그대로 갑니다」) — 이 덮개 밖에서 쓰지 않는다.
 */
.ms-pre{position:fixed;inset:0;z-index:2147483000;display:none;pointer-events:none;background:#050505}
.ms-pre.on{display:block}
.ms-pre.dot{-webkit-mask-image:radial-gradient(circle at var(--x) var(--y),#000 var(--r),transparent calc(var(--r) + 34px));mask-image:radial-gradient(circle at var(--x) var(--y),#000 var(--r),transparent calc(var(--r) + 34px))}

.ms-pre .gx{position:absolute;inset:0;display:none;color:#f2f2f2;font-family:var(--f-grot);font-weight:400;font-size:16px;line-height:normal;text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;word-break:keep-all;overflow-wrap:break-word;
  --pad:24px;--side-w:272px;--bar-h:48px;--bg:#050505;--surface:#131313;--line:rgba(255,255,255,.08);--text:#f2f2f2;--text-2:#cfcfcf;--muted:#a3a3a3;--faint:#858585;--r-ui:8px;
  --f-site:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI", Roboto, sans-serif;
  --f-grot:var(--f-site);--f-ui:var(--f-site);--f-kr:var(--f-site);--f-num:var(--f-site)}
.ms-pre.dot .gx{display:block}
.ms-pre .gx *,.ms-pre .gx *::before,.ms-pre .gx *::after{box-sizing:border-box}
.ms-pre .gx h1,.ms-pre .gx p,.ms-pre .gx ul{margin:0;padding:0;font:inherit}
.ms-pre .gx ul{list-style:none}
.ms-pre .gx li{margin:0}
.ms-pre .gx button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;text-align:inherit;box-shadow:none;min-height:0;text-transform:none}
.ms-pre .gx a{color:inherit;text-decoration:none}
.ms-pre .gx svg{display:block;flex:none}
.ms-pre .gx [hidden]{display:none}
.ms-pre .gx .ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ms-pre .gx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ms-pre .gx .bar-wrap{position:absolute;top:var(--pad);left:var(--pad);width:var(--side-w)}
.ms-pre .gx .bar{background:var(--surface);border-radius:var(--r-ui)}
.ms-pre .gx .bar-row{height:var(--bar-h);display:flex;align-items:center;padding:0 4px 0 14px}
.ms-pre .gx .brand{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none;border-radius:6px}
.ms-pre .gx .mark{width:16px;height:21px}
.ms-pre .gx .brand-t{font:700 14px/1 var(--f-kr);letter-spacing:-.02em;color:#fff}
.ms-pre .gx .bar-lbl{margin-left:16px;font:500 12px/1 var(--f-ui);color:var(--muted);white-space:nowrap}
.ms-pre .gx .bar-btn{height:40px;display:inline-flex;align-items:center;gap:9px;padding:0 12px;border-radius:6px;font:500 12px/1 var(--f-ui);color:var(--muted);white-space:nowrap}
.ms-pre .gx .bar-dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.ms-pre .gx .fbtn,.ms-pre .gx .fbtn .bar-dot{display:none}
.ms-pre .gx .side{position:absolute;top:calc(var(--pad) + var(--bar-h));bottom:var(--pad);left:var(--pad);width:var(--side-w);display:flex;flex-direction:column;padding:0 14px;margin:0;background:none;border:0}
.ms-pre .gx .intro{flex:none;margin-top:48px}
.ms-pre .gx .intro p{font:300 20px/28px var(--f-grot);letter-spacing:-.005em;color:var(--muted)}
.ms-pre .gx .intro .ttl{color:var(--text)}
.ms-pre .gx .autobtn{display:inline-flex;align-items:center;gap:8px;height:36px;margin-top:18px;padding:0 13px 0 11px;border-radius:6px;background:var(--surface);font:500 12.5px/1 var(--f-ui);color:var(--text-2)}
.ms-pre .gx .autobtn .ic{width:14px;height:14px}
.ms-pre .gx .autobtn .i-play{display:none}
.ms-pre .gx .gnav-wrap{flex:1 1 auto;min-height:0;overflow:hidden;margin:36px -14px 0;padding:0 14px 8px}
.ms-pre .gx .gn{position:relative;display:flex;align-items:baseline;gap:8px;width:100%;padding:8px 0;font:300 16px/20px var(--f-grot);color:var(--muted)}
.ms-pre .gx .gn[aria-pressed="true"]{color:var(--text)}
.ms-pre .gx .gn[aria-pressed="true"]::before{content:"";position:absolute;left:-12px;top:16px;width:4px;height:4px;border-radius:50%;background:currentColor}
.ms-pre .gx .gn-c{font:400 11.5px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--faint)}
.ms-pre .gx .side-note{flex:none;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font:400 12.5px/19px var(--f-ui);color:var(--muted)}
@media (max-width:899px){
  .ms-pre .gx{--pad:16px}
  .ms-pre .gx .bar-wrap{position:relative;top:0;left:auto;width:auto;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--bg)}
  .ms-pre .gx .bar-lbl{display:none}
  .ms-pre .gx .fbtn{display:inline-flex;margin-left:auto}
  .ms-pre .gx .side{position:relative;top:auto;bottom:auto;left:auto;width:auto;display:block;padding:0 16px;margin-top:24px}
  .ms-pre .gx .intro{margin-top:0}
  .ms-pre .gx .gnav-wrap,.ms-pre .gx .side-note{display:none}
}