/* a_refgall - 갤러리 게시판 스킨
   사이트 전역 테마(:root)의 색상·폰트 토큰을 그대로 사용합니다.
   --gl-* 토큰은 :root에 정의합니다 (라이트박스가 body 바로 아래에 렌더링되므로
   특정 wrap 요소에 scope하면 상속이 끊겨 깨져 보입니다 — 반드시 :root에 둘 것). */
:root {
  --gl-accent: var(--accent-color, #00d643);
  --gl-accent-bg: var(--btn-accent-bg, #002b0f);
  --gl-accent-text: var(--btn-accent-text, #00d643);
  --gl-card: var(--card-bg-color, #111111);
  --gl-border: var(--card-border-color, #2e2e2e);
  --gl-radius: var(--card-border-radius, 10px);
  --gl-text: var(--content-font-color, #f4f4f4);
  --gl-title-font: var(--title-font-family, 'MissedSimsim', 'Chosunilbo_myungjo', serif);
  --gl-body-font: var(--content-font-family, 'Paperlogy-4Regular', 'Pretendard', sans-serif);
  --gl-sub: var(--gray-400, #a5a5a5);
  --gl-sub2: var(--gray-500, #767676);
  --gl-error: var(--error-color, #ff6b6b);
  --gl-btn-primary-bg: var(--btn-primary-bg, #1c1c1e);
  --gl-btn-primary-text: var(--btn-primary-text, #949398);
  --gl-form-bg: var(--form-bg-color, #111111);
  --gl-form-border: var(--form-border-color, #2e2e2e);

  /* 상세페이지 카드(첨부 이미지 참고 UI)는 이 사이트 다크 테마와 무관하게
     뷰어=다크/정보패널=화이트 대비를 그대로 유지합니다 (사용자 요청 참고 UI). */
  --gl-panel-bg: #ffffff;
  --gl-panel-text: #1c1c1e;
  --gl-panel-sub: #8e8e93;
  --gl-panel-border: #ececec;
  --gl-viewer-bg: #101116;
}

.gl-list-wrap, .gl-view-wrap, .gl-write-wrap {
  margin: 0 auto;
  padding: 18px 16px 70px;
  font-family: var(--gl-body-font);
  color: var(--gl-text);
}
.gl-list-wrap *, .gl-view-wrap *, .gl-write-wrap * { box-sizing: border-box; }

.gl-list-wrap, .gl-view-wrap, .gl-write-wrap { animation: gl-fade-in .28s ease; }
@keyframes gl-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .gl-list-wrap, .gl-view-wrap, .gl-write-wrap { animation: none; }
}

/* ───────────────────────── 목록 (갤러리 그리드) ───────────────────────── */
.gl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.gl-toolbar-count { font-size: .85rem; color: var(--gl-sub); }
.gl-btn-write {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--gl-accent);
  color: #04180b;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  white-space: nowrap;
}
.gl-btn-write:hover { filter: brightness(1.05); }

.gl-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 70px 20px;
  color: var(--gl-sub);
  text-align: center;
}
.gl-empty i { font-size: 2rem; opacity: .6; }

.gl-grid {
  display: grid;
  /* 게시판관리의 갤러리 열 개수(bo_gallery_cols) 값을 --gl-cols로 받아
     그 개수만큼 정확히 나눠서 가로를 항상 꽉 채운다 */
  grid-template-columns: repeat(var(--gl-cols, 4), minmax(0, 1fr));
  gap: 14px;
}
.gl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--gl-card);
  border-radius: var(--gl-radius);
  overflow: hidden;
}
.gl-card-thumb {
  position: relative;
  height: var(--gl-thumb-height, 200px);
  background: #1a1b20;
  overflow: hidden;
}
.gl-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-card-noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gl-sub2); font-size: 1.6rem;
}
.gl-card-multi {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
/* 공개 범위 — 열람 권한이 없으면 초소형 이미지를 블러 처리 */
.gl-card.is-locked .gl-card-thumb img {
  filter: blur(10px);
  transform: scale(1.15);
}
.gl-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 35%;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0) 100%);
  opacity: 0;
  transition: opacity .18s ease;
}
.gl-card:hover .gl-card-body,
.gl-card:focus-visible .gl-card-body { opacity: 1; }
.gl-card-title {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 비공개 글(멤버공개·비밀글)은 제목 앞에 아이콘만 붙임 */
.gl-card-title-icon { margin-right: 6px; font-size: .8em; }
.gl-card-meta {
  font-size: .74rem;
  color: var(--gl-sub);
  display: flex;
  gap: 5px;
  align-items: center;
}
.gl-dot { opacity: .6; }
.gl-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.gl-card-tags .gl-tag { padding: 3px 9px; font-size: .68rem; }

.gl-paging { display: flex; justify-content: center; gap: 6px; margin-top: 28px; flex-wrap: wrap; }
.gl-page {
  min-width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--gl-sub);
  text-decoration: none;
  font-size: .85rem;
  border: 1px solid transparent;
}
.gl-page:hover { border-color: var(--gl-border); }
.gl-page.active { background: var(--gl-accent-bg); color: var(--gl-accent-text); font-weight: 700; }

/* ───────────────────────── 상세보기 ───────────────────────── */
.gl-view-card {
  display: flex;
  flex-wrap: wrap;
  width: 960px;
  max-width: 92vw;
  height: 600px;
  max-height: 82vh;
  background: var(--gl-panel-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
}

.gl-viewer {
  position: relative;
  flex: 1.3 1 380px;
  display: flex;
  flex-direction: column;
  background: var(--gl-viewer-bg);
  min-height: 0;
}
.gl-viewer-count {
  flex: 0 0 auto;
  padding: 6px 14px;
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  opacity: .7;
  text-align: center;
}
.gl-viewer-stage-wrap {
  /* 이미지/임베드가 뷰어 전체를 차지한다. 썸네일 줄은 이 위에 떠 있다. */
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.gl-viewer-stage {
  /* 중첩 flex에서 %height가 브라우저마다 불안정하게 풀리는 문제를 피하려고
     퍼센트 높이 대신 절대 위치(inset:0)로 부모(.gl-viewer-stage-wrap)에
     항상 정확히 맞춰지도록 함 — 세로로 긴 이미지가 잘리던 원인이었음. */
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  container-type: size;   /* 임베드 크기를 스테이지 기준(cqw/cqh)으로 맞추기 위함 */
  transition: opacity .15s ease;
}
.gl-viewer-stage img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
.gl-viewer-stage.gl-fade-out { opacity: 0; }

/* 뷰어 임베드(유튜브/트위터) — 이미지처럼 스테이지에 들어가고, 눌러도 라이트박스는 열리지 않음 */
.gl-viewer-stage.is-embed { cursor: default; }
.gl-embed-yt {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  background: #000;
}
@supports (width: 1cqw) {
  .gl-embed-yt { width: min(100cqw, calc(100cqh * 16 / 9)); max-height: none; }
}
.gl-embed-yt iframe { width: 100%; height: 100%; border: 0; display: block; }
/* 트윗은 영역 가로를 (양옆 작은 여백만 남기고) 채우고, 세로가 길면 안에서 스크롤.
   위젯이 인라인 스타일로 정해 두는 가로(최대 550px)를 덮어써서, 스크롤바가 생겨 영역이
   좁아져도 트윗 가로가 그 안쪽 너비에 맞게 따라 늘고 줄어든다. */
.gl-embed-tw {
  position: absolute; inset: 0;
  overflow-x: hidden; overflow-y: auto;
  display: flex;
}
.gl-embed-tw-in {
  /* 높이는 내용만큼(영역보다 짧으면 영역 높이까지) — 내용이 길면 이 박스가 늘어나 스크롤이 생긴다 */
  align-self: flex-start;
  width: 100%;
  min-height: 100%;
  padding: 12px;   /* 트윗 양옆·위아래의 작은 여백 */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.gl-embed-tw-in > * { flex: 0 0 auto; }
.gl-embed-tw .twitter-tweet-rendered { width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.gl-embed-tw .twitter-tweet-rendered iframe { width: 100% !important; max-width: 100% !important; }
.gl-embed-spin { color: #fff; opacity: .7; font-size: 1.4rem; }
.gl-embed-fail {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #dbdee1; font-size: .85rem; text-align: center;
}
.gl-embed-fail i { font-size: 1.6rem; }
.gl-embed-fail a { color: #fff; text-decoration: underline; }
.gl-viewer-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #4a4b54; font-size: 2.4rem;
}
.gl-viewer-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  z-index: 5;
  background: rgba(255,255,255,.14);
  border: none;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.gl-viewer-arrow:hover { background: rgba(255,255,255,.26); }
.gl-viewer-arrow.prev { left: 12px; }
.gl-viewer-arrow.next { right: 12px; }

.gl-viewer-thumbs {
  flex: 0 0 auto;
  display: flex; gap: 6px;
  padding: 10px 14px 14px;
  overflow-x: auto;
}
.gl-viewer-thumb {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  opacity: .6;
  background: none;
  transition: opacity .15s ease, border-color .15s ease;
}
.gl-viewer-thumb { position: relative; }
.gl-viewer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-viewer-thumb.active { border-color: var(--gl-accent); opacity: 1; }
/* 유튜브 썸네일 위 재생 표시 / 트윗 썸네일(아이콘 칸) */
.gl-thumb-badge {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.3);
  color: #fff; font-size: .7rem;
}
.gl-thumb-ico {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: #000; color: #fff; font-size: 1.05rem;
}

.gl-info {
  flex: 1 1 300px;
  padding: 30px 30px 34px;
  color: var(--gl-panel-text);
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
}
.gl-info-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.gl-info-eyebrow { font-size: .82rem; color: var(--gl-panel-sub); }
.gl-info-top-actions { display: flex; align-items: center; gap: 4px; }
.gl-icon-btn {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gl-panel-sub);
  cursor: pointer;
  text-decoration: none;
  font-size: .95rem;
  transition: background .15s ease, color .15s ease;
}
.gl-icon-btn:hover { background: #f2f2f3; color: var(--gl-panel-text); }
.gl-more-wrap { position: relative; }
.gl-more-menu {
  position: absolute; right: 0; top: 36px;
  background: #fff;
  border: 1px solid var(--gl-panel-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 120px;
  padding: 6px;
  display: none;
  z-index: 5;
}
.gl-more-menu.open { display: block; }
.gl-more-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--gl-panel-text);
  text-decoration: none;
  font-size: .85rem;
}
.gl-more-menu a:hover { background: #f2f2f3; }

.gl-info-title {
  margin: 6px 0 18px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--gl-panel-text);
}

.gl-info-author { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.gl-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--gl-accent-bg, #002b0f);
  color: var(--gl-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  flex-shrink: 0;
  overflow: hidden;
}
.gl-avatar img { width: 100%; height: 100%; object-fit: cover; }
.gl-author-nick { font-size: .88rem; font-weight: 700; color: var(--gl-panel-text); }
.gl-author-id { font-size: .76rem; color: var(--gl-panel-sub); }

.gl-info-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-bottom: 16px;
  color: var(--gl-accent);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.gl-info-link i {
  font-size: .72rem;
  position: relative;
  top: 1px; /* 화살표 글리프가 광학적으로 살짝 위쪽에 그려져서 보정 */
}

.gl-info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.gl-tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: #f2f2f3;
  color: #4a4a4c;
  font-size: .78rem;
  font-weight: 600;
}
.gl-tag-category {
  /* 사이트의 강조(accent) 버튼과 동일한 배경·글자색을 그대로 사용 */
  background: var(--gl-accent-bg);
  color: var(--gl-accent-text);
}

.gl-info-divider { border-top: 1px solid var(--gl-panel-border); margin: 18px 0 16px; }
.gl-info-memo { font-size: .9rem; line-height: 1.7; color: var(--gl-panel-text); word-break: break-word; }
.gl-info-memo img { max-width: 100%; height: auto; border-radius: 8px; }
.gl-info-memo p { margin: 0 0 .8em; }
.gl-info-memo p:last-child { margin-bottom: 0; }

/* ───────────────────────── 목록 → 상세보기 모달 ───────────────────────── */
.gl-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  /* 사이트 헤더(#hd)보다 항상 위에 오도록 넉넉히 높은 값을 사용 */
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity .2s ease;
}
.gl-modal-overlay.open { opacity: 1; }
.gl-modal-overlay .gl-view-card {
  margin: auto;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.gl-modal-loading { margin: auto; color: #fff; font-size: 2rem; }

/* ───────────────────────── 라이트박스(확대/축소 슬라이더) ───────────────────────── */
.gl-lightbox-overlay {
  position: fixed; inset: 0;
  background: rgba(6,6,9,.96);
  display: flex; align-items: center; justify-content: center;
  /* 상세보기 모달(z-index:2000) 위에 중첩되어 열릴 수 있으므로 그보다 높게 */
  z-index: 2500;
  opacity: 0;
  transition: opacity .18s ease;
}
.gl-lightbox-overlay.open { opacity: 1; }
.gl-lightbox-stage {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transform: scale(.97);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}
.gl-lightbox-overlay.open .gl-lightbox-stage { transform: scale(1); opacity: 1; }
.gl-lightbox-stage.zoomed { cursor: grab; }
.gl-lightbox-stage img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  transform-origin: center center;
  transition: transform .05s linear, opacity .15s ease;
  cursor: pointer;
  -webkit-user-drag: none;
  user-select: none;
}
.gl-lightbox-stage img.zoomed { cursor: grab; }
.gl-lightbox-stage img.dragging { cursor: grabbing; transition: opacity .15s ease, transform 0s; }
.gl-lightbox-stage img.gl-fade-out { opacity: 0; }

.gl-lightbox-count {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: .85rem; font-weight: 600;
  background: rgba(255,255,255,.12);
  padding: 5px 14px;
  border-radius: 999px;
  z-index: 2501;
}
.gl-lightbox-tools { position: fixed; top: 20px; right: 20px; display: flex; gap: 8px; z-index: 2501; }
.gl-lightbox-picker, .gl-lightbox-zoom, .gl-lightbox-close, .gl-lightbox-prev, .gl-lightbox-next {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.gl-lightbox-picker:hover, .gl-lightbox-zoom:hover, .gl-lightbox-close:hover, .gl-lightbox-prev:hover, .gl-lightbox-next:hover { background: rgba(255,255,255,.22); }
.gl-lightbox-prev, .gl-lightbox-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2501; }
.gl-lightbox-prev { left: 20px; }
.gl-lightbox-next { right: 20px; }

/* 스포이드(색상 추출) — 켜져 있는 동안 버튼 강조 + 십자 커서 */
.gl-lightbox-picker.on { background: var(--gl-accent); color: #04180b; }
.gl-lightbox-overlay.picking .gl-lightbox-stage img,
.gl-lightbox-overlay.picking .gl-lightbox-stage img.zoomed { cursor: crosshair; }
.gl-lightbox-overlay.picking .gl-lightbox-stage img.dragging { cursor: grabbing; }

.gl-picker-panel {
  display: none;
  position: fixed; top: 20px; left: 20px;
  z-index: 2501;
  box-sizing: border-box;
  width: min(250px, calc(100vw - 200px));
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(24,24,28,.94);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  color: #fff;
  user-select: none;
}
/* 뽑은 색이 있거나 안내 메시지가 있을 때만 패널을 보여줌 (빈 상자가 뜨지 않게) */
.gl-lightbox-overlay.picking .gl-picker-panel.has-color,
.gl-lightbox-overlay.picking .gl-picker-panel.has-msg { display: flex; }
.gl-picker-current { display: none; align-items: center; gap: 10px; }
.gl-picker-panel.has-color .gl-picker-current { display: flex; }
.gl-picker-swatch { flex: 0 0 38px; height: 38px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); }
.gl-picker-codes { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gl-picker-hex {
  align-self: flex-start;
  padding: 0; border: none; background: none;
  color: #fff;
  font: 700 1.05rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s ease;
}
.gl-picker-hex:hover { color: var(--gl-accent); }
.gl-picker-rgb { font-size: .72rem; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-picker-copy {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}
.gl-picker-copy:hover { background: rgba(255,255,255,.22); }
.gl-picker-history { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-picker-history:empty { display: none; }
.gl-picker-chip { width: 22px; height: 22px; padding: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,.3); cursor: pointer; }
.gl-picker-chip.current { outline: 2px solid #fff; outline-offset: 1px; }
.gl-picker-hint { font-size: .72rem; line-height: 1.45; color: rgba(255,255,255,.6); }
.gl-picker-hint:empty { display: none; }

/* 커서 주변을 확대해서 보여주는 돋보기 */
.gl-picker-loupe {
  display: none;
  position: fixed; left: 0; top: 0;
  z-index: 2502;
  width: 114px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  will-change: transform;
}
.gl-picker-loupe.on { display: flex; }
.gl-picker-loupe-view {
  position: relative;
  box-sizing: content-box;
  width: 110px; height: 110px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
  background: #222;
}
.gl-picker-loupe-view canvas { display: block; width: 110px; height: 110px; image-rendering: pixelated; }
.gl-picker-loupe-center { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #fff; }
.gl-picker-loupe-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.82);
  color: #fff;
  font: 600 .75rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.gl-picker-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); }

/* 좁은 화면(폰)에서는 위쪽 버튼들과 겹치지 않도록 패널을 아래쪽(페이지 번호 위)에 넓게 띄움 */
@media (max-width: 480px) {
  .gl-picker-panel { top: auto; bottom: 64px; left: 12px; right: 12px; width: auto; }
}

/* ───────────────────────── 글쓰기 ───────────────────────── */
.gl-field { margin-bottom: 18px; }
.gl-field-row { display: flex; flex-wrap: wrap; gap: 14px; }
.gl-field-row .gl-field { flex: 1 1 220px; }
.gl-label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 7px; color: var(--gl-text); }
.gl-label-sub { font-weight: 400; color: var(--gl-sub); }
.gl-input, .gl-textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--gl-form-border);
  background: var(--gl-form-bg);
  color: var(--gl-text);
  font-size: .9rem;
  font-family: inherit;
}
.gl-input:focus, .gl-textarea:focus { outline: none; border-color: var(--gl-accent); }
.gl-textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.gl-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
}
.gl-upload-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gl-form-bg);
}
.gl-upload-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
/* 기존 첨부파일(수정 모드) — 썸네일 + 삭제 체크박스는 write.skin.php가 직접 그림 */
.gl-upload-existing {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--gl-form-bg);
}
.gl-upload-existing img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gl-upload-remove, .gl-embed-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: .68rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s ease;
}
.gl-upload-remove:hover, .gl-embed-remove:hover { background: rgba(220,40,40,.9); }

/* 유튜브·트위터(X) 링크 추가 */
.gl-embed-add { display: flex; align-items: stretch; gap: 8px; }
.gl-embed-add .gl-input { flex: 1 1 auto; min-width: 0; width: auto; }
/* 악센트 버튼 색(카테고리 칩·공개 범위 선택 버튼과 같은 색) + 테두리로 어두운 배경에서도 보이게 함 */
.gl-embed-add .gl-embed-add-btn {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 64px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--gl-accent-text);
  background: var(--gl-accent-bg);
  color: var(--gl-accent-text);
  font-family: inherit;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.gl-embed-add .gl-embed-add-btn:hover { filter: brightness(1.15); }
.gl-embed-add .gl-embed-add-btn:focus-visible { outline: 2px solid var(--gl-accent); outline-offset: 2px; }
.gl-embed-msg { margin: 6px 0 0; font-size: .78rem; color: var(--gl-error); }
.gl-embed-msg:empty { display: none; }
.gl-embed-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 8px;
}
.gl-embed-grid:empty { display: none; }
.gl-embed-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.gl-embed-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-embed-tile-badge {
  position: absolute; left: 6px; bottom: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  color: #fff; font-size: .7rem;
}
.gl-embed-tile-tw { flex-direction: column; gap: 6px; padding: 8px; color: #fff; text-align: center; }
.gl-embed-tile-ico { font-size: 1.5rem; }
.gl-embed-tile-name {
  max-width: 100%;
  font-size: .72rem; opacity: .8;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gl-upload-add {
  aspect-ratio: 1;
  border: 1.5px dashed var(--gl-form-border);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gl-form-bg);
  color: var(--gl-sub);
  cursor: pointer;
  font-size: 1.2rem;
  transition: border-color .15s ease, color .15s ease;
}
.gl-upload-add:hover { border-color: var(--gl-accent); color: var(--gl-accent); }
/* webp로 변환하는 동안 보이는 칸 */
.gl-upload-tile-busy {
  display: flex; align-items: center; justify-content: center;
  color: var(--gl-sub);
  font-size: 1.1rem;
}

/* 공개 범위 선택 버튼 (라디오를 버튼처럼 표시) */
.gl-vis { display: flex; gap: 8px; }
.gl-vis-opt { position: relative; flex: 0 1 140px; min-width: 0; cursor: pointer; }
.gl-vis-opt input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0;
  cursor: pointer;
}
.gl-vis-opt span {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--gl-form-border);
  background: var(--gl-form-bg);
  color: var(--gl-text);
  font-size: .86rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.gl-vis-opt:hover span { border-color: var(--gl-accent-text); }
.gl-vis-opt input:checked + span {
  background: var(--gl-accent-bg);
  color: var(--gl-accent-text);
  border-color: var(--gl-accent-text);
}
.gl-vis-opt input:focus-visible + span { outline: 2px solid var(--gl-accent); outline-offset: 2px; }
.gl-vis-desc { margin: 8px 0 0; font-size: .78rem; color: var(--gl-text); opacity: .75; }
.gl-vis-desc:empty { display: none; }
@media (max-width: 400px) {
  .gl-vis { gap: 6px; }
  .gl-vis-opt span { padding: 10px 6px; gap: 5px; font-size: .8rem; }
}

.gl-write-actions { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.gl-btn-submit {
  padding: 11px 24px;
  border-radius: 999px;
  background: var(--gl-accent);
  color: #04180b;
  border: none;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.gl-btn-submit:hover { filter: brightness(1.05); }
.gl-btn {
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--gl-btn-primary-bg);
  color: var(--gl-btn-primary-text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 600;
}

/* ───────────────────────── 반응형 ───────────────────────── */
@media (max-width: 600px) {
  /* 모바일에서는 관리자 설정값과 무관하게 2열로 고정 (더 많으면 너무 좁아짐) */
  .gl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gl-view-card {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    height: 82vh;
    max-height: 82vh;
    border-radius: 16px;
  }
  .gl-viewer { flex: 0 0 260px; }
  /* 뷰어가 낮은 모바일에서는 유튜브 영상(16:9)이 썸네일 줄에 가려 재생 컨트롤을 못 누르므로 줄 위(줄 70px + 간격 12px)에 놓는다 */
  .gl-viewer.has-thumbs .gl-viewer-stage.is-embed { padding-bottom: 82px; }
  .gl-info { flex: 1 1 auto; padding: 22px 18px 28px; }
  .gl-info-title { font-size: 1.25rem; }
  .gl-modal-overlay { padding: 16px; }
}

/* ───────── 디스코드풍 둥근 네모 버튼 / 하단 썸네일 (라이트박스 + 뷰어 슬라이드) ───────── */
.gl-lightbox-tools { align-items: center; gap: 8px; }
.gl-lightbox-pill {
  box-sizing: border-box; height: 40px; align-items: center;
  display: flex; gap: 2px; padding: 3px;
  background: #1e1f22; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.gl-lightbox-pill .gl-lightbox-picker, .gl-lightbox-pill .gl-lightbox-zoom,
.gl-lightbox-pill .gl-lightbox-open, .gl-lightbox-pill .gl-lightbox-dl {
  width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: #dbdee1;
  font-size: 15px; display: flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; padding: 0;
  transition: background .12s, color .12s;
}
.gl-lightbox-pill .gl-lightbox-picker:hover, .gl-lightbox-pill .gl-lightbox-zoom:hover,
.gl-lightbox-pill .gl-lightbox-open:hover, .gl-lightbox-pill .gl-lightbox-dl:hover { background: rgba(255,255,255,.12); color: #fff; }
.gl-lightbox-pill .gl-lightbox-picker.on { background: var(--gl-accent); color: #04180b; }
.gl-lightbox-close, .gl-lightbox-prev, .gl-lightbox-next {
  width: 40px; height: 40px; border-radius: 10px;
  background: #1e1f22; border: 1px solid rgba(255,255,255,.08); color: #dbdee1;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.gl-lightbox-close:hover, .gl-lightbox-prev:hover, .gl-lightbox-next:hover { background: #2b2d31; color: #fff; }
.gl-lightbox-prev { left: 18px; }
.gl-lightbox-next { right: 18px; }

.gl-lightbox-thumbs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2501;
  display: flex; justify-content: center; padding: 14px; pointer-events: none;
}
.gl-lightbox-thumbs-in {
  display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 4px; pointer-events: auto; scrollbar-width: none;
  background: #1e1f22; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.gl-lightbox-thumbs-in::-webkit-scrollbar { display: none; }
.gl-lightbox-thumb {
  flex: 0 0 auto; width: 48px; height: 48px; padding: 0; border-radius: 6px; overflow: hidden;
  border: 2px solid transparent; background: #2b2d31; cursor: pointer; opacity: .55;
  transition: opacity .12s, border-color .12s;
}
.gl-lightbox-thumb:hover { opacity: .9; }
.gl-lightbox-thumb.active { opacity: 1; border-color: #fff; }
.gl-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gl-lightbox-stage img { max-height: calc(100vh - 170px); }

.gl-viewer-arrow { width: 40px; height: 40px; border-radius: 8px; background: rgba(30,31,34,.82); border: 1px solid rgba(255,255,255,.12); color: #dbdee1; }
.gl-viewer-arrow:hover { background: #2b2d31; color: #fff; }
.gl-viewer-thumb { border-radius: 6px; }
.gl-viewer-thumb.active { border-color: #fff; }

/* ── 뷰어 슬라이드: 이미지 뒤 여백을 블러 처리한 같은 이미지로 채움 / 돋보기 커서 사용 안 함 / 순서 칩 없음 ── */
.gl-viewer-stage-wrap::before {
  content: ''; position: absolute; inset: -30px; background: var(--gl-bg) center / cover no-repeat;
  filter: blur(24px) brightness(.7);
}
.gl-viewer-stage { cursor: pointer; }
.gl-viewer-count { display: none; }
.gl-lightbox-pill .gl-lightbox-zoom.is-off { opacity: .35; pointer-events: none; }

/* 아이콘 색 통일: 사이트 링크색(<a>)이나 다른 규칙에 덮이지 않도록 고정 */
.gl-lightbox-pill .gl-lightbox-picker, .gl-lightbox-pill .gl-lightbox-zoom, .gl-lightbox-pill .gl-lightbox-dl,
.gl-lightbox-close, .gl-lightbox-prev, .gl-lightbox-next, .gl-viewer-arrow { color: #dbdee1 !important; text-decoration: none !important; }
.gl-lightbox-pill .gl-lightbox-picker:hover, .gl-lightbox-pill .gl-lightbox-zoom:hover, .gl-lightbox-pill .gl-lightbox-dl:hover,
.gl-lightbox-close:hover, .gl-lightbox-prev:hover, .gl-lightbox-next:hover, .gl-viewer-arrow:hover { color: #fff !important; }
.gl-lightbox-pill .gl-lightbox-picker.on { color: #04180b !important; }

/* 뷰어 이동 버튼: 이미지 영역 hover 시에만 표시 (터치 기기는 항상 표시) */
.gl-viewer-arrow { opacity: 0; transition: opacity .15s ease, background .15s; }
.gl-viewer:hover .gl-viewer-arrow, .gl-viewer-arrow:focus-visible { opacity: 1; }
@media (hover: none) { .gl-viewer-arrow { opacity: 1; } }

/* ───────── 상세 페이지 뷰어 썸네일 줄: 라이트박스 하단의 다중 이미지 박스와 같은 스타일 ───────── */
.gl-viewer-thumbs {
  /* 이미지/임베드 위에 떠 있는 가운데 정렬 박스(뒤에 별도 영역을 두지 않음) */
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 6;
  width: max-content; max-width: calc(100% - 24px);
  margin: 0 auto; padding: 4px; gap: 6px;
  background: #1e1f22; border: 1px solid rgba(255,255,255,.08); border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  scrollbar-width: none;
}
/* 썸네일 줄이 있을 때 트윗은 위쪽 여백(12px)을 기준으로 놓고(가운데 정렬로 밀리지 않음), 맨 아래까지
   스크롤했을 때만 줄 위에 12px 간격이 남도록 끝에 빈 공간(줄 높이 58px + 아래 12px)을 둔다.
   내용이 짧아 스크롤이 없으면 이 공간은 보이지 않는다. */
.gl-viewer.has-thumbs .gl-embed-tw-in { justify-content: flex-start; }
.gl-viewer.has-thumbs .gl-embed-tw-in::after { content: ''; flex: 0 0 auto; height: 70px; }
.gl-viewer-thumbs::-webkit-scrollbar { display: none; }
.gl-viewer-thumb { width: 48px; height: 48px; border-radius: 6px; background: #2b2d31; }
.gl-viewer-thumb:hover { opacity: .9; }
.gl-viewer-thumb.active { border-color: #fff; opacity: 1; }