/* 테마 tools/motion-styles.php 의 CSS — 확정 갤러리(C:	mpmotion-stylesgallery-finalindex.html)의 큰 <style> 을 옮겼다.
   바뀐 곳: 맨 아래 「사이트 머리글 흉내」(지금 사이트 새 머리글 모양 — 진짜 메뉴 목록을 템플릿이 넣는다)와 「손님 잠금」(프롬프트는 회원만 — 10/9 운영자). */

/* 모션 스타일 갤러리 — 시안 A′(10/8 운영자 확정). A(Koto 쇼케이스)의 검은 화면·왼쪽 고정 칸은 그대로 두고,
   같은 크기 칸(보이는 칸은 모두 소리 없이 재생), 글은 늘 보이게, 상세는 단단한 판 위에.
   아래 가운데 입력창(컴포저)은 시안 C 에서 가져와 어두운 말투로 다시 그렸다.
   ⛔ 사이트 규칙과 다른 점은 이 페이지 안에서만 쓰는 예외다(10/8 운영자 「그대로 갑니다」) — 오빠두 규칙으로 덮지 말 것:
      검은 바탕·초록 대신 흰 버튼 · 입력창 모서리 24px·둥근 복사 단추·버튼 모서리 8~10px · 입력창 선+그림자 ·
      전환 효과 그라디언트(원 가장자리 흐림, 동작 줄이기면 없음) · 보이는 영상 동시 재생.
   글꼴만 사이트 글꼴 Pretendard 로 바꿨다(같은 날 「폰트만 사이트 폰트로 변경」, 처음엔 Inter·Noto Sans KR·Geist Mono). */
:root{
  color-scheme: dark;
  --pad: 24px;
  --side-w: 272px;
  --side-gap: 40px;
  --bar-h: 48px;
  --col-gap: 28px;
  --row-gap: 40px;
  --comp-space: 216px;

  --bg: #050505;
  --sheet: #0b0b0b;
  --surface: #131313;
  --surface-2: #1a1a1a;
  --surface-3: #242424;
  --surface-4: #2f2f2f;
  --tile: #0f0f0f;
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.13);

  --text: #f2f2f2;      /* 바탕 대비 17.8:1 */
  --text-2: #cfcfcf;    /* 읽는 글 13:1 */
  --muted: #a3a3a3;     /* 8:1 · 컴포저 위 6.9:1 */
  --faint: #858585;     /* 5.5:1 · 컴포저 위 4.7:1 */
  --btn: #ededed;
  --btn-hover: #fff;
  --btn-text: #0a0a0a;

  --r-tile: 8px;
  --r-ui: 8px;

  /* 사이트 본문 글꼴 체인(functions.php body) — 큰 글·UI·한글·숫자 모두 이것. 숫자는 font-variant-numeric:tabular-nums 로 자리를 맞춘다 */
  --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);
  /* 프롬프트 안 코드 글씨 — 사이트도 코드는 웹 글꼴 없이 시스템 고정폭(page-main-v3 --font-mono 와 같은 체인) */
  --f-code: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
html,body{margin:0}
/* 글자 크기·줄 높이도 직접 정한다 — claude.ai 첫 페이지 틀이 body 를 14px 로 정해 두어, em 으로 잰 상세 설명 칸 폭이 좁아졌다(10/8 실측) */
body{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--f-grot);font-weight:400;font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;word-break:keep-all;overflow-wrap:break-word}
html.lock{overflow:hidden}
h1,h2,h3,p,ul,ol{margin:0;padding:0;font:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;text-align:inherit;-webkit-tap-highlight-color:transparent}
a{color:inherit}
img,svg,video{display:block}
svg{flex:none}
.comp[hidden]{display:none}
.ic{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
:focus{outline:none}
:focus-visible{outline:2px solid #fff;outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ta-off{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;opacity:0;pointer-events:none;resize:none}
.err{padding:40px 0;font:300 20px/28px var(--f-grot);color:var(--muted)}

/* ── 왼쪽 위 막대 ── */
.bar-wrap{position:fixed;z-index:20;top:var(--pad);left:var(--pad);width:var(--side-w)}
.bar{background:var(--surface);border-radius:var(--r-ui)}
.bar-row{height:var(--bar-h);display:flex;align-items:center;padding:0 4px 0 14px}
.brand{display:flex;align-items:center;gap:8px;flex:none}
.mark{width:16px;height:21px}
.brand-t{font:700 14px/1 var(--f-kr);letter-spacing:-.02em;color:#fff}
.bar-lbl{margin-left:16px;font:500 12px/1 var(--f-ui);color:var(--muted);white-space:nowrap}
.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}
.bar-btn:hover,.bar-btn[aria-expanded="true"]{color:var(--text)}
.bar-dot{width:4px;height:4px;border-radius:50%;background:currentColor}
.fbtn{display:none}
.fbtn .bar-dot{display:none}
.fbtn.on .bar-dot{display:block}

/* ── 왼쪽 고정 칸 ── */
.side{position:fixed;z-index:10;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}
.intro{flex:none;margin-top:48px}
.intro h1,.intro p{font:300 20px/28px var(--f-grot);letter-spacing:-.005em}
.intro h1{color:var(--text)}
.intro p{color:var(--muted)}
.gnav-wrap{flex:1 1 auto;min-height:0;overflow:auto;margin:36px -14px 0;padding:0 14px 8px;scrollbar-width:none}
.gnav-wrap::-webkit-scrollbar{display:none}
.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)}
.gn:hover,.gn[aria-pressed="true"]{color:var(--text)}
.gn[aria-pressed="true"]::before{content:"";position:absolute;left:-12px;top:16px;width:4px;height:4px;border-radius:50%;background:currentColor}
.gn-c{font:400 11.5px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--faint)}
.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)}
.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)}
.autobtn:hover{background:var(--surface-3);color:var(--text)}
.autobtn .ic{width:14px;height:14px}
.autobtn .i-play,.autobtn[data-on="0"] .i-pause{display:none}
.autobtn[data-on="0"] .i-play{display:block}
a.brand{text-decoration:none;border-radius:6px}
a.brand:focus-visible{outline-offset:4px}

/* ── 목록: 고른 16:9 칸 ── */
.main{margin-left:calc(var(--pad) + var(--side-w) + var(--side-gap));padding:var(--pad) var(--pad) var(--comp-space) 0;min-height:100vh;container:main / inline-size}
/* 화면 밖 묶음은 가까이 올 때까지 배치·그리기를 건너뛴다 — 첫 화면이 빨리 뜨고 전환 중 다시 배치도 가벼워진다 */
.grp{content-visibility:auto;contain-intrinsic-size:auto 1300px}
.grp + .grp{margin-top:72px;padding-top:24px;border-top:1px solid var(--line)}
.main.filtered .grp{margin-top:0;padding-top:0;border-top:0}
.gh{display:flex;align-items:baseline;gap:10px;min-height:var(--bar-h);padding-top:10px;margin-bottom:16px;font:300 22px/28px var(--f-grot);color:var(--text)}
.gh-c{font:400 12.5px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--row-gap) var(--col-gap)}
@container main (min-width:1150px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container main (max-width:559px){.grid{grid-template-columns:minmax(0,1fr)}}
.tile{position:relative;min-width:0}
.media{position:relative;aspect-ratio:16/9;border-radius:var(--r-tile);overflow:hidden;background:var(--tile)}
.poster,.tv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--tile)}
/* 칸마다 영상 하나 — 화면에 들어온 칸은 모두 소리 없이 재생, 나가면 멈춘다. 첫 장면이 나오기 전까지는 포스터 */
.tv{opacity:0;transition:opacity .35s ease}
.tile.live .tv{opacity:1}
/* 포스터는 받아지면 부드럽게 나타난다(받기 전에는 칸 바탕색) */
html.js .poster{opacity:0;transition:opacity .35s ease}
html.js .poster.ok{opacity:1}
.cap{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;padding:14px 4px 0 2px}
.cap-no{font:500 12px/1 var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--faint)}
.cap-nm{font:500 16px/22px var(--f-kr);letter-spacing:-.01em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cap-en{grid-column:2;margin-top:3px;font:400 13px/18px var(--f-ui);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.on .cap-no{color:var(--text)}
.t-open{position:absolute;inset:-6px;z-index:2;border-radius:12px}
.t-open:focus-visible{outline:2px solid #fff;outline-offset:0}

/* ── 아래 가운데 입력창(컴포저) ── */
.comp{--cl:calc(var(--pad) + var(--side-w) + var(--side-gap));position:fixed;z-index:30;bottom:24px;left:calc(var(--cl) + (100% - var(--cl) - var(--pad)) / 2);transform:translateX(-50%);width:min(700px,calc(100% - var(--cl) - var(--pad) - 48px));padding:12px 12px 10px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:24px;box-shadow:0 20px 50px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.5);container:comp / inline-size}
.comp-main{display:flex;align-items:flex-start;gap:14px}
.comp-th{flex:none;width:88px;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 0 0 1px var(--line)}
.comp-th img{width:100%;height:100%;object-fit:cover}
.comp-tx{flex:1 1 auto;min-width:0;display:block;padding:1px 0 0;color:var(--text);text-align:left;border-radius:6px}
.comp-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;min-height:66px;font:400 15px/22px var(--f-ui);overflow-wrap:anywhere}
.comp-tx:hover .comp-t{color:#fff}
.comp.typing .comp-t::after{content:"";display:inline-block;width:2px;height:17px;margin-left:2px;vertical-align:-3px;background:currentColor}
.comp-x{flex:none;width:32px;height:32px;margin:-4px -4px 0 0;display:grid;place-items:center;border-radius:8px;color:var(--muted)}
.comp-x:hover{background:var(--surface-3);color:var(--text)}
.comp-foot{display:flex;align-items:center;gap:10px;margin-top:10px;padding-left:2px}
.chips{display:flex;align-items:center;gap:16px;flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;font:400 12.5px/1 var(--f-ui);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;flex:none}
.chip .ic{width:14px;height:14px}
.chip-nm{flex:0 1 auto;min-width:0;color:var(--text-2)}
.chip-nm span{overflow:hidden;text-overflow:ellipsis}
@container comp (max-width:620px){.chip-x{display:none}}
.seg{flex:none;display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.seg button{height:28px;padding:0 10px;border-radius:7px;font:500 12.5px/1 var(--f-ui);color:var(--muted)}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--surface-4);color:var(--text)}
.send{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--btn);color:var(--btn-text)}
.send:hover{background:var(--btn-hover)}
.send .ic{width:17px;height:17px;stroke-width:2}
.send .ic-ok,.send.done .ic-copy{display:none}
.send.done .ic-ok{display:block}
.send:focus-visible{outline-offset:3px}
.cstat{position:absolute;right:10px;bottom:calc(100% + 10px);padding:7px 10px;border-radius:6px;background:var(--surface-4);font:500 12px/1 var(--f-ui);color:var(--text);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.cstat.show{opacity:1}

/* 휴대폰 묶음 고르기 */
.fpanel{position:fixed;z-index:25;top:calc(var(--bar-h) + 24px);left:16px;right:16px;max-height:calc(100vh - 180px);overflow:auto;padding:10px 16px 10px 30px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.fp-h{margin:6px 0 4px -14px;font:500 12px/1.4 var(--f-ui);color:var(--muted)}
.fp-list .gn{min-height:44px;padding:12px 0}
.fp-list .gn[aria-pressed="true"]::before{top:20px}

/* ── 상세: 단단한 어두운 판 ── */
.dlg{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--sheet);color:var(--text);overflow:hidden;font-family:var(--f-ui)}
.dlg[open]{display:flex;flex-direction:column;animation:fade .16s ease-out both}
.dlg::backdrop{background:#000}
@keyframes fade{from{opacity:0}to{opacity:1}}
.dtop{flex:none;height:64px;display:flex;align-items:center;gap:6px;padding:0 16px 0 28px;border-bottom:1px solid var(--line)}
.dcrumb{min-width:0;display:flex;align-items:baseline;gap:12px;margin-right:auto;font:400 13px/1.2 var(--f-ui);color:var(--muted);white-space:nowrap}
.dcrumb span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.dcount{font:400 12px/1 var(--f-num);color:var(--faint);font-variant-numeric:tabular-nums}
.dnav{display:flex;align-items:center;gap:2px;margin-right:10px}
.ib{width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:var(--text-2)}
.ib:hover{background:var(--surface-3);color:#fff}
.ib .ic{width:18px;height:18px}
.dact{display:flex;align-items:center;gap:8px;margin-right:8px}
.btn{height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 15px 0 13px;border-radius:8px;background:var(--surface-3);font:500 13px/1 var(--f-ui);color:var(--text);white-space:nowrap}
.btn:hover{background:var(--surface-4)}
.btn .ic{width:16px;height:16px}
.btn-p{background:var(--btn);color:var(--btn-text)}
.btn-p:hover{background:var(--btn-hover)}
.btn .ic-ok,.btn.done .ic-copy{display:none}
.btn.done .ic-ok{display:block}
.dbody{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(400px,1fr)}
.dmain{min-height:0;overflow:auto;padding:28px 36px 48px 28px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.dside{min-height:0;overflow:auto;padding:0 40px 56px;border-left:1px solid var(--line);overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.dvid{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.dvid video{width:100%;height:100%;object-fit:contain;background:#000}
.dinfo{max-width:68ch;margin-top:28px}
.dmeta{display:flex;align-items:baseline;gap:12px;font:400 13px/1.2 var(--f-ui);color:var(--muted)}
.dno{font:500 13px/1 var(--f-num);font-variant-numeric:tabular-nums;color:var(--text)}
.dtitle{margin-top:14px;font:500 30px/38px var(--f-kr);letter-spacing:-.02em;color:var(--text)}
.den{margin-top:4px;font:300 20px/28px var(--f-grot);color:var(--muted)}
.dfact{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;margin-top:16px;font:400 15px/1.75 var(--f-kr);color:var(--text-2)}
.dfact:first-of-type{margin-top:24px}
.lbl{font:500 12.5px/26px var(--f-ui);color:var(--muted)}
.tabs{position:sticky;top:0;z-index:2;display:flex;gap:26px;height:56px;background:var(--sheet);border-bottom:1px solid var(--line)}
.tab{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:100%;font:500 14px/1 var(--f-ui);color:var(--muted)}
.tab:hover,.tab[aria-selected="true"]{color:var(--text)}
.tab[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--text)}
.tab:focus-visible{outline-offset:-4px;border-radius:6px}
.ptab{max-width:68ch;padding-top:24px;font:400 15px/1.7 var(--f-ui);color:var(--text-2)}
.ptab:focus-visible{outline-offset:6px;border-radius:4px}
.pnote{margin-bottom:20px;font:400 13px/1.6 var(--f-ui);color:var(--muted)}
.phead{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.phead .pnote{margin:0}
.doc p + p{margin-top:8px}
.doc .plead{color:var(--text)}
.psec{margin-top:26px}
.psec-h{margin-bottom:6px;font:600 14px/1.5 var(--f-ui);color:var(--text)}
.pul{margin-top:6px}
.pul li{position:relative;padding-left:16px}
.pul li + li{margin-top:6px}
.pul li::before{content:"";position:absolute;left:3px;top:.85em;width:5px;height:1px;background:var(--faint)}
.doc b{font-weight:600;color:var(--text)}
.fill{color:var(--text);text-decoration:underline dotted rgba(255,255,255,.5);text-decoration-thickness:1px;text-underline-offset:4px}
.opt-t{margin-right:6px;font-size:12.5px;color:var(--muted)}
.opt.off{color:var(--faint)}
.key-fill{color:var(--text);text-decoration:underline dotted rgba(255,255,255,.5);text-underline-offset:4px}
code{font:400 .9em var(--f-code);color:var(--text)}
.rows{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.r-t{align-self:start;justify-self:start;font:500 12.5px/25px var(--f-num);font-variant-numeric:tabular-nums;color:var(--text);border-radius:4px;white-space:nowrap}
button.r-t{padding:8px 8px 8px 0;margin:-8px 0}
button.r-t:hover{text-decoration:underline;text-underline-offset:3px}
.r-sub{margin-top:4px;font-size:14px;line-height:1.65;color:var(--muted)}
.r-l{margin-right:8px;font:500 12px/1 var(--f-ui);color:var(--faint)}
.copy-ta{position:fixed;z-index:5;top:76px;right:16px;width:min(520px,calc(100% - 32px));height:170px;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px;background:#101010;color:#eee;font:400 12px/1.5 var(--f-code);resize:none}

/* ── 상세: 좁은 화면은 한 줄로 ── */
@media (max-width:1099px){
  .dbody{display:block;overflow:auto;overscroll-behavior:contain}
  .dmain,.dside{overflow:visible}
  .dmain{padding:20px 24px 8px}
  .dside{border-left:0;padding:0 24px 48px}
  .tabs{margin-top:20px}
}
@media (max-width:699px){
  .dtop{height:56px;padding:0 6px 0 16px;gap:2px}
  .dnav{margin-right:0}
  .dact{position:fixed;left:0;right:0;bottom:0;z-index:4;justify-content:space-between;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--sheet);border-top:1px solid var(--line)}
  .dmain{padding:16px 16px 4px}
  .dside{padding:0 16px calc(92px + env(safe-area-inset-bottom))}
  .dtitle{margin-top:12px;font-size:24px;line-height:32px}
  .den{font-size:17px;line-height:24px}
  .tabs{gap:22px}
  .row{grid-template-columns:84px minmax(0,1fr);gap:12px}
  .phead{flex-direction:column;gap:12px}
  .copy-ta{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));left:16px;right:16px;width:auto}
}

/* ── 휴대폰·태블릿 ── */
@media (max-width:899px){
  :root{--pad:16px;--row-gap:32px}
  .bar-wrap{position:sticky;top:0;left:auto;width:auto;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:var(--bg)}
  .bar-lbl{display:none}
  .fbtn{display:inline-flex;margin-left:auto}
  .side{position:static;width:auto;display:block;padding:0 16px;margin-top:24px}
  .intro{margin-top:0}
  .gnav-wrap,.side-note{display:none}
  .main{margin-left:0;padding:40px 16px calc(96px + env(safe-area-inset-bottom))}
  .gh{min-height:0;padding-top:0;font-size:20px;line-height:26px}
  .grp + .grp{margin-top:56px;padding-top:24px}
  .comp{left:0;right:0;bottom:0;width:auto;transform:none;display:grid;grid-template-columns:72px minmax(0,1fr) 40px;align-items:center;gap:12px;padding:8px 12px calc(8px + env(safe-area-inset-bottom)) 8px;border-width:1px 0 0;border-radius:18px 18px 0 0;box-shadow:0 -12px 32px rgba(0,0,0,.55)}
  .comp-main,.comp-foot{display:contents}
  .comp-th{width:72px;border-radius:7px}
  .comp-tx{align-self:stretch;display:flex;align-items:center}
  .comp-t{-webkit-line-clamp:1;line-clamp:1;min-height:0;font-size:14px;line-height:20px}
  .comp-x,.chips,.seg{display:none}
  .send{width:40px;height:40px}
  .cstat{right:12px}
}
@media (prefers-reduced-motion:reduce){
  .dlg[open]{animation:none}
  .tv,.cstat{transition:none}
}

/* ── 사이트(라이트) ↔ 갤러리(다크) 전환 ──
   들어올 때: 사이트 쪽이 어두운 원으로 화면을 다 덮은 뒤 넘어온다 → 여기서는 캄캄한 화면에서 내용이 떠오른다.
   나갈 때: 덮개(사이트와 같은 흰 화면 + 사이트 머리글)가 누른 자리에서 원형으로 번져 덮은 뒤 넘어간다. */
.fx-cover{position:fixed;inset:0;z-index:200;display:none;background:#fff;color:#343434;pointer-events:none;color-scheme:light;--fx-f:34px}
html.fx-out .fx-cover{display:block}
html.fx-out.fx-iris .fx-cover{-webkit-mask-image:radial-gradient(circle at var(--fx-x) var(--fx-y),#000 var(--fx-r),transparent calc(var(--fx-r) + var(--fx-f)));mask-image:radial-gradient(circle at var(--fx-x) var(--fx-y),#000 var(--fx-r),transparent calc(var(--fx-r) + var(--fx-f)))}
html.fx-hold .main,html.fx-hold .comp{opacity:0}
/* 왼쪽 메뉴는 기다리지 않는다 — 넘어온 캄캄한 화면이 첫 장면으로 그려지는 순간 0.18초에 걸쳐 바로 나타난다.
   (영상 칸·입력창은 그 뒤에 떠오른다) */
@keyframes fxMenu{from{opacity:0}to{opacity:1}}
html.fx-menu .bar-wrap,html.fx-menu .side{animation:fxMenu .18s ease-out both}

/* 사이트 머리글 흉내 — site.html 과 같은 값 (실제 사이트에서는 진짜 머리글이 이 자리에 온다) */

/* 사이트 머리글 흉내 — 나갈 때 흰 원 안에 보이는 그림. 지금 사이트 새 머리글(테마 css/nav2.css · custom-navigation.css)의 값:
   한 줄 59 + 아래 선 1 · 폭 1364 · 좌우 32 · 로고 26px → 16px 뒤 메뉴(15px 보통 굵기 회색 600 · 칸 안쪽 13 · 칸 사이 6) ·
   오른쪽 돋보기(24px, 40px 칸 + 11) · [기업·채용 문의] 테두리 단추 · [로그인] 채운 초록(36px · 모서리 5 · 사이 10). 1024 이하 = 휴대폰 틀(로고 · 돋보기 · 메뉴 단추).
   진짜 머리글이 그 자리에 온다 — 메뉴 바뀌면 템플릿이 진짜 목록을 넣으므로 글자는 따라오고, 값이 바뀌면 여기만 고친다. */
.snav{height:60px;background:#fff;border-bottom:1px solid #E7E7E7;font-family:var(--f-site);color:#181818}
.snav-in{max-width:1364px;height:100%;margin:0 auto;padding:0 32px;display:flex;align-items:center}
.slogo{display:flex;align-items:center;flex:none}
.slogo img{display:block;width:auto;height:26px}
.smenu{display:flex;align-items:center;gap:6px;margin:0 0 0 16px;padding:0;list-style:none;font-size:15px;font-weight:500;line-height:1;color:#545454;white-space:nowrap}
.smenu li{padding:0 13px}
.sact{margin-left:auto;display:flex;align-items:center;gap:10px}
.sico{width:40px;height:40px;display:grid;place-items:center;margin-right:1px;color:#181818}
.sico svg{width:24px;height:24px}
.scta{height:36px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid #D5D5D5;border-radius:5px;background:#fff;font-size:13.5px;font-weight:600;line-height:1;color:#404040}
.slogin{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:5px;background:#059669;font-size:13.5px;font-weight:600;line-height:1;color:#fff}
.sham{display:none;width:40px;height:40px;place-items:center;color:#343434}
.sham svg{width:22px;height:22px}
@media (max-width:1024px){
  .snav-in{padding:0 8px 0 16px}
  .smenu,.scta,.slogin{display:none}
  .sham{display:grid}
  .sact{gap:0}
}

/* ── 손님 잠금 — 프롬프트 보기·복사는 로그인 회원만(10/9 운영자 「회원만」 · 슬라이드 갤러리와 같은 선) ──
   복사 단추 자리엔 자물쇠(누르면 로그인 화면), 상세의 프롬프트·한국어 칸엔 앞부분 몇 줄 + 로그인 상자.
   회원은 body.ms-member — 전문이 REST 로 온 뒤 js/gallery.js 가 잠금을 푼다(그전엔 앞부분만 보이다 바뀐다). */
.ic-lock{display:none}
.ms-locked .send .ic-copy,.ms-locked .send .ic-ok,.ms-locked .btn .ic-copy,.ms-locked .btn .ic-ok{display:none}
.ms-locked .send .ic-lock,.ms-locked .btn .ic-lock{display:block}
.lock-tease{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;color:var(--text-2)}
.lock-box{margin-top:20px;padding:18px 18px 16px;border-radius:8px;background:var(--surface-2)}
.lock-box p{margin:0 0 14px;font:400 14px/1.6 var(--f-ui);color:var(--text-2)}
.lock-box .btn{text-decoration:none}