/* 갤러리 글 보기 (gallery/detail.html, 시안 docs/gallery-sian G7 합친안)
   글 상자(게시판 글과 같은 기본 .card) · 그림 모자이크 · 출처 카드 · 이전/다음 글(board.css .post-nav) · 오른쪽 글 목록 · 크게 보기 창(js/gallery-view.js) */
.gv { padding-top: var(--sp-6); padding-bottom: var(--sp-16); }
.gv-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; }
.gv-main { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } /* 칸 폭 고정: 긴 다음글 제목(한 줄 말줄임)이 화면 밖으로 늘리지 않게 */

.gv-crumb { display: flex; align-items: center; gap: 6px; margin: -10px 0 -6px; font-size: 14px; color: var(--muted); }
.gv-crumb a { display: inline-flex; align-items: center; min-height: 44px; color: #c4b5fd; }
.gv-title { margin: 8px 0 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--fw-heavy); line-height: 1.35; color: var(--text-strong); word-break: keep-all; overflow-wrap: anywhere; }
.gv-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.gv-sub { display: block; font-size: 13px; color: var(--muted); }
.gv-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.gv-acts .btn { min-height: 44px; }

.gv-chips { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin-top: 14px; } /* '그림 N장' + 등장 캐릭터 얼굴 겹침(mainchar stack) */
.gv-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px 0 6px; font-size: 14px; color: var(--text-sub); background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 999px; }
.gv-chip--count { padding-left: 12px; color: #ddd6fe; font-weight: var(--fw-bold); background: rgba(124, 58, 237, .18); border-color: rgba(167, 139, 250, .35); }

.gv-body { margin: 0; font-size: 17px; line-height: 1.8; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.gv-body p + p { margin-top: .8em; }

/* 그림 모자이크: 1장 = 통째로(비율 그대로), 2장 = 좌우, 3장 = 큰 칸 + 오른쪽 둘, 4장 이상 = 2×2 */
.gv-mosaic { display: grid; gap: 4px; margin-top: var(--sp-4); border-radius: 14px; overflow: hidden; }
.gv-mosaic.is-1 { grid-template-columns: 1fr; background: #0b0b0d; }
.gv-mosaic.is-2 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.gv-mosaic.is-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.gv-mosaic.is-3 .gv-tile:first-child { grid-row: span 2; }
.gv-mosaic.is-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 10; }
.gv-tile { position: relative; min-height: 0; padding: 0; border: 0; overflow: hidden; background: #1b1c21; cursor: zoom-in; outline: 0 solid #a78bfa; outline-offset: -3px; transition: outline-width .12s; }
.gv-tile:hover, .gv-tile:focus-visible { outline-width: 3px; }
.gv-tile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.gv-mosaic.is-1 .gv-tile img { height: auto; max-height: 80vh; margin: 0 auto; width: auto; max-width: 100%; object-fit: contain; }
.gv-tile__n { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; font-size: 12px; font-weight: var(--fw-bold); color: #fff; background: rgba(0, 0, 0, .6); border-radius: 999px; }
.gv-tile__more { position: absolute; inset: 0; display: grid; place-items: center; font-size: 32px; font-weight: var(--fw-heavy); color: #fff; background: rgba(0, 0, 0, .55); }
.gv-all { display: flex; justify-content: center; margin-top: 10px; }
.gv-all .btn { min-height: 44px; }

/* 본문 (그림 아래): 6줄 넘으면 흐리게 접고 [더보기] → [접기] */
.gv-text { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.gv-text.is-clamped .gv-body { max-height: calc(1.8em * 6); overflow: hidden; -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.gv-text__more { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--sp-2); padding: 0 var(--sp-4); font: inherit; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--accent); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.gv-text__more[hidden] { display: none; }

/* 출처 카드: 사이트 아이콘 · 작가 · 원문 링크 */
.gv-srcs { display: grid; gap: 8px; margin-top: 16px; } /* 글 상자 맨 아래 (태그 · 수정 줄 다음) */
.gv-src { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
a.gv-src:hover { background: var(--surface-2); }
.gv-src i { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-style: normal; font-size: 15px; font-weight: 900; color: #fff; background: #52525b; border-radius: 10px; }
.gv-src i[data-s="pixiv"] { background: #0096fa; }
.gv-src i[data-s="x"] { background: #000; border: 1px solid #444; }
.gv-src i[data-s="artstation"] { background: #13aff0; color: #04212e; }
.gv-src i[data-s="deviantart"] { background: #05cc47; color: #02200c; }
.gv-src i[data-s="youtube"] { background: #e11d48; }
.gv-src span { flex: 1; min-width: 0; }
.gv-src small { display: block; font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.gv-src b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--text-strong); }
.gv-src em { flex: none; font-style: normal; font-size: 14px; color: #c4b5fd; }

.gv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.gv-tags, .gv-own { gap: 6px; flex-wrap: wrap; }
.gv-tags .chip { min-height: 40px; display: inline-flex; align-items: center; }
.gv-post .post-readers { margin-top: 12px; }

/* 오른쪽: 작가의 다른 그림 · 갤러리 글 목록 (화면을 따라옴) */
.gv-aside { position: sticky; top: calc(var(--header-h) + 12px); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.gv-more__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gv-more__head h2 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-base); color: var(--text-strong); }
.gv-more__head a { flex: none; display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-sm); color: var(--accent); }
.gv-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gv-more__grid a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface); border-radius: var(--radius-sm); }
.gv-more__grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gv-more__grid a:hover img { transform: scale(1.06); }

.gv-side { padding: 16px; display: grid; gap: 10px; }
.gv-side__t { margin: 0; font-size: 15px; font-weight: var(--fw-heavy); color: var(--text-strong); }
.gv-side__t small { margin-left: 6px; font-weight: var(--fw-regular); font-size: 13px; color: var(--muted); }
.gv-list { display: grid; gap: 2px; max-height: 40vh; overflow: auto; } /* 위 작가 그림 칸과 같이 화면 안에 들어오게 */
.gv-list a { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px; color: inherit; border-radius: 10px; }
.gv-list a:hover { background: var(--hover); }
.gv-list a[aria-current] { background: rgba(124, 58, 237, .2); box-shadow: inset 3px 0 0 #a78bfa; }
.gv-list img { flex: none; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: #1b1c21; }
.gv-list span { min-width: 0; }
.gv-list b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; line-height: 1.4; color: var(--text-strong); }
.gv-list small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.gv-side .btn { min-height: 44px; }

/* 크게 보기 창 */
.gv-lb { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: rgba(5, 5, 7, .94); }
.gv-lb[hidden] { display: none; }
.gv-lb__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; color: #fff; }
.gv-lb__cnt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.gv-lb__post, .gv-lb__tools { display: flex; gap: 6px; }
.gv-lb__post a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; color: #fff; white-space: nowrap; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; }
.gv-lb__tools .btn { min-height: 44px; }
.gv-lb__main { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: var(--sp-4) 72px; } /* 칸 크기를 정해 둬야 그림의 max-height 100% 가 화면 높이에 맞춰짐 (없으면 원본 크기로 넘침) */
.gv-lb__main img { max-width: min(100%, 1600px); max-height: 100%; object-fit: contain; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); } /* 원본보다 키우지 않고, 큰 원본도 화면 안 여백을 두고 */
.gv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: grid; place-items: center; color: #fff; background: rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; cursor: pointer; }
.gv-nav.is-prev { left: 12px; }
.gv-nav.is-next { right: 12px; }
.gv-nav:disabled { opacity: .3; cursor: default; }
.gv-lb__end { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); min-height: 48px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-lb__strip { display: flex; justify-content: safe center; gap: 6px; padding: 10px; overflow: hidden; }
.gv-lb__strip.is-one { display: none; }
.gv-lb__strip button { flex: none; width: 56px; height: 56px; padding: 0; overflow: hidden; background: #222; border: 2px solid transparent; border-radius: 8px; opacity: .5; cursor: pointer; }
.gv-lb__strip button[aria-current="true"] { border-color: #a78bfa; opacity: 1; }
.gv-lb__strip img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .gv-wrap { grid-template-columns: minmax(0, 1fr); }
  /* 게시판 글 보기(bd-m-bleed, 1024 이하)처럼: 본문 · 댓글 · 이전/다음을 화면 양끝까지 붙이고 사이는 8px 어두운 띠 하나 (20px 틈 + 댓글만 둥근 상자로 떠 있었음) */
  .gv-main { gap: 0; }
  .gv-post, .gv-main > .media-comments, .gv-main > .post-nav { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .gv-main > :is(.media-comments, .post-nav) { border-top: var(--sp-2) solid var(--bg); }
  .gv-aside { position: static; }
  .gv-list { max-height: none; }
}
/* 폰 · 태블릿: 머리 막대 아래 빈 띠를 없앰 (사이트 위 여백 24 + 이 칸 위 여백 24 가 겹쳐 48px 비던 것, 영상 글처럼 8) */
@media (max-width: 768px) {
  .site-main:has(> .gv) { padding-top: 0; } /* 머리 막대(DND2) 바로 아래에서 글 상자가 시작 (8px 띠가 비어 보였음) */
  .gv { padding-top: 0; }
}
@media (max-width: 640px) {
  .gv-post { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-top: 0; } /* 위는 빵조각 줄(누르는 높이 44)이 자체 여백을 가져서 12 만 */
  .gv-body { font-size: 16px; }
  .gv-chip, .gv-tags .chip { min-height: 44px; }
  .gv-acts { width: 100%; }
  .gv-acts form:first-child { flex: 1; }
  .gv-acts form:first-child .btn { width: 100%; }
  .gv-lb__main { padding: 0 6px; }
  .gv-nav.is-prev { left: 4px; }
  .gv-nav.is-next { right: 4px; }
  .gv-lb__post a { padding: 0 10px; }
  .gv-lb__strip { justify-content: flex-start; }
}