/* ============================================================
   shoppick / styles-upgrade.css
   "다크 시네마 캐스팅 에이전시" mood upgrade — loaded AFTER styles.css.
   Palette: Rosy Brown #C9847A + Dim Gray #4A5568 + Black.

   Strategy: styles.css is left untouched. This file re-skins the
   whole site by overriding the same CSS custom properties declared
   in styles.css :root (later same-specificity :root rules win the
   cascade), then patches the handful of spots in styles.css that
   hardcode a light-mode color instead of using a token — those are
   the "다크 전환 사각지대" (dark-mode blind spots) that a pure
   token override can't reach.
============================================================ */

:root {
  /* ---- Core surfaces: black / near-black cinema canvas ---- */
  --ink:        #F2EAE7;  /* body/heading text — now light-on-dark */
  --canvas:     #14161A;  /* page background — near black */
  --muted:      #A9ADB4;  /* secondary text (dim-gray family), ~7:1 on --card */
  --border:     rgba(255,255,255,.09);
  --card:       #1D2025;  /* elevated card surface */
  --bg-subtle:  #101114;  /* recessed / alternating section bg */
  --void:       #0A0B0D;  /* deepest black — footer/CTA/recruit explicit bg */

  /* ---- Rosy Brown accent family, re-tuned for dark-bg contrast ----
     --rose (#C9847A, the literal brand hex) reads great as TEXT/ICON
     on a near-black background (~6:1) but FAILS as a solid button
     background with white text (~2.97:1). So buttons/badges use the
     new --rose-deep/--rose-mid pair instead (both ≥5.5:1 vs white);
     --rose itself is reserved for text, icons, borders and tints. */
  --rose-deep:  #6B4038;  /* gradient anchor, ~8:1 vs white text */
  --rose-mid:   #8F5B4E;  /* NEW — gradient/solid-bg partner, ~5.5:1 vs white text */
  --rose:       #C9847A;  /* brand Rosy Brown — text/icon/border accent only */
  --rose-mauve: #D9A399;  /* secondary tint / large-text gradient mid */
  --rose-warm:  #E8C0B4;  /* tertiary — large-text / gradient end only */

  /* Functional accents (verified/success + warning) kept as-is —
     they already meet their documented contrast ratios regardless of
     page background and aren't part of the 3-color brand mandate. */

  --grad-deco:    linear-gradient(135deg, var(--rose-deep), var(--rose-mauve), var(--rose-warm));
  --grad-deco-h:  linear-gradient(135deg, #401F16, #6B4038, #8F5B4E);
  --grad-safe:    linear-gradient(135deg, var(--rose-deep), var(--rose-mid));
  --grad-safe-h:  linear-gradient(135deg, #4A2A24, #6B4038);

  --shadow-sm:  0 1px 3px rgba(0,0,0,.35);
  --shadow-md:  0 6px 20px rgba(0,0,0,.45);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.55);
}

/* ============================================================
   BODY — subtle cinematic vignette (decorative, doesn't touch text)
============================================================ */
body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(201,132,122,.07), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(74,85,104,.12), transparent 60%),
    var(--canvas);
}

/* ============================================================
   BLIND-SPOT FIXES
   Hardcoded (non-token) light-mode colors in styles.css that would
   otherwise leave a stray light element on the new dark canvas.
============================================================ */
#main-nav { background: rgba(10,11,13,.82); }
#main-nav.scrolled { border-bottom-color: var(--border); box-shadow: 0 2px 20px rgba(0,0,0,.5); }

.eyebrow-chip { background: rgba(255,255,255,.05); border-color: var(--border); color: var(--muted); }

/* .filter-btn.active used solid var(--rose) + white text (~2.97:1,
   fails AA) — switch to the safe gradient used everywhere else. */
.filter-btn.active { background: var(--grad-safe); color: #fff; border-color: transparent; }

/* Give the "진행 가능 모델" chip its own Dim Gray identity instead of
   riding on --rose (which is now reserved for warm accents). */
.badge-model { background: rgba(74,85,104,.28); color: #CBD3DC; }

/* These three sections already used var(--ink) as an explicit dark
   background (their text is hardcoded #fff, not var-based) — now
   that --ink is light, pin their background to --void directly. */
footer, .cta-section, .recruit-card { background: var(--void); }

/* Site-wide notice popup (.rp-popup-*) hardcodes a white card and
   partly relies on var(--ink)/var(--muted) for text — re-skin it
   fully dark so it doesn't flash a stray light card mid-dark-site. */
.rp-popup-card { background: var(--card); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.rp-popup-title { color: var(--ink); }
.rp-popup-body { color: #C9C2BC; }
.rp-popup-footer { border-top-color: var(--border); }
.rp-popup-btn { color: var(--muted); }
.rp-popup-btn:hover { color: var(--ink); background: rgba(255,255,255,.08); }
.rp-popup-x { background: rgba(255,255,255,.08); color: var(--muted); }
.rp-popup-x:hover { background: rgba(255,255,255,.16); }
.rp-popup-dot { color: rgba(255,255,255,.25); }

/* The inquiry modal (#inquiryModal) is intentionally left as a light
   "paper form" overlay — its styles are self-contained hardcoded hex
   (not tokens), so it already reads fine and isn't a contrast bug. */

/* Mobile nav dropdown background is injected inline by app.js
   (navHamburger → openMenu()); see app.js for the matching dark-mode
   fix (was a hardcoded light canvas hex, now a dark one). */

/* ============================================================
   HERO — dark cinema casting mood
============================================================ */
.hero--cinema { background: var(--canvas); }
.hero--cinema .hero-mesh { opacity: .9; }

.eyebrow-chip--cast {
  background: rgba(201,132,122,.12);
  border-color: rgba(201,132,122,.32);
  color: var(--rose-mauve);
}

/* ============================================================
   SHOWREEL STRIP — horizontal marquee of sample shoot concepts
============================================================ */
.showreel-strip {
  background: var(--void);
  border-top: 1px solid rgba(74,85,104,.35);
  border-bottom: 1px solid rgba(74,85,104,.35);
  overflow: hidden;
  padding: 18px 0;
}
.showreel-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: showreelScroll 34s linear infinite;
}
.showreel-strip:hover .showreel-track { animation-play-state: paused; }
.showreel-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
  padding: 12px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(201,132,122,.10), rgba(74,85,104,.16));
  border: 1px solid var(--border);
}
.sr-cat   { font-size: .78rem; font-weight: 700; color: var(--rose-mauve); }
.sr-store { font-size: .72rem; color: var(--muted); }
@keyframes showreelScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   FLOATING CTA — persistent bottom-right inquiry pill
============================================================ */
.floating-cta {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 20px 14px 16px;
  border-radius: 999px;
  background: var(--grad-safe); color: #fff;
  font-size: .88rem; font-weight: 700;
  box-shadow: 0 10px 32px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(12px) scale(.96);
  pointer-events: none;
  transition: opacity .3s, transform .3s, box-shadow .2s, background .2s;
}
.floating-cta.show { opacity: 1; transform: none; pointer-events: auto; }
.floating-cta:hover { background: var(--grad-safe-h); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.floating-cta:focus-visible { outline: 3px solid var(--rose); outline-offset: 3px; }
.fc-icon { display: flex; }
@media (max-width: 640px) {
  .floating-cta { right: 14px; bottom: 14px; padding: 12px 16px; }
  .fc-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showreel-track { animation: none; }
}

/* ============================================================
   HERO ROLLING BACKGROUND CAROUSEL (5-image crossfade, 5s)
   Full-bleed cover images behind the hero, with a dim scrim so
   the headline + casting board stay readable.
============================================================ */
.hero-bg-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bg-slide {
  position: absolute;
  inset: 0;
  background-size: cover;      /* fill the whole hero, crop overflow */
  background-position: center 22%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.06);      /* subtle ken-burns */
  transition: opacity 1.2s ease, transform 6s ease;
  will-change: opacity, transform;
  filter: brightness(.4) saturate(.85) contrast(.98);  /* dim the photo so it reads as a background */
}

.hero-bg-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Dim overlay: heavier on the left (behind the headline), lighter on the
   right so the photos read; fades to page background at the bottom. */
.hero-bg-scrim {
  position: absolute;
  inset: 0;
  background:
    /* flat darken across the whole hero */
    linear-gradient(rgba(5,5,6,.64), rgba(5,5,6,.64)),
    /* both edges darker (vignette), center a touch more visible */
    linear-gradient(90deg,
      rgba(5,5,6,.99) 0%,
      rgba(5,5,6,.90) 14%,
      rgba(5,5,6,.66) 42%,
      rgba(5,5,6,.66) 58%,
      rgba(5,5,6,.90) 86%,
      rgba(5,5,6,.99) 100%),
    /* fade to page background at the bottom */
    linear-gradient(to bottom,
      rgba(5,5,6,.45) 0%,
      rgba(5,5,6,.30) 40%,
      var(--night) 96%);
}

/* 밝은 사진 프레임에서 헤드라인 분리력 확보 — 색·그라데이션은 유지하고
   어두운 헤일로만 추가. 그라데이션 글자(background-clip:text)는 text-shadow가 글립 위로
   비쳐 보이는 아티팩트가 있어 filter: drop-shadow 로 처리. */
.hero--cinema .hero-h1 { text-shadow: 0 1px 12px rgba(5,5,6,.45); }
.hero--cinema .hero-h1 .grad-text { text-shadow: none; filter: drop-shadow(0 1px 10px rgba(5,5,6,.55)); }

/* Keep the decorative mesh/lights and content above the photos */
.hero--cinema > .hero-mesh,
.hero--cinema > .hero-light,
.hero--cinema > .hero-noise { z-index: 1; }
.hero--cinema > .hero-grid { position: relative; z-index: 2; }

@media (max-width: 900px) {
  /* On stacked mobile layout the headline sits over the photo — darken a bit more */
  .hero-bg-scrim {
    background:
      linear-gradient(rgba(5,5,6,.55), rgba(5,5,6,.55)),
      linear-gradient(180deg, rgba(5,5,6,.86) 0%, rgba(5,5,6,.72) 40%, rgba(5,5,6,.86) 100%),
      linear-gradient(to bottom, rgba(5,5,6,.3), var(--night) 98%);
  }
  .hero-bg-slide { background-position: center 30%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Hold on the first image, no crossfade/zoom */
  .hero-bg-slide { transition: none; transform: none; }
}

/* ============================================================
   CREATOR CAROUSEL — 3-row fixed grid + arrow-paged horizontal scroll
   Overrides .creator-grid from styles.css (vertical, endlessly-tall 2-col
   grid) with a column-flow grid capped at 3 rows: cards fill top-to-bottom,
   then wrap into a new column to the right instead of growing the page
   taller. The grid itself is the only horizontally-scrollable element on
   the page (scroll-snap + arrow nav, wired up in app.js's creatorCarousel())
   — the page body never scrolls sideways. Card design is untouched; only
   how cards flow/page changes. See index.html's #creatorCarousel wrapper
   (arrow buttons either side of #creatorGrid).
============================================================ */
.creator-carousel { position: relative; }

.creator-grid {
  display: grid;
  grid-auto-flow: column;
  /* ★must clear styles.css's `grid-template-columns: repeat(2,1fr)` (and its
     1fr media-query variants) — leaving it in place makes the first 2 columns
     use the old fractional widths (squished cards) while only overflow columns
     get grid-auto-columns, producing inconsistent column widths. */
  grid-template-columns: none;
  grid-template-rows: repeat(3, auto);
  /* Fixed column width — keeps every card the same size. Must NOT be a % in a
     column-flow overflow grid (%% resolves against the scrollable content width,
     not the viewport, which makes columns inconsistent + squishes card content).
     540px ≈ the old 2-col card width → ~2 columns x 3 rows = 6 cards per screen. */
  grid-auto-columns: min(540px, 86vw);
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden; /* only this element scrolls — never the page body */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding: 6px 2px 12px; /* room for the card hover lift (translateY) + scrollbar strip */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rose-deep) transparent;
}
.creator-grid::-webkit-scrollbar { height: 8px; }
.creator-grid::-webkit-scrollbar-thumb { background: var(--rose-deep); border-radius: 8px; }
.creator-grid::-webkit-scrollbar-track { background: transparent; }
.creator-grid > .creator-card { scroll-snap-align: start; width: 100%; min-width: 0; }

/* Arrow nav — visibility/enabled state is driven by JS (creatorCarousel()
   in app.js): hidden entirely when every card already fits on screen, and
   disabled at whichever end (start/end) is currently reached. */
.creator-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 6;
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-safe); border: none;
  color: #fff;
  /* Dark ring separates the button from cards it overlaps + strong shadow */
  box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 0 5px rgba(9,11,16,.72);
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease, box-shadow .2s ease;
}
.creator-arrow svg { width: 22px; height: 22px; }
.creator-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.09); box-shadow: 0 14px 34px rgba(201,132,122,.5), 0 0 0 5px rgba(9,11,16,.72); }
.creator-arrow:active:not(:disabled) { transform: translateY(-50%) scale(.96); }
.creator-arrow:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.creator-arrow:disabled,
.creator-arrow.is-hidden { opacity: 0; pointer-events: none; }
/* Slight overlap of the card edges so they read as floating carousel controls */
.creator-arrow-prev { left: -8px; }
.creator-arrow-next { right: -8px; }

@media (max-width: 900px) {
  /* Tablet/mobile: card width already collapses to 86vw (~1 card per page) via
     the min(540px, 86vw) rule — one column x 3 rows, paged sideways (swipe +
     arrows) instead of stacking endlessly downward. Arrows pulled inward so
     they never sit outside the container padding (which would widen the page
     and cause body-level horizontal scroll). */
  .creator-arrow-prev { left: 2px; }
  .creator-arrow-next { right: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .creator-grid { scroll-behavior: auto; }
}

/* ============================================================
   PROGRAM MODEL CARDS — align the inner horizontal lines across
   the 3 cards (셀프/동행/섭외). The description length differs per
   card, so the top `.model-divider` and the `.model-note` top
   border used to sit at different heights. Make each card a flex
   column, give the description a min-height so the TOP divider
   lines up, and pin the price-pill + note group to the bottom with
   an equal-height note so the BOTTOM note-line lines up too.
============================================================ */
.model-card { display: flex; flex-direction: column; }
.model-desc { min-height: 3.3em; }              /* ~2 lines → top divider aligns */
.model-price-pill { margin-top: auto; align-self: flex-start; } /* push pill+note to bottom */
.model-note { min-height: 5em; }                /* reserve equal space → note-line aligns */

/* ============================================================
   크리에이터 카드 3단계 — 모집중 슬롯 / 승인 대기중 / 정식

   가상 크리에이터 8명을 걷어내면서, 목록이 비어도 화면이 죽지 않도록
   같은 자리를 채우는 두 종류의 카드를 추가했다(app.js renderCreators):
     .cc-slot     지원자 0명일 때 까는 "빈 자리" 카드 — 사람을 주장하지 않는다.
     .cc-pending  실제 지원자(승인 전) — 익명. 사진·이름·팔로워는 백엔드가
                  아예 안 보내므로(sanitizePendingCreator) 그릴 것이 없다.
   둘 다 사진 대신 .cc-avi-art (id 해시로 결정된 브랜드 그라데이션 + 기하 도형)를 쓴다.
   규격은 기존 사진 아바타(.cc-avi 148x148/radius 16)와 동일해 그리드 정렬이 안 깨진다.
============================================================ */

/* --- 디자인 아바타 (사진 자리를 대신하는 그라데이션 + 기하 도형) --- */
.cc-avi-art {
  width: 148px; height: 148px; border-radius: 16px;
  border: 2px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
  display: block;
  padding: 0;
}
.cc-avi-art svg { width: 100%; height: 100%; display: block; }
.cc-avi-dim { opacity: .55; }                     /* 슬롯은 한 톤 죽여 정식 카드와 위계 구분 */

/* --- 공통: 대기중/슬롯 카드는 클릭 대상이 아니다(상세 모달 없음) --- */
.cc-pending, .cc-slot { cursor: default; }
.cc-pending:hover, .cc-slot:hover { transform: none; }   /* 정식 카드의 hover lift 상쇄 */
.cc-name-muted { color: var(--muted); }

/* --- 2) 승인 대기중 (실제 지원자, 익명) --- */
.cc-pending {
  border-style: solid;
  background: linear-gradient(180deg, rgba(201,132,122,.05), transparent 60%);
}
.cc-wait-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem; font-weight: 600;
  color: var(--rose);
  background: rgba(201,132,122,.10);
  border: 1px solid rgba(201,132,122,.28);
}
/* 심사가 "진행 중"임을 보여주는 맥박. 접근성: prefers-reduced-motion 이면 정지. */
.cc-wait-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rose);
  animation: ccWaitPulse 1.8s ease-in-out infinite;
}
@keyframes ccWaitPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.78); }
}
/* 아바타 위에 얹는 대기 표식 — 정식 카드의 .cc-verified(체크) 자리와 같은 위치라
   "승인되면 체크로 바뀐다"는 시각적 약속이 성립한다. */
.cc-wait-dot {
  position: absolute; bottom: -4px; right: -4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--card);
  border: 2px solid rgba(201,132,122,.5);
  box-shadow: inset 0 0 0 3px var(--rose);
}
.cc-wait-note { font-size: .82rem; color: var(--muted); }

/* --- 3) 모집중 슬롯 (사람이 아닌 빈 자리) --- */
.cc-slot {
  border: 1.5px dashed var(--border);            /* 점선 = "아직 채워지지 않은 자리" */
  background: transparent;
}
.cc-slot:hover { border-color: var(--rose); }
.cc-slot-badge {
  display: inline-block;
  margin-top: 10px; padding: 4px 10px;
  border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  color: var(--sage-deep, #5C6E4E);
  background: rgba(92,110,78,.12);
  border: 1px solid rgba(92,110,78,.3);
}
.pill-ghost {
  color: var(--muted);
  background: transparent;
  border: 1px dashed var(--border);
}

@media (prefers-reduced-motion: reduce) {
  .cc-wait-pulse { animation: none; }
}