/* ===== "HAPPY" light design language — mobile exhibition site =====
   Matches the uploaded illustration mockups: warm greige ground, arch motif,
   serif HAPPY watermark, per-concept accent color. Scoped under .happy */

.happy {
  --paper: #e9e6df;         /* warm greige page */
  --paper-2: #f3f0e9;       /* raised cream card */
  --ink: #16150f;
  --ink-soft: #3e3c34;
  --muted: #9a968d;
  --hair: #d6d2c8;
  --hair-2: #cfcbc1;
  --tile: #edeae3;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  letter-spacing: -0.01em;
}
.happy * { box-sizing: border-box; }

/* column */
.wrapm { max-width: 500px; margin: 0 auto; padding: 0 30px; }
.band { border-bottom: 1px solid var(--hair); }

/* eyebrow / labels */
.hh-ey { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.hh-ey--ink { color: var(--ink-soft); }

/* pill buttons */
.hh-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 34px; border: 1px solid #b7b3a9; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), transform 0.15s var(--ease);
}
.hh-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); opacity: 1; }
.hh-btn:active { transform: scale(0.98); }
.hh-btn svg { width: 15px; height: 15px; }

/* ---- header ---- */
.hh-hdr { display: flex; align-items: center; justify-content: space-between; padding-top: 44px; padding-bottom: 34px; padding-left: 20px !important; }
.hh-hdr__logo { height: 46px; width: auto; display: block; }
.hh-hdr__search { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hair-2); background: transparent; color: var(--ink-soft); display: grid; place-items: center; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.hh-hdr__search:hover { background: var(--ink); color: var(--paper); }

/* ---- concept arch hero ---- */
.hh-hero { padding-top: 30px; padding-bottom: 40px; overflow: visible; }
.hh-hero .hh-hero__top { padding-left: 0 !important; }
.hh-hero__top { display: flex; flex-direction: column; gap: 4px; margin-bottom: 20px; }
.hh-hero .hh-hero__top { padding-left: 20px !important; }
.hh-hero__sub { font-size: 12.5px; color: var(--muted); letter-spacing: 0.04em; }
.hh-exh .hh-hero__sub { font-size: 18px; }

.hh-arch {
/* arch = logo window (semicircle top + straight sides + square bottom), per Artist page.svg clip-path.
   Rendered as a background layer; meta + artwork flow on top so the card can extend below the arch. */
  position: absolute; top: 30px; left: 0; right: 0;
  aspect-ratio: 1290 / 1834;
  border-radius: 50% 50% 0 0 / 35.17% 35.17% 0 0;
  background: var(--c, #14ade6);
  z-index: 0;
}
.hh-arch__inner { position: relative; z-index: 2; padding: 35.5% 0 0; }
/* HAPPY lockup watermark — uses the brand's own outlined artwork (assets/happy-lockup.svg).
   Rises ABOVE the arch top-right and overlaps down into it (mockup #2/#6/#7). */
.hh-happy { position: absolute; top: -34px; right: 12px; z-index: 4; pointer-events: none; }
.hh-happy__svg { display: block; height: clamp(240px, 62vw, 310px); width: auto; filter: drop-shadow(0 1px 3px rgba(90, 84, 74, 0.22)); }
.hh-arch__meta { padding: 0; }
.hh-arch__en { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: 0.01em; }
.hh-arch__ko { font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 3px; letter-spacing: 0.06em; }
.hh-arch__name { font-size: 74px; font-weight: 100; color: #fff; margin-top: 16px; letter-spacing: -0.01em; line-height: 1; }

/* artwork card — rounded rect that overlaps the lower arch and extends below it (Artist page.svg) */
.hh-artwork {
  position: relative; margin: 24px 3% 0; background: rgba(255, 255, 255, 0.14);
  border-radius: 16px; aspect-ratio: 1110 / 1464; overflow: hidden;
  display: grid; place-items: center; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.hh-artwork img { width: 100%; height: 100%; object-fit: cover; }
.hh-artwork__ph { color: rgba(255, 255, 255, 0.9); font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 500; }

/* ---- statement ---- */
.hh-statement { padding-top: 36px; padding-bottom: 42px; }
.hh-statement__lead { font-size: 18px; font-weight: 600; line-height: 1.55; margin-bottom: 22px; }
.hh-statement p { font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin-bottom: 16px; }
.hh-statement p:last-of-type { margin-bottom: 0; }
.hh-share { display: flex; justify-content: center; margin-top: 34px; }

/* ---- process ---- */
.hh-process { padding-top: 30px; padding-bottom: 46px; }
.hh-process__head { display: flex; flex-direction: column; gap: 4px; }
.hh-process__sub { font-size: 12.5px; color: var(--muted); }
.hh-process__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 34px; }
.hh-ptile { position: relative; aspect-ratio: 3 / 4; background: var(--tile); border: 1px solid var(--hair-2); border-radius: 5px; overflow: hidden; }
.hh-ptile img { width: 100%; height: 100%; object-fit: cover; }
.hh-ptile__no { position: absolute; left: 9px; bottom: 7px; font-size: 11px; font-weight: 500; letter-spacing: 0.1em; color: var(--muted); }
.hh-process__dl { display: flex; justify-content: center; }

/* ---- guestbook (cream card) ---- */
.hh-guest { margin: 6px auto 2px; }
.hh-guest__card { background: var(--paper-2); border-radius: 28px; padding: clamp(30px, 7vw, 46px) clamp(22px, 6vw, 34px); }
.hh-guest__head { text-align: center; margin-bottom: 26px; }
.hh-guest__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 7vw, 38px); margin: 12px 0 8px; }
.hh-guest__desc { font-size: 13.5px; color: var(--muted); }
.hh-guest__form { display: flex; gap: 10px; margin-bottom: 26px; }
.hh-guest__input { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--hair); border-radius: 999px; padding: 14px 20px; font-family: var(--sans); font-size: 15px; color: var(--ink); outline: none; transition: border-color 0.3s var(--ease); }
.hh-guest__input:focus { border-color: var(--ink); }
.hh-guest__input::placeholder { color: #b3afa5; }
.hh-guest__btn { flex: none; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 0 24px; font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.3s var(--ease), transform 0.15s var(--ease); }
.hh-guest__btn:hover { background: #33302a; }
.hh-guest__btn:active { transform: scale(0.97); }
.hh-guest__list { display: flex; flex-direction: column; gap: 10px; }
.hh-gnote { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #ece8df; border-radius: 14px; padding: 16px 18px; }
.hh-gnote__q { font-family: var(--serif); font-size: 26px; line-height: 0.6; color: var(--c, #14ade6); flex: none; }
.hh-gnote__t { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---- footnote ---- */
.hh-footnote { padding: 34px 0; }
.hh-footnote__row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 24px 0; border-top: 1px solid var(--ink); }
.hh-footnote__mark { font-family: var(--serif); font-size: 22px; line-height: 1; color: var(--muted); }
.hh-footnote__text { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.7; color: var(--ink-soft); }

/* ---- footer ---- */
.hh-ftr { padding-top: 44px; padding-bottom: 54px; position: relative; }
.hh-ftr__connect { display: inline-block; border: 1px solid var(--hair-2); border-radius: 999px; padding: 6px 16px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; margin-bottom: 20px; }
.hh-ftr__links { display: flex; gap: 22px; margin-bottom: 30px; }
.hh-ftr__links a { font-size: 20px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; transition: opacity 0.3s var(--ease); }
.hh-ftr__info { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--ink-soft); max-width: 62%; }
.hh-ftr__info .num { color: var(--ink); }
.hh-ftr__info .acad { margin-top: 14px; }
.hh-ftr__logo { position: absolute; right: 30px; bottom: 40px; text-align: center; }
.hh-ftr__logo img { height: 82px; width: auto; display: block; margin: 0 auto 10px; }
.hh-ftr__logo .kr { font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.hh-ftr__logo .en { font-size: 10px; color: var(--muted); letter-spacing: 0.03em; margin-top: 2px; }

/* ---- artist-switcher overlay: base structure (mobile) ---- */
.happy .search { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 20px; border: 1px solid var(--hair-2); border-radius: 999px; }
.happy .search svg { flex: none; }
.happy .search__input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-family: var(--sans); font-size: 16px; letter-spacing: -0.01em; }
.happy .search__clear { flex: none; background: none; border: 0; cursor: pointer; display: grid; place-items: center; padding: 2px; }
.swx { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; }
.swx__scrim { position: absolute; inset: 0; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 0; cursor: pointer; animation: swfade 0.3s var(--ease); }
.swx__panel { position: relative; padding: 24px 0 30px; max-height: 90vh; overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,0.22); animation: swdrop 0.4s var(--ease); border-bottom: 1px solid var(--hair); }
@keyframes swfade { from { opacity: 0; } }
@keyframes swdrop { from { transform: translateY(-24px); opacity: 0; } }
.swx__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.swx__close { background: none; border-radius: 999px; width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.swx__count { margin: 16px 0 8px; }
.swx__results { display: flex; flex-direction: column; }
.swrow { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 6px; cursor: pointer; color: inherit; transition: background 0.25s var(--ease); }
.swrow.is-current { opacity: 0.4; }
.swrow__thumb { flex: none; width: 46px; height: 46px; overflow: hidden; border-radius: 6px; }
.swrow__thumb img { width: 100%; height: 100%; object-fit: cover; }
.swrow__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swrow__name { font-size: 17px; }
.swrow__meta { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swrow__concept { flex: none; }
.swrow__go { flex: none; transition: transform 0.3s var(--ease); }
.swrow:hover .swrow__go { transform: translateX(4px); }
.swx__empty { padding: 40px 6px; font-family: var(--serif); font-size: 20px; }

/* ---- search overlay (light) ---- */
.happy .swx__scrim { background: rgba(40, 38, 32, 0.4); }
.happy .swx__panel { background: var(--paper-2); border-bottom-color: var(--hair); }
.happy .swx__close { border-color: var(--hair-2); color: var(--ink); }
.happy .swx__close:hover { background: var(--ink); color: var(--paper); }
.happy .eyebrow { color: var(--muted); }
.happy .search { border-color: var(--hair-2); background: #fff; color: var(--muted); }
.happy .search:focus-within { border-color: var(--ink); background: #fff; color: var(--ink); }
.happy .search__input { color: var(--ink); }
.happy .search__input::placeholder { color: #b3afa5; }
.happy .search__clear { color: var(--muted); }
.happy .search__clear:hover { color: var(--ink); }
.happy .swrow { border-bottom-color: #e2ded4; color: var(--ink); }
.happy .swrow:hover { background: rgba(22, 21, 15, 0.04); }
.happy .swrow__thumb { background: #e0dcd2; }
.happy .swrow__meta, .happy .swrow__go { color: var(--muted); }
.happy .swrow:hover .swrow__go { color: var(--ink); }
.happy .swx__empty { color: var(--muted); }

@media (max-width: 400px) {
  .hh-ftr__info { max-width: 100%; }
  .hh-ftr__logo { position: static; text-align: right; margin-top: 34px; }
  .hh-ftr__logo img { margin-left: auto; margin-right: 0; }
}

/* ============================================================
   HOME (mockups #1 / #2)
   ============================================================ */
.hh-home-hero { padding-top: 26px; padding-bottom: 10px; }
/* window-arch silhouette taken verbatim from the logo (main.svg clipPath):
   true semicircle top (radius = ½ width), straight sides, SQUARE bottom.
   Do not alter these radii — they reproduce the brand mark's window shape. */
.hh-home-arch { position: relative; margin-top: 20px; border-radius: 50% 50% 0 0 / 35.16% 35.16% 0 0; overflow: hidden; aspect-ratio: 1290 / 1834; background: #cfc9bd; }
.hh-home-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hh-home-arch__scrim { position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,0.04), rgba(0,0,0,0.26)); }
.hh-home-arch__title { position: absolute; bottom: 6%; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.28); text-align: center; padding: 0 20px; }
.hh-home-arch__h { font-family: "Playfair Display", var(--serif); font-weight: 600; font-size: clamp(58px, 17vw, 104px); line-height: 0.9; letter-spacing: 0.03em; text-decoration: none; }
.hh-home-arch__rule { width: 340px; max-width: 82%; height: 3px; background: #fff; margin: 14px 0; opacity: 0.92; }
.hh-home-arch__sub { font-family: var(--serif); font-weight: 600; font-size: 29px; letter-spacing: 0.08em; }

.hh-concepts { padding-top: 34px; padding-bottom: 12px; display: flex; flex-direction: column; gap: 14px; }.hh-ccard { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; border: 1px solid #ece8df; border-radius: 22px; padding: 26px 28px; cursor: pointer; overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.hh-ccard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c); opacity: 0; transition: opacity 0.35s var(--ease); }
.hh-ccard:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,0.07); opacity: 1; }
.hh-ccard:hover::before { opacity: 1; }
.hh-ccard__body { display: flex; flex-direction: column; gap: 6px; }
.hh-ccard__en { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.hh-ccard__ko { font-size: clamp(20px, 5.4vw, 24px); font-weight: 600; color: var(--ink); }
.hh-ccard__no { font-family: var(--serif); font-weight: 600; font-size: clamp(52px, 15vw, 68px); line-height: 1; flex: none; }

.hh-theme { padding-top: 42px; padding-bottom: 42px; border-top: 1px solid var(--hair); }
.hh-theme__tag { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* ============================================================
   CONCEPT ORBS — holographic sphere selector (happy page)
   ============================================================ */
.cx-orbs { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 36px; padding-bottom: 20px; }
.cx-orbs__head { min-height: 62px; display: flex; flex-direction: column; gap: 4px; }
.cx-orbs__en { font-size: 12.5px; letter-spacing: 0.06em; color: var(--muted); font-weight: 300; text-transform: none; }
.cx-orbs__ko { font-size: 27px; font-weight: 300; color: var(--ink); line-height: 1.1; }
.cx-orbs__track { display: flex; gap: clamp(16px, 6vw, 30px); justify-content: center; align-items: flex-start; width: 100%; padding: 30px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cx-orbs__track::-webkit-scrollbar { display: none; }
.orb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; background: none; border: 0; padding: 8px 0; cursor: pointer; scroll-snap-align: center; opacity: 0.42; transform: scale(0.82); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.orb.is-on { opacity: 1; transform: scale(1); }
.orb__ball {
  position: relative; width: clamp(112px, 34vw, 138px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(58% 58% at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 62%),
    radial-gradient(130% 130% at 72% 78%, var(--c), transparent 72%),
    conic-gradient(from 210deg at 50% 50%, #ffd9ef, #d7ecff, #d9ffe8, #fff4d2, #f0dbff, #ffd9ef);
  box-shadow: 0 20px 44px -14px var(--c), 0 6px 16px rgba(0,0,0,0.08),
    inset 0 -12px 26px rgba(0,0,0,0.14), inset 0 10px 20px rgba(255,255,255,0.55);
  transition: box-shadow 0.5s var(--ease);
}
.orb__no { font-family: "Merriweather", var(--serif); font-weight: 700; font-size: clamp(34px, 10vw, 42px); color: rgba(255,255,255,0.96); text-shadow: 0 1px 4px rgba(0,0,0,0.22); }
.orb__label { font-size: 15px; font-weight: 500; color: var(--ink); transition: color 0.4s var(--ease); }
.orb:not(.is-on) .orb__label { color: var(--muted); }
.cx-orbs__desc { max-width: 32ch; font-size: 15px; line-height: 1.85; color: var(--ink-soft); margin: 18px auto 26px; white-space: pre-line; }
.cx-orbs__enter { display: inline-flex; align-items: center; gap: 11px; padding: 14px 30px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 14px; letter-spacing: 0.02em; text-decoration: none; transition: gap 0.35s var(--ease), opacity 0.3s var(--ease); }
.cx-orbs__enter:hover { gap: 18px; opacity: 0.9; }
.hh-theme__intro { font-size: 18px; font-weight: 600; line-height: 1.95; color: var(--ink-soft); white-space: pre-line; margin-top: 22px; }

.hh-visit { padding-top: 42px; padding-bottom: 42px; border-top: 1px solid var(--hair); }
.hh-visit__list { margin: 24px 0 8px; }
.hh-visit__row { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hair); }
.hh-visit__row dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); font-weight: 500; }
.hh-visit__row dd { font-size: 15px; color: var(--ink); }
.hh-visit__map { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding-top: 26px; color: var(--muted); font-size: 13.5px; transition: opacity 0.3s var(--ease); }
.hh-visit__map:hover { opacity: 1; }
.hh-visit__pin { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--ink-soft); flex: none; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.hh-visit__map:hover .hh-visit__pin { background: var(--ink); color: var(--paper); }

/* ============================================================
   CONCEPT page (mockups #3–#6)
   ============================================================ */
/* ============================================================
   CONCEPT ORB SWIPER (holographic spheres — swip ui)
   ============================================================ */
.cxo { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 30px; padding-bottom: 6px; }
.cxo__head { min-height: 60px; display: flex; flex-direction: column; gap: 4px; }
.cxo__en { margin: 0; font-size: 12.5px; letter-spacing: 0.05em; color: var(--muted); font-weight: 400; }
.cxo__ko { margin: 0; font-size: 27px; font-weight: 300; color: var(--ink); line-height: 1.1; }
.cxo__track { display: flex; gap: clamp(14px, 5vw, 26px); justify-content: center; align-items: flex-start; width: 100%; padding: 26px 16px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cxo__track::-webkit-scrollbar { display: none; }
.cxo-orb { flex: none; display: flex; flex-direction: column; align-items: center; gap: 15px; background: none; border: 0; padding: 8px 0; cursor: pointer; scroll-snap-align: center; opacity: 0.4; transform: scale(0.8); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.cxo-orb.is-on { opacity: 1; transform: scale(1); }
.cxo-orb__ball {
  position: relative; width: clamp(116px, 36vw, 150px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 22px 46px -14px var(--glow), 0 6px 16px rgba(0,0,0,0.08),
    inset 0 -14px 30px rgba(0,0,0,0.16), inset 0 12px 22px rgba(255,255,255,0.55);
  transition: box-shadow 0.5s var(--ease);
}
/* holographic gradients faithful to the illustrator orbs */
.cxo-orb--Glow .cxo-orb__ball {
  --glow: #00c0f3;
  background:
    radial-gradient(56% 56% at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    radial-gradient(135% 135% at 72% 80%, #ffa4d1 0%, transparent 62%),
    conic-gradient(from 200deg at 50% 50%, #0073c1, #00c0f3, #8cb0e0, #ffa4d1, #0073c1);
}
.cxo-orb--Play .cxo-orb__ball {
  --glow: #ff329a;
  background:
    radial-gradient(56% 56% at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    radial-gradient(135% 135% at 74% 80%, #d6df00 0%, transparent 60%),
    conic-gradient(from 210deg at 50% 50%, #ff329a, #ff5faf, #ffa4d1, #d6df00, #ff329a);
}
.cxo-orb--Bloom .cxo-orb__ball {
  --glow: #00b3b5;
  background:
    radial-gradient(56% 56% at 30% 26%, rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    radial-gradient(135% 135% at 72% 80%, #ffa4d1 0%, transparent 62%),
    conic-gradient(from 200deg at 50% 50%, #00b3b5, #31bdb2, #9bd3ae, #ffa4d1, #00b3b5);
}
.cxo-orb__no { font-family: "Merriweather", var(--serif); font-weight: 700; font-size: clamp(34px, 10vw, 44px); color: rgba(255,255,255,0.96); text-shadow: 0 1px 5px rgba(0,0,0,0.25); }
.cxo-orb__label { font-size: 15px; font-weight: 500; color: var(--ink); transition: color 0.4s var(--ease); }
.cxo-orb:not(.is-on) .cxo-orb__label { color: var(--muted); }

/* ============================================================
   CONCEPT ARCH + ORB SWIPER (solid concept-color arch, mockup)
   ============================================================ */
.cxa-hero { padding: 26px 0 0; }
.cxa-hero .hh-hero__top { padding-left: 20px !important; }
.cxa-hero, .hh-archwrap {
  padding-left: 0 !important; padding-right: 0 !important;
  margin-left: 0 !important; margin-right: 0 !important;
  width: 100% !important;
}
.cxa-arch {
  position: relative; margin-top: 20px;
  background: var(--c);
  border-radius: 50% 50% 0 0 / 35.16% 35.16% 0 0;
  aspect-ratio: 66 / 95;
}
/* concept title, lower-left inside the arch */
.cxa-arch__title { position: absolute; left: 7%; right: 7%; top: 50%; color: #fff; }
.cxa-arch__en { margin: 0 0 4px; font-family: var(--sans); font-size: clamp(18px, 5vw, 30px); font-weight: 700; letter-spacing: -0.01em; }
.cxa-arch__ko { margin: 0; font-size: clamp(30px, 9vw, 52px); font-weight: 400; line-height: 1.05; }
/* orb swiper pinned to arch bottom, horizontally scrollable, bottoms clipped */
.cxa-orbs { position: absolute; left: 0; right: 0; bottom: -14%; height: 46%; display: flex; align-items: flex-end; padding: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cxa-orbs::-webkit-scrollbar { display: none; }
.cxa-orb {
  position: relative; flex: none; width: 90%; background: none; border: 0; padding: 0; cursor: pointer;
  scroll-snap-align: center;
  opacity: 0.6; transition: opacity 0.5s var(--ease), scale 0.5s var(--ease); scale: 0.94;
}
.cxa-orb + .cxa-orb { margin-left: -38%; }
.cxa-orb.is-on { opacity: 1; scale: 1; }
.cxa-orb img { width: 100%; display: block; filter: drop-shadow(0 18px 22px rgba(0,0,0,0.28)); }
.cxa-orb__no { position: absolute; top: 24%; left: 50%; translate: -50% 0; font-family: "Merriweather", var(--serif); font-weight: 400; font-size: clamp(14px, 3.6vw, 19px); color: rgba(255,255,255,0.92); text-shadow: 0 1px 4px rgba(0,0,0,0.2); pointer-events: none; }
.cxa-orb__label { position: absolute; top: 46%; left: 50%; translate: -50% 0; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 7vw, 38px); letter-spacing: 0.14em; color: #fff; text-shadow: 0 1px 5px rgba(0,0,0,0.18); pointer-events: none; white-space: nowrap; }

/* wrapper so the vertical HAPPY watermark can escape the arch's overflow clip */
.hh-archwrap { position: relative; margin-top: 20px; padding-top: 30px; margin-bottom: clamp(70px, 18vw, 110px); }
.hh-archwrap .cxa-arch { margin-top: 0; }
.cxp-arch { margin-top: 20px; }
.cxp-card { position: absolute; left: 16px; right: 16px; bottom: 16%; background: var(--c); border-radius: 22px; padding: 22px 24px 20px; color: #fff; box-shadow: 0 18px 44px rgba(0,0,0,0.18); }
.cxp-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cxp-card__labels { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cxp-card__en { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.2; }
.cxp-card__ko { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.15; }
.cxp-card__no { flex: none; font-family: var(--serif); font-weight: 600; font-size: 60px; line-height: 0.75; }
.cxp-chips { display: flex; gap: 8px; margin-top: 20px; }
.cxp-chip { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1px solid rgba(255,255,255,0.55); border-radius: 999px; padding: 9px 0; color: #fff; font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.cxp-chip__no { opacity: 0.75; font-size: 11px; }
.cxp-chip.is-active { background: #fff; color: var(--c); }
.cxp-chip.is-active .cxp-chip__no { opacity: 0.6; }

.cxp-tools { position: sticky; top: 0; z-index: 40; padding-block: 12px; background: var(--paper); border-bottom: 1px solid var(--hair); }
.cxp-search { display: flex; align-items: center; gap: 12px; width: 100%; background: transparent; border: 1px solid #b7b3a9; border-radius: 999px; padding: 17px 26px; transition: border-color 0.3s var(--ease); }
.cxp-search:focus-within { border-color: var(--ink); }
.cxp-search svg { color: var(--ink-soft); flex: none; }
.cxp-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink); text-align: center; letter-spacing: 0.04em; }
.cxp-search input::placeholder { color: var(--ink-soft); font-weight: 500; letter-spacing: 0.08em; }
.cxp-search__x { background: none; border: 0; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.cxp-search__x:hover { color: var(--ink); }
.cxp-count { display: block; text-align: center; margin-top: 16px; }

.cxp-gridwrap { padding-top: 22px; padding-bottom: 12px; }
.cxp-grid { columns: 2; column-gap: 12px; }
.cxp-work { display: inline-block; width: 100%; margin: 0 0 12px; break-inside: avoid; background: none; border: 0; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.cxp-work__img { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 8px; background: var(--tile); }
.cxp-work__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s var(--ease); }
.cxp-work:hover .cxp-work__img img { transform: scale(1.05); }
.cxp-work__badge { position: absolute; top: 10px; left: 10px; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-family: var(--serif); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
.cxp-work__cap { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 0; }
.cxp-work__name { font-size: 15px; font-weight: 600; }
.cxp-work__title { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxp-empty { text-align: center; padding: 60px 0; }
.cxp-empty p { font-size: 22px; color: var(--muted); margin-bottom: 22px; }
@media (max-width: 360px) { .cxp-grid { columns: 1; } }

/* ============================================================
   LANDING (main.svg) — exhibition selector
   ============================================================ */
.hh-exh { padding-top: 24px; padding-bottom: 42px; }
.hh-exh .hh-hero__top { margin-bottom: 20px; padding-left: 20px !important; }

/* ===== FINAL OVERRIDES (must stay last in file) ===== */
html, body { overflow-x: hidden !important; }
.hh-hero__top { padding-left: 20px !important; }
.cxa-hero { overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
.hh-archwrap { overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; }
.wrapm.cxa-hero, .cxa-hero.wrapm { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; }
.cxa-arch {
  margin-left: -24px !important;
  margin-right: -24px !important;
  width: calc(100% + 48px) !important;
  max-width: none !important;
  display: block !important;
}
a.hh-home-arch { display: block; cursor: pointer; }
a.hh-home-arch { transition: transform 0.4s var(--ease); }
a.hh-home-arch:hover { transform: translateY(-3px); opacity: 1; }
.hh-home-arch--empty { background: #fbfaf6; border: 1px solid var(--hair); }

/* ============================================================
   CONCEPT ACCORDION (Happy click page / concept 1.svg)
   ============================================================ */
.hc-concepts { position: relative; z-index: 2; margin-top: -423px; display: flex; flex-direction: column; gap: 12px; }
.hc-card { background: #fff; border: 1px solid #ece8df; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,0.06); transition: box-shadow 0.35s var(--ease); }
.hc-card.is-open { box-shadow: 0 18px 46px rgba(0,0,0,0.09); }
.hc-card__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 26px; background: none; border: 0; cursor: pointer; text-align: left; }
.hc-card__labels { display: flex; flex-direction: column; gap: 5px; }
.hc-card__en { font-size: 14px; font-weight: 300; color: var(--c); }
.hc-card__ko { font-size: 27px; font-weight: 300; color: var(--ink); }
.hc-card__no { font-family: "Merriweather", var(--serif); font-weight: 600; font-size: clamp(52px, 15vw, 64px); line-height: 0.94; color: var(--c); flex: none; }
.hc-card__body { padding: 2px 26px 26px; animation: hcOpen 0.4s var(--ease); }
@keyframes hcOpen { from { opacity: 0; transform: translateY(-6px); } }
.hc-card__desc { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); white-space: pre-line; }
.hc-card__enter { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 24px 0 0 auto; border-radius: 50%; border: 1px solid var(--c); color: var(--c); transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); }
.hc-card__enter:hover { background: var(--c); color: #fff; opacity: 1; transform: translateX(4px); }