/* Handwritten tagline on the landing hero ("Different People / Brighter
   Tomorrows"). Same Google Fonts origin the site already uses. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&display=swap');
/* ============ HOME: hero / stats / carousel / projects grid ============ */
.main-scroll.home-scroll{scroll-snap-type:y proximity;scroll-behavior:smooth;}
.snap-panel{min-height:100%;scroll-snap-align:start;display:flex;flex-direction:column;}

/* ---------- landing: recent activity (latest artworks list) ----------
   Deliberately not a .snap-panel — it's a short, glanceable strip below the
   hero (since 2026-09-10 the hero with the campaign preview comes first),
   not a full-viewport section of its own. */
.recent-activity{flex-shrink:0;width:100%;max-width:var(--frame-max);margin:0 auto;padding:28px var(--gutter) 40px;}
/* One column since 2026-09-20 (the "latest exhibitions" list left with
   the exhibition → portfolio change); kept as a grid for the phone rules. */
.recent-activity-inner{display:grid;grid-template-columns:1fr;gap:48px;}
.recent-list-col{min-width:0;}
.recent-list-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;min-width:0;}
.recent-list-header .section-label{margin:0;}
.recent-list-header .cta-text{margin-top:0;flex-shrink:0;}
.recent-list{display:flex;flex-direction:column;}
.recent-list-row{
  display:flex;align-items:center;gap:14px;padding:10px 2px;
  border-bottom:1px solid var(--border);text-decoration:none;color:inherit;
  transition:background .12s linear;
}
.recent-list:last-child .recent-list-row:last-child{border-bottom:none;}
.recent-list-row:hover{background:var(--primary-soft);border-radius:var(--r-sm);}
.recent-list-thumb{
  width:52px;height:52px;flex-shrink:0;border-radius:var(--r-sm);object-fit:cover;
  background:var(--bg);box-shadow:var(--shadow-sm);
}
.recent-list-thumb-empty{position:relative;}
.recent-list-thumb-empty::after{
  content:'🖼';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:16px;opacity:.2;
}
.recent-list-info{flex:1;min-width:0;}
.recent-list-title{
  font-family:'Pretendard',sans-serif;font-weight:700;font-size:14px;color:var(--primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.recent-list-meta{
  display:flex;align-items:center;gap:6px;margin-top:4px;
  font-family:'Pretendard',sans-serif;font-size:12px;color:var(--muted);
  white-space:nowrap;overflow:hidden;
}
.recent-list-meta-name{overflow:hidden;text-overflow:ellipsis;min-width:0;}
.recent-list-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--border);}
.recent-list-avatar-fallback{
  display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--bg);
  font-family:'Pretendard',sans-serif;font-size:9px;font-weight:700;
}
.recent-list-arrow{flex-shrink:0;color:var(--muted);font-size:14px;opacity:.5;transition:opacity .12s linear,transform .12s linear;}
.recent-list-row:hover .recent-list-arrow{opacity:1;transform:translateX(2px);color:var(--primary);}
@media (max-width:900px){
  .recent-activity-inner{grid-template-columns:1fr;gap:8px;}
}
@media (max-width:640px){
  .recent-activity{padding:18px 16px 28px;}
  .recent-activity-inner{gap:22px;}
  /* Latest Artworks / Latest Exhibitions collapse to a single row of cover
     thumbnails on phones — title, byline and arrow drop away so all five
     sit side by side at a glance instead of as a tall vertical list. */
  .recent-list{flex-direction:row;gap:8px;}
  .recent-list-row{flex:1 1 0;min-width:0;padding:0;gap:0;border-bottom:none;}
  .recent-list-row:hover{background:none;}
  .recent-list-info,
  .recent-list-arrow{display:none;}
  .recent-list-thumb{width:100%;height:auto;aspect-ratio:1;}
}

/* ---------- landing: hero (2026-09-10 redesign) ----------
   The DOM is in PHONE order: copy → white card [partner line, mosaic,
   progress] → donation card → partner text → CTA. On desktop the card
   dissolves (display:contents) and grid areas rearrange the same elements:
   text column on the left; the mosaic (natural aspect ratio, a link to the
   campaign) with the handwritten tagline beside it and the campaign
   switcher under it on the right; and the progress + donation pair as one
   two-part card at the bottom-left, level with the mosaic's bottom edge. */
.hero{flex-shrink:0;padding:5vh 32px 40px;animation:fadeIn .4s ease-out;
  --hero-blue:#5B7CFF;--hero-violet:#8B6CFF;--hero-ink:#1A1F36;
  /* White, plus a few faint watercolor-like washes (the mockup's brush strokes). */
  background:
    radial-gradient(55% 45% at 90% 10%,rgba(122,152,255,.16),transparent 70%),
    radial-gradient(40% 38% at 72% 92%,rgba(255,186,150,.18),transparent 70%),
    radial-gradient(34% 34% at 6% 88%,rgba(255,170,205,.14),transparent 70%),
    #fff;}
.hero-inner{max-width:var(--frame);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.9fr);
  grid-template-rows:auto auto 1fr auto auto;
  grid-template-areas:"copy copy art" "cta cta art" "pbody pbody art" "prog prog mine" "strip strip strip";
  column-gap:40px;row-gap:0;align-items:start;}
.hero-card{display:contents;}
.hero-copy{grid-area:copy;}
.hero h1{font-family:'Pretendard',sans-serif;font-weight:800;font-size:clamp(34px,4vw,56px);letter-spacing:-.03em;line-height:1.18;margin:0 0 18px;color:var(--hero-ink);word-break:keep-all;}
.hero-lead{font-family:'Pretendard',sans-serif;color:var(--gray-700);font-size:16px;line-height:1.75;margin:0 0 26px;max-width:480px;word-break:keep-all;}
.hero-cta{grid-area:cta;margin:0 0 34px;}
.cta-blue{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,var(--hero-blue),var(--hero-violet));color:#fff;border:none;padding:15px 30px;
  border-radius:var(--r-full);font-family:'Pretendard',sans-serif;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px rgba(91,124,255,.32);transition:opacity .12s linear,transform .12s ease-out;}
.cta-blue:hover{opacity:.93;transform:translateY(-1px);}
.cta-blue:active{opacity:.85;transform:none;}
.hero-partner-body{grid-area:pbody;margin:0 0 26px;}
.hero-partner-desc{font-family:'Pretendard',sans-serif;font-size:14px;line-height:1.7;color:var(--gray-700);margin:8px 0 10px;max-width:480px;word-break:keep-all;}
.hero-partner-desc strong{color:var(--hero-ink);font-weight:800;}
.hero-partner-link{font-family:'Pretendard',sans-serif;font-size:14px;font-weight:600;color:var(--hero-blue);text-decoration:none;}
.hero-partner-link:hover{text-decoration:underline;}
.hero-art{grid-area:art;align-self:stretch;display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;min-height:0;}
.hero-art-main{display:flex;align-items:center;justify-content:center;gap:18px;min-height:0;}
/* The mosaic is a link to its campaign. width/height auto + max-* keeps the
   campaign's own aspect ratio (a 58×86 grid is a tall portrait) — never
   cropped, never squashed. */
.hero-preview{display:block;flex:0 1 auto;min-width:0;max-width:80%;border-radius:var(--r-md);overflow:hidden;background:var(--gray-0);position:relative;box-shadow:var(--shadow-lg);cursor:pointer;transition:transform .15s ease-out,box-shadow .15s ease-out;}
.hero-preview:hover{transform:translateY(-2px);box-shadow:0 22px 56px rgba(15,36,23,.18);}
.hero-preview canvas{display:block;width:auto;height:auto;max-width:100%;max-height:min(53vh,590px);} /* ~80% of the earlier size */
.hero-preview-empty{color:var(--muted);font-family:'Pretendard',sans-serif;font-size:13px;text-align:center;padding:40px 24px;}
/* !important: base.css forces Pretendard on every element of the Korean
   page (html[lang="ko"] * { … !important }); this rule is more specific so
   it wins for the handwritten tagline only. */
.hero-art .hero-tagline{flex:0 0 auto;display:flex;flex-direction:column;font-family:'Caveat','Segoe Script','Brush Script MT',cursive !important;font-weight:600;font-size:32px;line-height:1.05;color:#3A4A86;transform:rotate(-9deg);opacity:.9;user-select:none;}
.hero-tagline span:nth-child(even){padding-left:22px;}
/* The same base.css rule hits the <span>s directly, so they need it too. */
.hero-art .hero-tagline span{font-family:'Caveat','Segoe Script','Brush Script MT',cursive !important;}
.hero-art-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-top:16px;flex-shrink:0;}
.hero-art-side{display:flex;flex-direction:column;align-items:flex-end;gap:12px;margin-left:auto;}
/* How many pieces the signed-in visitor has in this campaign: the second
   card on the stats row (right column), level with the progress card. */
/* The artworks behind the mosaic: a horizontal strip under the whole hero
   so it gets the full frame width to scroll in, rather than the narrow
   right-hand column the mosaic itself sits in. */
.hero-strip{grid-area:strip;min-width:0;margin-top:28px;}
.hero-strip-head{font-family:'Pretendard',sans-serif;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px;}
.hero-strip-head b{color:var(--hero-ink);font-weight:800;}
/* overflow-x on the track only — the hero itself must never scroll sideways. */
.hero-strip-track{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding-bottom:10px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;}
.hero-strip-track::-webkit-scrollbar{height:8px;}
.hero-strip-track::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--r-full);}
.hero-strip-track::-webkit-scrollbar-track{background:transparent;}
.hero-strip-item{flex:0 0 auto;width:92px;text-decoration:none;color:inherit;scroll-snap-align:start;}
.hero-strip-img{display:block;width:92px;height:92px;object-fit:cover;border-radius:var(--r-sm);background:var(--gray-100);box-shadow:var(--shadow-sm);transition:transform .12s ease-out,box-shadow .12s ease-out;}
.hero-strip-item:hover .hero-strip-img{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.hero-strip-title{font-family:'Pretendard',sans-serif;font-size:12px;line-height:1.35;color:var(--gray-700);margin-top:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;}
.hero-strip-by{font-family:'Pretendard',sans-serif;font-size:11px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hero-mine{grid-area:mine;align-self:stretch;justify-self:start;min-width:260px;display:flex;align-items:center;gap:14px;background:var(--gray-0);border-radius:var(--r-md);padding:16px 22px;box-shadow:var(--shadow-sm);}
/* Same icon slot as the donation card's heart, with a green sprout (Lucide
   "sprout", ISC) — a contribution that grows. */
.hero-mine-icon{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;overflow:visible;}
.hero-sprout{display:block;width:32px;height:32px;overflow:visible;fill:none;stroke:var(--primary);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
/* The plant (stem + leaves — not the soil line) grows up out of the soil,
   sways in a light breeze five times, sinks back into the soil and starts
   over — one 22.8 s loop: 0–2 s grow (scale .35 → 1, ease-in-out like the
   rest so the growth visibly fills the whole 2 s — a strong ease-out looked
   finished after half a second), then 5 × 4 s sways of ±6° (+6° at 1 s,
   −6° at 3 s, back to 0° at 4 s of each sway), then a 0.8 s sink (scale
   1 → .35, ease-in so it drops rather than shrinks). The sink ends on the
   same tiny sprout the loop starts from, so the loop point (100% → 0%) is
   seamless — before 2026-09-10 it was a hard cut from full plant to sprout.
   It is a single keyframe set because CSS cannot restart a finished
   animation. Both pivot on the base of the stem: the markup nests the plant
   between translate(10 20) / translate(-10 -20) groups, so the animated
   group's own origin *is* the stem base and no transform-origin /
   transform-box is needed (their reference boxes for SVG content, offset by
   this viewBox's -2,-2 origin, are easy to get subtly wrong). Percentages
   are seconds/22.8; every keyframe lists scale() then rotate() so the two
   interpolate. */
.hero-sprout-plant{animation:heroSproutCycle 22.8s ease-in-out infinite;}
@keyframes heroSproutCycle{
  0%{transform:scale(.35) rotate(0deg);}
  8.7719%{transform:scale(1) rotate(0deg);} /* 2 s: fully grown */
  13.1579%{transform:scale(1) rotate(6deg);} 21.9298%{transform:scale(1) rotate(-6deg);} 26.3158%{transform:scale(1) rotate(0deg);} /* sway 1: 3 s / 5 s / 6 s */
  30.7018%{transform:scale(1) rotate(6deg);} 39.4737%{transform:scale(1) rotate(-6deg);} 43.8596%{transform:scale(1) rotate(0deg);} /* sway 2: 7 s / 9 s / 10 s */
  48.2456%{transform:scale(1) rotate(6deg);} 57.0175%{transform:scale(1) rotate(-6deg);} 61.4035%{transform:scale(1) rotate(0deg);} /* sway 3: 11 s / 13 s / 14 s */
  65.7895%{transform:scale(1) rotate(6deg);} 74.5614%{transform:scale(1) rotate(-6deg);} 78.9474%{transform:scale(1) rotate(0deg);} /* sway 4: 15 s / 17 s / 18 s */
  83.3333%{transform:scale(1) rotate(6deg);} 92.1053%{transform:scale(1) rotate(-6deg);} 96.4912%{transform:scale(1) rotate(0deg);animation-timing-function:ease-in;} /* sway 5: 19 s / 21 s / 22 s — then the sink */
  100%{transform:scale(.35) rotate(0deg);} /* 22.8 s: sunk into the soil — same as 0% */
}
@media (prefers-reduced-motion:reduce){.hero-sprout-plant{animation:none;}}
.hero-mine > div{min-width:0;}
.hero-mine-k{font-family:'Pretendard',sans-serif;font-size:12px;font-weight:600;color:var(--muted);}
.hero-mine-v{font-family:'Pretendard',sans-serif;font-size:22px;font-weight:800;color:var(--hero-ink);letter-spacing:-.01em;margin-top:2px;}
.hero-mine-s{font-family:'Pretendard',sans-serif;font-size:12.5px;color:var(--muted);margin-top:2px;}
.hero-mine-s b{color:var(--gray-700);font-weight:700;}
.hero-art-nav{display:flex;gap:10px;}
.hero-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--border-strong);background:var(--gray-0);color:var(--gray-700);font-family:'Pretendard',sans-serif;font-size:22px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0 0 3px;transition:background .12s linear,transform .12s ease-out;}
.hero-arrow.dark{background:var(--hero-ink);color:#fff;border-color:var(--hero-ink);}
.hero-arrow:hover{transform:translateY(-1px);}
.hero-arrow:disabled{opacity:.35;cursor:default;transform:none;}
.hero-art-caption{font-family:'Pretendard',sans-serif;font-size:14px;color:var(--gray-700);line-height:1.6;text-align:left;}
.hero-art-caption b{display:block;color:var(--hero-ink);font-weight:700;}
/* Pieces placed so far, with the heart beside it — it used to sit on the
   donation card next door, which is gone (2026-09-12). */
.hero-progress{grid-area:prog;align-self:stretch;display:flex;align-items:center;gap:14px;background:var(--gray-0);border-radius:var(--r-md);padding:18px 22px 16px;box-shadow:var(--shadow-sm);}
.hero-progress-body{flex:1 1 auto;min-width:0;}
.hero-pieces{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.hero-pieces-count{font-family:'Pretendard',sans-serif;font-size:15px;color:var(--muted);font-weight:600;}
.hero-pieces-count b{font-size:28px;color:var(--hero-ink);font-weight:800;letter-spacing:-.02em;}
.hero-pieces-pct{font-family:'Pretendard',sans-serif;font-size:18px;font-weight:800;color:var(--hero-ink);}
.hero-bar{height:8px;margin-top:10px;background:var(--gray-200);}
.hero-bar .progress-fill{background:linear-gradient(90deg,var(--hero-blue),var(--hero-violet));}
.hero-pieces-sub{display:flex;gap:8px;flex-wrap:wrap;font-family:'Pretendard',sans-serif;font-size:12.5px;color:var(--muted);margin-top:10px;}
.hero-pieces-sub b{color:var(--gray-700);font-weight:700;}
/* Heart outline: the Feather icons "heart" path (MIT), symmetric — the
   first hand-drawn path was lopsided (its right lobe bulged out further).
   The heart sits centred in a roomy 44px box (no background). The beat animates the
   wrapper (a plain span, which never clips its contents) and the SVG keeps
   a 2-unit viewBox margin plus overflow:visible — so whichever box a
   browser decides to clip to, nothing of the heart can be cut off (it was
   clipped on the right for one visitor with the bare 36px SVG). */
.hero-heart-wrap{flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;overflow:visible;transform-origin:50% 52%;animation:heroHeartbeat 2.2s ease-in-out infinite;}
.hero-heart{display:block;width:34px;height:34px;overflow:visible;fill:none;stroke:#FF4D6D;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round;}
/* A quiet "lub-dub": two small swells, then rest. */
@keyframes heroHeartbeat{0%,100%{transform:scale(1);}12%{transform:scale(1.1);}24%{transform:scale(1);}36%{transform:scale(1.06);}60%{transform:scale(1);}}
@media (prefers-reduced-motion:reduce){.hero-heart-wrap{animation:none;}}
.cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--gradient-primary);color:#fff;border:none;padding:13px 26px;
  border-radius:var(--r-full);font-family:'Pretendard',sans-serif;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  box-shadow:var(--shadow-sm);transition:opacity .12s linear;
}
.cta:hover{opacity:.92;}
.cta:active{opacity:.85;}
.cta-outline{
  display:inline-flex;align-items:center;gap:8px;
  background:transparent;color:var(--primary);border:1.5px solid var(--primary);padding:11.5px 25px;
  border-radius:var(--r-full);font-family:'Pretendard',sans-serif;font-size:14px;font-weight:600;cursor:pointer;
  transition:background .12s linear;
}
.cta-outline:hover{background:var(--primary-soft);}
.cta-outline:active{opacity:.85;}
.cta-text{
  display:block;margin-top:18px;background:none;border:none;padding:0;
  color:var(--muted);font-family:'Pretendard',sans-serif;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer;
}
.cta-text:hover{color:var(--primary);}
/* Site-wide counters — a separate band under the campaign hero (rule line +
   tinted background) so they read as their own thing, not part of it. */
.stats-bar{
  flex-shrink:0;margin-top:36px;padding:28px 32px 32px;background:var(--gray-50);border-top:1px solid var(--border);
}
.stats-bar-inner{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:var(--frame);margin:0 auto;
}
/* Plain figures on the band, separated by hairlines — NOT white cards: a
   rounded white box with a shadow is exactly what the site's buttons look
   like, and the tiles read as something to press (2026-09-20 feedback). */
.stat-tile{
  display:flex;align-items:center;gap:14px;padding:4px 24px;text-align:left;
  background:none;border-radius:0;box-shadow:none;border-left:1px solid var(--border-strong);
}
.stat-tile:first-child{border-left:none;padding-left:4px;}
.stat-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:var(--r-full);background:var(--primary-soft);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.stat-value{font-family:'Pretendard',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:var(--gray-900);}
.stat-label{font-family:'Pretendard',sans-serif;font-size:12px;font-weight:600;color:var(--muted);margin-top:2px;}
@media (max-width:900px){
  /* Phone layout — see the hero comment above: the DOM order IS the layout. */
  .hero{padding:24px 16px 32px;}
  .hero-inner{display:flex;flex-direction:column;gap:14px;align-items:stretch;}
  .hero-card{display:block;background:var(--gray-0);border-radius:20px;padding:16px;box-shadow:var(--shadow-md);}
  .hero-copy{margin-bottom:4px;}
  .hero h1{font-size:clamp(30px,8.5vw,40px);margin-bottom:12px;}
  .hero-lead{font-size:15px;margin:0;}
  .hero-art{display:block;}
  .hero-art-main{display:block;}
  .hero-preview{display:block;margin:0 auto;border-radius:14px;box-shadow:none;} /* block + max-width:80% would sit left; centre it (2026-09-10) */
  .hero-preview:hover{transform:none;box-shadow:none;}
  .hero-preview canvas{width:100%;max-height:none;}
  .hero-art .hero-tagline{display:none;}
  .hero-art-foot{flex-wrap:wrap;justify-content:flex-end;margin-top:12px;}
  .hero-mine{border-radius:20px;box-shadow:var(--shadow-md);padding:18px 20px;}
  .hero-mine-icon{flex-basis:40px;width:40px;height:40px;}
  .hero-sprout{width:30px;height:30px;}
  .hero-art-caption{display:none;}
  .hero-arrow{width:34px;height:34px;font-size:19px;}
  .hero-progress{padding:12px 2px 2px;box-shadow:none;border-radius:0;}
  .hero-strip{margin-top:18px;}
  .hero-strip-item{width:76px;}
  .hero-strip-img{width:76px;height:76px;}
  .hero-heart-wrap{flex-basis:40px;width:40px;height:40px;}
  .hero-heart{width:30px;height:30px;}
  .hero-partner-body{margin:2px 4px 0;}
  .hero-cta{margin:4px 0 0;}
  .cta-blue{width:100%;padding:17px 24px;font-size:17px;}
}
@media (max-width:640px){
  /* Keep all four stats on a single row — stack icon/value/label and
     tighten padding/gap/type so they fit a phone width. */
  .stats-bar-inner{grid-template-columns:repeat(4,1fr);gap:8px;}
  .stat-tile{flex-direction:column;align-items:flex-start;gap:6px;padding:2px 10px;}
  .stat-tile:first-child{padding-left:2px;}
  .stat-icon{width:26px;height:26px;font-size:13px;}
  .stat-value{font-size:16px;}
  .stat-label{font-size:9.5px;margin-top:1px;}
}

.scroll-hint{
  flex-shrink:0;margin-top:auto;display:flex;align-items:center;justify-content:center;
  padding:24px 0 24px;cursor:pointer;color:var(--muted);background:none;border:none;width:100%;
  transition:color .12s linear;
}
.scroll-hint:hover{color:var(--primary);}
.scroll-hint svg{width:20px;height:20px;animation:bounce 1.8s ease-in-out infinite;}
.scroll-hint.hidden{display:none;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}

/* ---------- carousel ---------- */
.carousel-section{flex-shrink:0;padding:20px 0 0;}
.carousel-section.empty{display:none;}
.carousel-header{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--frame-max);margin:0 auto 22px;padding:0 var(--gutter);}
.carousel-header .section-label{margin:0;}
.carousel-nav{display:flex;gap:10px;}
.car-arrow{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);background:var(--bg);color:var(--text);
  font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
  transition:background .12s linear,border-color .12s linear,color .12s linear;
}
.car-arrow:hover{background:var(--primary);border-color:var(--primary);color:var(--bg);}
.car-arrow:active{opacity:.85;}
.car-arrow:disabled{opacity:.3;cursor:default;pointer-events:none;}

.carousel-track-wrap{height:clamp(480px,80vh,880px);max-width:var(--frame-max);margin:0 auto;overflow:hidden;padding:2px var(--gutter);}
.carousel-track{
  height:100%;
  display:flex;gap:1px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:16px 0;scrollbar-width:none;scroll-behavior:smooth;
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-card{
  flex:0 0 100%;height:100%;scroll-snap-align:start;box-sizing:border-box;
  border:none;border-radius:var(--r-lg);overflow:hidden;
  background:var(--bg);cursor:pointer;box-shadow:var(--shadow-sm);
  transition:box-shadow .12s linear;
  opacity:0;animation:cardIn .4s ease-out forwards;
  display:block;color:inherit;text-decoration:none;
}
.carousel-card:hover{box-shadow:var(--shadow-md);}
.carousel-card-inner{height:100%;display:flex;flex-direction:column;overflow:hidden;}
.carousel-card .preview{
  width:100%;flex:1;min-height:0;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  border-bottom:none;
}
.carousel-card canvas{width:100%;height:100%;display:block;object-fit:contain;}
.carousel-card .info{flex-shrink:0;padding:40px 52px 52px;border-left:none;}
.carousel-card .p-title{font-family:'Pretendard',sans-serif;font-weight:700;font-size:42px;letter-spacing:-.02em;line-height:1.04;margin-bottom:16px;color:var(--primary);}
.carousel-card .p-desc{
  font-family:'Pretendard',sans-serif;font-size:15px;color:var(--muted);line-height:1.6;margin:0 0 26px;max-width:720px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.carousel-card .p-progress{font-family:'Pretendard',sans-serif;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:10px;}
.carousel-card .progress-bar{max-width:420px;}

.carousel-dots{display:flex;gap:10px;justify-content:center;margin-top:26px;}
.car-dot{
  width:10px;height:10px;border-radius:50%;background:transparent;
  border:1.5px solid var(--border-strong);cursor:pointer;padding:0;
  transition:background .12s linear,border-color .12s linear,transform .12s linear;
}
.car-dot:hover{border-color:var(--primary);background:var(--primary-soft);}
.car-dot.active{background:var(--primary);border-color:var(--primary);transform:scale(1.4);}

.progress-bar{height:6px;border-radius:var(--r-full);background:var(--gray-200);overflow:hidden;margin-top:6px;}
.progress-fill{height:100%;background:var(--gradient-primary);width:0%;border-radius:var(--r-full);transition:width .5s ease-out;}

@media (max-width:640px){
  .carousel-track-wrap{height:clamp(220px,42vh,340px);}
  .carousel-card .info{padding:22px 24px 28px;}
  .carousel-card .p-title{font-size:26px;}
  .hero{padding-left:16px;padding-right:16px;}
  .stats-bar{padding-left:16px;padding-right:16px;}
  .carousel-header{padding-left:16px;padding-right:16px;}
  .carousel-track-wrap{padding-left:16px;padding-right:16px;}
}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 var(--gutter) 32px;max-width:var(--frame-max);margin:0 auto;}
.project-card{
  position:relative;border:none;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;min-width:0;
  background:var(--bg);box-shadow:var(--shadow-sm);
  transition:box-shadow .12s linear;
  opacity:0;animation:cardIn .35s ease-out forwards;
  display:block;color:inherit;text-decoration:none;
}
.project-card:hover{box-shadow:var(--shadow-md);}
.project-card-inner{overflow:hidden;border-radius:0;}
/* Corner marker present at low opacity even without hover — grid tiles
   otherwise read as plain photos rather than clickable links, especially
   on touch where hover never fires. */
.project-card::after{
  content:'→';position:absolute;top:8px;right:8px;width:22px;height:22px;z-index:2;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border-strong);color:var(--primary);
  font-family:'Pretendard',sans-serif;font-size:12px;line-height:1;
  opacity:.6;transition:opacity .12s linear,background .12s linear,color .12s linear,border-color .12s linear;
}
.project-card:hover::after{opacity:1;background:var(--primary);color:var(--bg);border-color:var(--primary);}
.project-card canvas{width:100%;display:block;background:var(--bg);border-bottom:none;}
.project-card .info{padding:14px 16px;}
.project-card .p-title{font-family:'Pretendard',sans-serif;font-weight:700;font-size:15px;margin-bottom:6px;color:var(--primary);}
.project-card .p-progress{font-family:'Pretendard',sans-serif;font-size:11px;font-weight:600;color:var(--muted);}
.project-card canvas.loading, .carousel-card canvas.loading{
  background:linear-gradient(90deg,var(--bg) 25%,#ececea 37%,var(--bg) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
}
@media (max-width:700px){ .projects-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .projects-grid{padding-left:16px;padding-right:16px;padding-bottom:56px;} }

/* ---------- landing: latest artworks ---------- */
.artworks-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;padding:0 var(--gutter) 32px;width:100%;max-width:var(--frame-max);margin:0 auto;}
.artwork-card{
  position:relative;border:none;border-radius:var(--r-lg);overflow:hidden;cursor:pointer;min-width:0;
  background:var(--bg);box-shadow:var(--shadow-sm);
  transition:box-shadow .12s linear;
  opacity:0;animation:cardIn .35s ease-out forwards;
  display:block;color:inherit;text-decoration:none;
}
.artwork-card:hover{box-shadow:var(--shadow-md);}
.artwork-card::after{
  content:'→';position:absolute;top:8px;right:8px;width:22px;height:22px;z-index:2;border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);border:1px solid var(--border-strong);color:var(--primary);
  font-family:'Pretendard',sans-serif;font-size:12px;line-height:1;
  opacity:.6;transition:opacity .12s linear,background .12s linear,color .12s linear,border-color .12s linear;
}
.artwork-card:hover::after{opacity:1;background:var(--primary);color:var(--bg);border-color:var(--primary);}
.artwork-card-img{width:100%;aspect-ratio:1;display:block;object-fit:cover;background:var(--bg);border-bottom:none;}
.artwork-card .info{padding:14px 16px;}
.artwork-card .art-title{
  font-family:'Pretendard',sans-serif;font-weight:700;font-size:14px;margin-bottom:8px;color:var(--primary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.artwork-card .art-byline{display:flex;align-items:center;gap:8px;}
.artwork-card .art-byline-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--border);flex-shrink:0;}
.artwork-card .art-byline-avatar-fallback{
  display:flex;align-items:center;justify-content:center;background:var(--primary);color:var(--bg);
  font-family:'Pretendard',sans-serif;font-size:11px;font-weight:700;
}
.artwork-card .art-byline-name{
  font-family:'Pretendard',sans-serif;font-size:12px;font-weight:600;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.artwork-card .art-date{font-family:'Pretendard',sans-serif;font-size:11px;color:var(--muted);margin-top:6px;opacity:.75;}
@media (max-width:900px){ .artworks-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:640px){ .artworks-grid{grid-template-columns:repeat(2,1fr);padding-left:16px;padding-right:16px;padding-bottom:56px;} }

/* ---------- landing: latest collections ---------- */
/* Reuses .artwork-card/.artworks-grid — same card shell, minus the cover
   photo a brand-new collection may not have yet. */
.collection-card-img-empty{position:relative;}
.collection-card-img-empty::after{
  content:'🖼';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;opacity:.2;
}

#new-project-dialog{width:380px;max-width:calc(100vw - 40px);padding:26px;}
#new-project-dialog h3{font-family:'Pretendard',sans-serif;font-size:18px;font-weight:700;margin:0 0 10px;color:var(--primary);}

/* ---------- campaigns page on a phone (2026-09-14) ----------
   .snap-panel is a screen tall so the two sections snap like slides. That
   works on a desktop, where the carousel card fills most of the screen. On a
   phone the card is clamped to 42vh, so the panel was more than half empty
   and "전체 캠페인" sat a full swipe below the fold for no reason.
   Here the sections are as tall as what is in them. The chevron goes too:
   it pointed at something that is now directly underneath. */
@media (max-width:640px){
  #currentProjectsPanel,#projectsPanel{min-height:0;}
  .scroll-hint{display:none;}
}