@withwiz/gallery 0.1.0

package/dist/gallery.css

@@ -0,0 +1,1074 @@
+/* ═══════════════════════════════════════════════════════════════
+ * @withwiz/gallery — primitive UI styles
+ * ────────────────────────────────────────────────────────────────
+ * - CSS variables: --gallery-accent / --gallery-bg / --gallery-fg / --gallery-border
+ *   (RGB triplet, host 가 :root 에서 override)
+ * - 클래스 prefix: `gallery-` (충돌 회피)
+ * - Tailwind 와 호환 — 컴포넌트는 Tailwind 클래스도 함께 사용 가능
+ * ═══════════════════════════════════════════════════════════════ */
+
+:where(
+  .gallery-toggle,
+  .gallery-dropzone,
+  .gallery-dropzone-wrap,
+  .gallery-manager,
+  .gallery-edit-form,
+  .gallery-home-preview,
+  .gallery-category-admin,
+  .gallery-public-mosaic-section,
+  .gallery-public-mosaic,
+  .gallery-lightbox
+) {
+  --gallery-accent: 212 175 55;
+  --gallery-bg: 10 10 10;
+  --gallery-fg: 254 254 254;
+  --gallery-border: 30 30 30;
+}
+
+/* ─── Toggle Switch ─── */
+
+.gallery-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  user-select: none;
+}
+
+.gallery-toggle__track {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+  width: 36px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: rgb(var(--gallery-border));
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.gallery-toggle__track:focus-visible {
+  outline: 2px solid rgb(var(--gallery-accent));
+  outline-offset: 2px;
+}
+
+.gallery-toggle__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: rgb(var(--gallery-fg));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+  transition: left 0.2s ease, transform 0.2s ease;
+}
+
+.gallery-toggle__track.gallery-toggle--checked {
+  background: rgb(var(--gallery-accent));
+}
+
+.gallery-toggle__track.gallery-toggle--checked .gallery-toggle__thumb {
+  left: 18px;
+}
+
+.gallery-toggle__track.gallery-toggle--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.gallery-toggle__label {
+  font-size: 13px;
+  color: rgb(var(--gallery-fg));
+}
+
+/* size modifiers */
+
+.gallery-toggle--sm .gallery-toggle__track {
+  width: 28px;
+  height: 16px;
+}
+
+.gallery-toggle--sm .gallery-toggle__thumb {
+  width: 12px;
+  height: 12px;
+}
+
+.gallery-toggle--sm .gallery-toggle__track.gallery-toggle--checked .gallery-toggle__thumb {
+  left: 14px;
+}
+
+.gallery-toggle--lg .gallery-toggle__track {
+  width: 48px;
+  height: 26px;
+}
+
+.gallery-toggle--lg .gallery-toggle__thumb {
+  width: 22px;
+  height: 22px;
+}
+
+.gallery-toggle--lg .gallery-toggle__track.gallery-toggle--checked .gallery-toggle__thumb {
+  left: 24px;
+}
+
+/* ─── Image Drop Zone ─── */
+
+.gallery-dropzone-wrap {
+  position: relative;
+  display: block;
+}
+
+.gallery-dropzone {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 160px;
+  border: 2px dashed rgb(var(--gallery-border));
+  border-radius: 8px;
+  background: rgb(var(--gallery-bg) / 0.4);
+  color: rgb(var(--gallery-fg));
+  cursor: pointer;
+  overflow: hidden;
+  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+}
+
+.gallery-dropzone:focus-visible {
+  outline: 2px solid rgb(var(--gallery-accent));
+  outline-offset: 2px;
+}
+
+.gallery-dropzone--dragging {
+  border-color: rgb(var(--gallery-accent));
+  background: rgb(var(--gallery-accent) / 0.08);
+  box-shadow: inset 0 0 0 2px rgb(var(--gallery-accent) / 0.2);
+}
+
+.gallery-dropzone--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.gallery-dropzone--has-preview {
+  min-height: auto;
+  padding: 0;
+  background: rgb(var(--gallery-bg));
+}
+
+.gallery-dropzone__preview {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 320px;
+  object-fit: contain;
+}
+
+.gallery-dropzone__prompt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  font-size: 13px;
+  color: rgb(var(--gallery-fg) / 0.7);
+  text-align: center;
+  pointer-events: none;
+}
+
+.gallery-dropzone__prompt--overlay {
+  position: absolute;
+  inset: 0;
+  background: rgb(var(--gallery-bg) / 0.6);
+  color: rgb(var(--gallery-fg));
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+
+.gallery-dropzone--dragging .gallery-dropzone__prompt--overlay {
+  opacity: 1;
+}
+
+.gallery-dropzone__rejected {
+  margin: 8px 0 0;
+  padding: 8px 12px;
+  list-style: none;
+  font-size: 12px;
+  color: rgb(220 80 80);
+  background: rgb(220 80 80 / 0.08);
+  border: 1px solid rgb(220 80 80 / 0.3);
+  border-radius: 6px;
+}
+
+.gallery-dropzone__rejected-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.gallery-dropzone__rejected-item {
+  line-height: 1.5;
+}
+
+/* ─── Manager Layout (3-pane) ─── */
+
+.gallery-manager {
+  display: grid;
+  gap: 16px;
+  color: rgb(var(--gallery-fg));
+  background: rgb(var(--gallery-bg));
+  min-height: 100vh;
+  padding: 12px;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 1024px) {
+  .gallery-manager--with-preview {
+    grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr) minmax(280px, 420px);
+    grid-template-areas: "list form preview";
+  }
+  .gallery-manager--no-preview {
+    grid-template-columns: minmax(280px, 360px) minmax(420px, 1fr);
+    grid-template-areas: "list form";
+  }
+  .gallery-manager__list { grid-area: list; }
+  .gallery-manager__form { grid-area: form; }
+  .gallery-manager__preview { grid-area: preview; }
+}
+
+.gallery-manager__list,
+.gallery-manager__form,
+.gallery-manager__preview {
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 8px;
+  background: rgb(var(--gallery-bg));
+  padding: 12px;
+  overflow: auto;
+  max-height: calc(100vh - 24px);
+}
+
+.gallery-manager__toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgb(var(--gallery-border));
+  margin-bottom: 8px;
+}
+
+.gallery-manager__toolbar-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  width: 100%;
+}
+
+.gallery-manager__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gallery-manager__new-btn {
+  background: rgb(var(--gallery-accent));
+  color: rgb(var(--gallery-bg));
+  border: 0;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.gallery-manager__filter {
+  margin-bottom: 8px;
+}
+
+.gallery-manager__filter-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.gallery-manager__search {
+  flex: 1;
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 4px;
+  background: rgb(var(--gallery-bg));
+  color: rgb(var(--gallery-fg));
+  font-size: 13px;
+}
+
+.gallery-manager__count {
+  font-size: 12px;
+  color: rgb(var(--gallery-fg) / 0.7);
+}
+
+.gallery-manager__list-body {
+  margin-top: 4px;
+}
+
+.gallery-manager__list-ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gallery-manager__empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  min-height: 240px;
+  color: rgb(var(--gallery-fg) / 0.5);
+  font-size: 13px;
+}
+
+/* ─── List Item ─── */
+
+.gallery-list-item {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding: 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  background: rgb(var(--gallery-bg));
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.gallery-list-item:hover {
+  background: rgb(var(--gallery-fg) / 0.04);
+}
+
+.gallery-list-item--active {
+  border-color: rgb(var(--gallery-accent));
+  background: rgb(var(--gallery-accent) / 0.06);
+}
+
+.gallery-list-item__thumb {
+  width: 60px;
+  height: 40px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.gallery-list-item__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.gallery-list-item__caption {
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gallery-list-item__meta {
+  font-size: 11px;
+  color: rgb(var(--gallery-fg) / 0.6);
+}
+
+/* ─── Edit Form ─── */
+
+.gallery-edit-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: rgb(var(--gallery-fg));
+}
+
+.gallery-edit-form__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid rgb(var(--gallery-border));
+  padding-bottom: 10px;
+}
+
+.gallery-edit-form__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gallery-edit-form__actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.gallery-edit-form__btn {
+  background: transparent;
+  color: rgb(var(--gallery-fg));
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.gallery-edit-form__btn:hover { background: rgb(var(--gallery-fg) / 0.06); }
+
+.gallery-edit-form__btn--primary {
+  background: rgb(var(--gallery-accent));
+  color: rgb(var(--gallery-bg));
+  border-color: rgb(var(--gallery-accent));
+  font-weight: 600;
+}
+
+.gallery-edit-form__btn--danger {
+  color: rgb(220 80 80);
+  border-color: rgb(220 80 80 / 0.5);
+}
+
+.gallery-edit-form__section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gallery-edit-form__section-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgb(var(--gallery-fg) / 0.8);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.gallery-edit-form__row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.gallery-edit-form__input {
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 4px;
+  background: rgb(var(--gallery-bg));
+  color: rgb(var(--gallery-fg));
+  font-size: 13px;
+}
+
+.gallery-edit-form__input:focus-visible {
+  outline: 2px solid rgb(var(--gallery-accent));
+  outline-offset: 1px;
+}
+
+.gallery-edit-form__hint {
+  font-size: 11px;
+  color: rgb(var(--gallery-fg) / 0.6);
+}
+
+.gallery-edit-form__note {
+  font-size: 11px;
+  color: rgb(220 80 80);
+}
+
+.gallery-edit-form__error {
+  font-size: 12px;
+  color: rgb(220 80 80);
+  background: rgb(220 80 80 / 0.08);
+  padding: 6px 8px;
+  border-radius: 4px;
+}
+
+.gallery-edit-form__multi-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.gallery-edit-form__multi-tile {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid rgb(var(--gallery-border));
+}
+
+.gallery-edit-form__multi-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gallery-edit-form__multi-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.7);
+  color: #fff;
+  border: 0;
+  cursor: pointer;
+  font-size: 11px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Home Preview (mosaic) ─── */
+
+.gallery-home-preview {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.gallery-home-preview__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.gallery-home-preview__title {
+  font-size: 14px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gallery-home-preview__count {
+  font-size: 12px;
+  color: rgb(var(--gallery-fg) / 0.7);
+}
+
+.gallery-home-preview__hint {
+  font-size: 11px;
+  color: rgb(var(--gallery-fg) / 0.6);
+}
+
+.gallery-home-preview__empty {
+  padding: 20px;
+  text-align: center;
+  color: rgb(var(--gallery-fg) / 0.5);
+  border: 1px dashed rgb(var(--gallery-border));
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.gallery-home-preview__mosaic {
+  display: grid;
+  gap: 4px;
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  grid-template-columns: repeat(4, 1fr);
+  grid-template-rows: repeat(3, 1fr);
+}
+
+.gallery-home-preview__mosaic[data-count="1"] {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+}
+
+.gallery-home-preview__mosaic[data-count="4"] {
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+}
+
+.gallery-home-preview__mosaic[data-count="7"] > .gallery-home-preview__tile:nth-child(1) {
+  grid-column: span 2;
+  grid-row: span 2;
+}
+
+.gallery-home-preview__tile {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+  border: 1px solid rgb(var(--gallery-border));
+  background: rgb(var(--gallery-bg));
+  cursor: grab;
+}
+
+.gallery-home-preview__tile--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgb(var(--gallery-fg) / 0.3);
+  cursor: default;
+}
+
+.gallery-home-preview__tile--drag-over {
+  outline: 2px solid rgb(var(--gallery-accent));
+  outline-offset: -2px;
+}
+
+.gallery-home-preview__tile--dragging {
+  opacity: 0.4;
+}
+
+.gallery-home-preview__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.gallery-home-preview__star {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.55);
+  color: rgb(var(--gallery-fg) / 0.6);
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gallery-home-preview__star--active {
+  color: rgb(var(--gallery-accent));
+}
+
+.gallery-home-preview__order {
+  position: absolute;
+  bottom: 4px;
+  left: 4px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+}
+
+.gallery-home-preview__caption {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  background: rgba(0, 0, 0, 0.55);
+  color: #fff;
+  font-size: 10px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  max-width: 60%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ─── Category Admin ─── */
+
+.gallery-category-admin {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: rgb(var(--gallery-fg));
+  background: rgb(var(--gallery-bg));
+  padding: 16px;
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 8px;
+}
+
+.gallery-category-admin__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gallery-category-admin__title {
+  font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+}
+
+.gallery-category-admin__new {
+  background: rgb(var(--gallery-accent));
+  color: rgb(var(--gallery-bg));
+  border: 0;
+  border-radius: 4px;
+  padding: 6px 12px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.gallery-category-admin__error {
+  background: rgb(220 80 80 / 0.08);
+  color: rgb(220 80 80);
+  padding: 8px 12px;
+  border: 1px solid rgb(220 80 80 / 0.3);
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.gallery-category-admin__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.gallery-category-admin__item {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.gallery-category-admin__item-row {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 120px 1fr 60px 40px;
+  gap: 8px;
+  align-items: center;
+  padding: 6px 10px;
+  background: transparent;
+  border: 0;
+  color: rgb(var(--gallery-fg));
+  text-align: left;
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.gallery-category-admin__item-row:hover { background: rgb(var(--gallery-fg) / 0.05); }
+
+.gallery-category-admin__slug {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+}
+
+.gallery-category-admin__delete {
+  width: 36px;
+  background: transparent;
+  color: rgb(220 80 80);
+  border: 0;
+  border-left: 1px solid rgb(var(--gallery-border));
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.gallery-category-admin__delete:hover { background: rgb(220 80 80 / 0.08); }
+
+.gallery-category-admin__form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid rgb(var(--gallery-border));
+  padding-top: 12px;
+}
+
+.gallery-category-admin__form-title {
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.gallery-category-admin__field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.gallery-category-admin__field--row {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+
+.gallery-category-admin__field-label {
+  font-size: 11px;
+  color: rgb(var(--gallery-fg) / 0.7);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.gallery-category-admin__input {
+  padding: 6px 8px;
+  border: 1px solid rgb(var(--gallery-border));
+  border-radius: 4px;
+  background: rgb(var(--gallery-bg));
+  color: rgb(var(--gallery-fg));
+  font-size: 13px;
+}
+
+.gallery-category-admin__form-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.gallery-category-admin__save {
+  background: rgb(var(--gallery-accent));
+  color: rgb(var(--gallery-bg));
+  border: 0;
+  border-radius: 4px;
+  padding: 6px 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.gallery-category-admin__save:disabled { opacity: 0.5; cursor: not-allowed; }
+
+.gallery-category-admin__cancel {
+  background: transparent;
+  border: 1px solid rgb(var(--gallery-border));
+  color: rgb(var(--gallery-fg));
+  border-radius: 4px;
+  padding: 6px 12px;
+  cursor: pointer;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+ * Public — Mosaic (presets/ballet:PublicGalleryMosaic)
+ * ─────────────────────────────────────────────────────────────── */
+
+.gallery-public-mosaic-section {
+  padding: clamp(4rem, 8vh, 8rem) 0 0;
+  background: rgb(var(--gallery-bg));
+  color: rgb(var(--gallery-fg));
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.gallery-public-mosaic-section--visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.gallery-public-mosaic__head {
+  max-width: 1200px;
+  margin: 0 auto 60px;
+  padding: 0 40px;
+}
+
+.gallery-public-mosaic__label {
+  font-size: 12px;
+  letter-spacing: 4px;
+  text-transform: uppercase;
+  color: rgb(var(--gallery-accent));
+  margin-bottom: 12px;
+}
+
+.gallery-public-mosaic__title {
+  font-size: clamp(28px, 4vw, 48px);
+  font-weight: 900;
+  letter-spacing: -1px;
+  margin: 0;
+}
+
+.gallery-public-mosaic {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  gap: 4px;
+  grid-auto-rows: 250px;
+}
+
+.gallery-public-mosaic__item {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  background: rgb(var(--gallery-border));
+}
+
+.gallery-public-mosaic__item:focus-visible {
+  outline: 2px solid rgb(var(--gallery-accent));
+  outline-offset: -2px;
+}
+
+.gallery-public-mosaic__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 1.2s cubic-bezier(0.25, 0, 0.25, 1);
+}
+
+.gallery-public-mosaic__item:hover .gallery-public-mosaic__img {
+  transform: scale(1.1);
+}
+
+.gallery-public-mosaic__hover {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.2);
+  backdrop-filter: blur(4px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+  pointer-events: none;
+}
+
+.gallery-public-mosaic__item:hover .gallery-public-mosaic__hover {
+  opacity: 1;
+}
+
+.gallery-public-mosaic__icon {
+  width: 50px;
+  height: 50px;
+  border: 1px solid #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.2rem;
+  background: rgba(0, 0, 0, 0.3);
+  transition: transform 0.3s ease;
+}
+
+.gallery-public-mosaic__item:hover .gallery-public-mosaic__icon {
+  transform: scale(1.1);
+}
+
+/* Adaptive layouts (data-count 1~7) */
+
+.gallery-public-mosaic[data-count="1"] .gallery-public-mosaic__item { grid-column: 1 / -1; }
+
+.gallery-public-mosaic[data-count="2"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1 / 7; }
+.gallery-public-mosaic[data-count="2"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 7 / 13; }
+
+.gallery-public-mosaic[data-count="3"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1 / 7; grid-row: span 2; }
+.gallery-public-mosaic[data-count="3"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 7 / 13; }
+.gallery-public-mosaic[data-count="3"] .gallery-public-mosaic__item:nth-child(3) { grid-column: 7 / 13; }
+
+.gallery-public-mosaic[data-count="4"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1 / 7; }
+.gallery-public-mosaic[data-count="4"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 7 / 13; }
+.gallery-public-mosaic[data-count="4"] .gallery-public-mosaic__item:nth-child(3) { grid-column: 1 / 7; }
+.gallery-public-mosaic[data-count="4"] .gallery-public-mosaic__item:nth-child(4) { grid-column: 7 / 13; }
+
+.gallery-public-mosaic[data-count="5"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1 / 6; grid-row: span 2; }
+.gallery-public-mosaic[data-count="5"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 6 / 9; }
+.gallery-public-mosaic[data-count="5"] .gallery-public-mosaic__item:nth-child(3) { grid-column: 9 / 13; }
+.gallery-public-mosaic[data-count="5"] .gallery-public-mosaic__item:nth-child(4) { grid-column: 6 / 9; }
+.gallery-public-mosaic[data-count="5"] .gallery-public-mosaic__item:nth-child(5) { grid-column: 9 / 13; }
+
+.gallery-public-mosaic[data-count="6"] { grid-template-columns: repeat(16, 1fr); grid-template-rows: 3fr 2fr; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1/10; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 10/13; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(3) { grid-column: 13/17; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(4) { grid-column: 1/5; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(5) { grid-column: 5/10; }
+.gallery-public-mosaic[data-count="6"] .gallery-public-mosaic__item:nth-child(6) { grid-column: 10/17; }
+
+.gallery-public-mosaic[data-count="7"] { grid-template-columns: repeat(16, 1fr); }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(1) { grid-column: 1/10; grid-row: span 2; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(2) { grid-column: 10/13; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(3) { grid-column: 13/17; grid-row: span 2; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(4) { grid-column: 1/5; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(5) { grid-column: 5/10; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(6) { grid-column: 10/13; grid-row: 2 / span 2; }
+.gallery-public-mosaic[data-count="7"] .gallery-public-mosaic__item:nth-child(7) { grid-column: 13/17; }
+
+/* ═══════════════════════════════════════════════════════════════
+ * Public — Lightbox (presets/ballet:PublicGalleryMosaic)
+ * ─────────────────────────────────────────────────────────────── */
+
+.gallery-lightbox {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.92);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: gallery-lightbox-fadein 0.3s ease;
+}
+
+@keyframes gallery-lightbox-fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.gallery-lightbox__content {
+  width: 90vw;
+  height: 85vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gallery-lightbox__img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+}
+
+.gallery-lightbox__close {
+  position: absolute;
+  top: 20px;
+  right: 24px;
+  background: none;
+  border: none;
+  color: #fff;
+  font-size: 36px;
+  cursor: pointer;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  z-index: 1;
+}
+
+.gallery-lightbox__close:hover {
+  opacity: 1;
+}
+
+.gallery-lightbox__nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: #fff;
+  font-size: 32px;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.2s ease, background 0.2s ease;
+  z-index: 1;
+}
+
+.gallery-lightbox__nav:hover {
+  opacity: 1;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.gallery-lightbox__prev { left: 20px; }
+.gallery-lightbox__next { right: 20px; }
+
+.gallery-lightbox__counter {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 14px;
+  letter-spacing: 2px;
+}