.creator-screen { background: var(--color-black); min-height: 780px; }

/* White rounded "more" button with horizontal dots (Figma app bar) */
.kebab-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 10px;
  width: 41.5px;
  height: 27.5px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.kebab-btn img { width: 3.5px; height: 17.5px; transform: rotate(90deg); display: block; filter: brightness(0) invert(1); }

.creator-hero {
  position: relative;
  height: 231px;
  border-radius: 0 0 40px 40px;
  overflow: hidden;
}
/* The hero photo lives in its own layer so it can be heavily blurred (Figma 올릴때).
   Bleed + scale hide the soft blurred edges; the tan ::after tints it; the profile
   avatar sits above both (z-index 2) so it stays sharp. */
.creator-hero-bg {
  position: absolute;
  inset: -30px;
  background-size: cover;
  background-position: center 20%;
  filter: blur(22px);
  transform: scale(1.06);
}
.creator-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(120,105,72,0.5) 0%, rgba(168,147,101,0.56) 55%, rgba(214,188,138,0.72) 100%);
  pointer-events: none;
}
.creator-profile {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 43px;
}
.creator-profile img.avatar {
  width: 101px; height: 101px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
}
.creator-profile .sub {
  margin: 0;
  color: #fff;
  font-family: var(--font-supreme);
  font-size: 14px;
  letter-spacing: -0.42px;
  text-align: center;
}
.tag-pill {
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-family: var(--font-supreme-bold);
  font-size: 15px;
  letter-spacing: -0.5px;
}
.creator-nav-indicator {
  position: absolute;
  bottom: 0; left: 0;
  width: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  z-index: 20;
  pointer-events: none;
}
.creator-nav-indicator span { width: 144px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.6); mix-blend-mode: plus-lighter; }

.creator-content { padding: 20px 16px 56px; display: flex; flex-direction: column; gap: 48px; }
.creator-content .top-row { display: flex; align-items: center; justify-content: space-between; }
.creator-content .top-actions { display: flex; align-items: center; gap: 8px; }
.creator-content .top-actions .save-icon { width: 36px; height: 36px; display: block; }
.creator-content .top-actions .icon-circle {
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(243,243,243,0.2);
  display: flex; align-items: center; justify-content: center;
}
.creator-content .top-actions .icon-circle img { width: 14px; height: 14px; }

/* The sheet runs on a 48px rhythm, but Figma pulls the chip and the title together at
   24px — they read as one block, not two sections. */
.creator-heading { color: #fff; margin-top: -24px; }
.creator-heading .title { margin: 0 0 8px; font-family: var(--font-supreme-bold); font-size: 26px; line-height: 1.2; letter-spacing: -1.5px; }
.creator-heading .desc { margin: 0; font-family: var(--font-supreme); font-size: 15px; line-height: 1.4; letter-spacing: -0.5px; opacity: 0.7; }

.stats-row {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
}
/* Every cell is a full-height column with its label pinned to the top, so Sport, Joined
   and Recommended line up regardless of how many values sit under them. The values then
   take the auto margins above and below, which centres them in what is left — Running and
   877 land on the middle of the two-line Pace On / Boost On block. */
.stats-row .stat { flex: 1; text-align: center; color: #fff; display: flex; flex-direction: column; }
/* .label + .value, not :first-of-type — the label is a <p> too, so :first-of-type never
   matched a value and only the bottom margin was doing anything. */
.stats-row .stat .label + .value { margin-top: auto; }
.stats-row .stat .value:last-child { margin-bottom: auto; }
.stats-row .stat p { margin: 0; }
.stats-row .stat .label { font-family: var(--font-supreme); font-size: 13px; opacity: 0.7; letter-spacing: -0.5px; margin-bottom: 6px; }
.stats-row .stat .value { font-family: var(--font-supreme-bold); font-size: 18px; letter-spacing: -0.54px; }
/* Packs that recommend more than one mode stack them rather than running them into
   one line — the cell is a column, not a sentence. */
.stats-row .stat .value + .value { margin-top: 2px; }
/* Stretched to the row instead of a fixed 33px: with a two-line Recommended cell a short
   bar floats in the middle of the row and stops reading as a separator. The row's own
   vertical spacing is untouched — the bar grows into space the cells already occupy. */
.stats-row .divider { width: 1px; align-self: stretch; background: rgba(255,255,255,0.3); }

.process-title { margin: 0 0 8px; color: var(--color-neutral-50); }
/* Staircase bar chart: 18min nested top-left, bars widen top→bottom,
   RUN full width at the bottom (matches Figma 올릴때 process graph) */
.process-graph {
  position: relative;
  background: var(--color-neutral-900);   /* #141A1A — distinct from page #050A0A */
  border-radius: 20px;
  padding: 4px;
  height: 168px;
  box-sizing: border-box;
}
.process-graph .big-number {
  position: absolute;
  left: 14px;
  top: 8px;
  z-index: 2;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.process-graph .big-number .num { font-family: var(--font-offbit); font-weight: 700; font-size: 60px; line-height: 0.95; letter-spacing: 0; }
.process-graph .big-number .unit { font-family: var(--font-supreme-bold); font-size: 18px; opacity: 0.6; letter-spacing: -0.54px; margin-top: 13px; }
/* 2px between bars, per Figma. Nothing else moves: the bars are flex:1 in a
   height:100% column, so the 4px the gaps give back is shared out among them. */
.process-graph .bars { display: flex; flex-direction: column; gap: 2px; height: 100%; }
.process-graph .bar {
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  color: #fff;
  font-family: var(--font-supreme);
  font-size: 15px;
  letter-spacing: -0.5px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
}
.process-graph .bar .label { font-family: var(--font-supreme-bold); font-size: 13px; opacity: 0.75; }
/* Bars are RIGHT-aligned. --start is the narrow width that shows only the left
   number (8min / 10min / You Can Choose); the right label (STRETCH / LEARN / RUN)
   is hidden. On first entry each bar EXPANDS LEFTWARD to full and the label fades
   in, staggered top→bottom. */
.bar-stretch { flex: 1; width: 54%;  margin-left: auto; --start: 26%; background: linear-gradient(270deg, #D1FEFF 0%, #FEC389 6.5%, #FE6E3C 16.8%, #FA3030 41.7%); }
.bar-learn   { flex: 1; width: 67%;  margin-left: auto; --start: 28%; background: linear-gradient(90deg, #FA3030 58.3%, #FE6E3C 83%, #FEC389 93.5%, #D1FEFF 100%); }
.bar-run     { flex: 1; width: 100%; margin-left: auto; --start: 47%; background: var(--color-neutral-700); }
/* 20 outside / 18 where a bar sits in a corner of the graph area / 12 everywhere else.
   A bar in a corner has to follow the card's curve or the two arcs fight; a 12 inside a
   20 leaves the bar looking squarer than the box it is in, which is what read as wrong.
   Only the corners that actually meet one: the bars are right-aligned, so STRETCH owns
   the top right and RUN — the only full-width bar — owns both bottom corners. LEARN
   touches no corner and stays 12 all round.
   Scoped to .process-graph so these outrank the blanket `.process-graph .bar` above —
   a bare .bar-run loses to it and the corners stayed at 12. */
.process-graph .bar-stretch { border-top-right-radius: 18px; }
.process-graph .bar-run { border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }

/* Resting state until the card is actually looked at (assets/process.js adds .animate
   when it scrolls into view). --start is the stub width: narrow, but wide enough to
   carry its own minute count, so 8min is readable at the shortest instant. The right
   label lands only once that bar has finished growing. */
.process-graph:not(.animate) .bar { width: var(--start); }
.process-graph:not(.animate) .bar .label { opacity: 0; }
.process-graph:not(.animate) .big-number .num { visibility: hidden; }
.process-graph.animate .bar        { animation: bar-grow .62s cubic-bezier(.2,.8,.25,1) both; }
.process-graph.animate .bar .label { animation: label-in .3s ease both; animation-delay: .66s; }
.process-graph.animate .bar-learn        { animation-delay: .12s; }
.process-graph.animate .bar-learn .label { animation-delay: .78s; }
.process-graph.animate .bar-run          { animation-delay: .24s; }
.process-graph.animate .bar-run .label   { animation-delay: .9s; }
@keyframes bar-grow  { from { width: var(--start); } }
@keyframes label-in  { from { opacity: 0; transform: translateX(10px); } }

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.info-grid .cell {
  background: var(--color-neutral-900);
  border-radius: 20px;
  padding: 12px;
  color: #fff;
}
.info-grid .cell .label { margin: 0 0 4px; font-family: var(--font-supreme); font-size: 13px; color: var(--color-neutral-500); }
.info-grid .cell .value { margin: 0; font-family: var(--font-supreme-bold); font-size: 18px; letter-spacing: -0.54px; }

.also-like-list { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.also-like-list::-webkit-scrollbar { display: none; }
.also-like-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-neutral-900);
  border-radius: 12px;
  padding: 8px 32px 8px 8px;
  text-decoration: none;
  flex: 0 0 auto;
}
.also-like-item img { width: 48px; height: 48px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.also-like-item .txt p { margin: 0; color: #fff; }
.also-like-item .txt .meta { display: flex; align-items: center; gap: 4px; color: var(--color-neutral-400); font-family: var(--font-supreme); font-size: 13px; margin-top: 4px; }
.also-like-item .txt .meta .sep { width: 3px; height: 3px; }

/* First card aligns to the 16px content margin (left); the list bleeds to the
   screen's right edge with a 16px trailing gap, so the last card scrolls fully
   into view instead of being clipped at the right margin. */
.more-scroll { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 0 0; padding: 0 16px 0 0; scroll-snap-type: x proximity; }
.more-scroll::-webkit-scrollbar { display: none; }
.more-card { flex: 0 0 140px; text-decoration: none; scroll-snap-align: start; scroll-snap-stop: always; }
.more-card img { width: 140px; height: 140px; border-radius: 16px; object-fit: cover; display: block; }
.more-card p { margin: 8px 0 0; color: #fff; line-height: 1.3; }
.more-card .meta { display: flex; align-items: center; gap: 4px; color: var(--color-neutral-400); font-family: var(--font-supreme); font-size: 13px; margin-top: 4px; }
.more-card .meta .sep { width: 4px; height: 4px; }

/* Full-width centered CTA. Override btn-pill's width:100% so the horizontal
   margins don't push it into overflow (which read as right-aligned). */
/* Full-width centered CTA at the end of the content (matches Figma bottom-24). */
.creator-start {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}