/* ARCH AI 커뮤니티 갤러리 스타일 — gallery.html 의 <style> 1블록 (2026-09-27 분리). 캐시 무효화는 서버가 ?v=<해시> 로 처리. */

:root{--accent:#5b2fc6;--acc2:#7a4df0;--ink:#f2f2f6;--dim:rgba(255,255,255,.55);--card:#14161d;--line:rgba(255,255,255,.09);--s1:rgba(255,255,255,.05);--s2:rgba(255,255,255,.06);--s3:rgba(255,255,255,.08);--s4:rgba(255,255,255,.1);--s5:rgba(255,255,255,.16);--s6:rgba(255,255,255,.24);--s7:rgba(255,255,255,.32);--paper:#07080c;--glass:rgba(7,8,12,.78);--logo:#fff;--vside:#14161d;--vsink:#f2f2f6;--vbox:#101218;--shadow:0 18px 40px rgba(0,0,0,.45)}
  /* (G-0919A) 라이트 테마 — 스튜디오 토글(arch_theme)과 같은 값을 쓰며 기본은 라이트 */
  html:not([data-theme="dark"]){--ink:#0a0c10;--dim:rgba(20,22,28,.58);--card:#fff;--line:rgba(20,22,28,.1);--s1:rgba(20,22,28,.035);--s2:rgba(20,22,28,.05);--s3:rgba(20,22,28,.06);--s4:rgba(20,22,28,.08);--s5:rgba(20,22,28,.12);--s6:rgba(20,22,28,.16);--s7:rgba(20,22,28,.24);--paper:#f6f6f4;--glass:rgba(255,255,255,.82);--logo:#0a0c10;--vside:#fff;--vsink:#14161d;--vbox:#101218;--shadow:0 18px 40px rgba(20,22,28,.12)}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--paper);color:var(--ink);word-break:keep-all;min-height:100vh;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(560px 380px at 12% -4%,rgba(91,47,198,.22),transparent 60%),radial-gradient(640px 420px at 96% 12%,rgba(122,77,240,.14),transparent 60%),radial-gradient(700px 520px at 50% 118%,rgba(91,47,198,.16),transparent 60%)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
svg{display:block;flex:none}
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;padding:12px 26px;background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;line-height:1;flex:0 1 auto;min-width:0}
/* (2026-10-05) 로고가 줄어들 수 있게(width 기준, 비율 유지) — svg{flex:none} + height 고정이라 좁은 화면·iOS 글자 확대에서 헤더가 뷰포트보다 넓어져 가로 스크롤이 생겼다 */
.logo-full{width:95px;max-width:100%;height:auto;display:block;fill:var(--logo);flex:0 1 auto;min-width:0}
html{overflow-x:clip}   /* (2026-10-13) hidden → clip: hidden 은 iOS 에서 문서 스크롤러를 바꿔 상태바 탭(맨 위로)이 안 됐다. clip 은 스크롤 컨테이너를 만들지 않는다 */   /* 안전망: 어떤 요소가 넘쳐도 가로 스크롤·오른쪽 빈 공간은 생기지 않게(body 가 아닌 html — body 에 주면 sticky 헤더가 깨진다) */
.sp{flex:1}
.hbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 16px;border-radius:999px;font-size:13.5px;font-weight:600;border:1px solid var(--s6);background:var(--s3);color:var(--ink);cursor:pointer;transition:.15s;white-space:nowrap}
.hbtn:hover{background:var(--s5)}
.hbtn.grad{background:linear-gradient(135deg,#8b7cf6,#5ec8f2);border-color:var(--s7);font-weight:700;color:#fff;box-shadow:0 4px 14px rgba(124,116,234,.38)}
.hbtn.grad:hover{filter:brightness(1.07)}
.avwrap{position:relative}
.avatar{width:34px;height:34px;border-radius:50%;border:1px solid var(--s6);background:linear-gradient(135deg,var(--acc2),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;cursor:pointer}
.avmenu{position:absolute;right:0;top:42px;min-width:186px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;display:none;box-shadow:var(--shadow)}
.avmenu.show{display:block}
.avmenu button,.avmenu a{display:block;width:100%;text-align:left;padding:9px 12px;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600;border-radius:8px;cursor:pointer}
.avmenu button:hover,.avmenu a:hover{background:var(--s2)}
.head{max-width:1240px;margin:0 auto;padding:52px 22px 4px;text-align:center}
.head h1{font-size:clamp(26px,3.4vw,38px);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.head p{color:var(--dim);font-size:14.5px;margin-top:12px}
.bar{max-width:1240px;margin:26px auto 4px;padding:0 22px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pill{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--s1);color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.pill:hover{background:var(--s3);color:var(--ink)}
.pill.on{background:linear-gradient(135deg,var(--acc2),var(--accent));color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(91,47,198,.3)}
.grow{flex:1}
.upcap{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:0;background:linear-gradient(135deg,var(--acc2),var(--accent));color:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 4px 14px rgba(91,47,198,.35);transition:.15s}
.upcap:hover{filter:brightness(1.08)}
.srch{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--s1);border-radius:999px;padding:8px 14px;color:var(--dim)}
.srch:focus-within{border-color:rgba(124,116,234,.55)}
.srch input{background:none;border:0;outline:0;color:var(--ink);font:inherit;font-size:13px;width:130px}
.srch input::placeholder{color:var(--s7)}
.grid{max-width:1680px;margin:18px auto 90px;padding:0 16px;columns:5 230px;column-gap:10px}
.gcard{position:relative;break-inside:avoid;margin-bottom:10px;border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);cursor:pointer;transition:transform .15s,border-color .15s}
.gcard:hover{transform:translateY(-2px);border-color:var(--s5)}
.gcard img{width:100%;display:block;transition:opacity .35s}
.gcard.ldg{min-height:150px}
.gcard.ldg img{opacity:0}
.skel,.gcard.ldg{background:linear-gradient(100deg,var(--s1) 40%,var(--s4) 50%,var(--s1) 60%);background-size:200% 100%;animation:sk 1.1s linear infinite}
.skel{break-inside:avoid;margin-bottom:14px;border-radius:14px;height:210px}
@keyframes sk{to{background-position:-200% 0}}
.gmeta{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.74));display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.gchip{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:#5b2fc6;font-size:10px;font-weight:800;letter-spacing:.02em}
.glike{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.45);color:#fff;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:.15s}
.glike:hover{background:rgba(0,0,0,.65)}
.glike.on{background:linear-gradient(135deg,var(--acc2),var(--accent));border-color:transparent}
.gdel{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;cursor:pointer;display:none;place-items:center}
.gcard.mine .gdel,.gcard.adm .gdel{display:grid}
.gdel:hover{background:rgba(0,0,0,.8)}
.empty{max-width:520px;margin:80px auto;text-align:center;color:var(--dim)}
.empty .eico{display:flex;justify-content:center;margin-bottom:16px;color:var(--s6)}
.empty b{color:#fff}
.empty p{font-size:14px;line-height:1.7}
.ovl{position:fixed;inset:0;z-index:60;background:rgba(4,5,8,.82);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:20px}
.ovl.show{display:flex}
.sheet{position:relative;width:min(960px,96vw);max-height:92vh;overflow-y:auto;background:#0d0f15;border:1px solid var(--line);border-radius:18px}
.sheet>img{width:100%;display:block;border-radius:18px 18px 0 0}
.sclose{position:fixed;top:18px;right:18px;z-index:70;width:38px;height:38px;border-radius:50%;border:1px solid var(--s6);background:var(--s4);color:#fff;cursor:pointer;display:grid;place-items:center}
.sclose:hover{background:var(--s6)}
.uhead{padding:22px 22px 0}
.uhead h2{font-size:17px;font-weight:800;letter-spacing:-.01em}
.uhead p{color:var(--dim);font-size:12.5px;margin-top:6px}
.upgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:18px 22px 26px}
.unote{color:var(--dim);font-size:13px;grid-column:1/-1;line-height:1.7}
.ucell{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;border:2px solid transparent;transition:.15s}
.ucell:hover{border-color:var(--acc2)}
.ucell img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.ucell.ldg img{opacity:0}
.ucell.ldg{background:linear-gradient(100deg,var(--s1) 40%,var(--s4) 50%,var(--s1) 60%);background-size:200% 100%;animation:sk 1.1s linear infinite}
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%);z-index:90;background:#16181f;border:1px solid var(--line);color:#fff;padding:11px 20px;border-radius:999px;font-size:13px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;max-width:88vw;text-align:center}
.toast.show{opacity:1}
@media(max-width:700px){
  .top{padding:10px 14px;gap:8px}
  .hbtn{height:32px;padding:0 13px;font-size:12.5px}
  .head{padding-top:34px}
  .bar{padding:0 14px}
  .srch input{width:74px}
  .grid{columns:2 140px;padding:0 10px;column-gap:8px}
  .upgrid{grid-template-columns:repeat(2,1fr);padding:14px}
}

.langwrap{position:relative}
.langbtn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--s1);color:var(--ink);font-size:13px;font-weight:500;cursor:pointer}
.langbtn:hover{background:var(--s4)}
.langbtn .caret{font-size:9px;color:var(--dim)}
.langmenu{display:none;position:absolute;right:0;top:42px;min-width:150px;background:#12141b;border:1px solid var(--line);border-radius:12px;padding:6px;z-index:50;box-shadow:0 14px 34px rgba(0,0,0,.5)}
.langmenu.show{display:block}
.langmenu a{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:13px;text-decoration:none}
.langmenu a:hover{background:var(--s2)}
.langmenu a.on{color:#a78bfa;font-weight:700}

/* ── v4: 카테고리 필터 ── */
.catwrap{position:relative}
.catbtn{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;border:1px solid var(--line);background:var(--s1);color:var(--ink);font-size:12.5px;font-weight:600;cursor:pointer}
.catbtn:hover{background:var(--s3)}
.catmenu{display:none;position:absolute;right:0;top:44px;width:230px;max-height:380px;overflow-y:auto;background:#12141b;border:1px solid var(--line);border-radius:14px;padding:8px;z-index:55;box-shadow:0 16px 40px rgba(0,0,0,.55)}
.catmenu.show{display:block}
.catmenu .chead{padding:9px 12px 4px;font-size:9.5px;letter-spacing:.22em;color:var(--dim);font-weight:700}
.catmenu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 12px;border:0;background:none;color:var(--ink);font-size:13px;font-weight:600;border-radius:9px;cursor:pointer;gap:10px}
.catmenu button:hover{background:var(--s2)}
.catmenu button.on{background:linear-gradient(135deg,rgba(122,77,240,.35),rgba(91,47,198,.35));color:#cbb8ff}
.catmenu button b{font-weight:700;color:var(--dim);font-size:11.5px}
.catmenu button.on b{color:#cbb8ff}
/* ── v4: 상세 뷰어 ── */
.vwr{position:fixed;inset:0;z-index:70;display:none;background:rgba(4,5,8,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:22px}
.vwr.show{display:flex;align-items:center;justify-content:center}
.vbox{display:flex;width:min(1240px,100%);height:min(780px,100%);border-radius:18px;overflow:hidden;background:var(--vbox);border:1px solid var(--s3)}
.vleft{position:relative;flex:1;min-width:0;background:#0b0d12;display:flex;align-items:center;justify-content:center}
.vleft img{max-width:100%;max-height:100%;object-fit:contain}
.vacts{position:absolute;top:14px;left:14px;display:flex;gap:8px}
.vact{width:38px;height:38px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:var(--s3);color:#fff;cursor:pointer;display:grid;place-items:center;transition:.15s}
.vact:hover{background:rgba(255,255,255,.16)}
.vact.on{background:linear-gradient(135deg,var(--acc2),var(--accent));border-color:transparent}
.vclose{position:absolute;top:14px;right:14px}
.vnav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:var(--s4);color:#fff;cursor:pointer;display:grid;place-items:center}
.vnav:hover{background:var(--s6)}
.vnav.prev{left:14px}.vnav.next{right:14px}
.vside{width:330px;flex:0 0 330px;background:var(--vside);color:var(--vsink);display:flex;flex-direction:column}
.vscroll{flex:1;overflow-y:auto;padding:20px 20px 12px}
.vwho{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.vava{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--acc2),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}
.vwho .nm{font-size:13.5px;font-weight:800}
.vwho .dt{font-size:11.5px;color:#8a8f99}
.vwho .lk{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#5b6069}
.vlab{font-size:9.5px;letter-spacing:.18em;color:#9aa0a8;font-weight:800;margin:14px 0 5px}
.vval{font-size:13.5px;font-weight:700}
.vval a{color:#6d3df0;text-decoration:none;font-weight:800}
.vfoot{padding:14px 20px 16px;border-top:1px solid #eceef2}
.tagchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px}
.tchip{display:inline-flex;align-items:center;height:27px;padding:0 12px;border-radius:999px;background:#f1edfc;color:#5b2fc6;font-size:12px;font-weight:800;letter-spacing:.01em}
a.tchip{cursor:pointer;text-decoration:none}
a.tchip:hover{background:#e6defb}
.cmt-n{font-size:10px;color:#9aa0a8;letter-spacing:normal}
.cmtlist{display:flex;flex-direction:column;gap:10px;margin:2px 0 12px}
.cmtitem{display:flex;gap:9px;align-items:flex-start}
.cmtav{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#8b7cf6,#5b2fc6);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.cmtbody{flex:1;min-width:0}
.cmtmeta{display:flex;align-items:baseline;gap:7px}
.cmtmeta b{font-size:12.5px;font-weight:800;color:#14161d}
.cmtmeta span{font-size:11px;color:#9aa0a8}
.cmttxt{font-size:13px;line-height:1.6;color:#3a3f47;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;margin-top:2px}
.cmtx{border:0;background:none;color:#c0c4cc;font-size:14px;line-height:1;cursor:pointer;padding:2px 4px}
.cmtx:hover{color:#e2498a}
.cmtempty{font-size:12.5px;color:#9aa0a8;padding:4px 0 10px}
.cmtform{display:flex;gap:8px;align-items:center}
.cmtme{flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#8b7cf6,#5b2fc6);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800;overflow:hidden}
.cmtme img,.cmtav img,.vava img{width:100%;height:100%;object-fit:cover;display:block}
.vava{overflow:hidden;flex:0 0 36px}   /* (2026-10-09) 이름이 길면 flex 가 아바타를 가로로 눌러 타원이 됐다 → 고정 폭 */
.cmtav{overflow:hidden}
/* (G-0916A) 댓글 카드 — Pinterest식: 아바타 · 이름 · 시간 / 본문(긴 단어·URL도 칸 안에서 줄바꿈) / 하단 ♡ n · 신고 · 삭제 */
.cmtitem{align-items:flex-start;padding:2px 0}
.cmtbody{flex:1;min-width:0}
.cmtmeta b{font-size:12.5px;color:#14161d;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmtmeta span{font-size:11px;color:#9aa0a8;white-space:nowrap}
.cmttxt{overflow-wrap:anywhere;word-break:normal}
.cmtacts{display:flex;align-items:center;gap:12px;margin-top:4px}
.cmtlike{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:4px;color:#8a8f99;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit}
.cmtlike svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.cmtlike.on{color:#e2498a}.cmtlike.on svg{fill:#e2498a;stroke:#e2498a}
.cmtrep,.cmtx{border:0;background:none;padding:0;color:#b4b8c0;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;line-height:1}
.cmtrep:hover,.cmtx:hover{color:#5c6066}
.cmtform input{flex:1;min-width:0;padding:9px 11px;border:1px solid #e2e3ea;border-radius:10px;font-size:13px;font-family:inherit}
.cmtform input:focus{outline:none;border-color:#7a4df0}
.cmtform button{flex:0 0 auto;padding:0 14px;border:0;border-radius:10px;background:#5b2fc6;color:#fff;font-size:12.5px;font-weight:800;cursor:pointer}
.cmtform button:disabled{opacity:.45;cursor:default}
.cmtlogin{font-size:12.5px;margin-bottom:8px}
.cmtlogin a{color:#6d3df0;font-weight:700;text-decoration:none}
/* 관리자 좋아요 조정 */
.lkadj{display:none;align-items:center;gap:6px;margin-left:10px}
.lkadj input{width:64px;padding:6px 8px;border:1px solid #e2e3ea;border-radius:8px;font-size:12.5px;text-align:right;font-family:inherit}
.lkadj button{height:28px;padding:0 12px;border:0;border-radius:8px;background:#5b2fc6;color:#fff;font-size:11.5px;font-weight:800;cursor:pointer}
/* 업로드 2단계 */
.upsel{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;border-top:1px solid var(--line)}
.upsel img{width:96px;height:54px;object-fit:cover;border-radius:8px}
.upgo{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 18px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--acc2),var(--accent));color:#fff;font-size:13px;font-weight:800;cursor:pointer}
.upcancel{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--dim);font-size:12.5px;font-weight:600;cursor:pointer}
/* (2026-09-27) 관리자 게시 시트 */
.adcap{background:linear-gradient(135deg,#2f7a5b,#1f5c45);box-shadow:0 4px 14px rgba(31,92,69,.35)}
.asheet{width:min(720px,96vw)}
.aform{padding:16px 22px 0}
.apics{display:grid;grid-template-columns:1fr 1fr 120px;gap:12px}
.apick{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:150px;border:1.5px dashed var(--s6);border-radius:14px;background:var(--s1);cursor:pointer;overflow:hidden;text-align:center;padding:10px}
.apick:hover{border-color:var(--acc2);background:var(--s2)}
.apick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.apick img{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apick.has img{display:block}
.apick.has .apick-hint{display:none}
.apick.has .apick-l{position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(10,12,16,.72);color:#fff;font-size:10px}
.apick-l{font-size:12px;font-weight:700;color:var(--ink)}
.apick-l b{color:#f0abfc;font-weight:700;margin-left:4px}
.apick-hint{font-size:11px;color:var(--dim)}
.apick-av{min-height:150px}
.afields{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:14px}
.afields label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--dim)}
.afields label small{font-weight:400}
.afields input,.afields select{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--s1);color:var(--ink);font-size:13px;font-family:inherit}
.afields select option{color:#111}
@media(max-width:640px){.apics{grid-template-columns:1fr 1fr}.apick-av{grid-column:span 2;min-height:110px}.afields{grid-template-columns:1fr}}
@media(max-width:860px){
  .vwr{padding:0}
  .vbox{flex-direction:column;height:100%;border-radius:0}
  .vleft{flex:0 0 46vh}
  .vside{width:100%;flex:1;min-height:0}
}

  /* ══ 모션 레이어 (M-0918) — 팝업·메뉴·화면 전환이 "팟" 뜨지 않고 자연스럽게 나타나도록.
     display 전환만 하던 오버레이에 공통 애니메이션을 입힌다. 기존 표시/숨김 로직(.show 토글)은 그대로.
     시스템 "동작 줄이기"를 켠 사용자에게는 전부 비활성(마지막 블록). ══ */
  @keyframes mFade{from{opacity:0}to{opacity:1}}
  @keyframes mPop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
  @keyframes mPopSm{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes mRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes mSlideR{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
  @keyframes mZoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
  .vwr.show,.ovl.show{animation:mFade .16s ease both}
  .vwr.show .vbox{animation:mPop .26s cubic-bezier(.2,.8,.2,1) both}
  .ovl.show>div{animation:mPop .24s cubic-bezier(.2,.8,.2,1) both}
  .avmenu.show,.catmenu.show,.langmenu.show{animation:mPopSm .15s ease both}
  .cmtitem{animation:mFade .2s ease both}
  .grow,.gchip{transition:transform .16s ease,box-shadow .18s ease}
  @media(prefers-reduced-motion:reduce){ .vwr.show,.ovl.show,.vwr.show .vbox,.ovl.show>div,.avmenu.show,.catmenu.show,.langmenu.show,.gcard,.cmtitem{animation:none!important} }

  /* ── 공용 다이얼로그 (브라우저 기본 alert/confirm/prompt 대체) ── */
  .adlg-bg{position:fixed;inset:0;z-index:20000;background:rgba(20,22,28,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .16s ease}
  .adlg-bg.on{opacity:1}
  .adlg{width:100%;max-width:390px;background:#fff;border-radius:16px;box-shadow:0 18px 50px rgba(20,22,28,.24),0 2px 6px rgba(20,22,28,.08);padding:24px 24px 18px;transform:translateY(8px) scale(.985);transition:transform .18s cubic-bezier(.2,.8,.2,1)}
  .adlg-t{font-size:16px;font-weight:700;color:#0a0c10;letter-spacing:-.01em;margin:0 0 8px}
  .adlg-m{font-size:14px;line-height:1.7;color:#4a4e55;margin:0;white-space:pre-line;word-break:keep-all;overflow-wrap:break-word}
  .adlg-in{width:100%;margin-top:14px;padding:11px 13px;border:1px solid rgba(20,22,28,.16);border-radius:10px;font-size:14px;font-family:inherit;color:#0a0c10;outline:none;box-sizing:border-box}
  .adlg-b{display:flex;gap:8px;justify-content:flex-end;margin-top:20px}
  .adlg-btn{font-family:inherit;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;border:0;cursor:pointer;transition:.14s}
  .adlg-no{background:#f1f1f3;color:#4a4e55}
  .adlg-yes{background:linear-gradient(135deg,#8b7cf6,#5ec8f2);color:#fff}
  .adlg-yes.danger{background:#dc2626}
  html[data-theme="dark"] .adlg{background:#171526;color:var(--ink)}
  html[data-theme="dark"] .adlg-t{color:#f3f4f6}
  html[data-theme="dark"] .adlg-m{color:rgba(243,244,246,.72)}
  html[data-theme="dark"] .adlg-in{background:var(--s2);border-color:rgba(255,255,255,.14);color:#f3f4f6}
  html[data-theme="dark"] .adlg-no{background:var(--s3);color:rgba(243,244,246,.8)}
  /* ══ (G-0919A) 헤더 — 스튜디오와 동일 구성: 토큰 캡슐(오브) · Language · 테마 · 계정 ══ */
  .thm{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;border:1px solid var(--line);background:var(--card);flex:none}
  .thm button{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;color:var(--dim);font-family:inherit;font-size:10px;font-weight:700;
              letter-spacing:.08em;line-height:1;padding:7px 10px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
  .thm button svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .thm button.on{background:var(--ink);color:var(--card)}
  .avlogo{width:56%;height:56%;fill:currentColor;display:block}
  .avatar{overflow:hidden;flex:0 0 34px}
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
  .vava .avlogo,.cmtav .avlogo{width:58%;height:58%}
  .avmenu .am-it{display:flex;align-items:center;width:100%;text-align:left;gap:9px;padding:9px 12px;border:0;background:transparent;color:var(--ink);
                 font-family:inherit;font-size:13px;cursor:pointer;border-radius:9px;text-decoration:none;transition:background .14s}
  .avmenu .am-it:hover{background:var(--s2)}
  .avmenu .am-div{height:1px;margin:5px 8px;background:var(--line)}
  .avmenu .am-out{color:#e5484d}
  @media(max-width:700px){ .token{padding:0 11px} .thm button span{display:none} .thm button{padding:7px} }
  html[data-theme="dark"] .vside .vlab{color:rgba(255,255,255,.45)}
  html[data-theme="dark"] .tchip{background:rgba(139,124,246,.18);color:#c9bdff}
  html[data-theme="dark"] .tchip:hover{background:rgba(139,124,246,.28)}
  /* 다크 뷰어 — 우측 패널 글자 대비 */
  html[data-theme="dark"] .vside .cmtmeta b{color:#f2f2f6}
  html[data-theme="dark"] .vside .cmttxt{color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .vside .cmtmeta span,html[data-theme="dark"] .vside .cmt-n,html[data-theme="dark"] .vside .cmtempty{color:rgba(255,255,255,.45)}
  html[data-theme="dark"] .vside .cmtlike{color:rgba(255,255,255,.55)}
  html[data-theme="dark"] .vside .cmtx{color:rgba(255,255,255,.38)}
  html[data-theme="dark"] .vside input,html[data-theme="dark"] .vside textarea{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#f2f2f6}
  html[data-theme="dark"] .vside b{color:#f2f2f6}
  /* (G-0919B) 썸네일 전/후 — 기본은 결과, 마우스를 올리면 원본이 비쳐 나온다(랜딩과 같은 방식) */
  .gcard .gbase{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s var(--ease,cubic-bezier(.2,.8,.2,1));pointer-events:none}
  .gcard.hasb:hover .gbase{opacity:1}
  .gcard .gba{position:absolute;left:8px;top:8px;z-index:2;padding:3px 8px;border-radius:999px;background:rgba(10,12,16,.72);color:#fff;
              font-size:9px;font-weight:800;letter-spacing:.12em;opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .25s;pointer-events:none}
  .gcard.hasb:hover .gba{opacity:1;transform:none}
  .gcard .gmeta,.gcard .gdel{z-index:3}
  @media(hover:none){ .gcard .gbase,.gcard .gba{display:none} }
  @media(prefers-reduced-motion:reduce){ .gcard .gbase,.gcard .gba{transition:none} }
  .vpair{display:flex;gap:18px;margin-top:12px}
  .vpair>div{flex:1;min-width:0}
  .vval{font-size:13px;font-weight:700;color:inherit;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* (2026-09-27) 모니터형 프레임: 어두운 베젤 + 안쪽 하이라이트, 16:10 */
  .vbase{position:relative;border-radius:9px;overflow:hidden;border:4px solid #1b1d25;background:#0a0c10;aspect-ratio:16/10;
         box-shadow:0 8px 22px rgba(20,22,28,.16),inset 0 0 0 1px rgba(255,255,255,.07)}
  html[data-theme="dark"] .vbase{border-color:#2a2c36;box-shadow:0 8px 22px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08)}
  .vbase img{width:100%;height:100%;object-fit:cover;display:block}
  #vBaseWrap+.vpair{margin-top:6px}
  .vbtag{position:absolute;left:7px;top:7px;padding:2px 7px;border-radius:999px;background:rgba(10,12,16,.72);color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.12em}
  .vpr{font-size:12.5px;line-height:1.65;padding:10px 12px;border-radius:10px;background:var(--s1);border:1px solid var(--line);
       white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere;max-height:132px;overflow:auto}
  /* ══ (G-0920A) 커뮤니티 갤러리 정돈 ══ */
  :root{--gw:1680px;--gpad:16px;--ggap:6px}
  /* 헤드·도구줄·격자가 같은 폭·같은 좌우선을 쓴다 */
  .head,.bar,.grid{max-width:var(--gw);margin-left:auto;margin-right:auto;padding-left:var(--gpad);padding-right:var(--gpad);box-sizing:border-box}
  .head{text-align:left;padding-top:26px;padding-bottom:0}
  .head h1{font-size:22px;font-weight:700;letter-spacing:-.015em}
  .head p{font-size:13px;margin-top:6px}
  .bar{margin-top:16px;margin-bottom:0;gap:8px;flex-wrap:nowrap}
  .bar .grow{flex:1 1 auto;min-width:8px}
  .bar .pill,.bar .catbtn,.bar .upcap{flex:0 0 auto;white-space:nowrap}
  .bar .srch{min-width:0;flex:0 1 240px}
  .bar .srch input{width:100%;min-width:0}
  /* 격자 — 사진 사이 간격 촘촘, 폭에 따라 열 수 자동 */
  .grid{margin-top:12px;margin-bottom:80px;columns:4 300px;column-gap:var(--ggap)}   /* 열 수는 gallery.js colCount() 가 같은 기준(300px, 최대 4열)으로 계산 — (2026-10-09) 5열→4열 */
  .gcard{margin-bottom:var(--ggap);border-radius:8px}
  @media(max-width:700px){ :root{--gpad:10px;--ggap:5px} .grid{columns:2 140px} .bar{flex-wrap:wrap} .bar .grow{display:none}
    /* (2026-10-05) 모바일에선 기능 태그 캡슐을 숨긴다 — 2열 카드에서 사진을 가리고(글자 확대 시 두 줄) 정보 가치도 낮다. 좋아요만 남긴다 */
    .gchip{display:none} .gmeta{padding:22px 8px 8px;justify-content:flex-end} .glike{padding:4px 9px;font-size:11px} }
  /* (2026-10-03) 무한 스크롤: CSS columns 대신 JS 가 만든 열(.gcol)에 카드를 넣는다 — columns 는 덧붙일 때마다 전부 재배치돼 카드가 열 사이를 뛴다.
     열 수·최소 폭은 위 columns 규칙과 같게 gallery.js colCount() 가 계산(데스크톱 300px 자동, 모바일 2열 140px). */
  .grid{columns:auto!important;display:flex;gap:var(--ggap);align-items:flex-start}
  .grid>.gcol{flex:1 1 0;min-width:0}
  .gcol .skel{margin-bottom:var(--ggap)}
  .gcard{animation:mPop .26s ease both}
  .more{height:56px;display:flex;align-items:center;justify-content:center;margin:-60px auto 60px}
  .more .spin{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--accent);animation:mSpin .8s linear infinite;opacity:0;transition:opacity .2s}
  .more[data-state="loading"] .spin{opacity:1}
  @keyframes mSpin{to{transform:rotate(360deg)}}

  /* 토큰 캡슐 — 스튜디오와 동일(회전 링 + 은은한 빛) */
  .token{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--accent);padding:7px 13px;border-radius:14px;font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap}
  .token b{font-family:ui-monospace,'SF Mono','JetBrains Mono','Pretendard',monospace;color:var(--accent);font-weight:700}
  .token .orb{position:relative;width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;isolation:isolate}
  .token .orb svg{position:relative;z-index:2;width:11px;height:11px;fill:none;stroke:var(--accent);stroke-width:2}
  .token .orb::before,.token .orb::after{content:'';position:absolute;border-radius:50%;background:conic-gradient(from 0deg,#5b2fc6,#38bdf8,#f472b6,#f5c542,#34d399,#5b2fc6);animation:orbspin 2.8s linear infinite}
  .token .orb::before{inset:0;-webkit-mask:radial-gradient(circle,transparent 60%,#000 62%);mask:radial-gradient(circle,transparent 60%,#000 62%);z-index:1}
  .token .orb::after{inset:-4px;filter:blur(5px);opacity:.45;z-index:0}
  @keyframes orbspin{to{transform:rotate(360deg)}}
  html[data-theme="dark"] .token{background:rgba(139,108,240,.10)}
  @media(prefers-reduced-motion:reduce){ .token .orb::before,.token .orb::after{animation:none} }

  /* 헤더 기본 프로필 로고 — 시각 중심 보정 */
  .avatar{display:grid;place-items:center;padding:0}
  .avatar .avlogo{width:52%;height:52%;transform:translate(3%,-2%)}

  /* 뷰어 좌상단 캡슐 — 아이콘 정중앙 */
  .vact{padding:0;line-height:0}
  .vact svg{display:block;margin:auto}
  /* '이 기능으로 만들기' — 사진 우하단 글래스 캡슐 */
  .vmake{position:absolute;right:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;
         background:rgba(20,22,28,.42);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
         border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;
         box-shadow:0 6px 20px rgba(0,0,0,.25);transition:background .18s,transform .18s}
  .vmake:hover{background:rgba(20,22,28,.6);transform:translateY(-1px)}
  .vmake svg{flex:none}

  /* 우측 패널 — 굵기 보통, 여백 넉넉히, 태그는 중립 톤 */
  .vscroll{padding:24px 24px 14px;display:flex;flex-direction:column;min-height:0}
  .vfoot{padding:14px 24px 18px}
  .vwho{margin-bottom:20px;gap:12px}
  .vwho .nm{font-weight:600;font-size:14px}
  .vwho .dt{margin-top:2px}
  .vwho .lk{font-weight:500}
  .vlab{font-size:11px;letter-spacing:.04em;font-weight:500;margin:18px 0 8px;text-transform:none}
  .vpair{margin-top:4px;gap:24px}
  .vval{font-weight:500;font-size:13.5px}
  .tagchips{gap:6px}
  .tchip{height:28px;padding:0 11px;border-radius:8px;background:var(--vtag);color:var(--vsink);border:1px solid var(--vtagl);font-size:12px;font-weight:400;letter-spacing:0}
  .tchip:hover{background:var(--vtagh)}
  :root{--vtag:#f4f5f7;--vtagh:#eceef2;--vtagl:#e6e8ec}
  html[data-theme="dark"]{--vtag:rgba(255,255,255,.06);--vtagh:rgba(255,255,255,.1);--vtagl:rgba(255,255,255,.1)}
  html[data-theme="dark"] .tchip{background:var(--vtag);color:rgba(255,255,255,.82)}
  html[data-theme="dark"] .tchip:hover{background:var(--vtagh)}
  .vpr{font-weight:400}
  /* 댓글 — 스크롤 영역의 바닥(입력란 바로 위)에 붙는다 */
  .vcmtsec{margin-top:auto;padding-top:18px}
  .vcmthead{display:flex;align-items:center;justify-content:space-between}
  .cmtlist{gap:14px;margin:4px 0 4px}
  .cmtmeta b{font-weight:600}
  .cmttxt{font-weight:400;line-height:1.55}
  /* (G-0920B) 라이트: 배경은 순백, 헤더는 옅은 회색 */
  html:not([data-theme="dark"]){--paper:#ffffff;--glass:rgba(246,247,249,.92)}
  html:not([data-theme="dark"]) body{background:#fff;background-image:none}
  html:not([data-theme="dark"]) .top{background:rgba(246,247,249,.92);border-bottom:1px solid rgba(20,22,28,.07)}
  /* 좌상단 제목 여백 — 가장자리에서 조금 더 떨어뜨리고 위아래 숨 쉴 틈 */
  :root{--gpad:28px}
  .head{padding-top:36px}
  .head p{margin-top:8px}
  .bar{margin-top:22px}
  @media(max-width:700px){ :root{--gpad:14px} .head{padding-top:24px} .bar{margin-top:16px} }
  /* ══ (G-0920C) 반응형·뷰어 정리 ══ */
  /* 언어 메뉴 — 라이트에서 검정 배경에 검정 글씨라 안 보이던 문제 */
  .langmenu{background:var(--card);box-shadow:var(--shadow)}
  .langmenu a.on{color:var(--accent);font-weight:600}
  html[data-theme="dark"] .langmenu a.on{color:#a78bfa}

  /* 헤더 — 좁아지면 글자를 빼고 아이콘만 */
  @media(max-width:820px){
    .langbtn span:not(.caret){display:none}
    .langbtn{padding:0 11px;gap:4px}
    .token span[data-i18n="tok_lab"]{display:none}
    .token{padding:7px 11px;gap:5px}
  }
  @media(max-width:560px){ #studioBtn{display:none!important} .top{gap:8px;padding-left:12px;padding-right:12px} }

  /* 도구줄 — 좁아지면 검색창을 다음 줄 전체폭으로 */
  @media(max-width:900px){
    .bar{flex-wrap:wrap;row-gap:10px}
    .bar .grow{display:block;flex:1 1 auto}
    .bar .srch{order:10;flex:1 1 100%;max-width:none}
  }

  /* 본인 게시물 삭제 — 사진 좌하단 아이콘 캡슐 */
  .vdelc{position:absolute;left:14px;bottom:14px;z-index:4;width:38px;height:38px;border-radius:11px;padding:0;line-height:0;display:grid;place-items:center;
         background:rgba(20,22,28,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.22);color:#ff8fb0;cursor:pointer;transition:background .15s}
  .vdelc:hover{background:rgba(226,73,138,.35);color:#fff}
  .vdelc svg{display:block;margin:auto}

  /* 댓글 등록 — 입력칸과 같은 높이·둥글기 */
  .cmtform{gap:8px}
  .cmtform input{height:40px;padding:0 13px;border-radius:10px}
  .cmtform button{height:40px;padding:0 18px;border-radius:10px;font-weight:600;font-size:13px}
  html[data-theme="dark"] .cmtform input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#f2f2f6}

  /* 접이식 헤더 — 데스크톱에선 제목만 보이고 동작하지 않는다 */
  .vsec-t{display:none}
  /* (2026-09-27 테스터) font:inherit 가 .vlab 의 11px/500 을 초기화해 '댓글'만 커 보였다 → 다른 라벨(기능·비율·태그)과 동일 크기 */
  .vcmthead{width:100%;background:none;border:0;padding:0;font:inherit;font-size:11px;font-weight:500;letter-spacing:.04em;color:inherit;cursor:default;text-align:left}
  .vcmthead svg{display:none}

  @media(max-width:860px){
    /* 사진 영역 — 위아래 캡슐 줄을 사진 밖으로 빼서 겹치지 않게 */
    .vleft{flex:0 0 auto;height:auto;min-height:0;padding:62px 0 58px;max-height:62vh}
    .vleft img{max-height:calc(62vh - 120px)}
    .vacts{top:12px;left:12px}
    .vclose{top:12px!important;right:12px!important}
    .vmake{right:12px;bottom:12px;height:34px}
    .vdelc{left:12px;bottom:12px}
    .vnav{top:50%}
    /* 아래 정보 — 접이식으로 간결하게 */
    .vscroll{padding:14px 16px 8px}
    .vwho{margin-bottom:10px}
    .vsec-t{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 2px;border:0;border-top:1px solid var(--vline,#eceef2);background:none;
            font:inherit;font-size:13.5px;color:inherit;cursor:pointer;text-align:left}
    .vsec-t .vsec-sum{margin-left:auto;font-size:12px;color:#8a8f99;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
    .vsec-t svg,.vcmthead svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform .22s}
    .vside.info-open #vInfoT svg{transform:rotate(180deg)}
    .vinfo{display:none;padding:0 2px 10px}
    .vside.info-open .vinfo{display:block}
    .vinfo .vpair{margin-top:0}
    .vinfo .vlab{margin:12px 0 6px}
    .vcmtsec{margin-top:0;padding-top:0}
    .vcmthead{display:flex!important;align-items:center;gap:8px;height:44px;margin:0!important;padding:0 2px!important;border-top:1px solid var(--vline,#eceef2);
              font-size:13.5px!important;letter-spacing:0!important;color:inherit!important;cursor:pointer}
    .vcmthead .cmt-n{margin-left:auto}
    .vcmthead svg{display:block}
    .vside.cmt-open #vCmtT svg{transform:rotate(180deg)}
    .vcmtsec .cmtlist,.vcmtsec .cmtempty{display:none}
    .vside.cmt-open .vcmtsec .cmtlist,.vside.cmt-open .vcmtsec .cmtempty{display:flex}
    .vside.cmt-open .vcmtsec .cmtempty{display:block}
    .vfoot{padding:10px 16px 14px}
  }
  html[data-theme="dark"]{--vline:rgba(255,255,255,.08)}
  /* (0920) iOS 사파리 입력 확대 방지 — 16px 미만 글자 입력칸을 누르면 화면이 확대돼 레이아웃이 틀어진다.
     터치 기기에서만 입력칸 글자를 16px로(데스크톱 디자인은 그대로). 사용자 핀치 확대는 막지 않는다. */
  @media (hover:none) and (pointer:coarse){
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select{font-size:16px!important}
  }