@charset "utf-8";
/* 갤러리-모션-샘플 — 분류 탭 · 크게/작게 · 사진 수 · 크게 보기.
   강조색은 사이트 색상(css-2/bg_sub.php 의 --c-primary)을 따른다. 클래스는 테마와 겹치지 않게 gm- 로 시작한다.
   크게 보기(.gm-lb)는 열 때 body 아래로 옮겨지므로 색 변수를 그쪽에도 둔다. */
.gm-board,.gm-lb{
  --gm-ink:#1f2933; --gm-mute:#6b7480; --gm-line:#e1e4e8; --gm-sheet:#fff;
  --gm-accent:var(--c-primary,#2f5d8a);
  --gm-soft:#eef2f6;
  --gm-c1:#2f5d8a; --gm-c2:#c07a2c; --gm-c3:#4b6f8f; --gm-c4:#4b7a5a; --gm-c5:#7a4f8a;
  word-break:keep-all;overflow-wrap:break-word;
}
@supports (background:color-mix(in srgb,red 10%,white)){
  .gm-board,.gm-lb{--gm-soft:color-mix(in srgb,var(--gm-accent) 10%,#fff)}
}
.gm-board *,.gm-lb *{box-sizing:border-box}

/* 머리 — 전체 글 수 · 페이지 */
.gm-head{border-bottom:2px solid var(--gm-ink);padding-bottom:10px;margin-bottom:0}
.gm-total{margin:0;font-size:13px;color:var(--gm-mute)}
.gm-total b{color:var(--gm-accent)}

/* 분류 탭 · 크게/작게 — 분류는 게시판 「분류」 목록, 숫자는 분류별 글 수. 탭은 분류 주소(sca)로 이동한다 */
.gm-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 26px}
.gm-tabs{display:flex;flex-wrap:wrap;gap:8px}
.gm-tabs a{display:inline-flex;align-items:center;font-size:13px;height:34px;padding:0 14px;border-radius:99px;border:1px solid var(--gm-line);background:var(--gm-sheet);color:var(--gm-ink);text-decoration:none}
.gm-tabs a:hover{border-color:var(--gm-accent);color:var(--gm-accent)}
.gm-tabs .n{font-size:11px;color:var(--gm-mute);margin-left:5px;font-variant-numeric:tabular-nums}
.gm-tabs a.on{background:var(--gm-ink);border-color:var(--gm-ink);color:#fff;font-weight:700}
.gm-tabs a.on .n{color:inherit;opacity:.7}
.gm-size{display:flex;border:1px solid var(--gm-line);border-radius:8px;overflow:hidden;margin-left:auto}
.gm-size button{font:inherit;font-size:12px;height:32px;padding:0 12px;border:0;background:var(--gm-sheet);color:var(--gm-mute);cursor:pointer;display:flex;align-items:center;gap:6px}
.gm-size button + button{border-left:1px solid var(--gm-line)}
.gm-size button svg{width:14px;height:14px;fill:currentColor}
/* 누른 버튼은 사이트 강조색과 상관없이 짙은 회색 — 빨강 등 강조색이 경고처럼 보이지 않게 */
.gm-size button.on{background:#eef0f2;color:var(--gm-ink);font-weight:700;cursor:default}

/* 사진 목록 — 작게 = 게시판 「갤러리 이미지 수」 열, 크게 = 3열 */
.gm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.gm-grid[data-size="small"]{--cols:var(--gm-small,5);--gap:40px 26px}
.gm-grid[data-size="big"]{--cols:3;--gap:52px 36px}
.gm-item{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;transform-origin:0 0}
.gm-thumb{position:relative;display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:12px;overflow:hidden;background:var(--gm-line);cursor:zoom-in}
.gm-thumb:focus-visible{outline:3px solid var(--gm-accent);outline-offset:2px}
/* 테마 sub_web.css 가 「button img」 를 숨긴다 — 이 스킨의 버튼 안 사진은 보이게 */
.gm-thumb > img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.gm-thumb > img.fit{object-fit:contain;background:#f3f4f6}
.gm-thumb:hover > img{transform:scale(1.04)}
.gm-zoom{position:absolute;right:8px;bottom:8px;width:30px;height:30px;border-radius:50%;background:rgba(15,20,28,.6);display:grid;place-items:center;opacity:0;transition:opacity .25s}
.gm-zoom svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
.gm-thumb:hover .gm-zoom,.gm-thumb:focus-visible .gm-zoom{opacity:1}
@media (hover:none){.gm-zoom{opacity:1}}
.gm-cnt{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:99px;background:rgba(15,20,28,.6);color:#fff;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.gm-cnt svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.6}
.gm-new{position:absolute;left:8px;bottom:8px;height:20px;line-height:20px;padding:0 8px;border-radius:4px;background:var(--gm-accent);color:#fff;font-size:11px;font-weight:700}
.gm-mov{position:absolute;left:50%;top:50%;width:44px;margin:-22px 0 0 -22px;pointer-events:none}
.gm-mov img{display:block;width:100%}
.gm-cap{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 2px}
.gm-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.gm-cat{font-size:11px;font-weight:700;color:var(--cat);border:1px solid var(--cat);border-radius:99px;padding:0 9px;white-space:nowrap;text-decoration:none}
.gm-cat:empty{display:none}
.gm-d{font-size:12px;color:var(--gm-mute);font-variant-numeric:tabular-nums}
.gm-cap h3{margin:0;font-size:15px;line-height:1.45;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-cap h3 a{color:var(--gm-ink);text-decoration:none}
.gm-cmt{font-size:12px;color:var(--gm-accent);font-weight:400}
.gm-cap p{display:none;margin:0;font-size:13px;line-height:1.6;color:var(--gm-mute);-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gm-grid[data-size="big"] .gm-cap h3{font-size:17px}
.gm-grid[data-size="big"] .gm-cap p{display:-webkit-box}
.gm-grid[data-size="big"] .gm-cap p:empty{display:none}
.gm-empty{grid-column:1/-1;text-align:center;color:var(--gm-mute);padding:80px 0;font-size:13px}
.gm-board .chk_boxs{z-index:2;top:8px;left:8px}

/* 분류 색 — 분류 순서대로 1~5 를 돌려 쓴다(분류가 없으면 사이트 색) */
:where(.gm-item,.gm-lb-side){--cat:var(--gm-accent)}
.gm-c1{--cat:var(--gm-c1)} .gm-c2{--cat:var(--gm-c2)} .gm-c3{--cat:var(--gm-c3)} .gm-c4{--cat:var(--gm-c4)} .gm-c5{--cat:var(--gm-c5)}

.gm-board .pageing_div{margin-top:40px}

/* 크게 보기 — 누른 사진이 그 자리에서 커지고, 그 글 사진을 넘긴 뒤 다음 글로. 페이지 끝에서 넘기면 옆 페이지로 */
/* 테마 머리글(#header 9999999)·챗봇(999999) 위에 떠야 한다 */
.gm-lb{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:56px 16px 20px;overscroll-behavior:contain;font-size:15px;line-height:1.6;color:var(--gm-ink)}
.gm-lb[hidden]{display:none}
.gm-lb-bg{position:absolute;inset:0;background:rgba(10,14,20,.86)}
.gm-lb-close{position:absolute;top:12px;right:14px;width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer}
.gm-lb-close:hover{background:rgba(255,255,255,.12)}
.gm-lb-box{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:stretch;max-width:1240px;width:100%}
.gm-lb-stage{position:relative;width:min(100%,calc((100vh - 200px) * 4 / 3));aspect-ratio:4/3;justify-self:end;border-radius:12px;overflow:hidden;background:#000;box-shadow:0 20px 50px rgba(0,0,0,.4);touch-action:pan-y}
.gm-lb-pic{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gm-lb-nav{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:0;background:rgba(15,20,28,.55);color:#fff;font:inherit;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:1}
.gm-lb-nav:hover{background:rgba(15,20,28,.8)}
.gm-lb-nav:disabled{opacity:.25;cursor:default}
.gm-lb-nav.prev{left:12px} .gm-lb-nav.next{right:12px}
.gm-lb-side{background:var(--gm-sheet);border-radius:12px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.gm-lb-side h3{margin:0;font-size:18px;line-height:1.45;font-weight:700}
.gm-lb-x{margin:0;font-size:14px;color:var(--gm-mute)}
.gm-lb-x:empty{display:none}
.gm-lb-meta{font-size:12px;color:var(--gm-mute);font-variant-numeric:tabular-nums}
.gm-lb-pos{margin-top:auto;border-top:1px solid var(--gm-line);padding-top:14px;font-size:13px;color:var(--gm-mute);font-variant-numeric:tabular-nums}
.gm-lb-pos b{color:var(--gm-ink);font-size:15px}
.gm-lb-hint{font-size:12px;color:var(--gm-accent);min-height:1.2em}
.gm-lb-more{font-size:14px;font-weight:700;color:var(--gm-accent);text-decoration:none}
.gm-lb-strip{position:relative;display:flex;gap:8px;max-width:100%;overflow-x:auto;padding:4px 2px}
.gm-lb-strip button{position:relative;flex:0 0 auto;width:64px;aspect-ratio:4/3;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#000;cursor:pointer;opacity:.55}
.gm-lb-strip button img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gm-lb-strip button:hover{opacity:.85}
.gm-lb-strip button.on{border-color:#fff;opacity:1}
.gm-lb-strip.one{visibility:hidden}

@media (max-width:900px){
  .gm-grid[data-size="small"]{--cols:3}
  .gm-grid[data-size="big"]{--cols:2}
  .gm-lb{justify-content:flex-start;overflow-y:auto}
  .gm-lb-box{grid-template-columns:1fr}
  .gm-lb-stage{width:100%;justify-self:stretch}
}
@media (max-width:560px){
  .gm-grid[data-size="small"]{--cols:3;--gap:24px 12px}
  .gm-grid[data-size="small"] .gm-top{display:none}
  .gm-grid[data-size="small"] .gm-cap h3{font-size:12px}
  .gm-grid[data-size="small"] .gm-cnt{top:4px;right:4px;height:18px;padding:0 6px}
  .gm-grid[data-size="small"] .gm-new{display:none}
  .gm-grid[data-size="big"]{--cols:1}
  .gm-lb-nav{width:38px;height:38px;margin-top:-19px}
  .gm-lb-strip button{width:52px}
}
@media (prefers-reduced-motion:reduce){
  .gm-thumb > img,.gm-zoom{transition:none}
  .gm-thumb:hover > img{transform:none}
}