/* ============================================================================
   ULTRA GALLERY — LUXURY MUSEUM DESIGN SYSTEM (ug-museum-core.css)
   1. Clean, Uncluttered Single-Tier Luxury Header (.ug-lux-header)
   2. Aspect-Ratio Preserving Museum Frame (.museum-frame) & Variable Mat (.museum-mat)
   3. bnb-asset.com Responsive Bottom Navigation Dock (PC Ticker+Magnify / Tablet / Mobile)
   4. bnb-asset.com Custom Cursor + 3D Gold-Leaf Ribbon Trail + Spotlight/Tilt Motion Graphics
   5. ufo-xfile.com Left Floating A11y Dock (#gvdock: 🌓 음영, A−, A＋, 🔊 소리/TTS, 🔖 북마크, ↑)
   6. Luxury Museum Bottom Footer (.site-footer) with Copyright & Institution Info
   ============================================================================ */

:root {
  --ug-bg: #0b0a09;
  --ug-bg-card: #141311;
  --ug-bg-elevated: #1c1a17;
  --ug-border: #2d2822;
  --ug-gold: #d4af6a;
  --ug-gold-bright: #f3d899;
  --ug-gold-deep: #7a5821;
  --ug-text: #f6f1e7;
  --ug-text-muted: #a89f90;
  --ug-green: #4ade80;
  --ug-canvas-max-h: 234px;
}

/* ----------------------------------------------------------------------------
   🌓 SHADE / LIGHT GALLERY THEME (음영 전환 모드)
   ---------------------------------------------------------------------------- */
body.ug-shade-light {
  --bg: #f6f2e9 !important;
  --bg-card: #ffffff !important;
  --bg-elevated: #efeae0 !important;
  --border: #d8cebe !important;
  --gold: #8c6520 !important;
  --text: #181613 !important;
  --text-muted: #5c5549 !important;
  --ug-bg: #f6f2e9 !important;
  --ug-bg-card: #ffffff !important;
  --ug-bg-elevated: #efeae0 !important;
  --ug-border: #d8cebe !important;
  --ug-gold: #8c6520 !important;
  --ug-text: #181613 !important;
  --ug-text-muted: #5c5549 !important;
  background: radial-gradient(1200px 600px at 50% -10%, rgba(212, 175, 106, 0.22), transparent 60%), #f6f2e9 !important;
  color: #181613 !important;
}

body.ug-shade-light .ug-lux-header {
  background: rgba(250, 247, 240, 0.94) !important;
  border-bottom: 1px solid #d8cebe !important;
}
body.ug-shade-light .ug-brand-name,
body.ug-shade-light h1,
body.ug-shade-light h2,
body.ug-shade-light h3,
body.ug-shade-light .artist-name {
  color: #181613 !important;
}
body.ug-shade-light .ug-nav-link {
  color: #3a342b !important;
}
body.ug-shade-light .ug-nav-link:hover,
body.ug-shade-light .ug-nav-link.active {
  color: #7a5411 !important;
  background: rgba(180, 136, 52, 0.14) !important;
  border-color: rgba(140, 101, 32, 0.45) !important;
}
body.ug-shade-light .artist-card,
body.ug-shade-light .work-gallery-card,
body.ug-shade-light .artist-hero,
body.ug-shade-light .bio-box,
body.ug-shade-light .filter-bar,
body.ug-shade-light .stat-box,
body.ug-shade-light .grade-item {
  background: #ffffff !important;
  border-color: #d8cebe !important;
  color: #181613 !important;
  box-shadow: 0 8px 24px rgba(30, 24, 14, 0.08) !important;
}
body.ug-shade-light .bio-line {
  color: #2b261f !important;
}

.skipl {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #d4af6a;
  color: #0b0a09;
  padding: 8px 16px;
  z-index: 99999;
  border-radius: 0 0 8px 0;
  font-weight: 800;
}
.skipl:focus { left: 0; }

/* ----------------------------------------------------------------------------
   1. CLEAN, UNCLUTTERED SINGLE-TIER LUXURY HEADER (.ug-lux-header)
   ---------------------------------------------------------------------------- */
.ug-lux-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: rgba(11, 10, 9, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(212, 175, 106, 0.24);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
  transition: transform 0.3s ease, background 0.3s ease;
}

.ug-lux-mainbar {
  width: min(1420px, calc(100% - 36px));
  margin: 0 auto;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 6px 0;
}

.ug-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ug-text);
  flex-shrink: 0;
}

.ug-brand-crest {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: linear-gradient(135deg, #f3d899 0%, #c59b49 52%, #7d5b1e 100%);
  color: #0c0a06;
  font-family: "Iowan Old Style", Georgia, serif;
  font-weight: 900;
  font-size: 19px;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(212, 175, 106, 0.35);
  border: 1px solid #fbe6b2;
}

.ug-brand-name {
  font-family: "Iowan Old Style", "Playfair Display", Georgia, serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  display: block;
  line-height: 1.1;
}

.ug-brand-tagline {
  font-size: 9.5px;
  color: var(--ug-gold);
  letter-spacing: 0.1em;
  display: block;
  margin-top: 2px;
}

.ug-lux-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ug-lux-nav::-webkit-scrollbar { display: none; }

.ug-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #e6dfd3;
  text-decoration: none;
  border: 1px solid transparent;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.ug-nav-link:hover {
  color: var(--ug-gold-bright);
  background: rgba(212, 175, 106, 0.1);
  border-color: rgba(212, 175, 106, 0.28);
}

.ug-nav-link.active {
  color: #0d0b08;
  background: linear-gradient(135deg, #e5c378, #b88c3e);
  font-weight: 800;
  border-color: #f3d899;
  box-shadow: 0 4px 12px rgba(212, 175, 106, 0.25);
}

.ug-lux-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ug-util-select {
  background: #171512;
  color: #e8e1d5;
  border: 1px solid rgba(212, 175, 106, 0.35);
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}

.ug-util-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  background: #191714;
  border: 1px solid rgba(212, 175, 106, 0.32);
  color: #f2ece1;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.ug-util-pill:hover {
  border-color: var(--ug-gold-bright);
  color: var(--ug-gold-bright);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------------------------
   2. FIXED-SIZE 4:3 (3:4 PROPORTION) MUSEUM FRAME (.museum-frame) & MAT (.museum-mat)
      - Outer frame size is 100% fixed & uniform across all cards (never vertically elongated)
      - Artwork fits cleanly inside the fixed frame box preserving original aspect ratio
   ---------------------------------------------------------------------------- */
.museum-frame {
  position: relative;
  padding: 11px;
  border-radius: 7px;
  background:
    linear-gradient(135deg,
      #8b6628 0%,
      #d8b467 16%,
      #f5de9e 28%,
      #9c7432 45%,
      #5c4014 62%,
      #cfa85b 82%,
      #73521e 100%);
  border: 1.5px solid #f2d794;
  box-shadow:
    0 16px 36px rgba(0, 0, 0, 0.82),
    0 5px 14px rgba(0, 0, 0, 0.65),
    inset 0 2px 3px rgba(255, 248, 220, 0.68),
    inset 0 -3px 6px rgba(28, 17, 4, 0.88),
    inset 0 0 0 3px rgba(74, 51, 16, 0.72);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.28s ease;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: 226px;
  max-height: 226px;
  box-sizing: border-box;
  transform-style: preserve-3d;
  flex-shrink: 0;
}

.museum-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 4px;
  border: 1px solid rgba(255, 236, 179, 0.48);
  pointer-events: none;
}

.museum-frame:hover {
  transform: translateY(-4px) perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  box-shadow:
    0 24px 54px rgba(212, 175, 106, 0.26),
    0 14px 32px rgba(0, 0, 0, 0.92),
    inset 0 2px 4px rgba(255, 248, 220, 0.82),
    inset 0 -3px 6px rgba(28, 17, 4, 0.9),
    inset 0 0 0 3px rgba(96, 67, 22, 0.8);
}

body.frame-walnut .museum-frame {
  background:
    linear-gradient(135deg,
      #3d2414 0%,
      #6b442a 22%,
      #87593a 40%,
      #331d0f 65%,
      #593822 85%,
      #2a160b 100%);
  border-color: #a67856;
}

body.frame-silk .museum-frame {
  background:
    linear-gradient(135deg,
      #d6cbb9 0%,
      #f0eadc 28%,
      #b8ac96 58%,
      #e5decb 82%,
      #9e917b 100%);
  border-color: #e8dfc9;
}

.museum-mat {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  background:
    radial-gradient(circle at 50% 42%, #fbf8f1 0%, #f2ead9 68%, #e4d7be 100%);
  padding: 10px;
  border: 1.5px solid #8c6d36;
  outline: 1px solid rgba(212, 175, 106, 0.55);
  outline-offset: -3px;
  box-shadow:
    inset 0 4px 12px rgba(20, 14, 5, 0.46),
    inset 0 0 0 1px rgba(255, 252, 242, 0.75),
    0 1px 3px rgba(0, 0, 0, 0.65);
  border-radius: 3px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  box-sizing: border-box;
}

body.frame-silk .museum-mat {
  background: linear-gradient(180deg, #fcfaf4 0%, #f3ede0 100%);
  border-color: #9e8a63;
}

.museum-canvas {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;
  background: radial-gradient(circle at center, #1b1814 0%, #0f0d0b 100%);
  border: 1.5px solid #c59f52;
  box-shadow:
    inset 0 2px 10px rgba(0, 0, 0, 0.65),
    0 2px 8px rgba(15, 10, 3, 0.35);
  border-radius: 2px;
  box-sizing: border-box;
}

.museum-canvas picture {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.museum-canvas img,
.museum-mat > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  margin: 0 auto;
}

.artist-hero .museum-frame {
  height: 320px;
  max-height: 320px;
  aspect-ratio: 4 / 3;
}
.artist-hero .museum-mat {
  height: 100% !important;
  padding: 14px;
}
#artworkDetailMain .museum-frame,
.artwork-hero-frame.museum-frame {
  height: 440px;
  max-height: 440px;
  aspect-ratio: 4 / 3;
}
#artworkDetailMain .museum-mat,
.artwork-hero-frame .museum-mat {
  height: 100% !important;
  padding: 16px;
}
#relatedArtistsGrid .museum-frame {
  height: 176px;
  max-height: 176px;
  aspect-ratio: 4 / 3;
}
#relatedArtistsGrid .museum-mat {
  height: 100% !important;
  padding: 8px;
}

/* ----------------------------------------------------------------------------
   3. WISHLIST (♥ 찜) & CART (🛒 장바구니 담기) BUTTONS
   ---------------------------------------------------------------------------- */
.ug-wish-btn, .ug-cart-btn, .ug-btn-wish, .ug-btn-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid var(--ug-border);
  background: rgba(25, 23, 20, 0.9);
  color: #e5dfd3;
  transition: all 0.16s ease;
}
.ug-wish-btn:hover, .ug-btn-wish:hover { border-color: #f43f5e; color: #fb7185; }
.ug-wish-btn.active, .ug-btn-wish.active {
  background: rgba(244, 63, 94, 0.18);
  border-color: #f43f5e;
  color: #fb7185;
}
.ug-cart-btn:hover, .ug-btn-cart:hover { border-color: var(--ug-gold); color: var(--ug-gold); }
.ug-cart-btn.in-cart, .ug-btn-cart.active {
  background: rgba(74, 222, 128, 0.18);
  border-color: #4ade80;
  color: #4ade80;
}

/* ----------------------------------------------------------------------------
   4. BNB-ASSET.COM STYLE CUSTOM CURSOR (.cur), 3D RIBBON (.cur__ribbon),
      AND GALLERY TRACK-LIGHT SPOTLIGHT (.dl-spot)
   ---------------------------------------------------------------------------- */
.cur, .cur__ribbon { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cur__ribbon {
    display: block;
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147482999;
    pointer-events: none;
  }
  .cur {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .cur.is-on { opacity: 1; }
  .cur__ring {
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 1.5px solid rgba(212, 175, 106, 0.82);
    background: rgba(212, 175, 106, 0);
    box-shadow: 0 0 12px rgba(212, 175, 106, 0.3), inset 0 0 0 1px rgba(255, 245, 214, 0.25);
    transform: translate3d(var(--rx, -100px), var(--ry, -100px), 0) scale(var(--rs, 1));
    transition: background-color 0.25s ease, border-color 0.25s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease;
    will-change: transform;
  }
  .cur__dot {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #f3d899;
    box-shadow: 0 0 8px #d4af6a;
    transform: translate3d(var(--dx, -100px), var(--dy, -100px), 0);
    will-change: transform;
  }
  .cur.is-link .cur__ring {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    background: rgba(212, 175, 106, 0.16);
    border-color: #f3d899;
    box-shadow: 0 0 24px rgba(212, 175, 106, 0.45);
  }
  .cur.is-link .cur__dot { opacity: 0; }
  .cur.is-down .cur__ring { --rs: 0.8; background: rgba(212, 175, 106, 0.28); }
  .cur.is-text { opacity: 0 !important; }

  /* Museum Track-Light Radial Spotlight (.dl-spot) */
  .dl-spot {
    position: relative;
    isolation: isolate;
  }
  .dl-spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    border-radius: inherit;
    background: radial-gradient(
      420px circle at var(--sx, 50%) var(--sy, 50%),
      rgba(212, 175, 106, 0.16),
      rgba(212, 175, 106, 0.05) 38%,
      transparent 68%
    );
  }
  .dl-spot:hover::after { opacity: 1; }
  .dl-spot > * { position: relative; z-index: 1; }
}

/* ----------------------------------------------------------------------------
   5. BNB-ASSET.COM BOTTOM NAVIGATION DOCK (.dock[data-dock])
      - PC (>= 1024px): Live Archive Ticker + Magnifying SVG Dock
      - Tablet (768px ~ 1023.98px): Compact Glassmorphic SVG Dock
      - Mobile (< 768px): Ergonomic Full-Width Bottom Bar (#gvtabs)
   ---------------------------------------------------------------------------- */
.dock { display: none; }

@media (min-width: 768px) {
  .dock {
    display: block;
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 9300;
    transform: translate(-50%, 140%);
    opacity: 0;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    pointer-events: none;
  }
  .dock.is-on {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }
  .dock__list {
    position: relative;
    list-style: none;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    height: 3.65rem;
    padding: 0 0.75rem;
    background: linear-gradient(180deg, rgba(24, 21, 17, 0.92), rgba(12, 11, 9, 0.96));
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(212, 175, 106, 0.42);
    border-radius: 999px;
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.78),
      0 2px 8px rgba(212, 175, 106, 0.18),
      inset 0 1px 0 rgba(255, 244, 214, 0.22);
  }
  body.ug-shade-light .dock__list {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(242, 236, 224, 0.98));
    border-color: rgba(140, 101, 32, 0.45);
    box-shadow: 0 16px 40px rgba(30, 22, 10, 0.22);
  }
  .dock__item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .dock__sep {
    width: 1px;
    height: 1.45rem;
    align-self: center;
    margin: 0 0.35rem;
    background: linear-gradient(180deg, transparent, rgba(212, 175, 106, 0.45), transparent);
  }
  .dock__btn {
    position: relative;
    width: 2.85rem;
    height: 2.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #efe8da;
    cursor: pointer;
    text-decoration: none;
    transform-origin: 50% 100%;
    transform: scale(var(--dk, 1)) translateY(calc((var(--dk, 1) - 1) * -10px));
    transition: transform 0.18s ease-out, color 0.2s ease, background-color 0.25s ease;
  }
  body.ug-shade-light .dock__btn {
    color: #2c251b;
  }
  .dock__btn:hover,
  .dock__btn:focus-visible {
    color: #f3d899;
    background: rgba(212, 175, 106, 0.18);
  }
  body.ug-shade-light .dock__btn:hover {
    color: #8c6520;
    background: rgba(140, 101, 32, 0.14);
  }
  .dock__btn[aria-current="page"] {
    color: #f3d899;
    background: rgba(212, 175, 106, 0.24);
  }
  .dock__btn[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: 0.18rem;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: #f3d899;
  }
  .dock__tip {
    position: absolute;
    bottom: calc(100% + 0.75rem);
    left: 50%;
    transform: translate(-50%, 4px);
    white-space: nowrap;
    padding: 0.38rem 0.78rem;
    border-radius: 0.5rem;
    background: #fbf7ee;
    color: #15120d;
    border: 1px solid #d4af6a;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .dock__tip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: #fbf7ee;
  }
  .dock__btn:hover .dock__tip,
  .dock__btn:focus-visible .dock__tip {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* Tablet Dock Adjustment (768px ~ 1023.98px) */
.dock__mkt, .dock__sep--mkt { display: none !important; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .dock__list {
    height: 3.35rem;
    padding: 0 0.5rem;
    gap: 0.05rem;
  }
  .dock__btn {
    width: 2.65rem;
    height: 2.65rem;
  }
}

/* PC Wide Dock Live Archive Ticker (>= 1280px) */
@media (min-width: 1280px) {
  .dock__mkt {
    display: flex !important;
    align-items: center;
    height: 2.7rem;
    padding: 0 0.35rem 0 0.5rem;
  }
  .dock__sep--mkt {
    display: block !important;
  }
  .mk__view {
    display: block;
    height: 2.3rem;
    overflow: hidden;
  }
  .mk__track {
    display: flex;
    flex-direction: column;
    transform: translateY(calc(var(--i, 0) * -2.3rem));
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
  }
  .mk__page {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    height: 2.3rem;
    flex: none;
  }
  .mk__cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0.45rem;
    white-space: nowrap;
  }
  .mk__name {
    font-size: 0.65rem;
    color: #a89f90;
    font-weight: 700;
    letter-spacing: 0.04em;
  }
  .mk__val {
    font-size: 0.76rem;
    color: #f3d899;
    font-weight: 800;
  }
  body.ug-shade-light .mk__val { color: #7a5411; }
}

/* ----------------------------------------------------------------------------
   6. UFO-XFILE.COM LEFT FLOATING DOCK (#gvdock), PROGRESS BAR (#gvbar),
      MOBILE BOTTOM TABS (#gvtabs), LIGHTBOX (#gvlb), TOAST (.gv-toast)
   ---------------------------------------------------------------------------- */
#gvbar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #a67c37, #f3d899 50%, #34d399);
  z-index: 9999;
  transition: width 0.12s ease-out;
}

#gvdock {
  position: fixed;
  left: 14px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9400;
}

#gvdock button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 106, 0.55);
  background: rgba(20, 19, 17, 0.92);
  backdrop-filter: blur(10px);
  color: #f5f0e6;
  cursor: pointer;
  font: 700 0.8rem/1 system-ui, -apple-system, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.ug-shade-light #gvdock button {
  background: rgba(255, 255, 255, 0.95);
  color: #181613;
  border-color: #bfa065;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

#gvdock button:hover {
  border-color: #4ade80;
  color: #4ade80;
  transform: translateY(-2px) scale(1.05);
}

#gvdock button.speaking {
  background: linear-gradient(135deg, #10b981, #059669) !important;
  color: #fff !important;
  border-color: #6ee7b7 !important;
  animation: ugPulseSpeak 1.2s infinite ease-in-out;
}

@keyframes ugPulseSpeak {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

#gvtop { opacity: 0; transition: opacity 0.25s ease; }
#gvtabs { display: none; }

#gvlb {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99990;
  cursor: zoom-out;
  padding: 20px;
}
#gvlb.on { display: flex; }
#gvlb img {
  max-width: 94vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid var(--ug-gold);
}

.gv-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20, 19, 17, 0.96);
  color: #f5f0e6;
  border: 1px solid var(--ug-gold);
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
  z-index: 99995;
  opacity: 0;
  transition: all 0.25s ease;
  pointer-events: none;
}
.gv-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------------------------
   7. LUXURY MUSEUM BOTTOM FOOTER (.ug-site-footer — bnb-asset.com style)
   ---------------------------------------------------------------------------- */
.ug-site-footer {
  background: linear-gradient(180deg, #0d0c0a 0%, #070605 100%);
  border-top: 1px solid rgba(212, 175, 106, 0.28);
  color: #b8afa0;
  padding: 56px 0 96px;
  margin-top: 72px;
  font-size: 13px;
}

body.ug-shade-light .ug-site-footer {
  background: #eae3d5;
  border-top-color: #cfc3ae;
  color: #4a4338;
}

.ug-footer-inner {
  width: min(1400px, calc(100% - 36px));
  margin: 0 auto;
}

.ug-footer-top {
  display: grid;
  grid-template-columns: 1.15fr 2.1fr;
  gap: 44px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(212, 175, 106, 0.18);
}

.ug-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ug-footer-nav h4 {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ug-gold);
  margin: 0 0 12px;
}

.ug-footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 7px;
}

.ug-footer-nav a {
  color: inherit;
  text-decoration: none;
  font-size: 12.8px;
  transition: color 0.18s ease;
}

.ug-footer-nav a:hover {
  color: var(--ug-gold-bright);
}

.ug-footer-legal {
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  font-size: 12px;
  line-height: 1.7;
}

/* ----------------------------------------------------------------------------
   8. FLOATING KAPITSA AI CURATOR CHATBOT
   ---------------------------------------------------------------------------- */
#ugChatbotLauncher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f3d899 0%, #b88c3e 100%);
  color: #0b0906;
  font-weight: 800;
  font-size: 13px;
  border: 1.5px solid #fbe6b2;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75);
  cursor: pointer;
}

#ugChatbotPanel {
  position: fixed;
  right: 18px;
  bottom: 74px;
  width: min(410px, calc(100vw - 28px));
  height: min(560px, calc(100vh - 120px));
  z-index: 9501;
  background: #141311;
  border: 1.5px solid var(--ug-gold);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.92);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.artist-card,
.work-gallery-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.artist-card .works-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================================
   9. RESPONSIVE BREAKPOINTS (PC · TABLET · MOBILE)
   ============================================================================ */
@media (max-width: 1024px) {
  .container, .ug-lux-mainbar, .ug-footer-inner {
    width: calc(100% - 28px) !important;
  }
  .museum-frame { height: 210px; max-height: 210px; aspect-ratio: 4 / 3; padding: 10px; }
  .museum-mat { height: 100% !important; padding: 9px; }
  .artist-hero {
    grid-template-columns: 320px 1fr !important;
    gap: 22px !important;
    padding: 22px !important;
  }
  .artist-hero .museum-frame { height: 290px; max-height: 290px; }
  #artworkDetailMain { grid-template-columns: 1fr !important; gap: 24px !important; }
  #artworkDetailMain .museum-frame { height: 360px; max-height: 360px; }
  .artist-grid, .works-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
  }
  .filter-bar { grid-template-columns: 1fr 1fr !important; }
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; }
  .ug-footer-top, .ug-footer-legal { grid-template-columns: 1fr; gap: 24px; }
  .ug-footer-nav { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
  .container, .ug-lux-mainbar, .ug-footer-inner {
    width: calc(100% - 20px) !important;
  }
  #gvdock, .dock { display: none !important; }
  #gvtabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9450;
    background: rgba(14, 13, 11, 0.96);
    backdrop-filter: blur(16px);
    border-top: 1px solid rgba(212, 175, 106, 0.38);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.6);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  }
  body.ug-shade-light #gvtabs {
    background: rgba(252, 249, 242, 0.96);
    border-top-color: #d5cab8;
  }
  #gvtabs button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: 0;
    color: var(--ug-text);
    font-size: 1.1rem;
    line-height: 1;
    padding: 6px 0;
    cursor: pointer;
    min-height: 46px;
  }
  #gvtabs button span {
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ug-text-muted);
  }
  #ugChatbotLauncher {
    right: 12px !important;
    bottom: calc(74px + env(safe-area-inset-bottom)) !important;
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
  #ugChatbotPanel {
    right: 10px !important;
    bottom: calc(124px + env(safe-area-inset-bottom)) !important;
    width: calc(100vw - 20px) !important;
    height: min(500px, calc(100vh - 150px)) !important;
  }
  .ug-lux-mainbar { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
  .ug-lux-nav { width: 100%; order: 3; padding-bottom: 2px; }
  .museum-frame { height: 204px; max-height: 204px; aspect-ratio: 4 / 3; padding: 9px; }
  .museum-mat { height: 100% !important; padding: 8px; }
  .artist-hero { grid-template-columns: 1fr !important; padding: 16px !important; }
  .artist-hero .museum-frame { height: 248px; max-height: 248px; }
  #artworkDetailMain .museum-frame { height: 280px; max-height: 280px; }
  .artist-grid, .works-gallery-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .filter-bar { grid-template-columns: 1fr !important; gap: 8px !important; }
  .stats-strip { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
}

@media (max-width: 480px) {
  .museum-frame { height: 192px; max-height: 192px; aspect-ratio: 4 / 3; padding: 8px; }
  .museum-mat { height: 100% !important; padding: 7px; }
  .ug-brand-name { font-size: 15.5px; }
  .ug-footer-nav { grid-template-columns: 1fr; }
}

/* ============================================================================
   10. TEN BESPOKE CATEGORY MUSEUM FRAMES (그림종류 10대 분류별 맞춤형 고급 액자)
   ============================================================================ */

/* 01. 르네상스·고전주의 명화 — Florentine Uffizi Antique Gilded Carving Frame */
.museum-frame[data-cat-frame="cat_01"],
.museum-frame.frame-cat-01 {
  background: linear-gradient(145deg, #d8b467 0%, #87611e 28%, #f2d894 52%, #5e410e 82%, #b58938 100%);
  border: 2px solid #f7e4ad;
  box-shadow: 0 20px 48px rgba(0,0,0,0.82), inset 0 0 0 3px #422c07, inset 0 0 12px rgba(247,228,173,0.45);
}
.museum-frame[data-cat-frame="cat_01"] .museum-mat,
.museum-frame.frame-cat-01 .museum-mat {
  background: radial-gradient(circle at center, #f6f1e5 0%, #e7decb 100%);
  border: 2px solid #9c742b;
}

/* 02. 바로크·로코코·드라마틱 유화 — Louvre Royal Versailles Ornate 24K Gold & Velvet Frame */
.museum-frame[data-cat-frame="cat_02"],
.museum-frame.frame-cat-02 {
  background: linear-gradient(135deg, #f5d98e 0%, #9e6d1c 25%, #4a151b 50%, #e8c36b 78%, #6b450b 100%);
  border: 2px solid #fae3a7;
  box-shadow: 0 22px 52px rgba(0,0,0,0.86), inset 0 0 0 3px #3d1015, inset 0 0 14px rgba(245,217,142,0.5);
}
.museum-frame[data-cat-frame="cat_02"] .museum-mat,
.museum-frame.frame-cat-02 .museum-mat {
  background: linear-gradient(180deg, #efe7d6 0%, #e2d5be 100%);
  border: 2px solid #b88732;
}

/* 03. 인상주의·후기인상주의·빛의 회화 — Musée d'Orsay Champagne Gold & Warm French Linen Frame */
.museum-frame[data-cat-frame="cat_03"],
.museum-frame.frame-cat-03 {
  background: linear-gradient(135deg, #faebc0 0%, #cba65c 32%, #fff5d9 56%, #99742c 85%, #e6c983 100%);
  border: 2px solid #fff6db;
  box-shadow: 0 18px 44px rgba(0,0,0,0.76), inset 0 0 0 2px #73551a, inset 0 0 10px rgba(255,246,219,0.5);
}
.museum-frame[data-cat-frame="cat_03"] .museum-mat,
.museum-frame.frame-cat-03 .museum-mat {
  background: radial-gradient(circle at center, #faf7f0 0%, #efe9dc 100%);
  border: 1.5px solid #d4b26a;
}

/* 04. 초상화·인물·실내 풍속화 — Dutch Ebony Tortoiseshell & Brushed Brass Portrait Frame */
.museum-frame[data-cat-frame="cat_04"],
.museum-frame.frame-cat-04 {
  background: linear-gradient(145deg, #332821 0%, #16110e 38%, #4a392e 68%, #0f0b09 100%);
  border: 2px solid #cfa861;
  box-shadow: 0 22px 50px rgba(0,0,0,0.88), inset 0 0 0 2px #cfa861, inset 0 0 12px rgba(0,0,0,0.85);
}
.museum-frame[data-cat-frame="cat_04"] .museum-mat,
.museum-frame.frame-cat-04 .museum-mat {
  background: linear-gradient(180deg, #f3ede2 0%, #e5dccb 100%);
  border: 2px solid #b89146;
}

/* 05. 대자연·해경·낭만주의 풍경화 — Royal Burl Walnut & Natural Oak Panorama Frame */
.museum-frame[data-cat-frame="cat_05"],
.museum-frame.frame-cat-05 {
  background: linear-gradient(145deg, #784f30 0%, #402614 35%, #966540 65%, #2b180b 100%);
  border: 2px solid #c99b5b;
  box-shadow: 0 20px 46px rgba(0,0,0,0.82), inset 0 0 0 2px #261409, inset 0 0 10px rgba(201,155,91,0.35);
}
.museum-frame[data-cat-frame="cat_05"] .museum-mat,
.museum-frame.frame-cat-05 .museum-mat {
  background: linear-gradient(180deg, #f2f3ec 0%, #e4e6dc 100%);
  border: 1.5px solid #8c6538;
}

/* 06. 정물화·보태니컬·플라워 아트 — Botanical Conservatory Verdigris Sage-Gold & Double Cream Frame */
.museum-frame[data-cat-frame="cat_06"],
.museum-frame.frame-cat-06 {
  background: linear-gradient(135deg, #c5d1b4 0%, #7d8f69 32%, #e8d8a7 64%, #4f5e3f 100%);
  border: 2px solid #efe3ba;
  box-shadow: 0 18px 44px rgba(0,0,0,0.78), inset 0 0 0 2px #3e4a31, inset 0 0 10px rgba(239,227,186,0.4);
}
.museum-frame[data-cat-frame="cat_06"] .museum-mat,
.museum-frame.frame-cat-06 .museum-mat {
  background: radial-gradient(circle at center, #fcfaf4 0%, #f0eadc 100%);
  border: 2px solid #a89f68;
}

/* 07. 신화·종교·역사·상징 대서사화 — Vatican Imperial Bronze & Carrara Alabaster Frame */
.museum-frame[data-cat-frame="cat_07"],
.museum-frame.frame-cat-07 {
  background: linear-gradient(145deg, #9c6e3e 0%, #421f18 36%, #d9ae66 66%, #29110c 100%);
  border: 2px solid #ebd094;
  box-shadow: 0 22px 52px rgba(0,0,0,0.86), inset 0 0 0 3px #2e130e, inset 0 0 12px rgba(217,174,102,0.45);
}
.museum-frame[data-cat-frame="cat_07"] .museum-mat,
.museum-frame.frame-cat-07 .museum-mat {
  background: linear-gradient(180deg, #f3eee6 0%, #e6dfd3 100%);
  border: 2px solid #9e7334;
}

/* 08. 한국 전통회화·진경산수·풍속·민화 — Joseon Royal Silk Brocade (장황) & Ottchil Zelkova Frame */
.museum-frame[data-cat-frame="cat_08"],
.museum-frame.frame-cat-08 {
  background: linear-gradient(145deg, #543520 0%, #29170c 40%, #734a2e 72%, #1c0f07 100%);
  border: 2px solid #b89456;
  box-shadow: 0 20px 46px rgba(0,0,0,0.84), inset 0 0 0 2px #362011;
}
.museum-frame[data-cat-frame="cat_08"] .museum-mat,
.museum-frame.frame-cat-08 .museum-mat {
  background: linear-gradient(180deg, #e6ebe4 0%, #f5f0e4 15%, #f5f0e4 85%, #e6ebe4 100%);
  border: 1.5px solid #8c6d3b;
}

/* 09. 중국 문인산수·공필화·화조 수묵화 — Imperial Forbidden City Zitan Rosewood & Xuan Silk Frame */
.museum-frame[data-cat-frame="cat_09"],
.museum-frame.frame-cat-09 {
  background: linear-gradient(145deg, #69231f 0%, #300d0b 38%, #8a322d 68%, #1f0706 100%);
  border: 2px solid #d49b4b;
  box-shadow: 0 20px 48px rgba(0,0,0,0.85), inset 0 0 0 2px #471411, inset 0 0 10px rgba(212,155,75,0.4);
}
.museum-frame[data-cat-frame="cat_09"] .museum-mat,
.museum-frame.frame-cat-09 .museum-mat {
  background: linear-gradient(180deg, #efe5cf 0%, #f7f1e3 18%, #f7f1e3 82%, #efe5cf 100%);
  border: 2px solid #b57c32;
}

/* 10. 일본 우키요에·림파·근대추상·판화 — Kyoto Gloss Urushi Black Lacquer, Hinoki & Maki-e Gold Frame */
.museum-frame[data-cat-frame="cat_10"],
.museum-frame.frame-cat-10 {
  background: linear-gradient(145deg, #24242b 0%, #0a0a0d 42%, #3b3530 74%, #050507 100%);
  border: 2px solid #e0bc72;
  box-shadow: 0 22px 50px rgba(0,0,0,0.88), inset 0 0 0 2px #b89246;
}
.museum-frame[data-cat-frame="cat_10"] .museum-mat,
.museum-frame.frame-cat-10 .museum-mat {
  background: linear-gradient(180deg, #f6f3ea 0%, #ebe5d8 100%);
  border: 1.5px solid #c9a356;
}