/*
 * BapStage application stylesheet.
 * GENERATED by scripts/build_css.py — edit styles/components/*.css.
 * Cascade order is declared in styles/manifest.json.
 */

/* ===== styles.css#suit-regular ===== */
@font-face {
  font-family: "SUIT";
  src: url("./assets/fonts/SUIT-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ===== welcome-launch-redesign-v174.css ===== */
/* Keep the in-app welcome route visually identical to the instant launch cover. */
html body #app#app#app#app .table-welcome,
html body #app#app#app#app .table-welcome * {
  box-sizing: border-box;
  font-family: "Bap Welcome Body", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-synthesis: none !important;
}

html body #app#app .table-welcome-shell {
  --welcome-ink-v174: #3d2116;
  --welcome-title-coral-v174: #d85a46;
  --welcome-coral-v174: #e76f59;
  --welcome-top-pad-v174: max(clamp(40px, 11.87vw, 80px), calc(env(safe-area-inset-top) + 18px));
  --welcome-bottom-pad-v174: max(clamp(10px, 2.97vw, 20px), calc(env(safe-area-inset-bottom) + 8px));
  width: 100% !important;
  max-width: none !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  overflow: auto !important;
  padding: var(--welcome-top-pad-v174) 12px var(--welcome-bottom-pad-v174) !important;
  color: var(--welcome-ink-v174) !important;
  background:
    radial-gradient(circle at 5% 18%, rgba(185, 214, 168, .45) 0 7%, transparent 22%),
    radial-gradient(circle at 96% 84%, rgba(231, 111, 89, .14) 0 7%, transparent 22%),
    radial-gradient(circle at 46% 3%, rgba(247, 210, 103, .28), transparent 34%),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp?v=20260807-welcome-redesign-v174") center / cover no-repeat,
    #fff9eb !important;
}

html body #app#app .table-welcome-shell::before,
html body #app#app .table-welcome-shell::after {
  content: none !important;
}

html body #app#app .table-welcome {
  position: relative !important;
  width: min(630px, calc(100vw - 24px), calc((100svh - var(--welcome-top-pad-v174) - var(--welcome-bottom-pad-v174)) * .5032)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  aspect-ratio: 630 / 1252 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: clamp(54px, 16.62vw, 112px) 6.67% clamp(40px, 12.61vw, 85px) !important;
  overflow: visible !important;
  border: 2px dashed rgba(95, 66, 45, .24) !important;
  border-radius: clamp(22px, 6.53vw, 44px) !important;
  background: rgba(255, 252, 242, .97) !important;
  box-shadow: 0 18px 46px rgba(76, 49, 29, .08) !important;
  text-align: center !important;
  backdrop-filter: none !important;
}

html body #app#app .table-welcome-header {
  width: 100% !important;
  display: block !important;
}

html body #app#app .table-welcome-kicker {
  display: block !important;
  margin: 0 !important;
  color: var(--welcome-title-coral-v174) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(10px, 3.12vw, 21px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
}

html body #app#app .table-welcome-rule {
  position: relative !important;
  width: 100% !important;
  height: 1px !important;
  display: block !important;
  margin-top: clamp(11px, 3.42vw, 23px) !important;
  background: rgba(61, 33, 22, .18) !important;
}

html body #app#app .table-welcome-rule i {
  display: none !important;
}

html body #app#app .table-welcome-rule span {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: clamp(5px, 1.48vw, 10px) !important;
  height: clamp(5px, 1.48vw, 10px) !important;
  border: clamp(4px, 1.19vw, 8px) solid rgba(255, 252, 242, .97) !important;
  border-radius: 50% !important;
  background: #f6cf67 !important;
  transform: translate(-50%, -50%) !important;
}

html body #app#app .table-welcome-icon-wrap {
  position: relative !important;
  width: clamp(180px, 54.6vw, 368px) !important;
  aspect-ratio: 1 !important;
  margin: clamp(21px, 6.53vw, 44px) auto clamp(15px, 4.45vw, 30px) !important;
}

html body #app#app .table-welcome-icon-wrap::before,
html body #app#app .table-welcome-icon-wrap::after,
html body #app#app .table-welcome-sun {
  content: none !important;
  display: none !important;
}

html body #app#app .table-welcome-icon-wrap img {
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  margin: 0 !important;
  border: clamp(2px, .45vw, 3px) solid rgba(231, 111, 89, .64) !important;
  border-radius: 30% !important;
  object-fit: cover !important;
  box-shadow: 0 clamp(7px, 1.63vw, 11px) clamp(15px, 3.71vw, 25px) rgba(72, 45, 28, .13) !important;
}

html body #app#app .table-welcome-sticker {
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(-30px, -4.45vw, -17px) !important;
  bottom: clamp(5px, 1.48vw, 10px) !important;
  min-width: clamp(58px, 17.21vw, 116px) !important;
  padding: clamp(6px, 1.78vw, 12px) clamp(7px, 2.08vw, 14px) clamp(5px, 1.63vw, 11px) !important;
  border: 1px solid rgba(80, 53, 34, .2) !important;
  border-radius: 50% !important;
  color: #5f3926 !important;
  background: #f8dda0 !important;
  box-shadow: 0 7px 15px rgba(70, 43, 25, .12) !important;
  font-size: clamp(9px, 2.52vw, 17px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  transform: rotate(7deg) !important;
}

html body #app#app .table-welcome-copy {
  width: 100% !important;
}

html body #app#app .table-welcome-copy h1 {
  margin: 0 !important;
  color: var(--welcome-ink-v174) !important;
  font-family: "Bap Welcome Title", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(35px, 10.98vw, 74px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  letter-spacing: 0 !important;
}

html body #app#app .table-welcome-copy h1 span,
html body #app#app .table-welcome-copy h1 strong {
  display: block !important;
  font: inherit !important;
}

html body #app#app .table-welcome-copy h1 strong {
  margin-top: clamp(3px, .89vw, 6px) !important;
  color: var(--welcome-title-coral-v174) !important;
  font-size: .84em !important;
  line-height: 1 !important;
}

html body #app#app .table-welcome-copy p {
  margin: clamp(19px, 5.64vw, 38px) 0 0 !important;
  color: #745849 !important;
  font-size: clamp(12px, 4.45vw, 30px) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

html body #app#app .table-welcome-points {
  width: 100% !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(5px, 1.48vw, 10px) !important;
  margin-top: clamp(19px, 5.94vw, 40px) !important;
}

html body #app#app .table-welcome-points span {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(4px, 1.19vw, 8px) !important;
  padding: clamp(6px, 1.93vw, 13px) clamp(10px, 2.82vw, 19px) !important;
  border: 1px dashed rgba(81, 53, 35, .2) !important;
  border-radius: 999px !important;
  color: #5f4537 !important;
  background: rgba(255, 255, 255, .62) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(10px, 3.26vw, 22px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html body #app#app .table-welcome-points i {
  width: clamp(4px, 1.34vw, 9px) !important;
  height: clamp(4px, 1.34vw, 9px) !important;
  flex: 0 0 clamp(4px, 1.34vw, 9px) !important;
  border-radius: 50% !important;
  background: #b8d5a7 !important;
}

html body #app#app .table-welcome-points span:nth-child(2) i {
  background: #e76f59 !important;
}

html body #app#app .table-welcome-points span:nth-child(3) i {
  background: #8ebed1 !important;
}

html body #app#app .table-welcome-start {
  width: 100% !important;
  min-height: clamp(58px, 17.36vw, 117px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin-top: clamp(21px, 6.53vw, 44px) !important;
  padding: clamp(9px, 2.67vw, 18px) clamp(12px, 3.56vw, 24px) clamp(8px, 2.52vw, 17px) clamp(16px, 5.04vw, 34px) !important;
  border: 0 !important;
  border-radius: clamp(16px, 4.75vw, 32px) !important;
  color: #fffdf5 !important;
  background: var(--welcome-coral-v174) !important;
  box-shadow: 0 8px 0 rgba(190, 76, 59, .12), 0 13px 22px rgba(165, 73, 55, .14) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  text-align: left !important;
}

html body #app#app .table-welcome-start span {
  display: grid !important;
  gap: clamp(3px, .59vw, 4px) !important;
  font-size: clamp(18px, 5.34vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

html body #app#app .table-welcome-start small {
  color: rgba(255, 255, 255, .76) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(8px, 2.23vw, 15px) !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .1em !important;
}

html body #app#app .table-welcome-start b {
  width: clamp(32px, 9.5vw, 64px) !important;
  height: clamp(32px, 9.5vw, 64px) !important;
  display: grid !important;
  flex: 0 0 clamp(32px, 9.5vw, 64px) !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: inherit !important;
  background: rgba(255, 255, 255, .2) !important;
  font-family: sans-serif !important;
  font-size: clamp(17px, 5.04vw, 34px) !important;
  font-weight: 400 !important;
}

html body #app#app .table-welcome-footer {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: clamp(5px, 1.48vw, 10px) !important;
  margin-top: clamp(16px, 5.04vw, 34px) !important;
  padding-top: clamp(10px, 3.41vw, 23px) !important;
  border-top: 1px solid rgba(85, 57, 40, .28) !important;
  color: rgba(85, 57, 40, .52) !important;
}

html body #app#app .table-welcome-footer > span {
  display: none !important;
}

html body #app#app .table-welcome-footer p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(6px, 1.78vw, 12px) !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
}

html body #app#app .table-welcome-stitch {
  position: absolute !important;
  color: rgba(103, 159, 183, .56) !important;
  font-family: sans-serif !important;
  font-size: clamp(14px, 4.15vw, 28px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  pointer-events: none !important;
}

html body #app#app .table-welcome-stitch-left {
  top: 23.2% !important;
  left: 4.8% !important;
  transform: rotate(-12deg) !important;
}

html body #app#app .table-welcome-stitch-right {
  top: 10.7% !important;
  right: 5.1% !important;
  color: rgba(231, 111, 89, .42) !important;
  transform: rotate(10deg) !important;
}

html body #app#app#app#app#app .table-welcome-kicker,
html body #app#app#app#app#app .table-welcome-points span,
html body #app#app#app#app#app .table-welcome-start,
html body #app#app#app#app#app .table-welcome-start span,
html body #app#app#app#app#app .table-welcome-start small,
html body #app#app#app#app#app .table-welcome-footer p {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
}

html body #app#app#app#app#app .table-welcome-copy h1,
html body #app#app#app#app#app .table-welcome-copy h1 span,
html body #app#app#app#app#app .table-welcome-copy h1 strong {
  font-family: "Bap Welcome Title", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif !important;
}

html body #app#app#app#app#app .table-welcome-start b,
html body #app#app#app#app#app .table-welcome-stitch {
  font-family: sans-serif !important;
}

@media (max-height: 760px) and (min-width: 600px) {
  html body #app#app .table-welcome {
    width: min(100%, 430px) !important;
    height: min(576px, calc(100dvh - 72px)) !important;
    aspect-ratio: auto !important;
    padding: 22px 24px !important;
    border-width: 1.5px !important;
    border-radius: 32px !important;
  }

  html body #app#app .table-welcome-kicker { font-size: 12px !important; }
  html body #app#app .table-welcome-rule { margin-top: 13px !important; }
  html body #app#app .table-welcome-icon-wrap { width: 198px !important; margin: 16px auto 12px !important; }
  html body #app#app .table-welcome-sticker { right: -17px !important; bottom: 6px !important; min-width: 70px !important; padding: 8px 9px 7px !important; font-size: 11px !important; }
  html body #app#app .table-welcome-copy h1 { font-size: 40px !important; line-height: .94 !important; }
  html body #app#app .table-welcome-copy h1 strong { margin-top: 5px !important; font-size: inherit !important; line-height: inherit !important; }
  html body #app#app .table-welcome-copy p { margin-top: 12px !important; font-size: 13px !important; }
  html body #app#app .table-welcome-points { gap: 6px !important; margin-top: 13px !important; }
  html body #app#app .table-welcome-points span { gap: 6px !important; padding: 7px 10px !important; font-size: 12px !important; }
  html body #app#app .table-welcome-start { min-height: 60px !important; margin-top: 15px !important; padding: 11px 15px 10px 19px !important; border-radius: 21px !important; }
  html body #app#app .table-welcome-start span { font-size: 19px !important; }
  html body #app#app .table-welcome-start small { font-size: 9px !important; }
  html body #app#app .table-welcome-start b { width: 38px !important; height: 38px !important; flex-basis: 38px !important; font-size: 22px !important; }
  html body #app#app .table-welcome-footer { margin-top: 15px !important; padding-top: 12px !important; }
  html body #app#app .table-welcome-footer p { font-size: 8px !important; }
}

@media (max-height: 520px) and (min-width: 600px),
  (max-width: 359px) and (max-height: 680px) {
  html body #app#app .table-welcome-shell {
    place-items: start center !important;
  }
}

@media (max-width: 359px) and (max-height: 680px) {
  html body #app#app .table-welcome {
    width: calc(100vw - 24px) !important;
  }
}

@media (max-height: 520px) and (min-width: 600px) {
  html body #app#app .table-welcome {
    height: 576px !important;
    flex: 0 0 auto !important;
  }
}

/* ===== styles.css#rest ===== */
@font-face {
  font-family: "SUIT";
  src: url("./assets/fonts/SUIT-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  src: url("./assets/fonts/SUIT-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "SUIT";
  src: url("./assets/fonts/SUIT-ExtraBold.woff2") format("woff2");
  font-weight: 800 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --forest-950: #39263a;
  --forest-900: #4b3150;
  --forest-800: #437a70;
  --forest-700: #27998b;
  --forest-100: #ddf7ee;
  --ink: #493145;
  --muted: #7d6b74;
  --paper: #fff6df;
  --surface: #fffdf8;
  --surface-soft: #f7eadf;
  --line: #ecd9e2;
  --sun: #ffe45f;
  --coral: #f04f7a;
  --coral-dark: #d83f67;
  --sky: #75ddef;
  --berry: #d84fa3;
  --shadow-sm: 0 8px 24px rgba(73, 49, 69, 0.08);
  --shadow-md: 0 18px 48px rgba(73, 49, 69, 0.14);
  --shadow-lg: 0 34px 90px rgba(73, 49, 69, 0.28);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  font-family: "SUIT", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  color: var(--ink);
  background: linear-gradient(145deg, #14392f 0%, #245b47 48%, #173d32 100%);
}

body {
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
  outline: 3px solid rgba(255, 200, 87, 0.72);
  outline-offset: 2px;
}

svg {
  display: block;
}

.page {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 20px;
  isolation: isolate;
}

.page::before,
.page::after {
  content: "";
  position: fixed;
  z-index: -2;
  inset: 0;
  pointer-events: none;
}

.page::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, #14392f 0%, #245b47 48%, #173d32 100%);
  background-size: 48px 48px, 48px 48px, auto;
}

.page::after {
  inset: 8% 16%;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 50%;
  transform: rotate(-8deg);
  box-shadow:
    0 0 0 70px rgba(255, 255, 255, 0.018),
    0 0 0 150px rgba(255, 255, 255, 0.012);
}

.phone {
  width: min(100%, 430px);
  height: min(872px, calc(100dvh - 40px));
  min-height: 700px;
  display: grid;
  grid-template-rows: 82px minmax(0, 1fr) 78px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px 12px;
  border-bottom: 1px solid rgba(27, 83, 65, 0.09);
  background: #f7f6f0;
}

.brand,
.row,
.section-title,
.recipe-meta,
.today,
.section-head,
.quest-meta,
.profile-title-row,
.rank-person,
.sheet-title-row,
.allergy-item,
.unlock-row {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
}

.mark {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background: var(--forest-800);
  color: #fff;
  box-shadow: 0 7px 18px rgba(27, 83, 65, 0.22);
  font-size: 15px;
  font-weight: 900;
}

.mark::after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  right: -17px;
  bottom: -17px;
  border: 6px solid var(--sun);
  border-radius: 50%;
}

.brand-copy span,
.eyebrow,
.label,
.screen-kicker {
  display: block;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

.brand h1,
h2,
h3,
p {
  margin: 0;
  letter-spacing: 0;
}

.brand h1 {
  margin-top: 3px;
  font-size: 20px;
  line-height: 1;
}

.top-actions {
  display: flex;
  gap: 8px;
}

.icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest-800);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.icon:hover {
  transform: translateY(-1px);
  border-color: #bfcfc5;
  background: #fff;
}

.content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px 30px;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.content::-webkit-scrollbar {
  display: none;
}

.screen {
  animation: screen-in 280ms cubic-bezier(.22, .76, .28, 1) both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.quest-hero {
  position: relative;
  min-height: 248px;
  overflow: hidden;
  padding: 18px;
  border-radius: 8px;
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 48%),
    var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.quest-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to left, #000, transparent 72%);
}

.quest-copy {
  position: relative;
  z-index: 2;
  width: 69%;
}

.quest-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #dff1e7;
  font-size: 11px;
  font-weight: 800;
}

.quest-hero h2 {
  margin-top: 14px;
  font-size: 29px;
  line-height: 1.08;
}

.quest-hero h3 {
  margin-top: 9px;
  color: var(--sun);
  font-size: 19px;
}

.quest-meta {
  gap: 8px;
  margin-top: 11px;
  color: #c9dacf;
  font-size: 12px;
  font-weight: 700;
}

.quest-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.quest-visual {
  position: absolute;
  z-index: 1;
  right: -7px;
  top: 27px;
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  background: #fff6dd;
  box-shadow:
    inset 0 0 0 10px rgba(255, 200, 87, 0.22),
    0 18px 38px rgba(7, 24, 19, 0.28);
}

.quest-visual::before,
.quest-visual::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.quest-visual::before {
  width: 86px;
  height: 86px;
  border: 3px solid #263832;
  background: #33483f;
  box-shadow: inset 0 0 0 8px #20312b;
}

.quest-visual::after {
  width: 42px;
  height: 42px;
  background: var(--sun);
  box-shadow: inset -6px -5px 0 rgba(255, 145, 46, 0.3);
}

.quest-emoji {
  position: relative;
  z-index: 2;
  font-size: 32px;
  opacity: 0;
}

.quest-cta {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 16px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 13px;
  background: var(--sun);
  color: #223128;
  box-shadow: 0 9px 20px rgba(5, 24, 18, 0.18);
  font-size: 14px;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.quest-cta:hover,
.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(5, 24, 18, 0.2);
}

.cta-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.42);
}

.progress-panel {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 16px;
  align-items: center;
  margin-top: 14px;
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.progress-panel h3 {
  margin-top: 5px;
  font-size: 22px;
}

.progress-panel h3 b {
  color: var(--forest-700);
  font-size: 32px;
}

.progress-track {
  height: 7px;
  overflow: hidden;
  margin-top: 13px;
  border-radius: 999px;
  background: #e7ebe6;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--coral);
}

.progress-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.progress-ring {
  --progress: 0;
  width: 82px;
  height: 82px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--forest-700) calc(var(--progress) * 1%), #e6ece7 0);
}

.progress-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #fff;
}

.progress-ring strong {
  grid-area: 1 / 1;
  position: relative;
  color: var(--forest-700);
  font-size: 18px;
}

.section-block {
  margin-top: 20px;
}

.section-head {
  justify-content: space-between;
  margin-bottom: 10px;
}

.section-head h3 {
  font-size: 16px;
}

.section-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.reward-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.reward-slot {
  min-width: 0;
  text-align: center;
}

.reward-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 1px dashed #c9d3cc;
  border-radius: 14px;
  background: #f4f6f2;
  color: #a4afa8;
  font-size: 22px;
}

.reward-slot.unlocked .reward-icon {
  border-style: solid;
  border-color: #cfe3d6;
  background: var(--forest-100);
  color: var(--forest-700);
}

.reward-slot.current .reward-icon {
  border: 2px solid var(--coral);
  background: #fff0ec;
  color: var(--coral-dark);
}

.reward-slot small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 10px;
  margin-top: 14px;
}

.quick-card {
  min-height: 128px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.quick-card.badge-card {
  background: #fff7e3;
  border-color: #f0dfb8;
}

.quick-card-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--forest-700);
}

.badge-card .quick-card-icon {
  background: #ffe7a8;
  color: #8a5d00;
}

.quick-card h3 {
  margin-top: 14px;
  font-size: 15px;
}

.quick-card p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.map-screen {
  margin: -16px -16px -30px;
}

.map-hero {
  position: sticky;
  top: -16px;
  z-index: 6;
  padding: 18px 18px 15px;
  color: #fff;
  background: var(--forest-900);
  box-shadow: 0 12px 30px rgba(15, 47, 36, 0.17);
}

.map-hero.dessert {
  background: #713047;
}

.map-hero-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.map-hero .screen-kicker {
  color: #bcd2c7;
}

.map-hero.dessert .screen-kicker {
  color: #f4cddd;
}

.map-hero h2 {
  margin-top: 4px;
  font-size: 25px;
}

.map-stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  font-weight: 800;
}

.map-progress {
  height: 5px;
  overflow: hidden;
  margin-top: 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
}

.map-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sun);
}

.map-route {
  position: relative;
  min-height: 100%;
  padding: 24px 18px 50px;
  background:
    linear-gradient(90deg, rgba(27, 83, 65, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(27, 83, 65, 0.035) 1px, transparent 1px),
    #eef3ed;
  background-size: 22px 22px;
}

.map-route.dessert {
  background:
    linear-gradient(90deg, rgba(154, 80, 111, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(154, 80, 111, 0.04) 1px, transparent 1px),
    #f7eef2;
  background-size: 22px 22px;
}

.map-route::before {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 30px;
  left: 50%;
  width: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: repeating-linear-gradient(to bottom, #9fbead 0 13px, transparent 13px 21px);
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, #d7a8bc 0 13px, transparent 13px 21px);
}

.chapter-marker {
  position: relative;
  z-index: 2;
  width: max-content;
  margin: 5px auto 18px;
  padding: 7px 12px;
  border: 1px solid #cfdbd3;
  border-radius: 999px;
  background: #fff;
  color: var(--forest-700);
  box-shadow: 0 7px 18px rgba(28, 69, 54, 0.09);
  font-size: 10px;
  font-weight: 900;
}

.map-route.dessert .chapter-marker {
  border-color: #e1c6d2;
  color: #934766;
}

.map-stop {
  position: relative;
  z-index: 2;
  width: 77%;
  min-height: 88px;
  display: grid;
  grid-template-columns: 58px 1fr 20px;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  padding: 11px 12px;
  border: 1px solid #dbe3dd;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 26px rgba(23, 61, 49, 0.09);
  text-align: left;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.map-stop:nth-of-type(even) {
  margin-left: auto;
}

.map-stop.right {
  margin-left: auto;
}

.map-stop:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 15px 34px rgba(23, 61, 49, 0.13);
}

.map-stop.cleared {
  border-color: #bad7c7;
  background: #f8fffa;
}

.map-stop.available {
  border: 2px solid var(--coral);
  box-shadow: 0 13px 28px rgba(223, 77, 63, 0.18);
}

.map-stop.skipped {
  border-style: dashed;
  border-color: #8cb7ca;
  background: #f4fbfe;
}

.map-stop.locked {
  border-color: #dfe3df;
  background: rgba(240, 242, 239, 0.92);
  color: #8b9690;
  box-shadow: none;
  cursor: not-allowed;
}

.node-badge {
  position: relative;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 5px solid #edf1ec;
  border-radius: 50%;
  background: #fff4d8;
  font-size: 25px;
  box-shadow: 0 5px 12px rgba(32, 68, 55, 0.1);
}

.map-stop.cleared .node-badge {
  border-color: #d7ecdf;
  background: var(--forest-700);
}

.map-stop.available .node-badge {
  border-color: #ffe1db;
  background: #fff;
  color: var(--coral-dark);
  animation: node-pulse 1.9s ease-in-out infinite;
}

.map-stop.locked .node-badge {
  border-color: #e2e6e2;
  background: #d8ded9;
  color: #7d8982;
}

@keyframes node-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 113, 91, 0.24); }
  50% { box-shadow: 0 0 0 8px rgba(255, 113, 91, 0); }
}

.node-copy {
  min-width: 0;
}

.node-num {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.node-title {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.node-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
}

.map-stop.available .node-state { color: var(--coral-dark); }
.map-stop.cleared .node-state { color: var(--forest-700); }
.map-stop.skipped .node-state { color: #397a98; }

.node-arrow {
  color: #9eaaa3;
}

.screen-heading {
  margin: 2px 2px 16px;
}

.screen-heading h2 {
  margin-top: 5px;
  font-size: 25px;
}

.screen-heading p:last-child {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border-radius: 13px;
  background: #e8ece7;
}

.segment button {
  min-height: 39px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.segment button.active {
  background: #fff;
  color: var(--forest-800);
  box-shadow: 0 5px 14px rgba(24, 55, 44, 0.1);
}

.podium {
  min-height: 244px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: 8px;
  margin-top: 14px;
  padding: 18px 14px 0;
  overflow: hidden;
  border-radius: 8px;
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.podium-person {
  text-align: center;
}

.podium-person.first {
  order: 2;
}

.podium-person.second {
  order: 1;
}

.podium-person.third {
  order: 3;
}

.podium-avatar {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0 auto 8px;
  border: 3px solid rgba(255,255,255,.65);
  border-radius: 50%;
  background: var(--sun);
  color: var(--forest-950);
  font-weight: 900;
}

.podium-person.first .podium-avatar {
  width: 62px;
  height: 62px;
  border-color: var(--sun);
  background: #fff4d0;
}

.podium-rank {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--forest-900);
  font-size: 10px;
  font-weight: 900;
}

.podium-person strong {
  display: block;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium-person small {
  color: #c7d8cf;
  font-size: 10px;
}

.podium-block {
  height: 66px;
  margin-top: 9px;
  border-radius: 10px 10px 0 0;
  background: rgba(255, 255, 255, 0.11);
}

.podium-person.first .podium-block {
  height: 98px;
  background: rgba(255, 200, 87, 0.24);
}

.podium-person.third .podium-block {
  height: 50px;
}

.my-rank {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 11px;
  align-items: center;
  margin-top: 12px;
  padding: 13px;
  border: 1px solid #f0d5cd;
  border-radius: 8px;
  background: #fff4f0;
}

.my-rank-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--coral);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.my-rank strong,
.rank-person strong {
  display: block;
  font-size: 13px;
}

.my-rank span,
.rank-person span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.rank-score {
  color: var(--forest-700);
  font-size: 13px;
  font-weight: 900;
}

.rank-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.rank-row {
  display: grid;
  grid-template-columns: 28px 42px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.rank-number {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #dcece3;
  color: var(--forest-800);
  font-weight: 900;
}

.profile-hero {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: 8px;
  background: var(--forest-900);
  color: #fff;
  box-shadow: var(--shadow-md);
}

.profile-hero::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -66px;
  top: -70px;
  border: 28px solid rgba(255, 200, 87, 0.13);
  border-radius: 50%;
}

.profile-main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 13px;
  align-items: center;
}

.profile-avatar {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  background: var(--sun);
  color: var(--forest-950);
  font-size: 18px;
  font-weight: 900;
}

.profile-hero .eyebrow {
  color: #bdd2c7;
}

.profile-title-row {
  gap: 7px;
  margin-top: 3px;
}

.profile-title-row h2 {
  font-size: 21px;
}

.level-chip {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 200, 87, 0.15);
  color: var(--sun);
  font-size: 9px;
  font-weight: 900;
}

.profile-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-stat {
  text-align: center;
}

.profile-stat + .profile-stat {
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.profile-stat strong {
  display: block;
  font-size: 18px;
}

.profile-stat span {
  display: block;
  margin-top: 3px;
  color: #bcd0c6;
  font-size: 9px;
  font-weight: 700;
}

.profile-section {
  margin-top: 16px;
}

.profile-section-card {
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.section-title {
  gap: 8px;
}

.section-title-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-soft);
  color: var(--forest-700);
}

.section-title h3 {
  font-size: 14px;
}

.section-title p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.badge-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 13px;
}

.badge-item {
  min-height: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 5px;
  border: 1px solid #e5e9e5;
  border-radius: 8px;
  background: #f6f7f5;
  color: #9aa39e;
  text-align: center;
}

.badge-item.earned {
  border-color: #d5e6dc;
  background: #eff8f2;
  color: var(--forest-700);
}

.badge-symbol {
  font-size: 22px;
  filter: grayscale(1);
  opacity: .5;
}

.badge-symbol svg {
  width: 22px;
  height: 22px;
}

.badge-item.earned .badge-symbol {
  filter: none;
  opacity: 1;
}

.badge-item span:last-child {
  font-size: 9px;
  font-weight: 850;
  line-height: 1.25;
}

.sticker-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-top: 13px;
}

.sticker-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid #e2e7e2;
  border-radius: 8px;
  background: #f7f8f6;
  font-size: 17px;
  transition: transform 150ms ease, border-color 150ms ease;
}

.sticker-cell:not(.locked):hover {
  transform: translateY(-2px) rotate(-2deg);
  border-color: #b9d6c5;
}

.sticker-cell.locked {
  color: #bdc5c0;
  cursor: default;
}

.sticker-detail {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: center;
  margin-top: 10px;
  padding: 10px;
  border-radius: 12px;
  background: #eff7f2;
}

.sticker-detail-emoji {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #fff;
  font-size: 23px;
}

.sticker-detail strong {
  display: block;
  font-size: 12px;
}

.sticker-detail span {
  color: var(--muted);
  font-size: 9px;
}

.allergy-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 12px;
}

.allergy-item {
  justify-content: space-between;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid #e1e6e2;
  border-radius: 8px;
  background: #fafbfa;
  font-size: 11px;
  font-weight: 800;
}

.allergy-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid #cad4cd;
  border-radius: 6px;
  color: transparent;
}

.allergy-item.active {
  border-color: #f0c7bd;
  background: #fff3ef;
  color: #a44335;
}

.allergy-item.active .allergy-check {
  border-color: var(--coral);
  background: var(--coral);
  color: #fff;
}

.skip-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.skip-row {
  width: 100%;
  display: grid;
  grid-template-columns: 34px 1fr 18px;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 6px 9px;
  border: 1px solid #d7e4ea;
  border-radius: 8px;
  background: #f5fafc;
  text-align: left;
}

.skip-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #dcecf3;
  color: #397a98;
  font-size: 10px;
  font-weight: 900;
}

.skip-row strong {
  font-size: 11px;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(27, 83, 65, 0.1);
  background: #fafaf7;
}

.tabs button {
  position: relative;
  min-width: 0;
  min-height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #87938d;
  font-size: 9px;
  font-weight: 800;
  transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.tabs button:hover {
  background: #edf1ed;
}

.tabs button.active {
  background: var(--forest-800);
  color: #fff;
  box-shadow: 0 8px 18px rgba(27, 83, 65, 0.22);
}

.tabs button.active::before {
  content: "";
  position: absolute;
  top: 6px;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: var(--sun);
}

.tabs svg {
  width: 19px;
  height: 19px;
}

.modal {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 23, 18, 0.68);
  animation: modal-fade 180ms ease both;
}

@keyframes modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sheet {
  width: min(100%, 430px);
  max-height: min(820px, calc(100dvh - 40px));
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-lg);
  scrollbar-width: none;
  animation: sheet-up 260ms cubic-bezier(.2, .8, .25, 1) both;
}

.sheet::-webkit-scrollbar { display: none; }

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(20px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.recipe-cover {
  position: relative;
  min-height: 206px;
  overflow: hidden;
  padding: 18px;
  border-radius: 24px 24px 0 0;
  background: var(--forest-900);
  color: #fff;
}

.recipe-cover.dessert {
  background: #713047;
}

.recipe-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 22px 22px;
}

.sheet-title-row {
  position: relative;
  z-index: 2;
  justify-content: space-between;
}

.recipe-stage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: #d9e7df;
  font-size: 10px;
  font-weight: 850;
}

.recipe-cover .icon {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
}

.recipe-dish {
  position: absolute;
  right: 22px;
  bottom: 18px;
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border: 10px solid rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  background: #fff8e5;
  box-shadow: 0 17px 38px rgba(0, 0, 0, 0.22);
}

.recipe-dish::before,
.recipe-dish::after {
  content: "";
  position: absolute;
}

.recipe-dish.meal-dish::before {
  width: 72px;
  height: 72px;
  border: 4px solid #253a33;
  border-radius: 50%;
  background: #344a41;
  box-shadow: inset 0 0 0 8px #20312b;
}

.recipe-dish.meal-dish::after {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: inset -5px -4px 0 rgba(255, 145, 46, 0.3);
}

.recipe-dish.dessert-dish::before {
  width: 70px;
  height: 52px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(to bottom, #fff 0 22%, #ef9ab6 22% 58%, #f7d7a5 58% 100%);
  box-shadow: 0 8px 0 #d987a2;
}

.recipe-dish.dessert-dish::after {
  width: 18px;
  height: 18px;
  top: 18px;
  border-radius: 50%;
  background: #d94f58;
  box-shadow: 14px 6px 0 -5px #5c9b60;
}

.recipe-cover-copy {
  position: relative;
  z-index: 2;
  width: 65%;
  margin-top: 25px;
}

.recipe-cover h2 {
  font-size: 26px;
  line-height: 1.12;
}

.recipe-cover p {
  margin-top: 8px;
  color: #c6d8cf;
  font-size: 11px;
  line-height: 1.5;
}

.recipe-body {
  padding: 16px 18px 20px;
}

.recipe-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.recipe-meta-item {
  padding: 10px 7px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  text-align: center;
}

.recipe-meta-item svg {
  margin: 0 auto 5px;
  color: var(--forest-700);
}

.recipe-meta-item strong {
  display: block;
  font-size: 11px;
}

.recipe-meta-item span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.warning {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 11px;
  border: 1px solid #f0cbc2;
  border-radius: 11px;
  background: #fff1ed;
  color: #9e3f32;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}

.recipe-block {
  margin-top: 20px;
}

.recipe-block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 10px;
}

.recipe-block h3 {
  font-size: 15px;
}

.recipe-block-head span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.ingredient-list {
  display: grid;
  gap: 7px;
}

.ingredient-row {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid #e1e6e2;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  font-size: 11px;
  font-weight: 750;
}

.ingredient-check {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border: 1px solid #cbd5ce;
  border-radius: 6px;
  color: transparent;
}

.ingredient-row.checked {
  background: #f0f7f2;
  color: #738078;
  text-decoration: line-through;
}

.ingredient-row.checked .ingredient-check {
  border-color: var(--forest-700);
  background: var(--forest-700);
  color: #fff;
}

.tool-list,
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tool-chip,
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: 9px;
  background: #eaf4ee;
  color: var(--forest-700);
  font-size: 10px;
  font-weight: 800;
}

.tag-chip {
  background: #fff0ec;
  color: #a04437;
}

.step-list {
  display: grid;
  gap: 10px;
}

.step-row {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: start;
}

.step-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--forest-900);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
}

.step-row p {
  padding-top: 5px;
  color: #3a4842;
  font-size: 11px;
  line-height: 1.55;
}

.sheet-actions {
  position: sticky;
  bottom: -20px;
  z-index: 4;
  margin: 22px -18px -20px;
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #f7f6f0;
}

.primary,
.secondary {
  width: 100%;
  min-height: 49px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 900;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.primary {
  background: var(--coral);
  color: #fff;
  box-shadow: 0 10px 22px rgba(223, 77, 63, 0.25);
}

.secondary {
  margin-top: 8px;
  background: #e7ebe7;
  color: #53625a;
}

.reward-sheet {
  position: relative;
  overflow: hidden;
  padding: 28px 22px 22px;
  text-align: center;
}

.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.confetti i {
  position: absolute;
  width: 8px;
  height: 16px;
  border-radius: 3px;
  background: var(--sun);
  animation: confetti-fall 1.8s ease-out both;
}

.confetti i:nth-child(1) { left: 11%; top: 6%; transform: rotate(16deg); }
.confetti i:nth-child(2) { left: 24%; top: 14%; background: var(--coral); transform: rotate(-24deg); }
.confetti i:nth-child(3) { right: 18%; top: 8%; background: var(--sky); transform: rotate(28deg); }
.confetti i:nth-child(4) { right: 8%; top: 22%; background: var(--berry); transform: rotate(-12deg); }
.confetti i:nth-child(5) { left: 7%; top: 34%; background: var(--forest-700); transform: rotate(35deg); }

@keyframes confetti-fall {
  from { opacity: 0; translate: 0 -18px; }
  to { opacity: 1; translate: 0 0; }
}

.reward-burst {
  position: relative;
  width: 102px;
  height: 102px;
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
  border: 10px solid #fff4ce;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 15px 32px rgba(154, 104, 0, 0.2);
  font-size: 48px;
}

.reward-sheet .eyebrow {
  color: var(--forest-700);
}

.reward-sheet h2 {
  margin-top: 6px;
  font-size: 25px;
}

.reward-sheet > p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.unlock-row {
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid #d6e4da;
  border-radius: 12px;
  background: #eff7f2;
  text-align: left;
}

.unlock-icon {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff;
  color: var(--forest-700);
}

.unlock-row strong {
  display: block;
  font-size: 11px;
}

.unlock-row span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9px;
}

.reward-total {
  margin-top: 13px;
  color: var(--forest-700);
  font-size: 12px;
  font-weight: 900;
}

/* Illustration and motion foundation */
:root {
  --forest-950: #173c32;
  --forest-900: #215446;
  --forest-800: #2f7159;
  --forest-700: #438c68;
  --forest-100: #dff4df;
  --ink: #27352f;
  --muted: #718078;
  --paper: #fbfaf3;
  --surface: #fffef9;
  --surface-soft: #eef7ee;
  --line: #dce8dc;
  --sun: #ffd66b;
  --coral: #ff8177;
  --coral-dark: #d95f59;
  --sky: #82cce0;
  --berry: #bd79aa;
  --lavender: #bcaee8;
  --peach: #ffc5a8;
  --shadow-sm: 0 8px 22px rgba(39, 86, 64, 0.09);
  --shadow-md: 0 18px 42px rgba(39, 86, 64, 0.15);
  --shadow-lg: 0 30px 80px rgba(12, 43, 33, 0.31);
}

html,
body {
  background: #204f43;
}

.page::before {
  background:
    linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, 0.035) 47% 53%, transparent 54%) 0 0 / 72px 72px,
    linear-gradient(-45deg, transparent 46%, rgba(255, 213, 107, 0.04) 47% 53%, transparent 54%) 0 0 / 72px 72px,
    linear-gradient(135deg, #173f35 0%, #2e6b55 44%, #3d765b 70%, #214e43 100%);
}

.page::after {
  inset: auto 0 0;
  height: 25vh;
  border: 0;
  border-radius: 0;
  transform: none;
  background:
    linear-gradient(145deg, transparent 0 42%, rgba(21, 66, 50, 0.72) 43% 100%) 0 100% / 23% 100% repeat-x,
    linear-gradient(35deg, transparent 0 52%, rgba(255, 214, 107, 0.06) 53% 100%) 12% 100% / 31% 72% repeat-x;
  box-shadow: none;
}

.phone {
  border-color: rgba(255, 255, 255, 0.55);
  background: var(--paper);
  box-shadow: var(--shadow-lg), 0 0 0 7px rgba(255, 255, 255, 0.08);
}

.top {
  position: relative;
  z-index: 8;
  border-bottom-color: #e5eadf;
  background: #fffdf6;
}

.mark,
.icon,
.quest-cta,
.cta-icon,
.quick-card-icon,
.my-rank-mark,
.avatar,
.profile-avatar,
.section-title-icon {
  border-radius: 8px;
}

.mark {
  border: 1px solid rgba(34, 94, 71, 0.22);
  background: linear-gradient(145deg, #3b8061, #28654f);
  box-shadow: 0 7px 0 rgba(32, 91, 67, 0.14), 0 12px 24px rgba(47, 113, 89, 0.2);
}

.mark::before,
.mark::after {
  content: none;
}

.brand-symbol {
  width: 39px;
  height: 39px;
  overflow: visible;
  filter: drop-shadow(0 2px 1px rgba(22, 69, 51, 0.18));
}

.logo-leaf {
  fill: #a9dd7d;
  transform-origin: 25px 11px;
  animation: logo-leaf-wave 3.1s ease-in-out infinite;
}

.logo-stem,
.logo-steam,
.logo-rim,
.logo-smile,
.logo-shine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo-stem {
  stroke: #d7efa5;
  stroke-width: 2;
}

.logo-steam {
  stroke: rgba(255, 255, 255, 0.82);
  stroke-width: 2.1;
  animation: logo-steam-rise 2.8s ease-in-out infinite;
}

.logo-rice {
  fill: #fff9df;
  stroke: #1d5944;
  stroke-width: 1.6;
}

.logo-bowl {
  fill: #ffd66b;
  stroke: #1d5944;
  stroke-width: 1.8;
}

.logo-rim {
  stroke: #1d5944;
  stroke-width: 1.7;
}

.logo-eye {
  fill: #345f4d;
}

.logo-cheek {
  fill: #ff9a8f;
  opacity: .75;
}

.logo-smile {
  stroke: #c7605c;
  stroke-width: 1.5;
}

.logo-shine {
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 1.4;
}

@keyframes logo-leaf-wave {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(7deg); }
}

@keyframes logo-steam-rise {
  0%, 100% { transform: translateY(1px); opacity: .7; }
  50% { transform: translateY(-1.5px); opacity: 1; }
}

.icon {
  border-color: #dce7d9;
  background: #f6f3e8;
  box-shadow: 0 5px 13px rgba(51, 91, 71, 0.08);
}

.content {
  background: #fbfaf3;
}

.quest-hero {
  min-height: 258px;
  border: 1px solid #cce7cf;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 251, 211, 0.42) 49%, rgba(206, 239, 210, 0.75)),
    #eaf7e7;
  color: var(--ink);
  box-shadow: 0 15px 36px rgba(65, 126, 91, 0.13);
}

.quest-hero::before {
  inset: 0;
  background:
    linear-gradient(45deg, transparent 47%, rgba(72, 143, 106, 0.05) 48% 52%, transparent 53%) 0 0 / 24px 24px;
  mask-image: linear-gradient(to right, transparent 30%, #000);
}

.quest-hero::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: 47px;
  width: 180px;
  height: 40px;
  border-radius: 50% 50% 0 0;
  background: #b6dfa8;
  box-shadow: -72px 15px 0 #d8edbd, 36px 13px 0 #8fc885;
  opacity: 0.72;
}

.quest-copy {
  width: 64%;
}

.quest-label {
  border-color: #c1dfc4;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--forest-700);
  box-shadow: 0 4px 12px rgba(61, 120, 89, 0.08);
}

.quest-hero h2 {
  margin-top: 13px;
  color: #28453a;
  font-size: 30px;
}

.quest-hero h3 {
  color: var(--coral-dark);
}

.quest-meta {
  color: #668072;
}

.quest-visual {
  z-index: 2;
  top: 19px;
  right: 4px;
  width: 143px;
  height: 154px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quest-visual::before,
.quest-visual::after {
  content: none;
}

.forest-chef {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 8px;
  width: 93px;
  height: 112px;
  transform-origin: 50% 100%;
  animation: buddy-float 2.8s ease-in-out infinite;
}

.chef-hat {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 25px;
  width: 46px;
  height: 28px;
  border: 2px solid #d8e4d5;
  border-radius: 50% 50% 28% 28%;
  background: #fffef8;
  box-shadow: -15px 7px 0 -4px #fffef8, 15px 7px 0 -4px #fffef8;
  animation: hat-wiggle 2.8s ease-in-out infinite;
}

.chef-face {
  position: absolute;
  z-index: 2;
  top: 24px;
  left: 17px;
  width: 62px;
  height: 60px;
  border: 2px solid #376a53;
  border-radius: 48% 52% 46% 54%;
  background: #ffe0ae;
  box-shadow: inset -7px -5px 0 rgba(240, 172, 115, 0.18), 0 7px 0 #fff8df;
}

.chef-face::before,
.chef-face::after {
  content: "";
  position: absolute;
  top: 36px;
  width: 9px;
  height: 5px;
  border-radius: 50%;
  background: #ff9e9b;
  opacity: 0.72;
}

.chef-face::before { left: 7px; }
.chef-face::after { right: 7px; }

.chef-face i {
  position: absolute;
  top: 23px;
  width: 5px;
  height: 7px;
  border-radius: 50%;
  background: #315343;
  animation: buddy-blink 4.2s infinite;
}

.chef-face i:first-child { left: 17px; }
.chef-face i:nth-child(2) { right: 17px; }

.chef-face b {
  position: absolute;
  left: 27px;
  top: 34px;
  width: 9px;
  height: 5px;
  border-bottom: 2px solid #a25a52;
  border-radius: 50%;
}

.chef-body {
  position: absolute;
  left: 20px;
  bottom: 0;
  width: 57px;
  height: 39px;
  border: 2px solid #376a53;
  border-radius: 48% 48% 9px 9px;
  background: #77bc7b;
  box-shadow: inset 0 -9px 0 rgba(44, 126, 83, 0.14);
}

.chef-body::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 8px;
  width: 21px;
  height: 22px;
  border-radius: 7px 7px 4px 4px;
  background: #fff7dd;
}

.chef-spoon {
  position: absolute;
  z-index: 5;
  right: 1px;
  top: 58px;
  width: 6px;
  height: 47px;
  border-radius: 999px;
  background: #7f8f87;
  transform: rotate(19deg);
  transform-origin: 50% 100%;
  animation: spoon-wave 2.2s ease-in-out infinite;
}

.chef-spoon::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -11px;
  width: 16px;
  height: 19px;
  border-radius: 50%;
  background: #9caaa3;
}

.buddy-shadow {
  position: absolute;
  z-index: 1;
  right: 22px;
  bottom: 2px;
  width: 84px;
  height: 12px;
  border-radius: 50%;
  background: rgba(45, 98, 69, 0.16);
  animation: shadow-breathe 2.8s ease-in-out infinite;
}

.quest-emoji {
  position: absolute;
  z-index: 6;
  top: 4px;
  right: 2px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff8db;
  box-shadow: 0 7px 16px rgba(52, 99, 73, 0.13);
  font-size: 21px;
  opacity: 1;
  animation: dish-bob 3s ease-in-out infinite;
}

.hero-spark,
.hero-leaf {
  position: absolute;
  z-index: 3;
}

.hero-spark {
  width: 8px;
  height: 8px;
  background: var(--sun);
  clip-path: polygon(50% 0, 61% 38%, 100% 50%, 61% 62%, 50% 100%, 39% 62%, 0 50%, 39% 38%);
  animation: sparkle 1.8s ease-in-out infinite;
}

.spark-one { left: 5px; top: 37px; }
.spark-two { right: 9px; top: 61px; animation-delay: .55s; }

.hero-leaf {
  width: 19px;
  height: 10px;
  border-radius: 90% 10% 90% 10%;
  background: #73b873;
  transform-origin: 0 50%;
  animation: leaf-sway 2.4s ease-in-out infinite;
}

.leaf-one { left: 1px; bottom: 43px; transform: rotate(24deg); }
.leaf-two { right: 0; bottom: 34px; transform: rotate(-38deg); animation-delay: .6s; }

.quest-cta {
  border: 2px solid #fff1ba;
  background: var(--sun);
  color: #354739;
  box-shadow: 0 9px 0 #e8b94c, 0 14px 23px rgba(55, 100, 72, 0.13);
  animation: cta-breathe 2.6s ease-in-out infinite;
}

.quest-cta:hover {
  transform: translateY(2px);
  box-shadow: 0 6px 0 #e8b94c, 0 10px 19px rgba(55, 100, 72, 0.14);
}

.cta-icon {
  background: rgba(255, 255, 255, 0.67);
}

.progress-panel,
.reward-track,
.quick-card,
.profile-section-card,
.rank-row {
  border-color: #dce9dc;
  background: #fffef9;
}

.progress-panel {
  background: linear-gradient(110deg, #fffef9 0 72%, #eef8e8 72%);
}

.progress-track {
  background: #e4eee2;
}

.progress-track span {
  background: linear-gradient(90deg, var(--coral), var(--sun), #7fcf91);
  background-size: 180% 100%;
  animation: progress-shine 2.8s linear infinite;
}

.progress-ring {
  background: conic-gradient(#73c18a calc(var(--progress) * 1%), #e7efe4 0);
  box-shadow: 0 7px 18px rgba(60, 128, 88, 0.12);
}

.reward-track {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #fffef9, #f6f0ff);
}

.reward-track::before {
  content: "";
  position: absolute;
  top: 39px;
  left: 32px;
  right: 32px;
  border-top: 2px dashed #d9d2b9;
}

.reward-slot {
  position: relative;
  z-index: 1;
}

.reward-icon {
  border-radius: 50%;
  background: #f3f0e8;
}

.reward-slot.unlocked .reward-icon {
  background: #e2f4df;
}

.reward-slot.current .reward-icon {
  border-color: var(--coral);
  background: #fff0eb;
  animation: reward-hop 1.7s ease-in-out infinite;
}

.quick-card {
  position: relative;
  overflow: hidden;
}

.quick-card::after {
  content: "";
  position: absolute;
  right: -14px;
  bottom: -15px;
  width: 49px;
  height: 35px;
  border-radius: 50% 50% 0 0;
  background: #d9efdc;
}

.quick-card.badge-card {
  border-color: #f1dfaa;
  background: #fff7dc;
}

.quick-card.badge-card::after {
  background: #f2d6ee;
}

.quick-card-icon {
  background: #e6f3e7;
}

.badge-card .quick-card-icon {
  background: #f5dff1;
  color: #9a588a;
}

.map-hero {
  padding-bottom: 19px;
  background: linear-gradient(110deg, #245846, #3b8060 65%, #5f9d6d);
  box-shadow: 0 10px 24px rgba(24, 77, 53, 0.2);
}

.map-hero::before,
.map-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.map-hero::before {
  right: 54px;
  top: 9px;
  width: 45px;
  height: 23px;
  border-radius: 50% 50% 5px 5px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-bottom: 0;
  transform: rotate(-9deg);
}

.map-hero::after {
  left: 0;
  right: 0;
  bottom: -6px;
  height: 12px;
  background:
    radial-gradient(circle at 6px 0, #3a7d5e 0 7px, transparent 8px) 0 0 / 18px 12px repeat-x;
}

.map-hero.dessert {
  background: linear-gradient(110deg, #8d4e79, #bd739e 63%, #e49b9d);
}

.map-hero.dessert::after {
  background:
    radial-gradient(circle at 6px 0, #bd739e 0 7px, transparent 8px) 0 0 / 18px 12px repeat-x;
}

.map-stat {
  border-color: rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
}

.map-progress span {
  background: linear-gradient(90deg, var(--sun), #a9e890);
}

.map-route,
.map-route.dessert {
  min-height: 2000px;
  padding: 35px 18px 60px;
  background:
    linear-gradient(32deg, transparent 43%, rgba(123, 185, 111, 0.055) 44% 52%, transparent 53%) 0 0 / 42px 42px,
    linear-gradient(-34deg, transparent 44%, rgba(255, 204, 127, 0.08) 45% 51%, transparent 52%) 0 0 / 54px 54px,
    #edf7e9;
}

.map-route.dessert {
  background:
    linear-gradient(32deg, transparent 43%, rgba(185, 121, 170, 0.055) 44% 52%, transparent 53%) 0 0 / 42px 42px,
    linear-gradient(-34deg, transparent 44%, rgba(255, 177, 170, 0.09) 45% 51%, transparent 52%) 0 0 / 54px 54px,
    #f9f0f3;
}

.map-route::before,
.map-route.dessert::before {
  top: 52px;
  bottom: 62px;
  width: 8px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  background: repeating-linear-gradient(to bottom, #9fcf9e 0 15px, #d6e9b8 15px 25px);
  box-shadow: 0 0 0 2px rgba(92, 151, 102, 0.08);
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, #dca8c4 0 15px, #f5d2c8 15px 25px);
}

.forest-goal {
  position: relative;
  z-index: 3;
  width: 74%;
  min-height: 60px;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0 auto 25px;
  padding: 10px 12px;
  border: 2px solid #b9daae;
  border-radius: 8px;
  background: #fffcec;
  box-shadow: 0 9px 0 rgba(109, 157, 95, 0.12);
  text-align: left;
}

.forest-goal.trailhead {
  margin-top: 8px;
  margin-bottom: 0;
  border-color: #f1ce8b;
  background: #fff5dc;
}

.goal-crown {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: #775c16;
  animation: goal-glow 2.2s ease-in-out infinite;
}

.forest-goal b,
.forest-goal small {
  display: block;
}

.forest-goal b {
  font-size: 12px;
}

.forest-goal small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
}

.chapter-marker {
  display: grid;
  gap: 2px;
  margin: 12px auto 22px;
  padding: 7px 13px;
  border-color: #bcd8bc;
  background: #fffef8;
  color: var(--forest-700);
  text-align: center;
  box-shadow: 0 6px 0 rgba(74, 132, 91, 0.1);
}

.chapter-marker span {
  color: #75a27e;
  font-size: 8px;
}

.chapter-marker b {
  font-size: 11px;
}

.map-route.dessert .chapter-marker {
  border-color: #e4bcd1;
  color: #9b557e;
}

.map-step {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 91px;
  margin-bottom: 18px;
  animation: forest-step-in 420ms cubic-bezier(.2, .78, .24, 1) both;
  animation-delay: var(--delay);
}

.map-step .map-stop {
  margin-bottom: 0;
}

.map-step.right .map-stop {
  margin-left: auto;
}

.map-stop {
  width: 79%;
  min-height: 91px;
  border-color: #d7e6d5;
  background: rgba(255, 254, 248, 0.97);
  box-shadow: 0 8px 0 rgba(78, 130, 91, 0.1), 0 13px 25px rgba(41, 91, 65, 0.08);
}

.map-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(-.35deg);
  box-shadow: 0 10px 0 rgba(78, 130, 91, 0.1), 0 18px 28px rgba(41, 91, 65, 0.11);
}

.map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(.35deg);
}

.map-stop.cleared {
  border-color: #a9d5ad;
  background: #f6fff1;
}

.map-stop.available {
  border-color: var(--coral);
  background: #fffaf0;
  box-shadow: 0 8px 0 #ffd4c6, 0 16px 30px rgba(229, 99, 86, 0.16);
}

.map-stop.skipped {
  border-color: var(--sky);
  background: #f3fbff;
}

.map-stop.locked {
  border-color: #dae2d8;
  background: rgba(239, 243, 236, 0.94);
  box-shadow: 0 6px 0 rgba(93, 113, 101, 0.06);
}

.node-badge {
  border-color: #edf2df;
  background: #fff6d6;
}

.map-stop.cleared .node-badge {
  border-color: #d5edd5;
  background: #70bd83;
}

.map-stop.available .node-badge {
  border-color: #ffe0d8;
  color: var(--coral-dark);
}

.map-stop.available .node-badge::after {
  content: "";
  position: absolute;
  right: -4px;
  top: -6px;
  width: 14px;
  height: 9px;
  border-radius: 90% 10% 90% 10%;
  background: #79c77d;
  transform: rotate(-24deg);
}

.forest-prop {
  position: absolute;
  z-index: 3;
  bottom: 4px;
  width: 47px;
  height: 55px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: prop-sway 3s ease-in-out infinite;
}

.map-step.left .forest-prop { right: 1px; }
.map-step.right .forest-prop { left: 1px; animation-delay: .55s; }

.forest-prop.sprout::before {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 3px;
  width: 4px;
  height: 33px;
  border-radius: 999px;
  background: #5d9b65;
}

.forest-prop.sprout i,
.forest-prop.sprout b {
  position: absolute;
  width: 22px;
  height: 13px;
  border-radius: 90% 10% 90% 10%;
  background: #77c47a;
}

.forest-prop.sprout i { left: 3px; top: 18px; transform: rotate(26deg); }
.forest-prop.sprout b { right: 1px; top: 9px; transform: scaleX(-1) rotate(20deg); background: #97d47d; }

.forest-prop.mushroom::before {
  content: "";
  position: absolute;
  left: 17px;
  bottom: 3px;
  width: 18px;
  height: 25px;
  border-radius: 45% 45% 6px 6px;
  background: #fff0cf;
  border: 2px solid #d8b993;
}

.forest-prop.mushroom::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 43px;
  height: 27px;
  border: 2px solid #b95e62;
  border-radius: 50% 50% 30% 30%;
  background: #f3847f;
  box-shadow: inset 10px 2px 0 -6px #fff5d8, inset -11px 8px 0 -7px #fff5d8;
}

.forest-prop.flower::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 12px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 -10px 0 #fff, 0 10px 0 #fff, -10px 0 0 #fff, 10px 0 0 #fff;
}

.forest-prop.flower::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 28px;
  width: 4px;
  height: 25px;
  border-radius: 999px;
  background: #6daf6e;
}

.forest-prop.tree::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 42px;
  height: 46px;
  background: #65ad6f;
  clip-path: polygon(50% 0, 95% 45%, 71% 43%, 100% 78%, 63% 73%, 50% 100%, 37% 73%, 0 78%, 29% 43%, 5% 45%);
}

.forest-prop.tree::after {
  content: "";
  position: absolute;
  left: 21px;
  bottom: 0;
  width: 9px;
  height: 17px;
  border-radius: 3px;
  background: #9c724f;
}

.forest-prop.berries::before,
.forest-prop.berries::after,
.forest-prop.berries i {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  border: 2px solid #8f4a78;
  border-radius: 50%;
  background: #cc75a8;
}

.forest-prop.berries::before { left: 7px; top: 22px; }
.forest-prop.berries::after { right: 7px; top: 22px; }
.forest-prop.berries i { left: 15px; top: 10px; }

.forest-prop.berries b {
  position: absolute;
  left: 22px;
  top: 0;
  width: 4px;
  height: 18px;
  border-radius: 999px;
  background: #5d9867;
}

.segment {
  border-color: #d8e7d8;
  background: #edf5e9;
}

.segment button {
  border-radius: 8px;
}

.podium {
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.25), transparent 38%),
    linear-gradient(120deg, #79bd91, #82cbd9 56%, #b7a9e1);
}

.podium::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 52px;
  background: #6da87c;
  clip-path: polygon(0 41%, 9% 20%, 18% 45%, 28% 14%, 39% 48%, 50% 9%, 61% 46%, 74% 16%, 84% 43%, 93% 19%, 100% 40%, 100% 100%, 0 100%);
  opacity: .55;
}

.podium-person {
  position: relative;
  z-index: 1;
}

.podium-person.first .podium-avatar {
  animation: winner-bob 2s ease-in-out infinite;
}

.podium-block {
  border-radius: 8px 8px 0 0;
  background: rgba(255, 255, 255, 0.26);
}

.podium-person.first .podium-block {
  background: rgba(255, 218, 109, 0.38);
}

.my-rank {
  border-color: #f0d8bf;
  background: #fff5e7;
}

.my-rank-mark {
  background: var(--coral);
}

.rank-row:nth-child(3n + 1) .avatar { background: #dff2df; color: #39775a; }
.rank-row:nth-child(3n + 2) .avatar { background: #e6e1f7; color: #6d5e9c; }
.rank-row:nth-child(3n) .avatar { background: #dff2f7; color: #397a8d; }

.profile-hero {
  background:
    linear-gradient(130deg, rgba(255,255,255,.14), transparent 48%),
    linear-gradient(115deg, #3d8264, #65a97a 68%, #8bc888);
}

.profile-hero::before {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -15px;
  width: 100px;
  height: 38px;
  border-radius: 50% 50% 0 0;
  background: rgba(255, 225, 130, 0.16);
  box-shadow: 75px 8px 0 rgba(202, 231, 176, 0.16), 170px -2px 0 rgba(255, 196, 174, 0.13);
}

.profile-avatar {
  position: relative;
  background: var(--sun);
  box-shadow: 0 7px 0 rgba(38, 96, 66, 0.2);
}

.profile-avatar::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 6px;
  width: 15px;
  height: 9px;
  border-radius: 90% 10% 90% 10%;
  background: #dff1a8;
  transform: rotate(-25deg);
}

.level-chip {
  background: rgba(255, 239, 181, 0.2);
}

.profile-section:nth-of-type(3n + 1) .section-title-icon { background: #e1f2df; color: #438c68; }
.profile-section:nth-of-type(3n + 2) .section-title-icon { background: #f5e2ef; color: #a05b8b; }
.profile-section:nth-of-type(3n) .section-title-icon { background: #dff1f6; color: #3c8196; }

.badge-item.earned {
  background: #f1faec;
}

.badge-item.earned:nth-child(3n + 2) {
  border-color: #e8d6ee;
  background: #faf2fc;
  color: #8b659c;
}

.sticker-cell:not(.locked) {
  background: #fff8dd;
  animation: sticker-peek 2.7s ease-in-out infinite;
}

.sticker-cell:nth-child(3n + 2):not(.locked) { animation-delay: .35s; }
.sticker-cell:nth-child(3n):not(.locked) { animation-delay: .7s; }

.tabs {
  border-top-color: #dae7d8;
  background: #fffdf6;
}

.tabs button {
  border-radius: 8px;
  color: #8b978f;
}

.tabs button:hover {
  background: #edf6e9;
}

.tabs button.active {
  background: #e1f2dc;
  color: var(--forest-800);
  box-shadow: inset 0 0 0 1px #c3dfbf, 0 6px 16px rgba(53, 117, 77, 0.1);
}

.tabs button.active::before {
  top: 5px;
  height: 3px;
  background: var(--coral);
}

.tabs button.active svg {
  animation: nav-bob 1.8s ease-in-out infinite;
}

.modal {
  background: rgba(23, 60, 50, 0.7);
  backdrop-filter: blur(3px);
}

.sheet {
  background: #fffdf7;
}

.recipe-cover {
  background: linear-gradient(125deg, #dff2d7, #fff4cf 52%, #ffd9c9);
  color: var(--ink);
}

.recipe-cover.dessert {
  background: linear-gradient(125deg, #f3dbea, #fff2db 52%, #dfeaf8);
}

.primary {
  background: var(--forest-800);
}

@keyframes buddy-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes hat-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg) translateY(-2px); }
}

@keyframes buddy-blink {
  0%, 44%, 48%, 100% { transform: scaleY(1); }
  46% { transform: scaleY(.1); }
}

@keyframes spoon-wave {
  0%, 100% { transform: rotate(19deg); }
  50% { transform: rotate(5deg); }
}

@keyframes shadow-breathe {
  0%, 100% { transform: scaleX(1); opacity: .7; }
  50% { transform: scaleX(.78); opacity: .4; }
}

@keyframes dish-bob {
  0%, 100% { transform: translateY(0) rotate(3deg); }
  50% { transform: translateY(-4px) rotate(-3deg); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(.65) rotate(0); opacity: .5; }
  50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

@keyframes leaf-sway {
  0%, 100% { rotate: -7deg; }
  50% { rotate: 8deg; }
}

@keyframes cta-breathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}

@keyframes progress-shine {
  to { background-position: -180% 0; }
}

@keyframes reward-hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes forest-step-in {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes prop-sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(3deg); }
}

@keyframes goal-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 107, .3); }
  50% { box-shadow: 0 0 0 8px rgba(255, 214, 107, 0); }
}

@keyframes winner-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-6px) rotate(1deg); }
}

@keyframes sticker-peek {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes nav-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Watercolor recipe-notebook theme */
:root {
  --forest-950: #3d5048;
  --forest-900: #587566;
  --forest-800: #688a76;
  --forest-700: #7b9d82;
  --forest-100: #e6efe3;
  --ink: #4c514b;
  --muted: #85847b;
  --paper: #f8f2e6;
  --surface: #fffdf7;
  --surface-soft: #edf3e8;
  --line: #ddd5c5;
  --sun: #f3d98c;
  --coral: #df887c;
  --coral-dark: #b96861;
  --sky: #9bc8cf;
  --berry: #c797a8;
  --lavender: #b9b0ce;
  --peach: #efb59c;
  --shadow-sm: 0 8px 20px rgba(93, 81, 61, 0.08);
  --shadow-md: 0 18px 42px rgba(82, 72, 56, 0.13);
  --shadow-lg: 0 35px 90px rgba(48, 58, 47, 0.28);
}

html,
body {
  background: #91aa99;
}

body {
  line-height: 1.45;
}

.page {
  padding: 14px 20px;
}

.page::before {
  background:
    url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat,
    linear-gradient(100deg, rgba(255, 255, 255, 0.08), transparent 28% 73%, rgba(72, 91, 72, 0.08)),
    repeating-linear-gradient(0deg, rgba(68, 91, 72, 0.025) 0 1px, transparent 1px 5px),
    #91aa99;
}

.page::after {
  inset: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(237, 188, 157, 0.3) 0 7%, transparent 17%),
    radial-gradient(ellipse at 86% 78%, rgba(139, 193, 196, 0.28) 0 8%, transparent 20%),
    radial-gradient(ellipse at 76% 11%, rgba(245, 220, 141, 0.2) 0 6%, transparent 17%),
    radial-gradient(ellipse at 14% 82%, rgba(102, 138, 110, 0.2) 0 9%, transparent 21%);
  box-shadow: none;
  filter: blur(2px);
}

.desk-note {
  position: absolute;
  z-index: -1;
  left: calc(50% - 394px);
  top: 17%;
  width: 132px;
  height: 118px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(114, 97, 69, 0.18);
  border-radius: 7px 14px 9px 12px;
  background:
    url("./assets/paper-grain.svg") 0 0 / 150px 150px,
    #f4d98f;
  box-shadow: 0 14px 30px rgba(51, 69, 55, 0.12);
  color: #7c6c54;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  transform: rotate(-8deg);
}

.desk-note::before {
  content: "";
  position: absolute;
  left: 39px;
  top: -12px;
  width: 57px;
  height: 24px;
  background: rgba(244, 235, 214, 0.72);
  box-shadow: 0 1px 2px rgba(86, 74, 53, 0.12);
  transform: rotate(5deg);
}

.desk-note i {
  position: absolute;
  right: 14px;
  bottom: 8px;
  color: #c77972;
  font-family: Georgia, serif;
  font-size: 24px;
  font-style: normal;
  transform: rotate(12deg);
}

.desk-flower {
  position: absolute;
  z-index: -1;
  width: 80px;
  height: 94px;
  opacity: 0.58;
}

.desk-flower-one {
  right: calc(50% - 366px);
  top: 19%;
  transform: rotate(13deg);
}

.desk-flower-two {
  left: calc(50% - 372px);
  bottom: 15%;
  transform: scale(.78) rotate(-20deg);
}

.desk-flower b {
  position: absolute;
  left: 38px;
  top: 38px;
  width: 3px;
  height: 58px;
  border-radius: 999px;
  background: #4f7862;
}

.desk-flower i {
  position: absolute;
  left: 25px;
  top: 8px;
  width: 30px;
  height: 30px;
  border: 2px solid rgba(90, 96, 79, 0.45);
  border-radius: 70% 35% 66% 40%;
  background: rgba(239, 188, 174, 0.65);
}

.desk-flower i:nth-child(2) { transform: translate(20px, 15px) rotate(78deg); }
.desk-flower i:nth-child(3) { transform: translate(-17px, 17px) rotate(168deg); }
.desk-flower i:nth-child(4) { transform: translate(3px, 30px) rotate(245deg); }

.phone {
  position: relative;
  z-index: 2;
  height: min(872px, calc(100dvh - 28px));
  grid-template-rows: 84px minmax(0, 1fr) 80px;
  border: 1px solid rgba(111, 98, 73, 0.22);
  border-radius: 37px 33px 35px 31px;
  background: var(--paper);
  box-shadow:
    var(--shadow-lg),
    0 0 0 8px rgba(255, 255, 255, 0.12),
    inset 0 0 32px rgba(137, 113, 71, 0.05);
  transform: rotate(-0.08deg);
}

.phone::before,
.phone::after {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 0;
  pointer-events: none;
}

.phone::before {
  border-radius: inherit;
  background: url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat;
  mix-blend-mode: multiply;
  opacity: 0.22;
}

.phone::after {
  background:
    linear-gradient(78deg, transparent 0 48.7%, rgba(123, 104, 75, 0.045) 49.4%, rgba(255,255,255,.18) 50%, transparent 50.8%),
    linear-gradient(171deg, transparent 0 66%, rgba(117, 100, 73, 0.035) 66.5%, rgba(255,255,255,.14) 67%, transparent 67.6%);
  opacity: 0.8;
}

.top {
  padding: 11px 19px 10px;
  border-bottom: 1px dashed rgba(121, 109, 87, 0.24);
  background: rgba(250, 246, 235, 0.9);
}

.brand {
  gap: 11px;
}

.mark,
.icon,
.quest-cta,
.cta-icon,
.quick-card-icon,
.my-rank-mark,
.avatar,
.profile-avatar,
.section-title-icon {
  border-radius: 15px 13px 16px 12px;
}

.mark {
  width: 45px;
  height: 45px;
  border: 1px solid rgba(84, 116, 91, 0.26);
  background: #84a88d;
  box-shadow: 0 6px 14px rgba(75, 104, 82, 0.18);
  transform: rotate(-2deg);
}

.brand-copy span {
  color: #9a8874;
  font-size: 10px;
  letter-spacing: .01em;
}

.brand h1 {
  color: #49574f;
  font-size: 21px;
}

.icon {
  border-color: rgba(127, 117, 96, 0.2);
  border-radius: 50%;
  background: rgba(255, 253, 246, 0.86);
  color: #718675;
  box-shadow: 0 4px 12px rgba(84, 75, 59, 0.07);
}

.content {
  padding: 19px 17px 34px;
  background:
    radial-gradient(ellipse at 92% 4%, rgba(149, 196, 193, 0.14), transparent 22%),
    radial-gradient(ellipse at 4% 51%, rgba(233, 179, 161, 0.11), transparent 21%),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(128, 149, 149, 0.04) 29px 30px),
    #f8f3e9;
}

.screen {
  animation-duration: 360ms;
}

.quest-hero {
  min-height: 272px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(112, 137, 111, 0.25);
  border-radius: 27px 22px 29px 21px;
  background:
    radial-gradient(ellipse at 81% 33%, rgba(138, 190, 174, 0.48) 0 19%, transparent 47%),
    radial-gradient(ellipse at 12% 12%, rgba(248, 219, 144, 0.44) 0 14%, transparent 34%),
    radial-gradient(ellipse at 35% 95%, rgba(235, 174, 153, 0.27) 0 14%, transparent 37%),
    rgba(254, 252, 243, 0.94);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(91, 91, 68, 0.1);
}

.quest-hero::before {
  inset: 0;
  background:
    url("./assets/paper-grain.svg") 0 0 / 160px 160px repeat,
    linear-gradient(16deg, transparent 47%, rgba(87, 113, 92, 0.045) 48% 49%, transparent 50%);
  mask-image: none;
  opacity: .5;
}

.quest-hero::after {
  right: -28px;
  bottom: 46px;
  width: 193px;
  height: 81px;
  border-radius: 51% 42% 34% 58%;
  background: rgba(133, 178, 139, 0.22);
  box-shadow: -66px 20px 0 rgba(239, 216, 149, 0.24), 41px 10px 0 rgba(126, 183, 180, 0.17);
  filter: blur(7px);
  opacity: 1;
  transform: rotate(-5deg);
}

.quest-copy {
  z-index: 4;
  width: 66%;
}

.quest-label {
  padding: 7px 11px;
  border: 1px dashed rgba(98, 133, 104, 0.4);
  background: rgba(255, 253, 245, 0.78);
  color: #6d8a72;
  box-shadow: none;
}

.quest-hero h2 {
  margin-top: 17px;
  color: #4b5b52;
  font-size: 29px;
  line-height: 1.17;
  letter-spacing: -.035em;
}

.quest-hero h3 {
  margin-top: 9px;
  color: var(--coral-dark);
  font-size: 18px;
}

.quest-meta {
  color: #7b857d;
}

.quest-visual {
  top: 25px;
  right: 1px;
  transform: rotate(1.5deg);
  filter: saturate(.88);
}

.forest-chef {
  animation-name: notebook-buddy-float;
}

.chef-hat {
  border-color: #c9c5b6;
  background: #fffdf4;
  box-shadow: -15px 7px 0 -4px #fffdf4, 15px 7px 0 -4px #fffdf4;
}

.chef-face {
  border-color: #61796b;
  background: #f2cf9f;
  box-shadow: inset -7px -5px 0 rgba(206, 143, 112, 0.15), 0 7px 0 #f9eed4;
}

.chef-body {
  border-color: #61796b;
  background: #8eaf8f;
}

.chef-spoon {
  background: #8f918b;
}

.quest-emoji {
  border-color: rgba(255, 255, 255, 0.86);
  background: #fbefc9;
  box-shadow: 0 7px 16px rgba(91, 79, 58, 0.12);
}

.hero-spark {
  background: #e6bd63;
}

.hero-leaf {
  background: #89aa86;
  opacity: .8;
}

.quest-cta {
  left: 20px;
  right: 20px;
  bottom: 18px;
  min-height: 50px;
  border: 1px solid rgba(142, 83, 77, 0.18);
  border-radius: 17px 14px 18px 15px;
  background: #df887c;
  color: #fffdf8;
  box-shadow: 0 8px 18px rgba(155, 92, 83, 0.19);
  animation: none;
}

.quest-cta:hover {
  transform: translateY(-1px) rotate(-.2deg);
  box-shadow: 0 11px 22px rgba(155, 92, 83, 0.23);
}

.cta-icon {
  border-radius: 50%;
  background: rgba(255,255,255,.3);
}

.progress-panel,
.reward-track,
.quick-card,
.profile-section-card,
.rank-row,
.my-rank,
.recipe-meta-item,
.ingredient-row {
  border-color: rgba(132, 119, 95, 0.19);
  background: rgba(255, 253, 247, 0.88);
  box-shadow: var(--shadow-sm);
}

.progress-panel {
  grid-template-columns: 1fr 88px;
  margin-top: 16px;
  padding: 18px;
  border-style: dashed;
  border-radius: 21px 25px 20px 24px;
  background:
    radial-gradient(circle at 92% 16%, rgba(156, 199, 189, 0.2), transparent 27%),
    rgba(255, 253, 247, 0.9);
}

.progress-panel h3 {
  color: #555b55;
}

.progress-panel h3 b {
  color: #708e79;
}

.eyebrow,
.screen-kicker,
.label {
  color: #91816e;
  letter-spacing: .08em;
}

.progress-track {
  height: 8px;
  background: #ebe4d6;
}

.progress-track span {
  background: linear-gradient(90deg, #d98c80, #ebcb78, #92b69a);
  animation: none;
}

.progress-ring {
  width: 78px;
  height: 78px;
  background: conic-gradient(#8fb29a calc(var(--progress) * 1%), #e9e2d5 0);
  box-shadow: none;
}

.progress-ring::before {
  width: 59px;
  height: 59px;
  background: #fffaf0;
}

.progress-ring strong {
  color: #688675;
}

.section-block {
  margin-top: 23px;
}

.section-head {
  margin-inline: 3px;
  margin-bottom: 11px;
}

.section-head h3 {
  color: #555b55;
  font-size: 17px;
}

.reward-track {
  padding: 15px;
  border-style: dashed;
  border-radius: 20px 17px 22px 19px;
  background:
    radial-gradient(ellipse at 86% 5%, rgba(190, 170, 207, 0.17), transparent 38%),
    rgba(255, 253, 247, 0.88);
}

.reward-track::before {
  border-top: 2px dashed #d6cbb5;
}

.reward-icon {
  border-color: #d8cdbb;
  background: #f4eee2;
  box-shadow: 0 4px 8px rgba(100, 86, 61, 0.05);
}

.reward-slot.unlocked .reward-icon {
  border-color: #b9cfb7;
  background: #e4efdd;
}

.reward-slot.current .reward-icon {
  border-color: #d9897d;
  background: #fae6df;
  animation: reward-hop 2.2s ease-in-out infinite;
}

.quick-grid {
  gap: 11px;
  margin-top: 15px;
}

.quick-card {
  min-height: 132px;
  border-radius: 23px 18px 22px 17px;
}

.quick-card:nth-child(2) {
  border-radius: 18px 24px 17px 23px;
}

.quick-card::after {
  right: -17px;
  bottom: -18px;
  width: 61px;
  height: 51px;
  border-radius: 58% 44% 0 0;
  background: rgba(157, 198, 166, 0.24);
  filter: blur(3px);
}

.quick-card.badge-card {
  border-color: rgba(190, 152, 110, 0.25);
  background: rgba(251, 241, 211, 0.76);
}

.quick-card.badge-card::after {
  background: rgba(196, 154, 180, 0.22);
}

.quick-card-icon {
  border-radius: 50%;
  background: #e4eee1;
  color: #718f79;
}

.badge-card .quick-card-icon {
  background: #eee1ea;
  color: #9a7188;
}

.map-screen {
  margin: -19px -17px -34px;
}

.map-hero,
.map-hero.dessert {
  padding: 20px 20px 23px;
  color: var(--ink);
  background:
    url("./assets/paper-grain.svg") 0 0 / 160px 160px,
    radial-gradient(ellipse at 83% 20%, rgba(150, 196, 179, .48), transparent 35%),
    #f3e9d8;
  box-shadow: 0 9px 22px rgba(92, 80, 59, 0.1);
}

.map-hero.dessert {
  background:
    url("./assets/paper-grain.svg") 0 0 / 160px 160px,
    radial-gradient(ellipse at 83% 20%, rgba(213, 164, 182, .48), transparent 37%),
    #f4e8df;
}

.map-hero::before {
  right: 72px;
  top: -5px;
  width: 54px;
  height: 26px;
  border: 0;
  border-radius: 2px;
  background: rgba(230, 218, 190, 0.7);
  box-shadow: 0 2px 3px rgba(90, 75, 53, 0.08);
  transform: rotate(-4deg);
}

.map-hero::after,
.map-hero.dessert::after {
  bottom: -8px;
  height: 15px;
  background: radial-gradient(circle at 8px 0, #f3e9d8 0 9px, transparent 10px) 0 0 / 21px 15px repeat-x;
}

.map-hero.dessert::after {
  background: radial-gradient(circle at 8px 0, #f4e8df 0 9px, transparent 10px) 0 0 / 21px 15px repeat-x;
}

.map-hero .screen-kicker,
.map-hero.dessert .screen-kicker {
  color: #927c66;
}

.map-hero h2 {
  color: #4f5751;
}

.map-stat {
  border: 1px dashed rgba(104, 122, 102, .35);
  background: rgba(255, 253, 246, 0.62);
  color: #687b6c;
}

.map-progress {
  background: rgba(128, 110, 84, 0.12);
}

.map-progress span {
  background: linear-gradient(90deg, #e3a196, #e6c971, #8db597);
}

.map-route,
.map-route.dessert {
  min-height: 2000px;
  padding: 38px 19px 64px;
  background:
    url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat,
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(112, 153, 161, 0.09) 30px 31px),
    #f8f2e6;
}

.map-route.dessert {
  background:
    url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat,
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(176, 130, 154, 0.08) 30px 31px),
    #f8eee8;
}

.map-route::before,
.map-route.dessert::before {
  top: 55px;
  bottom: 65px;
  width: 3px;
  border: 0;
  background: repeating-linear-gradient(to bottom, #9ab59f 0 6px, transparent 6px 13px);
  box-shadow: none;
  opacity: .74;
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, #c69aae 0 6px, transparent 6px 13px);
}

.forest-goal {
  width: 76%;
  border: 1px dashed rgba(116, 128, 99, .38);
  border-radius: 22px 17px 21px 18px;
  background: rgba(255, 251, 235, 0.93);
  box-shadow: 0 9px 18px rgba(85, 78, 60, 0.08);
  transform: rotate(-.6deg);
}

.forest-goal.trailhead {
  border-color: rgba(192, 149, 89, .38);
  background: rgba(252, 240, 211, 0.93);
  transform: rotate(.7deg);
}

.goal-crown {
  background: #efd283;
  color: #826c3d;
  animation: none;
}

.chapter-marker {
  border: 1px dashed rgba(110, 142, 111, .4);
  border-radius: 15px 12px 16px 13px;
  background: rgba(255, 253, 245, .94);
  color: #758f78;
  box-shadow: 0 5px 11px rgba(80, 81, 61, 0.06);
  transform: rotate(-.7deg);
}

.map-route.dessert .chapter-marker {
  border-color: rgba(180, 126, 153, .38);
  color: #a06f87;
}

.map-step {
  margin-bottom: 20px;
}

.map-stop {
  width: 80%;
  border: 1px solid rgba(127, 118, 99, .2);
  border-radius: 22px 17px 21px 18px;
  background: rgba(255, 253, 246, 0.94);
  box-shadow: 0 8px 18px rgba(85, 77, 59, 0.08);
  transform: rotate(-.45deg);
}

.map-step.right .map-stop {
  border-radius: 18px 23px 17px 21px;
  transform: rotate(.45deg);
}

.map-stop:hover:not(:disabled),
.map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(0);
  box-shadow: 0 13px 25px rgba(85, 77, 59, 0.11);
}

.map-stop.cleared {
  border-color: rgba(118, 161, 123, .42);
  background: rgba(238, 247, 231, .94);
}

.map-stop.available {
  border: 1px solid #d98a80;
  background: rgba(255, 247, 237, .96);
  box-shadow: 0 8px 0 rgba(223, 136, 124, .13), 0 15px 25px rgba(168, 94, 85, .1);
}

.map-stop.skipped {
  border-color: #9bc8cf;
  background: rgba(239, 249, 249, .95);
}

.map-stop.locked {
  border-color: rgba(127, 125, 115, .16);
  background: rgba(238, 237, 228, .88);
  box-shadow: 0 5px 12px rgba(80, 76, 61, 0.04);
}

.node-badge {
  border: 4px solid rgba(239, 229, 205, .9);
  background: #f8e9ba;
  box-shadow: 0 4px 9px rgba(91, 78, 55, .08);
}

.map-stop.cleared .node-badge {
  border-color: #dfead7;
  background: #8fb79a;
}

.map-stop.available .node-badge {
  border-color: #f3d6cc;
  background: #fffaf0;
  color: #bb6c64;
}

.forest-prop {
  opacity: .68;
  filter: saturate(.72);
}

.screen-heading {
  position: relative;
  margin: 5px 5px 19px;
}

.screen-heading::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -9px;
  width: 62px;
  height: 7px;
  border-radius: 50%;
  background: rgba(230, 177, 153, .3);
  transform: rotate(-2deg);
}

.screen-heading h2 {
  color: #505852;
  font-size: 26px;
}

.segment {
  padding: 5px;
  border: 1px solid rgba(124, 116, 99, .15);
  border-radius: 18px 15px 19px 16px;
  background: rgba(234, 231, 216, .78);
}

.segment button {
  border-radius: 14px 11px 15px 12px;
}

.segment button.active {
  background: #fffaf0;
  color: #647a6b;
  box-shadow: 0 4px 12px rgba(81, 73, 57, .08);
}

.podium {
  border: 1px solid rgba(103, 134, 124, .18);
  border-radius: 25px 20px 23px 18px;
  background:
    radial-gradient(ellipse at 17% 18%, rgba(247, 216, 141, .7), transparent 31%),
    radial-gradient(ellipse at 84% 13%, rgba(188, 170, 204, .45), transparent 35%),
    linear-gradient(155deg, #b7d5cd, #a9cfd0 54%, #c7c2d8);
  color: #4e5954;
  box-shadow: var(--shadow-md);
}

.podium::before {
  background: #8eb69a;
  opacity: .3;
}

.podium-person small {
  color: #5f7168;
}

.podium-avatar {
  border-color: rgba(255,255,255,.65);
  background: #f1d482;
  color: #5a5548;
}

.podium-person.first .podium-avatar {
  border-color: rgba(246, 218, 132, .9);
  background: #fff3cc;
}

.podium-block,
.podium-person.first .podium-block {
  background: rgba(255, 253, 246, .38);
}

.my-rank {
  border-style: dashed;
  border-radius: 19px 16px 20px 17px;
  background: rgba(251, 232, 217, .68);
}

.my-rank-mark {
  border-radius: 50%;
  background: #d9897e;
}

.rank-list {
  gap: 9px;
}

.rank-row {
  border-radius: 18px 15px 19px 14px;
}

.rank-row:nth-child(even) {
  border-radius: 15px 20px 14px 18px;
}

.avatar {
  border-radius: 50%;
}

.profile-hero {
  padding: 21px;
  border: 1px solid rgba(105, 130, 104, .22);
  border-radius: 27px 22px 28px 20px;
  background:
    radial-gradient(ellipse at 91% 12%, rgba(240, 209, 128, .5), transparent 35%),
    radial-gradient(ellipse at 8% 90%, rgba(149, 197, 192, .38), transparent 42%),
    #edf1df;
  color: #4e5b53;
  box-shadow: var(--shadow-md);
}

.profile-hero::before {
  left: -22px;
  bottom: -18px;
  background: rgba(133, 177, 154, .14);
  box-shadow: 75px 8px 0 rgba(239, 209, 132, .16), 170px -2px 0 rgba(228, 169, 153, .13);
  filter: blur(3px);
}

.profile-hero::after {
  border-color: rgba(208, 167, 113, .11);
}

.profile-avatar {
  border-color: rgba(255, 253, 244, .72);
  border-radius: 21px 17px 22px 18px;
  background: #edd083;
  color: #625942;
  box-shadow: 0 6px 13px rgba(93, 78, 54, .1);
  transform: rotate(-2deg);
}

.profile-avatar::after {
  background: #93b28e;
}

.profile-hero .eyebrow {
  color: #7b887e;
}

.profile-title-note {
  margin-top: 6px;
  color: #748179;
  font-size: 10px;
}

.level-chip {
  background: rgba(255, 250, 228, .72);
  color: #9b754c;
}

.profile-stats {
  border-top: 1px dashed rgba(93, 112, 94, .24);
}

.profile-stat + .profile-stat {
  border-left: 1px dashed rgba(93, 112, 94, .22);
}

.profile-stat span {
  color: #76827a;
}

.profile-section-card {
  border-radius: 23px 18px 22px 17px;
}

.profile-section:nth-of-type(even) .profile-section-card {
  border-radius: 18px 24px 17px 22px;
}

.section-title-icon {
  border-radius: 50%;
}

.badge-item {
  border-color: rgba(127, 119, 103, .16);
  border-radius: 16px 13px 17px 12px;
  background: rgba(242, 239, 230, .8);
}

.badge-item.earned {
  border-color: rgba(130, 165, 130, .28);
  background: rgba(235, 245, 228, .85);
}

.sticker-board {
  gap: 7px;
}

.sticker-cell {
  border-color: rgba(128, 120, 103, .17);
  border-radius: 11px 8px 12px 9px;
  background: rgba(245, 241, 232, .78);
}

.sticker-cell:not(.locked) {
  background: #faf0c9;
}

.allergy-item,
.skip-row {
  border-color: rgba(127, 119, 101, .18);
  border-radius: 15px 12px 16px 13px;
  background: rgba(250, 248, 241, .84);
}

.allergy-item.active {
  border-color: rgba(209, 126, 115, .44);
  background: #fae9e2;
  color: #a65f58;
}

.allergy-item.active .allergy-check {
  border-color: #d9897e;
  background: #d9897e;
}

.tabs {
  gap: 5px;
  padding: 8px 11px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px dashed rgba(121, 109, 87, .24);
  background: rgba(250, 246, 235, .94);
}

.tabs button {
  min-height: 59px;
  border-radius: 19px 15px 20px 16px;
  color: #99978d;
}

.tabs button:hover {
  background: rgba(229, 237, 222, .72);
}

.tabs button.active {
  background: #e4eddb;
  color: #647c6a;
  box-shadow: inset 0 0 0 1px rgba(124, 155, 122, .24);
}

.tabs button.active::before {
  top: 7px;
  width: 18px;
  height: 5px;
  border-radius: 50%;
  background: rgba(222, 135, 123, .72);
  transform: rotate(-4deg);
}

.tabs button.active svg {
  animation: none;
}

.modal {
  background: rgba(68, 78, 67, .56);
  backdrop-filter: blur(5px);
}

.sheet {
  border-color: rgba(255,255,255,.5);
  border-radius: 29px 25px 27px 23px;
  background:
    url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat,
    #f8f2e7;
}

.recipe-cover,
.recipe-cover.dessert {
  min-height: 214px;
  border-radius: 29px 25px 0 0;
  background:
    radial-gradient(ellipse at 82% 49%, rgba(145, 190, 172, .47), transparent 39%),
    radial-gradient(ellipse at 18% 2%, rgba(239, 209, 129, .42), transparent 35%),
    #f5ecda;
  color: #4d5851;
}

.recipe-cover.dessert {
  background:
    radial-gradient(ellipse at 82% 49%, rgba(211, 165, 183, .45), transparent 41%),
    radial-gradient(ellipse at 18% 2%, rgba(239, 209, 129, .38), transparent 35%),
    #f5e9e1;
}

.recipe-cover::before {
  background:
    url("./assets/paper-grain.svg") 0 0 / 160px 160px repeat,
    linear-gradient(16deg, transparent 47%, rgba(98, 85, 63, .04) 48%, transparent 49%);
  opacity: .6;
}

.recipe-stage-chip {
  border: 1px dashed rgba(104, 126, 103, .38);
  background: rgba(255, 253, 244, .68);
  color: #6d836f;
}

.recipe-cover .icon {
  border-color: rgba(119, 108, 87, .2);
  background: rgba(255, 253, 246, .76);
  color: #6b746e;
}

.recipe-cover p {
  color: #777d77;
}

.recipe-dish {
  border-color: rgba(255,255,255,.52);
  background: #fff8e8;
  box-shadow: 0 14px 25px rgba(95, 77, 54, .15);
  filter: saturate(.8);
  transform: rotate(3deg);
}

.recipe-body {
  background:
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(117, 151, 155, .045) 29px 30px);
}

.recipe-meta-item {
  border-radius: 16px 13px 17px 12px;
  box-shadow: none;
}

.recipe-meta-item svg {
  color: #78907d;
}

.warning {
  border-color: rgba(207, 130, 117, .32);
  border-radius: 15px 12px 16px 13px;
  background: rgba(250, 231, 223, .84);
  color: #a25f58;
}

.ingredient-row {
  border-radius: 14px 11px 15px 12px;
  box-shadow: none;
}

.ingredient-row.checked {
  background: #edf3e8;
}

.ingredient-row.checked .ingredient-check {
  border-color: #7d9a82;
  background: #7d9a82;
}

.tool-chip,
.tag-chip {
  border-radius: 13px 10px 14px 11px;
  background: #e7efe3;
  color: #6d8a72;
}

.tag-chip {
  background: #f8e4dd;
  color: #aa625a;
}

.step-number {
  border-radius: 50%;
  background: #7f9b85;
}

.sheet-actions {
  border-top: 1px dashed rgba(121, 109, 87, .24);
  background: rgba(248, 242, 231, .96);
}

.primary,
.secondary {
  border-radius: 17px 14px 18px 15px;
}

.primary {
  background: #7c9a83;
  box-shadow: 0 8px 18px rgba(91, 125, 98, .18);
}

.secondary {
  background: #e7e2d6;
  color: #666c66;
}

.reward-sheet {
  background:
    radial-gradient(ellipse at 7% 7%, rgba(241, 210, 130, .28), transparent 31%),
    radial-gradient(ellipse at 92% 14%, rgba(154, 199, 187, .25), transparent 34%),
    url("./assets/paper-grain.svg") 0 0 / 180px 180px,
    #faf5e9;
}

.reward-burst {
  border-color: rgba(255, 250, 225, .86);
  background: #efd284;
  box-shadow: 0 12px 25px rgba(139, 106, 50, .14);
}

.reward-sheet .eyebrow,
.reward-total {
  color: #738d78;
}

.unlock-row {
  border: 1px dashed rgba(117, 143, 117, .32);
  border-radius: 17px 14px 18px 15px;
  background: rgba(235, 243, 229, .84);
}

/* Designer artwork theme: hand-painted references */
:root {
  --forest-950: #403638;
  --forest-900: #57494f;
  --forest-800: #6c5b70;
  --forest-700: #80aaa0;
  --forest-100: #e4f2ed;
  --ink: #433a3c;
  --muted: #81777a;
  --paper: #fffdf7;
  --surface: #fffefb;
  --surface-soft: #eef8f4;
  --line: #d9cdca;
  --sun: #ffd957;
  --coral: #ff756f;
  --coral-dark: #d95163;
  --sky: #94d4d1;
  --berry: #f05698;
  --lavender: #806492;
  --peach: #ffaaa0;
  --lime: #d9e941;
  --art-black: #403638;
  --shadow-sm: 3px 4px 0 rgba(64, 54, 56, .06), 0 9px 20px rgba(77, 63, 66, .05);
  --shadow-md: 5px 7px 0 rgba(64, 54, 56, .07), 0 18px 36px rgba(77, 63, 66, .08);
  --shadow-lg: 0 32px 80px rgba(48, 42, 45, .24);
}

html,
body {
  background: #c8ded8;
}

.page::before {
  background:
    linear-gradient(rgba(198, 222, 215, .68), rgba(231, 234, 198, .45)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover;
  filter: saturate(1.08);
}

.page::after {
  background:
    radial-gradient(ellipse at 12% 20%, rgba(255, 108, 119, .2), transparent 18%),
    radial-gradient(ellipse at 88% 75%, rgba(95, 185, 187, .22), transparent 22%),
    radial-gradient(ellipse at 78% 12%, rgba(218, 233, 65, .18), transparent 18%);
  filter: blur(8px);
}

.desk-note,
.desk-flower {
  display: none;
}

.phone {
  border: 2px solid rgba(64, 54, 56, .72);
  border-radius: 35px 31px 38px 30px;
  background: #fffdf7;
  box-shadow: var(--shadow-lg), 8px 9px 0 rgba(64, 54, 56, .11);
}

.phone::before {
  background: url("./assets/paper-grain.svg") 0 0 / 180px 180px repeat;
  opacity: .08;
}

.phone::after {
  background:
    linear-gradient(79deg, transparent 0 48.9%, rgba(64, 54, 56, .025) 49.5%, rgba(255,255,255,.22) 50.1%, transparent 50.9%),
    linear-gradient(170deg, transparent 0 68%, rgba(64,54,56,.02) 68.4%, transparent 69%);
  opacity: .52;
}

.top {
  min-height: 84px;
  border-bottom: 2px dashed rgba(64, 54, 56, .17);
  background: rgba(255, 253, 247, .93);
}

.mark {
  width: 49px;
  height: 49px;
  overflow: hidden;
  border: 2px solid var(--art-black);
  border-radius: 17px 14px 19px 13px;
  background: #bfe4df;
  box-shadow: 3px 4px 0 rgba(64,54,56,.12);
  transform: rotate(-3deg);
}

.brand-art {
  width: 62px;
  height: 52px;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  transform: scale(1.13);
}

.brand-copy span {
  color: #a44f6e;
  font-size: 10px;
  font-weight: 800;
}

.brand h1 {
  color: var(--art-black);
  font-size: 22px;
  letter-spacing: -.035em;
}

.icon {
  border: 2px solid rgba(64, 54, 56, .72);
  background: #fffdf7;
  color: var(--lavender);
  box-shadow: 2px 3px 0 rgba(64,54,56,.11);
}

.content {
  background:
    linear-gradient(rgba(255, 253, 247, .72), rgba(255, 253, 247, .72)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover;
}

.quest-hero {
  min-height: 282px;
  border: 2px solid var(--art-black);
  border-radius: 29px 22px 31px 20px;
  background:
    radial-gradient(ellipse at 84% 35%, rgba(146, 215, 209, .58), transparent 46%),
    radial-gradient(ellipse at 16% 13%, rgba(255, 218, 85, .45), transparent 34%),
    #fffef9;
  box-shadow: 5px 6px 0 rgba(64,54,56,.1);
  transform: rotate(-.25deg);
}

.quest-hero::before {
  background:
    url("./assets/paper-grain.svg") 0 0 / 160px 160px repeat,
    linear-gradient(12deg, transparent 47%, rgba(64,54,56,.035) 48%, transparent 49%);
  opacity: .35;
}

.quest-hero::after {
  right: -30px;
  bottom: 48px;
  width: 205px;
  height: 86px;
  background: rgba(218, 233, 65, .2);
  box-shadow: -81px 22px 0 rgba(255, 100, 148, .13), 40px 9px 0 rgba(126, 202, 199, .2);
  filter: blur(6px);
}

.quest-copy {
  width: 60%;
}

.quest-label {
  border: 2px dashed rgba(64,54,56,.43);
  background: rgba(255,255,255,.76);
  color: #6d978d;
  transform: rotate(-1deg);
}

.quest-hero h2 {
  color: var(--art-black);
  font-size: 29px;
  font-weight: 900;
  letter-spacing: -.045em;
}

.quest-hero h2::after {
  content: "";
  display: block;
  width: 76px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: rgba(255, 85, 142, .28);
  transform: rotate(-2deg);
}

.quest-hero h3 {
  color: #e65468;
  font-size: 18px;
}

.quest-meta {
  color: #756d70;
}

.quest-visual {
  top: 46px;
  right: -8px;
  width: 176px;
  height: 154px;
  filter: none;
  transform: rotate(2deg);
}

.quest-visual::before {
  content: "";
  position: absolute;
  inset: 18px 12px 7px;
  border-radius: 48% 55% 46% 52%;
  background: rgba(255,255,255,.68);
  filter: blur(4px);
  transform: rotate(-4deg);
}

.forest-chef,
.buddy-shadow,
.hero-leaf {
  display: none;
}

.hero-reference-art {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 176px;
  height: 146px;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: saturate(1.12) contrast(1.02);
}

.quest-emoji {
  top: 2px;
  right: 4px;
  border: 2px solid var(--art-black);
  background: #fff36d;
  box-shadow: 2px 3px 0 rgba(64,54,56,.1);
}

.hero-spark {
  z-index: 8;
  background: #f25291;
}

.quest-cta {
  border: 2px solid var(--art-black);
  border-radius: 18px 13px 20px 14px;
  background: #ff7470;
  color: #fff;
  box-shadow: 4px 5px 0 rgba(64,54,56,.16);
  transform: rotate(.2deg);
}

.quest-cta:hover {
  transform: translateY(-1px) rotate(-.2deg);
  box-shadow: 5px 7px 0 rgba(64,54,56,.15);
}

.progress-panel,
.reward-track,
.quick-card,
.profile-section-card,
.rank-row,
.my-rank,
.recipe-meta-item,
.ingredient-row {
  border: 2px solid rgba(64,54,56,.72);
  background: rgba(255, 254, 249, .9);
  box-shadow: var(--shadow-sm);
}

.progress-panel {
  border-style: solid;
  border-radius: 22px 28px 20px 25px;
  background:
    radial-gradient(ellipse at 89% 18%, rgba(146, 215, 209, .42), transparent 35%),
    rgba(255, 254, 249, .93);
  transform: rotate(.2deg);
}

.progress-panel h3 b {
  color: #ef4f8d;
}

.eyebrow,
.screen-kicker,
.label {
  color: #91617b;
  letter-spacing: .07em;
}

.progress-track {
  border: 1px solid rgba(64,54,56,.1);
  background: #f1eadc;
}

.progress-track span {
  background: linear-gradient(90deg, #ff6e77, #f6d54e, #b9dc42, #75c7c6);
}

.progress-ring {
  background: conic-gradient(#d8e83f calc(var(--progress) * 1%), #eee7dc 0);
  box-shadow: 2px 3px 0 rgba(64,54,56,.1);
}

.progress-ring::before {
  background: #fffdf5;
}

.progress-ring strong {
  color: var(--lavender);
}

.section-head h3 {
  color: var(--art-black);
  font-weight: 900;
}

.reward-track {
  border-style: solid;
  border-radius: 23px 18px 26px 17px;
  background:
    radial-gradient(ellipse at 85% 7%, rgba(240, 86, 152, .15), transparent 38%),
    rgba(255,254,249,.92);
}

.reward-track::before {
  border-top: 3px dotted rgba(108,91,112,.35);
}

.reward-icon {
  border: 2px dashed rgba(64,54,56,.35);
  background: #fff7d8;
}

.reward-slot.unlocked .reward-icon {
  border-color: #92c7b7;
  background: #dff0df;
}

.reward-slot.current .reward-icon {
  border-color: #ef6470;
  background: #ffe7e0;
}

.quick-card {
  min-height: 142px;
  padding: 15px;
  overflow: hidden;
  border-radius: 24px 17px 25px 16px;
  background: rgba(255,254,249,.93);
  transform: rotate(-.35deg);
}

.quick-card:nth-child(2) {
  border-radius: 17px 25px 16px 24px;
  transform: rotate(.45deg);
}

.quick-card::after {
  display: none;
}

.quick-card.badge-card {
  border-color: rgba(64,54,56,.72);
  background: #fff6cc;
}

.quick-card-icon {
  position: relative;
  z-index: 3;
  border: 1px solid rgba(64,54,56,.22);
  background: #bde1dc;
  color: #4f837d;
}

.badge-card .quick-card-icon {
  background: #f4c9dc;
  color: #a13f71;
}

.quick-card h3,
.quick-card p {
  position: relative;
  z-index: 3;
  width: 72%;
}

.quick-reference-art {
  position: absolute;
  z-index: 1;
  right: -8px;
  bottom: -3px;
  width: 76px;
  height: 78px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .92;
}

.quick-reference-home {
  width: 70px;
  height: 82px;
}

.quick-reference-cup {
  right: -4px;
  width: 78px;
  height: 68px;
}

.map-hero,
.map-hero.dessert {
  min-height: 134px;
  padding: 20px 20px 24px;
  overflow: hidden;
  border-bottom: 2px solid var(--art-black);
  background:
    radial-gradient(ellipse at 80% 30%, rgba(148, 212, 209, .55), transparent 42%),
    #fff9d9;
  color: var(--art-black);
}

.map-hero.dessert {
  background:
    radial-gradient(ellipse at 81% 30%, rgba(240, 86, 152, .24), transparent 43%),
    #fff6f7;
}

.map-hero::before {
  right: 52px;
  top: -8px;
  width: 60px;
  height: 25px;
  background: rgba(221, 233, 65, .6);
}

.map-hero::after,
.map-hero.dessert::after {
  background: radial-gradient(circle at 8px 0, #fff9d9 0 9px, transparent 10px) 0 0 / 21px 15px repeat-x;
}

.map-hero.dessert::after {
  background: radial-gradient(circle at 8px 0, #fff6f7 0 9px, transparent 10px) 0 0 / 21px 15px repeat-x;
}

.map-hero-top,
.map-progress {
  position: relative;
  z-index: 3;
}

.map-hero h2 {
  color: var(--art-black);
  font-size: 27px;
  font-weight: 900;
}

.map-stat {
  border: 2px dashed rgba(64,54,56,.52);
  background: rgba(255,255,255,.72);
  color: var(--lavender);
}

.map-reference-art {
  position: absolute;
  z-index: 1;
  right: 54px;
  top: 2px;
  width: 112px;
  height: 94px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .88;
  transform: rotate(5deg);
}

.map-progress {
  width: 68%;
  margin-top: 14px;
  border: 1px solid rgba(64,54,56,.14);
  background: rgba(255,255,255,.66);
}

.map-progress span {
  background: linear-gradient(90deg, #ff6d76, #f6d54e, #b9dc42);
}

.map-route,
.map-route.dessert {
  background:
    linear-gradient(rgba(255,253,247,.68), rgba(255,253,247,.68)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover repeat-y;
}

.map-route.dessert {
  background:
    linear-gradient(rgba(255,249,249,.68), rgba(255,249,249,.68)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover repeat-y;
}

.map-route::before,
.map-route.dessert::before {
  width: 4px;
  background: repeating-linear-gradient(to bottom, #86bab0 0 8px, transparent 8px 15px);
  opacity: .78;
  transform: translateX(-50%) rotate(.5deg);
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, #e785af 0 8px, transparent 8px 15px);
}

.forest-goal {
  grid-template-columns: 58px 1fr;
  min-height: 72px;
  border: 2px solid var(--art-black);
  border-radius: 24px 17px 25px 16px;
  background: rgba(255,253,238,.94);
  box-shadow: 4px 5px 0 rgba(64,54,56,.09);
}

.forest-goal.trailhead {
  background: rgba(255,247,213,.94);
}

.goal-crown {
  display: none;
}

.goal-reference-art {
  width: 57px;
  height: 54px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
}

.goal-reference-home {
  height: 62px;
}

.chapter-marker {
  border: 2px dashed rgba(64,54,56,.44);
  border-radius: 16px 11px 18px 12px;
  background: rgba(255,255,249,.9);
  color: #598a82;
  box-shadow: 2px 3px 0 rgba(64,54,56,.07);
}

.map-route.dessert .chapter-marker {
  border-color: rgba(217,81,99,.45);
  color: #bd527e;
}

.forest-prop {
  display: none;
}

.map-stop,
.map-step.right .map-stop {
  width: 79%;
  min-height: 92px;
  border: 2px solid rgba(64,54,56,.7);
  border-radius: 23px 16px 26px 15px;
  background: rgba(255,254,249,.93);
  box-shadow: 4px 5px 0 rgba(64,54,56,.08);
  transform: rotate(-.55deg);
}

.map-step {
  animation-delay: 0ms !important;
  animation-duration: 260ms;
}

.map-step.right .map-stop {
  border-radius: 16px 25px 15px 24px;
  transform: rotate(.6deg);
}

.map-stop:hover:not(:disabled),
.map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(0);
  box-shadow: 5px 7px 0 rgba(64,54,56,.09);
}

.map-stop.available {
  border: 2px solid #e95c6e;
  background: rgba(255,245,235,.96);
  box-shadow: 5px 7px 0 rgba(240,86,152,.15);
}

.map-stop.cleared {
  border-color: #7aaf94;
  background: rgba(236,247,218,.95);
}

.map-stop.skipped {
  border: 2px dashed #7e6592;
  background: rgba(243,238,249,.95);
}

.map-stop.locked {
  border-color: rgba(64,54,56,.28);
  background: rgba(242,239,232,.9);
}

.node-badge {
  border: 2px dashed rgba(64,54,56,.36);
  background: #fff176;
  box-shadow: 2px 3px 0 rgba(64,54,56,.08);
}

.map-stop.cleared .node-badge {
  border-color: #5f8e78;
  background: #b9dd43;
}

.map-stop.available .node-badge {
  border-color: #e35d6b;
  background: #ffd5cc;
  color: #c84c5e;
}

.current-stage-art {
  position: absolute;
  z-index: 4;
  bottom: 2px;
  width: 54px;
  height: 76px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: rotate(9deg);
}

.map-step.left .current-stage-art {
  right: -4px;
}

.map-step.right .current-stage-art {
  left: -4px;
  transform: scaleX(-1) rotate(9deg);
}

.screen-heading {
  min-height: 104px;
  padding-right: 102px;
}

.screen-heading::after {
  background: rgba(240,86,152,.34);
}

.screen-heading h2 {
  color: var(--art-black);
  font-weight: 900;
}

.screen-reference-art {
  position: absolute;
  right: -4px;
  top: -14px;
  width: 102px;
  height: 94px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: rotate(5deg);
}

.segment {
  border: 2px solid rgba(64,54,56,.5);
  background: #e8f5f1;
}

.segment button.active {
  border: 1px solid rgba(64,54,56,.22);
  background: #fff36e;
  color: var(--art-black);
}

.podium {
  border: 2px solid var(--art-black);
  border-radius: 27px 19px 25px 17px;
  background:
    radial-gradient(ellipse at 17% 18%, rgba(255,218,78,.78), transparent 34%),
    radial-gradient(ellipse at 84% 13%, rgba(240,86,152,.26), transparent 39%),
    linear-gradient(155deg, #bce4df, #a9d9d7 54%, #d3c1df);
  color: var(--art-black);
  box-shadow: 5px 7px 0 rgba(64,54,56,.1);
}

.podium::before {
  background: #d9e941;
  opacity: .32;
}

.podium-avatar {
  border: 2px solid var(--art-black);
  background: #fff067;
}

.podium-person.first .podium-avatar {
  border-color: var(--art-black);
  background: #ffccd8;
}

.my-rank {
  border-style: solid;
  background: #ffe6dc;
}

.my-rank-mark {
  border: 2px solid var(--art-black);
  background: #f05698;
  box-shadow: 2px 3px 0 rgba(64,54,56,.12);
}

.rank-row:nth-child(3n + 1) .avatar { background: #d9e941; color: #4b663e; }
.rank-row:nth-child(3n + 2) .avatar { background: #d4c4e0; color: #644d77; }
.rank-row:nth-child(3n) .avatar { background: #a8dcd8; color: #3e7773; }

.avatar {
  border: 1px solid rgba(64,54,56,.3);
}

.profile-hero {
  min-height: 205px;
  border: 2px solid var(--art-black);
  border-radius: 28px 20px 30px 18px;
  background:
    radial-gradient(ellipse at 86% 20%, rgba(255,213,75,.55), transparent 37%),
    radial-gradient(ellipse at 7% 90%, rgba(147,213,207,.5), transparent 45%),
    #fffdf4;
  color: var(--art-black);
  box-shadow: 5px 7px 0 rgba(64,54,56,.1);
}

.profile-main {
  padding-right: 90px;
}

.profile-avatar {
  border: 2px solid var(--art-black);
  background: #ff7695;
  color: #fff;
  box-shadow: 3px 4px 0 rgba(64,54,56,.11);
}

.profile-reference-art {
  position: absolute;
  z-index: 2;
  right: 12px;
  top: 12px;
  width: 92px;
  height: 102px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: rotate(4deg);
}

.level-chip {
  border: 1px solid rgba(64,54,56,.25);
  background: #fff26f;
  color: #715769;
}

.profile-stats,
.profile-stat + .profile-stat {
  border-color: rgba(64,54,56,.28);
}

.profile-section-card {
  border-radius: 24px 17px 25px 16px;
}

.section-title-icon {
  border: 1px solid rgba(64,54,56,.25);
}

.badge-item {
  border: 2px dashed rgba(64,54,56,.28);
  background: rgba(245,241,233,.86);
}

.badge-item.earned {
  border-style: solid;
  border-color: #7bae91;
  background: #ebf5da;
}

.sticker-cell {
  border: 1px solid rgba(64,54,56,.28);
  background: #f5f0e8;
}

.sticker-cell:not(.locked) {
  background: #fff27a;
}

.allergy-item,
.skip-row {
  border: 2px solid rgba(64,54,56,.34);
  background: rgba(255,254,249,.9);
}

.allergy-item.active {
  border-color: #dc566a;
  background: #ffdcd8;
  color: #b4435c;
}

.tabs {
  border-top: 2px dashed rgba(64,54,56,.19);
  background: rgba(255,253,247,.95);
}

.tabs button {
  color: #8b7e82;
}

.tabs button:nth-child(1) svg { color: #e65468; }
.tabs button:nth-child(2) svg { color: #5ca79b; }
.tabs button:nth-child(3) svg { color: #f05698; }
.tabs button:nth-child(4) svg { color: #9aa81c; }
.tabs button:nth-child(5) svg { color: #73558a; }

.tabs button.active {
  border: 2px solid rgba(64,54,56,.58);
  background: #fff36e;
  color: var(--art-black);
  box-shadow: 2px 3px 0 rgba(64,54,56,.1);
  transform: rotate(-1deg);
}

.tabs button.active::before {
  background: #f05698;
}

.modal {
  background: rgba(64,54,56,.52);
}

.sheet {
  border: 2px solid var(--art-black);
  background:
    linear-gradient(rgba(255,253,247,.78), rgba(255,253,247,.78)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover;
  box-shadow: 8px 9px 0 rgba(64,54,56,.12), var(--shadow-lg);
}

.recipe-cover,
.recipe-cover.dessert {
  min-height: 228px;
  border-bottom: 2px dashed rgba(64,54,56,.25);
  background:
    radial-gradient(ellipse at 82% 48%, rgba(146,215,209,.55), transparent 42%),
    radial-gradient(ellipse at 18% 4%, rgba(255,216,75,.42), transparent 38%),
    #fffdf6;
  color: var(--art-black);
}

.recipe-cover.dessert {
  background:
    radial-gradient(ellipse at 82% 48%, rgba(240,86,152,.28), transparent 43%),
    radial-gradient(ellipse at 18% 4%, rgba(255,216,75,.42), transparent 38%),
    #fff8f8;
}

.recipe-cover::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 17px;
  bottom: 7px;
  width: 145px;
  height: 112px;
  border-radius: 53% 46% 51% 48%;
  background: rgba(255,255,255,.58);
  filter: blur(4px);
  transform: rotate(3deg);
}

.recipe-stage-chip {
  border: 2px dashed rgba(64,54,56,.43);
  background: rgba(255,255,255,.74);
  color: #5c8d84;
}

.recipe-cover .icon {
  border: 2px solid rgba(64,54,56,.68);
  background: #fffef8;
  color: var(--lavender);
}

.recipe-cover-copy {
  width: 57%;
}

.recipe-cover h2 {
  color: var(--art-black);
  font-weight: 900;
}

.recipe-reference-art {
  position: absolute;
  z-index: 2;
  right: 18px;
  bottom: 4px;
  width: 145px;
  height: 128px;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: rotate(3deg);
}

.recipe-utensil-art {
  position: absolute;
  z-index: 1;
  right: 136px;
  bottom: -18px;
  width: 57px;
  height: 91px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .75;
  transform: rotate(-11deg);
}

.recipe-meta-item {
  border-radius: 17px 12px 18px 13px;
  box-shadow: 2px 3px 0 rgba(64,54,56,.06);
}

.warning {
  border: 2px solid #d85a69;
  background: #ffe2dc;
}

.ingredient-row {
  border: 1px solid rgba(64,54,56,.34);
  box-shadow: none;
}

.ingredient-row.checked {
  background: #e8f2dc;
}

.tool-chip {
  border: 1px solid rgba(64,54,56,.2);
  background: #dff2ed;
  color: #4f857c;
}

.tag-chip {
  border: 1px solid rgba(64,54,56,.2);
  background: #ffdcd7;
  color: #b54b5d;
}

.step-number {
  border: 2px solid var(--art-black);
  background: #d8e941;
  color: var(--art-black);
}

.sheet-actions {
  border-top: 2px dashed rgba(64,54,56,.22);
  background: rgba(255,253,247,.97);
}

.primary,
.secondary {
  border: 2px solid var(--art-black);
  box-shadow: 3px 4px 0 rgba(64,54,56,.11);
}

.primary {
  background: #ff706e;
}

.secondary {
  background: #ddd1e7;
  color: #594865;
}

.reward-sheet {
  background:
    linear-gradient(rgba(255,253,247,.7), rgba(255,253,247,.7)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover;
}

.reward-reference-art {
  position: absolute;
  right: 12px;
  top: 7px;
  width: 104px;
  height: 92px;
  object-fit: contain;
  mix-blend-mode: multiply;
  opacity: .75;
  transform: rotate(8deg);
}

.reward-burst {
  border: 2px solid var(--art-black);
  background: #fff26b;
  box-shadow: 4px 5px 0 rgba(64,54,56,.11);
}

.reward-sheet .eyebrow,
.reward-total {
  color: #a14370;
}

.unlock-row {
  border: 2px dashed #709d89;
  background: #e8f3dd;
}

.brand-art,
.hero-reference-art,
.quick-reference-art,
.map-reference-art,
.goal-reference-art,
.current-stage-art,
.screen-reference-art,
.profile-reference-art,
.recipe-reference-art,
.recipe-utensil-art,
.reward-reference-art {
  mix-blend-mode: normal;
}

/* Watercolor UI system v3: soft paint, no paper folds, no heavy outlines */
:root {
  --ink: #4d484a;
  --muted: #898184;
  --paper: #fffefb;
  --surface: rgba(255, 255, 255, .76);
  --line: rgba(98, 115, 110, .14);
  --coral: #ef7b7a;
  --coral-dark: #c85d6b;
  --sky: #93ceca;
  --berry: #e986ae;
  --sun: #f5d878;
  --lime: #cbdc72;
  --lavender: #a998bb;
  --shadow-sm: 0 8px 22px rgba(80, 104, 97, .07);
  --shadow-md: 0 14px 34px rgba(80, 104, 97, .1);
  --shadow-lg: 0 32px 80px rgba(60, 81, 75, .2);
}

html,
body {
  background: #dfeeea;
}

.page::before {
  background:
    linear-gradient(rgba(229, 242, 238, .58), rgba(249, 244, 220, .32)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center / cover;
  filter: saturate(.92);
}

.page::after {
  display: none;
}

.phone {
  border: 0;
  border-radius: 38px 34px 41px 35px;
  background: #fffefb;
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(255,255,255,.18);
  transform: none;
}

.phone::before,
.phone::after {
  display: none;
}

.top {
  position: relative;
  min-height: 84px;
  border: 0;
  background: rgba(255,254,251,.92);
}

.top::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 0;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(131,198,192,.24), rgba(232,143,174,.22), transparent);
  filter: blur(2px);
}

.mark {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 47% 53% 45% 55%;
  background: radial-gradient(ellipse, rgba(142,207,201,.35), rgba(255,255,255,.15) 68%, transparent 72%);
  box-shadow: none;
  transform: rotate(-3deg);
}

.brand-art {
  width: 58px;
  height: 50px;
  transform: scale(1.05);
}

.brand-copy span {
  color: #b26f88;
  font-weight: 650;
}

.brand h1 {
  color: #514c4d;
  font-size: 21px;
  font-weight: 750;
}

.icon {
  border: 0;
  background:
    radial-gradient(ellipse at 45% 48%, rgba(176,157,193,.2), rgba(255,255,255,.52) 58%, transparent 72%);
  color: #8b769c;
  box-shadow: none;
}

.icon:hover {
  border: 0;
  background: radial-gradient(ellipse, rgba(176,157,193,.28), rgba(255,255,255,.62) 66%, transparent 72%);
}

.content {
  background:
    linear-gradient(rgba(255,254,251,.78), rgba(255,254,251,.78)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center top / cover;
}

.quest-hero {
  min-height: 282px;
  border: 0;
  border-radius: 42px 52px 44px 58px;
  background:
    radial-gradient(ellipse at 82% 34%, rgba(131,203,197,.4) 0 22%, transparent 52%),
    radial-gradient(ellipse at 17% 11%, rgba(245,216,120,.36) 0 18%, transparent 43%),
    radial-gradient(ellipse at 35% 96%, rgba(235,139,172,.17) 0 19%, transparent 46%),
    rgba(255,255,255,.7);
  box-shadow: var(--shadow-md);
  transform: none;
}

.quest-hero::before {
  display: none;
}

.quest-hero::after {
  right: -31px;
  bottom: 48px;
  width: 208px;
  height: 90px;
  border-radius: 56% 42% 51% 38%;
  background: rgba(202,219,111,.15);
  box-shadow: -78px 18px 0 rgba(232,134,173,.1), 44px 8px 0 rgba(121,193,193,.13);
  filter: blur(10px);
}

.quest-label {
  padding: 7px 12px;
  border: 0;
  background: radial-gradient(ellipse, rgba(245,216,120,.34), rgba(255,255,255,.48) 72%, transparent 75%);
  color: #729b92;
  box-shadow: none;
}

.quest-hero h2 {
  color: #504a4c;
  font-size: 29px;
  font-weight: 760;
}

.quest-hero h2::after {
  height: 7px;
  background: rgba(235,133,172,.2);
  filter: blur(1px);
}

.quest-hero h3 {
  color: #cf6873;
  font-weight: 700;
}

.quest-visual::before {
  background: rgba(255,255,255,.38);
  filter: blur(8px);
}

.quest-emoji {
  border: 0;
  background: radial-gradient(ellipse, rgba(245,216,120,.75), rgba(255,255,255,.25) 70%, transparent 73%);
  box-shadow: none;
}

.hero-spark {
  background: #df85ac;
  opacity: .7;
}

.quest-cta {
  border: 0;
  border-radius: 24px 30px 25px 34px;
  background:
    radial-gradient(ellipse at 17% 20%, rgba(255,255,255,.2), transparent 42%),
    linear-gradient(105deg, #ed8b82, #e77b83 56%, #e98aa4);
  box-shadow: 0 9px 22px rgba(207,103,113,.17);
  transform: none;
}

.quest-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(207,103,113,.2);
}

.cta-icon {
  background: rgba(255,255,255,.25);
}

.progress-panel,
.reward-track,
.quick-card,
.profile-section-card,
.rank-row,
.my-rank,
.recipe-meta-item,
.ingredient-row {
  border: 0;
  box-shadow: none;
}

.progress-panel {
  position: relative;
  margin-top: 18px;
  padding: 19px 18px;
  border-radius: 36px 45px 38px 48px;
  background:
    radial-gradient(ellipse at 89% 24%, rgba(137,204,198,.3), transparent 35%),
    radial-gradient(ellipse at 15% 92%, rgba(246,215,119,.15), transparent 42%),
    rgba(255,255,255,.56);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.progress-panel::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 28px;
  bottom: -4px;
  height: 8px;
  border-radius: 50%;
  background: rgba(137,204,198,.15);
  filter: blur(4px);
}

.progress-panel h3 {
  font-weight: 650;
}

.progress-panel h3 b {
  color: #d66f8a;
  font-weight: 750;
}

.eyebrow,
.screen-kicker,
.label {
  color: #aa7188;
  font-weight: 650;
  letter-spacing: .06em;
}

.progress-track {
  height: 9px;
  border: 0;
  background: rgba(232,226,209,.65);
  filter: blur(.1px);
}

.progress-track span {
  background: linear-gradient(90deg, rgba(232,128,143,.9), rgba(244,210,111,.9), rgba(179,207,112,.9), rgba(117,191,188,.9));
}

.progress-ring {
  width: 78px;
  height: 78px;
  border-radius: 47% 53% 45% 55%;
  background:
    radial-gradient(ellipse at 43% 41%, rgba(255,255,255,.82) 0 41%, transparent 43%),
    radial-gradient(ellipse, rgba(141,204,198,.38), rgba(141,204,198,.11) 70%, transparent 73%);
  box-shadow: none;
}

.progress-ring::before {
  display: none;
}

.progress-ring strong {
  color: #8d789e;
  font-weight: 700;
}

.section-head h3,
.screen-heading h2,
.profile-title-row h2,
.recipe-cover h2 {
  color: #504a4c;
  font-weight: 740;
}

.section-head span {
  font-weight: 550;
}

.reward-track {
  padding: 15px;
  border-radius: 34px 42px 36px 46px;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(231,139,174,.15), transparent 38%),
    radial-gradient(ellipse at 9% 87%, rgba(140,203,198,.12), transparent 39%),
    rgba(255,255,255,.55);
  box-shadow: var(--shadow-sm);
}

.reward-track::before {
  top: 41px;
  border-top: 2px dotted rgba(151,139,145,.24);
}

.reward-icon {
  border: 0;
  border-radius: 47% 53% 45% 55%;
  background: radial-gradient(ellipse, rgba(245,216,120,.28), rgba(255,255,255,.52) 69%, transparent 72%);
  box-shadow: none;
}

.reward-slot:nth-child(2n) .reward-icon {
  border-radius: 55% 45% 52% 48%;
}

.reward-slot.unlocked .reward-icon {
  background: radial-gradient(ellipse, rgba(167,204,130,.4), rgba(255,255,255,.52) 70%, transparent 73%);
}

.reward-slot.current .reward-icon {
  border: 0;
  background: radial-gradient(ellipse, rgba(236,133,159,.36), rgba(255,255,255,.55) 70%, transparent 74%);
}

.quick-card,
.quick-card:nth-child(2) {
  min-height: 142px;
  border-radius: 39px 48px 38px 51px;
  background:
    radial-gradient(ellipse at 83% 80%, rgba(139,204,198,.22), transparent 43%),
    rgba(255,255,255,.55);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.quick-card:nth-child(2),
.quick-card.badge-card {
  background:
    radial-gradient(ellipse at 82% 78%, rgba(231,139,174,.2), transparent 43%),
    rgba(251,244,212,.55);
}

.quick-card-icon,
.badge-card .quick-card-icon {
  border: 0;
  background: radial-gradient(ellipse, rgba(140,203,198,.25), rgba(255,255,255,.34) 68%, transparent 72%);
}

.badge-card .quick-card-icon {
  background: radial-gradient(ellipse, rgba(231,139,174,.24), rgba(255,255,255,.34) 68%, transparent 72%);
}

.quick-card h3 {
  font-weight: 700;
}

.map-hero,
.map-hero.dessert {
  min-height: 136px;
  border: 0;
  background:
    radial-gradient(ellipse at 82% 28%, rgba(137,204,198,.34), transparent 44%),
    radial-gradient(ellipse at 12% 92%, rgba(245,216,120,.18), transparent 42%),
    rgba(255,253,238,.82);
  box-shadow: 0 8px 24px rgba(89,111,104,.06);
}

.map-hero.dessert {
  background:
    radial-gradient(ellipse at 82% 28%, rgba(233,142,175,.28), transparent 44%),
    radial-gradient(ellipse at 12% 92%, rgba(143,205,200,.15), transparent 42%),
    rgba(255,248,249,.84);
}

.map-hero::before {
  display: none;
}

.map-hero::after,
.map-hero.dessert::after {
  bottom: -8px;
  height: 15px;
  background: radial-gradient(ellipse at 50% 0, rgba(145,203,196,.13), transparent 70%);
  filter: blur(4px);
}

.map-hero h2 {
  font-weight: 730;
}

.map-stat {
  border: 0;
  background: radial-gradient(ellipse, rgba(255,255,255,.72), rgba(176,158,193,.14) 72%, transparent 75%);
  color: #8f789c;
}

.map-progress {
  border: 0;
  background: rgba(225,218,207,.5);
}

.map-reference-art {
  opacity: .76;
}

.map-route,
.map-route.dessert {
  background:
    linear-gradient(rgba(255,254,251,.82), rgba(255,254,251,.82)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center top / cover repeat-y;
}

.map-route.dessert {
  background:
    linear-gradient(rgba(255,251,251,.82), rgba(255,251,251,.82)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center top / cover repeat-y;
}

.map-route::before,
.map-route.dessert::before {
  width: 5px;
  border: 0;
  background: repeating-linear-gradient(to bottom, rgba(107,180,174,.48) 0 8px, transparent 8px 17px);
  box-shadow: none;
  filter: blur(.25px);
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, rgba(222,125,164,.42) 0 8px, transparent 8px 17px);
}

.forest-goal,
.forest-goal.trailhead {
  grid-template-columns: 59px 1fr;
  border: 0;
  border-radius: 38px 48px 36px 51px;
  background:
    radial-gradient(ellipse at 18% 50%, rgba(245,216,120,.27), transparent 42%),
    rgba(255,255,255,.55);
  box-shadow: var(--shadow-sm);
  transform: none;
}

.forest-goal.trailhead {
  background:
    radial-gradient(ellipse at 18% 50%, rgba(230,140,173,.16), transparent 42%),
    rgba(255,250,231,.6);
}

.forest-goal b {
  font-weight: 700;
}

.chapter-marker {
  padding: 8px 16px;
  border: 0;
  border-radius: 44% 56% 42% 58%;
  background: radial-gradient(ellipse, rgba(139,204,198,.2), rgba(255,255,255,.58) 72%, transparent 76%);
  box-shadow: none;
  transform: none;
}

.map-route.dessert .chapter-marker {
  border: 0;
  background: radial-gradient(ellipse, rgba(233,140,175,.2), rgba(255,255,255,.58) 72%, transparent 76%);
}

.map-stop,
.map-step.right .map-stop {
  position: relative;
  width: 78%;
  min-height: 91px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.map-stop::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 2px -2px 0;
  border-radius: 42px 54px 40px 58px;
  background:
    radial-gradient(ellipse at 12% 50%, rgba(142,203,198,.18), transparent 37%),
    rgba(255,255,255,.62);
  box-shadow: 0 9px 24px rgba(87,108,102,.07);
}

.map-step.right .map-stop::before {
  border-radius: 54px 40px 57px 42px;
}

.map-stop > * {
  position: relative;
  z-index: 1;
}

.map-stop:hover:not(:disabled),
.map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: none;
}

.map-stop.available,
.map-stop.cleared,
.map-stop.skipped,
.map-stop.locked {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.map-stop.available::before {
  background:
    radial-gradient(ellipse at 13% 50%, rgba(234,126,151,.27), transparent 39%),
    radial-gradient(ellipse at 84% 22%, rgba(245,216,120,.17), transparent 36%),
    rgba(255,252,247,.7);
  box-shadow: 0 10px 27px rgba(193,105,124,.09);
}

.map-stop.cleared::before {
  background:
    radial-gradient(ellipse at 14% 50%, rgba(177,205,113,.32), transparent 42%),
    rgba(251,255,245,.68);
}

.map-stop.skipped::before {
  background:
    radial-gradient(ellipse at 14% 50%, rgba(175,157,194,.26), transparent 42%),
    rgba(252,249,255,.68);
}

.map-stop.locked::before {
  background:
    radial-gradient(ellipse at 14% 50%, rgba(176,187,182,.14), transparent 42%),
    rgba(250,249,245,.58);
  box-shadow: none;
}

.node-badge,
.map-stop.cleared .node-badge,
.map-stop.available .node-badge,
.map-stop.locked .node-badge {
  border: 0;
  border-radius: 46% 54% 43% 57%;
  background: radial-gradient(ellipse, rgba(245,216,120,.45), rgba(255,255,255,.4) 70%, transparent 73%);
  box-shadow: none;
}

.map-stop.cleared .node-badge {
  background: radial-gradient(ellipse, rgba(180,206,112,.52), rgba(255,255,255,.35) 70%, transparent 73%);
}

.map-stop.available .node-badge {
  background: radial-gradient(ellipse, rgba(235,126,150,.4), rgba(255,255,255,.38) 70%, transparent 73%);
}

.map-stop.locked .node-badge {
  background: radial-gradient(ellipse, rgba(180,190,185,.2), rgba(255,255,255,.35) 70%, transparent 73%);
}

.node-title {
  font-weight: 700;
}

.node-arrow {
  opacity: .45;
}

.screen-heading {
  min-height: 104px;
}

.screen-heading::after {
  height: 9px;
  background: rgba(233,140,175,.18);
  filter: blur(3px);
}

.segment {
  border: 0;
  border-radius: 28px 34px 27px 36px;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(142,203,198,.19), transparent 46%),
    rgba(255,255,255,.5);
  box-shadow: var(--shadow-sm);
}

.segment button.active {
  border: 0;
  border-radius: 23px 29px 22px 31px;
  background: radial-gradient(ellipse, rgba(245,216,120,.48), rgba(255,255,255,.44) 76%, transparent 79%);
  box-shadow: none;
}

.podium {
  border: 0;
  border-radius: 45px 55px 42px 59px;
  background:
    radial-gradient(ellipse at 16% 18%, rgba(245,216,120,.48), transparent 35%),
    radial-gradient(ellipse at 86% 14%, rgba(232,139,174,.24), transparent 40%),
    radial-gradient(ellipse at 50% 100%, rgba(177,205,112,.28), transparent 48%),
    rgba(175,213,211,.48);
  color: #514d4e;
  box-shadow: var(--shadow-md);
}

.podium::before {
  background: rgba(183,207,113,.2);
}

.podium-avatar,
.podium-person.first .podium-avatar {
  border: 0;
  background: radial-gradient(ellipse, rgba(245,216,120,.7), rgba(255,255,255,.38) 72%, transparent 75%);
}

.podium-person.first .podium-avatar {
  background: radial-gradient(ellipse, rgba(233,140,175,.55), rgba(255,255,255,.4) 72%, transparent 75%);
}

.podium-block,
.podium-person.first .podium-block {
  background: rgba(255,255,255,.23);
}

.my-rank {
  border-radius: 32px 40px 31px 43px;
  background:
    radial-gradient(ellipse at 9% 50%, rgba(233,140,175,.27), transparent 34%),
    rgba(255,255,255,.56);
  box-shadow: var(--shadow-sm);
}

.my-rank-mark {
  border: 0;
  background: radial-gradient(ellipse, rgba(233,140,175,.72), rgba(255,255,255,.22) 75%, transparent 78%);
  box-shadow: none;
}

.rank-list {
  gap: 0;
  padding: 2px 9px;
  border-radius: 34px 43px 33px 46px;
  background: rgba(255,255,255,.48);
  box-shadow: var(--shadow-sm);
}

.rank-row,
.rank-row:nth-child(even) {
  border: 0;
  border-bottom: 1px dashed rgba(118,137,130,.18);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.rank-row:last-child {
  border-bottom: 0;
}

.avatar {
  border: 0;
}

.profile-hero {
  border: 0;
  border-radius: 44px 56px 42px 60px;
  background:
    radial-gradient(ellipse at 88% 18%, rgba(245,216,120,.36), transparent 39%),
    radial-gradient(ellipse at 8% 92%, rgba(139,204,198,.34), transparent 47%),
    rgba(255,255,255,.58);
  box-shadow: var(--shadow-md);
}

.profile-hero::after {
  display: none;
}

.profile-avatar {
  border: 0;
  border-radius: 46% 54% 43% 57%;
  background: radial-gradient(ellipse, rgba(233,140,175,.62), rgba(255,255,255,.25) 73%, transparent 76%);
  color: #fff;
  box-shadow: none;
}

.level-chip {
  border: 0;
  background: radial-gradient(ellipse, rgba(245,216,120,.52), rgba(255,255,255,.35) 74%, transparent 77%);
}

.profile-stats,
.profile-stat + .profile-stat {
  border-color: rgba(99,130,120,.15);
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card {
  border-radius: 39px 49px 37px 52px;
  background:
    radial-gradient(ellipse at 91% 5%, rgba(139,204,198,.1), transparent 39%),
    rgba(255,255,255,.52);
  box-shadow: var(--shadow-sm);
}

.profile-section:nth-of-type(even) .profile-section-card {
  background:
    radial-gradient(ellipse at 91% 5%, rgba(232,140,175,.1), transparent 39%),
    rgba(255,255,255,.52);
}

.section-title-icon {
  border: 0;
  background: radial-gradient(ellipse, rgba(139,204,198,.26), rgba(255,255,255,.35) 72%, transparent 75%);
}

.badge-item,
.badge-item.earned {
  border: 0;
  border-radius: 43% 57% 40% 60%;
  background: radial-gradient(ellipse, rgba(186,192,188,.13), rgba(255,255,255,.4) 73%, transparent 76%);
}

.badge-item.earned {
  background: radial-gradient(ellipse, rgba(180,206,112,.29), rgba(255,255,255,.42) 73%, transparent 76%);
}

.sticker-cell,
.sticker-cell:not(.locked) {
  border: 0;
  border-radius: 44% 56% 42% 58%;
  background: radial-gradient(ellipse, rgba(184,194,189,.12), rgba(255,255,255,.4) 72%, transparent 75%);
}

.sticker-cell:not(.locked) {
  background: radial-gradient(ellipse, rgba(245,216,120,.38), rgba(255,255,255,.4) 72%, transparent 75%);
}

.allergy-item,
.skip-row {
  border: 0;
  border-radius: 26px 32px 25px 34px;
  background: rgba(248,248,243,.64);
}

.allergy-item.active {
  border: 0;
  background: radial-gradient(ellipse at 18% 50%, rgba(233,140,175,.26), rgba(255,255,255,.46) 83%, transparent 86%);
}

.tabs {
  gap: 5px;
  padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
  border: 0;
  background: rgba(255,254,251,.94);
  box-shadow: 0 -8px 24px rgba(89,111,104,.055);
}

.tabs button {
  min-height: 62px;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #8c8587;
  box-shadow: none;
  transform: none;
}

.tabs button:hover {
  background: transparent;
}

.tabs button.active {
  border: 0;
  background: transparent;
  color: #595153;
  box-shadow: none;
  transform: none;
}

.tabs button.active::before {
  display: none;
}

.tab-art-wrap {
  width: 42px;
  height: 39px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 44% 56%;
  background: radial-gradient(ellipse, rgba(139,204,198,.16), rgba(255,255,255,.28) 72%, transparent 75%);
  transition: transform 180ms ease, background 180ms ease;
}

.tabs button:nth-child(2) .tab-art-wrap {
  background: radial-gradient(ellipse, rgba(245,216,120,.18), rgba(255,255,255,.28) 72%, transparent 75%);
}

.tabs button:nth-child(3) .tab-art-wrap {
  background: radial-gradient(ellipse, rgba(233,140,175,.16), rgba(255,255,255,.28) 72%, transparent 75%);
}

.tabs button:nth-child(4) .tab-art-wrap {
  background: radial-gradient(ellipse, rgba(180,206,112,.18), rgba(255,255,255,.28) 72%, transparent 75%);
}

.tabs button:nth-child(5) .tab-art-wrap {
  background: radial-gradient(ellipse, rgba(174,157,191,.16), rgba(255,255,255,.28) 72%, transparent 75%);
}

.tabs button.active .tab-art-wrap {
  background: radial-gradient(ellipse, rgba(245,216,120,.48), rgba(255,255,255,.38) 73%, transparent 76%);
  transform: translateY(-3px) scale(1.08) rotate(-2deg);
}

.tab-art {
  width: 36px;
  height: 34px;
  object-fit: contain;
}

.tabs button:nth-child(5) .tab-art {
  width: 25px;
  height: 35px;
}

.tabs button > span:last-child {
  font-size: 9px;
  font-weight: 650;
}

.modal {
  background: rgba(72,86,82,.36);
  backdrop-filter: blur(8px);
}

.sheet {
  border: 0;
  border-radius: 40px 47px 38px 51px;
  background:
    linear-gradient(rgba(255,254,251,.82), rgba(255,254,251,.82)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center / cover;
  box-shadow: var(--shadow-lg);
}

.recipe-cover,
.recipe-cover.dessert {
  border: 0;
  border-radius: 40px 47px 0 0;
  background:
    radial-gradient(ellipse at 82% 48%, rgba(139,204,198,.34), transparent 45%),
    radial-gradient(ellipse at 16% 4%, rgba(245,216,120,.25), transparent 40%),
    rgba(255,255,255,.55);
}

.recipe-cover.dessert {
  background:
    radial-gradient(ellipse at 82% 48%, rgba(233,140,175,.27), transparent 46%),
    radial-gradient(ellipse at 16% 4%, rgba(245,216,120,.22), transparent 40%),
    rgba(255,255,255,.56);
}

.recipe-cover::before {
  display: none;
}

.recipe-cover::after {
  background: rgba(255,255,255,.3);
  filter: blur(9px);
}

.recipe-stage-chip {
  border: 0;
  background: radial-gradient(ellipse, rgba(139,204,198,.21), rgba(255,255,255,.45) 73%, transparent 77%);
}

.recipe-cover .icon {
  border: 0;
  background: radial-gradient(ellipse, rgba(174,157,191,.18), rgba(255,255,255,.55) 73%, transparent 77%);
}

.recipe-meta-item {
  border-radius: 34% 46% 38% 49%;
  background: radial-gradient(ellipse, rgba(139,204,198,.12), rgba(255,255,255,.58) 76%, transparent 80%);
}

.recipe-meta-item:nth-child(2) {
  background: radial-gradient(ellipse, rgba(245,216,120,.14), rgba(255,255,255,.58) 76%, transparent 80%);
}

.recipe-meta-item:nth-child(3) {
  background: radial-gradient(ellipse, rgba(233,140,175,.12), rgba(255,255,255,.58) 76%, transparent 80%);
}

.warning {
  border: 0;
  border-radius: 28px 34px 27px 37px;
  background: radial-gradient(ellipse at 13% 50%, rgba(233,140,175,.25), rgba(255,255,255,.48) 82%, transparent 86%);
}

.ingredient-list {
  gap: 0;
  padding: 3px 11px;
  border-radius: 31px 39px 30px 42px;
  background: rgba(255,255,255,.48);
}

.ingredient-row {
  border: 0;
  border-bottom: 1px dashed rgba(111,137,128,.18);
  border-radius: 0;
  background: transparent;
}

.ingredient-row:last-child {
  border-bottom: 0;
}

.ingredient-row.checked {
  background: radial-gradient(ellipse at 12% 50%, rgba(179,206,112,.2), transparent 47%);
}

.ingredient-check {
  border: 1px solid rgba(111,151,138,.34);
  border-radius: 46% 54% 43% 57%;
}

.tool-chip,
.tag-chip {
  border: 0;
  border-radius: 21px 27px 20px 29px;
  background: radial-gradient(ellipse, rgba(139,204,198,.2), rgba(255,255,255,.42) 78%, transparent 82%);
}

.tag-chip {
  background: radial-gradient(ellipse, rgba(233,140,175,.19), rgba(255,255,255,.42) 78%, transparent 82%);
}

.step-number {
  border: 0;
  border-radius: 44% 56% 41% 59%;
  background: radial-gradient(ellipse, rgba(180,206,112,.46), rgba(255,255,255,.34) 72%, transparent 76%);
  color: #5f6852;
}

.sheet-actions {
  border: 0;
  background: rgba(255,254,251,.94);
  box-shadow: 0 -8px 24px rgba(89,111,104,.05);
}

.primary,
.secondary {
  border: 0;
  border-radius: 26px 33px 25px 36px;
  box-shadow: 0 9px 22px rgba(91,113,106,.09);
}

.primary {
  background: linear-gradient(105deg, #e98780, #df7781 56%, #e58ca5);
}

.secondary {
  background: radial-gradient(ellipse, rgba(174,157,191,.24), rgba(245,241,248,.74) 78%, transparent 82%);
}

.reward-sheet {
  background:
    linear-gradient(rgba(255,254,251,.78), rgba(255,254,251,.78)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") center / cover;
}

.reward-burst {
  border: 0;
  border-radius: 47% 53% 44% 56%;
  background: radial-gradient(ellipse, rgba(245,216,120,.62), rgba(255,255,255,.35) 72%, transparent 76%);
  box-shadow: none;
}

.unlock-row {
  border: 0;
  border-radius: 29px 37px 28px 40px;
  background: radial-gradient(ellipse at 11% 50%, rgba(139,204,198,.22), rgba(255,255,255,.48) 84%, transparent 88%);
}

@keyframes notebook-buddy-float {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-5px) rotate(.5deg); }
}

@media (max-width: 560px) {
  .page {
    padding: 0;
  }

  .page::before,
  .page::after {
    display: none;
  }

  .desk-note,
  .desk-flower {
    display: none;
  }

  .phone {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .modal {
    align-items: flex-end;
    padding: 0;
  }

  .sheet {
    width: 100%;
    max-height: 92dvh;
    border: 0;
    border-radius: 24px 24px 0 0;
  }

  .recipe-cover {
    border-radius: 24px 24px 0 0;
  }
}

/* Pencil UI v5: pressure-varied, double-drawn outlines */
.phone {
  border: 0;
}

.phone::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: url("./assets/pencil-frame-phone.svg") center / 100% 100% no-repeat;
  opacity: .76;
}

.top {
  border-bottom: 0;
}

.top::after {
  left: 18px;
  right: 17px;
  bottom: -6px;
  height: 15px;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
  opacity: .82;
  transform: rotate(.2deg);
}

.icon {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon:hover {
  border: 0;
}

.quest-hero {
  border: 0;
  background-color: #fffdf7;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(103deg, rgba(255, 223, 82, .26) 0 48%, transparent 48%),
    linear-gradient(180deg, #fffdf7, #f8eee2);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.quest-label,
.map-stat,
.level-chip,
.recipe-stage-chip {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quest-copy h3,
.section-head h3,
.recipe-block h3 {
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.quest-visual::before {
  border: 0;
  background-color: rgba(45,157,153,.16);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quest-cta,
.primary,
.secondary {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-panel {
  border: 0;
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, transparent 0 68%, rgba(45,157,153,.12) 68%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.progress-track,
.map-progress {
  border: 0;
  border-radius: 0;
  background-color: #f8eadb;
  background-image: url("./assets/pencil-line.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-ring,
.reward-icon,
.node-badge,
.podium-avatar,
.avatar,
.my-rank-mark,
.profile-avatar,
.ingredient-check,
.step-number {
  border: 0;
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-ring {
  background-color: #e8dfd5;
  background-image:
    url("./assets/pencil-circle.svg"),
    conic-gradient(var(--pool) calc(var(--progress) * 1%), #e8dfd5 0);
}

.reward-track {
  border: 0;
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, rgba(255,223,82,.18), transparent 32%, rgba(242,167,184,.16) 70%, transparent);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.reward-track::before {
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
  height: 13px;
  opacity: .62;
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card {
  border: 0;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quick-card {
  background-color: #fff8df;
}

.quick-card:nth-child(2),
.quick-card.badge-card {
  background-color: #e7f1e7;
}

.quick-card-icon,
.badge-card .quick-card-icon,
.section-title-icon,
.allergy-check {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.map-hero,
.map-hero.dessert {
  border: 0;
  background-color: #fff8e9;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(100deg, rgba(255,223,82,.26) 0 36%, transparent 36%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.map-hero.dessert {
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(100deg, rgba(242,167,184,.3) 0 42%, transparent 42%);
}

.map-progress {
  background-color: #f5e8df;
}

.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.forest-goal,
.segment,
.my-rank,
.allergy-item,
.skip-row,
.tool-chip,
.tag-chip,
.unlock-row {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chapter-marker {
  background-color: var(--yellow);
}

.map-route.dessert .chapter-marker {
  background-color: var(--pink);
}

.map-step .map-stop,
.map-step.right .map-stop {
  background-color: rgba(255,253,248,.95);
}

.map-step .map-stop.available {
  background-color: #fff3c5;
}

.map-step .map-stop.cleared {
  background-color: #e8f3e0;
}

.forest-goal {
  background-color: #fff8d8;
}

.forest-goal.summit {
  background-color: #e7f1e7;
}

.screen-heading {
  border-bottom: 0;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 14px;
  background-repeat: no-repeat;
}

.screen-heading::before,
.profile-hero::before,
.map-hero::before {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.segment {
  background-color: #fffdf8;
}

.segment button.active {
  box-shadow: none;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
}

.podium,
.rank-list,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  border: 0;
  background-image: url("./assets/pencil-frame-card.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.podium {
  background-color: #fff8e9;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(118deg, rgba(45,157,153,.16) 0 34%, transparent 34% 67%, rgba(242,167,184,.18) 67%);
}

.podium-block {
  border: 0;
  background-color: rgba(45,157,153,.11);
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
}

.my-rank {
  background-color: #fff5c9;
}

.rank-list {
  background-color: #fffdf8;
}

.rank-row + .rank-row,
.profile-stats,
.profile-stat + .profile-stat,
.recipe-meta,
.ingredient-row,
.step-row + .step-row,
.sheet-actions {
  border: 0;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 10px;
  background-repeat: no-repeat;
}

.profile-hero {
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(106deg, rgba(242,167,184,.22) 0 37%, transparent 37% 72%, rgba(255,223,82,.22) 72%);
}

.profile-section-card {
  background-color: #fffdf8;
}

.profile-section:nth-of-type(even) .profile-section-card {
  background-color: #fff8e9;
}

.badge-item,
.badge-item.earned,
.sticker-cell,
.sticker-cell:not(.locked) {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.badge-item,
.sticker-cell {
  background-color: #f7f0e7;
}

.badge-item.earned {
  background-color: #edf4d9;
}

.sticker-cell:not(.locked) {
  background-color: var(--yellow);
}

.allergy-item,
.skip-row {
  background-color: #fffaf1;
}

.allergy-item.active {
  border: 0;
  background-color: var(--pink);
  background-image: url("./assets/pencil-frame-row.svg");
}

.tabs {
  position: relative;
  border-top: 0;
}

.tabs::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -7px;
  height: 15px;
  pointer-events: none;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
}

.tabs button.active::before {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.sheet {
  border: 0;
  background-color: var(--paper);
  background-image:
    url("./assets/pencil-frame-card.svg"),
    url("./assets/doodle-canvas.svg");
  background-size: 100% 100%, 440px 760px;
  background-repeat: no-repeat, repeat;
}

.recipe-cover,
.recipe-cover.dessert {
  border-bottom: 0;
  background-image:
    url("./assets/pencil-line.svg"),
    linear-gradient(102deg, rgba(255,223,82,.28) 0 47%, transparent 47%);
  background-position: center bottom, center;
  background-size: 100% 15px, 100% 100%;
  background-repeat: no-repeat;
}

.recipe-cover.dessert {
  background-image:
    url("./assets/pencil-line.svg"),
    linear-gradient(102deg, rgba(242,167,184,.3) 0 47%, transparent 47%);
}

.warning {
  border: 0;
  background-color: #ffe4e0;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
}

.ingredient-list {
  background-color: #fffdf8;
}

.ingredient-row:last-child,
.step-row:last-child {
  background-image: none;
}

.ingredient-row.checked {
  background-color: #eff5d9;
}

.tool-chip {
  background-color: #dff0e8;
}

.tag-chip {
  background-color: #ffe3e3;
}

.sheet-actions {
  background-color: rgba(255,250,241,.97);
  background-position: center top;
}

.primary {
  background-color: var(--tomato);
}

.secondary {
  background-color: var(--cream);
}

.reward-burst {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
}

.unlock-row {
  background-color: #e5f0e5;
}

@media (max-width: 560px) {
  .phone::before {
    display: none;
  }
}

.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.podium,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  border-radius: 0;
  clip-path: polygon(.7% 1.4%, 24% .2%, 51% 1%, 76% .25%, 99.1% 1.3%, 100% 27%, 99.4% 53%, 100% 78%, 98.8% 99%, 74% 98.7%, 48% 99.6%, 23% 98.8%, .8% 99.5%, 0 74%, .6% 49%, 0 24%);
  box-shadow: none;
}

.quest-hero {
  filter: drop-shadow(6px 7px 0 var(--yellow));
}

.progress-panel {
  filter: drop-shadow(3px 4px 0 rgba(67,33,59,.1));
}

.reward-track {
  filter: drop-shadow(3px 4px 0 rgba(67,33,59,.1));
}

.map-hero,
.map-hero.dessert {
  filter: drop-shadow(5px 6px 0 var(--leaf));
}

.map-hero.dessert {
  filter: drop-shadow(5px 6px 0 var(--pink));
}

.podium,
.profile-hero {
  filter: drop-shadow(5px 6px 0 var(--yellow));
}

.profile-hero {
  filter: drop-shadow(5px 6px 0 var(--leaf));
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  filter: drop-shadow(3px 4px 0 var(--cream));
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card,
.segment,
.my-rank,
.rank-list,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  border-radius: 0;
  clip-path: polygon(1% 3%, 27% 1%, 53% 2.5%, 78% .6%, 99% 3%, 100% 48%, 98.8% 97%, 73% 98.4%, 49% 97%, 24% 99.2%, .8% 97%, 0 52%);
}

.map-step.right .map-stop,
.quick-card:nth-child(2),
.profile-section:nth-of-type(even) .profile-section-card {
  clip-path: polygon(.6% 2%, 26% 3%, 51% .5%, 77% 2.2%, 99% 1%, 100% 51%, 99% 98%, 75% 97%, 50% 99.5%, 23% 97.5%, 1% 99%, 0 47%);
}

.section-head h3,
.recipe-block h3,
.quest-copy h3 {
  display: inline-block;
  padding-bottom: 4px;
  text-decoration: none;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 11px;
  background-repeat: no-repeat;
}

/* Keep the handmade linework without GPU-sensitive clipping. */
.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.podium,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card,
.segment,
.my-rank,
.rank-list,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  clip-path: none;
  filter: none;
}

.quest-hero {
  border-radius: 13px 20px 11px 18px;
  box-shadow: 6px 7px 0 var(--yellow);
}

.progress-panel,
.reward-track {
  border-radius: 10px 16px 8px 14px;
  box-shadow: 3px 4px 0 rgba(67,33,59,.1);
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card {
  border-radius: 7px 15px 6px 13px;
}

.map-hero,
.map-hero.dessert {
  border-radius: 9px 17px 8px 15px;
  box-shadow: 5px 6px 0 var(--leaf);
}

.map-hero.dessert {
  box-shadow: 5px 6px 0 var(--pink);
}

.map-step .map-stop,
.map-step.right .map-stop,
.forest-goal,
.chapter-marker,
.segment,
.my-rank,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  border-radius: 6px 13px 5px 11px;
}

.podium,
.profile-hero {
  border-radius: 10px 18px 9px 16px;
  box-shadow: 5px 6px 0 var(--yellow);
}

.profile-hero {
  box-shadow: 5px 6px 0 var(--leaf);
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.rank-list {
  border-radius: 9px 16px 8px 14px;
  box-shadow: 3px 4px 0 var(--cream);
}

.quest-hero { transform: rotate(-.62deg) translateX(1px); }
.progress-panel { transform: rotate(.46deg) translateX(-1px); }
.reward-track { transform: rotate(-.58deg) translateX(1px); }
.quick-card { transform: rotate(-1.05deg) translateY(1px); }
.quick-card:nth-child(2),
.quick-card.badge-card { transform: rotate(1.12deg) translateY(-1px); }
.section-head { transform: rotate(-.22deg); }
.map-hero { transform: rotate(-.58deg) translateX(1px); }
.map-hero.dessert { transform: rotate(.48deg) translateX(-1px); }
.podium { transform: rotate(.42deg); }
.my-rank { transform: rotate(-.62deg); }
.profile-hero { transform: rotate(-.5deg) translateX(1px); }
.profile-section:nth-of-type(odd) .profile-section-card { transform: rotate(.34deg); }
.profile-section:nth-of-type(even) .profile-section-card { transform: rotate(-.42deg); }

@media (max-height: 730px) and (min-width: 561px) {
  .phone {
    min-height: 660px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Pencil UI v6 final cascade */
.phone::before { display: none !important; }
.brand h1 { font-size: 23px !important; line-height: .95 !important; letter-spacing: -.035em !important; }
.quest-copy h2 { font-size: 34px !important; line-height: 1.02 !important; letter-spacing: -.025em !important; }
.quest-copy h3 { font-size: 22px !important; letter-spacing: -.015em !important; }
.section-head h3 { font-size: 20px !important; }
.quest-cta,
.primary,
.secondary { font-size: 17px !important; }
/* Pencil UI v6: one confident line, one quiet echo */
@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Bold-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gowun";
  src: url("./assets/fonts/GowunDodum-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
  font-family: "Bap Gowun", "SUIT", sans-serif;
}

h1,
h2,
h3,
strong,
.quest-label,
.quest-cta,
.screen-kicker,
.eyebrow,
.node-num,
.node-title,
.segment button,
.map-stat,
.chapter-marker,
.profile-stat,
.level-chip,
.tabs button,
.recipe-stage-chip,
.recipe-block-head,
.primary,
.secondary {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif;
}

.brand h1 {
  font-size: 23px;
  line-height: .95;
  letter-spacing: -.035em;
}

.quest-copy h2 {
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.quest-copy h3 {
  font-size: 22px;
  letter-spacing: -.015em;
}

.section-head h3,
.screen-heading h2,
.map-hero h2,
.profile-title-row h2,
.recipe-cover h2 {
  letter-spacing: -.02em;
}

.section-head h3 {
  font-size: 20px;
}

.quest-cta,
.primary,
.secondary {
  font-size: 17px;
  font-weight: 700;
}

.phone::before {
  display: none;
}

.phone {
  box-shadow: 8px 9px 0 rgba(255, 223, 82, .7), 13px 15px 0 rgba(67, 33, 59, .055);
}


/* Pencil UI v6: one confident line, one quiet echo */
@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Bold-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gowun";
  src: url("./assets/fonts/GowunDodum-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
  font-family: "Bap Gowun", "SUIT", sans-serif;
}

h1,
h2,
h3,
strong,
.quest-label,
.quest-cta,
.screen-kicker,
.eyebrow,
.node-num,
.node-title,
.segment button,
.map-stat,
.chapter-marker,
.profile-stat,
.level-chip,
.tabs button,
.recipe-stage-chip,
.recipe-block-head,
.primary,
.secondary {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif;
}

.brand h1 {
  font-size: 23px;
  line-height: .95;
  letter-spacing: -.035em;
}

.quest-copy h2 {
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -.025em;
}

.quest-copy h3 {
  font-size: 22px;
  letter-spacing: -.015em;
}

.section-head h3,
.screen-heading h2,
.map-hero h2,
.profile-title-row h2,
.recipe-cover h2 {
  letter-spacing: -.02em;
}

.section-head h3 {
  font-size: 20px;
}

.quest-cta,
.primary,
.secondary {
  font-size: 17px;
  font-weight: 700;
}

.phone::before {
  display: none;
}

.phone {
  box-shadow: 8px 9px 0 rgba(255, 223, 82, .7), 13px 15px 0 rgba(67, 33, 59, .055);
}

/* Doodle editorial UI v4: reference-board tone and mood */
:root {
  --ink: #43213b;
  --muted: #786c70;
  --paper: #fffaf1;
  --surface: #fffdf8;
  --line: rgba(67, 33, 59, .28);
  --tomato: #ff493b;
  --yellow: #ffdf52;
  --cream: #f8e9dc;
  --leaf: #bddf7b;
  --pool: #2d9d99;
  --pink: #f2a7b8;
  --plum: #43213b;
  --shadow-sm: 3px 4px 0 rgba(67, 33, 59, .09);
  --shadow-md: 5px 6px 0 rgba(67, 33, 59, .1);
  --shadow-lg: 10px 12px 0 rgba(67, 33, 59, .1);
}

html,
body {
  background: #e8e7e4;
  color: var(--ink);
}

button,
input,
textarea,
select {
  color: var(--ink);
}

.page::before {
  display: block;
  background:
    linear-gradient(rgba(232, 231, 228, .92), rgba(232, 231, 228, .92)),
    url("./assets/doodle-canvas.svg") center / 440px 760px repeat;
  filter: none;
}

.page::after {
  display: none;
}

.phone {
  border: 1.25px solid rgba(67, 33, 59, .48);
  border-radius: 27px 34px 29px 31px;
  background: var(--paper);
  box-shadow: 8px 9px 0 rgba(255, 223, 82, .7), 16px 18px 0 rgba(67, 33, 59, .08);
  transform: rotate(-.08deg);
}

.phone::before,
.phone::after {
  display: none;
}

.top {
  min-height: 84px;
  border-bottom: 1px dashed rgba(67, 33, 59, .24);
  background: rgba(255, 250, 241, .97);
}

.top::after {
  left: 23px;
  right: 21px;
  bottom: -3px;
  height: 4px;
  background: repeating-linear-gradient(90deg, transparent 0 7px, var(--tomato) 7px 10px, transparent 10px 18px);
  border-radius: 0;
  filter: none;
  opacity: .34;
  transform: rotate(.35deg);
}

.brand {
  gap: 9px;
  transform: rotate(-.6deg);
}

.mark {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: rotate(-4deg);
}

.brand-art {
  width: 59px;
  height: 59px;
  filter: saturate(1.08) contrast(1.03) drop-shadow(2px 2px 0 rgba(255, 223, 82, .74));
}

.brand-copy span {
  color: #d54859;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .015em;
}

.brand h1 {
  color: var(--ink);
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.055em;
}

.icon {
  width: 37px;
  height: 37px;
  border: 1.2px solid var(--ink);
  border-radius: 9px 12px 8px 11px;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
  transform: rotate(2deg);
}

.icon:hover {
  border: 1.2px solid var(--ink);
  background: #ffe775;
  transform: translateY(-1px) rotate(-1deg);
}

.content {
  background-color: var(--paper);
  background-image: url("./assets/doodle-canvas.svg");
  background-position: center top;
  background-size: 440px 760px;
}

.screen {
  color: var(--ink);
}

.screen-kicker,
.eyebrow {
  color: #a84058;
  font-weight: 800;
  letter-spacing: .075em;
}

.quest-hero {
  min-height: 282px;
  overflow: visible;
  border: 1.4px solid var(--ink);
  border-radius: 15px 19px 12px 18px;
  background:
    linear-gradient(103deg, rgba(255, 223, 82, .26) 0 48%, transparent 48%),
    linear-gradient(180deg, #fffdf7, #f8eee2);
  box-shadow: 6px 7px 0 var(--yellow);
  transform: rotate(-.35deg);
}

.quest-hero::before {
  content: "TODAY'S PAGE";
  display: block;
  position: absolute;
  top: 15px;
  right: 14px;
  bottom: auto;
  left: auto;
  z-index: 2;
  width: auto;
  height: auto;
  padding: 4px 7px 3px;
  border: 1px solid var(--ink);
  border-radius: 2px 5px 3px 4px;
  background: var(--leaf);
  color: var(--ink);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .08em;
  opacity: 1;
  transform: rotate(2.5deg);
}

.quest-hero::after {
  right: 18px;
  bottom: 73px;
  width: 112px;
  height: 18px;
  border-radius: 0;
  background: repeating-linear-gradient(-11deg, transparent 0 5px, rgba(45,157,153,.23) 5px 8px, transparent 8px 13px);
  box-shadow: none;
  filter: none;
  transform: rotate(-2deg);
}

.quest-copy {
  position: relative;
  z-index: 3;
}

.quest-label {
  padding: 6px 9px 5px;
  border: 1px solid rgba(67,33,59,.55);
  border-radius: 4px 7px 3px 6px;
  background: #fff8dc;
  color: #387e78;
  font-weight: 800;
  box-shadow: 2px 2px 0 rgba(45,157,153,.22);
  transform: rotate(-1deg);
}

.quest-copy h2 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1.16;
}

.quest-copy h3 {
  color: #d54859;
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: rgba(255, 73, 59, .25);
  text-decoration-thickness: 5px;
  text-underline-offset: -2px;
}

.quest-meta {
  color: #665c61;
  font-weight: 650;
}

.quest-visual {
  right: 7px;
  top: 42px;
  width: 174px;
  height: 160px;
  transform: rotate(3deg);
}

.quest-visual::before {
  inset: 22px 6px 12px 20px;
  border: 1.2px solid var(--ink);
  border-radius: 48% 52% 46% 54%;
  background: var(--pool);
  opacity: .16;
  transform: rotate(-7deg);
}

.hero-reference-art {
  width: 158px;
  filter: saturate(1.1) contrast(1.03) drop-shadow(3px 4px 0 rgba(67,33,59,.14));
  transform: rotate(2deg);
}

.hero-spark,
.quest-emoji {
  filter: none;
}

.quest-cta {
  left: 16px;
  right: 14px;
  bottom: 15px;
  border: 1.4px solid var(--ink);
  border-radius: 8px 13px 7px 11px;
  background: var(--tomato);
  color: #fffdf5;
  box-shadow: 4px 4px 0 var(--pink);
  transform: rotate(.35deg);
}

.quest-cta:hover {
  transform: translateY(-1px) rotate(-.25deg);
  box-shadow: 5px 6px 0 var(--yellow);
}

.cta-icon {
  border: 1px solid rgba(67,33,59,.65);
  background: var(--yellow);
  color: var(--ink);
}

.progress-panel,
.reward-track,
.quick-card,
.quick-card:nth-child(2) {
  border: 1.2px solid var(--ink);
  border-radius: 11px 15px 9px 14px;
  background: rgba(255,253,248,.96);
  box-shadow: var(--shadow-md);
}

.progress-panel {
  background:
    linear-gradient(90deg, transparent 0 68%, rgba(45,157,153,.12) 68%),
    #fffdf8;
  transform: rotate(.18deg);
}

.progress-panel::before {
  top: 14px;
  right: 16px;
  bottom: auto;
  left: auto;
  width: 21px;
  height: 9px;
  border-radius: 0;
  background: var(--tomato);
  box-shadow: 7px 7px 0 var(--yellow), -5px 13px 0 var(--leaf);
  filter: none;
  opacity: .72;
  transform: rotate(8deg);
}

.progress-panel h3,
.progress-panel h3 b {
  color: var(--ink);
}

.progress-panel h3 b {
  color: #d54859;
}

.progress-track,
.map-progress {
  height: 7px;
  border: 1px solid rgba(67,33,59,.36);
  border-radius: 3px 6px 2px 5px;
  background: #f8eadb;
  overflow: hidden;
}

.progress-track span,
.map-progress span {
  background: repeating-linear-gradient(-45deg, var(--tomato) 0 7px, #ff6f60 7px 12px);
}

.progress-ring {
  border: 1.2px solid var(--ink);
  border-radius: 46% 54% 48% 52%;
  background: conic-gradient(var(--pool) calc(var(--progress) * 1%), #e8dfd5 0);
  box-shadow: 3px 3px 0 var(--leaf);
  transform: rotate(3deg);
}

.progress-ring::after {
  background: #fffdf8;
}

.progress-ring strong {
  color: var(--ink);
}

.section-head h3 {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 7px;
  text-underline-offset: -4px;
}

.section-head span {
  color: var(--muted);
}

.reward-track {
  border-style: dashed;
  background:
    linear-gradient(90deg, rgba(255,223,82,.18), transparent 32%, rgba(242,167,184,.16) 70%, transparent),
    #fffdf8;
  transform: rotate(-.2deg);
}

.reward-track::before {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--plum) 0 4px, transparent 4px 8px);
  opacity: .38;
}

.reward-icon {
  border: 1.1px solid var(--ink);
  border-radius: 45% 55% 42% 58%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
}

.reward-slot:nth-child(even) .reward-icon {
  transform: rotate(3deg);
}

.reward-slot:nth-child(odd) .reward-icon {
  transform: rotate(-3deg);
}

.reward-slot.current .reward-icon {
  border-color: var(--ink);
  background: var(--tomato);
  color: #fff;
  box-shadow: 3px 3px 0 var(--yellow);
}

.quick-grid {
  gap: 13px;
}

.quick-card {
  border-radius: 8px 15px 7px 13px;
  background: #fff8df;
  transform: rotate(-.7deg);
}

.quick-card:nth-child(2),
.quick-card.badge-card {
  background: #e7f1e7;
  transform: rotate(.8deg);
}

.quick-card::after,
.quick-card.badge-card::after {
  width: 26px;
  height: 8px;
  border-radius: 0;
  background: var(--pink);
  filter: none;
  opacity: .6;
  transform: rotate(-8deg);
}

.quick-card-icon,
.badge-card .quick-card-icon {
  border: 1px solid var(--ink);
  border-radius: 5px 8px 4px 7px;
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(-4deg);
}

.badge-card .quick-card-icon {
  background: var(--leaf);
}

.quick-card h3 {
  color: var(--ink);
  font-weight: 850;
}

.quick-card p {
  color: var(--muted);
}

.quick-reference-art {
  filter: saturate(1.08) contrast(1.03) drop-shadow(2px 2px 0 rgba(67,33,59,.13));
}

.map-hero,
.map-hero.dessert {
  border: 1.3px solid var(--ink);
  border-radius: 10px 16px 9px 14px;
  background:
    linear-gradient(100deg, rgba(255,223,82,.26) 0 36%, transparent 36%),
    #fff8e9;
  box-shadow: 5px 5px 0 var(--leaf);
  transform: rotate(-.25deg);
}

.map-hero.dessert {
  background:
    linear-gradient(100deg, rgba(242,167,184,.3) 0 42%, transparent 42%),
    #fff7ed;
  box-shadow: 5px 5px 0 var(--pink);
}

.map-hero::before {
  display: block;
  content: "RECIPE MAP";
  top: 13px;
  right: 13px;
  bottom: auto;
  left: auto;
  width: auto;
  height: auto;
  padding: 3px 6px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  opacity: 1;
  transform: rotate(2deg);
}

.map-hero::after,
.map-hero.dessert::after {
  display: none;
}

.map-hero h2 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.06em;
}

.map-stat {
  border: 1px solid var(--ink);
  border-radius: 5px 8px 4px 7px;
  background: #fffdf8;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
  transform: rotate(2deg);
}

.map-reference-art {
  filter: saturate(1.08) contrast(1.03) drop-shadow(2px 3px 0 rgba(67,33,59,.12));
  transform: rotate(5deg);
}

.map-route,
.map-route.dessert {
  background-color: var(--paper);
  background-image: url("./assets/doodle-canvas.svg");
  background-position: center top;
  background-size: 440px 760px;
}

.map-route::before,
.map-route.dessert::before {
  width: 3px;
  background: repeating-linear-gradient(to bottom, var(--pool) 0 8px, transparent 8px 14px);
  opacity: .45;
  transform: rotate(.3deg);
}

.map-route.dessert::before {
  background: repeating-linear-gradient(to bottom, #d74f6a 0 8px, transparent 8px 14px);
}

.chapter-marker {
  border: 1.1px solid var(--ink);
  border-radius: 5px 9px 4px 8px;
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--cream);
  color: var(--ink);
  transform: rotate(-1.5deg);
}

.map-route.dessert .chapter-marker {
  background: var(--pink);
}

.map-step .map-stop,
.map-step.right .map-stop {
  border: 1.15px solid rgba(67,33,59,.52);
  border-radius: 8px 14px 7px 12px;
  background: rgba(255,253,248,.95);
  box-shadow: 4px 4px 0 rgba(67,33,59,.08);
  transform: rotate(-.45deg);
}

.map-step.right .map-stop {
  transform: rotate(.55deg);
}

.map-step .map-stop::before,
.map-step.right .map-stop::before {
  display: none;
}

.map-step .map-stop.available {
  border-color: var(--ink);
  background: #fff3c5;
  box-shadow: 5px 5px 0 var(--yellow);
}

.map-step .map-stop.cleared {
  background: #e8f3e0;
  box-shadow: 4px 4px 0 var(--leaf);
}

.map-step .map-stop.locked {
  opacity: .6;
}

.node-badge {
  border: 1.15px solid var(--ink);
  border-radius: 45% 55% 43% 57%;
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
  transform: rotate(-4deg);
}

.available .node-badge {
  background: var(--tomato);
  color: #fff;
  box-shadow: 2px 2px 0 var(--yellow);
}

.node-num {
  color: #8a6577;
  font-weight: 800;
}

.node-title {
  color: var(--ink);
  font-weight: 850;
}

.node-state {
  color: var(--muted);
}

.available .node-state {
  color: #d54859;
}

.forest-goal {
  border: 1.2px solid var(--ink);
  border-radius: 8px 15px 7px 13px;
  background: #fff8d8;
  box-shadow: 4px 4px 0 var(--leaf);
  transform: rotate(-.6deg);
}

.forest-goal.summit {
  background: #e7f1e7;
  box-shadow: 4px 4px 0 var(--yellow);
}

.forest-goal b {
  color: var(--ink);
}

.goal-reference-art,
.current-stage-art {
  filter: saturate(1.1) contrast(1.04) drop-shadow(2px 2px 0 rgba(67,33,59,.13));
}

.screen-heading {
  border-bottom: 1px dashed rgba(67,33,59,.3);
  background: transparent;
}

.screen-heading::before {
  content: "WEEKLY";
  position: absolute;
  right: 6px;
  top: 4px;
  bottom: auto;
  left: auto;
  padding: 4px 7px;
  border: 1px solid var(--ink);
  background: var(--leaf);
  font-size: 8px;
  font-weight: 850;
  transform: rotate(3deg);
}

.screen-heading h2 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.06em;
}

.screen-heading p {
  color: #60545b;
}

.screen-reference-art {
  filter: saturate(1.12) contrast(1.05) drop-shadow(2px 3px 0 rgba(67,33,59,.12));
  transform: rotate(5deg);
}

.segment {
  border: 1.1px solid var(--ink);
  border-radius: 7px 12px 6px 10px;
  background: #fffdf8;
  box-shadow: 3px 3px 0 var(--cream);
  transform: rotate(-.3deg);
}

.segment button {
  border-radius: 4px 8px 3px 7px;
  color: var(--muted);
}

.segment button.active {
  background: var(--yellow);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(67,33,59,.45);
}

.podium {
  border: 1.2px solid var(--ink);
  border-radius: 12px 17px 10px 15px;
  background:
    linear-gradient(118deg, rgba(45,157,153,.16) 0 34%, transparent 34% 67%, rgba(242,167,184,.18) 67%),
    #fff8e9;
  box-shadow: 5px 5px 0 var(--yellow);
  transform: rotate(.2deg);
}

.podium-avatar,
.avatar {
  border: 1.1px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
}

.podium-person.first .podium-avatar {
  background: var(--pink);
}

.podium-person.second .podium-avatar {
  background: #fff3c7;
}

.podium-person.third .podium-avatar {
  background: var(--leaf);
}

.podium-rank {
  border: 1px solid var(--ink);
  background: #fffdf8;
  color: var(--ink);
}

.podium-block {
  border: 1px solid rgba(67,33,59,.32);
  border-bottom: 0;
  background: rgba(45,157,153,.11);
}

.my-rank,
.rank-list {
  border: 1.2px solid var(--ink);
  border-radius: 9px 14px 8px 12px;
  background: #fffdf8;
  box-shadow: var(--shadow-md);
}

.my-rank {
  background: #fff5c9;
  transform: rotate(-.35deg);
}

.my-rank-mark {
  border: 1px solid var(--ink);
  border-radius: 45% 55% 43% 57%;
  background: var(--tomato);
  color: #fff;
  box-shadow: 2px 2px 0 var(--pink);
}

.rank-row + .rank-row {
  border-color: rgba(67,33,59,.18);
  border-style: dashed;
}

.rank-number,
.rank-score {
  color: var(--ink);
  font-weight: 800;
}

.profile-hero {
  border: 1.3px solid var(--ink);
  border-radius: 11px 17px 10px 15px;
  background:
    linear-gradient(106deg, rgba(242,167,184,.22) 0 37%, transparent 37% 72%, rgba(255,223,82,.22) 72%),
    #fffdf8;
  box-shadow: 5px 5px 0 var(--leaf);
  transform: rotate(-.25deg);
}

.profile-hero::before {
  content: "MY RECIPE BOOK";
  display: block;
  position: absolute;
  top: 12px;
  right: 13px;
  bottom: auto;
  left: auto;
  padding: 4px 6px;
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: .08em;
  transform: rotate(2deg);
}

.profile-hero::after {
  display: none;
}

.profile-avatar {
  border: 1.2px solid var(--ink);
  border-radius: 46% 54% 43% 57%;
  background: var(--pink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--tomato);
  transform: rotate(-4deg);
}

.profile-title-row h2 {
  color: var(--ink);
  font-weight: 900;
}

.level-chip {
  border: 1px solid var(--ink);
  border-radius: 4px 7px 3px 6px;
  background: var(--yellow);
  color: var(--ink);
  transform: rotate(2deg);
}

.profile-reference-art {
  filter: saturate(1.08) contrast(1.04) drop-shadow(2px 3px 0 rgba(67,33,59,.13));
  transform: rotate(4deg);
}

.profile-stats,
.profile-stat + .profile-stat {
  border-color: rgba(67,33,59,.23);
  border-style: dashed;
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card {
  border: 1.15px solid var(--ink);
  border-radius: 10px 16px 9px 14px;
  background: #fffdf8;
  box-shadow: 4px 4px 0 var(--cream);
  transform: rotate(.15deg);
}

.profile-section:nth-of-type(even) .profile-section-card {
  background: #fff8e9;
  transform: rotate(-.18deg);
}

.section-title-icon {
  border: 1px solid var(--ink);
  border-radius: 5px 8px 4px 7px;
  background: var(--pool);
  color: #fff;
  transform: rotate(-4deg);
}

.section-title h3 {
  color: var(--ink);
  font-weight: 850;
}

.badge-item,
.badge-item.earned {
  border: 1px dashed rgba(67,33,59,.34);
  border-radius: 6px 10px 5px 9px;
  background: #f7f0e7;
}

.badge-item.earned {
  border-style: solid;
  background: #edf4d9;
  box-shadow: 2px 2px 0 var(--leaf);
}

.badge-item:nth-child(odd),
.sticker-cell:nth-child(3n+1) {
  transform: rotate(-1.2deg);
}

.badge-item:nth-child(even),
.sticker-cell:nth-child(3n) {
  transform: rotate(1.2deg);
}

.sticker-cell,
.sticker-cell:not(.locked) {
  border: 1px dashed rgba(67,33,59,.28);
  border-radius: 5px 9px 4px 8px;
  background: #f7f0e7;
}

.sticker-cell:not(.locked) {
  border-style: solid;
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--pink);
}

.allergy-item,
.skip-row {
  border: 1px solid rgba(67,33,59,.33);
  border-radius: 6px 10px 5px 9px;
  background: #fffaf1;
}

.allergy-item.active {
  border: 1.1px solid var(--ink);
  background: var(--pink);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
}

.allergy-check {
  border: 1px solid var(--ink);
  background: #fffdf8;
  color: var(--ink);
}

.tabs {
  gap: 4px;
  padding: 6px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1.2px solid var(--ink);
  background: #fffaf1;
  box-shadow: 0 -4px 0 rgba(255,223,82,.34);
}

.tabs button {
  min-height: 63px;
  gap: 2px;
  border: 0;
  background: transparent;
  color: #766b70;
  transform: none;
}

.tabs button:hover,
.tabs button.active {
  border: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
}

.tabs button.active::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  top: 3px;
  width: 48px;
  height: 41px;
  border: 1.2px solid var(--ink);
  border-radius: 48% 52% 45% 55%;
  background: var(--yellow);
  transform: translateX(-50%) rotate(-5deg);
}

.tab-art-wrap,
.tabs button:nth-child(n) .tab-art-wrap,
.tabs button.active .tab-art-wrap {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 39px;
  border-radius: 0;
  background: transparent;
  transform: none;
}

.tabs button.active .tab-art-wrap {
  transform: translateY(-2px) rotate(2deg);
}

.tab-art {
  filter: saturate(1.12) contrast(1.05) drop-shadow(1px 2px 0 rgba(67,33,59,.14));
}

.tabs button > span:last-child {
  position: relative;
  z-index: 1;
  font-size: 9px;
  font-weight: 800;
}

.modal {
  background: rgba(67,33,59,.33);
  backdrop-filter: blur(4px);
}

.sheet {
  border: 1.4px solid var(--ink);
  border-radius: 19px 24px 17px 22px;
  background-color: var(--paper);
  background-image: url("./assets/doodle-canvas.svg");
  background-position: center top;
  background-size: 440px 760px;
  box-shadow: 9px 10px 0 var(--yellow);
}

.recipe-cover,
.recipe-cover.dessert {
  border: 0;
  border-bottom: 1.2px dashed var(--ink);
  border-radius: 18px 23px 0 0;
  background:
    linear-gradient(102deg, rgba(255,223,82,.28) 0 47%, transparent 47%),
    #fff8e9;
}

.recipe-cover.dessert {
  background:
    linear-gradient(102deg, rgba(242,167,184,.3) 0 47%, transparent 47%),
    #fff8e9;
}

.recipe-cover::before,
.recipe-cover::after {
  display: none;
}

.recipe-stage-chip {
  border: 1px solid var(--ink);
  border-radius: 4px 7px 3px 6px;
  background: var(--leaf);
  color: var(--ink);
  transform: rotate(-2deg);
}

.recipe-cover .icon {
  border: 1px solid var(--ink);
  background: var(--pink);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--yellow);
}

.recipe-cover h2 {
  color: var(--ink);
  font-weight: 900;
  letter-spacing: -.055em;
}

.recipe-reference-art,
.recipe-utensil-art {
  filter: saturate(1.1) contrast(1.04) drop-shadow(2px 3px 0 rgba(67,33,59,.14));
}

.recipe-meta {
  border-bottom: 1px dashed rgba(67,33,59,.25);
}

.recipe-meta-item,
.recipe-meta-item:nth-child(2),
.recipe-meta-item:nth-child(3) {
  border-radius: 0;
  background: transparent;
}

.recipe-block h3 {
  color: var(--ink);
  font-weight: 850;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 6px;
  text-underline-offset: -3px;
}

.warning {
  border: 1px solid var(--ink);
  border-radius: 7px 11px 6px 10px;
  background: #ffe4e0;
  box-shadow: 3px 3px 0 var(--pink);
}

.ingredient-list {
  border: 1px solid var(--ink);
  border-radius: 8px 13px 7px 11px;
  background: #fffdf8;
  box-shadow: 3px 3px 0 var(--cream);
}

.ingredient-row {
  border-bottom: 1px dashed rgba(67,33,59,.22);
  background: transparent;
}

.ingredient-row.checked {
  background: #eff5d9;
}

.ingredient-check {
  border: 1px solid var(--ink);
  border-radius: 45% 55% 43% 57%;
  background: #fffdf8;
}

.ingredient-row.checked .ingredient-check {
  background: var(--leaf);
}

.tool-chip,
.tag-chip {
  border: 1px solid rgba(67,33,59,.48);
  border-radius: 5px 9px 4px 8px;
  background: #dff0e8;
  color: var(--ink);
  transform: rotate(-.5deg);
}

.tool-chip:nth-child(even) {
  transform: rotate(.7deg);
}

.tag-chip {
  background: #ffe3e3;
}

.step-number {
  border: 1px solid var(--ink);
  border-radius: 45% 55% 43% 57%;
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
  transform: rotate(-4deg);
}

.step-row + .step-row {
  border-top: 1px dashed rgba(67,33,59,.18);
}

.sheet-actions {
  border-top: 1.2px dashed rgba(67,33,59,.34);
  background: rgba(255,250,241,.97);
  box-shadow: none;
}

.primary,
.secondary {
  border: 1.3px solid var(--ink);
  border-radius: 8px 13px 7px 11px;
  box-shadow: 4px 4px 0 var(--yellow);
}

.primary {
  background: var(--tomato);
  color: #fff;
}

.secondary {
  background: var(--cream);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--pink);
}

.reward-sheet {
  background-color: var(--paper);
  background-image: url("./assets/doodle-canvas.svg");
}

.reward-burst {
  border: 1.3px solid var(--ink);
  border-radius: 47% 53% 44% 56%;
  background: var(--yellow);
  box-shadow: 5px 5px 0 var(--pink);
  transform: rotate(-3deg);
}

.unlock-row {
  border: 1.1px solid var(--ink);
  border-radius: 7px 12px 6px 10px;
  background: #e5f0e5;
  box-shadow: 3px 3px 0 var(--leaf);
}

.icon svg,
.quest-label svg,
.quest-meta svg,
.node-state svg,
.section-title-icon svg,
.tool-chip svg,
.tag-chip svg {
  stroke-width: 1.75;
}

@media (max-width: 560px) {
  .page::before,
  .page::after {
    display: none;
  }

  .phone {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .top {
    min-height: 84px;
  }

  .sheet {
    width: 100%;
    max-height: 92dvh;
    border: 0;
    border-top: 1.3px solid var(--ink);
    border-radius: 19px 24px 0 0;
    box-shadow: 0 -5px 0 var(--yellow);
  }

  .recipe-cover {
    border-radius: 18px 23px 0 0;
  }
}

/* Pencil UI v5 final cascade */
/* Pencil UI v5: pressure-varied, double-drawn outlines */
.phone {
  border: 0;
}

.phone::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: url("./assets/pencil-frame-phone.svg") center / 100% 100% no-repeat;
  opacity: .76;
}

.top {
  border-bottom: 0;
}

.top::after {
  left: 18px;
  right: 17px;
  bottom: -6px;
  height: 15px;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
  opacity: .82;
  transform: rotate(.2deg);
}

.icon {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.icon:hover {
  border: 0;
}

.quest-hero {
  border: 0;
  background-color: #fffdf7;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(103deg, rgba(255, 223, 82, .26) 0 48%, transparent 48%),
    linear-gradient(180deg, #fffdf7, #f8eee2);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.quest-label,
.map-stat,
.level-chip,
.recipe-stage-chip {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quest-copy h3,
.section-head h3,
.recipe-block h3 {
  text-decoration-style: wavy;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.quest-visual::before {
  border: 0;
  background-color: rgba(45,157,153,.16);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quest-cta,
.primary,
.secondary {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-panel {
  border: 0;
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, transparent 0 68%, rgba(45,157,153,.12) 68%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.progress-track,
.map-progress {
  border: 0;
  border-radius: 0;
  background-color: #f8eadb;
  background-image: url("./assets/pencil-line.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-ring,
.reward-icon,
.node-badge,
.podium-avatar,
.avatar,
.my-rank-mark,
.profile-avatar,
.ingredient-check,
.step-number {
  border: 0;
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.progress-ring {
  background-color: #e8dfd5;
  background-image:
    url("./assets/pencil-circle.svg"),
    conic-gradient(var(--pool) calc(var(--progress) * 1%), #e8dfd5 0);
}

.reward-track {
  border: 0;
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, rgba(255,223,82,.18), transparent 32%, rgba(242,167,184,.16) 70%, transparent);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.reward-track::before {
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
  height: 13px;
  opacity: .62;
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card {
  border: 0;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.quick-card {
  background-color: #fff8df;
}

.quick-card:nth-child(2),
.quick-card.badge-card {
  background-color: #e7f1e7;
}

.quick-card-icon,
.badge-card .quick-card-icon,
.section-title-icon,
.allergy-check {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.map-hero,
.map-hero.dessert {
  border: 0;
  background-color: #fff8e9;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(100deg, rgba(255,223,82,.26) 0 36%, transparent 36%);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.map-hero.dessert {
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(100deg, rgba(242,167,184,.3) 0 42%, transparent 42%);
}

.map-progress {
  background-color: #f5e8df;
}

.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.forest-goal,
.segment,
.my-rank,
.allergy-item,
.skip-row,
.tool-chip,
.tag-chip,
.unlock-row {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.chapter-marker {
  background-color: var(--yellow);
}

.map-route.dessert .chapter-marker {
  background-color: var(--pink);
}

.map-step .map-stop,
.map-step.right .map-stop {
  background-color: rgba(255,253,248,.95);
}

.map-step .map-stop.available {
  background-color: #fff3c5;
}

.map-step .map-stop.cleared {
  background-color: #e8f3e0;
}

.forest-goal {
  background-color: #fff8d8;
}

.forest-goal.summit {
  background-color: #e7f1e7;
}

.screen-heading {
  border-bottom: 0;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 14px;
  background-repeat: no-repeat;
}

.screen-heading::before,
.profile-hero::before,
.map-hero::before {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.segment {
  background-color: #fffdf8;
}

.segment button.active {
  box-shadow: none;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
}

.podium,
.rank-list,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  border: 0;
  background-image: url("./assets/pencil-frame-card.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.podium {
  background-color: #fff8e9;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(118deg, rgba(45,157,153,.16) 0 34%, transparent 34% 67%, rgba(242,167,184,.18) 67%);
}

.podium-block {
  border: 0;
  background-color: rgba(45,157,153,.11);
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
}

.my-rank {
  background-color: #fff5c9;
}

.rank-list {
  background-color: #fffdf8;
}

.rank-row + .rank-row,
.profile-stats,
.profile-stat + .profile-stat,
.recipe-meta,
.ingredient-row,
.step-row + .step-row,
.sheet-actions {
  border: 0;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 10px;
  background-repeat: no-repeat;
}

.profile-hero {
  background-color: #fffdf8;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(106deg, rgba(242,167,184,.22) 0 37%, transparent 37% 72%, rgba(255,223,82,.22) 72%);
}

.profile-section-card {
  background-color: #fffdf8;
}

.profile-section:nth-of-type(even) .profile-section-card {
  background-color: #fff8e9;
}

.badge-item,
.badge-item.earned,
.sticker-cell,
.sticker-cell:not(.locked) {
  border: 0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.badge-item,
.sticker-cell {
  background-color: #f7f0e7;
}

.badge-item.earned {
  background-color: #edf4d9;
}

.sticker-cell:not(.locked) {
  background-color: var(--yellow);
}

.allergy-item,
.skip-row {
  background-color: #fffaf1;
}

.allergy-item.active {
  border: 0;
  background-color: var(--pink);
  background-image: url("./assets/pencil-frame-row.svg");
}

.tabs {
  position: relative;
  border-top: 0;
}

.tabs::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: -7px;
  height: 15px;
  pointer-events: none;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
}

.tabs button.active::before {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.sheet {
  border: 0;
  background-color: var(--paper);
  background-image:
    url("./assets/pencil-frame-card.svg"),
    url("./assets/doodle-canvas.svg");
  background-size: 100% 100%, 440px 760px;
  background-repeat: no-repeat, repeat;
}

.recipe-cover,
.recipe-cover.dessert {
  border-bottom: 0;
  background-image:
    url("./assets/pencil-line.svg"),
    linear-gradient(102deg, rgba(255,223,82,.28) 0 47%, transparent 47%);
  background-position: center bottom, center;
  background-size: 100% 15px, 100% 100%;
  background-repeat: no-repeat;
}

.recipe-cover.dessert {
  background-image:
    url("./assets/pencil-line.svg"),
    linear-gradient(102deg, rgba(242,167,184,.3) 0 47%, transparent 47%);
}

.warning {
  border: 0;
  background-color: #ffe4e0;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
}

.ingredient-list {
  background-color: #fffdf8;
}

.ingredient-row:last-child,
.step-row:last-child {
  background-image: none;
}

.ingredient-row.checked {
  background-color: #eff5d9;
}

.tool-chip {
  background-color: #dff0e8;
}

.tag-chip {
  background-color: #ffe3e3;
}

.sheet-actions {
  background-color: rgba(255,250,241,.97);
  background-position: center top;
}

.primary {
  background-color: var(--tomato);
}

.secondary {
  background-color: var(--cream);
}

.reward-burst {
  border: 0;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
}

.unlock-row {
  background-color: #e5f0e5;
}

@media (max-width: 560px) {
  .phone::before {
    display: none;
  }
}

.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.podium,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  border-radius: 0;
  clip-path: polygon(.7% 1.4%, 24% .2%, 51% 1%, 76% .25%, 99.1% 1.3%, 100% 27%, 99.4% 53%, 100% 78%, 98.8% 99%, 74% 98.7%, 48% 99.6%, 23% 98.8%, .8% 99.5%, 0 74%, .6% 49%, 0 24%);
  box-shadow: none;
}

.quest-hero {
  filter: drop-shadow(6px 7px 0 var(--yellow));
}

.progress-panel {
  filter: drop-shadow(3px 4px 0 rgba(67,33,59,.1));
}

.reward-track {
  filter: drop-shadow(3px 4px 0 rgba(67,33,59,.1));
}

.map-hero,
.map-hero.dessert {
  filter: drop-shadow(5px 6px 0 var(--leaf));
}

.map-hero.dessert {
  filter: drop-shadow(5px 6px 0 var(--pink));
}

.podium,
.profile-hero {
  filter: drop-shadow(5px 6px 0 var(--yellow));
}

.profile-hero {
  filter: drop-shadow(5px 6px 0 var(--leaf));
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list {
  filter: drop-shadow(3px 4px 0 var(--cream));
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card,
.segment,
.my-rank,
.rank-list,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  border-radius: 0;
  clip-path: polygon(1% 3%, 27% 1%, 53% 2.5%, 78% .6%, 99% 3%, 100% 48%, 98.8% 97%, 73% 98.4%, 49% 97%, 24% 99.2%, .8% 97%, 0 52%);
}

.map-step.right .map-stop,
.quick-card:nth-child(2),
.profile-section:nth-of-type(even) .profile-section-card {
  clip-path: polygon(.6% 2%, 26% 3%, 51% .5%, 77% 2.2%, 99% 1%, 100% 51%, 99% 98%, 75% 97%, 50% 99.5%, 23% 97.5%, 1% 99%, 0 47%);
}

.section-head h3,
.recipe-block h3,
.quest-copy h3 {
  display: inline-block;
  padding-bottom: 4px;
  text-decoration: none;
  background-image: url("./assets/pencil-line.svg");
  background-position: center bottom;
  background-size: 100% 11px;
  background-repeat: no-repeat;
}

/* Keep the handmade linework without GPU-sensitive clipping. */
.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.podium,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card,
.segment,
.my-rank,
.rank-list,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  clip-path: none;
  filter: none;
}

.quest-hero {
  border-radius: 13px 20px 11px 18px;
  box-shadow: 6px 7px 0 var(--yellow);
}

.progress-panel,
.reward-track {
  border-radius: 10px 16px 8px 14px;
  box-shadow: 3px 4px 0 rgba(67,33,59,.1);
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card {
  border-radius: 7px 15px 6px 13px;
}

.map-hero,
.map-hero.dessert {
  border-radius: 9px 17px 8px 15px;
  box-shadow: 5px 6px 0 var(--leaf);
}

.map-hero.dessert {
  box-shadow: 5px 6px 0 var(--pink);
}

.map-step .map-stop,
.map-step.right .map-stop,
.forest-goal,
.chapter-marker,
.segment,
.my-rank,
.allergy-item,
.skip-row,
.primary,
.secondary,
.quest-cta,
.warning,
.unlock-row {
  border-radius: 6px 13px 5px 11px;
}

.podium,
.profile-hero {
  border-radius: 10px 18px 9px 16px;
  box-shadow: 5px 6px 0 var(--yellow);
}

.profile-hero {
  box-shadow: 5px 6px 0 var(--leaf);
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.rank-list {
  border-radius: 9px 16px 8px 14px;
  box-shadow: 3px 4px 0 var(--cream);
}

.quest-hero { transform: rotate(-.62deg) translateX(1px); }
.progress-panel { transform: rotate(.46deg) translateX(-1px); }
.reward-track { transform: rotate(-.58deg) translateX(1px); }
.quick-card { transform: rotate(-1.05deg) translateY(1px); }
.quick-card:nth-child(2),
.quick-card.badge-card { transform: rotate(1.12deg) translateY(-1px); }
.section-head { transform: rotate(-.22deg); }
.map-hero { transform: rotate(-.58deg) translateX(1px); }
.map-hero.dessert { transform: rotate(.48deg) translateX(-1px); }
.podium { transform: rotate(.42deg); }
.my-rank { transform: rotate(-.62deg); }
.profile-hero { transform: rotate(-.5deg) translateX(1px); }
.profile-section:nth-of-type(odd) .profile-section-card { transform: rotate(.34deg); }
.profile-section:nth-of-type(even) .profile-section-card { transform: rotate(-.42deg); }

@media (max-height: 730px) and (min-width: 561px) {
  .phone {
    min-height: 660px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Pencil UI v7: calm color system, restrained hand-drawn linework */
@font-face {
  font-family: "Bap Story";
  src: url("./assets/fonts/PoorStory-Regular-subset.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #51384a;
  --muted: #7c6f72;
  --paper: #fffaf1;
  --surface: #fffdf8;
  --line: rgba(81, 56, 74, .22);
  --tomato: #ee665e;
  --yellow: #f3d86d;
  --cream: #f3e3d6;
  --leaf: #bfd79c;
  --pool: #91cbc0;
  --pink: #e9b7b2;
  --plum: #51384a;
  --butter-paper: #fbefc5;
  --mint-paper: #e4f0e9;
  --blush-paper: #f8e8e4;
  --blue-paper: #e2efef;
  --shadow-sm: 2px 3px 0 rgba(81, 56, 74, .07);
  --shadow-md: 4px 5px 0 rgba(81, 56, 74, .075);
  --shadow-lg: 8px 10px 0 rgba(81, 56, 74, .08);
}

html,
body,
button,
input,
textarea,
select {
  font-family: "Bap Gowun", "SUIT", sans-serif;
}

h1,
h2,
h3,
strong,
.quest-label,
.quest-cta,
.screen-kicker,
.eyebrow,
.node-num,
.node-title,
.segment button,
.map-stat,
.chapter-marker,
.profile-stat,
.level-chip,
.tabs button,
.recipe-stage-chip,
.recipe-block-head,
.primary,
.secondary {
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-weight: 400;
}

.brand h1 {
  font-size: 24px !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

.quest-copy h2 {
  font-size: 35px !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
  font-weight: 400 !important;
}

.quest-copy h3 {
  font-size: 23px !important;
  letter-spacing: -.025em !important;
  font-weight: 400 !important;
}

.section-head h3 {
  font-size: 21px !important;
}

.quest-cta,
.primary,
.secondary {
  font-size: 18px !important;
  font-weight: 400 !important;
}

.phone {
  background-color: var(--paper);
  box-shadow: 8px 9px 0 rgba(243, 216, 109, .72), 13px 15px 0 rgba(81, 56, 74, .05);
}

.top {
  background-color: rgba(255, 250, 241, .96);
}

.brand-copy span {
  color: #d76065;
}

.icon,
.quest-label,
.map-stat,
.level-chip,
.recipe-stage-chip {
  background-color: var(--butter-paper);
  color: var(--ink);
}

.quest-label {
  color: #438a83;
  box-shadow: 2px 2px 0 rgba(145, 203, 192, .27);
}

.quest-hero {
  border-radius: 14px 18px 13px 17px;
  overflow: hidden;
  background-color: var(--surface);
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(103deg, rgba(251, 239, 197, .96) 0 47%, transparent 47%),
    linear-gradient(180deg, #fffdf8, #f8eee6);
  box-shadow: 5px 6px 0 var(--yellow);
  transform: rotate(-.18deg) translateX(0);
}

.quest-visual::before {
  background-color: rgba(145, 203, 192, .22);
}

.quest-cta,
.primary {
  background-color: var(--tomato);
  color: #fffdf8;
  box-shadow: 3px 4px 0 rgba(233, 183, 178, .9);
}

.quest-cta {
  transform: rotate(.08deg);
}

.cta-icon {
  background-color: var(--yellow);
  color: var(--ink);
}

.progress-panel {
  border-radius: 12px 16px 11px 15px;
  background-color: var(--surface);
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, var(--surface) 0 68%, var(--blue-paper) 68%);
  box-shadow: 3px 4px 0 rgba(81, 56, 74, .07);
  transform: rotate(.1deg) translateX(0);
}

.progress-panel h3 b {
  color: #d75f65;
}

.progress-track,
.map-progress {
  border-color: rgba(81, 56, 74, .23);
  background: #f2e8df;
}

.progress-track span,
.map-progress span {
  background: var(--tomato);
}

.progress-ring {
  border: 0;
  border-radius: 50%;
  background-color: #efe6df;
  background-image: url("./assets/pencil-circle.svg"), conic-gradient(var(--pool) calc(var(--progress) * 1%), #efe6df 0);
  background-size: 100% 100%, 100% 100%;
  box-shadow: 3px 3px 0 var(--leaf);
  transform: rotate(.5deg);
}

.progress-ring::after {
  background: #fffaf4;
}

.reward-track {
  border-radius: 12px 16px 11px 15px;
  background-color: #fffaf5;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, rgba(251, 239, 197, .36), rgba(248, 232, 228, .52));
  box-shadow: 3px 4px 0 rgba(81, 56, 74, .06);
  transform: rotate(-.1deg) translateX(0);
}

.reward-track::before {
  height: 8px;
  background: url("./assets/pencil-line.svg") center / 100% 8px no-repeat;
  opacity: .42;
}

.reward-icon {
  border: 0;
  border-radius: 50%;
  background-color: #f4e9e1;
  background-image: url("./assets/pencil-circle.svg");
  box-shadow: 2px 2px 0 rgba(243, 216, 109, .8);
  transform: rotate(0) !important;
}

.reward-slot:nth-child(2n) .reward-icon {
  background-color: var(--mint-paper);
}

.reward-slot.current .reward-icon {
  background-color: var(--tomato);
  color: #fff;
  box-shadow: 3px 3px 0 var(--yellow);
}

.quick-card,
.quick-card:nth-child(2),
.quick-card.badge-card {
  border-radius: 11px 16px 10px 15px;
  box-shadow: 3px 4px 0 rgba(81, 56, 74, .06);
}

.quick-card {
  background-color: #fff8de;
  transform: rotate(-.22deg) translateY(0);
}

.quick-card:nth-child(2),
.quick-card.badge-card {
  background-color: var(--mint-paper);
  transform: rotate(.2deg) translateY(0);
}

.quick-card-icon,
.badge-card .quick-card-icon,
.section-title-icon {
  border: 0;
  border-radius: 7px 10px 6px 9px;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  color: var(--ink);
  transform: rotate(-1.2deg);
}

.badge-card .quick-card-icon,
.profile-section:nth-of-type(3n + 1) .section-title-icon {
  background-color: var(--leaf);
}

.profile-section:nth-of-type(3n + 2) .section-title-icon {
  background-color: var(--pink);
}

.profile-section:nth-of-type(3n) .section-title-icon {
  background-color: var(--pool);
}

.map-hero,
.map-hero.dessert {
  border-radius: 12px 17px 11px 16px;
  background-color: var(--surface);
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(103deg, rgba(228, 240, 233, .85) 0 42%, transparent 42%),
    linear-gradient(180deg, #fffdf8, #f7eee7);
  box-shadow: 4px 5px 0 var(--leaf);
  transform: rotate(-.16deg) translateX(0);
}

.map-hero.dessert {
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(103deg, rgba(248, 232, 228, .9) 0 42%, transparent 42%),
    linear-gradient(180deg, #fffdf8, #f7eee7);
  box-shadow: 4px 5px 0 var(--pink);
  transform: rotate(.14deg) translateX(0);
}

.map-step .map-stop,
.map-step.right .map-stop {
  border-radius: 10px 14px 9px 13px;
  background-color: rgba(255, 253, 248, .97);
  box-shadow: 3px 4px 0 rgba(81, 56, 74, .055);
  transform: rotate(-.12deg);
}

.map-step.right .map-stop {
  transform: rotate(.12deg);
}

.map-step .map-stop.available {
  background-color: var(--butter-paper);
  box-shadow: 4px 4px 0 var(--yellow);
}

.map-step .map-stop.cleared {
  background-color: var(--mint-paper);
  box-shadow: 3px 4px 0 var(--leaf);
}

.node-badge {
  border: 0;
  border-radius: 50%;
  background-color: var(--cream);
  background-image: url("./assets/pencil-circle.svg");
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--pink);
  transform: rotate(-.5deg);
}

.available .node-badge {
  background-color: var(--tomato);
  color: #fff;
}

.chapter-marker,
.forest-goal,
.segment,
.my-rank,
.rank-list,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.allergy-item,
.skip-row,
.warning,
.unlock-row {
  border-radius: 10px 14px 9px 13px;
}

.chapter-marker {
  background-color: var(--yellow);
}

.forest-goal {
  background-color: var(--mint-paper);
}

.forest-goal.trailhead {
  background-color: var(--butter-paper);
}

.segment {
  background-color: #f3e8df;
}

.segment button.active {
  background-color: var(--surface);
  color: var(--ink);
}

.podium {
  border-radius: 12px 17px 11px 16px;
  background: linear-gradient(118deg, var(--blue-paper) 0 34%, #fffaf0 34% 67%, var(--blush-paper) 67%);
  box-shadow: 4px 5px 0 var(--yellow);
  transform: rotate(.1deg);
}

.podium-avatar,
.avatar {
  background-color: var(--cream);
  box-shadow: 2px 2px 0 var(--pink);
}

.podium-person.first .podium-avatar {
  background-color: var(--pink);
}

.podium-person.second .podium-avatar {
  background-color: var(--butter-paper);
}

.podium-person.third .podium-avatar {
  background-color: var(--leaf);
}

.podium-block,
.podium-person.first .podium-block {
  background-color: rgba(145, 203, 192, .16);
}

.my-rank {
  background-color: var(--butter-paper);
  transform: rotate(-.12deg);
}

.rank-list {
  background-color: var(--surface);
}

.my-rank-mark {
  background-color: var(--tomato);
  color: #fff;
}

.rank-row:nth-child(3n + 1) .avatar { background: var(--mint-paper); color: #4b7770; }
.rank-row:nth-child(3n + 2) .avatar { background: var(--blush-paper); color: #8b5f68; }
.rank-row:nth-child(3n) .avatar { background: var(--butter-paper); color: #7c6840; }

.profile-hero {
  border-radius: 12px 17px 11px 16px;
  background: linear-gradient(106deg, var(--blush-paper) 0 38%, #fffdf8 38% 72%, rgba(251, 239, 197, .72) 72%);
  box-shadow: 4px 5px 0 var(--leaf);
  transform: rotate(-.12deg) translateX(0);
}

.profile-avatar {
  border-radius: 50%;
  background-color: var(--pink);
  box-shadow: 3px 3px 0 var(--tomato);
  transform: rotate(-1deg);
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card {
  background-color: var(--surface);
  box-shadow: 3px 4px 0 var(--cream);
  transform: rotate(.08deg);
}

.profile-section:nth-of-type(even) .profile-section-card {
  background-color: #fffaf0;
  transform: rotate(-.08deg);
}

.badge-item,
.badge-item.earned,
.sticker-cell {
  border-radius: 8px 11px 7px 10px;
  background-color: #f5ede6;
}

.badge-item.earned {
  background-color: var(--mint-paper);
  box-shadow: 2px 2px 0 var(--leaf);
}

.allergy-item,
.skip-row {
  background-color: #f7efe8;
}

.allergy-item.active {
  background-color: var(--mint-paper);
  box-shadow: 2px 2px 0 var(--leaf);
}

.recipe-cover,
.recipe-cover.dessert {
  background-color: var(--surface);
  background-image: linear-gradient(104deg, var(--butter-paper) 0 43%, transparent 43%), linear-gradient(180deg, #fffdf8, #f8eee7);
}

.recipe-cover.dessert {
  background-image: linear-gradient(104deg, var(--blush-paper) 0 43%, transparent 43%), linear-gradient(180deg, #fffdf8, #f8eee7);
}

.recipe-meta-item:nth-child(1) { background-color: var(--butter-paper); }
.recipe-meta-item:nth-child(2) { background-color: var(--mint-paper); }
.recipe-meta-item:nth-child(3) { background-color: var(--blush-paper); }

.ingredient-list {
  background-color: var(--surface);
  box-shadow: 3px 3px 0 var(--cream);
}

.ingredient-row.checked {
  background-color: var(--mint-paper);
}

.ingredient-check,
.step-number,
.reward-burst {
  border: 0;
  border-radius: 50%;
  background-image: url("./assets/pencil-circle.svg");
}

.ingredient-check {
  background-color: var(--surface);
}

.ingredient-row.checked .ingredient-check {
  background-color: var(--leaf);
}

.step-number {
  background-color: var(--yellow);
  box-shadow: 2px 2px 0 var(--pink);
  transform: rotate(-.5deg);
}

.tool-chip {
  background-color: var(--mint-paper);
  transform: rotate(-.12deg);
}

.tool-chip:nth-child(even) {
  transform: rotate(.12deg);
}

.tag-chip,
.warning {
  background-color: var(--blush-paper);
}

.secondary {
  background-color: var(--cream);
  color: var(--ink);
  box-shadow: 3px 4px 0 rgba(243, 216, 109, .75);
}

.unlock-row {
  background-color: var(--mint-paper);
}

.tabs {
  background-color: rgba(255, 250, 241, .97);
}

.tabs button {
  color: #766c70;
}

.tabs button.active {
  color: var(--ink);
}

.top,
.tabs {
  backdrop-filter: none;
}

.brand-art,
.hero-reference-art,
.quick-reference-art,
.map-reference-art,
.goal-reference-art,
.current-stage-art,
.screen-reference-art,
.profile-reference-art,
.recipe-reference-art,
.recipe-utensil-art,
.reward-reference-art,
.tab-art {
  filter: none;
}

.quest-copy h3,
.section-head h3,
.recipe-block h3 {
  background-size: 100% 8px;
}

.phone::before {
  display: none !important;
}

@media (max-width: 560px) {
  .phone {
    box-shadow: none;
  }

  .quest-hero,
  .progress-panel,
  .reward-track {
    transform: none;
  }
}

/* Home notebook v8: editorial cooking-journal layout */
.home-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 1px 8px;
}

.home-dayline {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 3px 11px;
  padding: 0 3px 6px;
  color: #806f70;
  background: url("./assets/pencil-line.svg") center bottom / 100% 7px no-repeat;
}

.home-dayline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: -.015em;
}

.home-dayline i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tomato);
  box-shadow: 8px 0 0 var(--yellow), 16px 0 0 var(--pool);
  margin-right: 16px;
}

.home-dayline small {
  color: #9b8581;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.home-screen .quest-hero {
  min-height: 292px;
  margin: 0 3px;
  padding: 19px 20px;
  border-radius: 15px 19px 14px 18px;
  background-color: #fffaf1;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(104deg, rgba(249, 232, 169, .86) 0 49%, transparent 49%),
    radial-gradient(circle at 85% 28%, rgba(145, 203, 192, .14), transparent 31%),
    linear-gradient(180deg, #fffdf8, #f8eee5);
  box-shadow: 6px 7px 0 #f0d267, 10px 11px 0 rgba(81, 56, 74, .045);
}

.home-screen .quest-copy {
  width: 58%;
}

.home-screen .quest-label {
  padding: 5px 9px 4px;
  background-color: #edf4e5;
  box-shadow: 2px 2px 0 rgba(145, 203, 192, .35);
}

.home-screen .quest-copy h2 {
  margin-top: 16px;
  color: #493044;
  font-size: 34px !important;
  line-height: 1.02 !important;
}

.home-screen .quest-copy h3 {
  margin-top: 13px;
  color: #db5f62;
}

.home-screen .quest-meta {
  margin-top: 9px;
  color: #6f6266;
}

.home-screen .quest-visual {
  top: 47px;
  right: 7px;
  width: 178px;
  height: 166px;
  transform: rotate(1.5deg);
}

.home-screen .hero-reference-art {
  width: 164px;
  transform: rotate(1deg);
}

.home-screen .quest-cta {
  left: 17px;
  right: 15px;
  bottom: 14px;
  min-height: 53px;
  padding-left: 17px;
  background-color: #ef625b;
  box-shadow: 3px 4px 0 #e9aaa6;
}

.home-screen .quest-cta b {
  margin-right: 4px;
  color: #fff9e9;
}

.home-logbook {
  position: relative;
  margin: 23px 2px 0;
  padding: 17px 16px 16px;
  border-radius: 14px 18px 13px 17px;
  background-color: #fffaf3;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(145, 203, 192, .08) 31px 32px);
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  box-shadow: 4px 5px 0 rgba(233, 183, 178, .32);
}

.home-logbook::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -5px;
  right: 24px;
  width: 48px;
  height: 13px;
  background: linear-gradient(90deg, rgba(243, 216, 109, .78) 0 50%, rgba(191, 215, 156, .78) 50%);
  opacity: .82;
  transform: rotate(4deg);
}

.home-logbook-head {
  min-height: 39px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px 9px;
  background: url("./assets/pencil-line.svg") center bottom / 100% 7px no-repeat;
}

.home-logbook-head .eyebrow {
  color: #cc666b;
  font-size: 8px;
  letter-spacing: .12em;
}

.home-logbook-head h3 {
  margin-top: 1px;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -.02em;
}

.home-log-stamp {
  margin-top: 3px;
  padding: 5px 7px 4px;
  border-radius: 5px 8px 4px 7px;
  background-color: var(--yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 10px;
  letter-spacing: .04em;
  transform: rotate(1deg);
}

.home-log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 122px;
  gap: 10px;
  margin-top: 12px;
}

.home-log-grid .progress-panel {
  min-height: 132px;
  display: block;
  margin: 0;
  padding: 16px 15px 14px;
  border-radius: 11px 15px 10px 14px;
  background-color: #fff2c8;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  box-shadow: 3px 3px 0 rgba(243, 216, 109, .38);
}

.home-log-grid .progress-panel .eyebrow {
  color: #c85d65;
  font-size: 9px;
}

.home-log-grid .progress-panel h3 {
  margin-top: 5px;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.home-log-grid .progress-panel h3 b {
  color: #df5f62;
  font-size: 34px;
  font-weight: 400;
}

.home-log-grid .progress-panel h3 span {
  color: #695967;
  font-size: 18px;
}

.home-log-grid .progress-track {
  height: 6px;
  margin-top: 15px;
  border: 0;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(81, 56, 74, .13);
}

.home-log-grid .progress-caption {
  margin-top: 8px;
  color: #76696e;
  font-size: 10px;
}

.home-goal-note {
  min-height: 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 8px;
  border-radius: 11px 15px 10px 14px;
  background-color: #dcece6;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  box-shadow: 3px 3px 0 rgba(191, 215, 156, .55);
  text-align: center;
  transform: rotate(.16deg);
}

.home-goal-note .progress-ring {
  width: 53px;
  height: 53px;
  margin-bottom: 6px;
  box-shadow: 2px 2px 0 rgba(243, 216, 109, .85);
}

.home-goal-note .progress-ring::before,
.home-goal-note .progress-ring::after {
  width: 38px;
  height: 38px;
}

.home-goal-note .progress-ring strong {
  font-size: 13px;
}

.home-goal-note > span {
  color: #7b6c6f;
  font-size: 8px;
}

.home-goal-note > strong {
  max-width: 100%;
  margin-top: 1px;
  overflow: hidden;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-goal-note > small {
  margin-top: 3px;
  color: #877b7c;
  font-size: 7px;
  line-height: 1.25;
}

.home-roadmap {
  margin-top: 15px;
}

.home-roadmap .section-head {
  margin: 0 2px 8px;
  transform: none;
}

.home-roadmap .section-head h3 {
  font-size: 17px !important;
  background-size: 100% 6px;
}

.home-roadmap .reward-track {
  min-height: 91px;
  padding: 11px 12px 9px;
  border-radius: 10px 14px 9px 13px;
  background-color: #fff8f3;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, rgba(248, 232, 228, .55), rgba(255, 248, 243, .72));
  box-shadow: 2px 3px 0 rgba(233, 183, 178, .24);
}

.home-roadmap .reward-icon {
  width: 47px;
  height: 47px;
}

.home-roadmap .reward-track::before {
  opacity: .3;
}

.home-collection {
  margin-top: 19px;
  padding: 0 2px;
}

.home-collection > .section-head {
  margin: 0 3px 10px;
  transform: none;
}

.home-collection > .section-head h3 {
  font-size: 19px !important;
}

.home-collection .quick-grid {
  grid-template-columns: 1.16fr .84fr;
  gap: 10px;
  margin-top: 0;
}

.home-collection .quick-card,
.home-collection .quick-card:nth-child(2),
.home-collection .quick-card.badge-card {
  min-height: 154px;
  padding: 15px 14px 13px;
  overflow: hidden;
  border-radius: 12px 16px 11px 15px;
  background-color: #fff1bd;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  box-shadow: 3px 4px 0 rgba(243, 216, 109, .3);
  transform: rotate(-.14deg);
}

.home-collection .quick-card:nth-child(2),
.home-collection .quick-card.badge-card {
  background-color: #dfeee8;
  box-shadow: 3px 4px 0 rgba(191, 215, 156, .42);
  transform: rotate(.15deg);
}

.home-collection .quick-card-icon {
  width: 33px;
  height: 33px;
}

.home-collection .quick-card-kicker {
  position: relative;
  z-index: 3;
  display: block;
  margin-top: 12px;
  color: #c76769;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
}

.home-collection .badge-card .quick-card-kicker {
  color: #4c8b83;
}

.home-collection .quick-card h3 {
  width: 76%;
  margin-top: 2px;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 17px;
  font-weight: 400;
}

.home-collection .quick-card p {
  width: 72%;
  margin-top: 5px;
  font-size: 10px;
}

.home-collection .quick-reference-art {
  right: -4px;
  bottom: -4px;
  width: 80px;
  height: 88px;
  opacity: .9;
}

.home-collection .quick-reference-cup {
  right: -8px;
  width: 83px;
  height: 76px;
}

@media (max-width: 390px) {
  .home-dayline small {
    display: none;
  }

  .home-screen .quest-hero {
    min-height: 286px;
    margin-inline: 0;
  }

  .home-screen .quest-copy {
    width: 61%;
  }

  .home-screen .quest-copy h2 {
    font-size: 31px !important;
  }

  .home-screen .quest-visual {
    right: -4px;
    width: 155px;
  }

  .home-screen .hero-reference-art {
    width: 148px;
  }

  .home-logbook {
    margin-inline: 0;
    padding-inline: 13px;
  }

  .home-log-grid {
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: 8px;
  }

  .home-log-grid .progress-panel {
    padding-inline: 12px;
  }

  .home-goal-note {
    padding-inline: 6px;
  }

  .home-roadmap .reward-track {
    padding-inline: 8px;
  }

  .home-roadmap .reward-icon {
    width: 44px;
    height: 44px;
  }

  .home-collection .quick-grid {
    grid-template-columns: 1.08fr .92fr;
    gap: 8px;
  }
}

/* Home cover v9: asymmetric recipe-magazine composition */
.home-screen-v9 {
  display: block;
  padding: 0 1px 18px;
}

.home-cover {
  position: relative;
  min-height: 435px;
  margin: 1px 2px 0;
  overflow: hidden;
  border-radius: 16px 20px 15px 19px;
  background-color: #fff9ec;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(112deg, rgba(249, 231, 164, .88) 0 47%, transparent 47%),
    radial-gradient(circle at 80% 28%, rgba(145, 203, 192, .24), transparent 30%),
    linear-gradient(180deg, #fffdf7, #f7eae0);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 7px 8px 0 #efd066, 11px 12px 0 rgba(81, 56, 74, .05);
}

.home-cover::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 51px;
  right: 25px;
  width: 159px;
  height: 172px;
  border-radius: 47% 53% 43% 57% / 55% 43% 57% 45%;
  background: rgba(145, 203, 192, .23);
  transform: rotate(9deg);
}

.home-cover::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 206px;
  left: 170px;
  width: 70px;
  height: 18px;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat;
  transform: rotate(-4deg);
}

.home-cover-meta {
  position: absolute;
  z-index: 4;
  top: 14px;
  left: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  color: #8d7b78;
  background: url("./assets/pencil-line.svg") center bottom / 100% 6px no-repeat;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 9px;
  letter-spacing: .055em;
}

.home-cover-meta b {
  padding: 3px 6px 2px;
  border-radius: 4px 7px 3px 6px;
  background-color: rgba(191, 215, 156, .72);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: #506545;
  font-weight: 400;
}

.home-cover-number {
  position: absolute;
  z-index: 0;
  top: 47px;
  left: 12px;
  color: rgba(229, 143, 134, .2);
  font-family: "Bap Story", sans-serif;
  font-size: 102px;
  line-height: 1;
  letter-spacing: -.08em;
}

.home-cover-side {
  position: absolute;
  z-index: 3;
  top: 68px;
  right: 6px;
  color: rgba(81, 56, 74, .48);
  font-family: "Bap Story", sans-serif;
  font-size: 7px;
  letter-spacing: .13em;
  writing-mode: vertical-rl;
}

.home-cover-spark {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
}

.home-cover-spark.spark-a {
  top: 84px;
  right: 183px;
  background: #e88f9b;
}

.home-cover-spark.spark-b {
  top: 216px;
  right: 24px;
  width: 6px;
  height: 6px;
  background: #f0cf62;
}

.home-cover-copy {
  position: absolute;
  z-index: 3;
  top: 61px;
  left: 20px;
  width: 58%;
}

.home-cover-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px 4px;
  border-radius: 5px 8px 4px 7px;
  background-color: #e9f2e4;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: #438c84;
  box-shadow: 2px 2px 0 rgba(145, 203, 192, .28);
  font-size: 10px;
  font-weight: 700;
  transform: rotate(-.4deg);
}

.home-cover-copy h2 {
  margin-top: 15px;
  color: #493044;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 37px;
  font-weight: 400;
  line-height: .97;
  letter-spacing: -.045em;
}

.home-cover-copy h2 span,
.home-cover-copy h2 strong {
  display: block;
  font-weight: 400;
}

.home-cover-copy h2 strong {
  margin-top: 5px;
}

.home-cover-recipe {
  margin-top: 15px;
}

.home-cover-recipe h3 {
  display: inline-block;
  padding-bottom: 4px;
  color: #dc5e62;
  background: url("./assets/pencil-line.svg") center bottom / 100% 7px no-repeat;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.home-cover-recipe > div {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  color: #716368;
  font-size: 10px;
}

.home-cover-recipe > div span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.home-cover-art {
  position: absolute;
  z-index: 2;
  top: 63px;
  right: 9px;
  width: 184px;
  height: 195px;
  display: grid;
  place-items: center;
}

.home-cover-art span {
  position: absolute;
  inset: 22px 5px 7px 19px;
  border-radius: 45% 55% 48% 52%;
  background: rgba(255, 255, 255, .34);
  transform: rotate(-7deg);
}

.home-cover-art img {
  position: relative;
  width: 174px;
  object-fit: contain;
  transform: rotate(2deg);
}

.home-cover-cta {
  position: absolute;
  z-index: 5;
  left: 18px;
  right: 17px;
  bottom: 117px;
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px 0 18px;
  border: 0;
  border-radius: 8px 13px 7px 12px;
  background-color: #ef625b;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: #fffdf8;
  box-shadow: 4px 5px 0 #e9aaa6;
  text-align: left;
  transform: rotate(.08deg);
}

.home-cover-cta::before,
.home-cover-cta::after {
  content: "";
  position: absolute;
  top: 21px;
  width: 11px;
  height: 15px;
  border-radius: 50%;
  background: #f8eadf;
}

.home-cover-cta::before { left: -6px; }
.home-cover-cta::after { right: -6px; }

.home-cover-cta > span:first-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.home-cover-cta b,
.home-cover-cta small {
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-weight: 400;
}

.home-cover-cta b {
  color: #fff2c8;
  font-size: 15px;
}

.home-cover-cta small {
  color: #fff;
  font-size: 17px;
}

.home-cover-arrow {
  width: 33px;
  height: 33px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background-color: #f3d86d;
  background-image: url("./assets/pencil-circle.svg");
  background-size: 100% 100%;
  color: var(--ink);
}

.home-cover-dashboard {
  position: absolute;
  z-index: 4;
  left: 17px;
  right: 16px;
  bottom: 13px;
  min-height: 89px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(76px, .7fr) 57px;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border-radius: 10px 14px 9px 13px;
  background-color: rgba(255, 252, 246, .94);
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    linear-gradient(90deg, rgba(251, 239, 197, .7), rgba(228, 240, 233, .72));
  background-size: 100% 100%, 100% 100%;
  box-shadow: 3px 4px 0 rgba(81, 56, 74, .07);
}

.home-cover-score,
.home-cover-goal {
  min-width: 0;
}

.home-cover-score > span,
.home-cover-goal > span {
  display: block;
  color: #c8676a;
  font-family: "Bap Story", sans-serif;
  font-size: 7px;
  letter-spacing: .1em;
}

.home-cover-score > strong {
  display: block;
  margin-top: 1px;
  color: #5a4854;
  font-family: "Bap Story", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.home-cover-score > strong b {
  color: #de5e63;
  font-size: 28px;
  font-weight: 400;
}

.home-cover-score .progress-track {
  height: 5px;
  margin-top: 7px;
  border: 0;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(81, 56, 74, .12);
}

.home-cover-score .progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ee665e;
}

.home-cover-score > small {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #7b6f72;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-cover-goal {
  padding-left: 8px;
  border-left: 1px solid rgba(81, 56, 74, .14);
}

.home-cover-goal > span {
  color: #4d8c83;
}

.home-cover-goal > strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-family: "Bap Story", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-cover-goal > small {
  display: block;
  margin-top: 4px;
  color: #817578;
  font-size: 7px;
  line-height: 1.2;
}

.home-cover-ring {
  width: 53px;
  height: 53px;
  box-shadow: 2px 2px 0 rgba(243, 216, 109, .9);
}

.home-cover-ring::before,
.home-cover-ring::after {
  width: 38px;
  height: 38px;
}

.home-cover-ring strong {
  font-size: 13px;
}

.home-journey {
  position: relative;
  min-height: 157px;
  margin: 25px 1px 0;
  padding: 16px 14px 11px;
  overflow: hidden;
  border-radius: 13px 18px 12px 17px;
  background-color: #e7f1ea;
  background-image:
    url("./assets/pencil-frame-wide.svg"),
    radial-gradient(circle at 92% 20%, rgba(243, 216, 109, .52), transparent 24%),
    linear-gradient(105deg, rgba(228, 240, 233, .94), rgba(255, 248, 235, .78));
  background-size: 100% 100%, 100% 100%, 100% 100%;
  box-shadow: 4px 5px 0 rgba(191, 215, 156, .5);
}

.home-journey::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 47px;
  width: 51px;
  height: 13px;
  background: rgba(233, 183, 178, .7);
  transform: rotate(-3deg);
}

.home-journey-head,
.home-pockets-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.home-journey-head span,
.home-pockets-head span {
  color: #cb676b;
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  letter-spacing: .11em;
}

.home-journey-head h3,
.home-pockets-head h3 {
  margin-top: -1px;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.home-journey-head small,
.home-pockets-head small {
  color: #7d7173;
  font-size: 9px;
}

.home-journey-track {
  position: relative;
  z-index: 2;
  min-height: 88px;
  margin-top: 8px;
  padding: 9px 5px 3px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.home-journey-track::before {
  top: 32px;
  height: 9px;
  background: url("./assets/pencil-line.svg") center / 100% 9px no-repeat;
  opacity: .38;
  transform: rotate(-1.5deg);
}

.home-journey-track .reward-slot {
  position: relative;
  z-index: 2;
}

.home-journey-track .reward-slot:nth-child(1) { transform: translateY(5px) rotate(-1deg); }
.home-journey-track .reward-slot:nth-child(2) { transform: translateY(-4px) rotate(.8deg); }
.home-journey-track .reward-slot:nth-child(3) { transform: translateY(3px) rotate(-.5deg); }
.home-journey-track .reward-slot:nth-child(4) { transform: translateY(-5px) rotate(.6deg); }
.home-journey-track .reward-slot:nth-child(5) { transform: translateY(4px) rotate(-.7deg); }

.home-journey-track .reward-icon {
  width: 49px;
  height: 49px;
  background-color: #fff7e8;
  box-shadow: 2px 2px 0 rgba(243, 216, 109, .8);
}

.home-journey-track .reward-slot:nth-child(even) .reward-icon {
  background-color: #f7e7e5;
}

.home-journey-track .reward-slot.current .reward-icon {
  background-color: #ee665e;
  color: #fff;
  box-shadow: 3px 3px 0 #f3d86d;
}

.home-journey-track .reward-slot small {
  margin-top: 5px;
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  font-weight: 400;
}

.home-pockets {
  margin-top: 22px;
  padding: 0 2px;
}

.home-pockets-head {
  margin: 0 3px 11px;
  padding-bottom: 7px;
  background: url("./assets/pencil-line.svg") center bottom / 100% 7px no-repeat;
}

.home-pocket-grid {
  display: grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 10px;
}

.home-pocket {
  position: relative;
  min-height: 166px;
  padding: 15px 14px 13px;
  overflow: hidden;
  border-radius: 12px 17px 11px 16px;
  background-color: #fff0bb;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  box-shadow: 4px 5px 0 rgba(243, 216, 109, .34);
  transform: rotate(-.17deg);
}

.home-pocket-title {
  background-color: #dcece6;
  box-shadow: 4px 5px 0 rgba(191, 215, 156, .46);
  transform: rotate(.18deg);
}

.home-pocket .quick-card-icon {
  width: 34px;
  height: 34px;
}

.home-pocket-index {
  position: absolute;
  top: 7px;
  right: 9px;
  color: rgba(81, 56, 74, .13);
  font-family: "Bap Story", sans-serif;
  font-size: 42px;
  line-height: 1;
}

.home-pocket-kicker {
  position: relative;
  z-index: 3;
  display: block;
  margin-top: 13px;
  color: #c76869;
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  letter-spacing: .09em;
}

.home-pocket-title .home-pocket-kicker {
  color: #4d8c83;
}

.home-pocket h3,
.home-pocket p {
  position: relative;
  z-index: 3;
  width: 72%;
}

.home-pocket h3 {
  margin-top: 2px;
  color: var(--ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.05;
}

.home-pocket p {
  margin-top: 6px;
  color: #71676b;
  font-size: 10px;
  line-height: 1.35;
}

.home-pocket .quick-reference-art {
  right: -5px;
  bottom: -5px;
  width: 86px;
  height: 96px;
  opacity: .91;
}

.home-pocket .quick-reference-cup {
  right: -10px;
  width: 90px;
  height: 82px;
}

@media (max-width: 390px) {
  .home-cover {
    min-height: 426px;
    margin-inline: 0;
  }

  .home-cover-copy {
    left: 17px;
    width: 61%;
  }

  .home-cover-copy h2 {
    font-size: 33px;
  }

  .home-cover-art {
    right: -8px;
    width: 162px;
  }

  .home-cover-art img {
    width: 158px;
  }

  .home-cover-cta {
    left: 14px;
    right: 14px;
    bottom: 113px;
  }

  .home-cover-cta small {
    font-size: 15px;
  }

  .home-cover-dashboard {
    left: 13px;
    right: 13px;
    grid-template-columns: minmax(0, 1.15fr) minmax(68px, .67fr) 50px;
    gap: 7px;
    padding-inline: 9px;
  }

  .home-cover-goal {
    padding-left: 6px;
  }

  .home-cover-ring {
    width: 48px;
    height: 48px;
  }

  .home-cover-ring::before,
  .home-cover-ring::after {
    width: 34px;
    height: 34px;
  }

  .home-journey {
    margin-inline: 0;
    padding-inline: 10px;
  }

  .home-journey-track {
    padding-inline: 1px;
  }

  .home-journey-track .reward-icon {
    width: 45px;
    height: 45px;
  }

  .home-pocket-grid {
    grid-template-columns: 1.1fr .9fr;
    gap: 8px;
  }

  .home-pockets-head small {
    display: none;
  }

  .home-pocket {
    padding-inline: 12px;
  }

  .home-pocket h3 {
    width: 70%;
  }

  .home-pocket p {
    width: 65%;
    font-size: 9px;
  }
}

/* Home layout v10: contained shapes and split progress strip */
.home-cover {
  min-height: 346px;
  box-shadow: 5px 6px 0 #efd066, 8px 9px 0 rgba(81, 56, 74, .045);
}

.home-cover::before {
  top: 47px;
  right: 20px;
  width: 148px;
  height: 158px;
}

.home-cover::after {
  top: 199px;
  left: 176px;
  width: 62px;
}

.home-cover-number {
  top: 43px;
  font-size: 91px;
}

.home-cover-copy {
  top: 55px;
}

.home-cover-copy h2 {
  margin-top: 13px;
  font-size: 34px;
}

.home-cover-recipe {
  margin-top: 12px;
}

.home-cover-recipe h3 {
  font-size: 21px;
}

.home-cover-art {
  top: 53px;
  right: 10px;
  width: 174px;
  height: 177px;
}

.home-cover-art img {
  width: 164px;
}

.home-cover-cta {
  left: 18px;
  right: 18px;
  bottom: 15px;
  min-height: 58px;
  border-radius: 10px 14px 9px 13px;
  box-shadow: 3px 4px 0 #e9aaa6;
}

.home-cover-cta::before,
.home-cover-cta::after {
  display: none;
}

.home-glance {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 10px;
  margin: 20px 2px 0;
}

.home-glance-score,
.home-glance-goal {
  min-width: 0;
  min-height: 105px;
  overflow: hidden;
  border-radius: 11px 15px 10px 14px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-glance-score {
  padding: 14px 14px 12px;
  background-color: #fff0ba;
  background-image: url("./assets/pencil-frame-wide.svg");
  box-shadow: 3px 4px 0 rgba(243, 216, 109, .42);
}

.home-glance-score > span,
.home-glance-goal span {
  display: block;
  color: #ca6569;
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  letter-spacing: .1em;
}

.home-glance-score > strong {
  display: block;
  margin-top: 2px;
  color: #594753;
  font-family: "Bap Story", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.home-glance-score > strong b {
  color: #df5f63;
  font-size: 30px;
  font-weight: 400;
}

.home-glance-score .progress-track {
  height: 5px;
  margin-top: 9px;
  border: 0;
  background: rgba(255, 255, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(81, 56, 74, .12);
}

.home-glance-score .progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #ee665e;
}

.home-glance-score > small {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: #776b6e;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-glance-goal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 12px 10px 11px 13px;
  background-color: #dcece6;
  background-image: url("./assets/pencil-frame-wide.svg");
  box-shadow: 3px 4px 0 rgba(191, 215, 156, .52);
}

.home-glance-goal > div:first-child {
  min-width: 0;
}

.home-glance-goal span {
  color: #4e8c84;
}

.home-glance-goal > div:first-child > strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-family: "Bap Story", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-glance-goal > div:first-child > small {
  display: block;
  margin-top: 5px;
  color: #7b7072;
  font-size: 7px;
  line-height: 1.25;
}

.home-glance-goal .home-cover-ring {
  width: 51px;
  height: 51px;
  flex: 0 0 auto;
}

.home-glance-goal .home-cover-ring::before,
.home-glance-goal .home-cover-ring::after {
  width: 36px;
  height: 36px;
}

.home-journey {
  margin-top: 19px;
  box-shadow: 3px 4px 0 rgba(191, 215, 156, .44);
}

.home-journey::after {
  top: 7px;
  left: 48px;
  width: 43px;
  height: 9px;
  opacity: .62;
}

.home-journey-track .reward-slot:nth-child(1) { transform: translateY(2px) rotate(-.5deg); }
.home-journey-track .reward-slot:nth-child(2) { transform: translateY(-2px) rotate(.45deg); }
.home-journey-track .reward-slot:nth-child(3) { transform: translateY(1px) rotate(-.3deg); }
.home-journey-track .reward-slot:nth-child(4) { transform: translateY(-2px) rotate(.35deg); }
.home-journey-track .reward-slot:nth-child(5) { transform: translateY(2px) rotate(-.4deg); }

.home-pockets {
  margin-top: 20px;
}

@media (max-width: 390px) {
  .home-cover {
    min-height: 338px;
  }

  .home-cover-copy {
    top: 53px;
  }

  .home-cover-copy h2 {
    font-size: 31px;
  }

  .home-cover-art {
    top: 53px;
    right: -2px;
    width: 153px;
    height: 168px;
  }

  .home-cover-art img {
    width: 148px;
  }

  .home-cover-cta {
    left: 14px;
    right: 14px;
    bottom: 13px;
  }

  .home-glance {
    grid-template-columns: 1.03fr .97fr;
    gap: 8px;
    margin-inline: 0;
  }

  .home-glance-score {
    padding-inline: 11px;
  }

  .home-glance-goal {
    padding-inline: 10px 8px;
  }

  .home-glance-goal > div:first-child > strong {
    font-size: 15px;
  }

  .home-glance-goal .home-cover-ring {
    width: 46px;
    height: 46px;
  }

  .home-glance-goal .home-cover-ring::before,
  .home-glance-goal .home-cover-ring::after {
    width: 33px;
    height: 33px;
  }
}

/* Interaction and layout fixes: keep surfaces calm and contained. */
.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.map-step .map-stop,
.chapter-marker,
.forest-goal,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.rank-list,
.podium,
.my-rank,
.ingredient-list,
.allergy-item,
.skip-row,
.home-cover,
.home-glance-score,
.home-glance-goal,
.home-journey,
.home-pocket {
  filter: none;
  box-shadow: 0 3px 9px rgba(81, 56, 74, .08);
}

.home-meal-screen .home-route,
.map-route,
.home-meal-screen .home-route::before,
.map-route::before {
  border-left: 0 !important;
  border-right: 0 !important;
}

.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card {
  overflow: hidden;
  clip-path: none;
  padding: 18px 14px 16px;
  transform: none;
}

.profile-section-card .section-title {
  min-height: 36px;
  margin: 0 0 12px;
}

.sticker-board {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  margin: 0;
  padding: 2px;
}

.sticker-cell {
  min-width: 0;
  overflow: hidden;
  transform: none !important;
}

.allergy-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  margin-top: 10px;
}

.allergy-add input {
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(81, 56, 74, .22);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
}

.allergy-add .secondary {
  min-height: 40px;
  padding: 0 13px;
}

.modal {
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}

.sheet:not(.reward-sheet) {
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sheet:not(.reward-sheet) .recipe-cover {
  flex: 0 0 auto;
}

.sheet:not(.reward-sheet) .recipe-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ingredient-row {
  transition: background-color 120ms ease, color 120ms ease;
}

.home-meal-screen .home-meal-hero,
.home-meal-screen .map-stat,
.home-meal-screen .chapter-marker,
.home-meal-screen .map-step .map-stop,
.home-meal-screen .map-step.right .map-stop,
.home-meal-screen .map-step-status-available .map-stop,
.home-meal-screen .map-step-status-available.right .map-stop,
.home-meal-screen .node-dish,
.home-meal-screen .map-step-status-available .node-dish,
.home-meal-screen .map-step-status-available .node-arrow {
  box-shadow: 0 3px 9px rgba(81, 56, 74, .08) !important;
}

/* Let the notebook palette read brighter without flattening the hand-painted artwork. */
.phone,
.modal {
  filter: saturate(1.08) contrast(1.01);
}

/* Quiet paper stock: a restrained notebook ground behind the hand-drawn cards. */
.page::before {
  background:
    linear-gradient(rgba(232, 231, 228, .96), rgba(232, 231, 228, .96)),
    repeating-linear-gradient(90deg, rgba(117, 99, 79, .025) 0 1px, transparent 1px 12px);
  background-size: auto, 12px 12px;
}

.content {
  background-color: #f9f4e9;
  background-image:
    radial-gradient(circle at 8px 10px, rgba(96, 76, 55, .065) 0 .55px, transparent .75px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(133, 112, 89, .055) 31px 32px),
    linear-gradient(90deg, transparent 0 15px, rgba(229, 166, 156, .12) 15px 16px, transparent 16px),
    linear-gradient(180deg, #fffdf6 0%, #f8efe1 100%);
  background-position: 0 0, 0 4px, 0 0, 0 0;
  background-size: 21px 23px, auto, auto, auto;
}

.sheet {
  background-color: #fffaf0;
  background-image:
    radial-gradient(circle at 9px 11px, rgba(96, 76, 55, .045) 0 .5px, transparent .7px),
    repeating-linear-gradient(to bottom, transparent 0 29px, rgba(133, 112, 89, .045) 29px 30px),
    linear-gradient(180deg, #fffdf7 0%, #f7eee1 100%);
  background-position: 0 0, 0 3px, 0 0;
  background-size: 22px 24px, auto, auto;
}

/* Keep watercolor fills and decorative layers inside each paper card. */
.quest-hero,
.progress-panel,
.reward-track,
.map-hero,
.map-hero.dessert,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.podium,
.rank-list,
.my-rank,
.home-cover,
.home-glance-score,
.home-glance-goal,
.home-journey,
.home-pocket,
.ingredient-list,
.warning,
.unlock-row {
  isolation: isolate;
  overflow: hidden;
}

/* Remove coloured offset layers: paper cards keep only a quiet neutral lift. */
.quest-hero,
.progress-panel,
.reward-track,
.quick-card,
.map-hero,
.map-hero.dessert,
.forest-goal,
.chapter-marker,
.map-step .map-stop,
.map-step.right .map-stop,
.podium,
.my-rank,
.rank-list,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.allergy-item,
.skip-row,
.home-cover,
.home-glance-score,
.home-glance-goal,
.home-journey,
.home-pocket {
  box-shadow: 0 3px 9px rgba(81, 56, 74, .08) !important;
}

/* Every stage uses a correctly proportioned frame, with no coloured side rail. */
.map-step .map-stop,
.map-step.right .map-stop {
  overflow: visible;
  border: 0 !important;
  background-color: rgba(255, 253, 248, .97) !important;
  background-image: url("./assets/pencil-frame-row.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform: none !important;
}

.map-step .map-stop.available {
  background-color: #fff3c5 !important;
}

.map-step .map-stop.cleared {
  background-color: #edf5e8 !important;
}

.map-step .map-stop.skipped,
.map-step .map-stop.locked {
  background-color: #fbfaf6 !important;
}

.map-step .map-stop::before,
.map-step .map-stop::after,
.map-step.right .map-stop::before,
.map-step.right .map-stop::after {
  display: none !important;
}

.node-dish,
.node-badge,
.node-arrow,
.map-stat,
.profile-avatar,
.podium-avatar,
.avatar,
.reward-icon,
.step-number {
  box-shadow: 0 2px 5px rgba(81, 56, 74, .08) !important;
}

/* Keep the sticker collection clear of the hand-drawn profile frame. */
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card {
  box-sizing: border-box;
  padding: 26px 24px !important;
  overflow: hidden;
}

.profile-section-card .section-title {
  min-height: 40px;
  margin: 0 0 16px;
  padding: 0 2px;
}

.profile-section-card .sticker-board {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 6px;
  margin: 0;
  padding: 0 2px 2px;
}

.profile-section-card .sticker-cell {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  aspect-ratio: 1;
}

/* Profile keeps a single quiet paper tone, without decorative color panels. */
.profile-hero {
  background-color: #edf2ea !important;
  background-image: url("./assets/pencil-frame-card.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: none !important;
}

.profile-hero::before,
.profile-hero::after {
  display: none;
}

.profile-main {
  padding-right: 0;
}

.profile-reference-art {
  display: none !important;
}

.profile-avatar {
  background-color: #dfe9df;
  box-shadow: 0 2px 5px rgba(81, 56, 74, .08) !important;
}

/* Keep the home cover focused on the recipe, not decorative confetti. */
.home-cover {
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(104deg, rgba(249, 232, 169, .86) 0 49%, #fffaf1 49%) !important;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
}

.home-cover::before,
.home-cover::after,
.home-cover-number,
.home-cover-side,
.home-cover-charms,
.home-cover-art > span {
  display: none !important;
}

.home-cover-art {
  right: 0;
  transform: translateX(-16px) !important;
}

@media (max-width: 390px) {
  .home-cover-art {
    right: 0;
    transform: translateX(-10px) !important;
  }
}

/* Use complete rectangular frames across the app; no clipped paper corners. */
.quest-hero,
.progress-panel,
.reward-track,
.quick-card,
.segment,
.map-hero,
.map-hero.dessert,
.forest-goal,
.chapter-marker,
.podium,
.my-rank,
.rank-list,
.profile-hero,
.profile-section-card,
.profile-section:nth-of-type(even) .profile-section-card,
.ingredient-list,
.allergy-item,
.skip-row,
.warning,
.unlock-row,
.home-cover,
.home-glance-score,
.home-glance-goal,
.home-journey,
.home-pocket {
  box-sizing: border-box;
  border-radius: 6px !important;
  clip-path: none !important;
}

.home-glance-score,
.home-glance-goal {
  border: 1px solid rgba(81, 56, 74, .42) !important;
  background-origin: border-box;
}

/* The sticky home-meal header uses one calm paper color and one recipe image. */
.home-meal-hero {
  background-color: #f5e8ad !important;
  background-image: url("./assets/pencil-frame-wide.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-meal-hero::before,
.home-meal-hero::after {
  display: none !important;
}

.home-meal-hero .map-reference-art {
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
}

/* A compact cooking-journal emblem replaces the recipe illustration in the app header. */
.top .mark {
  width: 50px;
  height: 50px;
  overflow: visible;
  border: 2px solid rgba(64, 54, 56, .78);
  border-radius: 15px 13px 17px 12px;
  background: #b8d7cf;
  box-shadow: 2px 3px 0 rgba(64, 54, 56, .12);
  transform: rotate(-2deg);
}

.top .header-brand-symbol {
  width: 46px;
  height: 46px;
  overflow: visible;
}

.header-logo-steam,
.header-logo-stem,
.header-logo-rim,
.header-logo-grain,
.header-logo-smile {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-logo-steam {
  stroke: rgba(255, 253, 247, .88);
  stroke-width: 2.1;
}

.header-logo-leaf { fill: #dae7a0; }
.header-logo-stem { stroke: #6a987d; stroke-width: 2; }
.header-logo-rice { fill: #fff8df; stroke: #4d403e; stroke-width: 1.55; }
.header-logo-bowl { fill: #f2d16f; stroke: #4d403e; stroke-width: 1.8; }
.header-logo-rim { stroke: #4d403e; stroke-width: 1.55; }
.header-logo-grain { stroke: #c78b56; stroke-width: 1.25; }
.header-logo-smile { stroke: #9e5a69; stroke-width: 1.5; }

/* The ranking board uses one paper tone with a restrained hand-drawn star scatter. */
.podium {
  min-height: 254px;
  padding: 20px 14px 0;
  border: 2px solid rgba(64, 54, 56, .76) !important;
  border-radius: 6px !important;
  background-color: #f5eedf !important;
  background-image: url("./assets/vintage-star-scatter.svg") !important;
  background-position: center;
  background-size: 260px 220px;
  color: var(--art-black);
  box-shadow: 3px 4px 0 rgba(64, 54, 56, .1) !important;
}

.podium::before {
  display: none !important;
}

.podium-person strong {
  position: relative;
  z-index: 1;
  color: var(--art-black);
}

.podium-person small {
  position: relative;
  z-index: 1;
  color: rgba(64, 54, 56, .7);
}

.podium-avatar,
.podium-person.first .podium-avatar {
  position: relative;
  z-index: 2;
  border: 2px solid rgba(64, 54, 56, .78) !important;
  background: #fffaf0 !important;
  box-shadow: 2px 3px 0 rgba(64, 54, 56, .12) !important;
}

.podium-person.first .podium-avatar {
  width: 66px;
  height: 66px;
  background: #fff1b5 !important;
}

.podium-rank {
  border: 1px solid rgba(64, 54, 56, .55);
  background: #fffaf0;
  color: var(--art-black);
}

.podium-block,
.podium-person.first .podium-block,
.podium-person.third .podium-block {
  position: relative;
  margin-top: 10px;
  border: 2px solid rgba(64, 54, 56, .72);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background-image: none;
  box-shadow: none;
}

.podium-person.second .podium-block {
  height: 76px;
  background-color: #cbded8;
}

.podium-person.first .podium-block {
  height: 112px;
  background-color: #efd576;
}

.podium-person.third .podium-block {
  height: 58px;
  background-color: #ddc9ba;
}

.podium-block::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  border-top: 1px dashed rgba(64, 54, 56, .32);
}

.podium-emblem {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 54, 56, .55);
  border-radius: 50%;
  background: #fffaf0;
  color: #7d715d;
  transform: translateX(-50%);
}

.podium-person.first .podium-emblem {
  top: -20px;
  width: 38px;
  height: 38px;
  border-color: rgba(64, 54, 56, .7);
  background: #fff1b5;
  color: #9c702e;
}

/* Dessert cards need their own image frame: recipe art has varied source dimensions. */
.map-route.dessert .node-dish {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(81, 56, 74, .28);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 2px 5px rgba(81, 56, 74, .08);
}

.map-route.dessert .node-sticker {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
}

.map-route.dessert .node-stage-art {
  display: block;
  width: 46px;
  height: 46px;
  max-width: 46px;
  max-height: 46px;
  object-fit: contain;
  object-position: center;
  filter: saturate(.92) contrast(.98);
}

.map-route.dessert .node-dish .node-badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(81, 56, 74, .28);
  border-radius: 50%;
  background: #fffaf0;
  color: #725464;
  font-size: 11px;
  box-shadow: 1px 2px 0 rgba(81, 56, 74, .1);
}

.map-route.dessert .node-dish .node-badge svg {
  width: 12px;
  height: 12px;
}

.map-route.dessert .map-stop.locked .node-sticker {
  opacity: .46;
}

.map-route.dessert .map-stop.available .node-dish {
  border-color: rgba(240, 86, 152, .55);
}

.map-route.dessert .map-stop.available .node-dish .node-badge {
  background: #fdf4e7;
  color: #ad526f;
}

/* The home cover is a contained recipe note with a quiet, hand-drawn background. */
.home-cover,
.home-screen-v11 .home-cover-cute {
  min-height: 332px;
  overflow: hidden;
  border: 2px solid rgba(64, 54, 56, .74) !important;
  border-radius: 6px !important;
  background-color: #f5edda !important;
  background-image: url("./assets/home-kitchen-doodle.svg") !important;
  background-position: center;
  background-size: 220px 180px;
  background-repeat: repeat;
  box-shadow: 0 3px 8px rgba(64, 54, 56, .1) !important;
  transform: none !important;
}

.home-cover::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 8px !important;
  right: 8px !important;
  bottom: 8px !important;
  left: 8px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 1px solid rgba(64, 54, 56, .48) !important;
  border-radius: 2px !important;
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none;
}

.home-cover::after {
  display: none !important;
}

.home-cover-meta {
  left: 19px;
  right: 19px;
}

.home-cover-art {
  top: 57px;
  right: 10px;
  transform: none !important;
}

.home-cover-cta,
.home-screen-v11 .home-cover-cta {
  right: 18px !important;
  bottom: 15px !important;
  left: 18px !important;
  width: auto;
  min-height: 60px;
  box-sizing: border-box;
  overflow: hidden;
  border: 1.5px solid rgba(64, 54, 56, .72);
  border-radius: 6px;
  background-color: #d86d70;
  background-image: none;
  box-shadow: 0 2px 0 rgba(64, 54, 56, .16);
  transform: none !important;
}

.home-cover-cta > span:first-child {
  min-width: 0;
  flex: 1 1 auto;
  align-items: center !important;
}

.home-cover-cta b {
  flex: 0 0 auto;
}

.home-cover-cta small,
.home-screen-v11 .home-cover-cta small {
  min-width: 0;
  max-width: none;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proof-capture { position: relative; display: grid; gap: 12px; margin-top: 18px; padding: 16px; overflow: hidden; border: 0; border-radius: 6px; background: #fff8eb url("./assets/pencil-frame-card.svg") center / 100% 100% no-repeat; }
.proof-capture > div > span { color: #bf7371; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.proof-capture h3 { margin-top: 4px; color: #51474a; font-size: 17px; }
.proof-capture p { margin-top: 5px; color: #756b69; font-size: 11px; line-height: 1.45; }
.proof-capture input { display: none; }
.proof-photo-button { min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid rgba(81, 56, 74, .28); border-radius: 5px; background: #f3e2b6; color: #5b4b4d; font-family: "SUIT", sans-serif; font-size: 14px; font-weight: 700; cursor: pointer; }
.proof-preview { display: block; width: 100%; max-height: 190px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #f3eee5; }
.proof-visibility { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #66595a; font-size: 12px; font-weight: 700; }
.proof-visibility select { min-width: 116px; min-height: 34px; padding: 0 9px; border: 1px solid rgba(81, 56, 74, .26); border-radius: 4px; background: #fffdf8; color: #51474a; font: inherit; }

/* Shared cooking records */
.feed-screen { padding-bottom: 22px; }
.feed-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 18px 14px; border-bottom: 1px solid rgba(81, 65, 67, .18); background: #f5f0dc; }
.feed-heading h2 { margin: 4px 0; color: #514047; font-size: 26px; line-height: 1.05; }
.feed-heading p { margin: 0; color: #74696a; font-size: 12px; line-height: 1.45; }
.feed-heading-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1.5px solid #66575b; border-radius: 8px 10px 7px 9px; background: #d6e5de; color: #4f7169; transform: rotate(3deg); }
.feed-filter { display: flex; gap: 7px; padding: 14px 18px 9px; background: #fffaf1; }
.feed-filter button { min-height: 32px; padding: 0 14px; border: 1px solid rgba(81, 65, 67, .3); border-radius: 4px; background: #fffdf8; color: #766a6d; font: inherit; font-size: 12px; font-weight: 750; }
.feed-filter button.active { border-color: #5c5153; background: #d6e5de; color: #41383d; }
.feed-friends { padding: 8px 18px 16px; border-bottom: 1px solid rgba(81, 65, 67, .14); background: #fffaf1; }
.feed-section-top { display: flex; align-items: end; justify-content: space-between; margin-bottom: 9px; }
.feed-section-top span { display: block; color: #a27a6e; font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.feed-section-top h3 { margin: 3px 0 0; color: #514047; font-size: 16px; }
.feed-section-top small { color: #817675; font-size: 10px; }
.friend-strip { display: grid; gap: 7px; }
.friend-card { display: grid; grid-template-columns: 35px minmax(0, 1fr) 32px; align-items: center; gap: 9px; padding: 7px 8px; border: 1px solid rgba(81, 65, 67, .2); border-radius: 6px; background: #fffdf8; }
.friend-card > img { width: 35px; height: 35px; border-radius: 50%; object-fit: cover; background: #eee7dd; }
.friend-card strong, .friend-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.friend-card strong { color: #514047; font-size: 12px; }
.friend-card span { margin-top: 2px; color: #887c7b; font-size: 9px; }
.friend-card button { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(81, 65, 67, .28); border-radius: 4px; background: #f3e2b6; color: #5b4b4d; }
.feed-list { display: grid; gap: 13px; padding: 15px 18px 4px; background: #fffaf1; }
.feed-post { overflow: hidden; border: 1.2px solid #66575b; border-radius: 7px; background: #fffdf8; }
.feed-post > header { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 9px 11px; }
.feed-post > header > img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eee7dd; }
.feed-post > header > div { min-width: 0; flex: 1; }
.feed-post > header strong, .feed-post > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-post > header strong { color: #514047; font-size: 12px; }
.feed-post > header span { margin-top: 2px; color: #817675; font-size: 9px; }
.feed-post > header em { padding: 4px 6px; border: 1px solid rgba(81, 65, 67, .2); border-radius: 3px; color: #7d6966; font-size: 9px; font-style: normal; }
.feed-post-photo { display: block; width: 100%; aspect-ratio: 1 / .7; object-fit: cover; background: #efe8dc; }
.feed-post-body { padding: 10px 11px 12px; }
.feed-post-actions { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.feed-post-actions button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #786a6d; font: inherit; font-size: 10px; font-weight: 750; }
.feed-post-actions button.liked { color: #bf7371; }
.feed-post-actions > span { color: #927e70; font-size: 9px; font-weight: 800; letter-spacing: .06em; }
.feed-post-body p { margin: 0; color: #62575a; font-size: 11px; line-height: 1.52; }
.feed-post-body p b { margin-right: 3px; color: #4f4247; }
.feed-empty { padding: 38px 18px; border: 1px dashed rgba(81, 65, 67, .34); border-radius: 7px; text-align: center; color: #706566; }
.feed-empty > span { display: grid; width: 38px; height: 38px; place-items: center; margin: 0 auto 9px; border-radius: 50%; background: #d6e5de; color: #4f7169; }
.feed-empty strong { display: block; font-size: 13px; }
.feed-empty p { margin: 5px 0 0; font-size: 10px; line-height: 1.5; }

.profile-social-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 13px 0; border-top: 1px solid rgba(81, 65, 67, .18); border-bottom: 1px solid rgba(81, 65, 67, .18); }
.profile-social-stats span { padding: 10px 4px; text-align: center; }
.profile-social-stats span + span { border-left: 1px solid rgba(81, 65, 67, .18); }
.profile-social-stats b, .profile-social-stats small { display: block; }
.profile-social-stats b { color: #514047; font-size: 18px; }
.profile-social-stats small { margin-top: 2px; color: #817675; font-size: 10px; }
.profile-social-link { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(81, 65, 67, .18); background: transparent; color: #5b4b4d; font: inherit; font-size: 12px; font-weight: 800; }

.tabs.tabs-six { gap: 1px; padding-right: 5px; padding-left: 5px; }
.tabs.tabs-six button { min-width: 0; min-height: 59px; }
.tabs.tabs-six .tab-art-wrap { width: 34px; height: 34px; }
.tabs.tabs-six .tab-art { width: 29px !important; height: 29px !important; }
.tabs.tabs-six button:first-child.active .tab-art { width: 30px !important; height: 32px !important; }
.tabs.tabs-six button.active::before { width: 38px; height: 38px; }
.tabs button:nth-child(2) .tab-art { width: 34px; height: 34px; filter: saturate(.92) contrast(1.04) drop-shadow(1px 1px 0 rgba(64, 54, 56, .12)); }
.tabs button:nth-child(2).active .tab-art { width: 36px; height: 36px; filter: saturate(1) contrast(1.08) drop-shadow(1px 2px 0 rgba(64, 54, 56, .15)); }

/* Keep the dessert route quiet, like a lightly ruled recipe notebook. */
.map-route.dessert {
  background-color: #fffaf4;
  background-image:
    radial-gradient(circle, rgba(143, 105, 111, .15) 0 1px, transparent 1.2px),
    linear-gradient(to bottom, transparent 0 31px, rgba(143, 105, 111, .065) 31px 32px);
  background-size: 64px 64px, 100% 32px;
}

.map-route.dessert::before {
  width: 4px;
  background: repeating-linear-gradient(to bottom, rgba(183, 125, 143, .55) 0 10px, transparent 10px 20px);
  box-shadow: none;
}

.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

@media (max-width: 390px) {
  .home-cover,
  .home-screen-v11 .home-cover-cute {
    min-height: 322px;
  }

  .home-cover-art {
    right: 4px;
  }

  .home-cover-cta,
  .home-screen-v11 .home-cover-cta {
    right: 14px !important;
    left: 14px !important;
  }
}

/* ===== stage-map.css ===== */
/* Home-meal stage map: fresh, tidy scrapbook quest */
.home-meal-screen {
  --stage-coral: #ee6a61;
  --stage-berry: #dc7890;
  --stage-lemon: #f2d463;
  --stage-mint: #9bcfc2;
  --stage-leaf: #b8d887;
  --stage-lilac: #baa8ca;
  --stage-ink: #533848;
}

.home-meal-screen .home-meal-hero {
  min-height: 184px;
  padding: 20px 20px 18px;
  overflow: hidden;
  border-radius: 18px 23px 17px 22px;
  background-color: #fff9e9;
  background-image:
    radial-gradient(circle at 83% 29%, rgba(155, 207, 194, .52) 0 51px, transparent 52px),
    radial-gradient(circle at 96% 88%, rgba(238, 106, 97, .15) 0 43px, transparent 44px),
    linear-gradient(108deg, rgba(242, 212, 99, .32) 0 42%, transparent 42%),
    url("./assets/pencil-frame-card.svg");
  background-size: auto, auto, auto, 100% 100%;
  box-shadow: 5px 6px 0 rgba(184, 216, 135, .78);
  transform: none;
}

.home-meal-screen .home-meal-hero::before {
  content: "70 RECIPE QUEST";
  top: 15px;
  right: 17px;
  padding: 5px 8px 4px;
  border: 0;
  border-radius: 6px 9px 5px 8px;
  background-color: #f7e6ea;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: #b95870;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
  transform: rotate(1.4deg);
}

.home-meal-screen .home-meal-hero::after {
  content: "";
  display: block;
  position: absolute;
  right: 126px;
  bottom: 13px;
  width: 31px;
  height: 9px;
  border-radius: 0;
  background: rgba(220, 120, 144, .38);
  transform: rotate(-8deg);
}

.home-meal-screen .map-hero-top {
  align-items: flex-start;
}

.home-meal-screen .map-hero-top > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 228px;
}

.home-meal-screen .screen-kicker {
  color: #b95c68;
  font-size: 8px;
  letter-spacing: .08em;
}

.home-meal-screen .map-hero h2 {
  margin-top: 4px;
  color: var(--stage-ink);
  font-size: 29px;
  line-height: 1;
  letter-spacing: -.035em;
}

.home-meal-lead {
  width: 190px;
  margin-top: 8px;
  color: #796a6e;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
}

.home-meal-screen .map-stat {
  position: absolute;
  z-index: 4;
  top: 76px;
  right: 22px;
  padding: 5px 8px;
  border: 0;
  border-radius: 8px 11px 7px 10px;
  background-color: #fffdf8;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: #92733b;
  box-shadow: 2px 2px 0 rgba(242, 212, 99, .76);
  font-size: 10px;
  transform: rotate(-1deg);
}

.home-meal-screen .map-reference-art {
  top: 40px;
  right: 30px;
  z-index: 2;
  width: 108px;
  height: 91px;
  object-fit: contain;
  opacity: 1;
  transform: rotate(3deg);
}

.home-meal-summary {
  position: absolute;
  z-index: 4;
  left: 19px;
  right: 18px;
  bottom: 18px;
  height: 48px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 48px;
  align-items: center;
  gap: 9px;
  padding: 7px 9px 7px 12px;
  border-radius: 10px 14px 9px 13px;
  background: rgba(255, 253, 248, .89) url("./assets/pencil-frame-wide.svg") center / 100% 100% no-repeat;
  box-shadow: 2px 3px 0 rgba(81, 56, 74, .06);
}

.home-meal-summary > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.home-meal-summary b {
  color: var(--stage-coral);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.home-meal-summary span:nth-of-type(2) b {
  color: #57988e;
}

.home-meal-summary small {
  overflow: hidden;
  color: #76696d;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-meal-summary i {
  width: 1px;
  height: 22px;
  background: rgba(81, 56, 74, .13);
}

.home-meal-summary em {
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--stage-lemon) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  color: var(--stage-ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 12px;
  font-style: normal;
  transform: rotate(2deg);
}

.home-meal-screen .map-progress {
  position: absolute;
  z-index: 5;
  left: 31px;
  right: 92px;
  bottom: 10px;
  width: auto;
  height: 4px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #eadfd5;
}

.home-meal-screen .map-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--stage-coral), var(--stage-lemon), var(--stage-mint));
}

.home-meal-screen .home-route {
  min-height: 2000px;
  padding: 31px 14px 52px;
  background-color: #fffaf1;
  background-image:
    radial-gradient(circle, rgba(220, 120, 144, .12) 0 1.2px, transparent 1.4px),
    linear-gradient(rgba(255, 250, 241, .9), rgba(255, 250, 241, .9)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp");
  background-position: 0 0, center, center top;
  background-size: 25px 25px, auto, cover;
}

.home-meal-screen .home-route::before {
  top: 48px;
  bottom: 58px;
  left: 50%;
  width: 7px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle, #fffaf1 0 2px, transparent 2.2px) center top / 7px 15px repeat-y,
    linear-gradient(to bottom, var(--stage-mint), var(--stage-leaf) 50%, var(--stage-lemon));
  box-shadow: 0 0 0 2px rgba(155, 207, 194, .13);
  opacity: .82;
  transform: translateX(-50%);
}

.home-meal-screen .chapter-marker,
.home-meal-screen .forest-goal {
  --chapter-accent: var(--stage-mint);
  --chapter-soft: #e8f4ef;
}

.home-meal-screen .chapter-1 { --chapter-accent: #f0c957; --chapter-soft: #fff4c7; }
.home-meal-screen .chapter-2 { --chapter-accent: #e98277; --chapter-soft: #fbe5df; }
.home-meal-screen .chapter-3 { --chapter-accent: #86c8bd; --chapter-soft: #e3f2ee; }
.home-meal-screen .chapter-4 { --chapter-accent: #d987a1; --chapter-soft: #f8e5ec; }
.home-meal-screen .chapter-5 { --chapter-accent: #a8cb73; --chapter-soft: #edf4da; }
.home-meal-screen .chapter-6 { --chapter-accent: #ad9ac3; --chapter-soft: #eee8f4; }
.home-meal-screen .chapter-7 { --chapter-accent: #e77a68; --chapter-soft: #fae2db; }

.home-meal-screen .chapter-marker {
  position: relative;
  z-index: 3;
  width: calc(100% - 20px);
  min-height: 72px;
  display: grid;
  grid-template-columns: 49px 1fr;
  align-items: center;
  gap: 11px;
  margin: 17px auto 25px;
  padding: 10px 14px 10px 12px;
  border: 0;
  border-radius: 14px 19px 13px 18px;
  background-color: var(--chapter-soft);
  background-image:
    linear-gradient(90deg, var(--chapter-accent) 0 7px, transparent 7px),
    url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%, 100% 100%;
  color: var(--stage-ink);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--chapter-accent) 42%, transparent);
  text-align: left;
  transform: rotate(-.1deg);
}

.home-meal-screen .chapter-marker::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 27px;
  width: 37px;
  height: 10px;
  background: color-mix(in srgb, var(--chapter-accent) 60%, transparent);
  transform: rotate(3deg);
}

.home-meal-screen .chapter-number {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chapter-accent) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  color: #fffdf8;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 20px;
  line-height: 1;
  transform: rotate(-2deg);
}

.home-meal-screen .chapter-copy {
  min-width: 0;
  display: block;
}

.home-meal-screen .chapter-copy small,
.home-meal-screen .chapter-copy b,
.home-meal-screen .chapter-copy em {
  display: block;
}

.home-meal-screen .chapter-copy small {
  color: color-mix(in srgb, var(--chapter-accent) 72%, #51384a);
  font-size: 7px;
  letter-spacing: .12em;
}

.home-meal-screen .chapter-copy b {
  margin-top: 1px;
  color: var(--stage-ink);
  font-size: 17px;
  line-height: 1.05;
}

.home-meal-screen .chapter-copy em {
  margin-top: 3px;
  overflow: hidden;
  color: #7c6e72;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-meal-screen .map-step {
  min-height: 105px;
  margin-bottom: 13px;
}

.home-meal-screen .map-step.left {
  padding-right: 43px;
}

.home-meal-screen .map-step.right {
  padding-left: 43px;
}

.home-meal-screen .map-step::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 45px;
  left: 50%;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--chapter-accent) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  box-shadow: 0 0 0 4px #fffaf1;
  transform: translate(-50%, -50%);
}

.home-meal-screen .map-step .map-stop,
.home-meal-screen .map-step.right .map-stop {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 94px;
  grid-template-columns: 60px minmax(0, 1fr) 18px;
  gap: 10px;
  margin: 0;
  padding: 11px 11px 11px 10px;
  overflow: visible;
  border: 0;
  border-radius: 15px 21px 14px 19px;
  background-color: rgba(255, 253, 248, .97);
  background-image:
    linear-gradient(90deg, var(--chapter-accent) 0 6px, transparent 6px),
    url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%, 100% 100%;
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--chapter-accent) 28%, transparent);
  transform: rotate(-.12deg);
}

.home-meal-screen .map-step.right .map-stop {
  background-image:
    linear-gradient(270deg, var(--chapter-accent) 0 6px, transparent 6px),
    url("./assets/pencil-frame-wide.svg");
  transform: rotate(.12deg);
}

.home-meal-screen .map-stop:hover:not(:disabled),
.home-meal-screen .map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-2px) rotate(0);
  box-shadow: 4px 6px 0 color-mix(in srgb, var(--chapter-accent) 35%, transparent);
}

.home-meal-screen .map-step .map-stop.available {
  background-color: #fff2bd;
  background-image:
    linear-gradient(90deg, var(--stage-coral) 0 7px, transparent 7px),
    url("./assets/pencil-frame-wide.svg");
  box-shadow: 5px 6px 0 rgba(238, 106, 97, .24);
}

.home-meal-screen .map-step.right .map-stop.available {
  background-image:
    linear-gradient(270deg, var(--stage-coral) 0 7px, transparent 7px),
    url("./assets/pencil-frame-wide.svg");
}

.home-meal-screen .map-step .map-stop.cleared {
  background-color: #e8f3e2;
  box-shadow: 3px 4px 0 rgba(168, 203, 115, .46);
}

.home-meal-screen .map-step .map-stop.skipped {
  background-color: #eee9f4;
  box-shadow: 3px 4px 0 rgba(173, 154, 195, .35);
}

.home-meal-screen .map-step .map-stop.locked {
  background-color: rgba(248, 244, 237, .95);
  box-shadow: 2px 3px 0 rgba(81, 56, 74, .05);
  opacity: .68;
}

.home-meal-screen .node-dish {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--chapter-soft) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  transform: rotate(-1.4deg);
}

.home-meal-screen .node-sticker {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  line-height: 1;
  transform: rotate(2deg);
}

.home-meal-screen .node-stage-art {
  width: 47px;
  height: 47px;
  object-fit: contain;
  filter: saturate(1.1) contrast(1.02) drop-shadow(1px 2px 0 rgba(83,50,70,.08));
}

.home-meal-screen .locked .node-sticker {
  opacity: .54;
}

.home-meal-screen .node-dish .node-badge {
  position: absolute;
  right: -3px;
  bottom: -2px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: #fffdf8 url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  color: #817479;
  box-shadow: 1px 2px 0 rgba(81, 56, 74, .12);
  transform: rotate(4deg);
}

.home-meal-screen .node-dish .node-badge svg {
  width: 12px;
  height: 12px;
}

.home-meal-screen .available .node-dish .node-badge {
  background-color: var(--stage-coral);
  color: #fff;
}

.home-meal-screen .cleared .node-dish .node-badge {
  background-color: #86b759;
  color: #fff;
}

.home-meal-screen .node-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.home-meal-screen .node-num {
  color: color-mix(in srgb, var(--chapter-accent) 74%, #51384a);
  font-size: 8px;
  letter-spacing: .06em;
}

.home-meal-screen .node-level {
  color: #918387;
  font-size: 7px;
  font-weight: 700;
  white-space: nowrap;
}

.home-meal-screen .node-title {
  margin-top: 4px;
  color: var(--stage-ink);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -.025em;
}

.home-meal-screen .node-state {
  margin-top: 6px;
  padding: 2px 6px 2px 4px;
  border-radius: 999px;
  background: rgba(81, 56, 74, .045);
  color: #817478;
  font-size: 8px;
}

.home-meal-screen .available .node-state {
  background: rgba(238, 106, 97, .12);
  color: #cf5655;
}

.home-meal-screen .cleared .node-state {
  background: rgba(134, 183, 89, .13);
  color: #648b45;
}

.home-meal-screen .node-arrow {
  width: 19px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--chapter-accent);
  opacity: 1;
}

.home-meal-screen .current-stage-art {
  z-index: 5;
  bottom: 4px;
  width: 48px;
  height: 66px;
  opacity: .95;
  filter: drop-shadow(2px 3px 0 rgba(238, 106, 97, .16));
}

.home-meal-screen .map-step.left .current-stage-art {
  right: -3px;
}

.home-meal-screen .map-step.right .current-stage-art {
  left: -3px;
}

.home-meal-screen .forest-goal {
  position: relative;
  width: calc(100% - 42px);
  min-height: 77px;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  margin-bottom: 28px;
  padding: 10px 13px;
  border: 0;
  border-radius: 16px 22px 15px 20px;
  background-color: #e8f3e8;
  background-image: url("./assets/pencil-frame-wide.svg");
  background-size: 100% 100%;
  box-shadow: 4px 5px 0 rgba(242, 212, 99, .55);
  transform: rotate(-.14deg);
}

.home-meal-screen .forest-goal.trailhead {
  margin-top: 11px;
  margin-bottom: 0;
  background-color: #fff1c5;
  box-shadow: 4px 5px 0 rgba(238, 106, 97, .18);
  transform: rotate(.14deg);
}

.home-meal-screen .goal-kicker {
  position: absolute;
  top: -7px;
  right: 15px;
  padding: 4px 8px 3px;
  border-radius: 5px 8px 4px 7px;
  background: var(--stage-coral) url("./assets/pencil-frame-row.svg") center / 100% 100% no-repeat;
  color: #fff;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 8px;
  letter-spacing: .08em;
  transform: rotate(2deg);
}

.home-meal-screen .trailhead .goal-kicker {
  background-color: #72aa9f;
  transform: rotate(-2deg);
}

.home-meal-screen .goal-reference-art {
  width: 57px;
  height: 57px;
  object-fit: contain;
  transform: rotate(-3deg);
}

.home-meal-screen .goal-reference-home {
  height: 63px;
}

.home-meal-screen .forest-goal b {
  color: var(--stage-ink);
  font-size: 15px;
  font-weight: 400;
}

.home-meal-screen .forest-goal small {
  margin-top: 3px;
  color: #7a6e71;
  font-size: 8px;
}

@media (max-width: 390px) {
  .home-meal-screen .home-meal-hero {
    min-height: 181px;
    padding-inline: 17px;
  }

  .home-meal-screen .map-reference-art {
    right: 19px;
    width: 101px;
  }

  .home-meal-screen .map-stat {
    right: 15px;
  }

  .home-meal-summary {
    left: 15px;
    right: 14px;
  }

  .home-meal-screen .home-route {
    padding-inline: 10px;
  }

  .home-meal-screen .map-step.left {
    padding-right: 34px;
  }

  .home-meal-screen .map-step.right {
    padding-left: 34px;
  }

  .home-meal-screen .map-step .map-stop,
  .home-meal-screen .map-step.right .map-stop {
    grid-template-columns: 55px minmax(0, 1fr) 16px;
    gap: 8px;
  }

  .home-meal-screen .node-dish {
    width: 54px;
    height: 54px;
  }

  .home-meal-screen .node-title {
    font-size: 15px;
  }

  .home-meal-screen .current-stage-art {
    width: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-meal-screen .map-step,
  .home-meal-screen .map-stop,
  .home-meal-screen .node-badge {
    animation: none !important;
    transition: none !important;
  }
}

/* Home-meal stage v2: character-led current quest and sticker-book rhythm */
.home-meal-screen .home-meal-hero {
  min-height: 198px;
  border-radius: 25px 32px 23px 30px;
  background-color: #fff08a;
  background-image:
    radial-gradient(circle at 82% 31%, rgba(255,255,255,.86) 0 61px, transparent 62px),
    radial-gradient(circle at 99% 83%, rgba(244,95,97,.22) 0 51px, transparent 52px),
    linear-gradient(111deg, rgba(246,185,199,.24) 0 45%, transparent 45%),
    url("./assets/pencil-frame-card.svg");
  box-shadow: 6px 7px 0 #93d1c4, 10px 12px 0 rgba(83,50,70,.06);
}

.home-meal-screen .home-meal-hero::before {
  content: "YUMMY QUEST · 70";
  top: 14px;
  right: 17px;
  padding: 5px 9px 4px;
  border-radius: 9px 12px 8px 11px;
  background-color: #f6b9c7;
  color: #71394f;
  transform: rotate(2deg);
}

.home-meal-screen .home-meal-hero::after {
  right: 121px;
  bottom: 12px;
  width: 39px;
  height: 10px;
  background: #f6b9c7;
  opacity: .66;
}

.home-meal-screen .map-hero h2 {
  margin-top: 5px;
  font-size: 32px;
}

.home-meal-screen .home-meal-lead {
  color: #705b65;
  font-size: 10px;
}

.home-meal-screen .map-reference-art {
  top: 42px;
  right: 24px;
  width: 119px;
  height: 99px;
  filter: saturate(1.15) contrast(1.03) drop-shadow(3px 4px 0 rgba(83,50,70,.1));
}

.home-meal-screen .map-stat {
  top: 86px;
  right: 19px;
  background-color: #fff9e8;
  color: #c2515f;
  box-shadow: 2px 3px 0 #f8da61;
}

.home-meal-screen .home-meal-summary {
  left: 18px;
  right: 18px;
  bottom: 18px;
  height: 49px;
  border-radius: 15px 20px 14px 18px;
  background-color: rgba(255,253,248,.92);
}

.home-meal-screen .home-route {
  padding-top: 37px;
  background-image:
    radial-gradient(circle, rgba(244,95,97,.11) 0 1.3px, transparent 1.5px),
    linear-gradient(rgba(255,250,241,.88), rgba(255,250,241,.88)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp");
}

.home-meal-screen .home-route::before {
  width: 9px;
  background:
    radial-gradient(circle, #fffaf1 0 2.1px, transparent 2.3px) center top / 9px 16px repeat-y,
    linear-gradient(to bottom, #f6b9c7, #93d1c4 35%, #b8da82 68%, #f8da61);
  box-shadow: 0 0 0 3px rgba(147,209,196,.12);
}

.home-meal-screen .chapter-marker {
  min-height: 78px;
  margin-block: 21px 29px;
  border-radius: 22px 29px 20px 27px;
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--chapter-accent) 40%, transparent);
}

.home-meal-screen .chapter-number {
  width: 51px;
  height: 51px;
  font-size: 22px;
  box-shadow: 2px 3px 0 rgba(83,50,70,.12);
}

.home-meal-screen .chapter-copy b {
  font-size: 19px;
}

.home-meal-screen .map-step .map-stop,
.home-meal-screen .map-step.right .map-stop {
  border-radius: 21px 28px 19px 26px;
  box-shadow: 4px 5px 0 color-mix(in srgb, var(--chapter-accent) 31%, transparent);
}

.home-meal-screen .map-step.right .map-stop {
  border-radius: 28px 20px 27px 19px;
}

.home-meal-screen .node-dish {
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--chapter-accent) 42%, transparent);
}

.home-meal-screen .node-dish::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px dotted rgba(255,255,255,.78);
}

.home-meal-screen .node-sticker {
  position: relative;
  z-index: 2;
}

.home-meal-screen .node-dish .node-badge {
  position: absolute;
  z-index: 3;
}

.home-meal-screen .node-title {
  font-size: 17px;
}

.home-meal-screen .map-step-status-available {
  min-height: 105px;
  margin: 0 0 13px;
  padding-inline: 0;
}

.home-meal-screen .map-step-status-available::before {
  display: none;
}

.home-meal-screen .map-step-status-available::after {
  top: 45px;
  width: 13px;
  height: 13px;
  background-color: var(--chapter-accent);
}

.home-meal-screen .map-step-status-available .map-stop,
.home-meal-screen .map-step-status-available.right .map-stop {
  width: 100%;
  min-height: 94px;
  grid-template-columns: 60px minmax(0, 1fr) 18px;
  padding: 11px 11px 11px 10px;
  border-radius: 21px 28px 19px 26px;
  background-color: #fff2bd;
  box-shadow: 4px 5px 0 rgba(238, 106, 97, .18);
  transform: none;
}

.home-meal-screen .map-step-status-available.right .map-stop {
  border-radius: 28px 20px 27px 19px;
}

.home-meal-screen .map-step-status-available .node-dish {
  width: 58px;
  height: 58px;
  background-color: var(--chapter-soft);
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--chapter-accent) 42%, transparent);
}

.home-meal-screen .map-step-status-available .node-sticker {
  width: 48px;
  height: 48px;
}

.home-meal-screen .map-step-status-available .node-stage-art {
  width: 47px;
  height: 47px;
  filter: saturate(1.1) contrast(1.02) drop-shadow(1px 2px 0 rgba(83,50,70,.08));
}

.home-meal-screen .map-step-status-available .node-title {
  margin-top: 4px;
  font-size: 16px;
}

.home-meal-screen .map-step-status-available .node-state {
  padding: 2px 6px 2px 4px;
  background: rgba(238, 106, 97, .12);
  color: #cf5655;
  font-size: 8px;
}

.home-meal-screen .map-step-status-available .node-arrow {
  width: 19px;
  height: 34px;
  background: rgba(255, 255, 255, .55);
  color: var(--chapter-accent);
  box-shadow: none;
}

.home-meal-screen .map-step-status-available .current-stage-art {
  display: none;
}

.home-meal-screen .map-step-status-cleared .map-stop {
  background-color: #e4f2d4;
}

.home-meal-screen .map-step-status-skipped .map-stop {
  background-color: #eee7f4;
}

.home-meal-screen .map-step .map-stop.locked {
  opacity: .86;
}

@media (max-width: 390px) {
  .home-meal-screen .home-meal-hero {
    min-height: 194px;
  }

  .home-meal-screen .map-step-status-available {
    padding-inline: 0;
  }

  .home-meal-screen .map-step-status-available .map-stop,
  .home-meal-screen .map-step-status-available.right .map-stop {
    grid-template-columns: 55px minmax(0, 1fr) 16px;
    padding: 11px 11px 11px 10px;
  }

  .home-meal-screen .map-step-status-available .node-dish {
    width: 54px;
    height: 54px;
  }

  .home-meal-screen .map-step-status-available .node-title {
    font-size: 15px;
  }
}

/* Shared map headers: matching layout, with one bright palette for each journey. */
.map-hero,
.map-hero.dessert {
  --map-paper: #fff1b8;
  --map-soft: #d9eee3;
  --map-accent: #5f9c8f;
  --map-progress: #e78a70;
  position: relative;
  min-height: 220px;
  padding: 20px 20px 18px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: var(--map-paper) !important;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(135deg, rgba(255, 255, 255, .38), transparent 48%) !important;
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 4px 10px rgba(81, 56, 74, .09) !important;
  filter: none !important;
  transform: none !important;
}

.map-hero.dessert {
  --map-paper: #ffe5dc;
  --map-soft: #e8def0;
  --map-accent: #a56e8f;
  --map-progress: #d7798e;
}

.map-hero::before {
  display: none !important;
}

.map-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 43px;
  right: 26px;
  width: 104px;
  height: 104px;
  display: block !important;
  border-radius: 50%;
  background: var(--map-soft) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  opacity: .86;
}

.map-hero .map-hero-top {
  position: relative;
  z-index: 3;
  align-items: flex-start;
}

.map-hero .map-hero-top > div:first-child {
  max-width: 58%;
}

.map-hero .screen-kicker {
  color: var(--map-accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
}

.map-hero h2 {
  margin-top: 7px;
  color: #4f4246;
  font-size: 29px;
  line-height: 1;
  letter-spacing: 0;
}

.map-hero .map-hero-lead {
  margin-top: 9px;
  color: #706568;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.4;
}

.map-hero .map-stat {
  position: absolute;
  z-index: 4;
  top: 1px;
  right: 1px;
  padding: 6px 9px 5px;
  border: 0;
  border-radius: 0;
  background-color: #fffaf0;
  background-image: url("./assets/pencil-frame-row.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
  color: #5f5455;
  font-size: 10px;
  transform: rotate(1deg);
}

.map-hero .map-reference-art {
  position: absolute;
  z-index: 2;
  top: 48px;
  right: 29px;
  width: 97px;
  height: 90px;
  opacity: 1;
  filter: saturate(1.08) contrast(1.04) drop-shadow(1px 3px 0 rgba(81, 56, 74, .1));
  mix-blend-mode: normal;
  object-fit: contain;
  transform: rotate(3deg);
}

.map-hero-summary,
.home-meal-summary {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 18px;
  left: 18px;
  height: 53px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 8px;
  padding: 8px 9px 7px 12px;
  border: 0;
  border-radius: 0;
  background-color: rgba(255, 253, 248, .88);
  background-image: url("./assets/pencil-frame-wide.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}

.map-hero-summary > span,
.home-meal-summary > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.map-hero-summary b,
.home-meal-summary b {
  color: var(--map-progress);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
}

.map-hero-summary span:nth-of-type(2) b,
.home-meal-summary span:nth-of-type(2) b {
  color: var(--map-accent);
}

.map-hero-summary small,
.home-meal-summary small {
  overflow: hidden;
  color: #716769;
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-hero-summary i,
.home-meal-summary i {
  width: 1px;
  height: 21px;
  background: rgba(81, 56, 74, .16);
}

.map-hero-summary em,
.home-meal-summary em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--map-soft) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  color: #56494b;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 11px;
  font-style: normal;
  transform: rotate(2deg);
}

.map-hero .map-progress {
  position: absolute;
  z-index: 5;
  right: 72px;
  bottom: 24px;
  left: 32px;
  width: auto;
  height: 4px;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: rgba(81, 56, 74, .12);
}

.map-hero .map-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--map-progress);
}

@media (max-width: 390px) {
  .map-hero,
  .map-hero.dessert {
    min-height: 212px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .map-hero .map-reference-art {
    right: 23px;
    width: 92px;
  }

  .map-hero::after {
    right: 20px;
    width: 98px;
    height: 98px;
  }

  .map-hero-summary,
  .home-meal-summary {
    right: 15px;
    left: 15px;
  }
}

/* Keep the stage header in view while the recipe map itself scrolls. */
.map-screen > .map-hero,
.map-screen > .map-hero.dessert,
.home-meal-screen > .home-meal-hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 12 !important;
  isolation: isolate;
  border: 0 !important;
}

.map-screen > .map-hero::before,
.map-screen > .map-hero.dessert::before,
.home-meal-screen > .home-meal-hero::before {
  content: "";
  position: absolute;
  z-index: 6;
  inset: 8px;
  display: block !important;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url("./assets/pencil-frame-card.svg") center / 100% 100% no-repeat;
  color: transparent;
  pointer-events: none;
  transform: none;
}

/* ===== cute-home.css ===== */
/* Cute home v11: bold bento-card home and collectible home-meal stages */
.home-screen-v11 {
  --cute-ink: #533246;
  --cute-coral: #f45f61;
  --cute-pink: #f6b9c7;
  --cute-yellow: #f8da61;
  --cute-mint: #93d1c4;
  --cute-leaf: #b8da82;
  --cute-cream: #fff9e8;
  padding: 1px 2px 22px;
}

.home-screen-v11 .home-cover-cute {
  min-height: 326px;
  margin: 1px 1px 0;
  overflow: hidden;
  border-radius: 27px 34px 25px 32px;
  background-color: #ffef84;
  background-image:
    radial-gradient(circle at 87% 32%, rgba(255,255,255,.86) 0 76px, transparent 77px),
    radial-gradient(circle at 96% 60%, rgba(147,209,196,.74) 0 49px, transparent 50px),
    linear-gradient(111deg, transparent 0 55%, rgba(255,255,255,.56) 55%),
    url("./assets/pencil-frame-card.svg");
  background-size: auto, auto, auto, 100% 100%;
  box-shadow: 7px 8px 0 var(--cute-mint), 11px 13px 0 rgba(83,50,70,.07);
  transform: rotate(-.1deg);
}

.home-screen-v11 .home-cover-cute::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 63px;
  left: -31px;
  width: 115px;
  height: 115px;
  border: 0;
  border-radius: 50%;
  background: rgba(246,185,199,.45);
  box-shadow: none;
  transform: none;
}

.home-screen-v11 .home-cover-cute::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 221px;
  left: 155px;
  width: 67px;
  height: 13px;
  background: var(--cute-pink);
  opacity: .62;
  transform: rotate(-6deg);
}

.home-screen-v11 .home-cover-meta {
  top: 15px;
  left: 19px;
  right: 18px;
  padding-bottom: 9px;
  color: #8c6a64;
  font-size: 9px;
}

.home-screen-v11 .home-cover-meta b {
  padding: 4px 8px 3px;
  border-radius: 8px 11px 7px 10px;
  background-color: var(--cute-leaf);
  color: #4c6441;
  transform: rotate(1deg);
}

.home-screen-v11 .home-cover-number {
  top: 51px;
  left: 5px;
  color: rgba(244,95,97,.16);
  font-size: 106px;
}

.home-screen-v11 .home-cover-side {
  top: 72px;
  right: 7px;
  color: rgba(83,50,70,.45);
  font-size: 7px;
}

.home-cover-charms i {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  color: var(--cute-coral);
  font-family: "Bap Story", sans-serif;
  font-size: 13px;
  font-style: normal;
}

.home-cover-charms i:nth-child(1) { top: 79px; right: 170px; transform: rotate(-8deg); }
.home-cover-charms i:nth-child(2) { top: 199px; right: 22px; color: var(--cute-yellow); font-size: 17px; }
.home-cover-charms i:nth-child(3) { top: 227px; right: 154px; color: var(--cute-mint); font-size: 7px; }

.home-screen-v11 .home-cover-copy {
  top: 65px;
  left: 20px;
  width: 56%;
}

.home-screen-v11 .home-cover-label {
  padding: 6px 10px 5px;
  border-radius: 9px 13px 8px 12px;
  background-color: #dff3eb;
  color: #3f8f84;
  box-shadow: 2px 3px 0 rgba(147,209,196,.48);
  font-size: 10px;
}

.home-screen-v11 .home-cover-copy h2 {
  margin-top: 14px;
  color: var(--cute-ink);
  font-size: 35px;
  line-height: .94;
}

.home-screen-v11 .home-cover-copy h2 strong {
  margin-top: 7px;
  color: var(--cute-ink);
}

.home-screen-v11 .home-cover-recipe {
  margin-top: 12px;
}

.home-screen-v11 .home-cover-recipe h3 {
  padding-bottom: 5px;
  color: #df4f5c;
  font-size: 22px;
}

.home-screen-v11 .home-cover-recipe > div {
  gap: 7px;
  margin-top: 8px;
  color: #735d66;
  font-size: 10px;
}

.home-screen-v11 .home-cover-art {
  top: 61px;
  right: 0;
  width: 155px;
  height: 177px;
}

.home-screen-v11 .home-cover-art span {
  inset: 9px 5px 5px 8px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from -4deg, rgba(147,209,196,.34) 0 8deg, transparent 8deg 18deg),
    rgba(255,255,255,.5);
  transform: rotate(3deg);
}

.home-screen-v11 .home-cover-art img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  filter: saturate(1.17) contrast(1.03) drop-shadow(3px 4px 0 rgba(83,50,70,.1));
  transform: rotate(3deg);
}

.home-screen-v11 .home-cover-art em {
  position: absolute;
  z-index: 4;
  top: -4px;
  right: -1px;
  min-width: 54px;
  padding: 7px 8px 6px;
  border-radius: 50% 50% 50% 8px;
  background: var(--cute-coral);
  color: #fff;
  box-shadow: 2px 3px 0 var(--cute-pink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 10px;
  font-style: normal;
  line-height: 1.05;
  text-align: center;
  transform: rotate(7deg);
}

.home-screen-v11 .home-cover-cta {
  left: 18px;
  right: 18px;
  bottom: 15px;
  min-height: 61px;
  padding: 0 12px 0 17px;
  border-radius: 17px 22px 16px 20px;
  background-color: var(--cute-coral);
  box-shadow: 4px 5px 0 #e6a4ad;
  transform: rotate(.08deg);
}

.home-screen-v11 .home-cover-cta > span:first-child {
  align-items: center;
}

.home-screen-v11 .home-cover-cta b {
  padding: 4px 7px 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  color: #fff8c9;
  font-size: 12px;
}

.home-screen-v11 .home-cover-cta small {
  max-width: 226px;
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-screen-v11 .home-cover-arrow {
  width: 37px;
  height: 37px;
  background-color: var(--cute-yellow);
  box-shadow: 2px 2px 0 rgba(83,50,70,.14);
}

.home-screen-v11 .home-glance {
  gap: 11px;
  margin: 15px 1px 0;
}

.home-screen-v11 .home-glance-score,
.home-screen-v11 .home-glance-goal {
  min-height: 92px;
  border-radius: 21px 27px 20px 25px;
}

.home-screen-v11 .home-glance-score {
  padding: 12px 14px 10px;
  background-color: #fff2c2;
  box-shadow: 4px 5px 0 rgba(248,218,97,.52);
  transform: rotate(-.35deg);
}

.home-screen-v11 .home-glance-goal {
  padding: 10px 9px 9px 13px;
  background-color: #dff2eb;
  box-shadow: 4px 5px 0 rgba(147,209,196,.45);
  transform: rotate(.35deg);
}

.home-screen-v11 .home-glance-score > span,
.home-screen-v11 .home-glance-goal span {
  font-size: 8px;
  letter-spacing: .08em;
}

.home-screen-v11 .home-glance-score > strong b {
  color: var(--cute-coral);
  font-size: 30px;
}

.home-screen-v11 .home-glance-score .progress-track {
  height: 7px;
  margin-top: 6px;
  border-radius: 999px;
}

.home-screen-v11 .home-glance-score .progress-track i {
  background: linear-gradient(90deg, var(--cute-coral), var(--cute-pink));
}

.home-screen-v11 .home-glance-goal > div:first-child > strong {
  color: var(--cute-ink);
  font-size: 18px;
}

.home-screen-v11 .home-glance-goal .home-cover-ring {
  width: 49px;
  height: 49px;
  background-color: #f3e7df;
  background-image: url("./assets/pencil-circle.svg"), conic-gradient(var(--cute-coral) calc(var(--progress) * 1%), #f3e7df 0);
  box-shadow: 2px 3px 0 var(--cute-yellow);
}

.home-screen-v11 .home-stage-quest {
  min-height: 232px;
  margin: 15px 1px 0;
  padding: 14px 12px 12px;
  overflow: visible;
  border-radius: 25px 32px 23px 30px;
  background-color: #dff2eb;
  background-image:
    radial-gradient(circle at 95% 11%, rgba(248,218,97,.58) 0 46px, transparent 47px),
    radial-gradient(circle at 4% 95%, rgba(246,185,199,.36) 0 40px, transparent 41px),
    url("./assets/pencil-frame-card.svg");
  background-size: auto, auto, 100% 100%;
  box-shadow: 6px 7px 0 rgba(184,218,130,.56);
}

.home-screen-v11 .home-stage-quest::after {
  top: -5px;
  left: 45px;
  width: 53px;
  height: 12px;
  background: var(--cute-pink);
  opacity: .72;
  transform: rotate(-4deg);
}

.home-screen-v11 .home-journey-head {
  min-height: 47px;
  align-items: flex-start;
  padding: 0 4px;
}

.home-screen-v11 .home-journey-head > div:first-child {
  position: relative;
  z-index: 3;
}

.home-screen-v11 .home-journey-head span {
  color: #ce5868;
  font-size: 8px;
}

.home-screen-v11 .home-journey-head h3 {
  margin-top: 1px;
  color: var(--cute-ink);
  font-size: 23px;
}

.home-screen-v11 .home-journey-head small {
  display: block;
  margin-top: 3px;
  color: #75686c;
  font-size: 9px;
}

.home-journey-mascot {
  position: absolute;
  z-index: 4;
  top: 5px;
  right: 12px;
  width: 58px;
  height: 53px;
  display: grid;
  place-items: center;
  border-radius: 48% 52% 44% 56%;
  background: rgba(255,255,255,.68) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  transform: rotate(3deg);
}

.home-journey-mascot .brand-symbol {
  width: 43px;
  height: 43px;
}

.home-journey-mascot em {
  position: absolute;
  top: -8px;
  right: 49px;
  width: 53px;
  padding: 5px 5px 4px;
  border-radius: 10px 10px 2px 10px;
  background: var(--cute-yellow);
  color: var(--cute-ink);
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  font-style: normal;
  text-align: center;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.home-stage-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.home-stage-card {
  position: relative;
  min-width: 0;
  min-height: 103px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 3px 6px;
  border: 0;
  border-radius: 17px 21px 16px 20px;
  background-color: #fff9e8;
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: var(--cute-ink);
  box-shadow: 2px 3px 0 rgba(83,50,70,.08);
  text-align: center;
  transform: rotate(-1deg);
}

.home-stage-card:nth-child(2) { background-color: #fbe7ec; transform: translateY(3px) rotate(1deg); }
.home-stage-card:nth-child(3) { background-color: #fff2bd; transform: rotate(-.6deg); }
.home-stage-card:nth-child(4) { background-color: #ebe6f3; transform: translateY(3px) rotate(.8deg); }
.home-stage-card:nth-child(5) { background-color: #edf4d9; transform: rotate(-.7deg); }

.home-stage-card.available {
  background-color: var(--cute-coral);
  color: #fff;
  box-shadow: 3px 4px 0 var(--cute-yellow);
  transform: translateY(-4px) rotate(-2deg);
}

.home-stage-card.cleared {
  background-color: #dff0c9;
  box-shadow: 3px 4px 0 rgba(184,218,130,.68);
}

.home-stage-card.locked {
  color: #74666b;
  cursor: not-allowed;
  opacity: .82;
}

.home-stage-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px;
}

.home-stage-top b {
  font-family: "Bap Story", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.home-stage-top i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.56);
  color: var(--cute-ink);
  font-style: normal;
}

.home-stage-food {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255,255,255,.66) url("./assets/pencil-circle.svg") center / 100% 100% no-repeat;
  overflow: hidden;
}

.home-stage-food img {
  width: 39px;
  height: 39px;
  object-fit: contain;
  filter: saturate(1.12) contrast(1.02) drop-shadow(1px 2px 0 rgba(83,50,70,.08));
}

.home-stage-card:nth-child(2) .home-stage-food img { transform: rotate(2deg); }
.home-stage-card:nth-child(3) .home-stage-food img { transform: rotate(-2deg); }
.home-stage-card:nth-child(4) .home-stage-food img { transform: rotate(1.5deg); }
.home-stage-card:nth-child(5) .home-stage-food img { transform: rotate(-1deg); }

.home-stage-card strong {
  width: 100%;
  display: -webkit-box;
  min-height: 21px;
  margin-top: 3px;
  overflow: hidden;
  color: inherit;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-stage-card small {
  margin-top: auto;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  color: #7c6068;
  font-size: 7px;
  font-weight: 800;
}

.home-stage-card.available small {
  background: var(--cute-yellow);
  color: var(--cute-ink);
}

.home-stage-all {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 9px;
  border: 0;
  border-radius: 13px 18px 12px 17px;
  background-color: var(--cute-yellow);
  background-image: url("./assets/pencil-frame-row.svg");
  background-size: 100% 100%;
  color: var(--cute-ink);
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 13px;
  box-shadow: 2px 3px 0 rgba(83,50,70,.08);
}

.home-screen-v11 .home-pockets {
  margin-top: 25px;
}

.home-screen-v11 .home-pockets-head {
  margin-bottom: 13px;
}

.home-screen-v11 .home-pocket {
  min-height: 169px;
  border-radius: 23px 29px 21px 27px;
  background-color: #fff0b3;
  box-shadow: 4px 5px 0 rgba(248,218,97,.38);
}

.home-screen-v11 .home-pocket-title {
  background-color: #dff1eb;
  box-shadow: 4px 5px 0 rgba(147,209,196,.42);
}

.home-screen-v11 .home-pocket-index {
  color: rgba(83,50,70,.11);
  font-size: 48px;
}

@media (max-width: 390px) {
  .home-screen-v11 .home-cover-cute {
    min-height: 305px;
    margin-inline: 0;
  }

  .home-screen-v11 .home-cover-copy {
    top: 61px;
    left: 17px;
    width: 56%;
  }

  .home-screen-v11 .home-cover-copy h2 {
    font-size: 31px;
  }

  .home-screen-v11 .home-cover-art {
    right: -3px;
    width: 145px;
  }

  .home-screen-v11 .home-cover-art img {
    width: 141px;
  }

  .home-screen-v11 .home-cover-art em {
    right: 4px;
  }

  .home-screen-v11 .home-cover-cta {
    left: 14px;
    right: 14px;
    bottom: 15px;
  }

  .home-screen-v11 .home-cover-cta small {
    max-width: 196px;
    font-size: 14px;
  }

  .home-screen-v11 .home-glance {
    gap: 8px;
    margin-inline: 0;
  }

  .home-screen-v11 .home-stage-quest {
    margin-top: 12px;
    margin-inline: 0;
    padding-inline: 10px;
  }

  .home-stage-grid {
    gap: 4px;
  }

  .home-stage-card {
    min-height: 100px;
    padding-inline: 3px;
  }

  .home-stage-food {
    width: 37px;
    height: 37px;
  }

  .home-stage-food img {
    width: 36px;
    height: 36px;
  }

  .home-stage-card strong {
    font-size: 8px;
  }

  .home-journey-mascot {
    right: 9px;
  }
}

/* A compact cookbook mark keeps the brand legible without competing with the title. */
.top .mark {
  width: 48px;
  height: 48px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.top .header-brand-symbol {
  width: 48px;
  height: 48px;
  overflow: visible;
  filter: drop-shadow(1px 2px 0 rgba(64, 54, 56, .12));
}

.header-logo-book {
  fill: #fffaf0;
  stroke: #4f4646;
  stroke-width: 1.7;
  stroke-linejoin: round;
}

.header-logo-spine {
  fill: none;
  stroke: #9ec5ba;
  stroke-width: 3.2;
  stroke-linecap: round;
}

.header-logo-page-line {
  fill: none;
  stroke: rgba(79, 70, 70, .3);
  stroke-width: 1.15;
  stroke-linecap: round;
}

.header-logo-steam,
.header-logo-rim {
  fill: none;
  stroke: #4f4646;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-logo-steam { stroke-width: 1.35; }
.header-logo-rim { stroke-width: 1.25; }
.header-logo-rice { fill: #f3d681; stroke: #4f4646; stroke-width: 1.2; stroke-linejoin: round; }
.header-logo-bowl { fill: #b8d7cf; stroke: #4f4646; stroke-width: 1.45; stroke-linejoin: round; }
.header-logo-bookmark { fill: #d87972; stroke: #4f4646; stroke-width: 1.05; stroke-linejoin: round; }

/* Keep the profile counts and their labels clear of the divider. */
.profile-hero .profile-stats {
  position: relative;
  z-index: 1;
  margin-top: 20px;
  padding: 13px 0 16px;
  border: 0;
  background: none;
}

.profile-hero .profile-stats::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 4px;
  left: 5px;
  border-top: 1px solid rgba(64, 54, 56, .48);
}

.profile-hero .profile-stat {
  position: relative;
  z-index: 1;
  padding-bottom: 1px;
}

.profile-hero .profile-stat + .profile-stat {
  border-left: 1px solid rgba(64, 54, 56, .16);
}

.profile-hero .profile-stat span {
  margin-top: 5px;
  color: #6d756f;
  line-height: 1.2;
}

/* Account flow */
.auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 22px;
  background-color: #f4efe2;
  background-image: radial-gradient(circle at 11px 11px, rgba(79, 70, 70, .06) 0 1px, transparent 1.2px);
  background-size: 22px 22px;
}

.auth-note {
  width: min(100%, 410px);
  min-height: min(680px, calc(100dvh - 44px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 34px 28px;
  border: 2px solid rgba(64, 54, 56, .7);
  border-radius: 6px;
  background: #fffaf0;
  box-shadow: 0 5px 16px rgba(64, 54, 56, .1);
}

.auth-brand {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 29px;
  border: 1px solid rgba(64, 54, 56, .36);
  border-radius: 6px;
  background: #dce9e4;
}

.auth-brand .header-brand-symbol { width: 58px; height: 58px; }
.auth-copy > span,
.account-sheet-head > div > span { color: #6d887e; font-family: "Bap Story", sans-serif; font-size: 9px; letter-spacing: .08em; }
.auth-copy h1 { margin-top: 9px; color: #4f4646; font-family: "Bap Story", "Bap Gowun", sans-serif; font-size: 35px; font-weight: 400; line-height: 1.08; }
.auth-copy p { max-width: 280px; margin-top: 14px; color: #746c68; font-size: 13px; line-height: 1.55; }
.auth-login .auth-copy p { max-width: none; font-size: 12px; }

/* Extend the in-app notebook stock through iOS safe areas behind the web view. */
html,
body,
#app {
  background-color: #f9f4e9;
  background-image:
    radial-gradient(circle at 8px 10px, rgba(96, 76, 55, .065) 0 .55px, transparent .75px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(133, 112, 89, .055) 31px 32px),
    linear-gradient(90deg, transparent 0 15px, rgba(229, 166, 156, .12) 15px 16px, transparent 16px),
    linear-gradient(180deg, #fffdf6 0%, #f8efe1 100%);
  background-position: 0 0, 0 4px, 0 0, 0 0;
  background-size: 21px 23px, auto, auto, auto;
}

@media (max-width: 560px) {
  .phone {
    grid-template-rows:
      calc(84px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(64px + env(safe-area-inset-bottom));
  }

  .top {
    padding-top: calc(10px + env(safe-area-inset-top));
  }

  .tabs {
    padding-top: 4px;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .tabs button {
    min-height: 56px;
  }
}

.auth-primary {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 34px;
  padding: 0 16px;
  border: 1px solid rgba(64, 54, 56, .68);
  border-radius: 5px;
  background: #d87972;
  color: #fffaf0;
  font-family: "Bap Story", "Bap Gowun", sans-serif;
  font-size: 17px;
}

.auth-primary svg { flex: 0 0 auto; }
.auth-footnote { margin-top: 13px; color: #827a74; font-size: 10px; line-height: 1.45; text-align: center; }
.login-form { display: grid; gap: 13px; margin-top: 29px; }
.login-form label { display: grid; gap: 7px; color: #5d5654; font-size: 11px; font-weight: 700; }
.login-form input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid rgba(64, 54, 56, .3); border-radius: 4px; background: #fffdf7; color: #4f4646; font: inherit; font-size: 16px; }
.login-error { margin: -3px 0 0; color: #b55355; font-size: 11px; line-height: 1.4; }
.login-notice { margin: -3px 0 0; color: #4f796b; font-size: 11px; line-height: 1.4; }
.login-form .auth-primary { margin-top: 8px; }
.auth-text-button { align-self: center; margin-top: 19px; border: 0; background: transparent; color: #6e8279; font: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.social-login { display: grid; gap: 9px; margin-top: 17px; color: #847b75; font-size: 10px; text-align: center; }
.social-login > div { display: flex; justify-content: center; gap: 11px; }
.social-login .social-icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0; background: transparent; }
.social-login .social-icon-button img { display: block; width: 32px; height: 32px; object-fit: contain; }
.social-login .google-icon-button { border: 0; border-radius: 50%; background: #fff; }
.social-login .google-icon-button svg { display: block; width: 19px; height: 19px; }
.auth-switch { display: flex; align-items: center; justify-content: center; gap: 15px; }
.auth-switch .auth-text-button { margin-top: 17px; }

/* Home cards and navigation share the profile page's softer pencil outline. */
.home-screen-v11 .home-cover-cute {
  border: 0 !important;
  background-color: #f5edda !important;
  background-image: url("./assets/pencil-frame-card.svg"), url("./assets/home-kitchen-doodle.svg") !important;
  background-position: center, center;
  background-size: 100% 100%, 220px 180px;
  background-repeat: no-repeat, repeat;
}

.home-screen-v11 .home-cover-cute::before {
  display: none !important;
}

.home-screen-v11 .home-cover-cta {
  border: 0 !important;
  background-color: #d86d70;
  background-image: url("./assets/pencil-frame-row.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-screen-v11 .home-glance-score,
.home-screen-v11 .home-glance-goal {
  border: 0 !important;
  background-image: url("./assets/pencil-frame-row.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-screen-v11 .home-stage-quest,
.home-screen-v11 .home-pocket {
  border: 0 !important;
  background-image: url("./assets/pencil-frame-card.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-screen-v11 .home-journey-head {
  border-bottom: 0 !important;
  background: url("./assets/pencil-line.svg") center bottom / 100% 7px no-repeat;
}

.tabs {
  border-top: 0 !important;
  box-shadow: 0 -3px 8px rgba(81, 56, 74, .06) !important;
}

.tabs::before {
  top: -6px !important;
  height: 13px !important;
  background: url("./assets/pencil-line.svg") center / 100% 100% no-repeat !important;
  opacity: .86;
}

.tabs button.active::before {
  border: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/pencil-circle.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.profile-hero .profile-main { grid-template-columns: 64px minmax(0, 1fr) 32px; }
.profile-edit-button { width: 32px; height: 32px; display: grid; place-items: center; align-self: start; border: 1px solid rgba(64, 54, 56, .32); border-radius: 4px; background: #fffaf0; color: #596d65; }
.profile-account-section .profile-section-card { padding-bottom: 16px !important; }
.profile-setting-list { margin: 0 -3px; border-top: 1px solid rgba(64, 54, 56, .18); }
.profile-setting-row { width: 100%; min-height: 46px; display: grid; grid-template-columns: 27px minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 0 4px; border: 0; border-bottom: 1px solid rgba(64, 54, 56, .13); background: transparent; color: #534b4b; font: inherit; font-size: 12px; text-align: left; text-decoration: none; }
.profile-setting-row > svg { color: #84928b; }
.setting-row-icon { width: 25px; height: 25px; display: grid; place-items: center; border: 1px solid rgba(64, 54, 56, .2); border-radius: 4px; background: #edf3ec; color: #668277; }
.profile-setting-danger { color: #b75e5c; }
.profile-setting-danger .setting-row-icon { background: #f7e7e2; color: #b75e5c; }
.profile-account-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 3px 0; color: #857c76; font-size: 10px; }
.profile-account-foot button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: #5b7169; font: inherit; font-size: 11px; }

.account-sheet { width: min(100%, 430px); max-height: calc(100dvh - 28px); padding: 22px; overflow: auto; border: 1px solid rgba(64, 54, 56, .66); border-radius: 6px; background: #fffaf0; }
.account-sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(64, 54, 56, .2); }
.account-sheet-head h2 { margin-top: 4px; color: #4f4646; font-family: "Bap Story", "Bap Gowun", sans-serif; font-size: 25px; font-weight: 400; }
.account-sheet-head .icon { width: 31px; height: 31px; min-height: 0; border: 1px solid rgba(64, 54, 56, .4); border-radius: 4px; background: #fffdf7; box-shadow: none; color: #5b5352; font-size: 18px; }
.account-sheet-intro { margin: 17px 0; color: #716a66; font-size: 12px; line-height: 1.5; }
.avatar-picker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.avatar-choice { position: relative; aspect-ratio: 1; overflow: hidden; padding: 4px; border: 1px solid rgba(64, 54, 56, .2); border-radius: 5px; background: #f4f0e6; }
.avatar-choice.selected { border: 2px solid #6e9688; background: #e0ece5; }
.avatar-choice img { width: 100%; height: 100%; object-fit: contain; }
.avatar-choice span { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #6e9688; color: #fff; }
.legal-sheet-body { display: grid; gap: 19px; padding-top: 20px; }
.legal-sheet-body h3 { color: #5a514f; font-family: "Bap Story", "Bap Gowun", sans-serif; font-size: 17px; font-weight: 400; }
.legal-sheet-body p { margin-top: 7px; color: #716a66; font-size: 12px; line-height: 1.6; }
.legal-sheet-body ul { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 17px; color: #716a66; font-size: 12px; line-height: 1.55; }
.legal-sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 23px; padding-top: 12px; border-top: 1px solid rgba(64, 54, 56, .16); }
.legal-sheet-foot a { color: #567b70; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; }
.legal-sheet-foot p { color: #8b817a; font-size: 10px; }
.legal-app-screen { min-height: 100%; padding: 19px 20px 34px; background: #fffaf0; }
.legal-app-head { display: grid; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(64, 54, 56, .22); }
.legal-app-head > div > span { color: #6d887e; font-family: "Bap Story", sans-serif; font-size: 9px; letter-spacing: .08em; }
.legal-app-head h2 { margin-top: 4px; color: #4f4646; font-family: "Bap Story", "Bap Gowun", sans-serif; font-size: 27px; font-weight: 400; }
.legal-back-button { width: fit-content; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: #58756b; font: inherit; font-size: 12px; }
.legal-back-button span { display: grid; place-items: center; transform: rotate(180deg); }
.legal-app-body { display: grid; gap: 22px; padding-top: 21px; }
.legal-app-body h3 { color: #5a514f; font-family: "Bap Story", "Bap Gowun", sans-serif; font-size: 17px; font-weight: 400; }
.legal-app-body p { margin-top: 7px; color: #716a66; font-size: 12px; line-height: 1.65; }
.legal-app-body ul { display: grid; gap: 5px; margin: 9px 0 0; padding-left: 17px; color: #716a66; font-size: 12px; line-height: 1.55; }
.legal-app-foot { margin-top: 26px; padding-top: 13px; border-top: 1px solid rgba(64, 54, 56, .16); color: #8b817a; font-size: 10px; }

@media (max-width: 390px) {
  .auth-shell { padding: 14px; }
  .auth-note { min-height: calc(100dvh - 28px); padding: 29px 23px; }
  .auth-copy h1 { font-size: 32px; }
  .avatar-picker-grid { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-screen-v11 *,
  .home-screen-v11 *::before,
  .home-screen-v11 *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Final cleanup for the home and profile details shown above the fold. */
.home-screen-v11 .home-cover-cta {
  box-shadow: none !important;
}

.profile-hero .profile-stats,
.profile-hero .profile-stat + .profile-stat {
  background-image: none !important;
}

.profile-hero .profile-stats::after {
  display: none;
}

.tabs::before {
  top: -8px !important;
  height: 18px !important;
  background-image: url("./assets/nav-hand-line.svg") !important;
  opacity: 1;
}

.tabs button.active::before {
  width: 52px;
  height: 45px;
  background-color: #fff6cf !important;
  background-image: url("./assets/pencil-frame-row.svg") !important;
}

.tabs button.active .tab-art-wrap {
  background: transparent !important;
}

.tabs button:first-child.active .tab-art {
  width: 36px;
  height: 39px;
  filter: saturate(1.05) contrast(1.23) drop-shadow(1px 2px 0 rgba(64, 54, 56, .18));
}

/* Home meal preview: one calm paper surface and complete, consistent stage frames. */
.home-screen-v11 .home-stage-quest {
  min-height: 232px;
  padding: 14px 12px 12px;
  overflow: hidden;
  border: 1.5px solid rgba(64, 54, 56, .64);
  border-radius: 6px;
  background-color: #edf1e8;
  background-image: none;
  box-shadow: 0 3px 8px rgba(64, 54, 56, .08);
}

.home-screen-v11 .home-stage-quest::after {
  display: none;
}

.home-screen-v11 .home-journey-head {
  min-height: 49px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(64, 54, 56, .2);
}

.home-screen-v11 .home-journey-head span {
  color: #6b897f;
}

.home-screen-v11 .home-journey-head h3 {
  color: #4f4646;
  font-size: 21px;
}

.home-screen-v11 .home-journey-head small {
  color: #756f69;
}

.home-journey-mascot {
  display: none;
}

.home-journey-guide {
  position: absolute;
  z-index: 4;
  top: 6px;
  right: 5px;
  width: 49px;
  height: 49px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 54, 56, .44);
  border-radius: 50%;
  background: #fffaf0;
}

.journey-guide-symbol {
  width: 46px;
  height: 46px;
}

.journey-guide-hat { fill: #b9d5c9; stroke: #53484a; stroke-width: 1.45; stroke-linejoin: round; }
.journey-guide-face { fill: #f6d6ae; stroke: #53484a; stroke-width: 1.45; stroke-linejoin: round; }
.journey-guide-hair { fill: #5d4c4c; }
.journey-guide-eye { fill: #53484a; }
.journey-guide-smile,
.journey-guide-apron-line { fill: none; stroke: #53484a; stroke-width: 1.35; stroke-linecap: round; }
.journey-guide-apron { fill: #d9c2a8; stroke: #53484a; stroke-width: 1.45; stroke-linejoin: round; }

.home-journey-guide em {
  position: absolute;
  top: -3px;
  right: 42px;
  width: auto;
  padding: 4px 6px;
  border: 1px solid rgba(64, 54, 56, .38);
  border-radius: 4px;
  background: #fffaf0;
  color: #625758;
  font-family: "Bap Story", sans-serif;
  font-size: 8px;
  font-style: normal;
  line-height: 1;
  white-space: nowrap;
}

.home-stage-grid {
  gap: 5px;
  margin-top: 9px;
}

.home-stage-card,
.home-stage-card:nth-child(2),
.home-stage-card:nth-child(3),
.home-stage-card:nth-child(4),
.home-stage-card:nth-child(5) {
  min-height: 104px;
  padding: 6px 3px;
  border: 1px solid rgba(64, 54, 56, .46);
  border-radius: 4px;
  background-color: #fffaf0;
  background-image: none;
  box-shadow: none;
  color: #5a4f50;
  transform: none;
}

.home-stage-card.available {
  border-color: #8aa99b;
  background-color: #dfebdb;
  color: #45594f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72);
  transform: none;
}

.home-stage-card.cleared {
  border-color: #a7bd9b;
  background-color: #edf4e8;
  box-shadow: none;
}

.home-stage-card.locked {
  background-color: #f8f6f0;
  opacity: .74;
}

.home-stage-top {
  padding: 0 3px;
}

.home-stage-top b {
  color: #6d8279;
  font-size: 11px;
}

.home-stage-top i {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(64, 54, 56, .28);
  background: #fffaf0;
  color: #6c7f74;
}

.home-stage-food {
  width: 38px;
  height: 38px;
  margin-top: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

.home-stage-food img,
.home-stage-card:nth-child(2) .home-stage-food img,
.home-stage-card:nth-child(3) .home-stage-food img,
.home-stage-card:nth-child(4) .home-stage-food img,
.home-stage-card:nth-child(5) .home-stage-food img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: saturate(.94) contrast(.99);
  transform: none;
}

.home-stage-card strong {
  min-height: 20px;
  margin-top: 3px;
  color: inherit;
}

.home-stage-card small,
.home-stage-card.available small {
  padding: 1px 5px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #718177;
}

.home-stage-all {
  min-height: 34px;
  margin-top: 9px;
  border: 1px solid rgba(64, 54, 56, .5);
  border-radius: 4px;
  background-color: #f2e7ba;
  background-image: none;
  box-shadow: none;
  color: #554d4d;
}

/* Keep the two drawer illustrations legible against their quiet paper cards. */
.home-screen-v11 .home-pocket {
  border: 1px solid rgba(64, 54, 56, .4);
  border-radius: 6px;
  background-image: none;
  box-shadow: 0 3px 8px rgba(64, 54, 56, .08);
  transform: none;
}

.home-screen-v11 .home-pocket-sticker {
  background-color: #f3edd8;
}

.home-screen-v11 .home-pocket-title {
  background-color: #e4eee7;
}

.home-screen-v11 .home-pocket-art-frame {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 11px;
  display: grid;
  place-items: center;
  width: 80px;
  height: 92px;
  overflow: hidden;
  border: 1px solid rgba(64, 54, 56, .3);
  border-radius: 50%;
  background: #fffaf0;
  box-shadow: 1px 2px 0 rgba(64, 54, 56, .1);
}

.home-screen-v11 .home-pocket-home-frame {
  right: 5px;
  bottom: 8px;
  width: 84px;
  height: 100px;
}

.home-screen-v11 .home-pocket-cup-frame {
  right: 5px;
  bottom: 13px;
  width: 66px;
  height: 76px;
}

.home-screen-v11 .home-pocket .quick-reference-art {
  position: static;
  display: block;
  width: 76px;
  height: 88px;
  max-width: none;
  max-height: none;
  opacity: 1;
  mix-blend-mode: normal;
  object-fit: contain;
  filter: saturate(.96) contrast(1.04) drop-shadow(1px 2px 0 rgba(64, 54, 56, .12));
}

.home-screen-v11 .home-pocket-home-frame .quick-reference-art {
  width: 80px;
  height: 96px;
}

.home-screen-v11 .home-pocket-cup-frame .quick-reference-art {
  width: 62px;
  height: 72px;
}

.home-screen-v11 .home-pocket h3,
.home-screen-v11 .home-pocket p {
  width: 64%;
}

.home-screen-v11 .home-pocket-title h3,
.home-screen-v11 .home-pocket-title p {
  width: 58%;
}

/* A quiet tab state keeps the illustrated home and ranking marks readable. */
.tabs {
  box-shadow: 0 -2px 0 rgba(64, 54, 56, .08);
}

.tabs button.active::before {
  display: none;
}

.tabs .tab-art-wrap,
.tabs button:nth-child(n) .tab-art-wrap,
.tabs button.active .tab-art-wrap {
  width: 42px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(64, 54, 56, .22);
  border-radius: 5px;
  background: #fffaf0;
  box-shadow: none;
  transform: none;
}

.tabs button.active .tab-art-wrap {
  border-color: rgba(64, 54, 56, .52);
  background: #dce9e4;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
  transform: translateY(-1px);
}

.tabs button:nth-child(1).active .tab-art-wrap {
  background: #c9ddd7;
}

.tabs button:nth-child(4).active .tab-art-wrap {
  background: #dce7d6;
}

.tabs .tab-art {
  width: 36px;
  height: 34px;
  opacity: 1;
  filter: saturate(.98) contrast(1.08) drop-shadow(1px 1px 0 rgba(64, 54, 56, .18));
}

.tabs button:nth-child(1) .tab-art {
  width: 31px;
  height: 36px;
}

.tabs button:nth-child(4) .tab-art {
  width: 38px;
  height: 33px;
}

/* The home-meal header uses a real inner-safe frame so its title and progress stay contained. */
.home-meal-screen .home-meal-hero {
  box-sizing: border-box;
  min-height: 214px;
  padding: 29px 20px 18px;
  overflow: hidden;
  border: 2px solid rgba(64, 54, 56, .66);
  border-radius: 6px;
  background-color: #f0e6bb !important;
  background-image: none !important;
  box-shadow: 0 3px 8px rgba(64, 54, 56, .1) !important;
}

.home-meal-screen .map-hero-top > div:first-child {
  max-width: 202px;
}

.home-meal-screen .screen-kicker {
  color: #6f7567;
  font-size: 8px;
}

.home-meal-screen .map-reference-art {
  top: 35px;
  right: 23px;
  width: 100px;
  height: 84px;
}

.home-meal-screen .map-stat {
  top: 105px;
  right: 20px;
}

.home-meal-screen .home-meal-summary {
  right: 20px;
  bottom: 21px;
  left: 20px;
  box-sizing: border-box;
  height: 48px;
  border: 1px solid rgba(64, 54, 56, .42);
  border-radius: 4px;
  background: #fffaf0;
  box-shadow: none;
}

.home-meal-screen .map-progress {
  right: 95px;
  bottom: 15px;
}

@media (max-width: 390px) {
  .home-meal-screen .home-meal-hero {
    min-height: 214px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .home-meal-screen .home-meal-summary {
    right: 17px;
    left: 17px;
  }
}

/* Compact navigation: only the current destination receives a hand-drawn marker. */
.tabs {
  gap: 6px;
  padding: 8px 12px calc(9px + env(safe-area-inset-bottom));
  background: #fffaf1;
  box-shadow: 0 -2px 7px rgba(81, 56, 74, .05) !important;
}

.tabs::before {
  top: -7px !important;
  height: 15px !important;
  background: url("./assets/nav-hand-line.svg") center / 100% 100% no-repeat !important;
}

.tabs button {
  min-height: 56px;
  color: #746b6d;
}

.tabs .tab-art-wrap,
.tabs button:nth-child(n) .tab-art-wrap,
.tabs button.active .tab-art-wrap,
.tabs button:nth-child(1).active .tab-art-wrap {
  width: 39px;
  height: 37px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}

.tabs button.active::before {
  top: 2px;
  width: 44px;
  height: 44px;
  background-color: #f6e7a2 !important;
  background-image: url("./assets/pencil-circle.svg") !important;
}

.tabs button.active .tab-art-wrap {
  transform: translateY(-1px) !important;
}

.tabs .tab-art,
.tabs button:nth-child(1) .tab-art,
.tabs button:nth-child(4) .tab-art {
  width: 33px;
  height: 33px;
  filter: saturate(1.02) contrast(1.12) drop-shadow(1px 1px 0 rgba(64, 54, 56, .14));
}

.tabs button:first-child.active .tab-art {
  width: 35px;
  height: 37px;
  filter: saturate(1.08) contrast(1.25) drop-shadow(1px 2px 0 rgba(64, 54, 56, .18));
}

/* Vivid scrapbook palette: candy-bright accents over soft, muted paper stock. */
:root {
  --bap-ink: #493145;
  --bap-muted: #806d76;
  --bap-line: rgba(73, 49, 69, .34);
  --bap-cream: #fff7df;
  --bap-cream-deep: #ffeec2;
  --bap-pink-paper: #ffe4ee;
  --bap-mint-paper: #ddf8ef;
  --bap-blue-paper: #def4ff;
  --bap-lilac-paper: #eee5ff;
  --bap-leaf-paper: #e8f6d2;
  --bap-raspberry: #f04f7a;
  --bap-raspberry-deep: #d83f67;
  --bap-berry: #d84fa3;
  --bap-tangerine: #ff9d4d;
  --bap-lemon: #ffe45f;
  --bap-mint: #74e6c8;
  --bap-teal: #22a99b;
  --bap-sage: #b9d9bd;
  --bap-lilac: #b7a6ff;
}

.home-screen-v11,
.home-meal-screen {
  --cute-ink: var(--bap-ink);
  --cute-coral: var(--bap-raspberry);
  --cute-pink: #ffbdd4;
  --cute-yellow: var(--bap-lemon);
  --cute-mint: var(--bap-mint);
  --cute-leaf: var(--bap-sage);
  --cute-cream: var(--bap-cream);
  --stage-coral: var(--bap-raspberry);
  --stage-berry: var(--bap-berry);
  --stage-lemon: var(--bap-lemon);
  --stage-mint: var(--bap-mint);
  --stage-leaf: var(--bap-sage);
  --stage-lilac: var(--bap-lilac);
  --stage-ink: var(--bap-ink);
}

html,
body,
#app {
  background-color: #fff1bd;
  background-image:
    radial-gradient(circle at 9px 9px, rgba(240, 79, 122, .16) 0 1px, transparent 1.25px),
    radial-gradient(circle at 21px 19px, rgba(34, 169, 155, .13) 0 .9px, transparent 1.15px),
    linear-gradient(135deg, #fff1bd 0%, #e6fbef 48%, #ffe7f1 100%);
  background-size: 30px 30px, 30px 30px, auto;
}

.page::before {
  background:
    radial-gradient(circle at 9px 9px, rgba(73, 49, 69, .055) 0 .8px, transparent 1px),
    linear-gradient(135deg, #fff1bd 0%, #e8fbef 45%, #ffe5f0 100%);
  background-size: 24px 24px, auto;
}

.phone,
.modal {
  filter: saturate(1.1) contrast(1.01);
}

.phone {
  border-color: rgba(255, 255, 255, .72);
  background: var(--bap-cream);
  box-shadow: 0 32px 80px rgba(73, 49, 69, .24), inset 0 0 0 1px rgba(255, 255, 255, .78);
}

.top,
.tabs {
  background: #fff7df;
}

.top {
  border-bottom-color: rgba(240, 79, 122, .14);
}

.brand h1,
.screen h2,
.section-title h3,
.home-stage-card strong,
.feed-heading h2,
.profile-section-card h3 {
  color: var(--bap-ink);
}

.brand-copy span,
.screen-kicker,
.label,
.eyebrow,
.home-cover-meta,
.home-meal-lead,
.map-hero-lead,
.feed-heading p,
.profile-section-card p {
  color: var(--bap-muted);
}

.top .mark {
  border-color: rgba(73, 49, 69, .74);
  background: var(--bap-mint);
  box-shadow: 2px 3px 0 rgba(240, 79, 122, .18);
}

.header-logo-book,
.header-logo-rice {
  fill: #fff8df;
  stroke: var(--bap-ink);
}

.header-logo-bowl {
  fill: var(--bap-lemon);
  stroke: var(--bap-ink);
}

.header-logo-bookmark {
  fill: var(--bap-raspberry);
  stroke: var(--bap-ink);
}

.header-logo-leaf {
  fill: var(--bap-mint);
}

.header-logo-spine,
.header-logo-stem {
  stroke: var(--bap-teal);
}

.header-logo-smile {
  stroke: var(--bap-raspberry-deep);
}

.content,
.sheet,
.legal-app-screen,
.feed-filter,
.feed-friends,
.feed-list {
  background-color: var(--bap-cream);
  background-image:
    radial-gradient(circle at 8px 10px, rgba(240, 79, 122, .08) 0 .55px, transparent .75px),
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(34, 169, 155, .055) 31px 32px),
    linear-gradient(180deg, #fffdf6 0%, #fff1dc 100%);
}

.home-cover,
.home-screen-v11 .home-cover-cute {
  border-color: rgba(73, 49, 69, .72) !important;
  background-color: var(--bap-cream-deep) !important;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    url("./assets/home-kitchen-doodle.svg"),
    linear-gradient(108deg, #fff0b8 0 44%, #ffe5ef 44% 68%, #dcf8ee 68%) !important;
  background-position: center, center, center;
  background-size: 100% 100%, 220px 180px, 100% 100%;
  background-repeat: no-repeat, repeat, no-repeat;
  box-shadow: 0 4px 12px rgba(73, 49, 69, .11) !important;
}

.home-cover::before {
  border-color: rgba(73, 49, 69, .44) !important;
}

.home-screen-v11 .home-cover-label {
  background-color: var(--bap-mint-paper);
  color: #128c81;
  box-shadow: 2px 3px 0 rgba(116, 230, 200, .42);
}

.home-screen-v11 .home-cover-recipe h3,
.home-screen-v11 .home-journey-head span,
.feed-section-top span,
.proof-capture > div > span {
  color: var(--bap-raspberry-deep);
}

.home-screen-v11 .home-cover-cta,
.home-cover-cta,
.auth-primary {
  border-color: rgba(73, 49, 69, .66);
  background-color: var(--bap-raspberry) !important;
  color: #fffdf8;
  box-shadow: 3px 4px 0 rgba(255, 228, 95, .66) !important;
}

.home-cover-cta b,
.home-screen-v11 .home-cover-cta b {
  background: rgba(255, 255, 255, .24);
  color: #fff8c9;
}

.home-screen-v11 .home-cover-arrow,
.home-stage-all,
.proof-photo-button,
.friend-card button,
.header-profile-button > span {
  background-color: var(--bap-lemon);
  color: var(--bap-ink);
}

.home-screen-v11 .home-glance-score {
  border-color: rgba(240, 79, 122, .42) !important;
  background-color: #fff0b8;
  box-shadow: 3px 4px 0 rgba(255, 228, 95, .58) !important;
}

.home-screen-v11 .home-glance-goal,
.home-screen-v11 .home-stage-quest,
.home-screen-v11 .home-pocket-title,
.feed-heading-icon,
.feed-empty > span,
.setting-row-icon {
  background-color: var(--bap-mint-paper);
  color: #247f77;
}

.home-screen-v11 .home-glance-score .progress-track i,
.home-meal-screen .map-progress span,
.map-hero .map-progress span {
  background: linear-gradient(90deg, var(--bap-raspberry), var(--bap-tangerine), var(--bap-lemon), var(--bap-mint));
}

.home-screen-v11 .home-glance-score > strong b,
.home-meal-summary b,
.map-hero-summary b {
  color: var(--bap-raspberry);
}

.home-screen-v11 .home-stage-quest {
  background-image:
    url("./assets/pencil-frame-card.svg"),
    radial-gradient(circle at 10px 10px, rgba(216, 79, 163, .11) 0 1px, transparent 1.2px),
    linear-gradient(135deg, #ddf8ef, #fff7df) !important;
  background-size: 100% 100%, 22px 22px, 100% 100%;
  box-shadow: 4px 5px 0 rgba(116, 230, 200, .36) !important;
}

.home-stage-card {
  background-color: #fff8ea;
  color: var(--bap-ink);
}

.home-stage-card:nth-child(2) { background-color: var(--bap-pink-paper); }
.home-stage-card:nth-child(3) { background-color: #fff1b8; }
.home-stage-card:nth-child(4) { background-color: var(--bap-lilac-paper); }
.home-stage-card:nth-child(5) { background-color: var(--bap-blue-paper); }

.home-stage-card.available {
  background-color: var(--bap-raspberry);
  color: #fffdf8;
  box-shadow: 3px 4px 0 rgba(255, 228, 95, .72);
}

.home-stage-card.cleared {
  background-color: #d9f5dc;
  box-shadow: 3px 4px 0 rgba(185, 217, 189, .72);
}

.home-stage-card.locked {
  color: #8a7a81;
  opacity: .8;
}

.home-stage-card small {
  color: #7a5868;
}

.home-stage-card.available small {
  background: var(--bap-lemon);
  color: var(--bap-ink);
}

.home-stage-food img,
.node-stage-art,
.map-route.dessert .node-stage-art,
.tabs .tab-art,
.tabs button:nth-child(2) .tab-art {
  filter: saturate(1.18) contrast(1.06) drop-shadow(1px 2px 0 rgba(73, 49, 69, .1)) !important;
}

.home-pocket,
.home-screen-v11 .home-pocket {
  background-color: #fff0b8;
  box-shadow: 3px 4px 0 rgba(255, 228, 95, .42) !important;
}

.tabs {
  box-shadow: 0 -3px 10px rgba(216, 63, 103, .08) !important;
}

.tabs button {
  color: #84717a;
}

.tabs button.active::before {
  background-color: var(--bap-lemon) !important;
}

.tabs button.active > span:last-child {
  color: var(--bap-ink);
}

.map-hero,
.map-hero.dessert,
.home-meal-screen .home-meal-hero,
.home-meal-hero {
  --map-paper: #fff0b8;
  --map-soft: var(--bap-mint-paper);
  --map-accent: var(--bap-teal);
  --map-progress: var(--bap-raspberry);
  background-color: var(--map-paper) !important;
  background-image:
    url("./assets/pencil-frame-card.svg"),
    linear-gradient(112deg, rgba(255, 255, 255, .2) 0 40%, rgba(255, 228, 95, .3) 40% 62%, rgba(255, 228, 95, 0) 62%) !important;
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  box-shadow: 0 4px 12px rgba(73, 49, 69, .1) !important;
}

.map-hero.dessert {
  --map-paper: var(--bap-pink-paper);
  --map-soft: var(--bap-lilac-paper);
  --map-accent: var(--bap-berry);
  --map-progress: var(--bap-tangerine);
}

.map-hero::after {
  background-color: var(--map-soft);
}

.home-meal-screen .home-meal-hero {
  --map-paper: #fff0b8;
  --map-soft: var(--bap-mint-paper);
  --map-accent: var(--bap-teal);
}

.home-meal-screen .screen-kicker,
.home-meal-screen .map-stat,
.recipe-stage-chip,
.feed-post-actions button.liked {
  color: var(--bap-raspberry-deep);
}

.home-meal-screen .map-stat {
  background-color: #fff8df;
  box-shadow: 2px 3px 0 rgba(255, 228, 95, .76) !important;
}

.home-meal-screen .home-route,
.map-route {
  background-color: #fff8e7;
  background-image:
    radial-gradient(circle, rgba(240, 79, 122, .1) 0 1px, transparent 1.25px),
    linear-gradient(rgba(255, 248, 231, .9), rgba(255, 248, 231, .9)),
    url("./assets/illustrations/watercolor-clean-bg-v3.webp") !important;
}

.home-meal-screen .home-route::before {
  background:
    radial-gradient(circle, #fff8e7 0 2px, transparent 2.3px) center top / 9px 16px repeat-y,
    linear-gradient(to bottom, var(--bap-raspberry), var(--bap-mint) 36%, var(--bap-lilac) 68%, var(--bap-lemon)) !important;
  box-shadow: 0 0 0 3px rgba(116, 230, 200, .14);
}

.home-meal-screen .chapter-1 { --chapter-accent: var(--bap-lemon); --chapter-soft: #fff4bf; }
.home-meal-screen .chapter-2 { --chapter-accent: var(--bap-raspberry); --chapter-soft: var(--bap-pink-paper); }
.home-meal-screen .chapter-3 { --chapter-accent: var(--bap-mint); --chapter-soft: var(--bap-mint-paper); }
.home-meal-screen .chapter-4 { --chapter-accent: var(--bap-lilac); --chapter-soft: var(--bap-lilac-paper); }
.home-meal-screen .chapter-5 { --chapter-accent: var(--bap-sage); --chapter-soft: var(--bap-leaf-paper); }
.home-meal-screen .chapter-6 { --chapter-accent: var(--bap-tangerine); --chapter-soft: #ffe7d2; }
.home-meal-screen .chapter-7 { --chapter-accent: var(--bap-berry); --chapter-soft: #f8def1; }

.home-meal-screen .chapter-marker,
.home-meal-screen .forest-goal,
.map-step .map-stop,
.map-step.right .map-stop,
.home-meal-screen .map-step .map-stop,
.home-meal-screen .map-step.right .map-stop {
  color: var(--bap-ink);
  box-shadow: 3px 4px 0 color-mix(in srgb, var(--chapter-accent) 24%, transparent) !important;
}

.map-step .map-stop.available,
.home-meal-screen .map-step .map-stop.available,
.home-meal-screen .map-step-status-available .map-stop {
  background-color: #fff0b8 !important;
  box-shadow: 4px 5px 0 rgba(240, 79, 122, .18) !important;
}

.map-step .map-stop.cleared,
.home-meal-screen .map-step .map-stop.cleared,
.home-meal-screen .map-step-status-cleared .map-stop {
  background-color: #ddf7df !important;
}

.map-step .map-stop.skipped,
.home-meal-screen .map-step .map-stop.skipped,
.home-meal-screen .map-step-status-skipped .map-stop {
  background-color: var(--bap-lilac-paper) !important;
}

.map-step .map-stop.locked,
.home-meal-screen .map-step .map-stop.locked {
  background-color: #fbf5ec !important;
}

.node-dish,
.home-meal-screen .node-dish,
.map-route.dessert .node-dish {
  background-color: var(--chapter-soft, var(--bap-mint-paper));
  box-shadow: 2px 3px 0 color-mix(in srgb, var(--chapter-accent, var(--bap-mint)) 34%, transparent) !important;
}

.node-badge,
.home-meal-screen .node-dish .node-badge,
.map-route.dessert .node-dish .node-badge {
  background-color: #fff8df;
  color: var(--bap-muted);
}

.available .node-dish .node-badge,
.home-meal-screen .available .node-dish .node-badge {
  background-color: var(--bap-raspberry);
  color: #fff;
}

.cleared .node-dish .node-badge,
.home-meal-screen .cleared .node-dish .node-badge {
  background-color: var(--bap-teal);
  color: #fff;
}

.node-num,
.home-meal-screen .node-num {
  color: color-mix(in srgb, var(--chapter-accent, var(--bap-raspberry)) 76%, var(--bap-ink));
}

.node-state,
.home-meal-screen .node-state {
  background: rgba(73, 49, 69, .055);
  color: #786870;
}

.available .node-state,
.home-meal-screen .available .node-state,
.home-meal-screen .map-step-status-available .node-state {
  background: rgba(240, 79, 122, .13);
  color: var(--bap-raspberry-deep);
}

.cleared .node-state,
.home-meal-screen .cleared .node-state {
  background: rgba(34, 169, 155, .13);
  color: #247f77;
}

.profile-hero,
.profile-avatar,
.auth-brand {
  background-color: var(--bap-mint-paper) !important;
}

.profile-section-card,
.rank-list,
.my-rank,
.friend-card,
.feed-post,
.account-sheet,
.proof-capture {
  background-color: #fff8ea;
}

.profile-section:nth-of-type(even) .profile-section-card,
.podium,
.feed-heading {
  background-color: var(--bap-pink-paper) !important;
}

.podium-person.first .podium-block,
.podium-person.first .podium-avatar,
.podium-person.first .podium-emblem {
  background-color: var(--bap-lemon) !important;
}

.podium-person.second .podium-block {
  background-color: var(--bap-mint) !important;
}

.podium-person.third .podium-block {
  background-color: var(--bap-lilac) !important;
}

.feed-filter button.active,
.avatar-choice.selected {
  border-color: rgba(73, 49, 69, .62);
  background: var(--bap-mint-paper);
  color: var(--bap-ink);
}

.tabs button > span:last-child {
  color: inherit;
  font-size: 9px;
  font-weight: 700;
}

.tabs button.active > span:last-child {
  color: #4f4646;
}

/* Keep the hand-drawn navigation treatment above legacy tab states. */
.home-screen-v11 .home-cover-cta {
  box-shadow: none !important;
}

.profile-hero .profile-stats,
.profile-hero .profile-stat + .profile-stat {
  background-image: none !important;
}

.profile-hero .profile-stats::after {
  display: none;
}

.tabs::before {
  top: -7px !important;
  height: 15px !important;
  background: url("./assets/nav-hand-line.svg") center / 100% 100% no-repeat !important;
  opacity: 1;
}

.tabs button.active::before {
  display: block;
  top: 2px;
  width: 44px;
  height: 44px;
  border: 0 !important;
  background-color: #f6e7a2 !important;
  background-image: url("./assets/pencil-circle.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.tabs button.active .tab-art-wrap,
.tabs button:nth-child(1).active .tab-art-wrap {
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.tabs button:first-child.active .tab-art {
  width: 35px;
  height: 37px;
  filter: saturate(1.08) contrast(1.25) drop-shadow(1px 2px 0 rgba(64, 54, 56, .18));
}

/* Final palette guard: keep the brighter cute accents above legacy tab cleanup. */
.home-screen-v11 .home-cover-cta,
.home-cover-cta,
.auth-primary {
  background-color: var(--bap-raspberry) !important;
  box-shadow: 3px 4px 0 rgba(255, 228, 95, .66) !important;
}

.tabs button.active::before {
  background-color: var(--bap-lemon) !important;
}

.tabs button.active > span:last-child {
  color: var(--bap-ink);
}

.tabs button:first-child.active .tab-art,
.tabs button.active .tab-art {
  filter: saturate(1.18) contrast(1.12) drop-shadow(1px 2px 0 rgba(73, 49, 69, .14)) !important;
}

/* ===== illustrations.css ===== */
.podium-avatar,
.avatar,
.my-rank-mark,
.profile-avatar {
  overflow: hidden;
  padding: 0;
  background: #fffaf0;
}

.podium-avatar img,
.avatar img,
.my-rank-mark img,
.profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 24%;
}

.podium-avatar img {
  transform: scale(1.06);
}

.profile-avatar::after {
  display: none;
}

.badge-list {
  align-items: stretch;
}

.badge-item {
  min-height: 118px;
  padding: 10px 7px 9px;
  gap: 5px;
}

.badge-symbol {
  position: relative;
  z-index: 0;
  width: 64px;
  height: 64px;
  padding: 5px;
  border: 1px solid rgba(74, 64, 51, .28);
  border-radius: 50%;
  background: #f7f0dc;
  box-shadow: 2px 3px 0 rgba(105, 84, 58, .12);
}

.badge-symbol::before,
.badge-symbol::after {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: -11px;
  width: 19px;
  height: 27px;
  background: #d9d0bc;
  clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 76%, 18% 100%);
}

.badge-symbol::before { left: 11px; transform: rotate(8deg); }
.badge-symbol::after { right: 11px; transform: rotate(-8deg); }

.badge-symbol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(.34);
}

.badge-symbol i {
  position: absolute;
  right: -4px;
  bottom: -3px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid #fffaf0;
  border-radius: 50%;
  background: #ada391;
  color: #fff;
  font: 700 10px/1 var(--font-ui);
  font-style: normal;
}

.badge-item.earned .badge-symbol {
  background: #fff7c8;
  border-color: #6f967c;
  box-shadow: 2px 3px 0 rgba(81, 119, 92, .2);
}

.badge-item.earned .badge-symbol::before,
.badge-item.earned .badge-symbol::after {
  background: #ef7d73;
}

.badge-item.earned .badge-symbol img {
  filter: none;
}

.badge-item.earned .badge-symbol i {
  background: #5d8f73;
}

.sticker-board {
  gap: 7px;
}

.sticker-cell,
.sticker-cell:not(.locked) {
  position: relative;
  height: 46px;
  padding: 3px;
  overflow: hidden;
  border: 1px solid rgba(74, 64, 51, .18);
  background: #fff9ec;
}

.sticker-cell img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.sticker-cell > span {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5d8f73;
  color: #fff;
}

.sticker-cell.locked img {
  filter: grayscale(1) opacity(.2);
}

.sticker-cell.locked > span {
  background: rgba(93, 84, 71, .62);
}

.sticker-detail-emoji {
  padding: 3px;
  overflow: hidden;
}

.sticker-detail-emoji img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* ===== reference-redesign.css ===== */
@font-face {
  font-family: "Bap Jua";
  src: url("./assets/fonts/Jua-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu";
  src: url("./assets/fonts/Gaegu-Bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Bap Sacramento";
  src: url("./assets/fonts/Sacramento-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Bodoni Moda";
  src: url("./assets/fonts/BodoniModa-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

.reference-auth-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  background-color: #ee5aa5;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, .26) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, .26) 2px, transparent 2px);
  background-size: 34px 34px;
  color: #211e20;
}

.reference-auth-shell .reference-cover {
  position: relative;
  width: min(100%, 430px);
  height: min(900px, calc(100dvh - 32px));
  min-height: 700px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden auto;
  border: 3px solid #211e20;
  border-radius: 0;
  background-color: #fffdf2;
  background-image: url("./assets/paper-grain.svg");
  box-shadow: 10px 10px 0 #211e20;
  scrollbar-width: none;
}

.reference-auth-shell .reference-cover::-webkit-scrollbar {
  display: none;
}

.reference-cover-masthead {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  padding: 10px 15px 11px;
  border-bottom: 3px solid #211e20;
  background: #fffdf2;
}

.reference-cover-issue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 5px;
  border-bottom: 1px solid #211e20;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.reference-cover-issue span {
  color: #116b9d;
}

.reference-cover-issue b {
  color: #dd3e31;
  font-weight: 900;
}

.reference-cover-masthead h1 {
  margin: 4px 0 0;
  color: #211e20;
  font-family: "Bap Gaegu", "Bap Jua", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: .86;
  letter-spacing: 0;
  white-space: nowrap;
}

.reference-cover-masthead h1 span {
  color: #df3d31;
}

.reference-cover-masthead h1 i {
  display: inline-block;
  margin-left: 2px;
  color: #18a7c8;
  font-style: normal;
  transform: rotate(7deg);
}

.reference-cover-masthead p {
  margin: 5px 0 0;
  color: #211e20;
  font-family: "Bap Jua", sans-serif;
  font-size: 13px;
  line-height: 1;
}

.reference-cover-feature {
  position: relative;
  flex: 1 0 390px;
  min-height: 390px;
  overflow: hidden;
  border-bottom: 3px solid #211e20;
  background: #c9edf2;
  isolation: isolate;
}

.reference-cover-feature::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: url("./assets/paper-grain.svg") center / 380px 380px repeat;
  mix-blend-mode: multiply;
  opacity: .32;
}

.reference-cover-feature > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 43%;
  filter: saturate(1.08) contrast(1.03);
}

.reference-cover-headline {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 14px;
  width: 245px;
}

.reference-cover-headline > span {
  display: inline-block;
  padding: 4px 8px 3px;
  border: 2px solid #211e20;
  background: #ffe64d;
  color: #211e20;
  font-family: "Bap Jua", sans-serif;
  font-size: 13px;
  line-height: 1;
  transform: rotate(-1.5deg);
  box-shadow: 3px 3px 0 #211e20;
}

.reference-cover-headline h2 {
  margin: 12px 0 0;
  color: #211e20;
  font-family: "Bap Jua", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: .98;
  letter-spacing: 0;
  text-shadow: 2px 2px 0 #fffdf2;
}

.reference-cover-headline h2 em {
  color: #e33d35;
  font-style: normal;
  -webkit-text-stroke: 1px #211e20;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 #ffe64d;
}

.reference-cover-headline p {
  width: fit-content;
  margin: 12px 0 0;
  padding: 5px 7px;
  background: rgba(255, 253, 242, .9);
  color: #211e20;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 3px 3px 0 rgba(33, 30, 32, .78);
  transform: rotate(.8deg);
}

.reference-cover-count {
  position: absolute;
  z-index: 2;
  top: 17px;
  right: 13px;
  width: 82px;
  height: 82px;
  display: grid;
  grid-template-columns: 1fr;
  place-content: center;
  border: 2px solid #211e20;
  border-radius: 50%;
  background: #e34b8f;
  color: #fffdf2;
  text-align: center;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 #211e20;
}

.reference-cover-count b {
  font-family: "Bap Jua", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: .8;
}

.reference-cover-count span {
  margin-top: 5px;
  font-family: "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 900;
  line-height: .9;
}

.reference-cover-note {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 18px;
  padding: 5px 8px 4px;
  border: 2px solid #211e20;
  background: #fffdf2;
  color: #167a9d;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-5deg);
  box-shadow: 3px 3px 0 #ffe64d;
}

.reference-cover-index {
  flex: 0 0 90px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 3px solid #211e20;
  background: #fffdf2;
}

.reference-cover-index article {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 9px;
}

.reference-cover-index article + article {
  border-left: 2px dotted #211e20;
}

.reference-cover-index article:nth-child(1) {
  background: #fff4a7;
}

.reference-cover-index article:nth-child(2) {
  background: #f8bfd5;
}

.reference-cover-index article:nth-child(3) {
  background: #bde6d1;
}

.reference-cover-index b {
  color: #147ca5;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.reference-cover-index strong {
  display: block;
  margin-top: 4px;
  overflow-wrap: anywhere;
  color: #211e20;
  font-family: "Bap Jua", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.05;
}

.reference-cover-index span {
  display: block;
  margin-top: 4px;
  color: #4f4649;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
}

.reference-cover-start {
  flex: 0 0 58px;
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border: 0;
  border-bottom: 3px solid #211e20;
  border-radius: 0;
  background: #e84639;
  color: #fffdf2;
  font-family: "Bap Jua", sans-serif;
  font-size: 19px;
  box-shadow: none;
}

.reference-cover-start:hover {
  background: #147ca5;
}

.reference-cover-start:active {
  transform: translateY(1px);
}

.reference-cover-start svg {
  flex: 0 0 auto;
}

.reference-cover-footer {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 11px;
  background: #211e20;
  color: #fffdf2;
  font-family: "SUIT", sans-serif;
  font-size: 7px;
  line-height: 1;
}

.reference-cover-footer b {
  color: #ffe64d;
  font-weight: 900;
}

@media (max-width: 560px) {
  .reference-auth-shell {
    display: block;
    padding: 0;
    background: #fffdf2;
  }

  .reference-auth-shell .reference-cover {
    width: 100%;
    height: 100dvh;
    min-height: 680px;
    border: 0;
    box-shadow: none;
  }
}

@media (max-width: 370px) {
  .reference-cover-masthead h1 {
    font-size: 50px;
  }

  .reference-cover-headline {
    width: 225px;
  }

  .reference-cover-headline h2 {
    font-size: 38px;
  }

  .reference-cover-count {
    width: 72px;
    height: 72px;
  }

  .reference-cover-index strong {
    font-size: 13px;
  }
}

/*
 * Feed reference v2
 * Align the live feed with the approved lavender poster while reusing the
 * exact home navigation system. Decorative header art and the record CTA
 * were intentionally removed from the live composition.
 */
.phone.feed-frame-phone.feed-mono-preview {
  --feed-reference-paper: #ebe5fa;
  --feed-reference-paper-deep: #dfd6f3;
  --feed-reference-ink: #301258;
  --feed-reference-line: #3b1a64;
  --feed-reference-red: #ef363c;
  --poster-blue: #bfdfe8;
  --poster-cream: #fff2cf;
  --poster-red: #ed1630;
  --poster-green: #a8dc82;
  --poster-pink: #f6bfd0;
  --poster-yellow: #ffdc55;
  --poster-ink: #281a19;
  grid-template-rows: 0 minmax(0, 1fr) calc(82px + env(safe-area-inset-bottom)) !important;
}

.feed-frame-phone .feed-reference-v1,
.feed-frame-phone .feed-reference-header,
.feed-frame-phone .feed-reference-v1 .feed-post-author,
.feed-frame-phone .feed-reference-v1 .feed-post-actions,
.feed-frame-phone .feed-dialog {
  background-color: var(--feed-reference-paper) !important;
  background-image: url("./assets/ui/feed-lavender-paper-v2.svg") !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: 160px 160px !important;
}

.feed-frame-phone .feed-reference-v1 {
  font-family: "SUIT", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.feed-frame-phone .feed-reference-header {
  min-height: 116px;
  padding: 25px 24px 0;
  border-bottom-width: 1px;
}

.feed-frame-phone .feed-reference-header h2 {
  font-family: "Jua", "SUIT", "Pretendard", sans-serif;
  font-size: clamp(40px, 10.5vw, 47px);
  font-weight: 400;
  line-height: .96;
  letter-spacing: -.055em;
}

.feed-frame-phone .feed-reference-stripes,
.feed-frame-phone .feed-reference-dots,
.feed-frame-phone .feed-record-button {
  display: none !important;
}

.feed-frame-phone .feed-reference-controls {
  justify-content: flex-start;
}

.feed-frame-phone .feed-reference-v1 .feed-filter {
  gap: 38px;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button,
.feed-frame-phone .feed-reference-v1 .feed-filter button:hover,
.feed-frame-phone .feed-reference-v1 .feed-filter button.active {
  min-width: 54px;
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 15.5px !important;
  font-weight: 750;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button::after {
  height: 3px;
}

.feed-frame-phone .feed-reference-v1 .feed-post + .feed-post {
  border-top-width: 1px !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author {
  min-height: 68px;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 9px 24px !important;
}

.feed-frame-phone .feed-avatar-shell {
  width: 47px;
  height: 47px;
  background: #fff4d7;
}

.feed-frame-phone .feed-avatar-jarin img {
  top: 0;
  left: -2px;
  width: 51px !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author strong {
  margin-bottom: 4px !important;
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.05;
  letter-spacing: -.025em;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author span {
  color: #4b356e !important;
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 12.5px !important;
  font-weight: 450;
  line-height: 1.16;
  letter-spacing: -.012em;
}

.feed-frame-phone .feed-reference-v1 .feed-post-photo {
  aspect-ratio: 1.75 / 1;
}

.feed-frame-phone .feed-reference-v1 .feed-post-actions {
  min-height: 51px;
  gap: 45px;
  padding: 0 30px !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-actions button,
.feed-frame-phone .feed-reference-v1 .feed-post-actions button:hover,
.feed-frame-phone .feed-reference-v1 .feed-post-actions button.liked {
  gap: 10px;
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 14px !important;
  font-weight: 450 !important;
}

.feed-frame-phone .feed-reference-v1 .feed-like-action > svg,
.feed-frame-phone .feed-comment-symbol {
  width: 25px !important;
  height: 25px !important;
}

/* The feed uses the same bottom navigation dimensions, palette and active
 * marker as the home poster—only the active tab changes. */
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs {
  position: relative;
  z-index: 12;
  grid-row: 3 !important;
  min-height: calc(82px + env(safe-area-inset-bottom)) !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background: var(--poster-blue) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:hover,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active {
  position: relative;
  min-height: 58px !important;
  grid-template-rows: 36px 15px !important;
  align-content: center;
  gap: 3px !important;
  padding: 2px 1px !important;
  color: var(--poster-ink) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .tab-menu-icon {
  width: 36px !important;
  height: 36px !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg {
  width: 34px !important;
  height: 34px !important;
  stroke-width: initial !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(1) {
  --menu-icon-line: var(--poster-ink);
  --menu-icon-fill: var(--poster-cream);
  --menu-icon-fill-soft: var(--poster-cream);
  --menu-icon-highlight: var(--poster-yellow);
  --menu-icon-detail: var(--poster-red);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(2) {
  --menu-icon-line: var(--poster-ink);
  --menu-icon-fill: var(--poster-green);
  --menu-icon-fill-soft: var(--poster-green);
  --menu-icon-detail: var(--poster-green);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(3) {
  --menu-icon-line: var(--poster-ink);
  --menu-icon-fill: var(--poster-yellow);
  --menu-icon-fill-soft: var(--poster-yellow);
  --menu-icon-highlight: var(--poster-yellow);
  --menu-icon-detail: var(--poster-ink);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(4) {
  --menu-icon-line: var(--poster-ink);
  --menu-icon-fill: var(--poster-pink);
  --menu-icon-fill-soft: var(--poster-pink);
  --menu-icon-detail: var(--poster-pink);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(5) {
  --menu-icon-line: var(--poster-ink);
  --menu-icon-fill: var(--poster-red);
  --menu-icon-fill-soft: var(--poster-red);
  --menu-icon-detail: var(--poster-red);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .tab-menu-label,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active .tab-menu-label {
  color: var(--poster-ink) !important;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 10px !important;
  font-weight: 900 !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active::after {
  content: "";
  position: absolute;
  right: calc(50% - 5px);
  bottom: 0;
  left: auto;
  width: 10px;
  height: 10px;
  display: block !important;
  border-radius: 50%;
  background: var(--poster-red);
}

@media (max-width: 370px) {
  .feed-frame-phone .feed-reference-header {
    min-height: 108px;
  }

  .phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Approved watercolor authentication artwork — 2026-07-29 */
.watercolor-auth-shell {
  --watercolor-ink: #25140e;
  --watercolor-coral: #ef684e;
  --watercolor-green: #9ccf42;
  --watercolor-yellow: #fff2a3;
  min-height: 100dvh;
  display: grid;
  place-items: start center;
  overflow-x: hidden;
  background:
    linear-gradient(rgba(36, 29, 20, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(36, 29, 20, .035) 1px, transparent 1px),
    #f2f1eb;
  background-size: 32px 32px;
  color: var(--watercolor-ink);
  font-family: "Pretendard", "SUIT", "Noto Sans KR", sans-serif;
}

.watercolor-auth-page {
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  min-height: max(100dvh, 932px);
  overflow: hidden;
  background:
    #fff2a3
    url("./assets/ui/auth-watercolor-background-v2.png?v=20260729-auth-v2")
    center top / 100% 100%
    no-repeat;
  box-shadow: 0 0 34px rgba(68, 54, 26, .08);
}

.watercolor-auth-page::before,
.watercolor-auth-page::after,
.watercolor-auth-texture {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.watercolor-auth-shape,
.watercolor-auth-cream {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.watercolor-auth-page::before,
.watercolor-auth-page::after,
.watercolor-auth-texture,
.watercolor-auth-shape,
.watercolor-auth-cream,
.watercolor-auth-seeds {
  display: none;
}

.watercolor-auth-brand {
  position: relative;
  z-index: 3;
  width: 70%;
  margin-left: 9%;
  padding-top: 36%;
}

.watercolor-auth-brand > span {
  display: block;
  margin-bottom: 13px;
  color: var(--watercolor-coral);
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .25em;
}

.watercolor-auth-brand h1 {
  margin: 0;
  color: var(--watercolor-ink);
  font-size: 39px;
  font-weight: 950;
  line-height: .98;
  letter-spacing: -.075em;
}

.watercolor-auth-brand p {
  margin: 17px 0 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: -.03em;
}

.watercolor-auth-content {
  position: relative;
  z-index: 3;
  width: 76%;
  margin: 44px auto 0;
}

.watercolor-auth-tabs {
  display: flex;
  justify-content: center;
  gap: 47px;
  margin-bottom: 28px;
}

.watercolor-auth-tabs button {
  position: relative;
  min-width: 72px;
  padding: 0 4px 9px;
  border: 0;
  background: transparent;
  color: var(--watercolor-ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  cursor: pointer;
}

.watercolor-auth-tabs button.active {
  font-weight: 900;
}

.watercolor-auth-tabs button.active::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  left: -1px;
  height: 5px;
  background: rgba(239, 104, 78, .94);
  clip-path: polygon(0 44%, 7% 24%, 20% 32%, 38% 14%, 57% 29%, 77% 17%, 100% 40%, 97% 76%, 80% 68%, 61% 87%, 41% 68%, 20% 82%, 3% 68%);
  transform: rotate(.6deg);
}

.watercolor-auth-form {
  width: 90%;
  display: grid;
  gap: 0;
  margin: 0 0 0 auto !important;
}

.watercolor-auth-field {
  position: relative;
  display: grid !important;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  margin: 0 !important;
  color: var(--watercolor-ink);
}

.watercolor-auth-field::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--watercolor-ink);
  clip-path: polygon(0 32%, 7% 38%, 16% 24%, 29% 43%, 44% 29%, 61% 40%, 77% 23%, 91% 39%, 100% 31%, 100% 71%, 88% 63%, 73% 78%, 58% 60%, 42% 75%, 24% 60%, 9% 72%, 0 64%);
  opacity: .86;
  transform: rotate(.15deg);
}

.watercolor-auth-field .watercolor-auth-seed {
  width: 10px;
  height: 14px;
  display: block;
  justify-self: center;
  border-radius: 58% 42% 61% 39% / 74% 63% 37% 26%;
  background: var(--watercolor-coral);
  transform: rotate(-25deg);
}

.watercolor-auth-field input {
  width: 100% !important;
  height: 58px !important;
  min-height: 0 !important;
  padding: 0 42px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--watercolor-ink);
  font: inherit;
  font-size: 17px !important;
  font-weight: 520;
  -webkit-appearance: none;
  appearance: none;
  caret-color: var(--watercolor-ink);
}

.watercolor-auth-field input::placeholder {
  color: var(--watercolor-ink);
  opacity: .94;
}

.watercolor-auth-field input:focus,
.watercolor-auth-field input:active {
  outline: 0 !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.watercolor-auth-field input:-webkit-autofill,
.watercolor-auth-field input:-webkit-autofill:hover,
.watercolor-auth-field input:-webkit-autofill:focus,
.watercolor-auth-field input:-webkit-autofill:active {
  border: 0 !important;
  background-color: transparent !important;
  background-image: none !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--watercolor-ink) !important;
  caret-color: var(--watercolor-ink) !important;
  transition: background-color 999999s ease-out 0s !important;
}

.watercolor-auth-field input::selection {
  background: rgba(239, 104, 78, .22);
  color: var(--watercolor-ink);
}

.watercolor-auth-field:focus-within::after {
  height: 2px;
  background: var(--watercolor-coral);
}

.watercolor-auth-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 36px;
  height: 36px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--watercolor-ink);
  transform: translateY(-50%);
  cursor: pointer;
}

.watercolor-auth-eye svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}

.watercolor-auth-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 14px 0 18px;
  font-size: 13px;
  font-weight: 600;
}

.watercolor-auth-options > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--watercolor-ink);
  font: inherit;
  cursor: pointer;
}

.watercolor-auth-remember {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  cursor: pointer;
}

.watercolor-auth-remember input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
}

.watercolor-auth-check {
  position: relative;
  width: 16px;
  height: 16px;
  display: block;
  border: 1.5px solid var(--watercolor-ink);
  background: rgba(255, 250, 240, .68);
}

.watercolor-auth-remember input:checked + .watercolor-auth-check {
  background: var(--watercolor-green);
}

.watercolor-auth-remember input:checked + .watercolor-auth-check::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--watercolor-ink);
  border-bottom: 2px solid var(--watercolor-ink);
  transform: rotate(42deg);
}

.watercolor-auth-primary {
  position: relative;
  width: 106%;
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin-left: -6%;
  padding: 13px 20px;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(circle at 15% 38%, rgba(255, 255, 255, .12), transparent 24%),
    var(--watercolor-green) !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  box-shadow: none !important;
  color: var(--watercolor-ink) !important;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -.04em;
  cursor: pointer;
}

.watercolor-auth-primary span {
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
}

.watercolor-auth-member-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 550;
}

.watercolor-auth-member-link button {
  position: relative;
  padding: 0 1px 6px;
  border: 0;
  background: transparent;
  color: var(--watercolor-ink);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.watercolor-auth-member-link button::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: 0;
  left: -1px;
  height: 4px;
  background: rgba(239, 104, 78, .92);
  clip-path: polygon(0 39%, 12% 23%, 28% 34%, 47% 15%, 65% 31%, 84% 19%, 100% 37%, 97% 77%, 79% 65%, 60% 84%, 40% 67%, 20% 81%, 2% 66%);
  transform: rotate(-.8deg);
}

.watercolor-auth-social {
  margin-top: 12px !important;
  color: var(--watercolor-ink);
  text-align: center;
}

.watercolor-auth-social > span {
  display: block;
  margin-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
}

.watercolor-auth-social > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
}

.watercolor-auth-social .social-icon-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  display: grid;
  padding: 0 !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

.watercolor-auth-social .social-icon-button img {
  width: 42px !important;
  height: 42px !important;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}

.watercolor-auth-social .google-icon-button svg {
  width: 34px !important;
  height: 34px !important;
  display: block;
}

.watercolor-auth-footer {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 17px;
  left: 0;
  color: var(--watercolor-ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.watercolor-auth-form .login-error,
.watercolor-auth-form .login-notice {
  margin: 10px 0 13px;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 250, 240, .8);
  color: #9d2f22;
  font-size: 12px;
  font-weight: 650;
  text-align: center;
}

.watercolor-auth-form .login-notice {
  color: #3e6a1d;
}

.watercolor-auth-page .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.watercolor-auth-signup .watercolor-auth-brand {
  padding-top: 27%;
}

.watercolor-auth-signup .watercolor-auth-brand > span {
  margin-bottom: 9px;
}

.watercolor-auth-signup .watercolor-auth-brand h1 {
  font-size: 38px;
}

.watercolor-auth-signup .watercolor-auth-brand p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.55;
}

.watercolor-auth-signup .watercolor-auth-content {
  margin-top: 14px;
}

.watercolor-auth-signup .watercolor-auth-tabs {
  margin-bottom: 13px;
}

.watercolor-auth-signup .watercolor-auth-field {
  min-height: 48px;
}

.watercolor-auth-signup .watercolor-auth-field input {
  height: 46px !important;
  font-size: 15px !important;
}

.watercolor-auth-signup .watercolor-auth-primary {
  min-height: 52px;
  margin-top: 16px;
  font-size: 17px;
}

.watercolor-auth-signup .watercolor-auth-member-link {
  margin-top: 17px;
}

.watercolor-auth-signup .watercolor-auth-social {
  margin-top: 17px !important;
}

.watercolor-auth-signup .watercolor-auth-social > span {
  margin-bottom: 10px;
}

.watercolor-auth-signup .watercolor-auth-social .social-icon-button,
.watercolor-auth-signup .watercolor-auth-social .social-icon-button img {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
}

.watercolor-auth-signup .watercolor-auth-social .google-icon-button svg {
  width: 31px !important;
  height: 31px !important;
}

@media (min-width: 641px) {
  .watercolor-auth-shell {
    padding-block: 16px;
  }

  .watercolor-auth-page {
    min-height: 932px;
  }
}

@media (max-width: 430px) {
  .watercolor-auth-page {
    min-height: max(100dvh, calc(100vw * 2.1716));
  }
}

@media (max-width: 370px) {
  .watercolor-auth-brand h1 {
    font-size: 38px;
  }

  .watercolor-auth-content {
    width: 80%;
    margin-top: 44px;
  }

  .watercolor-auth-tabs {
    gap: 30px;
  }

  .watercolor-auth-field {
    min-height: 55px;
  }

  .watercolor-auth-field input {
    height: 53px !important;
  }

  .watercolor-auth-signup .watercolor-auth-content {
    margin-top: 20px;
  }
}

/* Home-meal editorial boxes: align chapter and route-end cards with the flat home mood. */
.home-meal-frame-phone.home-meal-mono-preview {
  --home-stage-line: var(--flat-red, #d5232f);
  --home-stage-pink: var(--flat-pink, #f2b8cf);
  --home-stage-pink-soft: var(--flat-pink-soft, #fbe4ec);
  --home-stage-butter: var(--flat-butter, #fff8be);
  --home-stage-paper: var(--flat-white, #fff);
  --home-stage-ink: var(--flat-coffee, #3b190e);
  --home-stage-muted: var(--flat-muted, #77746d);
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-marker {
  position: relative;
  width: 100%;
  min-height: 78px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  margin: 12px 0;
  padding: 13px 16px 13px 18px;
  overflow: hidden;
  border: 1px solid var(--home-stage-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--home-stage-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--home-stage-ink);
  transform: none !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-marker::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  display: block !important;
  background: var(--home-stage-pink) !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-marker::after {
  display: none !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-marker.has-character-teaser {
  grid-template-columns: 48px minmax(0, 1fr) 42px;
  overflow: visible;
  padding-right: 13px;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-number {
  width: 44px;
  height: 44px;
  border: 1px solid var(--home-stage-line) !important;
  border-radius: 0 !important;
  background: var(--home-stage-butter) !important;
  color: var(--home-stage-line) !important;
  box-shadow: none !important;
  font-family: "Pretendard", sans-serif;
  font-size: 19px;
  font-weight: 750;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-copy small {
  color: var(--home-stage-line);
  font-size: 8px;
  font-weight: 850;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-copy b {
  margin-top: 2px;
  color: var(--home-stage-ink);
  font-size: 16px;
  font-weight: 900;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .chapter-copy em {
  margin-top: 3px;
  color: var(--home-stage-muted);
  font-size: 8px;
  font-weight: 600;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.trailhead,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.summit,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 116px;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin: 12px 0;
  padding: 19px 18px;
  overflow: hidden;
  border: 1px solid var(--home-stage-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--home-stage-paper) !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--home-stage-ink);
  transform: none !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon {
  background-color: var(--home-stage-pink-soft) !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal::before,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal::after {
  display: none !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .goal-kicker,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit .goal-kicker,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .trailhead .goal-kicker {
  top: 10px;
  right: 11px;
  left: auto;
  padding: 3px 6px;
  border: 1px solid var(--home-stage-line) !important;
  border-radius: 0 !important;
  background: var(--home-stage-paper) !important;
  color: var(--home-stage-line) !important;
  box-shadow: none !important;
  font-size: 7px;
  font-weight: 900;
  transform: none !important;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .goal-reference-art,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit .goal-reference-art,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .trailhead .goal-reference-home,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon .coming-soon-symbol {
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--home-stage-line);
  border-radius: 0;
  background: var(--home-stage-butter);
  box-shadow: none;
  object-fit: contain;
  filter: none;
  transform: none;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon .coming-soon-symbol {
  background: var(--home-stage-pink);
  color: var(--home-stage-line);
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal > div,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit > div {
  min-width: 0;
  padding: 5px 72px 0 0;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal b,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit b,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .trailhead b {
  color: var(--home-stage-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal small,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit small,
.home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .trailhead small {
  max-width: none;
  margin-top: 5px;
  color: var(--home-stage-muted);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.45;
}

@media (max-width: 370px) {
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.trailhead,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.summit,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 12px;
    padding: 18px 14px;
  }

  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .goal-reference-art,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit .goal-reference-art,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .trailhead .goal-reference-home,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon .coming-soon-symbol {
    width: 60px;
    height: 60px;
  }

  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .forest-goal > div,
  .home-meal-frame-phone.home-meal-mono-preview .home-meal-screen .summit > div {
    padding-right: 58px;
  }
}

/* Profile allergy controls: keep the flat suite geometry deterministic. */
.profile-frame-phone.profile-mono-preview .profile-screen .allergy-list .allergy-item {
  border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  .reference-cover-start,
  .reference-cover-note,
  .reference-cover-headline > span,
  .reference-cover-count {
    transition: none;
  }
}

/* Profile v2: a warm archive poster with its own palette and rhythm. */
.profile-frame-phone.profile-mono-preview {
  --profile-v2-ink: #35163f;
  --profile-v2-plum: #4f2763;
  --profile-v2-lilac: #c9b8e7;
  --profile-v2-lilac-soft: #e8def6;
  --profile-v2-orange: #ff7848;
  --profile-v2-orange-soft: #ffd0b5;
  --profile-v2-yellow: #f5d34c;
  --profile-v2-paper: #fff4dd;
  --profile-v2-white: #fffaf1;
  grid-template-rows: 0 minmax(0, 1fr) calc(88px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--profile-v2-plum);
  background-image:
    repeating-linear-gradient(
      106deg,
      rgba(255, 244, 221, .08) 0 2px,
      transparent 2px 16px
    );
  background-position: 0 0;
  background-size: auto;
  box-shadow: none;
}

.profile-frame-phone.profile-mono-preview .top {
  height: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.profile-frame-phone.profile-mono-preview .content {
  padding: 18px 32px 34px !important;
  overflow-x: hidden;
  background: transparent !important;
  scrollbar-color: var(--profile-v2-orange) transparent;
}

.profile-frame-phone.profile-mono-preview .content::-webkit-scrollbar {
  width: 4px;
}

.profile-frame-phone.profile-mono-preview .content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--profile-v2-orange);
}

.profile-frame-phone.profile-mono-preview .tabs {
  padding: 8px 30px max(19px, env(safe-area-inset-bottom));
  border: 0;
  background: var(--profile-v2-ink) !important;
  box-shadow: none !important;
  transform: none;
}

.profile-frame-phone.profile-mono-preview .tabs::before {
  display: none;
}

.profile-frame-phone.profile-mono-preview .tabs button {
  color: rgba(255, 244, 221, .66);
}

.profile-frame-phone.profile-mono-preview .tabs button:hover {
  background: transparent;
  color: var(--profile-v2-white);
}

.profile-frame-phone.profile-mono-preview .tabs button.active {
  background: transparent;
  color: var(--profile-v2-yellow);
  box-shadow: none;
}

.profile-frame-phone.profile-mono-preview .tabs button.active::before {
  top: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--profile-v2-orange);
}

.profile-frame-phone.profile-mono-preview .tabs .tab-menu-icon {
  border-color: transparent !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

.profile-frame-phone .profile-editorial-v2 {
  --profile-card-shadow: 6px 6px 0 var(--profile-v2-ink);
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0 0 18px;
  color: var(--profile-v2-ink);
  background: transparent;
}

.profile-frame-phone .profile-editorial-v2 > * {
  min-width: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 0 3px;
  padding: 13px 14px 14px !important;
  border: 0 !important;
  border-radius: 34px 10px 38px 14px / 23px 13px 31px 17px !important;
  background-color: var(--profile-v2-orange) !important;
  background-image:
    repeating-radial-gradient(
      ellipse at 115% 122%,
      transparent 0 12px,
      rgba(53, 22, 63, .15) 13px 15px
    ) !important;
  color: var(--profile-v2-ink);
  box-shadow:
    6px 6px 0 var(--profile-v2-yellow),
    10px 10px 0 var(--profile-v2-ink) !important;
  filter: none !important;
  transform: none !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 52px;
  right: -36px;
  width: 154px;
  height: 154px;
  display: block;
  border-radius: 50%;
  background: var(--profile-v2-lilac);
  box-shadow: none;
  opacity: 1;
  filter: none;
}

.profile-frame-phone .profile-editorial-v2 .profile-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 20px;
  bottom: 72px;
  width: 88px;
  height: 17px;
  display: block;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-yellow);
  opacity: .9;
  transform: rotate(-12deg);
}

.profile-editorial-v2 .profile-issue-line {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--profile-v2-ink);
  color: var(--profile-v2-ink);
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .09em;
}

.profile-editorial-v2 .profile-issue-line b {
  padding: 3px 6px 2px;
  border-radius: 999px;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-yellow);
  font-size: 7px;
  line-height: 1;
}

.profile-frame-phone .profile-editorial-v2 .profile-main {
  position: relative;
  z-index: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  padding: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-avatar {
  position: relative;
  box-sizing: border-box;
  width: 78px;
  height: 94px;
  display: block;
  overflow: hidden;
  border: 0 !important;
  border-radius: 42% 58% 45% 55% / 55% 39% 61% 45% !important;
  background: var(--profile-v2-paper) !important;
  box-shadow: 4px 4px 0 var(--profile-v2-ink) !important;
  transform: rotate(-2deg) !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-avatar::after {
  display: none !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-avatar img.profile-character-portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 17%;
  background: transparent;
  filter: none !important;
  transform: scale(1.43) translateY(11%) !important;
}

.profile-editorial-v2 .profile-copy {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-hero .eyebrow {
  display: inline-block;
  margin: 0;
  padding: 4px 7px 3px;
  border: 0;
  border-radius: 999px 62% 999px 74%;
  background: var(--profile-v2-yellow);
  color: var(--profile-v2-ink);
  font-size: 7px;
  font-weight: 950;
  line-height: 1;
  transform: rotate(-1deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-title-row {
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 8px;
}

.profile-frame-phone .profile-editorial-v2 .profile-title-row h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--profile-v2-ink);
  font-size: 27px;
  font-weight: 950;
  line-height: .9;
  letter-spacing: -.05em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-frame-phone .profile-editorial-v2 .level-chip {
  flex: 0 0 auto;
  margin-bottom: -1px;
  padding: 4px 6px 3px;
  border: 0;
  border-radius: 3px 50% 3px 50%;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-white);
  font-size: 7px;
  font-weight: 950;
  transform: rotate(2deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-title-note {
  margin: 7px 0 0;
  color: var(--profile-v2-ink);
  font-size: 10px;
  font-weight: 900;
}

.profile-frame-phone .profile-editorial-v2 .profile-edit-button {
  box-sizing: border-box;
  width: 28px;
  height: 34px;
  display: grid;
  place-items: center;
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: 52% 48% 42% 58% / 44% 56% 48% 52%;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-yellow);
  box-shadow: 3px 3px 0 var(--profile-v2-paper);
  transform: rotate(4deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-stats {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-stats::before {
  display: none;
}

.profile-frame-phone .profile-editorial-v2 .profile-stat,
.profile-frame-phone .profile-editorial-v2 .profile-stat + .profile-stat {
  position: relative;
  min-width: 0;
  padding: 9px 4px 8px;
  border: 0;
  border-radius: 11px 3px 13px 4px / 5px 12px 4px 11px;
  background: var(--profile-v2-yellow);
  color: var(--profile-v2-ink);
  text-align: center;
  transform: none;
}

.profile-frame-phone .profile-editorial-v2 .profile-stat:nth-child(2) {
  border-radius: 4px 12px 5px 13px / 12px 5px 11px 4px;
  background: var(--profile-v2-paper);
  transform: rotate(1deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-stat:nth-child(3) {
  background: var(--profile-v2-lilac-soft);
  transform: rotate(-1deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-stat + .profile-stat::before {
  display: none;
}

.profile-frame-phone .profile-editorial-v2 .profile-stat strong {
  display: block;
  color: currentColor;
  font-size: 21px;
  font-weight: 950;
  line-height: .9;
}

.profile-frame-phone .profile-editorial-v2 .profile-stat span {
  display: block;
  margin-top: 5px;
  color: currentColor;
  font-size: 7px;
  font-weight: 900;
}

.profile-editorial-v2 .profile-hero-note {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin: 10px 0 0;
  padding: 7px 9px 6px;
  border-radius: 999px 34% 999px 42%;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-white);
  font-size: 7px;
  font-weight: 850;
  line-height: 1.2;
}

.profile-editorial-v2 .profile-hero-note span {
  flex: 0 0 auto;
  color: var(--profile-v2-yellow);
  font-size: 6px;
  font-weight: 950;
  letter-spacing: .05em;
}

.profile-frame-phone .profile-editorial-v2 .profile-section {
  min-width: 0;
  margin: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-section-card,
.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(even) .profile-section-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  padding: 17px 15px 16px !important;
  border: 0 !important;
  border-radius: 12px 34px 15px 28px / 22px 13px 27px 16px !important;
  background: var(--profile-v2-paper);
  box-shadow: var(--profile-card-shadow) !important;
  filter: none;
  clip-path: none;
  transform: none !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(even) .profile-section-card {
  border-radius: 34px 12px 28px 15px / 13px 22px 16px 27px !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-card {
  background: var(--profile-v2-lilac-soft);
}

.profile-frame-phone .profile-editorial-v2 .profile-titles-section .profile-section-card {
  background: var(--profile-v2-lilac);
}

.profile-frame-phone .profile-editorial-v2 .profile-sticker-section .profile-section-card {
  background: var(--profile-v2-yellow);
}

.profile-frame-phone .profile-editorial-v2 .profile-allergy-section .profile-section-card {
  background: var(--profile-v2-orange-soft);
}

.profile-frame-phone .profile-editorial-v2 .profile-account-section .profile-section-card {
  background: var(--profile-v2-white);
}

.profile-frame-phone .profile-editorial-v2 .profile-section-card::before {
  content: "";
  position: absolute;
  top: -26px;
  right: -18px;
  width: 94px;
  height: 72px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0 7px,
      rgba(53, 22, 63, .11) 8px 9px
    );
  pointer-events: none;
  transform: rotate(9deg);
}

.profile-frame-phone .profile-editorial-v2 .profile-section-card .section-title {
  position: relative;
  z-index: 2;
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-section-card .section-title::after {
  display: none;
}

.profile-frame-phone .profile-editorial-v2 .section-title-icon,
.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(3n + 1) .section-title-icon,
.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(3n + 2) .section-title-icon,
.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(3n) .section-title-icon {
  box-sizing: border-box;
  width: 36px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 46% 54% 43% 57% / 58% 42% 55% 45% !important;
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-yellow) !important;
  box-shadow: 3px 3px 0 var(--profile-v2-orange) !important;
  transform: rotate(-3deg) !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-section:nth-of-type(even) .section-title-icon {
  background: var(--profile-v2-orange) !important;
  color: var(--profile-v2-ink) !important;
  box-shadow: 3px 3px 0 var(--profile-v2-ink) !important;
  transform: rotate(3deg) !important;
}

.profile-frame-phone .profile-editorial-v2 .section-title-icon .profile-icon-svg,
.profile-frame-phone .profile-editorial-v2 .section-title-icon .profile-icon-svg * {
  color: currentColor !important;
  stroke: currentColor !important;
}

.profile-frame-phone .profile-editorial-v2 .section-title h3 {
  margin: 0;
  color: var(--profile-v2-ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.035em;
}

.profile-frame-phone .profile-editorial-v2 .section-title p {
  margin: 4px 0 0;
  color: rgba(53, 22, 63, .68);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.35;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats span,
.profile-frame-phone .profile-editorial-v2 .profile-social-stats span + span {
  min-width: 0;
  padding: 9px 3px 8px;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-white);
  text-align: center;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats span:nth-child(2) {
  background: var(--profile-v2-yellow);
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats span:nth-child(3) {
  background: var(--profile-v2-orange-soft);
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats b {
  display: block;
  color: var(--profile-v2-ink);
  font-size: 20px;
  font-weight: 950;
  line-height: .9;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-stats small {
  display: block;
  margin-top: 4px;
  color: var(--profile-v2-ink);
  font-size: 7px;
  font-weight: 900;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-link {
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 13px;
  border: 0;
  border-radius: 999px 35% 999px 42%;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-white);
  box-shadow: none;
  font-size: 10px;
  font-weight: 900;
  transform: none;
}

.profile-frame-phone .profile-editorial-v2 .profile-social-link .profile-icon-svg {
  color: var(--profile-v2-yellow);
}

.profile-frame-phone .profile-editorial-v2 .badge-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.profile-frame-phone .profile-editorial-v2 .badge-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  justify-items: start;
  padding: 8px;
  border: 0;
  border-radius: 50px 16px 50px 18px;
  background: rgba(255, 250, 241, .68);
  color: rgba(53, 22, 63, .55);
  text-align: left;
  transform: none !important;
}

.profile-frame-phone .profile-editorial-v2 .badge-item:nth-child(even) {
  border-radius: 16px 50px 18px 50px;
}

.profile-frame-phone .profile-editorial-v2 .badge-item.earned {
  background: var(--profile-v2-yellow);
  color: var(--profile-v2-ink);
}

.profile-frame-phone .profile-editorial-v2 .badge-symbol {
  position: relative;
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-white);
  filter: grayscale(1);
  opacity: .38;
}

.profile-frame-phone .profile-editorial-v2 .badge-item.earned .badge-symbol {
  filter: none;
  opacity: 1;
}

.profile-frame-phone .profile-editorial-v2 .badge-symbol img {
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.profile-frame-phone .profile-editorial-v2 .badge-symbol i {
  right: -2px;
  bottom: -2px;
  border: 0;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-white);
}

.profile-frame-phone .profile-editorial-v2 .badge-item > span:last-child {
  color: currentColor;
  font-size: 8px;
  font-weight: 950;
  line-height: 1.3;
}

.profile-frame-phone .profile-editorial-v2 .sticker-board {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 11px !important;
  border-radius: 24px 8px 22px 10px / 10px 22px 9px 24px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 250, 241, .08) 0 2px,
      transparent 2px 10px
    ),
    var(--profile-v2-ink);
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  height: auto !important;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-white);
  color: var(--profile-v2-ink);
  box-shadow: none;
  transform: none !important;
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell:nth-child(3n) {
  border-radius: 34% 66% 45% 55% / 62% 38% 58% 42%;
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell.locked {
  background: rgba(255, 250, 241, .18);
  color: rgba(255, 250, 241, .5);
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell img {
  filter: none;
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell.locked img {
  opacity: .08;
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell > span {
  border: 0;
  background: var(--profile-v2-orange);
  color: var(--profile-v2-white);
}

.profile-frame-phone .profile-editorial-v2 .sticker-cell.locked > span {
  border: 0;
  background: transparent;
  color: rgba(255, 250, 241, .46);
}

.profile-frame-phone .profile-editorial-v2 .sticker-detail {
  position: relative;
  z-index: 2;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  margin-top: 9px;
  padding: 9px;
  border: 0;
  border-radius: 999px 18px 999px 20px;
  background: var(--profile-v2-white);
}

.profile-frame-phone .profile-editorial-v2 .allergy-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.profile-frame-phone .profile-editorial-v2 .allergy-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border: 1px solid rgba(53, 22, 63, .2) !important;
  border-radius: 999px !important;
  background: rgba(255, 250, 241, .72);
  color: var(--profile-v2-ink);
  box-shadow: none !important;
  font-size: 9px;
  font-weight: 900;
}

.profile-frame-phone .profile-editorial-v2 .allergy-item.active {
  border-color: var(--profile-v2-ink) !important;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-yellow);
}

.profile-frame-phone .profile-editorial-v2 .allergy-check {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-white);
  color: transparent;
}

.profile-frame-phone .profile-editorial-v2 .allergy-item.active .allergy-check {
  border: 0;
  background: var(--profile-v2-yellow);
  color: var(--profile-v2-ink);
}

.profile-frame-phone .profile-editorial-v2 .allergy-add {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 7px;
  margin-top: 9px;
}

.profile-frame-phone .profile-editorial-v2 .allergy-add input {
  box-sizing: border-box;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-v2-white);
  color: var(--profile-v2-ink);
  font-size: 9px;
  box-shadow: inset 0 0 0 1px rgba(53, 22, 63, .14);
}

.profile-frame-phone .profile-editorial-v2 .allergy-add .secondary {
  height: 40px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--profile-v2-yellow);
  color: var(--profile-v2-ink);
  box-shadow: 3px 3px 0 var(--profile-v2-ink);
  font-size: 9px;
  font-weight: 950;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  margin: 0;
  border: 0;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-row,
.profile-frame-phone .profile-editorial-v2 .profile-setting-row:first-child {
  box-sizing: border-box;
  min-height: 50px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 9px;
  align-items: center;
  padding: 5px 10px;
  border: 0;
  border-radius: 999px 16px 999px 18px;
  background: var(--profile-v2-lilac-soft);
  color: var(--profile-v2-ink);
  font-size: 9px;
  font-weight: 900;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-row:nth-child(even) {
  border-radius: 16px 999px 18px 999px;
  background: var(--profile-v2-paper);
}

.profile-frame-phone .profile-editorial-v2 .setting-row-icon,
.profile-frame-phone .profile-editorial-v2 .profile-setting-row:first-child .setting-row-icon,
.profile-frame-phone .profile-editorial-v2 .profile-setting-danger .setting-row-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-v2-orange) !important;
  color: var(--profile-v2-white) !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-row:first-child .setting-row-icon {
  background: var(--profile-v2-yellow) !important;
  color: var(--profile-v2-ink) !important;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-danger {
  color: #a33b35;
}

.profile-frame-phone .profile-editorial-v2 .profile-setting-row > .profile-icon-svg {
  justify-self: end;
  color: var(--profile-v2-ink);
}

.profile-frame-phone .profile-editorial-v2 .profile-account-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-top: 11px;
  padding: 10px 2px 0;
  border-top: 2px solid var(--profile-v2-lilac);
  color: rgba(53, 22, 63, .62);
  font-size: 7px;
}

.profile-frame-phone .profile-editorial-v2 .profile-account-foot button {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-v2-ink);
  color: var(--profile-v2-yellow);
  font-size: 8px;
  font-weight: 900;
}

.profile-frame-phone .profile-editorial-v2 .skip-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  margin: 0;
}

.profile-frame-phone .profile-editorial-v2 .skip-row {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 31px minmax(0, 1fr) 17px;
  gap: 8px;
  padding: 5px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-v2-lilac-soft);
  color: var(--profile-v2-ink);
  box-shadow: none !important;
}

.profile-frame-phone .profile-editorial-v2 .skip-index {
  border-radius: 50%;
  background: var(--profile-v2-orange);
  color: var(--profile-v2-white);
}

@media (max-width: 390px) {
  .profile-frame-phone.profile-mono-preview .content {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }

  .profile-frame-phone.profile-mono-preview .tabs {
    padding-right: 20px;
    padding-left: 20px;
  }

  .profile-frame-phone .profile-editorial-v2 .profile-main {
    grid-template-columns: 72px minmax(0, 1fr) 26px;
    gap: 8px;
  }

  .profile-frame-phone .profile-editorial-v2 .profile-avatar {
    width: 70px;
    height: 88px;
  }

  .profile-frame-phone .profile-editorial-v2 .profile-title-row h2 {
    font-size: 24px;
  }

  .profile-editorial-v2 .profile-hero-note {
    display: block;
    text-align: center;
  }

  .profile-editorial-v2 .profile-hero-note span {
    display: block;
    margin-bottom: 3px;
  }

  .profile-frame-phone .profile-editorial-v2 .badge-list {
    grid-template-columns: 1fr;
  }

  .profile-frame-phone .profile-editorial-v2 .sticker-board {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

/* Login issue: a single editorial page inspired by 1990s activity magazines. */
.reference-login-shell {
  min-height: 100dvh;
  align-items: start;
  padding: 18px;
  overflow: auto;
  background-color: #f5e74f;
  background-image:
    radial-gradient(circle, rgba(229, 73, 58, .5) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(23, 133, 165, .38) 0 1px, transparent 1.5px),
    url("./assets/paper-grain.svg");
  background-position: 8px 10px, 26px 28px, center;
  background-size: 36px 36px, 42px 42px, 360px 360px;
  color: #211e20;
}

.reference-login-page {
  position: relative;
  width: min(100%, 760px);
  min-height: 0;
  margin: auto;
  overflow: hidden;
  border: 2px solid #272225;
  border-radius: 6px;
  background-color: #fffdf2;
  background-image: url("./assets/paper-grain.svg");
  box-shadow: 8px 8px 0 rgba(39, 34, 37, .9);
}

.reference-login-page::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 9px;
  border: 1px solid rgba(39, 34, 37, .24);
  pointer-events: none;
}

.reference-login-masthead,
.reference-login-layout,
.reference-login-footer {
  position: relative;
  z-index: 1;
}

.reference-login-masthead {
  padding: 18px 24px 16px;
  border-bottom: 2px solid #272225;
}

.reference-login-fileline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 7px;
  border-bottom: 1px solid #272225;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}

.reference-login-fileline strong {
  font-family: "Bap Gowun", serif;
  font-size: 22px;
  font-weight: 700;
}

.reference-login-fileline span {
  color: #167b9e;
}

.reference-login-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 9px;
}

.reference-login-title-row > div {
  min-width: 0;
}

.reference-login-title-row p {
  margin: 0 0 3px;
  color: #d94b42;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.reference-login-title-row h1 {
  margin: 0;
  color: #272225;
  font-family: "Bap Gaegu", "Bap Jua", sans-serif;
  font-size: 63px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: 0;
  white-space: nowrap;
}

.reference-login-title-row h1 span {
  display: inline-block;
  -webkit-text-stroke: 1px #272225;
  paint-order: stroke fill;
  text-shadow: 2px 2px 0 rgba(39, 34, 37, .2);
}

.reference-login-title-row h1 span:nth-child(1),
.reference-login-title-row h1 span:nth-child(5) { color: #1685aa; transform: rotate(-3deg); }
.reference-login-title-row h1 span:nth-child(2),
.reference-login-title-row h1 span:nth-child(7) { color: #e95b9c; transform: rotate(2deg); }
.reference-login-title-row h1 span:nth-child(3) { color: #f0a948; transform: translateY(-2px) rotate(-1deg); }
.reference-login-title-row h1 span:nth-child(4) { color: #63a955; transform: rotate(3deg); }
.reference-login-title-row h1 span:nth-child(6) { color: #df4b3f; transform: rotate(-2deg); }

.reference-login-badge {
  flex: 0 0 104px;
  width: 104px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 9px;
  border: 2px solid #272225;
  border-radius: 50%;
  background: #f4a9c8;
  color: #272225;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  transform: rotate(4deg);
  box-shadow: 3px 3px 0 #272225;
}

.reference-login-deck {
  margin: 8px 0 0;
  color: #393236;
  font-family: "Bap Gowun", serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.reference-login-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(340px, 1.18fr);
  gap: 26px;
  padding: 22px 24px 24px;
}

.reference-login-story {
  min-width: 0;
  align-self: start;
}

.reference-login-art {
  position: relative;
  width: 91%;
  aspect-ratio: 4 / 5;
  margin: 5px auto 0;
  padding: 8px;
  border: 2px solid #272225;
  background: #20a5c2;
  box-shadow: 6px 6px 0 #f2cf3d;
  transform: rotate(-2deg);
}

.reference-login-art::before,
.reference-login-art::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 42px;
  height: 13px;
  background: rgba(255, 252, 228, .78);
  box-shadow: 0 0 0 1px rgba(39, 34, 37, .12);
}

.reference-login-art::before {
  top: -8px;
  left: -13px;
  transform: rotate(-35deg);
}

.reference-login-art::after {
  right: -13px;
  bottom: -7px;
  transform: rotate(-32deg);
}

.reference-login-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 39%;
  border: 1px solid #272225;
  filter: saturate(1.08) contrast(1.02);
}

.reference-login-story-copy {
  margin-top: 20px;
  padding-top: 10px;
  border-top: 2px solid #272225;
}

.reference-login-story-copy > span {
  color: #db5046;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
}

.reference-login-story-copy h2 {
  margin: 4px 0 0;
  color: #167b9e;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
}

.reference-login-story-copy p {
  margin: 8px 0 0;
  color: #393236;
  font-family: "Bap Gowun", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.reference-login-story-copy strong {
  display: block;
  margin-top: 8px;
  color: #272225;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 16px;
  line-height: 1;
  transform: rotate(-2deg);
}

.reference-login-entry {
  position: relative;
  min-width: 0;
  padding: 22px 22px 18px;
  border: 5px solid transparent;
  background:
    linear-gradient(#fffdf2, #fffdf2) padding-box,
    repeating-linear-gradient(135deg, #e25045 0 8px, #fffdf2 8px 14px) border-box;
}

.reference-login-entry-tab {
  position: absolute;
  top: -14px;
  right: 14px;
  padding: 5px 9px 4px;
  border: 1px solid #272225;
  background: #f2d840;
  color: #272225;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(1.5deg);
}

.reference-login-entry > header > span {
  color: #df5147;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.reference-login-entry > header h2 {
  margin: 5px 0 0;
  color: #272225;
  font-family: "Bap Jua", sans-serif;
  font-size: 29px;
  font-weight: 400;
  line-height: 1;
}

.reference-login-entry > header p {
  margin: 8px 0 0;
  color: #5e5358;
  font-family: "Bap Gowun", serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.reference-login-form {
  gap: 13px;
  margin-top: 19px;
}

.reference-login-form label {
  gap: 6px;
  color: #272225;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.reference-login-form label > span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.reference-login-form label b {
  min-width: 25px;
  padding: 3px 4px 2px;
  background: #eaa1c0;
  color: #272225;
  font-family: "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  transform: rotate(-2deg);
}

.reference-login-form input {
  height: 45px;
  padding: 0 11px;
  border: 2px solid #272225;
  border-radius: 3px;
  background: #fff8bf;
  color: #272225;
  font-family: "SUIT", sans-serif;
  font-size: 14px;
  box-shadow: inset 0 -3px 0 rgba(242, 216, 64, .48);
}

.reference-login-form input::placeholder {
  color: #827579;
}

.reference-login-form input:focus {
  outline: 3px solid rgba(31, 160, 188, .34);
  outline-offset: 1px;
}

.reference-login-form .login-error,
.reference-login-form .login-notice {
  margin: -2px 0 0;
  padding: 6px 7px;
  border-left: 3px solid currentColor;
  background: #fffdf2;
  font-family: "SUIT", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.reference-login-form .auth-primary {
  min-height: 48px;
  margin-top: 3px;
  padding: 0 13px;
  border: 2px solid #272225;
  border-radius: 3px;
  background: #168db0;
  color: #fffdf2;
  font-family: "Bap Jua", sans-serif;
  font-size: 16px;
  box-shadow: 4px 4px 0 #f2d840;
}

.reference-login-form .auth-primary:hover {
  background: #e45147;
}

.reference-login-form .auth-primary:active {
  box-shadow: 2px 2px 0 #f2d840;
  transform: translate(2px, 2px);
}

.reference-social-login {
  gap: 8px;
  margin-top: 16px;
  color: #62565b;
  font-family: "Bap Gowun", serif;
  font-size: 9px;
  font-weight: 700;
}

.reference-social-login > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.reference-social-login > span::before,
.reference-social-login > span::after {
  content: "";
  flex: 1;
  border-top: 1px dotted #756a6e;
}

.reference-social-login > div {
  gap: 9px;
}

.reference-social-login .social-icon-button {
  width: 34px;
  height: 34px;
  border: 1px solid #272225;
  border-radius: 50%;
  background: #fffdf2;
  box-shadow: 2px 2px 0 rgba(39, 34, 37, .18);
}

.reference-social-login .social-icon-button img {
  width: 30px;
  height: 30px;
}

.reference-social-login .google-icon-button svg {
  width: 18px;
  height: 18px;
}

.reference-login-links {
  flex-wrap: wrap;
  gap: 7px 13px;
  margin-top: 14px;
}

.reference-login-links .auth-text-button {
  margin: 0;
  padding: 0;
  color: #272225;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration-color: #df5147;
  text-decoration-thickness: 2px;
}

.reference-login-footer {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 30px;
  padding: 0 16px;
  border-top: 2px solid #272225;
  background: #fffdf2;
  color: #272225;
  font-family: "SUIT", sans-serif;
  font-size: 7px;
  line-height: 1;
}

.reference-login-footer span:first-child {
  color: #df5147;
  font-family: "Bap Gowun", serif;
  font-size: 12px;
  font-weight: 700;
}

.reference-login-footer b {
  color: #1685aa;
  font-weight: 900;
}

@media (max-width: 640px) {
  .reference-login-shell {
    display: grid;
    place-items: center;
    padding: 10px;
  }

  .reference-login-page {
    width: 100%;
    min-height: 0;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 4px 4px 0 rgba(39, 34, 37, .9);
  }

  .reference-login-masthead {
    padding: 13px 15px 12px;
  }

  .reference-login-fileline {
    padding-bottom: 5px;
  }

  .reference-login-fileline strong {
    font-size: 18px;
  }

  .reference-login-title-row {
    gap: 9px;
    margin-top: 7px;
  }

  .reference-login-title-row h1 {
    font-size: 47px;
  }

  .reference-login-badge {
    flex-basis: 72px;
    width: 72px;
    height: 58px;
    padding: 6px;
    font-size: 12px;
    box-shadow: 2px 2px 0 #272225;
  }

  .reference-login-deck {
    margin-top: 6px;
    font-size: 11px;
  }

  .reference-login-layout {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 14px;
    padding: 19px 14px 18px;
  }

  .reference-login-art {
    width: 100%;
    padding: 5px;
    box-shadow: 4px 4px 0 #f2cf3d;
  }

  .reference-login-story-copy {
    margin-top: 16px;
    padding-top: 8px;
  }

  .reference-login-story-copy h2 {
    font-size: 20px;
  }

  .reference-login-story-copy p {
    font-size: 10px;
    line-height: 1.45;
  }

  .reference-login-entry {
    padding: 17px 13px 14px;
  }

  .reference-login-entry > header h2 {
    font-size: 24px;
  }

  .reference-login-form {
    margin-top: 14px;
  }

  .reference-login-form label {
    font-size: 14px;
  }

  .reference-login-form input {
    height: 42px;
    font-size: 13px;
  }

  .reference-login-form .auth-primary {
    min-height: 44px;
    font-size: 14px;
  }

  .reference-login-links {
    gap: 5px 10px;
  }

  .reference-login-links .auth-text-button {
    font-size: 12px;
  }
}

@media (max-width: 370px) {
  .reference-login-title-row h1 {
    font-size: 41px;
  }

  .reference-login-badge {
    display: none;
  }

  .reference-login-layout {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    padding-inline: 10px;
  }

  .reference-login-story-copy h2 {
    font-size: 17px;
  }

  .reference-login-story-copy p {
    font-size: 9px;
  }

  .reference-login-entry {
    padding-inline: 10px;
  }
}

/* Login v2: keep the entire magazine frame inside the phone canvas. */
.reference-login-shell {
  display: grid;
  place-items: center;
  padding: 0;
  background-color: #f3efe3;
  background-image: url("./assets/paper-grain.svg");
  background-position: center;
  background-size: 360px 360px;
}

.reference-login-page {
  width: min(100%, 430px);
  min-height: 100dvh;
  margin: 0;
  padding: 8px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: #f5e74f;
  background-image:
    radial-gradient(circle, rgba(222, 74, 61, .48) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(22, 126, 157, .38) 0 1px, transparent 1.4px),
    url("./assets/paper-grain.svg");
  background-position: 6px 8px, 23px 25px, center;
  background-size: 34px 34px, 39px 39px, 320px 320px;
  box-shadow: none;
}

.reference-login-page::before {
  display: none;
}

.reference-login-sheet {
  position: relative;
  min-height: calc(100dvh - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 2px solid #272225;
  border-radius: 3px;
  background-color: #fffdf2;
  background-image: url("./assets/paper-grain.svg");
  box-shadow: 3px 3px 0 rgba(39, 34, 37, .88);
}

.reference-login-sheet::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 7px;
  border: 1px solid rgba(39, 34, 37, .18);
  pointer-events: none;
}

.reference-login-masthead,
.reference-login-layout,
.reference-login-footer {
  position: relative;
  z-index: 1;
}

.reference-login-masthead {
  padding: 12px 14px 11px;
}

.reference-login-fileline {
  gap: 10px;
  padding-bottom: 5px;
}

.reference-login-fileline strong {
  font-size: 18px;
}

.reference-login-fileline span {
  font-size: 7px;
}

.reference-login-title-row {
  gap: 9px;
  margin-top: 7px;
}

.reference-login-title-row h1 {
  font-size: 48px;
}

.reference-login-badge {
  flex: 0 0 74px;
  width: 74px;
  height: 57px;
  padding: 6px;
  font-size: 12px;
  box-shadow: 2px 2px 0 #272225;
}

.reference-login-deck {
  margin-top: 5px;
  font-size: 11px;
}

.reference-login-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px 12px;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 31px,
    rgba(39, 34, 37, .035) 31px 32px
  );
}

.reference-login-entry {
  width: 100%;
  padding: 17px 17px 14px;
  border-width: 4px;
}

.reference-login-entry-tab {
  top: -12px;
  right: 12px;
}

.reference-login-entry > header h2 {
  font-size: 27px;
}

.reference-login-form {
  gap: 11px;
  margin-top: 14px;
}

.reference-login-form label {
  font-size: 15px;
}

.reference-login-form input {
  height: 44px;
  font-size: 14px;
}

.reference-login-form .auth-primary {
  min-height: 46px;
  font-size: 15px;
}

.reference-social-login {
  margin-top: 14px;
}

.reference-login-links {
  margin-top: 12px;
}

.reference-login-journal {
  flex: 1;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(30px, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border: 1px solid rgba(39, 34, 37, .42);
  background: rgba(255, 248, 191, .78);
  transform: rotate(-.4deg);
}

.reference-login-journal > span {
  padding: 4px 5px 3px;
  background: #eaa1c0;
  color: #272225;
  font-family: "SUIT", sans-serif;
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}

.reference-login-journal > div {
  display: grid;
  gap: 7px;
}

.reference-login-journal i {
  display: block;
  border-top: 1px dotted rgba(39, 34, 37, .46);
}

.reference-login-journal b {
  color: #167b9e;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 15px;
  line-height: 1;
  transform: rotate(2deg);
}

.reference-login-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 10px;
  border-top: 2px solid #272225;
  background: rgba(255, 253, 242, .84);
}

.reference-login-notes article {
  min-width: 0;
  padding: 0 10px 2px;
}

.reference-login-notes article:first-child {
  padding-left: 0;
}

.reference-login-notes article + article {
  border-left: 2px dotted rgba(39, 34, 37, .62);
}

.reference-login-notes span {
  color: #df5147;
  font-family: "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.reference-login-notes strong {
  display: block;
  margin-top: 4px;
  color: #167b9e;
  font-family: "Bap Gaegu", sans-serif;
  font-size: 17px;
  line-height: 1.05;
}

.reference-login-notes p {
  margin: 5px 0 0;
  color: #4f4649;
  font-family: "Bap Gowun", serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.4;
}

.reference-login-footer {
  flex: 0 0 28px;
  min-height: 28px;
}

@media (min-width: 641px) {
  .reference-login-page {
    min-height: min(872px, calc(100dvh - 28px));
  }

  .reference-login-sheet {
    min-height: calc(min(872px, 100dvh - 28px) - 16px);
  }
}

@media (max-width: 370px) {
  .reference-login-page {
    padding: 6px;
  }

  .reference-login-sheet {
    min-height: calc(100dvh - 12px);
  }

  .reference-login-masthead {
    padding-inline: 11px;
  }

  .reference-login-fileline span {
    display: none;
  }

  .reference-login-title-row h1 {
    font-size: 41px;
  }

  .reference-login-badge {
    display: grid;
    flex-basis: 66px;
    width: 66px;
    height: 52px;
    font-size: 11px;
  }

  .reference-login-layout {
    padding-inline: 10px;
  }

  .reference-login-entry {
    padding-inline: 12px;
  }

  .reference-login-notes strong {
    font-size: 15px;
  }
}

/* Auth frame v3: approved hand-drawn wavy paper and dot border artwork. */
.reference-login-page {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  min-height: 100dvh;
  padding: 42px 28px 34px;
  overflow: hidden;
  background: #fffdf7 url("./assets/ui/auth-handdrawn-frame-v1.webp") center / 100% 100% no-repeat;
}

.reference-login-sheet {
  min-width: 0;
  min-height: calc(100dvh - 76px);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.reference-login-sheet::before {
  display: none;
}

.reference-signup-shell {
  min-height: 100dvh;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 0;
  overflow: auto;
  background-color: #f3efe3;
  background-image: url("./assets/paper-grain.svg");
  background-position: center;
  background-size: 360px 360px;
}

.reference-signup-page {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  min-height: 100dvh;
  justify-content: center;
  padding: 50px 40px 46px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fffdf7 url("./assets/ui/auth-handdrawn-frame-v1.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}

.reference-signup-page .auth-brand {
  margin-bottom: 20px;
}

.reference-signup-page .auth-copy h1 {
  font-size: 32px;
}

.reference-signup-page .auth-copy p {
  margin-top: 10px;
}

.reference-signup-page .login-form {
  gap: 10px;
  margin-top: 20px;
}

.reference-signup-page .login-form label {
  gap: 5px;
}

.reference-signup-page .login-form input {
  height: 43px;
}

.reference-signup-page .login-form .auth-primary {
  min-height: 48px;
  margin-top: 5px;
}

.reference-signup-page .social-login {
  margin-top: 14px;
}

.reference-signup-page .auth-switch {
  flex-wrap: wrap;
  gap: 8px 14px;
}

.reference-signup-page .auth-switch .auth-text-button {
  margin-top: 13px;
}

@media (min-width: 641px) {
  .reference-login-page,
  .reference-signup-page {
    min-height: min(900px, calc(100dvh - 20px));
  }

  .reference-login-sheet {
    min-height: calc(min(900px, 100dvh - 20px) - 76px);
  }
}

@media (max-width: 370px) {
  .reference-login-page {
    padding: 36px 23px 29px;
  }

  .reference-login-sheet {
    min-height: calc(100dvh - 65px);
  }

  .reference-signup-page {
    padding: 42px 31px 38px;
  }
}

/* Clean login content for the approved hand-drawn auth frame. */
.clean-login-content {
  min-height: calc(100dvh - 76px);
  display: flex;
  flex-direction: column;
  padding: 24px 28px 30px;
  color: #292929;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.clean-login-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(18px, calc(50dvh - 350px), 100px);
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(41, 41, 41, .45);
}

.clean-login-brand span {
  display: block;
  color: #686868;
  font-family: "Pretendard", sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.clean-login-brand strong {
  display: block;
  margin-top: 4px;
  font-family: "Pretendard", sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
}

.clean-login-brand strong i {
  color: #e35678;
  font-style: normal;
}

.clean-login-issue {
  flex: 0 0 auto;
  padding: 5px 7px 4px;
  border: 1px solid #292929;
  background: #bfe7ea;
  color: #292929;
  font-family: "Pretendard", sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  transform: rotate(1.5deg);
}

.clean-login-intro {
  margin-top: 24px;
}

.clean-login-intro > span {
  display: block;
  color: #d94f70;
  font-family: "Pretendard", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.clean-login-intro h1 {
  margin: 6px 0 0;
  color: #292929;
  font-family: "Pretendard", sans-serif;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
}

.clean-login-intro p {
  margin: 11px 0 0;
  color: #626262;
  font-family: "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.55;
}

.clean-login-body {
  margin-top: 23px;
}

.clean-login-panel {
  min-width: 0;
}

.clean-login-form-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px dotted rgba(41, 41, 41, .62);
}

.clean-login-form-heading span {
  flex: 0 0 auto;
  color: #347f91;
  font-family: "Pretendard", sans-serif;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.clean-login-form-heading p {
  margin: 0;
  color: #737373;
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

.clean-login-form {
  gap: 12px;
  margin-top: 14px;
}

.clean-login-form label {
  gap: 5px;
  color: #292929;
  font-family: "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.clean-login-form label > span {
  display: block;
}

.clean-login-form input {
  height: 46px;
  padding: 0 12px;
  border: 1px solid #292929;
  border-radius: 4px;
  background: rgba(255, 255, 255, .72);
  color: #292929;
  font-family: "Pretendard", sans-serif;
  font-size: 14px;
  box-shadow: none;
}

.clean-login-form input::placeholder {
  color: #9a8f93;
}

.clean-login-form input:focus {
  outline: 3px solid rgba(244, 216, 94, .48);
  outline-offset: 1px;
}

.clean-login-form .clean-login-remember {
  width: fit-content;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: #4f4f4f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.clean-login-form .clean-login-remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.clean-login-remember-box {
  width: 18px;
  height: 18px;
  display: grid !important;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #292929;
  border-radius: 3px;
  background: rgba(255, 255, 255, .72);
  box-shadow: none;
}

.clean-login-remember-box::after {
  content: "";
  width: 5px;
  height: 9px;
  margin-top: -2px;
  border-right: 2px solid #292929;
  border-bottom: 2px solid #292929;
  opacity: 0;
  transform: rotate(45deg) scale(.7);
}

.clean-login-remember input:checked + .clean-login-remember-box {
  background: #f4d85e;
  box-shadow: 2px 2px 0 rgba(52, 127, 145, .24);
}

.clean-login-remember input:checked + .clean-login-remember-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.clean-login-remember input:focus-visible + .clean-login-remember-box {
  outline: 3px solid rgba(52, 127, 145, .3);
  outline-offset: 2px;
}

.clean-login-form .login-error,
.clean-login-form .login-notice {
  margin: -1px 0 0;
  padding: 6px 8px;
  border-left: 3px solid currentColor;
  background: rgba(255, 255, 255, .72);
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 700;
}

.clean-login-form .auth-primary {
  min-height: 49px;
  margin-top: 3px;
  padding: 0 14px;
  border: 1px solid #292929;
  border-radius: 4px;
  background: #f4d85e !important;
  color: #292929;
  font-family: "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none !important;
}

.clean-login-form .auth-primary:hover {
  background: #edca3f !important;
}

.clean-login-form .auth-primary:active {
  background: #e4bf2f !important;
  transform: translateY(1px);
}

.clean-social-login {
  gap: 8px;
  margin-top: 18px;
  color: #777;
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 700;
}

.clean-social-login > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.clean-social-login > span::before,
.clean-social-login > span::after {
  content: "";
  flex: 1;
  border-top: 1px dotted rgba(41, 41, 41, .5);
}

.clean-social-login > div {
  gap: 10px;
}

.clean-social-login .social-icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.clean-social-login .social-icon-button img {
  width: 30px;
  height: 30px;
}

.clean-social-login .google-icon-button svg {
  width: 18px;
  height: 18px;
}

.clean-social-login .google-icon-button {
  background: transparent;
}

.clean-social-login .social-icon-button img,
.clean-social-login .social-icon-button svg {
  filter: none;
}

.clean-login-links {
  flex-wrap: wrap;
  gap: 7px 14px;
  margin-top: 12px;
}

.clean-login-links .auth-text-button {
  margin: 0;
  padding: 0;
  color: #4f4f4f;
  font-family: "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}

.clean-login-footer {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  padding-top: 19px;
}

.clean-login-footer span {
  flex: 1;
  border-top: 1px dotted rgba(41, 41, 41, .45);
}

.clean-login-footer p {
  margin: 0;
  color: #347f91;
  font-family: "Pretendard", sans-serif;
  font-size: 7px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

@media (min-width: 641px) {
  .clean-login-content {
    min-height: calc(min(900px, 100dvh - 20px) - 76px);
  }
}

@media (max-width: 370px) {
  .clean-login-content {
    min-height: calc(100dvh - 65px);
    padding: 28px 24px 30px;
  }

  .clean-login-intro {
    margin-top: 20px;
  }

  .clean-login-intro h1 {
    font-size: 32px;
  }

  .clean-login-body {
    margin-top: 19px;
  }
}

/* Home-only full-bleed checker frame. */
.home-frame-phone {
  grid-template-rows:
    calc(104px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(104px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background-color: #fffdf7;
  background-image: url("./assets/ui/home-check-frame-v1.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-frame-phone .top {
  padding: calc(34px + env(safe-area-inset-top)) 36px 10px;
  border-bottom: 0;
  background: transparent;
}

.home-frame-phone .content {
  padding: 14px 36px 30px;
  background-color: transparent;
  background-image: none;
}

.home-frame-phone .home-cover-cta small {
  min-width: 0;
  overflow: visible;
  font-size: 12px;
  line-height: 1.18;
  text-overflow: clip;
  white-space: normal;
}

.home-frame-phone .tabs {
  padding: 8px 34px calc(34px + env(safe-area-inset-bottom));
  background: transparent;
  box-shadow: none !important;
}

.home-frame-phone .tabs::before {
  right: 36px;
  left: 36px;
  width: auto;
}

@media (max-width: 370px) {
  .home-frame-phone .top {
    padding-right: 32px;
    padding-left: 32px;
  }

  .home-frame-phone .content {
    padding-right: 32px;
    padding-left: 32px;
  }

  .home-frame-phone .home-cover-cta small {
    font-size: 11px;
  }

  .home-frame-phone .tabs {
    padding-right: 30px;
    padding-left: 30px;
  }

  .home-frame-phone .tabs::before {
    right: 32px;
    left: 32px;
  }
}

/* Restrained home palette: navy, butter yellow, and muted green. */
.home-frame-phone {
  --home-navy: #26384d;
  --home-navy-soft: rgba(38, 56, 77, .62);
  --home-line: rgba(38, 56, 77, .38);
  --home-yellow: #f2d667;
  --home-yellow-soft: #fff4bd;
  --home-green: #89a77f;
  --home-green-deep: #597653;
  --home-green-soft: #e5eddd;
  --home-paper: #fffdf6;
}

.home-frame-phone .top,
.home-frame-phone .home-screen-v11,
.home-frame-phone .tabs,
.home-frame-phone button {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.home-frame-phone .brand-copy span {
  color: var(--home-navy-soft);
  font-size: 9px;
  font-weight: 600;
}

.home-frame-phone .brand h1 {
  color: var(--home-navy);
  font-size: 20px;
  font-weight: 800;
}

.home-frame-phone .top .mark {
  border: 1px solid var(--home-navy);
  border-radius: 3px;
  background: var(--home-yellow-soft);
  box-shadow: none;
}

.home-frame-phone .header-logo-book,
.home-frame-phone .header-logo-rice {
  fill: var(--home-paper);
  stroke: var(--home-navy);
}

.home-frame-phone .header-logo-bowl {
  fill: var(--home-yellow);
  stroke: var(--home-navy);
}

.home-frame-phone .header-logo-bookmark,
.home-frame-phone .header-logo-leaf {
  fill: var(--home-green);
}

.home-frame-phone .header-logo-spine,
.home-frame-phone .header-logo-stem,
.home-frame-phone .header-logo-smile {
  stroke: var(--home-navy);
}

.home-frame-phone .header-profile-button {
  border-color: var(--home-line);
  background: var(--home-green-soft);
  color: var(--home-navy);
  transform: none;
}

.home-frame-phone .header-profile-button > img {
  transform: none;
}

.home-frame-phone .header-profile-button > span {
  border-color: var(--home-navy);
  background: var(--home-yellow);
  color: var(--home-navy);
}

.home-frame-phone .home-screen-v11 {
  padding: 0 0 24px;
  color: var(--home-navy);
}

.home-frame-phone .home-screen-v11 .home-cover-cute {
  min-height: 306px;
  margin: 0;
  border: 1.5px solid var(--home-navy) !important;
  border-radius: 4px;
  background-color: var(--home-yellow-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none;
}

.home-frame-phone .home-cover-cute::before,
.home-frame-phone .home-cover-cute::after,
.home-frame-phone .home-cover-number,
.home-frame-phone .home-cover-side,
.home-frame-phone .home-cover-charms,
.home-frame-phone .home-cover-art em {
  display: none !important;
}

.home-frame-phone .home-cover-meta {
  top: 14px;
  right: 15px;
  left: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--home-line);
  color: var(--home-navy-soft);
  font-family: "Pretendard", sans-serif;
  font-size: 8px;
  font-weight: 700;
}

.home-frame-phone .home-cover-meta b {
  padding: 3px 6px;
  border: 1px solid var(--home-line);
  border-radius: 2px;
  background: var(--home-green-soft);
  color: var(--home-green-deep);
  transform: none;
}

.home-frame-phone .home-cover-copy {
  top: 55px;
  left: 15px;
  width: 56%;
}

.home-frame-phone .home-cover-label {
  padding: 4px 6px;
  border: 0;
  border-radius: 2px;
  background: var(--home-green);
  color: #fff;
  box-shadow: none;
  font-family: "Pretendard", sans-serif;
  font-size: 8px;
  font-weight: 800;
}

.home-frame-phone .home-cover-copy h2 {
  margin-top: 11px;
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
  font-size: 29px;
  font-weight: 800;
  line-height: 1.05;
}

.home-frame-phone .home-cover-copy h2 strong {
  margin-top: 4px;
  color: var(--home-navy);
}

.home-frame-phone .home-cover-recipe {
  margin-top: 10px;
}

.home-frame-phone .home-cover-recipe h3 {
  padding-bottom: 3px;
  color: var(--home-green-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 800;
}

.home-frame-phone .home-cover-recipe > div {
  gap: 7px;
  margin-top: 6px;
  color: var(--home-navy-soft);
  font-size: 9px;
}

.home-frame-phone .home-cover-art {
  top: 66px;
  right: 3px;
  width: 138px;
  height: 150px;
}

.home-frame-phone .home-cover-art span {
  inset: 10px 7px 8px 10px;
  border: 1px solid rgba(38, 56, 77, .18);
  border-radius: 50%;
  background: var(--home-green-soft);
  transform: rotate(2deg);
}

.home-frame-phone .home-cover-art img {
  width: 132px;
  height: 132px;
  filter: saturate(.9) contrast(1.02) drop-shadow(2px 3px 0 rgba(38, 56, 77, .09));
  transform: rotate(2deg);
}

.home-frame-phone .home-screen-v11 .home-cover-cta {
  right: 14px !important;
  bottom: 14px;
  left: 14px !important;
  min-height: 52px;
  padding: 0 9px 0 14px;
  border: 1px solid var(--home-navy) !important;
  border-radius: 3px;
  background-color: var(--home-navy) !important;
  background-image: none !important;
  color: #fff;
  box-shadow: none !important;
  transform: none;
}

.home-frame-phone .home-cover-cta b {
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--home-yellow) !important;
  font-size: 9px;
}

.home-frame-phone .home-cover-cta small {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.home-frame-phone .home-cover-arrow {
  width: 33px;
  height: 33px;
  background: var(--home-yellow) !important;
  color: var(--home-navy);
  box-shadow: none;
}

.home-frame-phone .home-glance {
  gap: 8px;
  margin: 12px 0 0;
}

.home-frame-phone .home-glance-score,
.home-frame-phone .home-glance-goal {
  min-height: 86px;
  border: 1px solid var(--home-line) !important;
  border-radius: 4px;
  box-shadow: none !important;
  transform: none;
}

.home-frame-phone .home-glance-score {
  padding: 11px 12px 9px;
  background: var(--home-yellow-soft) !important;
}

.home-frame-phone .home-glance-goal {
  padding: 10px 8px 9px 12px;
  background: var(--home-green-soft) !important;
}

.home-frame-phone .home-glance-score > span,
.home-frame-phone .home-glance-goal span {
  color: var(--home-navy-soft);
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
}

.home-frame-phone .home-glance-score > strong,
.home-frame-phone .home-glance-score > strong b,
.home-frame-phone .home-glance-goal > div:first-child > strong {
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
}

.home-frame-phone .home-glance-goal > div:first-child > strong {
  font-size: 16px;
}

.home-frame-phone .home-glance-score > strong b {
  font-size: 27px;
}

.home-frame-phone .home-glance-score .progress-track {
  border: 1px solid rgba(38, 56, 77, .16);
  background: var(--home-paper);
}

.home-frame-phone .home-glance-score .progress-track i {
  background: var(--home-navy) !important;
}

.home-frame-phone .home-glance-goal .home-cover-ring {
  width: 47px;
  height: 47px;
  border: 1px solid var(--home-line);
  background-color: var(--home-paper);
  background-image: conic-gradient(var(--home-green-deep) calc(var(--progress) * 1%), #f5f1df 0);
  box-shadow: none;
}

.home-frame-phone .home-stage-quest {
  min-height: 0;
  margin: 17px 0 0;
  padding: 15px 0 17px;
  overflow: visible;
  border: 0 !important;
  border-top: 1.5px solid var(--home-navy) !important;
  border-bottom: 1.5px solid var(--home-navy) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.home-frame-phone .home-stage-quest::after {
  display: none;
}

.home-frame-phone .home-journey-head {
  min-height: 50px;
  padding: 0 1px 9px;
  border-bottom: 1px solid var(--home-line);
  background: transparent;
}

.home-frame-phone .home-journey-head span {
  color: var(--home-green-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 7px;
  font-weight: 800;
}

.home-frame-phone .home-journey-head h3 {
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 800;
}

.home-frame-phone .home-journey-head small {
  color: var(--home-navy-soft);
  font-size: 8px;
}

.home-frame-phone .home-journey-guide {
  border-color: var(--home-line);
  background: var(--home-yellow-soft);
}

.home-frame-phone .journey-guide-hat,
.home-frame-phone .journey-guide-apron {
  fill: var(--home-green);
  stroke: var(--home-navy);
}

.home-frame-phone .journey-guide-face {
  stroke: var(--home-navy);
}

.home-frame-phone .journey-guide-hair,
.home-frame-phone .journey-guide-eye {
  fill: var(--home-navy);
}

.home-frame-phone .journey-guide-smile,
.home-frame-phone .journey-guide-apron-line {
  stroke: var(--home-navy);
}

.home-frame-phone .home-journey-guide em {
  border-color: var(--home-line);
  background: var(--home-green-soft);
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
}

.home-frame-phone .home-stage-grid {
  gap: 5px;
  margin-top: 10px;
}

.home-frame-phone .home-stage-card,
.home-frame-phone .home-stage-card:nth-child(2),
.home-frame-phone .home-stage-card:nth-child(3),
.home-frame-phone .home-stage-card:nth-child(4),
.home-frame-phone .home-stage-card:nth-child(5) {
  min-height: 101px;
  padding: 6px 3px;
  border: 1px solid var(--home-line);
  border-radius: 3px;
  background: var(--home-paper) !important;
  box-shadow: none !important;
  color: var(--home-navy);
  transform: none;
}

.home-frame-phone .home-stage-card.available {
  border-color: var(--home-navy);
  background: var(--home-yellow) !important;
  color: var(--home-navy);
}

.home-frame-phone .home-stage-card.cleared {
  border-color: var(--home-green-deep);
  background: var(--home-green-soft) !important;
}

.home-frame-phone .home-stage-card.locked {
  background: rgba(255, 253, 246, .76) !important;
  color: var(--home-navy-soft);
  opacity: .72;
}

.home-frame-phone .home-stage-top b,
.home-frame-phone .home-stage-card strong {
  color: inherit;
  font-family: "Pretendard", sans-serif;
}

.home-frame-phone .home-stage-top i {
  border: 1px solid var(--home-line);
  background: var(--home-paper);
  color: var(--home-navy);
}

.home-frame-phone .home-stage-food {
  background: transparent;
}

.home-frame-phone .home-stage-food img,
.home-frame-phone .home-stage-card:nth-child(n) .home-stage-food img {
  filter: saturate(.82) contrast(1.02);
}

.home-frame-phone .home-stage-card small,
.home-frame-phone .home-stage-card.available small {
  background: transparent;
  color: var(--home-navy-soft);
}

.home-frame-phone .home-stage-all {
  min-height: 36px;
  border: 1px solid var(--home-navy);
  border-radius: 3px;
  background: var(--home-navy) !important;
  color: #fff;
  box-shadow: none;
  font-family: "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.home-frame-phone .home-pockets {
  margin-top: 21px;
}

.home-frame-phone .home-pockets-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--home-line);
}

.home-frame-phone .home-pockets-head span {
  color: var(--home-green-deep);
  font-family: "Pretendard", sans-serif;
  font-weight: 800;
}

.home-frame-phone .home-pockets-head h3 {
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
  font-weight: 800;
}

.home-frame-phone .home-pockets-head small {
  color: var(--home-navy-soft);
}

.home-frame-phone .home-pocket-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-frame-phone .home-pocket {
  min-height: 150px;
  padding: 13px 10px 11px;
  border: 1px solid var(--home-line);
  border-radius: 4px;
  background: var(--home-yellow-soft) !important;
  box-shadow: none;
  color: var(--home-navy);
  transform: none;
}

.home-frame-phone .home-pocket-title {
  background: var(--home-green-soft) !important;
}

.home-frame-phone .home-pocket-index {
  color: rgba(38, 56, 77, .1);
}

.home-frame-phone .quick-card-icon {
  border-color: var(--home-line);
  background: var(--home-paper);
  color: var(--home-navy);
}

.home-frame-phone .home-pocket-kicker {
  color: var(--home-green-deep);
}

.home-frame-phone .home-pocket h3,
.home-frame-phone .home-pocket p {
  color: var(--home-navy);
  font-family: "Pretendard", sans-serif;
}

.home-frame-phone .home-pocket h3 {
  font-size: 16px;
  line-height: 1.08;
}

.home-frame-phone .home-pocket p {
  font-size: 9px;
}

.home-frame-phone .home-pocket-art-frame {
  border-color: var(--home-line);
  background: var(--home-paper);
  box-shadow: none;
}

.home-frame-phone .home-pocket-home-frame {
  right: 4px;
  bottom: 8px;
  width: 70px;
  height: 82px;
}

.home-frame-phone .home-pocket-cup-frame {
  right: 5px;
  bottom: 10px;
  width: 58px;
  height: 66px;
}

.home-frame-phone .home-pocket-home-frame .quick-reference-art {
  width: 67px;
  height: 78px;
}

.home-frame-phone .home-pocket-cup-frame .quick-reference-art {
  width: 54px;
  height: 62px;
}

.home-frame-phone .tabs button {
  color: var(--home-navy-soft);
}

.home-frame-phone .tabs button.active::before {
  background-color: var(--home-yellow) !important;
}

.home-frame-phone .tabs button.active > span:last-child {
  color: var(--home-navy);
}

.home-frame-phone .tabs .tab-art,
.home-frame-phone .tabs button:nth-child(n) .tab-art {
  filter: saturate(.62) contrast(1.08) drop-shadow(1px 1px 0 rgba(38, 56, 77, .11));
}

.home-frame-phone .tabs button.active .tab-art,
.home-frame-phone .tabs button:first-child.active .tab-art {
  filter: saturate(.82) contrast(1.12) drop-shadow(1px 1px 0 rgba(38, 56, 77, .13)) !important;
}

@media (max-width: 370px) {
  .home-frame-phone .home-glance {
    grid-template-columns: .96fr 1.04fr;
    gap: 6px;
  }

  .home-frame-phone .home-glance-goal {
    gap: 5px;
  }

  .home-frame-phone .home-glance-goal > div:first-child > strong {
    font-size: 15px;
  }

  .home-frame-phone .home-glance-goal .home-cover-ring {
    width: 43px;
    height: 43px;
  }

  .home-frame-phone .home-cover-copy h2 {
    font-size: 27px;
  }

  .home-frame-phone .home-cover-art {
    right: 0;
    width: 126px;
  }

  .home-frame-phone .home-cover-art img {
    width: 122px;
    height: 122px;
  }

  .home-frame-phone .home-cover-cta small {
    font-size: 10px;
  }
}

/* One type system and one quiet navigation language across the app. */
html,
body,
button,
input,
textarea,
select,
#app,
#app * {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}

#app *::before,
#app *::after {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}

.tabs {
  position: relative;
  isolation: isolate;
  gap: 2px;
  min-height: 78px;
  padding: 7px 12px calc(8px + env(safe-area-inset-bottom));
  border: 0 !important;
  background: #fffdf6 !important;
  box-shadow: none !important;
}

.tabs::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 14px !important;
  left: 14px !important;
  width: auto !important;
  height: 1px !important;
  background: rgba(38, 56, 77, .34) !important;
  opacity: 1 !important;
}

.tabs button,
.tabs button:hover,
.tabs button.active {
  min-width: 0;
  min-height: 54px;
  display: grid;
  grid-template-rows: 34px 14px;
  place-items: center;
  align-content: center;
  gap: 3px;
  padding: 3px 2px 1px;
  border: 0 !important;
  border-radius: 3px;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(38, 56, 77, .58) !important;
  transform: none !important;
}

.tabs button:nth-child(n):hover {
  background: rgba(137, 167, 127, .14) !important;
  color: #26384d !important;
}

.tabs button:nth-child(n).active {
  color: #26384d !important;
}

.tabs button::before,
.tabs button.active::before {
  content: none !important;
  display: none !important;
}

.tab-menu-icon {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.tabs button:nth-child(n) .tab-menu-icon svg {
  width: 21px;
  height: 21px;
  color: inherit !important;
  stroke: currentColor !important;
}

.tabs button.active .tab-menu-icon {
  border-color: #26384d;
  background: #f2d667;
  color: #26384d;
  box-shadow: 2px 2px 0 #89a77f;
  transform: translateY(-1px);
}

.tabs button > .tab-menu-label,
.tabs button.active > .tab-menu-label {
  color: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.home-frame-phone .tabs {
  background: transparent !important;
}

.home-frame-phone .tabs::before {
  right: 36px !important;
  left: 36px !important;
}

@media (max-width: 370px) {
  .home-frame-phone .tabs::before {
    right: 32px !important;
    left: 32px !important;
  }
}

/* Feed-only sky-blue paper frame. */
.feed-frame-phone {
  grid-template-rows:
    calc(104px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(104px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background-color: #c9edf6;
  background-image:
    url("./assets/ui/feed-blue-frame-thick-v2.svg"),
    url("./assets/ui/feed-blue-frame-v1.webp");
  background-position: center, center;
  background-size: 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat;
}

.feed-frame-phone .top {
  padding: calc(34px + env(safe-area-inset-top)) 36px 10px;
  border-bottom: 0;
  background: transparent;
}

.feed-frame-phone .content {
  padding: 14px 36px 30px;
  background-color: transparent;
  background-image: none;
  overscroll-behavior-y: contain;
}

.feed-frame-phone .feed-screen,
.feed-frame-phone .feed-filter,
.feed-frame-phone .feed-friends,
.feed-frame-phone .feed-list {
  background: transparent;
}

.feed-frame-phone .feed-screen {
  position: relative;
  padding-bottom: 18px;
  transform: translateY(var(--feed-pull-offset, 0));
  transition: transform 220ms cubic-bezier(.22, .72, .2, 1);
}

.feed-frame-phone .content.feed-pull-tracking .feed-screen {
  transition: none;
}

.feed-frame-phone .feed-pull-refresh {
  position: absolute;
  top: -28px;
  right: 0;
  left: 0;
  z-index: 8;
  width: max-content;
  min-width: 132px;
  height: 36px;
  margin: 0 auto;
  padding: 4px 10px 4px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(38, 56, 77, .34);
  border-radius: 18px;
  background: rgba(255, 253, 246, .96);
  color: var(--feed-blue-deep);
  box-shadow: 0 2px 0 rgba(38, 56, 77, .12);
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.feed-frame-phone .feed-pull-refresh > span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--feed-navy);
  border-radius: 50%;
  background: var(--feed-yellow);
  color: var(--feed-navy);
}

.feed-frame-phone .feed-pull-refresh small {
  color: var(--feed-navy);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.feed-frame-phone .content.feed-pull-tracking .feed-pull-refresh,
.feed-frame-phone .content.feed-pull-refreshing .feed-pull-refresh {
  opacity: 1;
}

.feed-frame-phone .content.feed-pull-ready .feed-pull-refresh > span {
  background: var(--feed-blue);
  color: #fff;
}

.feed-frame-phone .content.feed-pull-refreshing .feed-pull-refresh svg {
  animation: feed-refresh-spin 700ms linear infinite;
}

@keyframes feed-refresh-spin {
  to { transform: rotate(360deg); }
}

.feed-frame-phone .tabs {
  padding: 8px 34px calc(34px + env(safe-area-inset-bottom));
  background: transparent !important;
}

.feed-frame-phone .tabs::before {
  right: 36px !important;
  left: 36px !important;
  background: rgba(0, 105, 151, .38) !important;
}

@media (max-width: 370px) {
  .feed-frame-phone .top {
    padding-right: 32px;
    padding-left: 32px;
  }

  .feed-frame-phone .content {
    padding-right: 32px;
    padding-left: 32px;
  }

  .feed-frame-phone .tabs {
    padding-right: 30px;
    padding-left: 30px;
  }

  .feed-frame-phone .tabs::before {
    right: 32px !important;
    left: 32px !important;
  }
}

/* Feed editorial system: cyan blue, navy, and butter yellow. */
.feed-frame-phone {
  --feed-navy: #26384d;
  --feed-blue: #079dce;
  --feed-blue-deep: #0879a3;
  --feed-blue-soft: #dff4fa;
  --feed-yellow: #f3d661;
  --feed-paper: #fffdf6;
  --feed-muted: rgba(38, 56, 77, .64);
  --feed-line: rgba(38, 56, 77, .42);
}

.feed-frame-phone .brand-copy span {
  color: var(--feed-muted);
  font-size: 9px;
  font-weight: 600;
}

.feed-frame-phone .brand h1 {
  color: var(--feed-navy);
  font-size: 20px;
  font-weight: 800;
}

.feed-frame-phone .top .mark {
  border: 1px solid var(--feed-navy);
  border-radius: 3px;
  background: var(--feed-paper);
  box-shadow: 2px 2px 0 var(--feed-yellow);
}

.feed-frame-phone .header-logo-book,
.feed-frame-phone .header-logo-rice {
  fill: var(--feed-paper);
  stroke: var(--feed-navy);
}

.feed-frame-phone .header-logo-bowl {
  fill: var(--feed-yellow);
  stroke: var(--feed-navy);
}

.feed-frame-phone .header-logo-bookmark {
  fill: var(--feed-blue);
  stroke: var(--feed-navy);
}

.feed-frame-phone .header-logo-leaf {
  fill: var(--feed-blue);
}

.feed-frame-phone .header-logo-spine,
.feed-frame-phone .header-logo-stem,
.feed-frame-phone .header-logo-smile {
  stroke: var(--feed-navy);
}

.feed-frame-phone .header-profile-button {
  border-color: var(--feed-line);
  background: var(--feed-paper);
  color: var(--feed-navy);
  transform: none;
}

.feed-frame-phone .header-profile-button > img {
  transform: none;
}

.feed-frame-phone .header-profile-button > span {
  border-color: var(--feed-navy);
  background: var(--feed-yellow);
  color: var(--feed-navy);
}

.feed-frame-phone .feed-screen {
  color: var(--feed-navy);
}

.feed-frame-phone .feed-heading {
  gap: 12px;
  margin: 0;
  padding: 16px 15px 15px;
  border: 1.5px solid var(--feed-navy);
  border-radius: 4px;
  background: rgba(255, 253, 246, .94) !important;
  box-shadow: none;
}

.feed-frame-phone .feed-heading .screen-kicker {
  color: var(--feed-blue-deep);
  font-size: 8px;
  font-weight: 800;
}

.feed-frame-phone .feed-heading h2 {
  margin: 5px 0 4px;
  color: var(--feed-navy);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.08;
}

.feed-frame-phone .feed-heading p {
  color: var(--feed-muted);
  font-size: 11px;
  line-height: 1.45;
}

.feed-frame-phone .feed-heading-icon {
  width: 40px;
  height: 40px;
  border: 1px solid var(--feed-navy);
  border-radius: 3px;
  background: var(--feed-yellow) !important;
  color: var(--feed-navy);
  transform: rotate(2deg);
}

.feed-frame-phone .feed-filter {
  width: 168px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 12px 0 14px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--feed-navy);
  border-radius: 3px;
}

.feed-frame-phone .feed-filter button,
.feed-frame-phone .feed-filter button:hover,
.feed-frame-phone .feed-filter button.active {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: var(--feed-paper);
  color: var(--feed-navy);
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
}

.feed-frame-phone .feed-filter button + button {
  border-left: 1px solid var(--feed-navy);
}

.feed-frame-phone .feed-filter button.active {
  background: var(--feed-blue);
  color: #fff;
}

.feed-frame-phone .feed-friends {
  padding: 13px 0 16px;
  border-top: 1px solid var(--feed-navy);
  border-bottom: 1px solid var(--feed-navy);
}

.feed-frame-phone .feed-section-top {
  align-items: flex-end;
  margin-bottom: 10px;
}

.feed-frame-phone .feed-section-top span,
.feed-frame-phone .feed-list-head span {
  color: var(--feed-blue-deep);
  font-size: 8px;
  font-weight: 800;
}

.feed-frame-phone .feed-section-top h3,
.feed-frame-phone .feed-list-head h3 {
  margin-top: 3px;
  color: var(--feed-navy);
  font-size: 17px;
  font-weight: 800;
}

.feed-frame-phone .feed-section-top small,
.feed-frame-phone .feed-list-head small {
  color: var(--feed-muted);
  font-size: 9px;
}

.feed-frame-phone .friend-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.feed-frame-phone .friend-card {
  position: relative;
  min-width: 0;
  min-height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 5px 8px;
  border: 1px solid var(--feed-line);
  border-radius: 3px;
  background: rgba(255, 253, 246, .92);
  box-shadow: none;
}

.feed-frame-phone .friend-card > img {
  width: 47px;
  height: 47px;
  border: 1px solid var(--feed-navy);
  border-radius: 3px;
  background: var(--feed-blue-soft);
}

.feed-frame-phone .friend-card > div {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
  text-align: center;
}

.feed-frame-phone .friend-card strong,
.feed-frame-phone .friend-card span {
  width: 100%;
  color: var(--feed-navy);
}

.feed-frame-phone .friend-card strong {
  font-size: 10px;
  font-weight: 750;
}

.feed-frame-phone .friend-card span {
  margin-top: 3px;
  color: var(--feed-muted);
  font-size: 8px;
}

.feed-frame-phone .friend-card button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 25px;
  height: 25px;
  border: 1px solid var(--feed-navy);
  border-radius: 3px;
  background: var(--feed-yellow);
  color: var(--feed-navy);
  box-shadow: none;
}

.feed-frame-phone .friend-card button svg {
  width: 13px;
  height: 13px;
}

.feed-frame-phone .feed-list {
  gap: 13px;
  padding: 16px 0 4px;
}

.feed-frame-phone .feed-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--feed-navy);
}

.feed-frame-phone .feed-post {
  overflow: hidden;
  border: 1.25px solid var(--feed-navy);
  border-radius: 4px;
  background: var(--feed-paper);
  box-shadow: none;
}

.feed-frame-phone .feed-post > header {
  min-height: 52px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(38, 56, 77, .18);
}

.feed-frame-phone .feed-post > header > img {
  width: 35px;
  height: 35px;
  border: 1px solid var(--feed-line);
  background: var(--feed-blue-soft);
}

.feed-frame-phone .feed-post > header strong {
  color: var(--feed-navy);
  font-size: 11px;
  font-weight: 750;
}

.feed-frame-phone .feed-post > header span {
  color: var(--feed-muted);
  font-size: 8px;
}

.feed-frame-phone .feed-post > header em {
  border-color: var(--feed-line);
  background: var(--feed-blue-soft);
  color: var(--feed-navy);
}

.feed-frame-phone .feed-post-photo {
  background: var(--feed-blue-soft);
}

.feed-frame-phone .feed-post-body {
  padding: 10px 11px 12px;
}

.feed-frame-phone .feed-post-actions button {
  color: var(--feed-muted);
}

.feed-frame-phone .feed-post-actions button {
  position: relative;
  overflow: visible;
}

.feed-frame-phone .feed-post-actions button > svg {
  fill: none;
  transition: fill 150ms ease, transform 150ms ease;
}

.feed-frame-phone .feed-post-actions button.liked,
.feed-frame-phone .feed-post-actions > span {
  color: var(--feed-blue-deep);
}

.feed-frame-phone .feed-post-actions button.liked > svg {
  fill: currentColor;
  transform: scale(1.06);
}

.feed-frame-phone .feed-post-actions button.like-pop > svg {
  animation: feed-like-pop 430ms cubic-bezier(.18, .85, .32, 1.35);
}

.feed-frame-phone .feed-like-burst {
  position: absolute;
  top: 50%;
  left: 15px;
  z-index: 5;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.feed-frame-phone .feed-like-burst i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  color: #e84f87;
  opacity: 0;
  animation: feed-like-float 900ms cubic-bezier(.16, .74, .34, 1) var(--heart-delay) both;
}

.feed-frame-phone .feed-like-burst i:nth-child(2n) {
  color: #f28aaa;
}

.feed-frame-phone .feed-like-burst i:nth-child(3n) {
  color: #efcf53;
}

.feed-frame-phone .feed-like-burst svg {
  display: block;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
}

@keyframes feed-like-pop {
  0% { transform: scale(1); }
  48% { transform: scale(1.32) rotate(-7deg); }
  100% { transform: scale(1.06); }
}

@keyframes feed-like-float {
  0% {
    opacity: 0;
    transform: translate(-50%, -35%) scale(.35) rotate(0);
  }
  18% { opacity: 1; }
  72% { opacity: .92; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--heart-x)), calc(-35% + var(--heart-y))) scale(1.15) rotate(var(--heart-rotation));
  }
}

.feed-frame-phone .feed-post-body p,
.feed-frame-phone .feed-post-body p b {
  color: var(--feed-navy);
}

.feed-frame-phone .feed-empty {
  border-color: var(--feed-line);
  background: rgba(255, 253, 246, .82);
  color: var(--feed-navy);
}

.feed-frame-phone .feed-empty > span {
  background: var(--feed-yellow) !important;
  color: var(--feed-navy);
}

.feed-frame-phone .tabs button.active .tab-menu-icon {
  border-color: var(--feed-navy);
  background: var(--feed-yellow);
  color: var(--feed-navy);
  box-shadow: 2px 2px 0 var(--feed-blue);
}

@media (max-width: 370px) {
  .feed-frame-phone .feed-heading {
    padding-right: 13px;
    padding-left: 13px;
  }

  .feed-frame-phone .feed-heading h2 {
    font-size: 22px;
  }

  .feed-frame-phone .friend-strip {
    gap: 5px;
  }

  .feed-frame-phone .friend-card {
    min-height: 112px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .feed-frame-phone .friend-card > img {
    width: 44px;
    height: 44px;
  }
}

/* Ranking-only hand-drawn pink and orange plaid frame. */
.ranking-frame-phone {
  grid-template-rows:
    calc(104px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(104px + env(safe-area-inset-bottom));
  border: 0;
  border-radius: 0;
  background-color: #fffdf9;
  background-image: url("./assets/ui/ranking-plaid-frame-v1.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ranking-frame-phone .top {
  justify-content: flex-end;
  padding: calc(34px + env(safe-area-inset-top)) 36px 10px;
  border-bottom: 0;
  background: transparent;
}

.ranking-frame-phone .top .brand {
  display: none;
}

.ranking-frame-phone .content {
  padding: 14px 36px 30px;
  background-color: transparent;
  background-image: none;
}

.ranking-frame-phone .ranking-screen {
  min-width: 0;
  padding-bottom: 18px;
}

.ranking-frame-phone .ranking-screen > * {
  min-width: 0;
}

.ranking-frame-phone .tabs {
  padding: 8px 34px calc(34px + env(safe-area-inset-bottom));
  background: transparent !important;
}

.ranking-frame-phone .tabs::before {
  right: 36px !important;
  left: 36px !important;
  background: rgba(80, 72, 69, .34) !important;
}

@media (max-width: 370px) {
  .ranking-frame-phone .top {
    padding-right: 32px;
    padding-left: 32px;
  }

  .ranking-frame-phone .content {
    padding-right: 32px;
    padding-left: 32px;
  }

  .ranking-frame-phone .podium {
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ranking-frame-phone .tabs {
    padding-right: 30px;
    padding-left: 30px;
  }

  .ranking-frame-phone .tabs::before {
    right: 32px !important;
    left: 32px !important;
  }
}

/* Ranking editorial system: charcoal ink with coral, orange, and butter accents. */
.ranking-frame-phone {
  --rank-ink: #3e3231;
  --rank-muted: #796a66;
  --rank-line: rgba(62, 50, 49, .58);
  --rank-coral: #ed7089;
  --rank-coral-soft: #f9dfe5;
  --rank-orange: #f29a5b;
  --rank-orange-soft: #fbe4d3;
  --rank-yellow: #f3d767;
  --rank-yellow-soft: #fff1ae;
  --rank-paper: #fffdf8;
}

.ranking-frame-phone .brand-copy span {
  color: var(--rank-muted);
  font-size: 9px;
  font-weight: 650;
}

.ranking-frame-phone .brand h1 {
  color: var(--rank-ink);
  font-size: 20px;
  font-weight: 850;
}

.ranking-frame-phone .top .mark {
  border: 1.25px solid var(--rank-ink);
  border-radius: 3px;
  background: var(--rank-paper);
  box-shadow: 2px 2px 0 var(--rank-coral);
  transform: rotate(-1deg);
}

.ranking-frame-phone .header-logo-book,
.ranking-frame-phone .header-logo-rice {
  fill: var(--rank-paper);
  stroke: var(--rank-ink);
}

.ranking-frame-phone .header-logo-bowl {
  fill: var(--rank-yellow);
  stroke: var(--rank-ink);
}

.ranking-frame-phone .header-logo-bookmark,
.ranking-frame-phone .header-logo-leaf {
  fill: var(--rank-coral);
  stroke: var(--rank-ink);
}

.ranking-frame-phone .header-logo-spine,
.ranking-frame-phone .header-logo-stem,
.ranking-frame-phone .header-logo-smile {
  stroke: var(--rank-ink);
}

.ranking-frame-phone .header-profile-button {
  border-color: var(--rank-line);
  border-radius: 3px;
  background: var(--rank-paper);
  color: var(--rank-ink);
  transform: rotate(1deg);
}

.ranking-frame-phone .header-profile-button > img {
  border-radius: 2px;
  transform: none;
}

.ranking-frame-phone .header-profile-button > span {
  border-color: var(--rank-ink);
  background: var(--rank-yellow);
  color: var(--rank-ink);
}

.ranking-frame-phone .ranking-screen {
  color: var(--rank-ink);
}

.ranking-frame-phone .ranking-heading {
  position: relative;
  min-height: 105px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
  padding: 5px 3px 14px;
  border-bottom: 2px solid var(--rank-ink);
}

.ranking-frame-phone .ranking-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  border-top: 1px solid rgba(237, 112, 137, .72);
}

.ranking-frame-phone .ranking-heading .screen-kicker {
  color: #bf5268;
  font-size: 8px;
  font-weight: 850;
}

.ranking-frame-phone .ranking-heading h2 {
  margin: 6px 0 5px;
  color: var(--rank-ink);
  font-size: 27px;
  font-weight: 880;
  line-height: 1.05;
}

.ranking-frame-phone .ranking-heading h2 em {
  font-style: normal;
  box-shadow: inset 0 -9px 0 var(--rank-yellow);
}

.ranking-frame-phone .ranking-heading p {
  color: var(--rank-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.45;
}

.ranking-frame-phone .ranking-issue {
  width: 54px;
  height: 60px;
  display: grid;
  grid-template-rows: 14px 24px 12px;
  place-items: center;
  align-content: center;
  border: 1.25px solid var(--rank-ink);
  border-radius: 2px;
  background: var(--rank-orange-soft);
  color: var(--rank-ink);
  box-shadow: 2px 2px 0 var(--rank-coral);
  transform: rotate(2deg);
}

.ranking-frame-phone .ranking-issue span,
.ranking-frame-phone .ranking-issue small {
  font-size: 7px;
  font-weight: 800;
  line-height: 1;
}

.ranking-frame-phone .ranking-issue strong {
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.ranking-frame-phone .ranking-segment {
  margin: 15px 0 16px;
  padding: 3px;
  border: 1.25px solid var(--rank-ink) !important;
  border-radius: 2px !important;
  background: var(--rank-orange-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ranking-frame-phone .ranking-segment button,
.ranking-frame-phone .ranking-segment button:hover,
.ranking-frame-phone .ranking-segment button.active {
  min-height: 37px;
  border: 0;
  border-radius: 1px;
  background: transparent;
  box-shadow: none;
  color: var(--rank-muted);
  font-size: 11px;
  font-weight: 750;
}

.ranking-frame-phone .ranking-segment button.active {
  background: var(--rank-coral);
  color: #fff;
}

.ranking-frame-phone .podium {
  position: relative;
  min-height: 236px;
  align-items: end;
  gap: 6px;
  margin: 0;
  padding: 44px 7px 9px;
  border: 1.5px solid var(--rank-ink) !important;
  border-radius: 3px !important;
  background: var(--rank-paper) !important;
  background-image: none !important;
  box-shadow: 3px 3px 0 var(--rank-orange-soft) !important;
  color: var(--rank-ink);
  transform: none !important;
}

.ranking-frame-phone .podium-head {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-bottom: 1.25px solid var(--rank-ink);
  background: var(--rank-yellow-soft);
  color: var(--rank-ink);
}

.ranking-frame-phone .podium-head span {
  font-size: 9px;
  font-weight: 900;
}

.ranking-frame-phone .podium-head small {
  color: var(--rank-muted);
  font-size: 8px;
  font-weight: 650;
}

.ranking-frame-phone .podium-person {
  position: relative;
  min-width: 0;
  min-height: 151px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 4px 0;
  overflow: hidden;
  border: 1.1px solid var(--rank-line);
  border-radius: 2px;
  background: var(--rank-orange-soft);
  color: var(--rank-ink);
}

.ranking-frame-phone .podium-person.first {
  min-height: 177px;
  background: var(--rank-yellow-soft);
  transform: rotate(-.35deg);
}

.ranking-frame-phone .podium-person.second {
  background: var(--rank-orange-soft);
  transform: rotate(.55deg);
}

.ranking-frame-phone .podium-person.third {
  background: var(--rank-coral-soft);
  transform: rotate(-.45deg);
}

.ranking-frame-phone .podium-avatar,
.ranking-frame-phone .podium-person.first .podium-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  margin: 0 auto 8px;
  overflow: visible;
  border: 1.25px solid var(--rank-ink) !important;
  border-radius: 2px !important;
  background: var(--rank-paper) !important;
  box-shadow: 2px 2px 0 rgba(62, 50, 49, .12) !important;
}

.ranking-frame-phone .podium-person.first .podium-avatar {
  width: 64px;
  height: 64px;
}

.ranking-frame-phone .podium-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1px;
  object-fit: cover;
}

.ranking-frame-phone .podium-rank {
  right: -5px;
  bottom: -5px;
  width: 22px;
  height: 20px;
  border: 1px solid var(--rank-ink);
  border-radius: 2px;
  background: var(--rank-coral);
  color: #fff;
  font-size: 9px;
  font-weight: 850;
}

.ranking-frame-phone .podium-person.first .podium-rank {
  background: var(--rank-orange);
}

.ranking-frame-phone .podium-person strong {
  width: 100%;
  color: var(--rank-ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-frame-phone .podium-clear {
  margin-top: 3px;
  color: var(--rank-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
}

.ranking-frame-phone .podium-block,
.ranking-frame-phone .podium-person.first .podium-block,
.ranking-frame-phone .podium-person.second .podium-block,
.ranking-frame-phone .podium-person.third .podium-block {
  position: relative;
  width: calc(100% + 8px);
  height: 30px !important;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 9px -4px 0;
  border: 0 !important;
  border-top: 1px solid var(--rank-line) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, .5) !important;
  color: var(--rank-ink);
}

.ranking-frame-phone .podium-block::after {
  display: none;
}

.ranking-frame-phone .podium-block > span:last-child {
  font-size: 8px;
  font-weight: 850;
}

.ranking-frame-phone .podium-emblem,
.ranking-frame-phone .podium-person.first .podium-emblem {
  position: static;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rank-ink);
  transform: none;
}

.ranking-frame-phone .podium-emblem svg {
  width: 13px;
  height: 13px;
}

.ranking-frame-phone .my-rank {
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 9px;
  margin-top: 14px;
  padding: 10px;
  border: 1.25px solid var(--rank-ink) !important;
  border-radius: 2px !important;
  background: var(--rank-orange-soft) !important;
  box-shadow: 2px 2px 0 var(--rank-coral-soft) !important;
  transform: none !important;
}

.ranking-frame-phone .my-rank-mark {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--rank-ink);
  border-radius: 2px;
  background: var(--rank-paper);
  box-shadow: none !important;
}

.ranking-frame-phone .my-rank-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-frame-phone .my-rank-copy {
  min-width: 0;
}

.ranking-frame-phone .my-rank .my-rank-kicker {
  margin: 0 0 3px;
  color: #bf5268;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
}

.ranking-frame-phone .my-rank strong {
  overflow: hidden;
  color: var(--rank-ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-frame-phone .my-rank .my-rank-detail {
  margin-top: 4px;
  overflow: hidden;
  color: var(--rank-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-frame-phone .my-rank > .rank-score {
  width: 42px;
  height: 36px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--rank-ink);
  border-radius: 2px;
  background: var(--rank-yellow);
  color: var(--rank-ink);
  font-size: 13px;
  font-weight: 900;
}

.ranking-frame-phone .rank-list {
  gap: 0;
  margin-top: 14px;
  overflow: hidden;
  border: 1.25px solid var(--rank-ink) !important;
  border-radius: 2px !important;
  background: var(--rank-paper) !important;
  box-shadow: none !important;
  transform: none !important;
}

.ranking-frame-phone .rank-list-head {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1.25px solid var(--rank-ink);
  background: var(--rank-coral-soft);
}

.ranking-frame-phone .rank-list-head span,
.ranking-frame-phone .rank-list-head strong {
  display: block;
}

.ranking-frame-phone .rank-list-head span {
  color: #bf5268;
  font-size: 7px;
  font-weight: 850;
}

.ranking-frame-phone .rank-list-head strong {
  margin-top: 3px;
  color: var(--rank-ink);
  font-size: 12px;
  font-weight: 850;
}

.ranking-frame-phone .rank-list-head small {
  color: var(--rank-muted);
  font-size: 8px;
  font-weight: 650;
}

.ranking-frame-phone .rank-row {
  min-height: 57px;
  grid-template-columns: 24px 36px minmax(0, 1fr) 34px;
  gap: 7px;
  padding: 9px 9px;
  border: 0;
  border-bottom: 1px dashed rgba(62, 50, 49, .3);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ranking-frame-phone .rank-row:last-child {
  border-bottom: 0;
}

.ranking-frame-phone .rank-row .avatar {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1px solid var(--rank-line);
  border-radius: 2px;
  background: var(--rank-orange-soft);
  box-shadow: none;
}

.ranking-frame-phone .rank-row:nth-of-type(even) .avatar {
  background: var(--rank-yellow-soft);
}

.ranking-frame-phone .rank-row .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ranking-frame-phone img.ranking-character-portrait {
  object-fit: cover;
  object-position: center top;
  background: transparent;
  filter: none !important;
}

.ranking-frame-phone .rank-number {
  color: var(--rank-ink);
  font-size: 10px;
  font-weight: 850;
}

.ranking-frame-phone .rank-person {
  min-width: 0;
}

.ranking-frame-phone .rank-person strong {
  overflow: hidden;
  color: var(--rank-ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-frame-phone .rank-person span {
  margin-top: 4px;
  overflow: hidden;
  color: var(--rank-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-frame-phone .rank-list .rank-score {
  color: #bf5268;
  font-size: 10px;
  font-weight: 850;
}

.ranking-frame-phone .tabs button.active .tab-menu-icon {
  border-color: var(--rank-ink);
  background: var(--rank-yellow);
  color: var(--rank-ink);
  box-shadow: 2px 2px 0 var(--rank-coral);
}

@media (max-width: 370px) {
  .ranking-frame-phone .ranking-heading {
    grid-template-columns: minmax(0, 1fr) 50px;
    gap: 8px;
  }

  .ranking-frame-phone .ranking-heading h2 {
    font-size: 25px;
  }

  .ranking-frame-phone .ranking-issue {
    width: 50px;
    height: 58px;
  }

  .ranking-frame-phone .podium {
    min-height: 228px;
    gap: 5px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .ranking-frame-phone .podium-person {
    min-height: 145px;
    padding-right: 3px;
    padding-left: 3px;
  }

  .ranking-frame-phone .podium-person.first {
    min-height: 169px;
  }

  .ranking-frame-phone .podium-avatar,
  .ranking-frame-phone .podium-person.first .podium-avatar {
    width: 48px;
    height: 48px;
  }

  .ranking-frame-phone .podium-person.first .podium-avatar {
    width: 60px;
    height: 60px;
  }

  .ranking-frame-phone .my-rank {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .ranking-frame-phone .my-rank-mark {
    width: 40px;
    height: 40px;
  }

  .ranking-frame-phone .my-rank > .rank-score {
    width: 40px;
  }

  .ranking-frame-phone .rank-row {
    grid-template-columns: 22px 34px minmax(0, 1fr) 32px;
    gap: 6px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .ranking-frame-phone .rank-row .avatar {
    width: 34px;
    height: 34px;
  }
}

/* Home-meal-only yellow spiral and starburst frame. */
.home-meal-frame-phone {
  --home-meal-frame-ink: #343b37;
  --home-meal-frame-yellow: #f5d536;
  --home-meal-frame-paper: #fffdf6;
  position: relative;
  border: 0;
  border-radius: 0;
  background-color: var(--home-meal-frame-paper);
  background-image: url("./assets/ui/home-meal-spiral-frame-v3.webp");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.home-meal-frame-phone .top,
.home-meal-frame-phone .content,
.home-meal-frame-phone .tabs {
  border: 0;
  background-color: transparent !important;
  background-image: none;
}

.home-meal-frame-phone .top {
  justify-content: flex-end;
}

.home-meal-frame-phone .top .brand {
  display: none;
}

.home-meal-frame-phone .home-meal-screen {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 0;
}

.home-meal-frame-phone .home-meal-screen .home-route {
  padding-bottom: 22px;
}

.home-meal-frame-phone .home-meal-screen > * {
  min-width: 0;
}

.home-meal-frame-phone .tabs::before {
  background: rgba(52, 59, 55, .34) !important;
}

.home-meal-frame-phone .tabs button.active .tab-menu-icon {
  border-color: var(--home-meal-frame-ink);
  background: var(--home-meal-frame-yellow);
  color: var(--home-meal-frame-ink);
  box-shadow: 2px 2px 0 #d2b62f;
}

/* Shared breathing room between each illustrated frame and its page content. */
.home-frame-phone,
.home-meal-frame-phone,
.feed-frame-phone,
.dessert-frame-phone,
.ranking-frame-phone,
.profile-frame-phone {
  grid-template-rows: 112px minmax(0, 1fr) 112px;
}

.home-frame-phone .top,
.home-meal-frame-phone .top,
.feed-frame-phone .top,
.dessert-frame-phone .top,
.ranking-frame-phone .top,
.profile-frame-phone .top {
  padding: max(37px, env(safe-area-inset-top)) 44px 15px;
}

.home-frame-phone .top,
.home-meal-frame-phone .top,
.feed-frame-phone .top,
.ranking-frame-phone .top,
.profile-frame-phone .top {
  padding: max(32px, env(safe-area-inset-top)) 44px 10px;
}

.home-frame-phone .content,
.home-meal-frame-phone .content,
.feed-frame-phone .content,
.dessert-frame-phone .content,
.ranking-frame-phone .content,
.profile-frame-phone .content {
  padding: 16px 44px 34px;
}

.home-frame-phone .tabs,
.home-meal-frame-phone .tabs,
.feed-frame-phone .tabs,
.dessert-frame-phone .tabs,
.ranking-frame-phone .tabs,
.profile-frame-phone .tabs {
  padding: 8px 42px max(42px, env(safe-area-inset-bottom));
}

.home-frame-phone .tabs::before,
.home-meal-frame-phone .tabs::before,
.feed-frame-phone .tabs::before,
.dessert-frame-phone .tabs::before,
.ranking-frame-phone .tabs::before,
.profile-frame-phone .tabs::before {
  right: 44px !important;
  left: 44px !important;
}

@media (max-width: 370px) {
  .home-frame-phone .top,
  .home-meal-frame-phone .top,
  .feed-frame-phone .top,
  .dessert-frame-phone .top,
  .ranking-frame-phone .top,
  .profile-frame-phone .top,
  .home-frame-phone .content,
  .home-meal-frame-phone .content,
  .feed-frame-phone .content,
  .dessert-frame-phone .content,
  .ranking-frame-phone .content,
  .profile-frame-phone .content {
    padding-right: 40px;
    padding-left: 40px;
  }

  .home-frame-phone .tabs,
  .home-meal-frame-phone .tabs,
  .feed-frame-phone .tabs,
  .dessert-frame-phone .tabs,
  .ranking-frame-phone .tabs,
  .profile-frame-phone .tabs {
    padding-right: 38px;
    padding-left: 38px;
  }

  .home-frame-phone .tabs::before,
  .home-meal-frame-phone .tabs::before,
  .feed-frame-phone .tabs::before,
  .dessert-frame-phone .tabs::before,
  .ranking-frame-phone .tabs::before,
  .profile-frame-phone .tabs::before {
    right: 40px !important;
    left: 40px !important;
  }
}

/* Profile-only purple striped notebook frame. */
.profile-frame-phone {
  --profile-frame-ink: #65438a;
  --profile-frame-violet: #8f67b2;
  --profile-frame-lilac: #c4afe0;
  --profile-frame-paper: #fff8dd;
  position: relative;
  border: 0;
  border-radius: 0;
  background-color: var(--profile-frame-lilac);
  background-image: url("./assets/ui/profile-lined-frame-v2.webp");
  background-position: center;
  background-size: 100% 105%;
  background-repeat: no-repeat;
}

.profile-frame-phone .top,
.profile-frame-phone .content,
.profile-frame-phone .tabs {
  border: 0;
  background-color: transparent !important;
  background-image: none;
}

.profile-frame-phone .top {
  justify-content: flex-end;
}

.profile-frame-phone .top .brand {
  display: none;
}

.profile-frame-phone .profile-screen {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 18px;
}

.profile-frame-phone .profile-screen > * {
  min-width: 0;
}

.profile-frame-phone .profile-main > div:nth-child(2),
.profile-frame-phone .profile-title-row,
.profile-frame-phone .profile-title-row h2 {
  min-width: 0;
}

.profile-frame-phone .profile-title-row h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-frame-phone .level-chip {
  flex: 0 0 auto;
}

.profile-frame-phone .header-profile-button {
  border-color: var(--profile-frame-ink);
  box-shadow: 2px 2px 0 var(--profile-frame-lilac);
}

.profile-frame-phone .tabs::before {
  background: rgba(101, 67, 138, .34) !important;
}

.profile-frame-phone .tabs button:hover .tab-menu-icon {
  border-color: var(--profile-frame-violet);
  background: rgba(196, 175, 224, .42);
  color: var(--profile-frame-ink);
}

/* Dessert-only scalloped milkshake frame and scrapbook stage map. */
.dessert-frame-phone {
  --dessert-ink: #3e3040;
  --dessert-muted: #7c6675;
  --dessert-line: rgba(82, 52, 73, .48);
  --dessert-berry: #bd527f;
  --dessert-pink: #e68fba;
  --dessert-pink-soft: #f7d9e8;
  --dessert-frame-line: #d68fb8;
  --dessert-yellow: #f3d36f;
  --dessert-yellow-soft: #fff2bd;
  --dessert-mint: #9acdbf;
  --dessert-mint-soft: #e3f1eb;
  --dessert-paper: #fffaf0;
  position: relative;
  border: 0;
  border-radius: 0;
  background-color: #f2b4d7;
  background-image:
    url("./assets/ui/dessert-swirl-frame-v1.svg"),
    linear-gradient(#fffaf0, #fffaf0);
  background-position: center, center;
  background-size: 100% 100%, calc(100% - 48px) calc(100% - 48px);
  background-repeat: no-repeat, no-repeat;
}

.dessert-frame-phone .top,
.dessert-frame-phone .content,
.dessert-frame-phone .tabs {
  border: 0;
  background-color: transparent !important;
  background-image: none;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.dessert-frame-phone .content {
  padding-bottom: 20px;
  overscroll-behavior-y: none;
}

.dessert-frame-phone .top {
  position: relative;
  justify-content: flex-end;
}

.dessert-frame-phone .top::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: -10px;
  left: 28px;
  height: 12px;
  background: url("./assets/ui/dessert-header-handdrawn-dash-divider-v2.svg") center / 100% 100% no-repeat;
  opacity: .96;
  pointer-events: none;
}

.dessert-frame-phone .top .brand {
  display: none;
}

.dessert-frame-phone .brand-copy span {
  color: var(--dessert-muted);
  font-size: 9px;
  font-weight: 600;
}

.dessert-frame-phone .brand h1 {
  color: var(--dessert-ink);
  font-size: 20px;
  font-weight: 850;
}

.dessert-frame-phone .top .mark {
  border: 1px solid var(--dessert-ink);
  border-radius: 4px;
  background: var(--dessert-pink-soft);
  box-shadow: 2px 2px 0 var(--dessert-mint);
  transform: rotate(-1deg);
}

.dessert-frame-phone .header-logo-book,
.dessert-frame-phone .header-logo-rice {
  fill: var(--dessert-paper);
}

.dessert-frame-phone .header-logo-bowl {
  fill: var(--dessert-yellow);
}

.dessert-frame-phone .header-logo-bookmark,
.dessert-frame-phone .header-logo-leaf {
  fill: var(--dessert-mint);
}

.dessert-frame-phone .header-logo-spine,
.dessert-frame-phone .header-logo-stem,
.dessert-frame-phone .header-logo-smile {
  stroke: var(--dessert-berry);
}

.dessert-frame-phone .header-profile-button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--dessert-line);
  border-radius: 50%;
  background: var(--dessert-paper);
  box-shadow: 2px 2px 0 var(--dessert-pink-soft);
}

.dessert-frame-phone .header-profile-button > img {
  width: 34px;
  height: 34px;
}

.dessert-frame-phone .header-profile-button > span {
  border-color: var(--dessert-ink);
  background: var(--dessert-yellow);
  color: var(--dessert-ink);
}

.dessert-frame-phone .dessert-screen {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-bottom: 0;
  color: var(--dessert-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.dessert-frame-phone .dessert-screen > * {
  min-width: 0;
}

.dessert-frame-phone .dessert-screen .map-hero.dessert {
  box-sizing: border-box;
  top: -16px !important;
  min-height: 290px;
  padding: 60px 32px 24px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 2px !important;
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/dessert-confetti-pattern-v1.svg") !important;
  background-position: center;
  background-size: 178px 178px;
  background-repeat: repeat;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  isolation: isolate;
}

.dessert-frame-phone .dessert-screen .map-hero.dessert::before {
  content: "" !important;
  position: absolute;
  inset: 5px 8px 10px;
  z-index: 1;
  box-sizing: border-box;
  display: block !important;
  pointer-events: none;
  border: 0;
  border-image: none;
  background-image: url("./assets/ui/dessert-stage-card-frame-v1.svg?v=20260721-crisp-v3");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.dessert-frame-phone .dessert-screen .map-hero.dessert::after {
  content: none !important;
  display: none !important;
}

.dessert-frame-phone .dessert-screen .map-hero-top {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  align-items: start;
}

.dessert-frame-phone .dessert-screen .map-hero-top > div:first-child {
  display: contents;
}

.dessert-frame-phone .dessert-screen .screen-kicker {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
  display: block;
  margin: 0;
  padding-left: 24px;
  color: #6e9caf;
  font-family: "Bap Gaegu", "Pretendard", sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  transform: translateX(6px);
  white-space: nowrap;
}

#app .dessert-frame-phone .dessert-screen .map-hero h2 {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 5px;
  margin-left: 6px;
  color: #d45a9b;
  font-family: "Bap Sacramento", "Bap Gaegu", cursive !important;
  font-size: 44px;
  font-weight: 400;
  line-height: .88;
  letter-spacing: 0;
  white-space: nowrap;
}

.dessert-frame-phone .dessert-screen .map-hero-lead {
  grid-row: 3;
  grid-column: 1;
  max-width: 132px;
  margin-top: 3px;
  margin-left: 6px;
  color: #826c7d;
  font-size: 9.5px;
  font-weight: 450;
  line-height: 1.45;
}

.dessert-frame-phone .dessert-screen .map-stat {
  position: static;
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: center;
  gap: 4px;
  padding: 3px 6px;
  border: 1px solid rgba(110, 156, 175, .58);
  border-radius: 3px;
  background: rgba(230, 242, 244, .9);
  color: #587b89;
  box-shadow: 1px 1px 0 rgba(214, 143, 184, .28) !important;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
  transform: translateX(-12px) rotate(.5deg);
}

.dessert-frame-phone .dessert-screen .map-reference-art.dessert-hero-cake {
  top: 145px;
  right: 40px;
  width: 54px;
  height: 44px;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.01) drop-shadow(1px 2px 0 rgba(194, 112, 159, .14));
  transform: rotate(-2deg);
}

.dessert-frame-phone .dessert-screen .dessert-summary {
  right: 44px;
  bottom: 54px;
  left: 44px;
  height: 42px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px;
  gap: 6px;
  padding: 6px 2px 4px;
  border-top: 1px dashed rgba(194, 112, 159, .42);
  border-bottom: 0;
  background: transparent;
  background-image: none;
}

.dessert-frame-phone .dessert-screen .dessert-summary > span {
  min-width: 0;
  min-height: 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.dessert-frame-phone .dessert-screen .dessert-summary > i {
  display: none;
}

.dessert-frame-phone .dessert-screen .dessert-summary b {
  color: #c06f9d;
  font-family: "Bap Gaegu", "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.dessert-frame-phone .dessert-screen .dessert-summary span:nth-of-type(2) b {
  color: #659e90;
}

.dessert-frame-phone .dessert-screen .dessert-summary small {
  overflow: visible;
  color: #806d7a;
  font-size: 7px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.dessert-frame-phone .dessert-screen .dessert-summary em {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(194, 112, 159, .36);
  border-radius: 50%;
  background: rgba(247, 217, 232, .82);
  color: #60485c;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 8px;
  font-weight: 650;
}

.dessert-frame-phone .dessert-screen .map-progress {
  display: none;
}

.dessert-frame-phone .dessert-screen .map-progress span {
  background: var(--dessert-berry);
}

.dessert-frame-phone .dessert-screen .map-route.dessert {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 24px 0 0;
  background-color: transparent !important;
  background-image: none !important;
}

.dessert-frame-phone .dessert-screen .map-route.dessert::before {
  top: 48px;
  bottom: 40px;
  left: 31px;
  width: 2px;
  border-radius: 0;
  background: repeating-linear-gradient(to bottom, var(--dessert-pink) 0 7px, transparent 7px 13px);
  opacity: .65;
  transform: none;
}

.dessert-frame-phone .dessert-screen .forest-prop,
.dessert-frame-phone .dessert-screen .current-stage-art {
  display: none !important;
}

.dessert-frame-phone .dessert-screen .chapter-marker {
  width: calc(100% - 20px);
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 25px 0 14px 10px;
  padding: 10px 16px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-chapter-stripe-frame-v2.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #6590d2;
  box-shadow: none !important;
  transform: rotate(-.25deg);
  content-visibility: auto;
  contain-intrinsic-size: auto 46px;
}

.dessert-frame-phone .dessert-screen .chapter-marker span {
  color: #6590d2;
  font-size: 8px;
  font-weight: 800;
}

.dessert-frame-phone .dessert-screen .chapter-marker b {
  color: #6590d2;
  font-size: 12px;
  font-weight: 850;
}

.dessert-frame-phone .dessert-screen .map-step,
.dessert-frame-phone .dessert-screen .map-step.left,
.dessert-frame-phone .dessert-screen .map-step.right {
  position: relative;
  width: 100%;
  min-height: 0;
  margin: 0 0 14px;
  padding: 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 84px;
}

.dessert-frame-phone .dessert-screen .map-stop,
.dessert-frame-phone .dessert-screen .map-stop.left,
.dessert-frame-phone .dessert-screen .map-stop.right {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 84px;
  min-height: 84px;
  display: grid;
  grid-template-columns: 48px 58px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin: 0 !important;
  padding: 10px 14px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-list-card-locked-v1.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none !important;
  color: var(--dessert-ink);
  transform: rotate(-.12deg) !important;
}

.dessert-frame-phone .dessert-screen .map-step.right .map-stop {
  transform: rotate(.15deg) !important;
}

.dessert-frame-phone .dessert-screen .map-stop.available {
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-list-card-available-v1.svg") !important;
  box-shadow: none !important;
}

.dessert-frame-phone .dessert-screen .map-stop.cleared {
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-list-card-cleared-v1.svg") !important;
  box-shadow: none !important;
}

.dessert-frame-phone .dessert-screen .map-stop.skipped {
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-list-card-skipped-v1.svg") !important;
}

.dessert-frame-phone .dessert-screen .map-stop.locked {
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-list-card-locked-v1.svg") !important;
  box-shadow: none !important;
  color: var(--dessert-muted);
  opacity: 1;
}

.dessert-frame-phone .dessert-screen .dessert-node-number {
  display: block;
  color: #e485ad;
  font-family: "Bap Bodoni Moda", Georgia, serif;
  font-size: 52px;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: .92;
  letter-spacing: 0;
  text-align: center;
  transform: scaleX(.78);
  transform-origin: center;
}

.dessert-frame-phone .dessert-screen .map-stop.locked .dessert-node-number {
  color: rgba(211, 118, 158, .48);
}

.dessert-frame-phone .dessert-screen .node-dish {
  width: 56px;
  height: 56px;
  border: 1.2px solid #d96c9f;
  border-radius: 50%;
  background: var(--dessert-paper);
  box-shadow: none !important;
  transform: rotate(-.4deg);
}

.dessert-frame-phone .dessert-screen .node-sticker {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--dessert-paper);
  isolation: isolate;
}

.dessert-frame-phone .dessert-screen .node-stage-art {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  filter: saturate(.94) contrast(1.02);
}

.dessert-frame-phone .dessert-screen .node-dish .node-badge {
  display: none;
}

.dessert-frame-phone .dessert-screen .map-stop .node-copy {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  align-self: stretch;
  text-align: left;
}

.dessert-frame-phone .dessert-screen .node-num {
  color: #bd527f;
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
}

.dessert-frame-phone .dessert-screen .node-title {
  display: block;
  width: 100%;
  margin-top: 4px;
  overflow: hidden;
  color: #493547;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dessert-frame-phone .dessert-screen .node-state {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  color: #8b7182;
  font-size: 8px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
}

.dessert-frame-phone .dessert-screen .node-state svg {
  width: 8px;
  height: 8px;
}

.dessert-frame-phone .dessert-screen .available .node-state {
  color: #bd527f;
  font-weight: 800;
}

.dessert-frame-phone .dessert-screen .node-arrow {
  display: none;
}

.dessert-frame-phone .dessert-screen .forest-goal,
.dessert-frame-phone .dessert-screen .forest-goal.trailhead,
.dessert-frame-phone .dessert-screen .forest-goal.summit {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 0 21px;
  padding: 31px 24px 14px;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-trailhead-multiline-frame-v2.svg") !important;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none !important;
  transform: rotate(-.18deg);
}

.dessert-frame-phone .dessert-screen .forest-goal.summit {
  background-color: transparent !important;
  background-image: url("./assets/ui/dessert-finale-chain-star-frame-v4.svg") !important;
  box-shadow: none !important;
}

.dessert-frame-phone .dessert-screen .forest-goal.trailhead {
  margin-top: 22px;
  margin-bottom: 0;
  transform: rotate(.18deg);
}

.dessert-frame-phone .dessert-screen .goal-kicker {
  position: absolute;
  top: 13px;
  left: 24px;
  color: var(--dessert-berry);
  font-size: 8px;
  font-weight: 850;
}

.dessert-frame-phone .dessert-screen .goal-reference-art {
  position: static;
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: saturate(.94) contrast(1.02) drop-shadow(1px 2px 0 rgba(82, 52, 73, .10));
  transform: rotate(-2deg);
}

.dessert-frame-phone .dessert-screen .forest-goal b {
  color: var(--dessert-ink);
  font-size: 14px;
  font-weight: 850;
}

.dessert-frame-phone .dessert-screen .forest-goal small {
  margin-top: 4px;
  color: var(--dessert-muted);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.35;
}

.dessert-frame-phone .tabs::before {
  background: rgba(125, 78, 108, .34) !important;
}

.dessert-frame-phone .tabs button.active .tab-menu-icon {
  border-color: var(--dessert-ink);
  background: var(--dessert-yellow);
  color: var(--dessert-ink);
  box-shadow: 2px 2px 0 var(--dessert-pink);
}

@media (max-width: 370px) {
  .dessert-frame-phone .dessert-screen .screen-kicker {
    padding-left: 18px;
  }

  .dessert-frame-phone .dessert-screen .map-hero.dessert {
    min-height: 284px;
    padding: 58px 28px 23px;
  }

  #app .dessert-frame-phone .dessert-screen .map-hero h2 {
    font-size: 36px;
  }

  .dessert-frame-phone .dessert-screen .map-hero-lead {
    max-width: 108px;
    font-size: 8.5px;
  }

  .dessert-frame-phone .dessert-screen .map-reference-art.dessert-hero-cake {
    top: 143px;
    right: 32px;
    width: 50px;
    height: 42px;
  }

  .dessert-frame-phone .dessert-screen .dessert-summary {
    right: 36px;
    bottom: 54px;
    left: 36px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 27px;
    gap: 4px;
  }

  .dessert-frame-phone .dessert-screen .dessert-summary b {
    font-size: 17px;
  }

  .dessert-frame-phone .dessert-screen .dessert-summary small {
    font-size: 6.5px;
  }

  .dessert-frame-phone .dessert-screen .map-stop,
  .dessert-frame-phone .dessert-screen .map-stop.left,
  .dessert-frame-phone .dessert-screen .map-stop.right {
    grid-template-columns: 37px 46px minmax(0, 1fr);
    gap: 8px;
    padding-right: 9px;
    padding-left: 9px;
  }

  .dessert-frame-phone .dessert-screen .dessert-node-number {
    font-size: 42px;
  }

  .dessert-frame-phone .dessert-screen .node-dish {
    width: 44px;
    height: 44px;
  }

  .dessert-frame-phone .dessert-screen .node-sticker,
  .dessert-frame-phone .dessert-screen .node-stage-art {
    width: 38px;
    height: 38px;
    max-width: 38px;
    max-height: 38px;
  }

  .dessert-frame-phone .dessert-screen .node-num {
    font-size: 6.5px;
  }

  .dessert-frame-phone .dessert-screen .node-title {
    margin-top: 3px;
    font-size: 11.5px;
  }

  .dessert-frame-phone .dessert-screen .node-state {
    margin-top: 4px;
    font-size: 7.5px;
  }
}

@media (max-width: 340px) {
  .dessert-frame-phone .dessert-screen .map-hero.dessert {
    min-height: 288px;
    padding-right: 24px;
    padding-left: 24px;
  }

  #app .dessert-frame-phone .dessert-screen .map-hero h2 {
    margin-top: 5px;
    font-size: 34px;
  }

  .dessert-frame-phone .dessert-screen .map-hero-lead {
    max-width: 100px;
    font-size: 8px;
  }

  .dessert-frame-phone .dessert-screen .map-reference-art.dessert-hero-cake {
    top: 143px;
    right: 30px;
    width: 48px;
    height: 40px;
  }

  .dessert-frame-phone .dessert-screen .dessert-summary {
    right: 34px;
    left: 34px;
  }
}

/* Keep the native-app safe areas inside the approved dessert frame proportions. */
.dessert-frame-phone {
  grid-template-rows: 112px minmax(0, 1fr) 112px;
}

.dessert-frame-phone .top {
  padding-top: max(37px, env(safe-area-inset-top));
}

.dessert-frame-phone .tabs {
  padding-bottom: max(42px, env(safe-area-inset-bottom));
}

/* Shared watercolor navigation icons. Active state is color-only. */
.tabs button,
.tabs button:hover,
.tabs button.active,
.tabs button:nth-child(n):hover,
.tabs button:nth-child(n).active {
  background: transparent !important;
  box-shadow: none !important;
}

.tabs button .tab-menu-icon,
.tabs button:hover .tab-menu-icon,
.tabs button.active .tab-menu-icon,
.home-frame-phone .tabs button.active .tab-menu-icon,
.home-meal-frame-phone .tabs button.active .tab-menu-icon,
.feed-frame-phone .tabs button.active .tab-menu-icon,
.dessert-frame-phone .tabs button.active .tab-menu-icon,
.ranking-frame-phone .tabs button.active .tab-menu-icon,
.profile-frame-phone .tabs button.active .tab-menu-icon {
  width: 36px;
  height: 34px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.tab-menu-image {
  width: 31px;
  height: 31px;
  display: block;
  object-fit: contain;
  opacity: .54;
  filter: grayscale(1) saturate(0) brightness(1.02) contrast(.76);
  transform: none;
  transition: opacity 160ms ease, filter 160ms ease;
}

.tab-menu-image-feed {
  width: 25px;
  height: 32px;
}

.tab-menu-image-homeMeal,
.tab-menu-image-dessert,
.tab-menu-image-ranking {
  width: 32px;
  height: 29px;
}

.tabs button:hover .tab-menu-image {
  opacity: .7;
}

.tabs button.active .tab-menu-image {
  opacity: 1;
  filter: none;
}

.tabs button > .tab-menu-label,
.tabs button:hover > .tab-menu-label {
  color: #a5a2a5 !important;
}

.tabs button.active > .tab-menu-label {
  color: #403740 !important;
}

/* Hand-inked frame for dessert recipe sheets. */
.sheet.recipe-sheet:not(.dessert-recipe-sheet) {
  height: min(828px, calc(100% - 24px));
  max-height: calc(100% - 24px);
}

.sheet.dessert-recipe-sheet {
  --dessert-modal-gutter: clamp(30px, 8vw, 35px);
  position: relative;
  isolation: isolate;
  height: min(828px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  border: 0;
  border-radius: 0;
  background-color: #dfeffc;
  background-image: url("./assets/ui/dessert-modal-blue-fabric-frame-v2.webp");
  background-position: center;
  background-size: calc(100% + 10px) calc(100% + 10px);
  background-repeat: no-repeat;
  box-shadow: none;
  -webkit-clip-path: none;
  clip-path: none;
}

.sheet.dessert-recipe-sheet::before {
  display: none;
}

.dessert-recipe-sheet .recipe-cover.dessert {
  padding: var(--dessert-modal-gutter);
  background-color: transparent;
  background-image: none;
}

.dessert-recipe-sheet .sheet-title-row {
  padding-inline: 0;
}

.dessert-recipe-sheet .recipe-reference-art {
  right: var(--dessert-modal-gutter);
}

.dessert-recipe-sheet .recipe-body {
  padding: 20px var(--dessert-modal-gutter) 26px;
  background-color: transparent;
  background-image: none;
}

.dessert-recipe-sheet .sheet-actions {
  bottom: -26px;
  margin: 22px 0 -26px;
  padding: 12px 0 calc(16px + env(safe-area-inset-bottom));
  background: transparent;
  box-shadow: none;
}

/* Shared recipe-modal details: framed steps, dividers, cutout art, and pink actions. */
.recipe-sheet .recipe-reference-art {
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(1.18) contrast(1.08) !important;
  mix-blend-mode: normal !important;
}

.recipe-sheet:not(.dessert-recipe-sheet) .recipe-reference-art {
  filter: saturate(1.3) contrast(1.12) !important;
  mix-blend-mode: multiply !important;
}

.recipe-sheet .recipe-meta {
  margin-top: 2px;
  padding: 15px 0;
  border: 0;
  border-top: 1.5px dashed rgba(218, 105, 158, .72);
  border-bottom: 1.5px dashed rgba(218, 105, 158, .72);
  background-image: none;
}

.recipe-sheet .step-list {
  padding: 9px 13px;
  border: 0;
  border-radius: 0;
  background-color: rgba(255, 253, 248, .88);
  background-image: url("./assets/pencil-frame-card.svg");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}

.recipe-sheet .step-row {
  min-height: 54px;
  padding: 8px 4px;
  align-items: center;
}

.recipe-sheet .step-row + .step-row {
  border: 0;
  background-image: url("./assets/pencil-line.svg");
  background-position: center top;
  background-size: 100% 8px;
  background-repeat: no-repeat;
}

.recipe-sheet .step-row p {
  padding-top: 0;
}

.recipe-sheet .sheet-actions > .primary,
.recipe-sheet .sheet-actions > .secondary {
  position: relative;
  min-height: 68px;
  overflow: hidden;
  padding: 16px 24px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-image: url("./assets/ui/recipe-action-button-primary-v1.svg?v=20260722-v48");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #a72f66;
  box-shadow: none;
  transform: none;
}

.recipe-sheet .sheet-actions > .secondary {
  margin-top: 9px;
  background-image: url("./assets/ui/recipe-action-button-secondary-v1.svg?v=20260722-v48");
}

.recipe-sheet .sheet-actions > .primary::before,
.recipe-sheet .sheet-actions > .secondary::before {
  display: none;
}

.recipe-sheet .sheet-actions > .primary > svg,
.recipe-sheet .sheet-actions > .primary > span,
.recipe-sheet .sheet-actions > .secondary > svg,
.recipe-sheet .sheet-actions > .secondary > span {
  position: relative;
  z-index: 1;
}

.recipe-sheet .sheet-actions > .primary > span,
.recipe-sheet .sheet-actions > .secondary > span {
  font-size: 14px;
  font-weight: 750;
}

.recipe-sheet .sheet-actions > .primary:active,
.recipe-sheet .sheet-actions > .secondary:active {
  transform: translateY(1px);
}

/* Keep the home-meal trailhead close to the fixed navigation at maximum scroll. */
.home-meal-frame-phone .content {
  padding-bottom: 0;
}

/* Keep touch interactions app-like without blocking real form editing. */
#app,
#app * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

#app img,
#app svg {
  -webkit-user-drag: none;
}

#app input,
#app textarea,
#app select,
#app [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  touch-action: auto;
}

/* Home-meal notebook: star border, continuous pastel-yellow paper, and vine divider. */
.home-meal-frame-phone {
  --home-meal-sky: #fff1b8;
  isolation: isolate;
  background-image:
    url("./assets/ui/home-meal-wavy-sky-inner-v1.svg"),
    url("./assets/ui/home-meal-spiral-frame-v3.webp") !important;
  background-position: center, center !important;
  background-size: 100% 100%, 100% 100% !important;
  background-repeat: no-repeat, no-repeat !important;
}

.home-meal-frame-phone::before {
  display: none;
}

.home-meal-frame-phone > .top,
.home-meal-frame-phone > .content,
.home-meal-frame-phone > .tabs {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}

.home-meal-frame-phone .top {
  position: relative;
}

.home-meal-frame-phone .top::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 40px;
  bottom: -8px;
  left: 40px;
  height: 28px;
  background: url("./assets/ui/home-meal-leaf-divider-v2.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.home-meal-frame-phone .home-meal-screen,
.home-meal-frame-phone .home-meal-screen .home-route {
  background-color: transparent !important;
  background-image: none !important;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero {
  min-height: 220px;
  padding: 26px 27px 23px;
  border: 0 !important;
  border-radius: 5px !important;
  background-color: #fff8e7 !important;
  background-image: url("./assets/ui/home-meal-stage-star-frame-v1.svg") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero::before {
  display: none !important;
  background: none !important;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero .map-hero-top {
  padding: 5px 4px 0;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero h2 {
  max-width: 172px;
  font-size: 28px;
  white-space: nowrap;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero .map-reference-art {
  top: 65px;
  right: 31px;
  width: 84px;
  height: 78px;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero .map-stat {
  top: 7px;
  right: 3px;
  z-index: 6;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero .home-meal-summary {
  right: 27px;
  bottom: 25px;
  left: 27px;
}

.home-meal-frame-phone .home-meal-screen > .home-meal-hero .map-progress {
  right: 80px;
  bottom: 18px;
  left: 40px;
}

/* Home-meal stage cards: hand-painted gingham scallops from the approved mockup. */
.home-meal-frame-phone .home-meal-screen .map-step .map-stop,
.home-meal-frame-phone .home-meal-screen .map-step.right .map-stop,
.home-meal-frame-phone .home-meal-screen .map-step-status-available .map-stop,
.home-meal-frame-phone .home-meal-screen .map-step-status-available.right .map-stop {
  min-height: 100px;
  padding: 18px 18px 17px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/home-meal-stage-gingham-frame-v1.svg") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-meal-frame-phone .home-meal-screen .map-step .map-stop.locked {
  opacity: .58;
}

.home-meal-frame-phone .home-meal-screen .map-step .map-stop:hover:not(:disabled),
.home-meal-frame-phone .home-meal-screen .map-step.right .map-stop:hover:not(:disabled) {
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}

.home-meal-frame-phone .home-meal-screen .map-step .node-dish,
.home-meal-frame-phone .home-meal-screen .map-step-status-available .node-dish {
  box-shadow: none !important;
}

@media (max-width: 390px) {
  .home-meal-frame-phone .home-meal-screen .map-step .map-stop,
  .home-meal-frame-phone .home-meal-screen .map-step.right .map-stop,
  .home-meal-frame-phone .home-meal-screen .map-step-status-available .map-stop,
  .home-meal-frame-phone .home-meal-screen .map-step-status-available.right .map-stop {
    padding: 18px 16px 17px;
  }
}

/* Home-meal trailhead: wide white card with a hand-drawn dotted-ink frame. */
.home-meal-frame-phone .home-meal-screen .forest-goal.trailhead {
  box-sizing: border-box;
  width: calc(100% - 8px);
  min-height: 104px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin: 18px auto 0;
  padding: 24px 25px 18px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/home-meal-trailhead-dotted-frame-v1.svg") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: rotate(-.1deg);
}

.home-meal-frame-phone .home-meal-screen .trailhead .goal-kicker {
  z-index: 4;
  top: 8px;
  right: 23px;
  padding: 4px 9px 3px;
  white-space: nowrap;
  transform: rotate(-1deg);
}

.home-meal-frame-phone .home-meal-screen .trailhead .goal-reference-home {
  width: 68px;
  height: 68px;
  filter: saturate(1.25) contrast(1.14) brightness(.98);
  transform: rotate(-2deg);
}

.home-meal-frame-phone .home-meal-screen .trailhead b {
  font-size: 16px;
}

.home-meal-frame-phone .home-meal-screen .trailhead small {
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.35;
}

@media (max-width: 390px) {
  .home-meal-frame-phone .home-meal-screen .forest-goal.trailhead {
    width: calc(100% - 4px);
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    padding: 23px 21px 17px;
  }

  .home-meal-frame-phone .home-meal-screen .trailhead .goal-reference-home {
    width: 63px;
    height: 63px;
  }
}

/* Seven home-meal chapter cards: soft paper colors with hand-drawn dot borders. */
.home-meal-frame-phone .home-meal-screen .chapter-marker {
  min-height: 80px;
  padding: 14px 18px 14px 16px;
  isolation: isolate;
  border: 0 !important;
  border-radius: 6px !important;
  background-color: var(--chapter-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: rotate(-.08deg);
}

.home-meal-frame-phone .home-meal-screen .chapter-marker::before,
.home-meal-frame-phone .home-meal-screen .chapter-marker::after {
  content: "";
  position: absolute;
  z-index: 3;
  display: block !important;
  pointer-events: none;
  opacity: 1;
  transform: none !important;
}

.home-meal-frame-phone .home-meal-screen .chapter-marker::before {
  top: 0;
  right: 12px;
  bottom: 0;
  left: 12px;
  width: auto;
  height: auto;
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at center, var(--chapter-soft) 0 1.8px, color-mix(in srgb, var(--chapter-accent) 78%, var(--chapter-soft)) 2px 3px, transparent 3.2px),
    radial-gradient(ellipse at center, var(--chapter-soft) 0 1.8px, color-mix(in srgb, var(--chapter-accent) 78%, var(--chapter-soft)) 2px 3px, transparent 3.2px) !important;
  background-position: left top 2px, left bottom 2px !important;
  background-size: 18px 8px, 18px 8px !important;
  background-repeat: round no-repeat, round no-repeat !important;
}

.home-meal-frame-phone .home-meal-screen .chapter-marker::after {
  top: 12px;
  right: 0;
  bottom: 12px;
  left: 0;
  width: auto;
  height: auto;
  background-color: transparent !important;
  background-image:
    radial-gradient(ellipse at center, var(--chapter-soft) 0 1.8px, color-mix(in srgb, var(--chapter-accent) 78%, var(--chapter-soft)) 2px 3px, transparent 3.2px),
    radial-gradient(ellipse at center, var(--chapter-soft) 0 1.8px, color-mix(in srgb, var(--chapter-accent) 78%, var(--chapter-soft)) 2px 3px, transparent 3.2px) !important;
  background-position: left 2px top, right 2px top !important;
  background-size: 8px 18px, 8px 18px !important;
  background-repeat: no-repeat round, no-repeat round !important;
}

.home-meal-frame-phone .home-meal-screen .chapter-number {
  border: 2px solid color-mix(in srgb, var(--chapter-accent) 72%, var(--chapter-soft));
  background-color: color-mix(in srgb, var(--chapter-accent) 84%, var(--chapter-soft));
  background-image: none;
  box-shadow: none;
}

.home-meal-frame-phone .home-meal-screen .chapter-1 {
  --chapter-accent: #5c9dce;
  --chapter-soft: #deeff9;
}

@media (max-width: 390px) {
  .home-meal-frame-phone .home-meal-screen .chapter-marker {
    padding: 14px 15px 14px 14px;
  }
}

/* Keep the center trail clean where checkpoint circles overlap card copy. */
.home-meal-frame-phone .home-meal-screen .map-step::after {
  display: none !important;
}

/* Home-meal finale: a wide hand-drawn party frame with a clear trophy and inset goal tag. */
.home-meal-frame-phone .home-meal-screen .forest-goal.summit {
  box-sizing: border-box;
  width: calc(100% - 8px);
  min-height: 118px;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 0 auto 30px;
  padding: 29px 28px 22px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/home-meal-finale-party-frame-v1.svg") !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: rotate(-.08deg);
}

.home-meal-frame-phone .home-meal-screen .summit .goal-kicker {
  z-index: 4;
  top: 18px;
  right: auto;
  left: 29px;
  padding: 3px 8px 2px;
  border: 1.5px solid #277fba;
  border-radius: 3px 5px 3px 4px;
  background: #fff25f !important;
  color: #273e54;
  font-size: 8px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(78, 185, 223, .32);
  transform: rotate(-1.2deg);
}

.home-meal-frame-phone .home-meal-screen .summit .goal-reference-art {
  width: 76px;
  height: 76px;
  margin-top: 12px;
  object-fit: contain;
  filter: saturate(2.05) contrast(1.22) brightness(.96) drop-shadow(1px 3px 0 rgba(39, 127, 186, .2));
  transform: rotate(-2deg);
}

.home-meal-frame-phone .home-meal-screen .summit > div {
  min-width: 0;
  padding-top: 8px;
}

.home-meal-frame-phone .home-meal-screen .summit b {
  display: block;
  color: #273e54;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}

.home-meal-frame-phone .home-meal-screen .summit small {
  display: block;
  max-width: 185px;
  margin-top: 5px;
  color: #596b73;
  font-size: 9px;
  line-height: 1.4;
}

@media (max-width: 390px) {
  .home-meal-frame-phone .home-meal-screen .forest-goal.summit {
    width: calc(100% - 4px);
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 11px;
    padding: 28px 23px 21px;
  }

  .home-meal-frame-phone .home-meal-screen .summit .goal-kicker {
    left: 24px;
  }

  .home-meal-frame-phone .home-meal-screen .summit .goal-reference-art {
    width: 70px;
    height: 70px;
  }
}

/* Keep the app header geometry identical across every signed-in page. */
.home-frame-phone,
.feed-frame-phone,
.home-meal-frame-phone,
.dessert-frame-phone,
.ranking-frame-phone,
.profile-frame-phone {
  grid-template-rows: 112px minmax(0, 1fr) 112px;
}

.home-frame-phone .top,
.feed-frame-phone .top,
.home-meal-frame-phone .top,
.dessert-frame-phone .top,
.ranking-frame-phone .top,
.profile-frame-phone .top {
  box-sizing: border-box;
  height: 112px;
  min-height: 112px;
  padding-top: max(32px, env(safe-area-inset-top));
  padding-bottom: 10px;
  align-items: center;
}

.home-frame-phone .header-profile-button,
.feed-frame-phone .header-profile-button,
.home-meal-frame-phone .header-profile-button,
.dessert-frame-phone .header-profile-button,
.ranking-frame-phone .header-profile-button,
.profile-frame-phone .header-profile-button {
  box-sizing: border-box;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  transform: none !important;
}

/* Local-only monochrome home concept: ?preview=mono-home-v1 */
.mono-preview-page {
  --mono-ink: #11110f;
  --mono-paper: #fbfbf7;
  --mono-white: #fff;
  --mono-muted: #696963;
  --mono-accent: #c8e62e;
  --mono-accent-soft: #eff8bd;
  --mono-hand-cut: polygon(.7% 1%, 27% .3%, 51% .8%, 76% .2%, 99% 1.1%, 99.4% 30%, 99% 61%, 99.3% 99%, 73% 99.5%, 46% 99%, 21% 99.6%, .7% 98.8%, .2% 72%, .6% 44%, .2% 18%);
  --mono-hand-frame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M1.4 1.5C22 .7 40 1.8 59 1.2C78 .6 92 .9 98.2 1.9C99.1 23 98.5 41 98.9 60C99.4 79 99 93 97.8 98.2C76 99.2 56 98.5 35 98.9C18 99.4 5.2 99 1.7 97.8C.8 76 1.6 56 1.1 37C.5 20 .9 5.8 1.4 1.5Z' fill='none' stroke='%2311110f' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mono-hand-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 6'%3E%3Cpath d='M0 3.2C13 1.8 27 4.4 43 2.7S76 4.5 96 2.8' fill='none' stroke='%2311110f' stroke-width='1.55' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --mono-hand-line-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 96'%3E%3Cpath d='M3.1 0C1.7 13 4.3 28 2.7 43S4.4 76 2.8 96' fill='none' stroke='%2311110f' stroke-width='1.45' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background:
    linear-gradient(rgba(17, 17, 15, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 15, .035) 1px, transparent 1px),
    #e9e9e4;
  background-size: 22px 22px;
}

.mono-preview-page::before,
.mono-preview-page::after,
.mono-preview-page .desk-note,
.mono-preview-page .desk-flower {
  display: none !important;
}

.home-frame-phone.home-mono-preview {
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper);
  background-image: none;
  box-shadow: 7px 7px 0 var(--mono-ink);
  transform: none;
}

.home-mono-preview .top {
  position: relative;
  height: auto;
  min-height: 0;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px;
  border-bottom: 2px solid transparent;
  background: var(--mono-white);
}

.home-mono-preview .top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 6px;
  display: block;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .top .brand {
  gap: 0;
}

.home-mono-preview .top .mark {
  display: none;
}

.home-mono-preview .top .brand-copy span {
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.home-mono-preview .top .brand h1 {
  margin-top: 4px;
  color: var(--mono-ink);
  font-size: 23px;
  font-weight: 900;
  line-height: .95;
}

.home-mono-preview .header-profile-button {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  overflow: visible;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  box-shadow: 2px 2px 0 var(--mono-ink);
}

.home-mono-preview .header-profile-button > img {
  object-position: center 28%;
  background: var(--mono-white);
  filter: contrast(1.08);
}

.home-mono-preview .header-profile-button > span {
  right: -4px;
  bottom: -3px;
  border: 1.5px solid var(--mono-ink);
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.home-mono-preview .content {
  padding: 18px 17px 30px;
  background:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px),
    var(--mono-paper);
  background-size: 100% 28px;
}

.home-mono-preview .mono-home-screen {
  display: grid;
  gap: 27px;
  padding: 0 0 8px;
  color: var(--mono-ink);
}

.home-mono-preview .mono-home-screen button {
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.home-mono-preview .mono-home-issue {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 21px 21px 19px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--mono-white);
  box-shadow: none;
  clip-path: var(--mono-hand-cut);
  transform: rotate(-.15deg);
}

.home-mono-preview .mono-home-issue::before {
  display: none;
}

.home-mono-preview .mono-home-issue::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  background: var(--mono-hand-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

.home-mono-preview .mono-issue-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 4px 9px;
  border-bottom: 1.5px solid transparent;
  color: var(--mono-muted);
  font-size: 7px;
  line-height: 1;
}

.home-mono-preview .mono-issue-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-issue-head span,
.home-mono-preview .mono-issue-head b {
  font-weight: 900;
}

.home-mono-preview .mono-title-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  align-items: end;
  gap: 8px;
  padding: 15px 4px 12px;
}

.home-mono-preview .mono-title-row > div {
  min-width: 0;
}

.home-mono-preview .mono-title-row span {
  display: inline-block;
  padding: 3px 5px 2px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 900;
}

.home-mono-preview .mono-title-row h2 {
  max-width: 100%;
  margin-top: 6px;
  overflow-wrap: anywhere;
  color: var(--mono-ink);
  font-size: 31px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .mono-title-row > strong {
  justify-self: end;
  color: var(--mono-ink);
  font-size: 43px;
  font-weight: 300;
  line-height: .82;
}

.home-mono-preview .mono-recipe-board {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  border-top: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
}

.home-mono-preview .mono-recipe-board::before,
.home-mono-preview .mono-recipe-board::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 2;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-recipe-board::before {
  top: -4px;
}

.home-mono-preview .mono-recipe-board::after {
  bottom: -4px;
}

.home-mono-preview .mono-recipe-board figure {
  position: relative;
  min-width: 0;
  min-height: 151px;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 22px;
  place-items: center;
  margin: 0;
  padding: 8px 7px 0;
  border-right: 1.5px solid transparent;
  background:
    radial-gradient(circle, rgba(17, 17, 15, .11) 1px, transparent 1.5px),
    var(--mono-white);
  background-size: 12px 12px;
}

.home-mono-preview .mono-recipe-board figure::after {
  content: "";
  position: absolute;
  top: 7px;
  right: -4px;
  bottom: 7px;
  z-index: 2;
  width: 6px;
  background: var(--mono-hand-line-vertical) center top / 6px 96px repeat-y;
  pointer-events: none;
}

.home-mono-preview .mono-recipe-board figure img {
  width: 126px;
  max-width: 100%;
  height: 112px;
  display: block;
  object-fit: contain;
  filter: contrast(1.05);
  transform: rotate(-2deg);
}

.home-mono-preview .mono-recipe-board figcaption {
  position: relative;
  align-self: stretch;
  width: calc(100% + 14px);
  display: grid;
  place-items: center;
  border-top: 1.5px solid transparent;
  background: var(--mono-accent-soft);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .mono-recipe-board figcaption::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-recipe-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 11px 9px 9px;
}

.home-mono-preview .mono-recipe-copy > span {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .mono-recipe-copy h3 {
  margin-top: 4px;
  color: var(--mono-ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.05;
}

.home-mono-preview .mono-recipe-copy dl {
  display: grid;
  gap: 0;
  margin: 10px 0 0;
  border-top: 1px solid var(--mono-ink);
}

.home-mono-preview .mono-recipe-copy dl > div {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--mono-ink);
}

.home-mono-preview .mono-recipe-copy dt,
.home-mono-preview .mono-recipe-copy dd {
  margin: 0;
  font-size: 8px;
  font-weight: 800;
}

.home-mono-preview .mono-recipe-copy dt {
  display: flex;
  align-items: center;
  gap: 4px;
}

.home-mono-preview .mono-recipe-copy p {
  margin-top: auto;
  padding-top: 8px;
  color: var(--mono-muted);
  font-size: 8px;
  line-height: 1.45;
}

.home-mono-preview .mono-primary-action {
  width: calc(100% - 8px);
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 11px 4px 1px;
  padding: 0 12px 0 15px;
  border: 2px solid var(--mono-ink);
  border-radius: 5px 8px 4px 7px / 7px 5px 8px 4px;
  background: var(--mono-ink);
  color: var(--mono-white) !important;
  box-shadow: none;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(.15deg);
}

.home-mono-preview .mono-primary-action svg {
  padding: 2px;
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.home-mono-preview .mono-section-head {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 1px 8px;
  border-bottom: 2px solid transparent;
}

.home-mono-preview .mono-section-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-section-head > div {
  min-width: 0;
}

.home-mono-preview .mono-section-head span {
  display: block;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .mono-section-head h3 {
  margin-top: 4px;
  color: var(--mono-ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .mono-section-head > b {
  padding: 3px 5px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.home-mono-preview .mono-instruction-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 11px;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: var(--mono-white);
  clip-path: var(--mono-hand-cut);
  transform: rotate(.08deg);
}

.home-mono-preview .mono-instruction-grid::after,
.home-mono-preview .mono-progress-section::after,
.home-mono-preview .mono-shortcuts button::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background: var(--mono-hand-frame) center / 100% 100% no-repeat;
  pointer-events: none;
}

.home-mono-preview .mono-instruction-grid button {
  position: relative;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-rows: 18px 35px 18px 20px;
  place-items: center;
  align-content: center;
  gap: 2px;
  padding: 8px 4px;
  border: 0;
  border-right: 1.5px solid transparent;
  border-radius: 0;
  background: transparent;
}

.home-mono-preview .mono-instruction-grid button:last-child {
  border-right: 0;
}

.home-mono-preview .mono-instruction-grid button:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 7px;
  right: -4px;
  bottom: 7px;
  z-index: 3;
  width: 6px;
  background: var(--mono-hand-line-vertical) center top / 6px 96px repeat-y;
  pointer-events: none;
}

.home-mono-preview .mono-instruction-grid button:nth-child(2) {
  background: var(--mono-white);
}

.home-mono-preview .mono-instruction-grid button > b {
  justify-self: start;
  align-self: start;
  padding-left: 5px;
  font-size: 16px;
  font-weight: 900;
}

.home-mono-preview .mono-instruction-grid button > span {
  display: grid;
  place-items: center;
}

.home-mono-preview .mono-instruction-grid button > strong {
  font-size: 12px;
  font-weight: 900;
}

.home-mono-preview .mono-instruction-grid button > small {
  color: var(--mono-muted);
  font-size: 7px;
  line-height: 1.3;
  text-align: center;
}

.home-mono-preview .mono-progress-section {
  position: relative;
  padding: 20px 18px 18px;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: var(--mono-white);
  box-shadow: none;
  clip-path: var(--mono-hand-cut);
  transform: rotate(-.12deg);
}

.home-mono-preview .mono-progress-copy {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  color: var(--mono-ink);
}

.home-mono-preview .mono-progress-copy strong {
  font-size: 13px;
  font-weight: 900;
}

.home-mono-preview .mono-progress-copy span {
  font-size: 8px;
  font-weight: 900;
}

.home-mono-preview .mono-progress-track {
  height: 13px;
  margin-top: 7px;
  overflow: hidden;
  border: 1.5px solid var(--mono-ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(17, 17, 15, .22) 16px 17px),
    var(--mono-white);
  clip-path: polygon(.5% 5%, 24% 1%, 51% 4%, 76% 0, 99.5% 5%, 100% 94%, 76% 100%, 49% 96%, 23% 100%, 0 95%);
}

.home-mono-preview .mono-progress-track i {
  height: 100%;
  display: block;
  background: var(--mono-accent);
  border-right: 1.5px solid var(--mono-ink);
}

.home-mono-preview .mono-progress-section > p {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 800;
}

.home-mono-preview .mono-progress-section > p b {
  color: var(--mono-ink);
  font-size: 10px;
}

.home-mono-preview .mono-progress-section > p span {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mono-preview .mono-stage-section .mono-section-head > button {
  min-height: 25px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 8px;
  font-weight: 900;
}

.home-mono-preview .mono-stage-list {
  position: relative;
  border-bottom: 2px solid transparent;
}

.home-mono-preview .mono-stage-list::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-stage-list > button {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 84px;
  display: grid;
  grid-template-columns: 42px 62px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 7px;
  padding: 9px 3px;
  border: 0;
  border-bottom: 1.5px solid transparent;
  border-radius: 0;
  background: rgba(255, 255, 255, .78);
  text-align: left;
}

.home-mono-preview .mono-stage-list > button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.home-mono-preview .mono-stage-list > button.available {
  background: rgba(255, 255, 255, .86);
}

.home-mono-preview .mono-stage-list > button.locked {
  opacity: .58;
}

.home-mono-preview .mono-stage-list > button > b {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-right: 1px solid var(--mono-ink);
  font-size: 23px;
  font-weight: 300;
}

.home-mono-preview .mono-stage-image {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
}

.home-mono-preview .mono-stage-image img {
  width: 53px;
  height: 53px;
  display: block;
  object-fit: contain;
  filter: saturate(1.05) contrast(1.04);
}

.home-mono-preview .mono-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-mono-preview .mono-stage-copy small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .mono-stage-copy strong {
  max-width: 100%;
  margin-top: 2px;
  overflow: hidden;
  color: var(--mono-ink);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mono-preview .mono-stage-copy em {
  margin-top: 3px;
  color: var(--mono-muted);
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.home-mono-preview .mono-stage-list > button > i {
  justify-self: end;
  padding: 3px 4px;
  border: 1px solid var(--mono-ink);
  background: var(--mono-white);
  font-size: 6px;
  font-style: normal;
  font-weight: 900;
}

.home-mono-preview .mono-stage-list > button.available > i {
  background: var(--mono-accent);
}

.home-mono-preview .mono-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.home-mono-preview .mono-shortcuts button {
  position: relative;
  min-width: 0;
  min-height: 88px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  grid-template-rows: 20px 1fr;
  align-items: center;
  gap: 3px;
  padding: 11px;
  border: 1.5px solid transparent;
  border-radius: 0;
  background: var(--mono-white);
  clip-path: var(--mono-hand-cut);
  text-align: left;
}

.home-mono-preview .mono-shortcuts button:first-child {
  transform: rotate(.25deg);
}

.home-mono-preview .mono-shortcuts button:last-child {
  background: var(--mono-white);
  transform: rotate(-.2deg);
}

.home-mono-preview .mono-shortcuts button span {
  grid-column: 1 / -1;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .mono-shortcuts button strong {
  min-width: 0;
  font-size: 12px;
  font-weight: 900;
}

.home-mono-preview .mono-tabs {
  position: relative;
  min-height: 0;
  padding: 7px 12px calc(9px + env(safe-area-inset-bottom));
  border-top: 2px solid transparent !important;
  background: var(--mono-white) !important;
}

.home-mono-preview .mono-tabs::before {
  content: "";
  position: absolute;
  top: -4px !important;
  right: 0 !important;
  left: 0 !important;
  height: 6px;
  display: block !important;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x !important;
  pointer-events: none;
}

.home-mono-preview .mono-tabs button,
.home-mono-preview .mono-tabs button:hover,
.home-mono-preview .mono-tabs button.active {
  grid-template-rows: 31px 14px;
  min-height: 55px;
  color: var(--mono-muted) !important;
}

.home-mono-preview .mono-tabs button.active {
  color: var(--mono-ink) !important;
}

.home-mono-preview .mono-tabs button::before {
  top: auto !important;
  bottom: 2px !important;
  width: 22px !important;
  height: 4px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.home-mono-preview .mono-tabs button.active::before {
  background: var(--mono-accent) !important;
}

.home-mono-preview .mono-tabs .tab-menu-icon.tab-menu-line,
.home-mono-preview .mono-tabs button.active .tab-menu-icon.tab-menu-line {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: currentColor;
}

.home-mono-preview .mono-tabs .tab-menu-line svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.8;
}

.home-mono-preview .mono-tabs .tab-menu-label,
.home-mono-preview .mono-tabs button:hover .tab-menu-label {
  color: var(--mono-muted) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
}

.home-mono-preview .mono-tabs button.active .tab-menu-label {
  color: var(--mono-ink) !important;
}

@media (max-width: 370px) {
  .home-frame-phone.home-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .home-mono-preview .top {
    padding-right: 15px;
    padding-left: 15px;
  }

  .home-mono-preview .content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .home-mono-preview .mono-title-row {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  .home-mono-preview .mono-title-row h2 {
    font-size: 28px;
  }

  .home-mono-preview .mono-title-row > strong {
    font-size: 38px;
  }

  .home-mono-preview .mono-recipe-board {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  }

  .home-mono-preview .mono-recipe-board figure img {
    width: 106px;
    height: 104px;
  }

  .home-mono-preview .mono-stage-list > button {
    grid-template-columns: 36px 55px minmax(0, 1fr) 38px;
    gap: 6px;
  }

  .home-mono-preview .mono-stage-image {
    width: 52px;
    height: 52px;
  }

  .home-mono-preview .mono-stage-image img {
    width: 48px;
    height: 48px;
  }
}

/* Local-only monochrome home-meal concept: ?preview=mono-home-v1 */
.home-meal-frame-phone.home-meal-mono-preview {
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper) !important;
  background-image: none !important;
  box-shadow: 7px 7px 0 var(--mono-ink);
}

.home-meal-frame-phone.home-meal-mono-preview::before {
  display: none !important;
}

.home-meal-mono-preview .top {
  height: auto !important;
  min-height: 0 !important;
}

.home-meal-mono-preview .top::after {
  right: 0 !important;
  bottom: -2px !important;
  left: 0 !important;
  height: 6px !important;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x !important;
}

.home-meal-mono-preview .content {
  padding: 18px 17px 8px;
  background:
    linear-gradient(rgba(17, 17, 15, .045) 1px, transparent 1px),
    var(--mono-paper) !important;
  background-size: 100% 24px !important;
  scrollbar-width: none;
}

.home-meal-mono-preview .content::-webkit-scrollbar {
  display: none;
}

.home-meal-mono-preview .home-meal-screen {
  --stage-ink: var(--mono-ink);
  --stage-coral: var(--mono-ink);
  --stage-lemon: var(--mono-accent);
  --stage-mint: var(--mono-accent);
  --stage-leaf: var(--mono-accent);
  width: 100%;
  gap: 20px;
  color: var(--mono-ink);
}

.home-meal-mono-preview .home-meal-screen,
.home-meal-mono-preview .home-meal-screen .home-route {
  background-color: transparent !important;
  background-image: none !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero {
  min-height: 258px;
  margin: 0;
  padding: 25px 22px 22px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero::before,
.home-meal-mono-preview .home-meal-screen > .home-meal-hero::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-top {
  padding: 0 !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-top > div:first-child {
  max-width: 220px;
}

.home-meal-mono-preview .home-meal-screen .screen-kicker {
  width: max-content;
  display: inline-flex;
  padding: 4px 7px 3px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.15;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero h2 {
  max-width: 220px;
  margin-top: 10px;
  color: var(--mono-ink);
  font-family: Pretendard, sans-serif;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.05;
  white-space: normal;
}

.home-meal-mono-preview .home-meal-screen .map-hero-lead {
  width: 176px;
  margin-top: 8px;
  color: var(--mono-muted);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.45;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-stat {
  top: 22px;
  right: 21px;
  padding: 5px 8px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 2px;
  background: var(--mono-white) !important;
  color: var(--mono-ink);
  box-shadow: none;
  font-size: 9px;
  font-weight: 850;
  transform: rotate(.7deg);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art {
  top: 78px;
  right: 19px;
  width: 108px;
  height: 103px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.28);
  opacity: 1;
  transform: rotate(-1.5deg);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .home-meal-summary {
  right: 21px;
  bottom: 28px;
  left: 21px;
  height: 52px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 42px;
  gap: 8px;
  padding: 7px 8px 7px 11px;
  border: 0;
  border-radius: 0;
  background: var(--mono-white) var(--mono-hand-frame) center / 100% 100% no-repeat;
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-summary b,
.home-meal-mono-preview .home-meal-summary span:nth-of-type(2) b {
  color: var(--mono-ink);
  font-family: Pretendard, sans-serif;
  font-size: 19px;
  font-weight: 900;
}

.home-meal-mono-preview .home-meal-summary small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 750;
}

.home-meal-mono-preview .home-meal-summary i {
  background: var(--mono-ink);
  opacity: .22;
}

.home-meal-mono-preview .home-meal-summary em {
  height: 32px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent) !important;
  color: var(--mono-ink);
  font-family: Pretendard, sans-serif;
  font-size: 10px;
  font-weight: 900;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-progress {
  right: 75px;
  bottom: 20px;
  left: 35px;
  height: 3px;
  border-radius: 0;
  background: rgba(17, 17, 15, .14);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-progress span {
  border-radius: 0;
  background: var(--mono-accent);
}

.home-meal-mono-preview .home-meal-screen .home-route {
  min-height: 2000px;
  padding: 8px 0 30px;
}

.home-meal-mono-preview .home-meal-screen .home-route::before {
  top: 64px;
  bottom: 64px;
  left: 50%;
  width: 6px;
  border: 0;
  border-radius: 0;
  background: var(--mono-hand-line-vertical) center top / 6px 96px repeat-y !important;
  box-shadow: none;
  opacity: .2;
  transform: translateX(-50%);
}

.home-meal-mono-preview .home-meal-screen .forest-prop,
.home-meal-mono-preview .home-meal-screen .current-stage-art,
.home-meal-mono-preview .home-meal-screen .map-step::before,
.home-meal-mono-preview .home-meal-screen .map-step::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker {
  width: calc(100% - 8px);
  min-height: 78px;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 11px;
  margin: 20px auto 22px;
  padding: 12px 17px 12px 14px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker::before,
.home-meal-mono-preview .home-meal-screen .chapter-marker::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen .chapter-number {
  width: 47px;
  height: 47px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--mono-ink) !important;
  border-radius: 50%;
  background: var(--mono-accent-soft) !important;
  color: var(--mono-ink);
  box-shadow: none;
  font-family: Pretendard, sans-serif;
  font-size: 22px;
  font-weight: 350;
}

.home-meal-mono-preview .home-meal-screen .chapter-copy {
  min-width: 0;
}

.home-meal-mono-preview .home-meal-screen .chapter-copy small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0;
}

.home-meal-mono-preview .home-meal-screen .chapter-copy b {
  margin-top: 2px;
  color: var(--mono-ink);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-meal-mono-preview .home-meal-screen .chapter-copy em {
  margin-top: 3px;
  overflow: hidden;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-meal-mono-preview .home-meal-screen .map-step,
.home-meal-mono-preview .home-meal-screen .map-step.left,
.home-meal-mono-preview .home-meal-screen .map-step.right,
.home-meal-mono-preview .home-meal-screen .map-step-status-available {
  width: 100%;
  min-height: 92px;
  margin: 0 0 13px;
  padding: 0;
  transform: none;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 29px;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 13px 12px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none !important;
}

.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
  background-color: var(--mono-accent-soft) !important;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop.locked {
  opacity: .58;
  filter: none;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop:hover:not(:disabled),
.home-meal-mono-preview .home-meal-screen .map-step.right .map-stop:hover:not(:disabled) {
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

.home-meal-mono-preview .home-meal-screen .node-dish,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
  width: 62px;
  height: 62px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white) !important;
  box-shadow: none !important;
}

.home-meal-mono-preview .home-meal-screen .node-dish::before {
  display: none;
}

.home-meal-mono-preview .home-meal-screen .node-sticker,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-sticker {
  width: 55px;
  height: 55px;
  background: transparent;
}

.home-meal-mono-preview .home-meal-screen .node-stage-art,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-stage-art {
  width: 53px;
  height: 53px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
}

.home-meal-mono-preview .home-meal-screen .node-dish .node-badge {
  right: 1px;
  bottom: 1px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white) !important;
  color: var(--mono-ink);
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-screen .node-dish .node-badge svg {
  width: 11px;
  height: 11px;
}

.home-meal-mono-preview .home-meal-screen .available .node-dish .node-badge {
  background: var(--mono-accent) !important;
}

.home-meal-mono-preview .home-meal-screen .node-copy {
  min-width: 0;
  text-align: left;
}

.home-meal-mono-preview .home-meal-screen .node-topline {
  gap: 8px;
}

.home-meal-mono-preview .home-meal-screen .node-num,
.home-meal-mono-preview .home-meal-screen .node-level {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0;
}

.home-meal-mono-preview .home-meal-screen .node-title,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-title {
  margin-top: 3px;
  overflow: hidden;
  color: var(--mono-ink);
  font-family: Pretendard, sans-serif;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-meal-mono-preview .home-meal-screen .node-state,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-state {
  width: max-content;
  margin-top: 4px;
  padding: 2px 4px;
  background: transparent;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 750;
}

.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-state {
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.home-meal-mono-preview .home-meal-screen .node-arrow,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  color: var(--mono-ink);
  opacity: 1;
}

.home-meal-mono-preview .home-meal-screen .forest-goal,
.home-meal-mono-preview .home-meal-screen .forest-goal.trailhead,
.home-meal-mono-preview .home-meal-screen .forest-goal.summit {
  box-sizing: border-box;
  width: calc(100% - 8px);
  min-height: 104px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 18px auto 8px;
  padding: 23px 21px 18px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none;
}

.home-meal-mono-preview .home-meal-screen .forest-goal.summit {
  min-height: 114px;
  margin-top: 0;
  background-color: var(--mono-accent-soft) !important;
}

.home-meal-mono-preview .home-meal-screen .forest-goal::before,
.home-meal-mono-preview .home-meal-screen .forest-goal::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen .goal-kicker,
.home-meal-mono-preview .home-meal-screen .summit .goal-kicker,
.home-meal-mono-preview .home-meal-screen .trailhead .goal-kicker {
  z-index: 3;
  top: 9px;
  right: 18px;
  left: auto;
  padding: 3px 6px;
  border: 0;
  border-radius: 0;
  background: var(--mono-accent) !important;
  color: var(--mono-ink);
  box-shadow: none;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0;
  transform: rotate(-.8deg);
}

.home-meal-mono-preview .home-meal-screen .goal-reference-art,
.home-meal-mono-preview .home-meal-screen .summit .goal-reference-art,
.home-meal-mono-preview .home-meal-screen .trailhead .goal-reference-home {
  width: 66px;
  height: 66px;
  margin: 0;
  object-fit: contain;
  filter: none;
  transform: rotate(-1.2deg);
}

.home-meal-mono-preview .home-meal-screen .map-route {
  padding-bottom: 8px;
}

.home-meal-mono-preview .home-meal-screen .forest-goal > div,
.home-meal-mono-preview .home-meal-screen .summit > div {
  min-width: 0;
  padding: 0;
}

.home-meal-mono-preview .home-meal-screen .forest-goal b,
.home-meal-mono-preview .home-meal-screen .summit b,
.home-meal-mono-preview .home-meal-screen .trailhead b {
  color: var(--mono-ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
}

.home-meal-mono-preview .home-meal-screen .forest-goal small,
.home-meal-mono-preview .home-meal-screen .summit small,
.home-meal-mono-preview .home-meal-screen .trailhead small {
  max-width: none;
  margin-top: 4px;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.4;
}

.home-meal-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 370px) {
  .home-meal-frame-phone.home-meal-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .home-meal-mono-preview .content {
    padding-right: 14px;
    padding-left: 14px;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero {
    min-height: 252px;
    padding-right: 19px !important;
    padding-left: 19px !important;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero h2 {
    font-size: 29px;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art {
    right: 15px;
    width: 98px;
    height: 98px;
  }

  .home-meal-mono-preview .home-meal-screen .map-step .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
    grid-template-columns: 62px minmax(0, 1fr) 27px;
    gap: 8px;
    padding-right: 11px;
    padding-left: 10px;
  }

  .home-meal-mono-preview .home-meal-screen .node-dish,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
    width: 58px;
    height: 58px;
  }

  .home-meal-mono-preview .home-meal-screen .node-sticker,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .node-sticker,
  .home-meal-mono-preview .home-meal-screen .node-stage-art,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .node-stage-art {
    width: 51px;
    height: 51px;
  }
}

/* Local-only monochrome dessert concept: ?preview=mono-home-v1 */
.dessert-frame-phone.dessert-mono-preview {
  --dessert-ink: var(--mono-ink);
  --dessert-muted: var(--mono-muted);
  --dessert-line: var(--mono-ink);
  --dessert-berry: var(--mono-ink);
  --dessert-pink: var(--mono-ink);
  --dessert-pink-soft: var(--mono-white);
  --dessert-frame-line: var(--mono-ink);
  --dessert-yellow: var(--mono-accent);
  --dessert-yellow-soft: var(--mono-accent-soft);
  --dessert-mint: var(--mono-ink);
  --dessert-mint-soft: var(--mono-white);
  --dessert-paper: var(--mono-white);
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper) !important;
  background-image: none !important;
  box-shadow: 7px 7px 0 var(--mono-ink);
}

.dessert-frame-phone.dessert-mono-preview::before {
  display: none !important;
}

.dessert-mono-preview .top {
  height: auto !important;
  min-height: 0 !important;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px !important;
  background: var(--mono-white) !important;
}

.dessert-mono-preview .top::after {
  right: 0;
  bottom: -2px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x !important;
  opacity: 1;
}

.dessert-mono-preview .content {
  padding: 18px 17px 30px !important;
  background:
    linear-gradient(rgba(17, 17, 15, .035) 1px, transparent 1px),
    var(--mono-paper) !important;
  background-size: 100% 23px !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.dessert-mono-preview .content::-webkit-scrollbar {
  display: none;
}

.dessert-mono-preview .dessert-screen {
  width: 100%;
  padding: 0 0 12px;
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.dessert-mono-preview .dessert-screen,
.dessert-mono-preview .dessert-screen .map-route.dessert {
  background: transparent !important;
  background-image: none !important;
}

.dessert-mono-preview .dessert-screen .map-hero.dessert {
  top: 0 !important;
  box-sizing: border-box;
  min-height: 264px;
  margin: 0;
  padding: 27px 23px 24px !important;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.dessert-mono-preview .dessert-screen .map-hero.dessert::before,
.dessert-mono-preview .dessert-screen .map-hero.dessert::after {
  display: none !important;
  content: none !important;
}

.dessert-mono-preview .dessert-screen .map-hero-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  align-items: start;
}

.dessert-mono-preview .dessert-screen .map-hero-top > div:first-child {
  display: contents;
}

.dessert-mono-preview .dessert-screen .screen-kicker {
  grid-row: 1;
  grid-column: 1;
  width: max-content;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
  overflow: visible;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: clip;
  transform: rotate(-.7deg);
}

#app .dessert-frame-phone.dessert-mono-preview .dessert-screen .map-hero h2 {
  grid-row: 2;
  grid-column: 1 / -1;
  margin: 12px 0 0;
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 31px;
  font-weight: 950;
  line-height: .98;
  letter-spacing: 0;
  white-space: normal;
}

.dessert-mono-preview .dessert-screen .map-hero-lead {
  grid-row: 3;
  grid-column: 1;
  max-width: 155px;
  margin: 7px 0 0;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.45;
}

.dessert-mono-preview .dessert-screen .map-stat {
  position: static;
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  align-self: start;
  gap: 4px;
  margin: 0;
  padding: 4px 6px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
  box-shadow: none !important;
  font-size: 7px;
  font-weight: 850;
  line-height: 1;
  transform: rotate(.7deg);
}

.dessert-mono-preview .dessert-screen .map-reference-art.dessert-hero-cake {
  top: 86px;
  right: 20px;
  width: 92px;
  height: 78px;
  padding: 0;
  border: 0;
  background: transparent;
  object-fit: contain;
  filter: grayscale(1) contrast(1.55) brightness(.82);
  transform: rotate(1.5deg);
}

.dessert-mono-preview .dessert-screen .dessert-summary {
  right: 21px;
  bottom: 38px;
  left: 21px;
  box-sizing: border-box;
  height: 48px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 31px;
  gap: 8px;
  padding: 8px 0 6px;
  border: 0;
  background: transparent;
  background-image: none;
}

.dessert-mono-preview .dessert-screen .dessert-summary::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: var(--mono-hand-line) left center / 96px 5px repeat-x;
}

.dessert-mono-preview .dessert-screen .dessert-summary > span {
  min-width: 0;
  min-height: 25px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
}

.dessert-mono-preview .dessert-screen .dessert-summary > i {
  display: none;
}

.dessert-mono-preview .dessert-screen .dessert-summary b,
.dessert-mono-preview .dessert-screen .dessert-summary span:nth-of-type(2) b {
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 18px;
  font-weight: 950;
  line-height: 1;
}

.dessert-mono-preview .dessert-screen .dessert-summary small {
  overflow: visible;
  color: var(--mono-muted);
  font-size: 6.5px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: clip;
  white-space: normal;
}

.dessert-mono-preview .dessert-screen .dessert-summary em {
  width: 29px;
  height: 29px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
}

.dessert-mono-preview .dessert-screen .map-progress {
  right: 21px;
  bottom: 25px;
  left: 21px;
  z-index: 3;
  display: block;
  height: 5px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
}

.dessert-mono-preview .dessert-screen .map-progress span {
  background: var(--mono-accent);
}

.dessert-mono-preview .dessert-screen .map-route.dessert {
  box-sizing: border-box;
  width: 100%;
  min-height: 100%;
  padding: 10px 0 28px;
}

.dessert-mono-preview .dessert-screen .map-route.dessert::before {
  top: 24px;
  bottom: 28px;
  left: 50%;
  width: 6px;
  border: 0;
  border-radius: 0;
  background: var(--mono-hand-line-vertical) center top / 6px 96px repeat-y;
  opacity: .34;
  transform: translateX(-50%);
}

.dessert-mono-preview .dessert-screen .forest-prop,
.dessert-mono-preview .dessert-screen .current-stage-art,
.dessert-mono-preview .dessert-screen .map-step::before,
.dessert-mono-preview .dessert-screen .map-step::after {
  display: none !important;
}

.dessert-mono-preview .dessert-screen .chapter-marker {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: calc(100% - 8px);
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px auto 12px;
  padding: 14px 17px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none;
  contain-intrinsic-size: auto 57px;
}

.dessert-mono-preview .dessert-screen .chapter-marker::after {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 7px;
  left: 14px;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
  opacity: .28;
}

.dessert-mono-preview .dessert-screen .chapter-marker span {
  position: relative;
  z-index: 1;
  padding: 3px 5px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
}

.dessert-mono-preview .dessert-screen .chapter-marker b {
  position: relative;
  z-index: 1;
  color: var(--mono-ink);
  font-size: 13px;
  font-weight: 900;
}

.dessert-mono-preview .dessert-screen .map-step,
.dessert-mono-preview .dessert-screen .map-step.left,
.dessert-mono-preview .dessert-screen .map-step.right {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 0;
  margin: 0 0 11px;
  padding: 0;
  contain-intrinsic-size: auto 90px;
}

.dessert-mono-preview .dessert-screen .map-stop,
.dessert-mono-preview .dessert-screen .map-stop.left,
.dessert-mono-preview .dessert-screen .map-stop.right,
.dessert-mono-preview .dessert-screen .map-stop.available,
.dessert-mono-preview .dessert-screen .map-stop.cleared,
.dessert-mono-preview .dessert-screen .map-stop.skipped,
.dessert-mono-preview .dessert-screen .map-stop.locked {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: grid;
  grid-template-columns: 44px 61px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin: 0 !important;
  padding: 12px 15px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none !important;
}

.dessert-mono-preview .dessert-screen .map-stop.available {
  background-color: var(--mono-accent-soft) !important;
}

.dessert-mono-preview .dessert-screen .map-stop.cleared {
  background-color: #f2f2ed !important;
}

.dessert-mono-preview .dessert-screen .map-stop.locked {
  color: var(--mono-muted);
  opacity: .58;
}

.dessert-mono-preview .dessert-screen .map-stop:hover:not(:disabled) {
  transform: translateY(-1px) rotate(-.15deg) !important;
}

.dessert-mono-preview .dessert-screen .dessert-node-number,
.dessert-mono-preview .dessert-screen .map-stop.locked .dessert-node-number {
  display: block;
  color: currentColor;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 35px;
  font-weight: 300;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  transform: none;
}

.dessert-mono-preview .dessert-screen .node-dish {
  width: 59px;
  height: 59px;
  box-sizing: border-box;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  box-shadow: none !important;
  transform: rotate(-.7deg);
}

.dessert-mono-preview .dessert-screen .node-sticker {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--mono-white);
}

.dessert-mono-preview .dessert-screen .node-stage-art {
  width: 52px;
  height: 52px;
  max-width: 52px;
  max-height: 52px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.55) brightness(.82);
}

.dessert-mono-preview .dessert-screen .map-stop .node-copy {
  min-width: 0;
  display: flex;
  align-self: stretch;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  text-align: left;
}

.dessert-mono-preview .dessert-screen .node-num {
  color: var(--mono-muted);
  font-size: 6.5px;
  font-weight: 900;
  line-height: 1;
}

.dessert-mono-preview .dessert-screen .node-title {
  width: 100%;
  margin-top: 5px;
  color: var(--mono-ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.dessert-mono-preview .dessert-screen .node-state,
.dessert-mono-preview .dessert-screen .available .node-state {
  width: max-content;
  margin-top: 5px;
  padding: 2px 4px;
  background: transparent;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 750;
}

.dessert-mono-preview .dessert-screen .available .node-state {
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.dessert-mono-preview .dessert-screen .node-state svg {
  width: 7px;
  height: 7px;
}

.dessert-mono-preview .dessert-screen .forest-goal,
.dessert-mono-preview .dessert-screen .forest-goal.trailhead,
.dessert-mono-preview .dessert-screen .forest-goal.summit {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: calc(100% - 8px);
  min-height: 105px;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 18px auto 23px;
  padding: 24px 20px 17px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none;
}

.dessert-mono-preview .dessert-screen .forest-goal.summit {
  min-height: 112px;
  margin-top: 0;
  background-color: var(--mono-accent-soft) !important;
}

.dessert-mono-preview .dessert-screen .forest-goal.trailhead {
  margin-top: 20px;
  margin-bottom: 0;
}

.dessert-mono-preview .dessert-screen .forest-goal::before,
.dessert-mono-preview .dessert-screen .forest-goal::after {
  display: none !important;
}

.dessert-mono-preview .dessert-screen .goal-kicker {
  z-index: 3;
  top: 10px;
  right: 18px;
  left: auto;
  padding: 3px 5px;
  border: 0;
  border-radius: 0;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
  transform: rotate(-.7deg);
}

.dessert-mono-preview .dessert-screen .goal-reference-art {
  position: static;
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.6) brightness(.78);
  transform: rotate(-1deg);
}

.dessert-mono-preview .dessert-screen .forest-goal > div {
  min-width: 0;
  padding: 0;
}

.dessert-mono-preview .dessert-screen .forest-goal b {
  color: var(--mono-ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
}

.dessert-mono-preview .dessert-screen .forest-goal small {
  max-width: none;
  margin-top: 4px;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.4;
}

.dessert-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 370px) {
  .dessert-frame-phone.dessert-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .dessert-mono-preview .content {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .dessert-mono-preview .dessert-screen .map-hero.dessert {
    min-height: 252px;
    padding-right: 19px !important;
    padding-left: 19px !important;
  }

  #app .dessert-frame-phone.dessert-mono-preview .dessert-screen .map-hero h2 {
    font-size: 28px;
  }

  .dessert-mono-preview .dessert-screen .map-reference-art.dessert-hero-cake {
    top: 84px;
    right: 16px;
    width: 83px;
    height: 71px;
  }

  .dessert-mono-preview .dessert-screen .dessert-summary {
    right: 18px;
    left: 18px;
    gap: 5px;
  }

  .dessert-mono-preview .dessert-screen .map-progress {
    right: 18px;
    left: 18px;
  }

  .dessert-mono-preview .dessert-screen .map-stop,
  .dessert-mono-preview .dessert-screen .map-stop.left,
  .dessert-mono-preview .dessert-screen .map-stop.right,
  .dessert-mono-preview .dessert-screen .map-stop.available,
  .dessert-mono-preview .dessert-screen .map-stop.cleared,
  .dessert-mono-preview .dessert-screen .map-stop.skipped,
  .dessert-mono-preview .dessert-screen .map-stop.locked {
    grid-template-columns: 38px 55px minmax(0, 1fr);
    gap: 8px;
    padding-right: 11px;
    padding-left: 10px;
  }

  .dessert-mono-preview .dessert-screen .dessert-node-number {
    font-size: 31px;
  }

  .dessert-mono-preview .dessert-screen .node-dish {
    width: 53px;
    height: 53px;
  }

  .dessert-mono-preview .dessert-screen .node-sticker,
  .dessert-mono-preview .dessert-screen .node-stage-art {
    width: 46px;
    height: 46px;
    max-width: 46px;
    max-height: 46px;
  }
}

/* Local-only monochrome ranking concept: ?preview=mono-home-v1 */
.ranking-frame-phone.ranking-mono-preview {
  --rank-ink: var(--mono-ink);
  --rank-muted: var(--mono-muted);
  --rank-line: var(--mono-ink);
  --rank-coral: var(--mono-ink);
  --rank-coral-soft: var(--mono-white);
  --rank-orange: var(--mono-ink);
  --rank-orange-soft: var(--mono-white);
  --rank-yellow: var(--mono-accent);
  --rank-yellow-soft: var(--mono-accent-soft);
  --rank-paper: var(--mono-white);
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper) !important;
  background-image: none !important;
  box-shadow: 7px 7px 0 var(--mono-ink);
}

.ranking-frame-phone.ranking-mono-preview::before {
  display: none !important;
}

.ranking-mono-preview .top {
  height: auto !important;
  min-height: 0 !important;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px !important;
  background: var(--mono-white) !important;
}

.ranking-mono-preview .top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 6px;
  display: block;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x !important;
  pointer-events: none;
}

.ranking-mono-preview .content {
  padding: 18px 17px 8px !important;
  background:
    linear-gradient(rgba(17, 17, 15, .035) 1px, transparent 1px),
    var(--mono-paper) !important;
  background-size: 100% 23px !important;
  scrollbar-width: none;
}

.ranking-mono-preview .content::-webkit-scrollbar {
  display: none;
}

.ranking-mono-preview .ranking-screen {
  width: 100%;
  padding: 0 0 12px;
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.ranking-mono-preview .ranking-heading {
  position: relative;
  box-sizing: border-box;
  min-height: 127px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 13px;
  align-items: center;
  margin: 0;
  padding: 23px 22px;
  overflow: hidden;
  border: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white);
  background-image: var(--mono-hand-frame);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.ranking-mono-preview .ranking-heading::after {
  display: none;
}

.ranking-mono-preview .ranking-heading .screen-kicker {
  display: inline-block;
  width: max-content;
  padding: 4px 6px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-.7deg);
}

.ranking-mono-preview .ranking-heading h2 {
  margin: 10px 0 5px;
  color: var(--mono-ink);
  font-size: 29px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.ranking-mono-preview .ranking-heading h2 em {
  color: var(--mono-ink);
  font-style: normal;
  box-shadow: inset 0 -8px 0 var(--mono-accent);
}

.ranking-mono-preview .ranking-heading p {
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.45;
}

.ranking-mono-preview .ranking-issue {
  box-sizing: border-box;
  width: 52px;
  height: 63px;
  display: grid;
  grid-template-rows: 13px 24px 12px;
  place-items: center;
  align-content: center;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-accent-soft);
  background-image: var(--mono-hand-frame);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--mono-ink);
  box-shadow: none;
  transform: rotate(1.2deg);
}

.ranking-mono-preview .ranking-issue span,
.ranking-mono-preview .ranking-issue small {
  font-size: 6px;
  font-weight: 900;
  line-height: 1;
}

.ranking-mono-preview .ranking-issue strong {
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.ranking-mono-preview .ranking-segment {
  box-sizing: border-box;
  min-height: 45px;
  margin: 13px 0 14px;
  padding: 4px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.ranking-mono-preview .ranking-segment button,
.ranking-mono-preview .ranking-segment button:hover,
.ranking-mono-preview .ranking-segment button.active {
  min-height: 37px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--mono-muted);
  box-shadow: none !important;
  font-size: 10px;
  font-weight: 850;
}

.ranking-mono-preview .ranking-segment button.active {
  background: var(--mono-ink) !important;
  color: var(--mono-white);
}

.ranking-mono-preview .podium {
  position: relative;
  box-sizing: border-box;
  min-height: 235px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 0;
  margin: 0;
  padding: 47px 15px 14px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  color: var(--mono-ink);
  transform: none !important;
}

.ranking-mono-preview .podium::before {
  display: none !important;
}

.ranking-mono-preview .podium-head {
  position: absolute;
  z-index: 3;
  top: 13px;
  right: 17px;
  left: 17px;
  min-height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  color: var(--mono-ink);
}

.ranking-mono-preview .podium-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
}

.ranking-mono-preview .podium-head span {
  padding: 3px 5px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
}

.ranking-mono-preview .podium-head small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.ranking-mono-preview .podium-person,
.ranking-mono-preview .podium-person.first,
.ranking-mono-preview .podium-person.second,
.ranking-mono-preview .podium-person.third {
  position: relative;
  min-width: 0;
  min-height: 152px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 5px 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mono-ink);
  transform: none;
}

.ranking-mono-preview .podium-person.first {
  min-height: 175px;
}

.ranking-mono-preview .podium-person + .podium-person::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--mono-hand-line-vertical) center top / 5px 96px repeat-y;
  opacity: .26;
}

.ranking-mono-preview .podium-avatar,
.ranking-mono-preview .podium-person.first .podium-avatar {
  position: relative;
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  margin: 0 auto 8px;
  overflow: visible;
  border: 1.5px solid var(--mono-ink) !important;
  border-radius: 50% !important;
  background: var(--mono-white) !important;
  box-shadow: none !important;
}

.ranking-mono-preview .podium-person.first .podium-avatar {
  width: 66px;
  height: 66px;
  background: var(--mono-accent-soft) !important;
}

.ranking-mono-preview .podium-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.4);
}

.ranking-mono-preview .podium-rank,
.ranking-mono-preview .podium-person.first .podium-rank {
  right: -4px;
  bottom: -4px;
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 900;
}

.ranking-mono-preview .podium-person strong {
  width: 100%;
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
}

.ranking-mono-preview .podium-clear {
  margin-top: 3px;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
  line-height: 1.2;
}

.ranking-mono-preview .podium-block,
.ranking-mono-preview .podium-person.first .podium-block,
.ranking-mono-preview .podium-person.second .podium-block,
.ranking-mono-preview .podium-person.third .podium-block {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - 6px);
  height: 29px !important;
  min-height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 8px 3px 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--mono-ink);
}

.ranking-mono-preview .podium-block::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
  opacity: .5;
}

.ranking-mono-preview .podium-block::after {
  display: none;
}

.ranking-mono-preview .podium-block > span:last-child {
  font-size: 7px;
  font-weight: 900;
}

.ranking-mono-preview .podium-emblem,
.ranking-mono-preview .podium-person.first .podium-emblem {
  position: static;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mono-ink);
  transform: none;
}

.ranking-mono-preview .my-rank {
  box-sizing: border-box;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  gap: 10px;
  margin-top: 14px;
  padding: 15px 17px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-accent-soft) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.ranking-mono-preview .my-rank-mark {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  box-shadow: none !important;
}

.ranking-mono-preview .my-rank-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.4);
}

.ranking-mono-preview .my-rank-copy {
  min-width: 0;
}

.ranking-mono-preview .my-rank .my-rank-kicker {
  margin: 0 0 4px;
  color: var(--mono-muted);
  font-size: 6px;
  font-weight: 900;
}

.ranking-mono-preview .my-rank strong {
  color: var(--mono-ink);
  font-size: 11px;
  font-weight: 900;
}

.ranking-mono-preview .my-rank .my-rank-detail {
  margin-top: 4px;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.ranking-mono-preview .my-rank > .rank-score {
  width: 39px;
  height: 34px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1.5px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 12px;
  font-weight: 950;
}

.ranking-mono-preview .rank-list {
  box-sizing: border-box;
  gap: 0;
  margin-top: 14px;
  padding: 13px 16px 10px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none !important;
  transform: none !important;
}

.ranking-mono-preview .rank-list-head {
  position: relative;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 9px;
  border: 0;
  background: transparent;
}

.ranking-mono-preview .rank-list-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
}

.ranking-mono-preview .rank-list-head span {
  display: inline-block;
  width: max-content;
  padding: 3px 5px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 6px;
  font-weight: 900;
}

.ranking-mono-preview .rank-list-head strong {
  margin-top: 4px;
  color: var(--mono-ink);
  font-size: 12px;
  font-weight: 900;
}

.ranking-mono-preview .rank-list-head small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.ranking-mono-preview .rank-row {
  position: relative;
  min-height: 55px;
  grid-template-columns: 23px 36px minmax(0, 1fr) 33px;
  gap: 8px;
  padding: 9px 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

.ranking-mono-preview .rank-row:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
  opacity: .25;
}

.ranking-mono-preview .rank-row .avatar {
  width: 36px;
  height: 36px;
  overflow: hidden;
  border: 1.25px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white) !important;
  box-shadow: none;
}

.ranking-mono-preview .rank-row .avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.4);
}

.ranking-mono-preview .rank-number {
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 900;
}

.ranking-mono-preview .rank-person strong {
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 900;
}

.ranking-mono-preview .rank-person span {
  margin-top: 3px;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.ranking-mono-preview .rank-list .rank-score {
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 900;
}

.ranking-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 370px) {
  .ranking-frame-phone.ranking-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .ranking-mono-preview .content {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .ranking-mono-preview .ranking-heading {
    grid-template-columns: minmax(0, 1fr) 49px;
    gap: 9px;
    min-height: 122px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .ranking-mono-preview .ranking-heading h2 {
    font-size: 26px;
  }

  .ranking-mono-preview .ranking-issue {
    width: 49px;
    height: 60px;
  }

  .ranking-mono-preview .podium {
    min-height: 226px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .ranking-mono-preview .podium-person,
  .ranking-mono-preview .podium-person.second,
  .ranking-mono-preview .podium-person.third {
    min-height: 145px;
    padding-right: 3px;
    padding-left: 3px;
  }

  .ranking-mono-preview .podium-person.first {
    min-height: 166px;
  }

  .ranking-mono-preview .podium-avatar,
  .ranking-mono-preview .podium-person.first .podium-avatar {
    width: 49px;
    height: 49px;
  }

  .ranking-mono-preview .podium-person.first .podium-avatar {
    width: 59px;
    height: 59px;
  }

  .ranking-mono-preview .my-rank {
    grid-template-columns: 39px minmax(0, 1fr) 37px;
    gap: 8px;
    padding-right: 13px;
    padding-left: 13px;
  }

  .ranking-mono-preview .my-rank-mark {
    width: 39px;
    height: 39px;
  }

  .ranking-mono-preview .my-rank > .rank-score {
    width: 36px;
  }

  .ranking-mono-preview .rank-list {
    padding-right: 13px;
    padding-left: 13px;
  }
}

/* Local-only monochrome feed concept: ?preview=mono-home-v1 */
.feed-frame-phone.feed-mono-preview {
  --feed-navy: var(--mono-ink);
  --feed-blue: var(--mono-ink);
  --feed-blue-deep: var(--mono-ink);
  --feed-blue-soft: var(--mono-white);
  --feed-yellow: var(--mono-accent);
  --feed-paper: var(--mono-white);
  --feed-muted: var(--mono-muted);
  --feed-line: var(--mono-ink);
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper) !important;
  background-image: none !important;
  box-shadow: 7px 7px 0 var(--mono-ink);
}

.feed-frame-phone.feed-mono-preview::before {
  display: none !important;
}

.feed-mono-preview .top {
  height: auto !important;
  min-height: 0 !important;
  padding: calc(16px + env(safe-area-inset-top)) 18px 12px !important;
  background: var(--mono-white) !important;
}

.feed-mono-preview .top::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 6px;
  display: block;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x !important;
  pointer-events: none;
}

.feed-mono-preview .content {
  padding: 18px 17px 30px !important;
  background:
    linear-gradient(rgba(17, 17, 15, .035) 1px, transparent 1px),
    var(--mono-paper) !important;
  background-size: 100% 23px !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.feed-mono-preview .content::-webkit-scrollbar {
  display: none;
}

.feed-mono-preview .feed-screen {
  width: 100%;
  padding: 0 0 12px;
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.feed-mono-preview .feed-filter,
.feed-mono-preview .feed-friends,
.feed-mono-preview .feed-list {
  background: transparent !important;
}

.feed-mono-preview .feed-pull-refresh {
  top: -34px;
  min-width: 128px;
  height: 33px;
  padding: 3px 9px 3px 4px;
  gap: 6px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background: var(--mono-white);
  color: var(--mono-ink);
  box-shadow: none;
}

.feed-mono-preview .feed-pull-refresh > span {
  width: 23px;
  height: 23px;
  border: 1.25px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.feed-mono-preview .feed-pull-refresh small {
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 850;
}

.feed-mono-preview .content.feed-pull-ready .feed-pull-refresh > span {
  background: var(--mono-ink);
  color: var(--mono-white);
}

.feed-mono-preview .feed-heading {
  position: relative;
  box-sizing: border-box;
  min-height: 130px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 49px;
  gap: 13px;
  align-items: center;
  margin: 0;
  padding: 23px 22px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  box-shadow: none;
}

.feed-mono-preview .feed-heading .screen-kicker {
  display: inline-block;
  width: max-content;
  padding: 4px 6px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-.7deg);
}

.feed-mono-preview .feed-heading h2 {
  margin: 10px 0 5px;
  color: var(--mono-ink);
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
}

.feed-mono-preview .feed-heading p {
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 650;
  line-height: 1.45;
}

.feed-mono-preview .feed-heading-icon {
  box-sizing: border-box;
  width: 48px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-accent-soft) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  color: var(--mono-ink);
  transform: rotate(1deg);
}

.feed-mono-preview .feed-filter {
  box-sizing: border-box;
  width: 100%;
  min-height: 45px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 13px 0 15px;
  padding: 4px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white) !important;
  background-image: var(--mono-hand-frame) !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

.feed-mono-preview .feed-filter button,
.feed-mono-preview .feed-filter button:hover,
.feed-mono-preview .feed-filter button.active {
  min-height: 37px;
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: var(--mono-muted);
  box-shadow: none;
  font-size: 10px;
  font-weight: 850;
}

.feed-mono-preview .feed-filter button + button {
  border-left: 0;
}

.feed-mono-preview .feed-filter button.active {
  background: var(--mono-ink) !important;
  color: var(--mono-white);
}

.feed-mono-preview .feed-friends {
  position: relative;
  padding: 2px 0 19px;
  border: 0;
}

.feed-mono-preview .feed-friends::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 5px;
  background: var(--mono-hand-line) left center / 96px 5px repeat-x;
}

.feed-mono-preview .feed-section-top,
.feed-mono-preview .feed-list-head {
  align-items: flex-end;
  margin-bottom: 11px;
}

.feed-mono-preview .feed-section-top span,
.feed-mono-preview .feed-list-head span {
  display: inline-block;
  width: max-content;
  padding: 3px 5px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 6px;
  font-weight: 900;
}

.feed-mono-preview .feed-section-top h3,
.feed-mono-preview .feed-list-head h3 {
  margin-top: 5px;
  color: var(--mono-ink);
  font-size: 16px;
  font-weight: 900;
}

.feed-mono-preview .feed-section-top small,
.feed-mono-preview .feed-list-head small {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.feed-mono-preview .friend-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.feed-mono-preview .friend-card {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  min-height: 119px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 12px 6px 9px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white);
  background-image: var(--mono-hand-frame);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}

.feed-mono-preview .friend-card > img {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  filter: grayscale(1) contrast(1.4);
}

.feed-mono-preview .friend-card > div {
  width: 100%;
  min-width: 0;
  margin-top: 7px;
  text-align: center;
}

.feed-mono-preview .friend-card strong,
.feed-mono-preview .friend-card span {
  width: 100%;
  color: var(--mono-ink);
}

.feed-mono-preview .friend-card strong {
  font-size: 9px;
  font-weight: 900;
}

.feed-mono-preview .friend-card span {
  margin-top: 3px;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.feed-mono-preview .friend-card button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 23px;
  height: 23px;
  border: 1.25px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent);
  color: var(--mono-ink);
  box-shadow: none;
}

.feed-mono-preview .friend-card button svg {
  width: 11px;
  height: 11px;
}

.feed-mono-preview .feed-list {
  gap: 14px;
  padding: 17px 0 4px;
}

.feed-mono-preview .feed-list-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border: 0;
}

.feed-mono-preview .feed-list-head::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
}

.feed-mono-preview .feed-post {
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white);
  background-image: var(--mono-hand-frame);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: none;
}

.feed-mono-preview .feed-post > header {
  min-height: 54px;
  padding: 11px 14px 9px;
  border: 0;
}

.feed-mono-preview .feed-post > header > img {
  width: 35px;
  height: 35px;
  border: 1.25px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  filter: grayscale(1) contrast(1.4);
}

.feed-mono-preview .feed-post > header strong {
  color: var(--mono-ink);
  font-size: 10px;
  font-weight: 900;
}

.feed-mono-preview .feed-post > header span {
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 700;
}

.feed-mono-preview .feed-post > header em {
  padding: 3px 5px;
  border: 1px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-accent-soft);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 800;
}

.feed-mono-preview .feed-post-photo {
  display: block;
  width: calc(100% - 24px);
  aspect-ratio: 4 / 3;
  margin: 0 12px;
  border: 1.5px solid var(--mono-ink);
  background: var(--mono-paper);
  object-fit: cover;
  filter: none;
}

.feed-mono-preview .feed-post-body {
  padding: 11px 14px 15px;
}

.feed-mono-preview .feed-post-actions {
  position: relative;
  margin-bottom: 9px;
  padding-bottom: 9px;
}

.feed-mono-preview .feed-post-actions::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--mono-hand-line) left center / 96px 4px repeat-x;
  opacity: .25;
}

.feed-mono-preview .feed-post-actions button,
.feed-mono-preview .feed-post-actions button.liked,
.feed-mono-preview .feed-post-actions > span {
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 850;
}

.feed-mono-preview .feed-post-actions button,
.feed-mono-preview .feed-post-actions button.liked {
  min-width: 74px;
  justify-content: flex-start;
  padding: 3px 5px;
}

.feed-mono-preview .feed-post-actions button > svg {
  fill: none;
  stroke: currentColor;
}

.feed-mono-preview .feed-post-actions button.liked {
  background: var(--mono-accent) !important;
}

.feed-mono-preview .feed-post-actions button.liked > svg {
  fill: var(--mono-ink);
}

.feed-mono-preview .feed-like-burst i,
.feed-mono-preview .feed-like-burst i:nth-child(2n) {
  color: var(--mono-ink);
}

.feed-mono-preview .feed-like-burst i:nth-child(3n) {
  color: var(--mono-accent);
}

.feed-mono-preview .feed-post-body p,
.feed-mono-preview .feed-post-body p b {
  color: var(--mono-ink);
  font-size: 9px;
  line-height: 1.5;
}

.feed-mono-preview .feed-empty {
  box-sizing: border-box;
  padding: 26px 20px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  clip-path: var(--mono-hand-cut);
  background-color: var(--mono-white);
  background-image: var(--mono-hand-frame);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--mono-ink);
}

.feed-mono-preview .feed-empty > span {
  border: 1.5px solid var(--mono-ink);
  background: var(--mono-accent) !important;
  color: var(--mono-ink);
}

.feed-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
}

@media (max-width: 370px) {
  .feed-frame-phone.feed-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .feed-mono-preview .content {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .feed-mono-preview .feed-heading {
    min-height: 124px;
    grid-template-columns: minmax(0, 1fr) 46px;
    gap: 10px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .feed-mono-preview .feed-heading h2 {
    font-size: 24px;
  }

  .feed-mono-preview .feed-heading-icon {
    width: 45px;
    height: 49px;
  }

  .feed-mono-preview .friend-strip {
    gap: 5px;
  }

  .feed-mono-preview .friend-card {
    min-height: 113px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .feed-mono-preview .friend-card > img {
    width: 44px;
    height: 44px;
  }

  .feed-mono-preview .feed-post-photo {
    width: calc(100% - 20px);
    margin-right: 10px;
    margin-left: 10px;
  }
}

/* Local-only monochrome profile concept: ?preview=mono-home-v1 */
.profile-frame-phone.profile-mono-preview {
  grid-template-rows:
    calc(82px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(84px + env(safe-area-inset-bottom));
  overflow: hidden;
  border: 2px solid var(--mono-ink);
  border-radius: 7px 10px 6px 9px / 9px 6px 10px 7px;
  background: var(--mono-paper);
  background-image: none;
  box-shadow: 7px 7px 0 var(--mono-ink);
}

.profile-mono-preview .top {
  justify-content: flex-end;
  background: var(--mono-white) !important;
}

.profile-mono-preview .content {
  padding: 18px 17px 30px !important;
  background:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px),
    var(--mono-paper) !important;
  background-size: 100% 28px !important;
}

.profile-mono-preview .profile-screen {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0 0 8px;
  color: var(--mono-ink);
}

.profile-mono-preview .profile-screen button,
.profile-mono-preview .profile-screen input {
  color: var(--mono-ink);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.profile-mono-preview .profile-hero,
.profile-mono-preview .profile-section-card,
.profile-mono-preview .profile-section:nth-of-type(even) .profile-section-card {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: var(--mono-hand-cut) !important;
  background-color: var(--mono-white) !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

.profile-mono-preview .profile-hero {
  padding: 22px 20px 18px !important;
  color: var(--mono-ink);
  transform: rotate(-.12deg) !important;
}

.profile-mono-preview .profile-section-card,
.profile-mono-preview .profile-section:nth-of-type(even) .profile-section-card {
  padding: 20px 18px 18px !important;
}

.profile-mono-preview .profile-section:nth-of-type(odd) .profile-section-card {
  transform: rotate(.08deg) !important;
}

.profile-mono-preview .profile-section:nth-of-type(even) .profile-section-card {
  transform: rotate(-.1deg) !important;
}

.profile-mono-preview .profile-hero::before {
  display: none !important;
}

.profile-mono-preview .profile-hero::after,
.profile-mono-preview .profile-section-card::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto !important;
  height: auto !important;
  display: block !important;
  border: 0;
  border-radius: 0;
  background: var(--mono-hand-frame) center / 100% 100% no-repeat !important;
  pointer-events: none;
}

.profile-mono-preview .profile-hero > *,
.profile-mono-preview .profile-section-card > * {
  position: relative;
  z-index: 2;
}

.profile-mono-preview .profile-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: center;
  padding: 0;
}

.profile-mono-preview .profile-avatar {
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border: 1.7px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white) !important;
  box-shadow: 2px 2px 0 var(--mono-ink) !important;
}

.profile-mono-preview .profile-avatar::after {
  display: none !important;
}

.profile-mono-preview .profile-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 28%;
  background: var(--mono-white);
  filter: grayscale(1) contrast(1.12);
}

.profile-mono-preview .profile-main > div:nth-child(2) {
  min-width: 0;
}

.profile-mono-preview .profile-hero .eyebrow {
  display: inline-block;
  margin: 0;
  padding: 3px 5px 2px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.profile-mono-preview .profile-title-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
}

.profile-mono-preview .profile-title-row h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--mono-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-mono-preview .level-chip {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
  font-size: 7px;
  font-weight: 900;
}

.profile-mono-preview .profile-title-note {
  margin-top: 6px;
  color: var(--mono-muted);
  font-size: 9px;
  font-weight: 700;
}

.profile-mono-preview .profile-edit-button {
  width: 30px;
  height: 34px;
  display: grid;
  place-items: center;
  align-self: start;
  padding: 0;
  border: 1.5px solid var(--mono-ink);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  background: var(--mono-accent);
  color: var(--mono-ink);
  box-shadow: none;
  transform: rotate(2deg);
}

.profile-mono-preview .profile-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px solid transparent;
}

.profile-mono-preview .profile-stats::before {
  content: "";
  position: absolute;
  top: -4px;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.profile-mono-preview .profile-stat {
  min-width: 0;
  text-align: center;
}

.profile-mono-preview .profile-stat + .profile-stat {
  position: relative;
  border-left: 0;
}

.profile-mono-preview .profile-stat + .profile-stat::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -3px;
  width: 6px;
  background: var(--mono-hand-line-vertical) center / 6px 96px repeat-y;
}

.profile-mono-preview .profile-stat strong {
  display: block;
  color: var(--mono-ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.profile-mono-preview .profile-stat span {
  display: block;
  margin-top: 4px;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 800;
}

.profile-mono-preview .profile-section {
  min-width: 0;
  margin: 0;
}

.profile-mono-preview .profile-section-card .section-title {
  position: relative;
  min-width: 0;
  min-height: 37px;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 2px solid transparent;
}

.profile-mono-preview .profile-section-card .section-title::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -4px;
  left: 0;
  height: 6px;
  background: var(--mono-hand-line) left center / 96px 6px repeat-x;
  pointer-events: none;
}

.profile-mono-preview .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n + 1) .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n + 2) .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n) .section-title-icon {
  box-sizing: border-box;
  width: 31px;
  height: 33px;
  display: grid;
  place-items: center;
  border: 1.4px solid var(--mono-ink);
  border-radius: 2px 4px 3px 5px / 5px 2px 4px 3px;
  background: var(--mono-white);
  color: var(--mono-ink);
  transform: rotate(-2deg);
}

.profile-mono-preview .profile-section:nth-of-type(even) .section-title-icon {
  background: var(--mono-accent);
  transform: rotate(2deg);
}

.profile-mono-preview .section-title h3 {
  margin: 0;
  color: var(--mono-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.1;
}

.profile-mono-preview .section-title p {
  margin-top: 3px;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 700;
  line-height: 1.35;
}

.profile-mono-preview .profile-social-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 4px 0 12px;
  border: 0;
}

.profile-mono-preview .profile-social-stats span {
  min-width: 0;
  padding: 5px 3px;
}

.profile-mono-preview .profile-social-stats span + span {
  border-left: 1px solid var(--mono-ink);
}

.profile-mono-preview .profile-social-stats b {
  color: var(--mono-ink);
  font-size: 19px;
  font-weight: 900;
}

.profile-mono-preview .profile-social-stats small {
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 800;
}

.profile-mono-preview .profile-social-link {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0 12px;
  border: 1.7px solid var(--mono-ink);
  border-radius: 3px 6px 2px 5px / 5px 3px 6px 2px;
  background: var(--mono-ink);
  color: var(--mono-white);
  font-size: 10px;
  font-weight: 900;
  transform: rotate(.1deg);
}

.profile-mono-preview .profile-social-link svg {
  box-sizing: content-box;
  padding: 2px;
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.profile-mono-preview .badge-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
}

.profile-mono-preview .badge-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 84px;
  gap: 6px;
  padding: 8px 4px;
  border: 1.2px solid var(--mono-ink);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  background: var(--mono-white);
  color: var(--mono-muted);
  transform: rotate(-.4deg);
}

.profile-mono-preview .badge-item:nth-child(even) {
  transform: rotate(.5deg);
}

.profile-mono-preview .badge-item.earned {
  border-color: var(--mono-ink);
  background: var(--mono-accent-soft);
  color: var(--mono-ink);
}

.profile-mono-preview .badge-symbol {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  filter: grayscale(1);
  opacity: .42;
}

.profile-mono-preview .badge-item.earned .badge-symbol {
  filter: grayscale(1) contrast(1.1);
  opacity: 1;
}

.profile-mono-preview .badge-symbol img {
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.profile-mono-preview .badge-symbol i {
  right: -3px;
  bottom: -3px;
  border: 1px solid var(--mono-ink);
  background: var(--mono-white);
  color: var(--mono-ink);
}

.profile-mono-preview .badge-item.earned .badge-symbol i {
  background: var(--mono-accent);
}

.profile-mono-preview .badge-item > span:last-child {
  color: currentColor;
  font-size: 8px;
  font-weight: 900;
}

.profile-mono-preview .sticker-board {
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0 !important;
}

.profile-mono-preview .sticker-cell {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  height: auto !important;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--mono-ink);
  border-radius: 1px 3px 2px 4px / 4px 1px 3px 2px;
  background: var(--mono-white);
  color: var(--mono-ink);
  transform: none !important;
}

.profile-mono-preview .sticker-cell.locked {
  border-color: rgba(17, 17, 15, .35);
  background: #f4f4f0;
  color: var(--mono-muted);
}

.profile-mono-preview .sticker-cell img {
  filter: grayscale(1) contrast(1.05);
}

.profile-mono-preview .sticker-cell.locked img {
  opacity: .12;
}

.profile-mono-preview .sticker-cell > span {
  border: 1px solid var(--mono-ink);
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.profile-mono-preview .sticker-cell.locked > span {
  border-color: rgba(17, 17, 15, .35);
  background: var(--mono-white);
  color: var(--mono-muted);
}

.profile-mono-preview .sticker-detail {
  grid-template-columns: 39px minmax(0, 1fr) auto;
  margin-top: 10px;
  padding: 9px;
  border: 1.4px solid var(--mono-ink);
  border-radius: 2px 4px 3px 5px / 5px 2px 4px 3px;
  background: var(--mono-accent-soft);
}

.profile-mono-preview .sticker-detail-emoji {
  width: 39px;
  height: 39px;
  border: 1px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
}

.profile-mono-preview .sticker-detail-emoji img {
  filter: grayscale(1);
}

.profile-mono-preview .sticker-detail strong {
  color: var(--mono-ink);
  font-size: 10px;
}

.profile-mono-preview .sticker-detail span {
  color: var(--mono-muted);
  font-size: 8px;
}

.profile-mono-preview .sticker-detail .pill {
  border: 1px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
}

.profile-mono-preview .allergy-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

.profile-mono-preview .allergy-item {
  box-sizing: border-box;
  min-width: 0;
  min-height: 39px;
  padding: 0 9px;
  border: 1.2px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
  box-shadow: none !important;
  font-size: 9px;
}

.profile-mono-preview .allergy-item.active {
  border-color: var(--mono-ink);
  background: var(--mono-accent-soft);
  color: var(--mono-ink);
}

.profile-mono-preview .allergy-check {
  width: 17px;
  height: 17px;
  border: 1px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  color: transparent;
}

.profile-mono-preview .allergy-item.active .allergy-check {
  border-color: var(--mono-ink);
  background: var(--mono-accent);
  color: var(--mono-ink);
}

.profile-mono-preview .allergy-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px;
  align-items: stretch;
  gap: 6px;
  margin-top: 9px;
}

.profile-mono-preview .allergy-add input {
  box-sizing: border-box;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1.2px solid var(--mono-ink);
  border-radius: 2px 4px 3px 5px / 5px 2px 4px 3px;
  background: var(--mono-white);
  color: var(--mono-ink);
  font-size: 9px;
}

.profile-mono-preview .allergy-add input::placeholder {
  color: var(--mono-muted);
}

.profile-mono-preview .allergy-add .secondary {
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--mono-ink);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  background: var(--mono-ink);
  color: var(--mono-white);
  box-shadow: none;
  font-size: 9px;
  font-weight: 900;
}

.profile-mono-preview .profile-setting-list {
  margin: 0;
  border-top: 0;
}

.profile-mono-preview .profile-setting-row {
  position: relative;
  box-sizing: border-box;
  min-height: 43px;
  grid-template-columns: 27px minmax(0, 1fr) 16px;
  gap: 7px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid var(--mono-ink);
  background: transparent;
  color: var(--mono-ink);
  font-size: 10px;
  font-weight: 800;
}

.profile-mono-preview .profile-setting-row:first-child {
  border-top: 1px solid var(--mono-ink);
}

.profile-mono-preview .setting-row-icon {
  width: 23px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
}

.profile-mono-preview .profile-setting-row:first-child .setting-row-icon {
  background: var(--mono-accent);
}

.profile-mono-preview .profile-setting-row > svg {
  color: var(--mono-ink);
}

.profile-mono-preview .profile-setting-danger,
.profile-mono-preview .profile-setting-danger .setting-row-icon {
  color: var(--mono-ink);
}

.profile-mono-preview .profile-account-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 12px 2px 0;
  color: var(--mono-muted);
  font-size: 8px;
}

.profile-mono-preview .profile-account-foot button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 7px;
  border: 1px solid var(--mono-ink);
  border-radius: 0;
  background: var(--mono-white);
  color: var(--mono-ink);
  font-size: 9px;
  font-weight: 900;
}

.profile-mono-preview .skip-list {
  gap: 7px;
  margin: 0;
}

.profile-mono-preview .skip-row {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  grid-template-columns: 31px minmax(0, 1fr) 16px;
  gap: 8px;
  padding: 5px 7px;
  border: 1.2px solid var(--mono-ink);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  background: var(--mono-white);
  box-shadow: none !important;
}

.profile-mono-preview .skip-index {
  width: 31px;
  height: 31px;
  border: 1px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-accent);
  color: var(--mono-ink);
  font-size: 8px;
}

.profile-mono-preview .skip-row strong {
  overflow: hidden;
  color: var(--mono-ink);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
}

.mono-preview-page .avatar-sheet {
  border: 2px solid var(--mono-ink);
  border-radius: 6px 9px 5px 8px / 8px 6px 9px 5px;
  background:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px),
    var(--mono-paper);
  background-size: 100% 28px;
  box-shadow: 6px 6px 0 var(--mono-ink);
}

.mono-preview-page .avatar-sheet .account-sheet-head span {
  color: var(--mono-muted);
}

.mono-preview-page .avatar-sheet .account-sheet-head h2,
.mono-preview-page .avatar-sheet .account-sheet-intro {
  color: var(--mono-ink);
}

.mono-preview-page .avatar-sheet .icon {
  border: 1.5px solid var(--mono-ink);
  border-radius: 2px 5px 3px 4px / 4px 2px 5px 3px;
  background: var(--mono-white);
  color: var(--mono-ink);
}

.mono-preview-page .avatar-choice {
  border-color: var(--mono-ink);
  background: var(--mono-white);
  box-shadow: none;
}

.mono-preview-page .avatar-choice img {
  filter: grayscale(1) contrast(1.08);
}

.mono-preview-page .avatar-choice > span {
  border-color: var(--mono-ink);
  background: var(--mono-white);
  color: var(--mono-ink);
}

.mono-preview-page .avatar-choice.selected {
  border-color: var(--mono-ink);
  background: var(--mono-accent-soft);
}

.mono-preview-page .avatar-choice.selected > span {
  border-color: var(--mono-ink);
  background: var(--mono-accent);
  color: var(--mono-ink);
}

@media (max-width: 370px) {
  .profile-frame-phone.profile-mono-preview {
    grid-template-rows:
      calc(78px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(80px + env(safe-area-inset-bottom));
  }

  .profile-mono-preview .content {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .profile-mono-preview .profile-hero {
    padding-right: 17px !important;
    padding-left: 17px !important;
  }

  .profile-mono-preview .profile-main {
    grid-template-columns: 62px minmax(0, 1fr) 28px;
    gap: 9px;
  }

  .profile-mono-preview .profile-avatar {
    width: 62px;
    height: 62px;
  }

  .profile-mono-preview .profile-title-row h2 {
    font-size: 21px;
  }

  .profile-mono-preview .profile-section-card,
  .profile-mono-preview .profile-section:nth-of-type(even) .profile-section-card {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .profile-mono-preview .badge-list {
    gap: 5px;
  }

  .profile-mono-preview .badge-item {
    min-height: 80px;
  }

  .profile-mono-preview .sticker-board {
    gap: 3px;
  }
}
/* Character-gated stage flow */
.character-select-shell {
  width: 100%;
  height: 100svh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  color: #11110f;
  background:
    linear-gradient(#ecece7 1px, transparent 1px) 0 0 / 100% 28px,
    #f8f8f4;
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.character-select-page {
  width: min(430px, calc(49svh - 18px), 100%);
  aspect-ratio: 430 / 872;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 30px 20px 22px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: #fff;
  border: 3px solid #11110f;
  border-radius: 6px 10px 5px 8px;
  box-shadow: 6px 7px 0 #11110f;
  transform: rotate(-0.15deg);
}

.character-select-page::-webkit-scrollbar {
  display: none;
}

.character-select-header {
  flex: 0 0 auto;
  padding-bottom: 16px;
  border-bottom: 2px solid #11110f;
}

.character-select-header > span {
  display: inline-block;
  margin-bottom: 9px;
  padding: 5px 9px 4px;
  color: #11110f;
  background: #c8f000;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.character-select-header h1 {
  margin: 0;
  font-size: clamp(36px, 5.2svh, 46px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.character-select-header p {
  max-width: 340px;
  margin: 11px 0 0;
  color: #555550;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

.character-choice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 18px;
}

.character-choice {
  position: relative;
  min-width: 0;
  min-height: 176px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  grid-template-rows: 1fr;
  gap: 14px;
  align-items: center;
  padding: 22px 16px 16px;
  overflow: hidden;
  color: #11110f;
  text-align: left;
  background: #fff;
  border: 2px solid #11110f;
  border-radius: 5px 8px 4px 7px;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.character-choice::after {
  content: "";
  position: absolute;
  inset: 6px 5px 5px 7px;
  border: 1px solid #11110f;
  border-radius: 8px 4px 7px 5px;
  pointer-events: none;
  transform: rotate(0.35deg);
}

.character-choice:hover,
.character-choice:focus-visible {
  background: #f8ffd9;
  transform: translateY(-2px) rotate(0.15deg);
}

.character-choice:focus-visible {
  outline: 3px solid #c8f000;
  outline-offset: 3px;
}

.character-choice-number {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 1;
  font-size: 13px;
  font-weight: 900;
}

.character-choice-art {
  grid-column: 1;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  justify-self: center;
  background: #fff;
  border: 2px solid #11110f;
  border-radius: 50%;
}

.character-choice-art img {
  width: 78px;
  height: 78px;
  display: block;
  object-fit: contain;
}

.character-choice-copy {
  grid-column: 2;
  min-width: 0;
  display: grid;
  align-self: center;
  gap: 4px;
  padding: 4px 34px 0 0;
}

.character-choice-copy small,
.character-choice-copy em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.2;
}

.character-choice-copy small {
  text-transform: uppercase;
}

.character-choice-copy strong {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
}

.character-choice-copy em {
  width: fit-content;
  margin: 3px 0 4px;
  padding: 4px 7px;
  background: #c8f000;
}

.character-choice-copy > span {
  color: #555550;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
}

.character-choice-arrow {
  position: absolute;
  right: 15px;
  bottom: 16px;
  z-index: 1;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #11110f;
}

.character-select-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-top: 16px;
  color: #555550;
}

.character-select-note > span {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  color: #11110f;
  background: #c8f000;
  border-radius: 50%;
}

.character-select-note p {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.character-select-logout {
  display: block;
  margin: 13px auto 0;
  padding: 7px 2px;
  color: #666660;
  background: transparent;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

@media (max-width: 620px) {
  .character-select-shell {
    place-items: stretch;
    padding: 0;
    background: #fff;
  }

  .character-select-page {
    width: 100%;
    height: 100svh;
    aspect-ratio: auto;
    padding:
      max(24px, env(safe-area-inset-top))
      18px
      max(18px, env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }
}

@media (max-height: 720px), (max-width: 370px) {
  .character-select-header {
    padding-bottom: 12px;
  }

  .character-select-header > span {
    margin-bottom: 7px;
  }

  .character-select-header h1 {
    font-size: 34px;
  }

  .character-select-header p {
    margin-top: 8px;
    font-size: 12px;
  }

  .character-choice-list {
    gap: 10px;
    margin-top: 14px;
  }

  .character-choice {
    min-height: 154px;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 11px;
    padding: 20px 14px 13px;
  }

  .character-choice-art {
    width: 74px;
    height: 74px;
  }

  .character-choice-art img {
    width: 66px;
    height: 66px;
  }

  .character-choice-copy {
    gap: 2px;
    padding-right: 30px;
  }

  .character-choice-copy strong {
    font-size: 23px;
  }

  .character-choice-copy > span {
    font-size: 11px;
  }

  .character-select-note {
    margin-top: 12px;
  }

  .character-select-logout {
    margin-top: 9px;
  }
}

/* Character-first home preview */
.home-frame-phone.home-mono-preview .content {
  padding: 14px 16px 24px;
}

.home-mono-preview .character-home-screen {
  --character-accent: #97b9e2;
  --character-accent-soft: #eef5fc;
  --character-accent-ink: #365c87;
  display: grid;
  gap: 20px;
  padding: 0 0 8px;
}

.home-mono-preview .character-home-gobi {
  --character-accent: #ee9fbd;
  --character-accent-soft: #fff0f5;
  --character-accent-ink: #9d3f69;
}

.home-mono-preview .character-home-stage {
  position: relative;
  isolation: isolate;
  min-width: 0;
  padding: 17px 17px 18px;
  color: var(--mono-ink);
  background: var(--mono-white);
  border: 2px solid var(--mono-ink);
  border-radius: 7px 4px 8px 5px / 5px 8px 4px 7px;
  transform: none;
}

.home-mono-preview .character-home-stage::after {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 5px 4px 4px 6px;
  border: 1px solid var(--mono-ink);
  border-radius: 4px 7px 5px 8px / 8px 5px 7px 4px;
  pointer-events: none;
  transform: rotate(.12deg);
}

.home-mono-preview .character-home-head {
  position: relative;
  z-index: 6;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 5px 14px;
  border-bottom: 2px solid var(--mono-ink);
}

.home-mono-preview .character-home-head > div:first-child {
  min-width: 0;
}

.home-mono-preview .character-home-head span,
.home-mono-preview .character-home-head p {
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.25;
}

.home-mono-preview .character-home-head h2 {
  margin: 5px 0 3px;
  color: var(--mono-ink);
  font-size: 34px;
  font-weight: 900;
  line-height: .94;
}

.home-mono-preview .character-home-head p {
  margin: 0;
}

.home-mono-preview .character-home-count {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 7px 4px;
  color: var(--mono-ink);
  background: var(--character-accent);
  border: 1.5px solid var(--mono-ink);
  transform: rotate(1deg);
}

.home-mono-preview .character-home-count strong {
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .character-home-count span {
  color: var(--mono-ink);
  font-size: 8px;
}

.home-mono-preview .character-viewer-shell {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: block;
  padding: 9px 0 10px;
}

.home-mono-preview .character-viewer-stage {
  position: relative;
  min-width: 0;
  height: clamp(420px, 57vh, 510px);
  display: grid;
  place-items: end center;
  overflow: hidden;
  background: var(--mono-white);
  border-right: 1px solid rgba(17, 17, 15, .18);
  border-left: 1px solid rgba(17, 17, 15, .18);
  outline: none;
  touch-action: pan-y;
  cursor: grab;
}

.home-mono-preview .character-viewer-stage:focus-visible {
  box-shadow: inset 0 0 0 3px var(--character-accent);
}

.home-mono-preview .character-viewer-stage.dragging {
  cursor: grabbing;
}

.home-mono-preview .character-viewer-stage img {
  position: absolute;
  bottom: 13px;
  right: 0;
  left: 0;
  z-index: 3;
  width: min(90%, 260px);
  height: calc(100% - 48px);
  display: block;
  margin: 0 auto;
  object-fit: contain;
  object-position: center bottom;
  image-rendering: auto;
  filter: none;
  opacity: 1;
  transform: none !important;
  translate: none;
  rotate: none;
  scale: none;
  backface-visibility: visible;
  user-select: none;
  -webkit-user-drag: none;
  will-change: auto;
  transition: opacity 70ms linear;
}

.home-mono-preview .character-viewer-stage img[data-character-pose-blend] {
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

.home-mono-preview .character-viewer-stage.dragging img {
  transform: none !important;
  translate: none;
  rotate: none;
  scale: none;
  transition: opacity 35ms linear;
}

.home-mono-preview .character-viewer-number,
.home-mono-preview .character-viewer-direction {
  position: absolute;
  top: 10px;
  z-index: 4;
  color: var(--mono-ink);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .character-viewer-number {
  left: 9px;
}

.home-mono-preview .character-viewer-direction {
  right: 9px;
  padding: 3px 5px;
  background: var(--character-accent);
  border: 1px solid var(--mono-ink);
  transform: rotate(-1deg);
}

.home-mono-preview .character-viewer-ground {
  position: absolute;
  right: 12%;
  bottom: 17px;
  left: 12%;
  z-index: 1;
  height: 7px;
  border-top: 2px solid var(--mono-ink);
  border-radius: 50%;
  opacity: .85;
  transform: rotate(.3deg);
}

.home-mono-preview .character-viewer-registration {
  position: absolute;
  inset: 32px 8px 28px;
  z-index: 2;
  pointer-events: none;
}

.home-mono-preview .character-viewer-registration i {
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--mono-ink);
  border-style: solid;
  opacity: .55;
}

.home-mono-preview .character-viewer-registration i:nth-child(1) {
  top: 0;
  left: 0;
  border-width: 1px 0 0 1px;
}

.home-mono-preview .character-viewer-registration i:nth-child(2) {
  top: 0;
  right: 0;
  border-width: 1px 1px 0 0;
}

.home-mono-preview .character-viewer-registration i:nth-child(3) {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.home-mono-preview .character-viewer-registration i:nth-child(4) {
  bottom: 0;
  left: 0;
  border-width: 0 0 1px 1px;
}

.home-mono-preview .character-expression-control {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 35px 13px;
  border: 1.5px solid var(--mono-ink);
  transform: rotate(.08deg);
}

.home-mono-preview .character-expression-control button {
  min-height: 32px;
  padding: 0 5px;
  color: var(--mono-muted);
  background: var(--mono-white);
  border: 0;
  border-right: 1px solid var(--mono-ink);
  border-radius: 0;
  font-size: 10px;
  font-weight: 800;
}

.home-mono-preview .character-expression-control button:last-child {
  border-right: 0;
}

.home-mono-preview .character-expression-control button.active {
  color: var(--mono-ink);
  background: var(--character-accent);
  font-weight: 900;
}

.home-mono-preview .character-home-foot {
  position: relative;
  z-index: 7;
  padding: 12px 5px 3px;
  border-top: 2px solid var(--mono-ink);
}

.home-mono-preview .character-home-foot > div {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.home-mono-preview .character-home-foot > div span {
  padding: 4px 6px;
  color: var(--mono-ink);
  background: var(--character-accent);
  font-size: 8px;
  font-weight: 900;
  white-space: nowrap;
}

.home-mono-preview .character-home-foot > div p {
  min-width: 0;
  margin: 0;
  color: var(--mono-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.home-mono-preview .character-home-primary {
  width: 100%;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 9px 8px 13px;
  color: var(--mono-white) !important;
  text-align: left;
  background: var(--mono-ink);
  border: 2px solid var(--mono-ink);
  border-radius: 4px 7px 5px 8px / 7px 5px 8px 4px;
  box-shadow: none;
}

.home-mono-preview .character-home-primary > span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-mono-preview .character-home-primary small {
  color: var(--character-accent);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .character-home-primary strong {
  overflow: hidden;
  color: var(--mono-white);
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-mono-preview .character-home-primary > svg {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  padding: 4px;
  color: var(--mono-ink);
  background: var(--character-accent);
}

.home-mono-preview .character-home-status {
  position: relative;
  min-width: 0;
  padding: 17px 5px 2px;
  color: var(--mono-ink);
  border-top: 2px solid var(--mono-ink);
}

.home-mono-preview .character-home-status::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 2px;
  left: 3px;
  border-top: 1px solid var(--mono-ink);
  transform: rotate(-.12deg);
}

.home-mono-preview .character-home-status > header {
  min-width: 0;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.home-mono-preview .character-home-status > header span,
.home-mono-preview .character-home-next > span {
  display: block;
  color: var(--mono-muted);
  font-size: 7px;
  font-weight: 900;
}

.home-mono-preview .character-home-status > header h3 {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 900;
  line-height: 1;
}

.home-mono-preview .character-home-status > header b {
  padding: 4px 6px;
  background: var(--character-accent);
  font-size: 11px;
  font-weight: 900;
}

.home-mono-preview .character-home-progress {
  height: 13px;
  margin: 12px 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(17, 17, 15, .22) 16px 17px),
    var(--mono-white);
  border: 1.5px solid var(--mono-ink);
}

.home-mono-preview .character-home-progress i {
  height: 100%;
  display: block;
  background: var(--character-accent);
  border-right: 1px solid var(--mono-ink);
}

.home-mono-preview .character-home-next {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 8px;
  align-items: baseline;
}

.home-mono-preview .character-home-next > span {
  grid-column: 1;
}

.home-mono-preview .character-home-next strong {
  grid-column: 2;
  grid-row: 1;
  font-size: 12px;
  font-weight: 900;
}

.home-mono-preview .character-home-next small {
  grid-column: 1 / -1;
  color: var(--mono-muted);
  font-size: 8px;
  font-weight: 700;
}

.home-mono-preview .character-home-status > button {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding: 0 11px;
  color: var(--mono-ink);
  background: var(--mono-white);
  border: 1.5px solid var(--mono-ink);
  border-radius: 5px 3px 6px 4px;
  box-shadow: none;
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 620px) {
  .home-mono-preview .character-home-stage {
    padding: 14px 13px 15px;
  }

  .home-mono-preview .character-viewer-stage {
    height: clamp(390px, 54vh, 465px);
  }

  .home-mono-preview .character-viewer-stage img {
    width: min(94%, 245px);
  }

  .home-mono-preview .character-expression-control {
    margin-inline: 31px;
  }
}

/* Local-only monochrome auth concept: ?preview=mono-home-v1 */
.mono-auth-shell {
  --mono-auth-ink: #11110f;
  --mono-auth-paper: #fbfbf7;
  --mono-auth-white: #fff;
  --mono-auth-muted: #6c6c66;
  --mono-auth-accent: #c8e62e;
  width: 100%;
  min-height: 100dvh;
  display: grid;
  justify-items: center;
  overflow: auto;
  color: var(--mono-auth-ink);
  background:
    linear-gradient(rgba(17, 17, 15, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 15, .04) 1px, transparent 1px),
    #e9e9e4;
  background-size: 22px 22px;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.mono-auth-page {
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  padding:
    calc(20px + env(safe-area-inset-top))
    18px
    calc(20px + env(safe-area-inset-bottom));
  background:
    linear-gradient(rgba(17, 17, 15, .025) 1px, transparent 1px),
    var(--mono-auth-paper);
  background-size: 100% 28px;
}

.mono-auth-paper {
  position: relative;
  isolation: isolate;
  min-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  border: 2px solid var(--mono-auth-ink);
  border-radius: 7px 4px 8px 5px / 5px 8px 4px 7px;
  background: var(--mono-auth-white);
  transform: rotate(-.04deg);
}

.mono-auth-paper::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 4px 4px 6px;
  border: 1px solid var(--mono-auth-ink);
  border-radius: 4px 7px 5px 8px / 8px 5px 7px 4px;
  pointer-events: none;
  transform: rotate(.1deg);
}

.mono-auth-masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 5px 12px;
  border-bottom: 2px solid var(--mono-auth-ink);
}

.mono-auth-masthead span,
.mono-auth-masthead b {
  color: var(--mono-auth-muted);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.mono-auth-masthead b {
  color: var(--mono-auth-ink);
}

.mono-auth-intro {
  margin: 34px 6px 0;
}

.mono-auth-intro > span {
  display: inline-block;
  padding: 5px 7px 4px;
  color: var(--mono-auth-ink);
  background: var(--mono-auth-accent);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
}

.mono-auth-intro > div {
  min-width: 0;
  margin-top: 9px;
}

.mono-auth-intro h1 {
  min-width: 0;
  margin: 0;
  color: var(--mono-auth-ink);
  font-size: 43px;
  font-weight: 900;
  line-height: .95;
  letter-spacing: 0;
}

.mono-auth-intro p {
  margin: 13px 0 0;
  color: var(--mono-auth-muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.mono-auth-rule {
  height: 6px;
  margin: 22px 5px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 6'%3E%3Cpath d='M0 3.2C13 1.8 27 4.4 43 2.7S76 4.5 96 2.8' fill='none' stroke='%2311110f' stroke-width='1.55' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left center / 96px 6px repeat-x;
}

.mono-auth-form {
  gap: 12px;
  margin: 18px 6px 0;
}

.mono-auth-form label {
  gap: 6px;
  color: var(--mono-auth-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.mono-auth-form label > span {
  display: block;
}

.mono-auth-form input {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1.5px solid var(--mono-auth-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-auth-white);
  color: var(--mono-auth-ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
}

.mono-auth-form label:nth-of-type(even) input {
  border-radius: 3px 6px 4px 5px / 6px 4px 5px 3px;
}

.mono-auth-form input::placeholder {
  color: #999991;
}

.mono-auth-form input:focus {
  outline: 3px solid rgba(200, 230, 46, .48);
  outline-offset: 1px;
}

.mono-auth-form .mono-auth-remember {
  width: fit-content;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
  color: var(--mono-auth-muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.mono-auth-remember input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono-auth-check {
  position: relative;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  border: 1.5px solid var(--mono-auth-ink);
  border-radius: 3px 2px 4px 2px;
  background: var(--mono-auth-white);
}

.mono-auth-check::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--mono-auth-ink);
  border-bottom: 2px solid var(--mono-auth-ink);
  opacity: 0;
  transform: rotate(45deg) scale(.7);
}

.mono-auth-remember input:checked + .mono-auth-check {
  background: var(--mono-auth-accent);
}

.mono-auth-remember input:checked + .mono-auth-check::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.mono-auth-remember input:focus-visible + .mono-auth-check {
  outline: 3px solid rgba(200, 230, 46, .48);
  outline-offset: 2px;
}

.mono-auth-form .login-error,
.mono-auth-form .login-notice {
  margin: 0;
  padding: 7px 9px;
  border-left: 3px solid currentColor;
  background: #f4f4ef;
  font-size: 10px;
  font-weight: 800;
}

.mono-auth-form .mono-auth-primary {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  margin-top: 2px;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--mono-auth-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-auth-ink) !important;
  color: var(--mono-auth-white);
  box-shadow: none !important;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
}

.mono-auth-primary > span {
  display: grid;
  place-items: center start;
  padding: 0 14px;
}

.mono-auth-primary > b {
  display: grid;
  place-items: center;
  border-left: 2px solid var(--mono-auth-ink);
  background: var(--mono-auth-accent);
  color: var(--mono-auth-ink);
}

.mono-auth-primary:active {
  transform: translateY(1px);
}

.mono-auth-social {
  gap: 8px;
  margin: 16px 6px 0;
  color: var(--mono-auth-muted);
  font-size: 8px;
  font-weight: 800;
}

.mono-auth-social > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mono-auth-social > span::before,
.mono-auth-social > span::after {
  content: "";
  flex: 1;
  border-top: 1px dashed rgba(17, 17, 15, .48);
}

.mono-auth-social > div {
  gap: 10px;
}

.mono-auth-social .social-icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mono-auth-social .social-icon-button img {
  width: 30px;
  height: 30px;
}

.mono-auth-social .google-icon-button svg {
  width: 19px;
  height: 19px;
}

.mono-auth-links {
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 14px 6px 0;
}

.mono-auth-links .auth-text-button {
  margin: 0;
  padding: 0;
  color: var(--mono-auth-muted);
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
}

.mono-auth-links .auth-text-button:hover {
  color: var(--mono-auth-ink);
}

.mono-auth-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: auto 5px 0;
  padding-top: 18px;
  border-top: 1px solid var(--mono-auth-ink);
}

.mono-auth-footer span,
.mono-auth-footer b {
  color: var(--mono-auth-muted);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
}

.mono-auth-footer b {
  color: var(--mono-auth-ink);
}

.mono-auth-login .mono-auth-intro {
  margin-top: auto;
}

.mono-auth-signup .mono-auth-intro {
  margin-top: 23px;
}

.mono-auth-signup .mono-auth-intro h1 {
  font-size: 38px;
}

.mono-auth-signup .mono-auth-rule {
  margin-top: 15px;
}

.mono-auth-signup .mono-auth-form {
  gap: 9px;
  margin-top: 13px;
}

.mono-auth-signup .mono-auth-form input {
  height: 42px;
}

.mono-auth-signup .mono-auth-form .mono-auth-primary {
  min-height: 47px;
}

.mono-auth-signup .mono-auth-social {
  margin-top: 12px;
}

.mono-auth-signup .mono-auth-links {
  margin-top: 10px;
}

@media (min-width: 641px) {
  .mono-auth-shell {
    align-items: center;
    padding-block: 10px;
  }

  .mono-auth-page {
    min-height: min(900px, calc(100dvh - 20px));
  }

  .mono-auth-paper {
    min-height: calc(min(900px, 100dvh - 20px) - 40px);
  }
}

@media (max-width: 370px) {
  .mono-auth-page {
    padding-inline: 12px;
  }

  .mono-auth-paper {
    padding-inline: 17px;
  }

  .mono-auth-intro {
    margin-top: 26px;
  }

  .mono-auth-intro h1 {
    font-size: 38px;
  }

  .mono-auth-form {
    margin-top: 14px;
  }
}

/* Local-only monochrome dessert recipe modal: ?preview=mono-home-v1 */
.mono-preview-page .modal {
  --mono-modal-ink: #11110f;
  --mono-modal-paper: #fbfbf7;
  --mono-modal-white: #fff;
  --mono-modal-muted: #6c6c66;
  --mono-modal-accent: #ee9fbd;
  --mono-modal-accent-soft: #fff0f5;
  align-items: center;
  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom));
  background: rgba(17, 17, 15, .62);
  backdrop-filter: blur(2px);
  filter: none;
}

.mono-preview-page .sheet.dessert-recipe-sheet {
  --dessert-modal-gutter: 0px;
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  height: min(824px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  border: 2px solid var(--mono-modal-ink);
  border-radius: 7px 4px 8px 5px / 5px 8px 4px 7px;
  background-color: var(--mono-modal-paper);
  background-image:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 100% 28px;
  box-shadow: none;
  clip-path: none;
}

.mono-preview-page .sheet.dessert-recipe-sheet::before {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 5px 4px 4px 6px;
  display: block;
  border: 1px solid var(--mono-modal-ink);
  border-radius: 4px 7px 5px 8px / 8px 5px 7px 4px;
  background: transparent;
  pointer-events: none;
  transform: rotate(.08deg);
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover.dessert {
  position: relative;
  min-height: 224px;
  padding: 20px 22px 18px;
  overflow: hidden;
  border-bottom: 2px solid var(--mono-modal-ink);
  border-radius: 0;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover.dessert::before {
  display: none;
}

.mono-preview-page .dessert-recipe-sheet .sheet-title-row {
  min-height: 40px;
  align-items: flex-start;
  padding: 0;
}

.mono-preview-page .dessert-recipe-sheet .recipe-stage-chip {
  min-height: 25px;
  padding: 6px 8px 5px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 3px 2px 4px 2px;
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-1deg);
}

.mono-preview-page .dessert-recipe-sheet .recipe-stage-chip svg {
  width: 12px;
  height: 12px;
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover .icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
  box-shadow: none;
  font-size: 22px;
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover-copy {
  position: relative;
  z-index: 3;
  width: 58%;
  margin-top: 27px;
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover h2 {
  margin: 0;
  color: var(--mono-modal-ink);
  font-size: 34px;
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
}

.mono-preview-page .dessert-recipe-sheet .recipe-cover p {
  margin-top: 10px;
  color: var(--mono-modal-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.mono-preview-page .dessert-recipe-sheet .recipe-reference-art {
  right: 18px;
  bottom: 13px;
  width: 132px;
  height: 132px;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: contrast(1.05) saturate(1.05) !important;
  mix-blend-mode: multiply !important;
  transform: rotate(1.5deg);
}

.mono-preview-page .dessert-recipe-sheet .recipe-utensil-art {
  display: none;
}

.mono-preview-page .dessert-recipe-sheet .recipe-body {
  min-height: 0;
  padding: 18px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px),
    var(--mono-modal-paper);
  background-size: 100% 28px;
  scrollbar-width: none;
}

.mono-preview-page .dessert-recipe-sheet .recipe-body::-webkit-scrollbar {
  display: none;
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta-item {
  min-width: 0;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta-item + .recipe-meta-item {
  border-left: 1px solid var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta-item svg {
  margin: 0 0 4px;
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta-item strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--mono-modal-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.mono-preview-page .dessert-recipe-sheet .recipe-meta-item span {
  margin-top: 3px;
  color: var(--mono-modal-muted);
  font-size: 8px;
  font-weight: 700;
}

.mono-preview-page .dessert-recipe-sheet .warning {
  margin-top: 14px;
  padding: 10px 11px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 4px 6px 3px 5px;
  background: var(--mono-modal-accent-soft);
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .recipe-block {
  margin-top: 23px;
  border: 0;
  background: transparent;
}

.mono-preview-page .dessert-recipe-sheet .recipe-block-head {
  min-height: 32px;
  align-items: flex-end;
  margin: 0 0 10px;
  padding: 0 2px 8px;
  border-bottom: 2px solid var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .recipe-block h3 {
  color: var(--mono-modal-ink);
  font-size: 15px;
  font-weight: 900;
}

.mono-preview-page .dessert-recipe-sheet .recipe-block-head span {
  color: var(--mono-modal-muted);
  font-size: 8px;
  font-weight: 800;
}

.mono-preview-page .dessert-recipe-sheet .ingredient-list {
  gap: 0;
  overflow: hidden;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
}

.mono-preview-page .dessert-recipe-sheet .ingredient-row {
  min-height: 44px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mono-modal-ink);
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
}

.mono-preview-page .dessert-recipe-sheet .ingredient-row + .ingredient-row {
  border-top: 1px solid rgba(17, 17, 15, .32);
}

.mono-preview-page .dessert-recipe-sheet .ingredient-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 3px 2px 4px 2px;
  background: var(--mono-modal-white);
}

.mono-preview-page .dessert-recipe-sheet .ingredient-row.checked {
  background: var(--mono-modal-accent-soft);
  color: var(--mono-modal-muted);
}

.mono-preview-page .dessert-recipe-sheet .ingredient-row.checked .ingredient-check {
  border-color: var(--mono-modal-ink);
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .tool-list,
.mono-preview-page .dessert-recipe-sheet .tag-list {
  gap: 7px;
}

.mono-preview-page .dessert-recipe-sheet .tool-chip,
.mono-preview-page .dessert-recipe-sheet .tag-chip {
  min-height: 31px;
  padding: 7px 9px;
  border: 1px solid var(--mono-modal-ink);
  border-radius: 4px 2px 5px 3px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
  font-size: 9px;
  font-weight: 800;
}

.mono-preview-page .dessert-recipe-sheet .tool-chip:nth-child(even) {
  transform: rotate(.4deg);
}

.mono-preview-page .dessert-recipe-sheet .tag-chip {
  background: var(--mono-modal-accent-soft);
}

.mono-preview-page .dessert-recipe-sheet .step-list {
  gap: 0;
  padding: 7px 11px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
  box-shadow: none;
}

.mono-preview-page .dessert-recipe-sheet .step-row {
  min-height: 56px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 3px;
  background: none;
}

.mono-preview-page .dessert-recipe-sheet .step-row + .step-row {
  border-top: 1px solid rgba(17, 17, 15, .32);
  background: none;
}

.mono-preview-page .dessert-recipe-sheet .step-number {
  width: 31px;
  height: 31px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 50%;
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
  font-size: 9px;
  font-weight: 900;
}

.mono-preview-page .dessert-recipe-sheet .step-row p {
  padding: 0;
  color: var(--mono-modal-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions {
  position: sticky;
  bottom: -24px;
  z-index: 10;
  margin: 24px -22px -24px;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--mono-modal-ink);
  background: var(--mono-modal-white);
  box-shadow: none;
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions > .primary,
.mono-preview-page .dessert-recipe-sheet .sheet-actions > .secondary {
  min-height: 50px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  overflow: hidden;
  border: 2px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-ink);
  background-image: none;
  color: var(--mono-modal-white);
  box-shadow: none;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  transform: none;
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions > .secondary {
  margin-top: 8px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions > .primary svg {
  color: var(--mono-modal-accent);
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions > .secondary svg {
  color: var(--mono-modal-ink);
}

.mono-preview-page .dessert-recipe-sheet .sheet-actions > .primary > span,
.mono-preview-page .dessert-recipe-sheet .sheet-actions > .secondary > span {
  font-size: 12px;
  font-weight: 900;
}

.mono-preview-page .dessert-recipe-sheet .proof-capture {
  margin-top: 22px;
  padding: 15px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px;
  background: var(--mono-modal-white);
}

.mono-preview-page .dessert-recipe-sheet .proof-capture > div > span,
.mono-preview-page .dessert-recipe-sheet .proof-capture h3,
.mono-preview-page .dessert-recipe-sheet .proof-capture p {
  color: var(--mono-modal-ink);
}

@media (max-width: 370px) {
  .mono-preview-page .dessert-recipe-sheet .recipe-cover.dessert {
    min-height: 212px;
    padding-inline: 18px;
  }

  .mono-preview-page .dessert-recipe-sheet .recipe-cover h2 {
    font-size: 30px;
  }

  .mono-preview-page .dessert-recipe-sheet .recipe-reference-art {
    right: 12px;
    width: 118px;
    height: 118px;
  }

  .mono-preview-page .dessert-recipe-sheet .recipe-body {
    padding-inline: 18px;
  }

  .mono-preview-page .dessert-recipe-sheet .sheet-actions {
    margin-inline: -18px;
    padding-inline: 18px;
  }
}

/* Local-only monochrome home-meal recipe modal: ?preview=mono-home-v1 */
.mono-preview-page .sheet.recipe-sheet:not(.dessert-recipe-sheet) {
  --mono-modal-accent: #c8e62e;
  --mono-modal-accent-soft: #eff8bd;
  position: relative;
  isolation: isolate;
  width: min(100%, 430px);
  height: min(824px, calc(100dvh - 20px));
  max-height: calc(100dvh - 20px);
  overflow: hidden;
  border: 2px solid var(--mono-modal-ink);
  border-radius: 6px 4px 8px 5px / 5px 8px 4px 7px;
  background-color: var(--mono-modal-paper);
  background-image:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px);
  background-position: 0 0;
  background-size: 100% 28px;
  box-shadow: none;
  clip-path: none;
}

.mono-preview-page .sheet.recipe-sheet:not(.dessert-recipe-sheet)::before {
  content: "";
  position: absolute;
  z-index: 30;
  inset: 5px 4px 4px 6px;
  display: block;
  border: 1px solid var(--mono-modal-ink);
  border-radius: 4px 7px 5px 8px / 8px 5px 7px 4px;
  background: transparent;
  pointer-events: none;
  transform: rotate(-.06deg);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover {
  position: relative;
  min-height: 224px;
  padding: 20px 22px 18px;
  overflow: hidden;
  border-bottom: 2px solid var(--mono-modal-ink);
  border-radius: 0;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover::before,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover::after {
  display: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-title-row {
  min-height: 40px;
  align-items: flex-start;
  padding: 0;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-stage-chip {
  min-height: 25px;
  padding: 6px 8px 5px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 3px 2px 4px 2px;
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  transform: rotate(-1deg);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-stage-chip svg {
  width: 12px;
  height: 12px;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover .icon {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
  box-shadow: none;
  font-size: 22px;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover-copy {
  position: relative;
  z-index: 3;
  width: 58%;
  margin-top: 27px;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover h2 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--mono-modal-ink);
  font-size: 34px;
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover p {
  margin-top: 10px;
  color: var(--mono-modal-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-reference-art {
  right: 18px;
  bottom: 12px;
  width: 132px;
  height: 132px;
  object-fit: contain;
  background: transparent !important;
  box-shadow: none !important;
  filter: contrast(1.12) saturate(1.16) !important;
  mix-blend-mode: multiply !important;
  transform: rotate(-1.4deg);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-utensil-art {
  display: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body {
  min-height: 0;
  padding: 18px 22px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    linear-gradient(rgba(17, 17, 15, .026) 1px, transparent 1px),
    var(--mono-modal-paper);
  background-size: 100% 28px;
  scrollbar-width: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body::-webkit-scrollbar {
  display: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item {
  min-width: 0;
  min-height: 76px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 9px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item + .recipe-meta-item {
  border-left: 1px solid var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item svg {
  margin: 0 0 4px;
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--mono-modal-ink);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item span {
  margin-top: 3px;
  color: var(--mono-modal-muted);
  font-size: 8px;
  font-weight: 700;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .warning {
  margin-top: 14px;
  padding: 10px 11px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 4px 6px 3px 5px;
  background: var(--mono-modal-accent-soft);
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block {
  margin-top: 23px;
  border: 0;
  background: transparent;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block-head {
  min-height: 32px;
  align-items: flex-end;
  margin: 0 0 10px;
  padding: 0 2px 8px;
  border-bottom: 2px solid var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block h3 {
  color: var(--mono-modal-ink);
  font-size: 15px;
  font-weight: 900;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block-head span {
  color: var(--mono-modal-muted);
  font-size: 8px;
  font-weight: 800;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-list {
  gap: 0;
  overflow: hidden;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row {
  min-height: 44px;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mono-modal-ink);
  box-shadow: none;
  font-size: 10px;
  font-weight: 800;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row + .ingredient-row {
  border-top: 1px solid rgba(17, 17, 15, .32);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-check {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 3px 2px 4px 2px;
  background: var(--mono-modal-white);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row.checked {
  background: var(--mono-modal-accent-soft);
  color: var(--mono-modal-muted);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row.checked .ingredient-check {
  border-color: var(--mono-modal-ink);
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-list,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-list {
  gap: 7px;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-chip,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-chip {
  min-height: 31px;
  padding: 7px 9px;
  border: 1px solid var(--mono-modal-ink);
  border-radius: 4px 2px 5px 3px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
  font-size: 9px;
  font-weight: 800;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-chip:nth-child(even) {
  transform: rotate(.4deg);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-chip {
  background: var(--mono-modal-accent-soft);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-list {
  gap: 0;
  padding: 7px 11px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-white);
  box-shadow: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row {
  min-height: 56px;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 8px 3px;
  background: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row + .step-row {
  border-top: 1px solid rgba(17, 17, 15, .32);
  background: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-number {
  width: 31px;
  height: 31px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 50%;
  background: var(--mono-modal-accent);
  color: var(--mono-modal-ink);
  font-size: 9px;
  font-weight: 900;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row p {
  padding: 0;
  color: var(--mono-modal-ink);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions {
  position: sticky;
  bottom: -24px;
  z-index: 10;
  margin: 24px -22px -24px;
  padding: 14px 22px calc(16px + env(safe-area-inset-bottom));
  border-top: 2px solid var(--mono-modal-ink);
  background: var(--mono-modal-white);
  box-shadow: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary {
  min-height: 50px;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 14px;
  overflow: hidden;
  border: 2px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px / 4px 6px 3px 5px;
  background: var(--mono-modal-ink);
  background-image: none;
  color: var(--mono-modal-white);
  box-shadow: none;
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  transform: none;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary {
  margin-top: 8px;
  background: var(--mono-modal-white);
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary svg {
  color: var(--mono-modal-accent);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary svg {
  color: var(--mono-modal-ink);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary > span,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary > span {
  font-size: 12px;
  font-weight: 900;
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture {
  margin-top: 22px;
  padding: 15px;
  border: 1.5px solid var(--mono-modal-ink);
  border-radius: 5px 3px 6px 4px;
  background: var(--mono-modal-white);
}

.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > div > span,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture h3,
.mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture p {
  color: var(--mono-modal-ink);
}

@media (max-width: 370px) {
  .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover {
    min-height: 212px;
    padding-inline: 18px;
  }

  .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover h2 {
    font-size: 30px;
  }

  .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-reference-art {
    right: 12px;
    width: 118px;
    height: 118px;
  }

  .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body {
    padding-inline: 18px;
  }

  .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions {
    margin-inline: -18px;
    padding-inline: 18px;
  }
}

/* Stage 100 closes with the same hand-drawn update marker on both character routes. */
.forest-goal.coming-soon .coming-soon-symbol {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  align-self: center;
  border: 2px solid currentColor;
  border-radius: 47% 53% 49% 51% / 53% 46% 54% 47%;
  background: color-mix(in srgb, currentColor 7%, white);
  transform: rotate(-2deg);
}

.forest-goal.coming-soon .coming-soon-symbol svg {
  width: 28px;
  height: 28px;
  stroke-width: 1.8;
}

.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon,
.dessert-mono-preview .dessert-screen .forest-goal.coming-soon {
  grid-template-columns: 66px minmax(0, 1fr);
  background-color: var(--mono-accent-soft) !important;
}

.home-meal-mono-preview .home-meal-screen .coming-soon-symbol,
.dessert-mono-preview .dessert-screen .coming-soon-symbol {
  color: var(--mono-ink);
  background: var(--mono-white);
}

.coming-soon-unlock .unlock-icon {
  transform: rotate(-3deg);
}

/* Character route unlock: the starter reveals the companion after stage 50. */
.character-choice.locked {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .48;
}

.character-choice.locked:hover,
.character-choice.locked:focus-visible {
  background: #fff;
  transform: none;
}

.home-mono-preview .character-companion-float {
  position: absolute;
  top: 25px;
  right: 11px;
  z-index: 9;
  display: grid;
  place-items: center;
  border: 2px solid var(--mono-ink);
  border-radius: 48% 52% 46% 54% / 52% 47% 53% 48%;
  background: var(--mono-white);
  box-shadow: 3px 3px 0 var(--character-accent);
}

.home-mono-preview .character-companion-float {
  width: 58px;
  height: 58px;
  padding: 0;
  overflow: hidden;
}

.home-mono-preview .character-companion-float img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 19%;
  background: var(--mono-white);
  filter: none;
  transform: scale(1.55) translateY(12%);
}

.home-mono-preview .chapter-marker.has-character-teaser {
  position: relative;
  z-index: 8;
  overflow: visible;
  clip-path: none;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker.has-character-teaser {
  grid-template-columns: 54px minmax(0, 1fr) 43px;
  padding-right: 14px;
}

.dessert-mono-preview .dessert-screen .chapter-marker.has-character-teaser {
  padding-right: 14px;
}

.home-mono-preview .stage-character-teaser {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 2px solid var(--mono-ink);
  border-radius: 50%;
  background: var(--mono-white);
  color: var(--mono-ink);
  box-shadow: 3px 3px 0 var(--mono-accent);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  animation: stageCharacterHintBounce 1.15s ease-in-out infinite;
}

.home-mono-preview .stage-character-hint {
  position: absolute;
  top: calc(100% + 7px);
  right: 7px;
  z-index: 10;
  box-sizing: border-box;
  width: min(218px, calc(100% - 26px));
  margin: 0;
  padding: 10px 12px;
  color: var(--mono-white);
  background: var(--mono-ink);
  border: 1.5px solid var(--mono-ink);
  border-radius: 5px 3px 6px 4px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  text-align: left;
  animation: stageCharacterHintAppear 180ms ease-out both;
}

.home-mono-preview .stage-character-hint::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 12px;
  width: 12px;
  height: 12px;
  background: var(--mono-ink);
  transform: rotate(45deg);
}

.home-mono-preview .character-unlock-intro {
  position: absolute;
  inset: 28px 16px 24px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px 20px 20px;
  overflow: hidden;
  color: var(--mono-ink);
  text-align: center;
  background: var(--mono-white);
  border: 2px solid var(--mono-ink);
  border-radius: 7px 4px 8px 5px / 5px 8px 4px 7px;
  box-shadow: 6px 6px 0 var(--character-accent);
  animation: characterUnlockReveal 280ms ease-out both;
}

.home-mono-preview .character-unlock-intro::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--mono-ink);
  border-radius: 4px 7px 5px 8px / 8px 5px 7px 4px;
  pointer-events: none;
}

.home-mono-preview .character-unlock-intro > * {
  position: relative;
  z-index: 1;
}

.home-mono-preview .character-unlock-intro > img {
  width: 118px;
  height: 158px;
  margin-bottom: 12px;
  object-fit: cover;
  object-position: center top;
  filter: none;
}

.home-mono-preview .character-unlock-intro > span {
  padding: 3px 6px;
  color: var(--mono-ink);
  background: var(--character-accent);
  font-size: 8px;
  font-weight: 900;
}

.home-mono-preview .character-unlock-intro > strong {
  margin-top: 9px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.home-mono-preview .character-unlock-intro > p {
  margin: 7px 0 15px;
  color: var(--mono-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
}

.home-mono-preview .character-unlock-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--mono-ink);
  background: var(--mono-white);
  border: 1.5px solid var(--mono-ink);
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
}

.home-mono-preview .character-unlock-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  color: var(--mono-white) !important;
  background: var(--mono-ink);
  border: 2px solid var(--mono-ink);
  border-radius: 5px 3px 6px 4px;
  font-size: 10px;
  font-weight: 900;
}

.home-mono-preview .character-unlock-action svg {
  color: var(--mono-white);
}

.profile-avatar img.profile-character-portrait,
.profile-mono-preview .profile-avatar img.profile-character-portrait {
  object-fit: cover;
  object-position: center 16%;
  background: var(--mono-white, #fff);
  filter: none !important;
  transform: scale(1.55) translateY(13%);
}

@keyframes stageCharacterHintBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

@keyframes stageCharacterHintAppear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes characterUnlockReveal {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .home-mono-preview .stage-character-teaser,
  .home-mono-preview .stage-character-hint,
  .home-mono-preview .character-unlock-intro {
    animation: none;
  }
}

/* Character selection story flow */
.character-select-shell.character-story-shell {
  color: #11110f;
  background:
    linear-gradient(rgba(17, 17, 15, .04) 1px, transparent 1px) 0 0 / 100% 26px,
    #f7f7f2;
}

.character-select-page.character-story-page {
  position: relative;
  width: min(430px, calc(49svh - 18px), 100%);
  aspect-ratio: 430 / 872;
  padding: 0;
  overflow: hidden;
  border: 2.5px solid #11110f;
  border-radius: 8px 5px 9px 6px;
  background: #fff;
  box-shadow: 6px 7px 0 #11110f;
  transform: none;
}

.character-pick-layout,
.character-story-layout {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.character-pick-layout {
  padding: 27px 18px 17px;
}

.character-pick-header {
  flex: 0 0 auto;
  padding-bottom: 13px;
  border-bottom: 2px solid #11110f;
}

.character-pick-header > span,
.character-story-header > span,
.character-confirm-kicker {
  display: inline-block;
  width: max-content;
  padding: 4px 7px 3px;
  background: #c8f000;
  color: #11110f;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
}

.character-pick-header h1 {
  margin: 10px 0 0;
  font-size: 31px;
  font-weight: 950;
  line-height: 1.08;
}

.character-pick-header p {
  margin: 8px 0 0;
  color: #62625d;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}

.character-pick-grid {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 10px;
}

.character-pick-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 7px 9px;
  overflow: hidden;
  color: #11110f;
  background: #fff;
  border: 2px solid #11110f;
  border-radius: 7px 4px 8px 5px;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
}

.character-pick-card::before {
  content: "";
  position: absolute;
  inset: 5px 4px 4px 5px;
  border: 1px solid rgba(17, 17, 15, .42);
  border-radius: 4px 7px 5px 8px;
  pointer-events: none;
}

.character-pick-card:active {
  transform: translateY(1px);
}

.character-pick-card:focus-visible {
  outline: 3px solid #c8f000;
  outline-offset: 2px;
}

.character-pick-card.locked {
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .45;
}

.character-pick-role {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  margin-left: 3px;
  color: #555550;
  font-size: 8px;
  font-weight: 900;
}

.character-pick-art {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  margin: 3px 0 1px;
}

.character-pick-art img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
}

.character-pick-name {
  position: relative;
  z-index: 2;
  font-size: 21px;
  font-weight: 950;
  line-height: 1.1;
}

.character-pick-stage {
  position: relative;
  z-index: 2;
  margin-top: 4px;
  color: #65655f;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
}

.character-pick-open {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #11110f;
}

.character-pick-note {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px 9px;
  background: #f3f3ee;
  border: 1.25px solid #11110f;
}

.character-pick-note > span {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: #c8f000;
  border-radius: 50%;
}

.character-pick-note p {
  margin: 1px 0 0;
  color: #64645f;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.4;
}

.character-story-page .character-select-logout {
  margin: 8px auto 0;
  padding: 4px 2px;
  font-size: 9px;
}

.character-story-layout {
  padding: 17px 18px 18px;
}

.character-story-header {
  flex: 0 0 36px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid #11110f;
}

.character-story-header > button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #11110f;
  background: transparent;
  border: 0;
  transform: rotate(180deg);
  cursor: pointer;
}

.character-story-header > span {
  justify-self: start;
}

.character-story-header > b {
  color: #555550;
  font-size: 8px;
  font-weight: 900;
}

.character-story-stage {
  position: relative;
  min-height: 0;
  flex: 1 1 auto;
  margin-top: 8px;
  overflow: hidden;
  border-bottom: 2px solid #11110f;
  background:
    radial-gradient(circle at 1px 1px, rgba(17, 17, 15, .11) 1px, transparent 1.3px) 0 0 / 16px 16px,
    #fff;
}

.character-story-stage::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 9px;
  left: 8px;
  height: 1.5px;
  background: #11110f;
  transform: rotate(-.35deg);
}

.character-story-index {
  position: absolute;
  top: 9px;
  left: 9px;
  z-index: 2;
  color: #62625d;
  font-size: 7px;
  font-weight: 900;
}

.character-story-art {
  position: absolute;
  inset: 8px 34px 3px;
  z-index: 1;
  display: grid;
  place-items: end center;
  animation: characterStoryArtIn .6s cubic-bezier(.22, .85, .35, 1) both;
}

.character-story-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
  animation: characterStoryBreathe 3.8s ease-in-out .7s infinite;
}

.character-story-name {
  position: absolute;
  right: 10px;
  bottom: 14px;
  z-index: 3;
  display: grid;
  justify-items: end;
}

.character-story-name small {
  padding: 3px 5px;
  background: #c8f000;
  color: #11110f;
  font-size: 7px;
  font-weight: 900;
}

.character-story-name strong {
  margin-top: 3px;
  font-size: 24px;
  font-weight: 950;
  line-height: 1;
}

.character-story-copy {
  flex: 0 0 auto;
  min-height: 125px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 6px 10px;
}

.character-story-copy p {
  margin: 0;
  opacity: 0;
  color: #33332f;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
  animation: characterStoryLineIn .42s ease-out var(--story-delay) forwards;
}

.character-story-copy p:first-child {
  color: #11110f;
  font-size: 15px;
  font-weight: 950;
}

.character-story-select {
  min-height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 17px;
  color: #fff;
  background: #11110f;
  border: 2px solid #11110f;
  border-radius: 5px 8px 4px 7px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.character-confirm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  background: rgba(17, 17, 15, .68);
  animation: characterConfirmFadeIn .18s ease-out both;
}

.character-confirm-dialog {
  position: relative;
  width: min(100%, 330px);
  padding: 22px 20px 18px;
  color: #11110f;
  background: #fff;
  border: 2.5px solid #11110f;
  border-radius: 8px 5px 10px 6px;
  box-shadow: 6px 7px 0 #c8f000;
  text-align: center;
  animation: characterConfirmRise .3s cubic-bezier(.22, .85, .35, 1) both;
}

.character-confirm-kicker {
  margin: 0 auto;
}

.character-confirm-avatar {
  width: 68px;
  height: 68px;
  margin: 14px auto 10px;
  overflow: hidden;
  background: #fff;
  border: 2px solid #11110f;
  border-radius: 50%;
}

.character-confirm-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 14%;
  transform: scale(1.55) translateY(14%);
  transform-origin: center;
}

.character-confirm-dialog h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 950;
  line-height: 1.12;
}

.character-confirm-dialog > p {
  margin: 9px 0 0;
  color: #3c3c37;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.character-confirm-dialog > small {
  display: block;
  margin-top: 13px;
  padding-top: 11px;
  color: #777771;
  border-top: 1px solid #d2d2cc;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
}

.character-confirm-actions {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 7px;
  margin-top: 16px;
}

.character-confirm-actions button {
  min-height: 43px;
  padding: 0 8px;
  color: #11110f;
  background: #fff;
  border: 1.7px solid #11110f;
  border-radius: 5px 7px 4px 6px;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.character-confirm-actions button:last-child {
  color: #fff;
  background: #11110f;
}

@keyframes characterStoryArtIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes characterStoryBreathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes characterStoryLineIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes characterConfirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes characterConfirmRise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 620px) {
  .character-select-page.character-story-page {
    width: 100%;
    height: 100svh;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .character-pick-layout {
    padding:
      max(24px, env(safe-area-inset-top))
      18px
      max(16px, env(safe-area-inset-bottom));
  }

  .character-story-layout {
    padding:
      max(15px, env(safe-area-inset-top))
      18px
      max(18px, env(safe-area-inset-bottom));
  }
}

@media (max-height: 720px) {
  .character-pick-layout {
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .character-pick-header h1 {
    margin-top: 7px;
    font-size: 27px;
  }

  .character-pick-header p {
    margin-top: 5px;
  }

  .character-pick-grid {
    margin-top: 10px;
    margin-bottom: 7px;
  }

  .character-story-layout {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(11px, env(safe-area-inset-bottom));
  }

  .character-story-copy {
    min-height: 106px;
    gap: 4px;
    padding-top: 8px;
    padding-bottom: 7px;
  }

  .character-story-copy p {
    font-size: 10px;
  }

  .character-story-copy p:first-child {
    font-size: 14px;
  }

  .character-story-select {
    min-height: 47px;
    flex-basis: 47px;
  }
}

/* Approved watercolor character selection poster.
   The supplied artwork is the visual source of truth; only the hit areas are live UI. */
.character-select-shell.character-poster-shell {
  min-height: 100svh;
  height: auto;
  place-items: start center;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: #faf6eb;
}

.character-select-page.character-story-page.character-poster-page {
  width: min(430px, 100vw);
  height: auto;
  min-height: 0;
  aspect-ratio: 864 / 1821;
  padding: 0;
  overflow: hidden;
  background: #faf6eb;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.character-pick-poster-layout {
  position: relative;
  width: 100%;
  height: 100%;
  isolation: isolate;
  overflow: hidden;
  background: #faf6eb;
}

.character-pick-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.character-pick-poster-hotspot {
  position: absolute;
  z-index: 1;
  display: block;
  margin: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 42% 42% 18% 18%;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.character-pick-poster-hotspot:focus-visible {
  outline: 3px solid #ef6d5d;
  outline-offset: -3px;
}

.character-pick-poster-hotspot:active {
  background: rgba(239, 109, 93, .035);
}

.character-pick-poster-jarin {
  top: 27.4%;
  left: 9%;
  width: 40.5%;
  height: 56.5%;
}

.character-pick-poster-gobi {
  top: 29.2%;
  right: 8.5%;
  width: 40.5%;
  height: 54.7%;
}

.character-pick-poster-logout {
  left: 27%;
  bottom: 1.2%;
  width: 46%;
  height: 5.5%;
  border-radius: 0;
}

@media (min-width: 621px) {
  .character-select-shell.character-poster-shell {
    place-items: center;
    padding: 20px;
  }

  .character-select-page.character-story-page.character-poster-page {
    width: min(430px, 47.446svh, calc(100vw - 40px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-story-art,
  .character-story-art img,
  .character-story-copy p,
  .character-confirm-backdrop,
  .character-confirm-dialog {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* Local home kitchen background preview: 2026-07-25 */
.home-mono-preview .character-home-screen {
  --kitchen-wall: #f7ccd8;
  --kitchen-cabinet: #4e83c1;
  --kitchen-floor: #fff0a3;
}

.home-mono-preview .character-home-stage {
  background: #fffdf8;
}

.home-mono-preview .character-viewer-stage {
  background-color: var(--kitchen-floor);
  background-image: url("./assets/illustrations/backgrounds/home-kitchen-handdrawn-v2.png?v=20260725-kitchen-background-v2");
  background-repeat: no-repeat;
  background-position: center 48%;
  background-size: cover;
  border-right-color: rgba(17, 17, 15, .32);
  border-left-color: rgba(17, 17, 15, .32);
}

.home-mono-preview .character-viewer-registration,
.home-mono-preview .character-viewer-ground {
  display: none;
}

.home-mono-preview .character-viewer-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid rgba(17, 17, 15, .12);
  pointer-events: none;
}

.home-mono-preview .character-companion-float,
.home-mono-preview .character-unlock-intro {
  display: none !important;
}

.home-mono-preview .character-viewer-stage img[data-character-pose],
.home-mono-preview .character-viewer-stage img[data-character-pose-blend] {
  bottom: 9px;
  width: min(88%, 250px);
  height: calc(100% - 34px);
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .72));
}

@media (max-width: 620px) {
  .home-mono-preview .character-viewer-stage {
    background-position: center 47%;
  }

  .home-mono-preview .character-viewer-stage img[data-character-pose],
  .home-mono-preview .character-viewer-stage img[data-character-pose-blend] {
    width: min(91%, 240px);
  }
}

/* Jarin home: flat editorial kitchen, 2026-07-25 */
.home-frame-phone.home-mono-preview.character-home-jarin-theme {
  --jarin-butter: #fff8be;
  --jarin-pink: #f2b8cf;
  --jarin-red: #d5232f;
  --jarin-white: #fff;
  --jarin-coffee: #3b190e;
  --jarin-line: #b9b8ae;
  --jarin-muted: #77746d;
  grid-template-rows:
    calc(52px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom));
  border: 1px solid var(--jarin-line);
  border-radius: 0;
  background: var(--jarin-butter);
  box-shadow: none;
}

.character-home-jarin-theme .top {
  padding: calc(10px + env(safe-area-inset-top)) 16px 9px;
  border-bottom: 1px solid var(--jarin-line);
  background: var(--jarin-butter);
}

.character-home-jarin-theme .top::after,
.character-home-jarin-theme .mono-tabs::before {
  display: none !important;
}

.character-home-jarin-theme .content {
  padding: 12px 12px 20px;
  background: var(--jarin-butter);
}

.character-home-jarin-theme .character-home-jarin {
  gap: 14px;
  color: var(--jarin-coffee);
}

.character-home-jarin-theme .character-home-stage {
  padding: 11px;
  color: var(--jarin-coffee);
  background: var(--jarin-white);
  border: 1px solid var(--jarin-line);
  border-radius: 0;
}

.character-home-jarin-theme .character-home-stage::after,
.character-home-jarin-theme .character-viewer-stage::after,
.character-home-jarin-theme .character-home-status::before {
  display: none;
}

.character-home-jarin-theme .character-home-head {
  z-index: 6;
  align-items: center;
  padding: 3px 3px 10px;
  border-bottom: 1px solid var(--jarin-line);
}

.character-home-jarin-theme .character-home-head span,
.character-home-jarin-theme .character-home-head p,
.character-home-jarin-theme .character-home-next small {
  color: var(--jarin-muted);
}

.character-home-jarin-theme .character-home-head h2 {
  margin-top: 4px;
  color: var(--jarin-coffee);
  font-size: 29px;
}

.character-home-jarin-theme .character-home-count {
  padding: 6px 8px 5px;
  color: var(--jarin-white);
  background: var(--jarin-red);
  border: 0;
  transform: none;
}

.character-home-jarin-theme .character-home-count span {
  color: var(--jarin-white);
}

.character-home-jarin-theme .character-viewer-shell {
  padding: 10px 0;
}

.character-home-jarin-theme .character-viewer-stage {
  height: clamp(360px, 49vh, 430px);
  background-color: var(--jarin-butter);
  background-image: url("./assets/illustrations/backgrounds/home-kitchen-jarin-flat-v1.jpg?v=20260725-jarin-home-flat-v1");
  background-repeat: no-repeat;
  background-position: center 48%;
  background-size: cover;
  border: 1px solid var(--jarin-line);
  cursor: default;
}

.character-home-jarin-theme .character-viewer-stage img[data-character-pose],
.character-home-jarin-theme .character-viewer-stage img[data-character-pose-blend],
.character-home-jarin-theme .character-viewer-registration,
.character-home-jarin-theme .character-viewer-ground {
  display: none !important;
}

.character-home-jarin-theme .character-home-foot {
  padding: 10px 3px 2px;
  border-top: 1px solid var(--jarin-line);
}

.character-home-jarin-theme .character-home-foot > div {
  display: none;
}

.character-home-jarin-theme .character-home-primary {
  min-height: 48px;
  padding: 8px 10px 8px 12px;
  color: var(--jarin-red) !important;
  background: var(--jarin-pink);
  border: 1px solid var(--jarin-red);
  border-radius: 0;
}

.character-home-jarin-theme .character-home-primary small,
.character-home-jarin-theme .character-home-primary strong {
  color: var(--jarin-coffee);
}

.character-home-jarin-theme .character-home-primary > svg {
  color: var(--jarin-white);
  background: var(--jarin-red);
}

.character-home-jarin-theme .character-home-status {
  padding: 14px;
  color: var(--jarin-coffee);
  background: var(--jarin-white);
  border: 1px solid var(--jarin-line);
}

.character-home-jarin-theme .character-home-status > header span,
.character-home-jarin-theme .character-home-next > span {
  color: var(--jarin-red);
}

.character-home-jarin-theme .character-home-status > header b {
  color: var(--jarin-white);
  background: var(--jarin-red);
}

.character-home-jarin-theme .character-home-progress {
  height: 11px;
  background: var(--jarin-white);
  border: 1px solid var(--jarin-line);
}

.character-home-jarin-theme .character-home-progress i {
  background: var(--jarin-pink);
  border-right: 1px solid var(--jarin-red);
}

.character-home-jarin-theme .character-home-status > button {
  border: 1px solid var(--jarin-line);
  border-radius: 0;
  color: var(--jarin-coffee);
  background: var(--jarin-butter);
}

.character-home-jarin-theme .mono-tabs {
  padding: 7px 12px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--jarin-line) !important;
  background: var(--jarin-white) !important;
}

.character-home-jarin-theme .mono-tabs button,
.character-home-jarin-theme .mono-tabs button:hover {
  color: var(--jarin-muted) !important;
}

.character-home-jarin-theme .mono-tabs button.active,
.character-home-jarin-theme .mono-tabs button.active .tab-menu-label {
  color: var(--jarin-red) !important;
}

.character-home-jarin-theme .mono-tabs button.active::before {
  height: 2px !important;
  background: var(--jarin-red) !important;
}

@media (max-width: 620px) {
  .character-home-jarin-theme .character-home-stage {
    padding: 10px;
  }

  .character-home-jarin-theme .character-viewer-stage {
    height: clamp(350px, 47vh, 410px);
    background-position: center 47%;
  }
}

/* Feed: Jarin home palette with restrained halftone graphics, 2026-07-25 */
.feed-frame-phone.feed-mono-preview {
  --feed-halftone-butter: #fff8be;
  --feed-halftone-pink: #f2b8cf;
  --feed-halftone-pink-soft: #fbe4ec;
  --feed-halftone-red: #d5232f;
  --feed-halftone-white: #fff;
  --feed-halftone-coffee: #3b190e;
  --feed-halftone-line: #b9b8ae;
  --feed-halftone-muted: #77746d;
  grid-template-rows:
    calc(52px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom));
  border: 1px solid var(--feed-halftone-line);
  border-radius: 0;
  background: var(--feed-halftone-butter) !important;
  box-shadow: none;
}

.feed-frame-phone.feed-mono-preview::before,
.feed-mono-preview .top::after,
.feed-mono-preview .feed-friends::after,
.feed-mono-preview .feed-list-head::after,
.feed-mono-preview .feed-post-actions::after {
  display: none !important;
}

.feed-mono-preview .top {
  padding: calc(10px + env(safe-area-inset-top)) 16px 9px !important;
  border-bottom: 1px solid var(--feed-halftone-line);
  background: var(--feed-halftone-butter) !important;
}

.feed-mono-preview .content {
  padding: 12px 12px 24px !important;
  background-color: var(--feed-halftone-butter) !important;
  background-image: none !important;
}

.feed-mono-preview .feed-screen {
  display: grid;
  gap: 12px;
  padding: 0 0 10px;
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-filter,
.feed-mono-preview .feed-friends,
.feed-mono-preview .feed-list {
  background: transparent !important;
}

.feed-mono-preview .feed-pull-refresh {
  top: -38px;
  min-width: 132px;
  height: 32px;
  padding: 3px 9px 3px 4px;
  border: 1px solid var(--feed-halftone-red);
  clip-path: none;
  background: var(--feed-halftone-white);
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-pull-refresh > span {
  width: 23px;
  height: 23px;
  border: 0;
  background: var(--feed-halftone-red);
  color: var(--feed-halftone-white);
}

.feed-mono-preview .feed-pull-refresh small {
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .content.feed-pull-ready .feed-pull-refresh > span {
  background: var(--feed-halftone-coffee);
  color: var(--feed-halftone-white);
}

.feed-mono-preview .feed-heading {
  min-height: 132px;
  grid-template-columns: minmax(0, 1fr) 52px;
  gap: 14px;
  margin: 0;
  padding: 21px 20px;
  border: 1px solid var(--feed-halftone-red);
  clip-path: none;
  background-color: var(--feed-halftone-pink) !important;
  background-image:
    radial-gradient(circle, rgba(213, 35, 47, .34) 0 1.25px, transparent 1.4px) !important;
  background-position: 0 0 !important;
  background-size: 9px 9px !important;
}

.feed-mono-preview .feed-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42%;
  height: 52%;
  background: var(--feed-halftone-pink);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}

.feed-mono-preview .feed-heading > * {
  position: relative;
  z-index: 1;
}

.feed-mono-preview .feed-heading .screen-kicker {
  padding: 3px 6px;
  background: var(--feed-halftone-white);
  color: var(--feed-halftone-red);
  font-size: 7px;
  transform: none;
}

.feed-mono-preview .feed-heading h2 {
  margin: 9px 0 5px;
  color: var(--feed-halftone-coffee);
  font-size: 27px;
  line-height: 1.05;
}

.feed-mono-preview .feed-heading p {
  max-width: 220px;
  color: var(--feed-halftone-coffee);
  font-size: 8px;
}

.feed-mono-preview .feed-heading-icon {
  width: 50px;
  height: 54px;
  border: 1px solid var(--feed-halftone-red);
  clip-path: none;
  background: var(--feed-halftone-white) !important;
  color: var(--feed-halftone-red);
  transform: none;
}

.feed-mono-preview .feed-filter {
  min-height: 43px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--feed-halftone-line);
  clip-path: none;
  background: var(--feed-halftone-white) !important;
}

.feed-mono-preview .feed-filter button,
.feed-mono-preview .feed-filter button:hover,
.feed-mono-preview .feed-filter button.active {
  min-height: 35px;
  color: var(--feed-halftone-muted);
}

.feed-mono-preview .feed-filter button + button {
  border-left: 1px solid var(--feed-halftone-line);
}

.feed-mono-preview .feed-filter button.active {
  background: var(--feed-halftone-red) !important;
  color: var(--feed-halftone-white);
}

.feed-mono-preview .feed-friends {
  padding: 14px 12px 16px;
  border: 1px solid var(--feed-halftone-line);
  background-color: var(--feed-halftone-white) !important;
  background-image:
    radial-gradient(circle, rgba(242, 184, 207, .7) 0 1.05px, transparent 1.2px) !important;
  background-position: calc(100% - 2px) 2px !important;
  background-size: 10px 10px !important;
}

.feed-mono-preview .feed-section-top,
.feed-mono-preview .feed-list-head {
  margin-bottom: 11px;
}

.feed-mono-preview .feed-section-top > div,
.feed-mono-preview .feed-list-head > div {
  padding-right: 10px;
  background: var(--feed-halftone-white);
}

.feed-mono-preview .feed-section-top span,
.feed-mono-preview .feed-list-head span {
  padding: 3px 5px;
  background: var(--feed-halftone-pink);
  color: var(--feed-halftone-red);
}

.feed-mono-preview .feed-section-top h3,
.feed-mono-preview .feed-list-head h3 {
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-section-top small,
.feed-mono-preview .feed-list-head small {
  padding: 2px 4px;
  color: var(--feed-halftone-muted);
  background: var(--feed-halftone-white);
}

.feed-mono-preview .friend-strip {
  gap: 7px;
}

.feed-mono-preview .friend-card {
  min-height: 118px;
  padding: 12px 6px 9px;
  border: 1px solid var(--feed-halftone-line);
  clip-path: none;
  background-color: var(--feed-halftone-butter);
  background-image:
    radial-gradient(circle, rgba(213, 35, 47, .18) 0 1px, transparent 1.1px);
  background-position: 2px 2px;
  background-size: 9px 9px;
}

.feed-mono-preview .friend-card::after {
  content: "";
  position: absolute;
  inset: 44% 0 0;
  background: var(--feed-halftone-butter);
  pointer-events: none;
}

.feed-mono-preview .friend-card > * {
  position: relative;
  z-index: 1;
}

.feed-mono-preview .friend-card > img {
  border: 1px solid var(--feed-halftone-red);
  background: var(--feed-halftone-white);
  filter: grayscale(1) contrast(1.15);
}

.feed-mono-preview .friend-card strong {
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .friend-card span {
  color: var(--feed-halftone-muted);
}

.feed-mono-preview .friend-card button {
  border: 0;
  background: var(--feed-halftone-red);
  color: var(--feed-halftone-white);
}

.feed-mono-preview .feed-list {
  gap: 13px;
  padding: 15px 0 4px;
}

.feed-mono-preview .feed-list-head {
  margin: 0;
  padding: 12px 12px 11px;
  border: 1px solid var(--feed-halftone-line);
  background: var(--feed-halftone-white);
}

.feed-mono-preview .feed-post {
  position: relative;
  border: 1px solid var(--feed-halftone-line);
  clip-path: none;
  background: var(--feed-halftone-white);
}

.feed-mono-preview .feed-post::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  z-index: 1;
  border-right: 1px solid rgba(213, 35, 47, .38);
  background-color: var(--feed-halftone-pink);
  background-image:
    radial-gradient(circle, var(--feed-halftone-red) 0 1px, transparent 1.15px);
  background-size: 6px 6px;
  pointer-events: none;
}

.feed-mono-preview .feed-post > header {
  min-height: 56px;
  padding: 10px 13px 9px 19px;
  border-bottom: 1px solid var(--feed-halftone-line);
}

.feed-mono-preview .feed-post > header > img {
  border: 1px solid var(--feed-halftone-red);
  background: var(--feed-halftone-white);
  filter: grayscale(1) contrast(1.15);
}

.feed-mono-preview .feed-post > header strong {
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-post > header span {
  color: var(--feed-halftone-muted);
}

.feed-mono-preview .feed-post > header em {
  border: 1px solid var(--feed-halftone-red);
  background: var(--feed-halftone-pink-soft);
  color: var(--feed-halftone-red);
}

.feed-mono-preview .feed-post-photo {
  width: calc(100% - 28px);
  margin: 13px 13px 0 15px;
  border: 1px solid var(--feed-halftone-line);
  background: var(--feed-halftone-butter);
  filter: none;
}

.feed-mono-preview .feed-post-body {
  padding: 11px 13px 14px 19px;
}

.feed-mono-preview .feed-post-actions {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--feed-halftone-line);
}

.feed-mono-preview .feed-post-actions button,
.feed-mono-preview .feed-post-actions button.liked,
.feed-mono-preview .feed-post-actions > span {
  color: var(--feed-halftone-red);
}

.feed-mono-preview .feed-post-actions button,
.feed-mono-preview .feed-post-actions button.liked {
  min-width: 76px;
  padding: 4px 6px;
}

.feed-mono-preview .feed-post-actions button.liked {
  background: var(--feed-halftone-pink) !important;
}

.feed-mono-preview .feed-post-actions button.liked > svg {
  fill: var(--feed-halftone-red);
}

.feed-mono-preview .feed-like-burst i,
.feed-mono-preview .feed-like-burst i:nth-child(2n) {
  color: var(--feed-halftone-red);
}

.feed-mono-preview .feed-like-burst i:nth-child(3n) {
  color: var(--feed-halftone-pink);
}

.feed-mono-preview .feed-post-body p,
.feed-mono-preview .feed-post-body p b {
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-empty {
  border: 1px solid var(--feed-halftone-line);
  clip-path: none;
  background-color: var(--feed-halftone-white);
  background-image:
    radial-gradient(circle, rgba(242, 184, 207, .7) 0 1px, transparent 1.15px);
  background-size: 9px 9px;
  color: var(--feed-halftone-coffee);
}

.feed-mono-preview .feed-empty > span {
  border: 0;
  background: var(--feed-halftone-red) !important;
  color: var(--feed-halftone-white);
}

.feed-mono-preview .mono-tabs {
  padding: 7px 12px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--feed-halftone-line) !important;
  background: var(--feed-halftone-white) !important;
}

.feed-mono-preview .mono-tabs::before {
  display: none !important;
}

.feed-mono-preview .mono-tabs button,
.feed-mono-preview .mono-tabs button:hover {
  color: var(--feed-halftone-muted) !important;
}

.feed-mono-preview .mono-tabs button.active,
.feed-mono-preview .mono-tabs button.active .tab-menu-label {
  color: var(--feed-halftone-red) !important;
}

.feed-mono-preview .mono-tabs button.active::before {
  height: 2px !important;
  background: var(--feed-halftone-red) !important;
}

@media (max-width: 370px) {
  .feed-frame-phone.feed-mono-preview {
    grid-template-rows:
      calc(50px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(78px + env(safe-area-inset-bottom));
  }

  .feed-mono-preview .content {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .feed-mono-preview .feed-heading {
    min-height: 124px;
    padding-right: 17px;
    padding-left: 17px;
  }

  .feed-mono-preview .feed-heading h2 {
    font-size: 24px;
  }

  .feed-mono-preview .feed-friends {
    padding-right: 9px;
    padding-left: 9px;
  }

  .feed-mono-preview .feed-post-photo {
    width: calc(100% - 25px);
    margin-right: 11px;
    margin-left: 14px;
  }
}

/* Flat suite: home meal, ranking, and profile, 2026-07-25 */
.home-meal-frame-phone.home-meal-mono-preview,
.ranking-frame-phone.ranking-mono-preview,
.profile-frame-phone.profile-mono-preview {
  --flat-butter: #fff8be;
  --flat-pink: #f2b8cf;
  --flat-pink-soft: #fbe4ec;
  --flat-red: #d5232f;
  --flat-white: #fff;
  --flat-coffee: #3b190e;
  --flat-line: #b9b8ae;
  --flat-muted: #77746d;
  grid-template-rows:
    calc(52px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom));
  border: 1px solid var(--flat-line);
  border-radius: 0;
  background: var(--flat-butter) !important;
  background-image: none !important;
  box-shadow: none;
}

.home-meal-frame-phone.home-meal-mono-preview::before,
.ranking-frame-phone.ranking-mono-preview::before,
.profile-frame-phone.profile-mono-preview::before,
.home-meal-mono-preview .top::after,
.ranking-mono-preview .top::after,
.profile-mono-preview .top::after,
.home-meal-mono-preview .home-meal-screen .home-route::before,
.ranking-mono-preview .ranking-heading::after,
.ranking-mono-preview .podium::before,
.ranking-mono-preview .podium-head::after,
.ranking-mono-preview .rank-list-head::after,
.profile-mono-preview .profile-hero::after,
.profile-mono-preview .profile-section-card::after {
  display: none !important;
}

.home-meal-mono-preview .top,
.ranking-mono-preview .top,
.profile-mono-preview .top {
  height: auto !important;
  min-height: 0 !important;
  padding: calc(10px + env(safe-area-inset-top)) 16px 9px !important;
  border-bottom: 1px solid var(--flat-line);
  background: var(--flat-butter) !important;
}

.home-meal-mono-preview .content,
.ranking-mono-preview .content,
.profile-mono-preview .content {
  padding: 12px 12px 24px !important;
  background: var(--flat-butter) !important;
  background-image: none !important;
  scrollbar-width: none;
}

.home-meal-mono-preview .content::-webkit-scrollbar,
.ranking-mono-preview .content::-webkit-scrollbar,
.profile-mono-preview .content::-webkit-scrollbar {
  display: none;
}

.home-meal-mono-preview .home-meal-screen,
.ranking-mono-preview .ranking-screen,
.profile-mono-preview .profile-screen {
  color: var(--flat-coffee);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.home-meal-mono-preview .mono-tabs,
.ranking-mono-preview .mono-tabs,
.profile-mono-preview .mono-tabs {
  height: auto !important;
  min-height: 0 !important;
  padding: 7px 12px calc(9px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--flat-line) !important;
  background: var(--flat-white) !important;
}

.home-meal-mono-preview .mono-tabs::before,
.ranking-mono-preview .mono-tabs::before,
.profile-mono-preview .mono-tabs::before {
  display: none !important;
}

.home-meal-mono-preview .mono-tabs button,
.home-meal-mono-preview .mono-tabs button:hover,
.ranking-mono-preview .mono-tabs button,
.ranking-mono-preview .mono-tabs button:hover,
.profile-mono-preview .mono-tabs button,
.profile-mono-preview .mono-tabs button:hover {
  color: var(--flat-muted) !important;
}

.home-meal-mono-preview .mono-tabs button.active,
.home-meal-mono-preview .mono-tabs button.active .tab-menu-label,
.ranking-mono-preview .mono-tabs button.active,
.ranking-mono-preview .mono-tabs button.active .tab-menu-label,
.profile-mono-preview .mono-tabs button.active,
.profile-mono-preview .mono-tabs button.active .tab-menu-label {
  color: var(--flat-red) !important;
}

.home-meal-mono-preview .mono-tabs button.active::before,
.ranking-mono-preview .mono-tabs button.active::before,
.profile-mono-preview .mono-tabs button.active::before {
  height: 2px !important;
  background: var(--flat-red) !important;
}

/* Home meal */
.home-meal-mono-preview .home-meal-screen {
  padding: 0 0 10px;
  background: transparent !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero {
  min-height: 286px;
  margin: 0 0 14px;
  padding: 20px 19px 17px;
  overflow: hidden;
  border: 1px solid var(--flat-red);
  border-radius: 0;
  clip-path: none;
  background-color: var(--flat-pink) !important;
  background-image:
    radial-gradient(circle, rgba(213, 35, 47, .3) 0 1.15px, transparent 1.3px) !important;
  background-position: 0 0 !important;
  background-size: 9px 9px !important;
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero::before {
  content: "";
  position: absolute;
  inset: 36% 0 0;
  display: block !important;
  background: var(--flat-pink);
  pointer-events: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero > * {
  position: relative;
  z-index: 1;
}

.home-meal-mono-preview .home-meal-screen .screen-kicker {
  padding: 3px 6px;
  color: var(--flat-red);
  background: var(--flat-white);
  transform: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero h2 {
  color: var(--flat-coffee);
}

.home-meal-mono-preview .home-meal-screen .map-hero-lead {
  color: var(--flat-coffee);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-stat {
  border: 1px solid var(--flat-red);
  border-radius: 0;
  color: var(--flat-red);
  background: var(--flat-white);
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art {
  border-color: var(--flat-red);
  background: var(--flat-butter);
  filter: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .home-meal-summary {
  border: 1px solid var(--flat-line);
  border-radius: 0;
  background: var(--flat-white);
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-summary b,
.home-meal-mono-preview .home-meal-summary span:nth-of-type(2) b {
  color: var(--flat-red);
}

.home-meal-mono-preview .home-meal-summary small,
.home-meal-mono-preview .home-meal-summary em {
  color: var(--flat-muted);
}

.home-meal-mono-preview .home-meal-summary i {
  background: var(--flat-pink-soft);
  color: var(--flat-coffee);
  border-color: var(--flat-red);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-progress {
  border: 1px solid var(--flat-line);
  background: var(--flat-white);
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-progress span {
  background: var(--flat-red);
}

.home-meal-mono-preview .home-meal-screen .home-route {
  padding: 0;
  background: transparent !important;
}

.home-meal-mono-preview .home-meal-screen .map-route {
  background: linear-gradient(
    90deg,
    transparent calc(50% - .5px),
    rgba(213, 35, 47, .28) calc(50% - .5px),
    rgba(213, 35, 47, .28) calc(50% + .5px),
    transparent calc(50% + .5px)
  );
}

.home-meal-mono-preview .home-meal-screen .chapter-marker {
  min-height: 76px;
  margin: 12px 0;
  padding: 11px 13px;
  border: 1px solid var(--flat-line);
  border-radius: 0;
  clip-path: none;
  background: var(--flat-white);
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  display: block !important;
  background-color: var(--flat-pink);
  background-image:
    radial-gradient(circle, var(--flat-red) 0 1px, transparent 1.15px);
  background-size: 6px 6px;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen .chapter-number {
  border: 1px solid var(--flat-red);
  color: var(--flat-red);
  background: var(--flat-pink-soft);
}

.home-meal-mono-preview .home-meal-screen .chapter-copy small {
  color: var(--flat-red);
}

.home-meal-mono-preview .home-meal-screen .chapter-copy b {
  color: var(--flat-coffee);
}

.home-meal-mono-preview .home-meal-screen .chapter-copy em {
  color: var(--flat-muted);
}

.home-meal-mono-preview .home-meal-screen .map-step,
.home-meal-mono-preview .home-meal-screen .map-step.left,
.home-meal-mono-preview .home-meal-screen .map-step.right,
.home-meal-mono-preview .home-meal-screen .map-step-status-available {
  padding: 0;
  margin: 12px 0;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
  width: 100%;
  min-height: 110px;
  grid-template-columns: 76px minmax(0, 1fr) 34px;
  padding: 12px 13px;
  border: 1px solid var(--flat-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
  border-color: var(--flat-red) !important;
  background-color: var(--flat-pink-soft) !important;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop:hover:not(:disabled),
.home-meal-mono-preview .home-meal-screen .map-step.right .map-stop:hover:not(:disabled) {
  transform: none;
}

.home-meal-mono-preview .home-meal-screen .node-dish,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
  width: 66px;
  height: 66px;
  border: 1px solid var(--flat-red);
  background: var(--flat-butter);
}

.home-meal-mono-preview .home-meal-screen .node-dish::before {
  display: none;
}

.home-meal-mono-preview .home-meal-screen .node-sticker,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-sticker,
.home-meal-mono-preview .home-meal-screen .node-stage-art,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-stage-art {
  filter: none;
}

.home-meal-mono-preview .home-meal-screen .node-dish .node-badge {
  border-color: var(--flat-red);
  background: var(--flat-pink);
  color: var(--flat-red);
}

.home-meal-mono-preview .home-meal-screen .available .node-dish .node-badge {
  background: var(--flat-red);
  color: var(--flat-white);
}

.home-meal-mono-preview .home-meal-screen .node-num,
.home-meal-mono-preview .home-meal-screen .node-level {
  color: var(--flat-muted);
}

.home-meal-mono-preview .home-meal-screen .node-title,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-title {
  color: var(--flat-coffee);
}

.home-meal-mono-preview .home-meal-screen .node-state,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-state {
  color: var(--flat-muted);
}

.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-state {
  color: var(--flat-red);
  background: var(--flat-pink);
}

.home-meal-mono-preview .home-meal-screen .node-arrow,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-arrow {
  border: 1px solid var(--flat-line);
  color: var(--flat-red);
  background: var(--flat-white);
}

.home-meal-mono-preview .home-meal-screen .forest-goal,
.home-meal-mono-preview .home-meal-screen .forest-goal.trailhead,
.home-meal-mono-preview .home-meal-screen .forest-goal.summit,
.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon {
  margin: 13px 0;
  border: 1px solid var(--flat-line);
  border-radius: 0;
  clip-path: none;
  background: var(--flat-white) !important;
  box-shadow: none;
}

.home-meal-mono-preview .home-meal-screen .goal-kicker,
.home-meal-mono-preview .home-meal-screen .summit .goal-kicker,
.home-meal-mono-preview .home-meal-screen .trailhead .goal-kicker {
  color: var(--flat-red);
  background: var(--flat-pink);
}

.home-meal-mono-preview .home-meal-screen .forest-goal b,
.home-meal-mono-preview .home-meal-screen .summit b,
.home-meal-mono-preview .home-meal-screen .trailhead b {
  color: var(--flat-coffee);
}

.home-meal-mono-preview .home-meal-screen .forest-goal small,
.home-meal-mono-preview .home-meal-screen .summit small,
.home-meal-mono-preview .home-meal-screen .trailhead small {
  color: var(--flat-muted);
}

/* Ranking */
.ranking-mono-preview .ranking-screen {
  display: grid;
  gap: 12px;
  padding: 0 0 10px;
}

.ranking-mono-preview .ranking-heading {
  min-height: 132px;
  margin: 0;
  padding: 21px 20px;
  border: 1px solid var(--flat-red);
  border-radius: 0;
  clip-path: none;
  background-color: var(--flat-pink) !important;
  background-image:
    radial-gradient(circle, rgba(213, 35, 47, .3) 0 1.15px, transparent 1.3px) !important;
  background-size: 9px 9px !important;
  box-shadow: none;
}

.ranking-mono-preview .ranking-heading > div {
  position: relative;
  z-index: 1;
  padding-right: 46%;
}

.ranking-mono-preview .ranking-heading .screen-kicker {
  padding: 3px 6px;
  color: var(--flat-red);
  background: var(--flat-white);
  transform: none;
}

.ranking-mono-preview .ranking-heading h2,
.ranking-mono-preview .ranking-heading h2 em {
  color: var(--flat-coffee);
}

.ranking-mono-preview .ranking-heading h2 em {
  box-shadow: inset 0 -8px 0 var(--flat-red);
}

.ranking-mono-preview .ranking-heading p {
  color: var(--flat-coffee);
}

.ranking-mono-preview .ranking-issue {
  border: 1px solid var(--flat-red);
  border-radius: 0;
  color: var(--flat-red);
  background: var(--flat-white);
  transform: none;
}

.ranking-mono-preview .ranking-issue span,
.ranking-mono-preview .ranking-issue small,
.ranking-mono-preview .ranking-issue strong {
  color: inherit;
}

.ranking-mono-preview .ranking-segment {
  min-height: 43px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--flat-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
}

.ranking-mono-preview .ranking-segment button,
.ranking-mono-preview .ranking-segment button:hover,
.ranking-mono-preview .ranking-segment button.active {
  color: var(--flat-muted);
  background: transparent;
}

.ranking-mono-preview .ranking-segment button + button {
  border-left: 1px solid var(--flat-line);
}

.ranking-mono-preview .ranking-segment button.active {
  color: var(--flat-white);
  background: var(--flat-red) !important;
}

.ranking-mono-preview .podium {
  margin: 0;
  padding: 14px 13px 15px;
  border: 1px solid var(--flat-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ranking-mono-preview .podium-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--flat-line);
}

.ranking-mono-preview .podium-head span {
  color: var(--flat-red);
  background: var(--flat-pink);
}

.ranking-mono-preview .podium-head small {
  color: var(--flat-muted);
}

.ranking-mono-preview .podium-person,
.ranking-mono-preview .podium-person.first,
.ranking-mono-preview .podium-person.second,
.ranking-mono-preview .podium-person.third {
  color: var(--flat-coffee);
}

.ranking-mono-preview .podium-person + .podium-person::before {
  background: var(--flat-line);
}

.ranking-mono-preview .podium-avatar,
.ranking-mono-preview .podium-person.first .podium-avatar {
  border: 1px solid var(--flat-red);
  background: var(--flat-butter);
}

.ranking-mono-preview .podium-avatar img {
  filter: grayscale(1) contrast(1.15);
}

.ranking-mono-preview .podium-rank,
.ranking-mono-preview .podium-person.first .podium-rank {
  border: 0;
  color: var(--flat-white);
  background: var(--flat-red);
}

.ranking-mono-preview .podium-person strong,
.ranking-mono-preview .podium-clear {
  color: var(--flat-coffee);
}

.ranking-mono-preview .podium-block,
.ranking-mono-preview .podium-person.first .podium-block,
.ranking-mono-preview .podium-person.second .podium-block,
.ranking-mono-preview .podium-person.third .podium-block {
  border: 1px solid var(--flat-line);
  border-radius: 0;
  background: var(--flat-white);
  box-shadow: none;
}

.ranking-mono-preview .podium-block::before {
  background: var(--flat-pink);
}

.ranking-mono-preview .podium-block::after {
  background: var(--flat-red);
}

.ranking-mono-preview .podium-emblem,
.ranking-mono-preview .podium-person.first .podium-emblem {
  color: var(--flat-red);
  background: var(--flat-pink-soft);
}

.ranking-mono-preview .my-rank {
  margin: 0;
  border: 1px solid var(--flat-red) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-pink-soft) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ranking-mono-preview .my-rank-mark {
  border: 1px solid var(--flat-red);
  background: var(--flat-white);
}

.ranking-mono-preview .my-rank-mark img {
  filter: grayscale(1) contrast(1.15);
}

.ranking-mono-preview .my-rank .my-rank-kicker {
  color: var(--flat-red);
}

.ranking-mono-preview .my-rank strong {
  color: var(--flat-coffee);
}

.ranking-mono-preview .my-rank .my-rank-detail {
  color: var(--flat-muted);
}

.ranking-mono-preview .my-rank > .rank-score {
  border: 0;
  color: var(--flat-white);
  background: var(--flat-red);
}

.ranking-mono-preview .rank-list {
  margin: 0;
  padding: 13px;
  border: 1px solid var(--flat-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.ranking-mono-preview .rank-list-head {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--flat-line);
}

.ranking-mono-preview .rank-list-head span {
  color: var(--flat-red);
  background: var(--flat-pink);
}

.ranking-mono-preview .rank-list-head strong,
.ranking-mono-preview .rank-number,
.ranking-mono-preview .rank-person strong,
.ranking-mono-preview .rank-list .rank-score {
  color: var(--flat-coffee);
}

.ranking-mono-preview .rank-list-head small,
.ranking-mono-preview .rank-person span {
  color: var(--flat-muted);
}

.ranking-mono-preview .rank-row:not(:last-child)::after {
  background: var(--flat-line);
}

.ranking-mono-preview .rank-row .avatar {
  border: 1px solid var(--flat-red);
  background: var(--flat-butter);
}

.ranking-mono-preview .rank-row .avatar img {
  filter: grayscale(1) contrast(1.15);
}

/* Profile */
.profile-mono-preview .profile-screen {
  display: grid;
  gap: 12px;
  padding: 0 0 10px;
}

.profile-mono-preview .profile-hero,
.profile-mono-preview .profile-section-card,
.profile-mono-preview .profile-section:nth-of-type(even) .profile-section-card,
.profile-mono-preview .profile-section:nth-of-type(odd) .profile-section-card {
  margin: 0;
  border: 1px solid var(--flat-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

.profile-mono-preview .profile-hero {
  padding: 18px 16px 15px;
  border-color: var(--flat-red) !important;
  background-color: var(--flat-white) !important;
  background-image: none !important;
}

.profile-mono-preview .profile-hero::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.profile-mono-preview .profile-main,
.profile-mono-preview .profile-stats {
  position: relative;
  z-index: 1;
}

.profile-mono-preview .profile-avatar {
  border: 1px solid var(--flat-red);
  background: var(--flat-white);
  box-shadow: none;
}

.profile-mono-preview .profile-avatar::after {
  display: none;
}

.profile-mono-preview .profile-avatar img {
  filter: grayscale(1) contrast(1.15);
}

.profile-mono-preview .profile-hero .eyebrow {
  color: var(--flat-red);
  background: var(--flat-white);
}

.profile-mono-preview .profile-title-row h2,
.profile-mono-preview .profile-stat strong {
  color: var(--flat-coffee);
}

.profile-mono-preview .level-chip {
  border: 1px solid var(--flat-red);
  border-radius: 0;
  color: var(--flat-red);
  background: var(--flat-white);
  transform: none;
}

.profile-mono-preview .profile-title-note,
.profile-mono-preview .profile-stat span {
  color: var(--flat-muted);
}

.profile-mono-preview .profile-edit-button {
  border: 0;
  border-radius: 0;
  color: var(--flat-white);
  background: var(--flat-red);
  transform: none;
}

.profile-mono-preview .profile-stats {
  border-top: 1px solid var(--flat-red);
}

.profile-mono-preview .profile-stats::before {
  display: none;
}

.profile-mono-preview .profile-stat + .profile-stat {
  border-left: 1px solid var(--flat-red);
  background: transparent;
}

.profile-mono-preview .profile-stat + .profile-stat::before {
  display: none;
}

.profile-mono-preview .profile-section {
  margin: 0;
}

.profile-mono-preview .profile-section-card {
  padding: 14px;
}

.profile-mono-preview .profile-section-card .section-title {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--flat-line);
}

.profile-mono-preview .profile-section-card .section-title::after {
  display: none;
}

.profile-mono-preview .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n + 1) .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n + 2) .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(3n) .section-title-icon,
.profile-mono-preview .profile-section:nth-of-type(even) .section-title-icon {
  border: 0;
  border-radius: 0;
  color: var(--flat-white);
  background: var(--flat-red);
  transform: none;
}

.profile-mono-preview .section-title h3,
.profile-mono-preview .profile-social-stats b {
  color: var(--flat-coffee);
}

.profile-mono-preview .section-title p,
.profile-mono-preview .profile-social-stats small {
  color: var(--flat-muted);
}

.profile-mono-preview .profile-social-stats {
  border: 1px solid var(--flat-line);
  border-radius: 0;
  background: var(--flat-butter);
}

.profile-mono-preview .profile-social-stats span + span {
  border-color: var(--flat-line);
}

.profile-mono-preview .profile-social-link {
  border: 1px solid var(--flat-red);
  border-radius: 0;
  color: var(--flat-white);
  background: var(--flat-red);
  box-shadow: none;
}

.profile-mono-preview .badge-list > *,
.profile-mono-preview .profile-screen input,
.profile-mono-preview .profile-screen select {
  border-color: var(--flat-line);
  border-radius: 0;
  background: var(--flat-white);
  box-shadow: none;
}

@media (max-width: 370px) {
  .home-meal-frame-phone.home-meal-mono-preview,
  .ranking-frame-phone.ranking-mono-preview,
  .profile-frame-phone.profile-mono-preview {
    grid-template-rows:
      calc(50px + env(safe-area-inset-top))
      minmax(0, 1fr)
      calc(78px + env(safe-area-inset-bottom));
  }

  .home-meal-mono-preview .content,
  .ranking-mono-preview .content,
  .profile-mono-preview .content {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero {
    min-height: 276px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .home-meal-mono-preview .home-meal-screen .map-step .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
    grid-template-columns: 69px minmax(0, 1fr) 31px;
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .home-meal-mono-preview .home-meal-screen .node-dish,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
    width: 61px;
    height: 61px;
  }

  .ranking-mono-preview .ranking-heading {
    padding-right: 16px;
    padding-left: 16px;
  }

  .profile-mono-preview .profile-hero {
    padding-right: 14px;
    padding-left: 14px;
  }
}

/* Ranking header repair: preserve the title and give the issue badge its own space. */
.ranking-mono-preview .ranking-heading {
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 14px;
}

.ranking-mono-preview .ranking-heading > .ranking-heading-copy {
  min-width: 0;
  padding-right: 0;
}

.ranking-mono-preview .ranking-heading h2 {
  font-size: 28px;
  white-space: nowrap;
}

.ranking-mono-preview .ranking-heading > .ranking-issue {
  width: 72px;
  height: 68px;
  grid-template-rows: 12px 24px 10px;
  padding: 0;
}

.ranking-mono-preview .ranking-issue span,
.ranking-mono-preview .ranking-issue small {
  font-size: 7px;
  white-space: nowrap;
}

.ranking-mono-preview .ranking-issue strong {
  font-size: 16px;
  white-space: nowrap;
}

@media (max-width: 370px) {
  .ranking-mono-preview .ranking-heading {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 10px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .ranking-mono-preview .ranking-heading h2 {
    font-size: 26px;
  }

  .ranking-mono-preview .ranking-heading > .ranking-issue {
    width: 64px;
  }
}

/* Home-meal layout repair: keep the stage map in normal document flow. */
.home-meal-mono-preview .home-meal-screen > .home-meal-hero {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  isolation: auto !important;
  min-height: 250px;
  padding: 18px 18px 16px !important;
  overflow: hidden;
  border: 1px solid var(--flat-red) !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero::before,
.home-meal-mono-preview .home-meal-screen > .home-meal-hero::after {
  display: none !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-top {
  width: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 0 !important;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-top > div:first-child {
  min-width: 0;
  max-width: none !important;
  padding-right: 94px;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero h2 {
  max-width: none;
  margin-top: 8px;
  font-size: 29px;
  white-space: normal;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-lead {
  width: auto;
  max-width: 185px;
  margin-top: 7px;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-stat {
  top: 17px !important;
  right: 17px !important;
  transform: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art {
  position: absolute !important;
  top: 72px !important;
  right: 16px !important;
  width: 88px;
  height: 82px;
  margin: 0;
  object-fit: contain;
  transform: none;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .home-meal-summary {
  position: absolute !important;
  right: 16px !important;
  bottom: 17px !important;
  left: 16px !important;
  width: auto;
  height: 52px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 40px;
  gap: 7px;
  padding: 7px 8px 7px 10px;
  overflow: hidden;
}

.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-progress {
  position: absolute !important;
  right: 66px !important;
  bottom: 10px !important;
  left: 28px !important;
  width: auto;
}

.home-meal-mono-preview .home-meal-screen .home-route {
  min-height: 0 !important;
  padding: 12px 0 4px !important;
}

.home-meal-mono-preview .home-meal-screen .chapter-marker {
  width: 100%;
  min-height: 74px;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0;
  padding: 11px 13px;
}

.home-meal-mono-preview .home-meal-screen .chapter-number {
  width: 42px;
  height: 42px;
  font-size: 19px;
}

.home-meal-mono-preview .home-meal-screen .map-step,
.home-meal-mono-preview .home-meal-screen .map-step.left,
.home-meal-mono-preview .home-meal-screen .map-step.right,
.home-meal-mono-preview .home-meal-screen .map-step-status-available {
  width: 100%;
  min-height: 0;
  margin: 0 0 10px;
}

.home-meal-mono-preview .home-meal-screen .map-step .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
.home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
  min-height: 96px;
  grid-template-columns: 66px minmax(0, 1fr) 30px;
  gap: 10px;
  padding: 11px 12px;
}

.home-meal-mono-preview .home-meal-screen .node-dish,
.home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
  width: 60px;
  height: 60px;
}

.home-meal-mono-preview .home-meal-screen .forest-goal,
.home-meal-mono-preview .home-meal-screen .forest-goal.trailhead,
.home-meal-mono-preview .home-meal-screen .forest-goal.summit,
.home-meal-mono-preview .home-meal-screen .forest-goal.coming-soon {
  width: 100%;
  margin: 12px 0;
}

@media (max-width: 370px) {
  .home-meal-mono-preview .home-meal-screen > .home-meal-hero {
    min-height: 244px;
    padding: 16px 15px 14px !important;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-hero-top > div:first-child {
    padding-right: 84px;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero h2 {
    font-size: 27px;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art {
    top: 70px !important;
    right: 13px !important;
    width: 80px;
    height: 76px;
  }

  .home-meal-mono-preview .home-meal-screen > .home-meal-hero .home-meal-summary {
    right: 13px !important;
    left: 13px !important;
  }

  .home-meal-mono-preview .home-meal-screen .map-step .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step.right .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available.right .map-stop {
    grid-template-columns: 61px minmax(0, 1fr) 28px;
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .home-meal-mono-preview .home-meal-screen .node-dish,
  .home-meal-mono-preview .home-meal-screen .map-step-status-available .node-dish {
    width: 56px;
    height: 56px;
  }
}

/* Character palette system: Jarin cool pantry / Gobi warm baking nook, 2026-07-26 */
.phone.character-jarin-theme {
  --theme-page: #edf5f7;
  --theme-surface: #fbfcf7;
  --theme-surface-alt: #f1f5f1;
  --theme-soft: #c5dfe9;
  --theme-soft-alt: #dcecf2;
  --theme-accent: #69a6be;
  --theme-accent-strong: #34758f;
  --theme-highlight: #b0d65a;
  --theme-highlight-soft: #f2e69b;
  --theme-coral: #e58c7e;
  --theme-sky: #c5dfe9;
  --theme-nav: #e7eae8;
  --theme-ink: #30362f;
  --theme-muted: #66736d;
  --theme-line: #82918a;
  --theme-line-soft: rgba(52, 117, 143, .3);
  --flat-butter: var(--theme-page);
  --flat-pink: var(--theme-soft);
  --flat-pink-soft: var(--theme-soft-alt);
  --flat-red: var(--theme-accent-strong);
  --flat-white: var(--theme-surface);
  --flat-coffee: var(--theme-ink);
  --flat-line: var(--theme-line);
  --flat-muted: var(--theme-muted);
  --feed-halftone-butter: var(--theme-highlight-soft);
  --feed-halftone-pink: var(--theme-soft);
  --feed-halftone-pink-soft: var(--theme-soft-alt);
  --feed-halftone-red: var(--theme-accent-strong);
  --feed-halftone-white: var(--theme-surface);
  --feed-halftone-coffee: var(--theme-ink);
  --feed-halftone-line: var(--theme-line);
  --feed-halftone-muted: var(--theme-muted);
  --mono-paper: var(--theme-page);
  --mono-white: var(--theme-surface);
  --mono-ink: var(--theme-ink);
  --mono-muted: var(--theme-muted);
  --mono-accent: var(--theme-highlight);
  --mono-accent-soft: var(--theme-highlight-soft);
}

.phone.character-gobi-theme {
  --theme-page: #fff5e8;
  --theme-surface: #fffaf0;
  --theme-surface-alt: #f8efe4;
  --theme-soft: #efc5ce;
  --theme-soft-alt: #f8dfe4;
  --theme-accent: #dc7882;
  --theme-accent-strong: #b84d59;
  --theme-highlight: #f0d160;
  --theme-highlight-soft: #fff0a8;
  --theme-mint: #bfdcb5;
  --theme-sky: #c4dfe9;
  --theme-nav: #e7e9e8;
  --theme-ink: #433a34;
  --theme-muted: #746a64;
  --theme-line: #918b83;
  --theme-line-soft: rgba(184, 77, 89, .28);
  --flat-butter: var(--theme-page);
  --flat-pink: var(--theme-soft);
  --flat-pink-soft: var(--theme-soft-alt);
  --flat-red: var(--theme-accent-strong);
  --flat-white: var(--theme-surface);
  --flat-coffee: var(--theme-ink);
  --flat-line: var(--theme-line);
  --flat-muted: var(--theme-muted);
  --feed-halftone-butter: var(--theme-highlight-soft);
  --feed-halftone-pink: var(--theme-soft);
  --feed-halftone-pink-soft: var(--theme-soft-alt);
  --feed-halftone-red: var(--theme-accent-strong);
  --feed-halftone-white: var(--theme-surface);
  --feed-halftone-coffee: var(--theme-ink);
  --feed-halftone-line: var(--theme-line);
  --feed-halftone-muted: var(--theme-muted);
  --mono-paper: var(--theme-page);
  --mono-white: var(--theme-surface);
  --mono-ink: var(--theme-ink);
  --mono-muted: var(--theme-muted);
  --mono-accent: var(--theme-highlight);
  --mono-accent-soft: var(--theme-highlight-soft);
}

.phone.character-jarin-theme.home-mono-preview,
.phone.character-gobi-theme.home-mono-preview {
  border-color: var(--theme-line);
  background: var(--theme-page) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.phone.character-jarin-theme .top,
.phone.character-gobi-theme .top {
  border-bottom-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
}

.phone.character-jarin-theme .top::after,
.phone.character-gobi-theme .top::after {
  display: none !important;
}

.phone.character-jarin-theme .content,
.phone.character-gobi-theme .content {
  background: var(--theme-page) !important;
  background-image: none !important;
}

.phone.character-jarin-theme .mono-tabs,
.phone.character-gobi-theme .mono-tabs {
  border-top: 1px solid var(--theme-line) !important;
  background: var(--theme-nav) !important;
  background-image: none !important;
}

.phone.character-jarin-theme .mono-tabs::before,
.phone.character-gobi-theme .mono-tabs::before {
  display: none !important;
}

.phone.character-jarin-theme .mono-tabs button,
.phone.character-jarin-theme .mono-tabs button:hover,
.phone.character-gobi-theme .mono-tabs button,
.phone.character-gobi-theme .mono-tabs button:hover {
  color: var(--theme-muted) !important;
}

.phone.character-jarin-theme .mono-tabs button.active,
.phone.character-jarin-theme .mono-tabs button.active .tab-menu-label,
.phone.character-gobi-theme .mono-tabs button.active,
.phone.character-gobi-theme .mono-tabs button.active .tab-menu-label {
  color: var(--theme-accent-strong) !important;
}

.phone.character-jarin-theme .mono-tabs button.active::before,
.phone.character-gobi-theme .mono-tabs button.active::before {
  height: 2px !important;
  background: var(--theme-accent) !important;
}

/* Character home */
.home-frame-phone.character-jarin-theme.home-mono-preview,
.home-frame-phone.character-gobi-theme.home-mono-preview {
  grid-template-rows:
    calc(52px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom));
  border-radius: 0;
}

.character-jarin-theme .character-home-stage,
.character-gobi-theme .character-home-stage,
.character-jarin-theme .character-home-status,
.character-gobi-theme .character-home-status {
  color: var(--theme-ink);
  border: 1px solid var(--theme-line);
  border-radius: 0;
  background: var(--theme-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.character-jarin-theme .character-home-head,
.character-gobi-theme .character-home-head,
.character-jarin-theme .character-home-foot,
.character-gobi-theme .character-home-foot {
  border-color: var(--theme-line);
}

.character-jarin-theme .character-home-head h2,
.character-gobi-theme .character-home-head h2,
.character-jarin-theme .character-home-primary strong,
.character-gobi-theme .character-home-primary strong {
  color: var(--theme-ink);
}

.character-jarin-theme .character-home-head span,
.character-jarin-theme .character-home-head p,
.character-jarin-theme .character-home-next small,
.character-gobi-theme .character-home-head span,
.character-gobi-theme .character-home-head p,
.character-gobi-theme .character-home-next small {
  color: var(--theme-muted);
}

.character-jarin-theme .character-home-count,
.character-gobi-theme .character-home-count {
  border: 0;
  color: var(--theme-surface);
  background: var(--theme-accent-strong);
  transform: none;
}

.character-jarin-theme .character-home-count span,
.character-gobi-theme .character-home-count span {
  color: var(--theme-surface);
}

.character-jarin-theme .character-viewer-stage,
.character-gobi-theme .character-viewer-stage {
  height: clamp(360px, 49vh, 430px);
  border: 1px solid var(--theme-line);
  border-radius: 0;
  background-repeat: no-repeat;
  background-position: center 48%;
  background-size: cover;
  box-shadow: none;
  cursor: default;
}

.character-jarin-theme .character-viewer-stage {
  background-color: #f3f5f3;
  background-image: url("./assets/illustrations/backgrounds/home-kitchen-jarin-editorial-v4.jpg?v=20260726-dual-character-palette-v2");
}

.character-gobi-theme .character-viewer-stage {
  background-color: #fffaf2;
  background-image: url("./assets/illustrations/backgrounds/home-baking-gobi-editorial-v4.jpg?v=20260726-dual-character-palette-v2");
}

.character-jarin-theme .character-viewer-stage::after,
.character-gobi-theme .character-viewer-stage::after,
.character-jarin-theme .character-home-stage::after,
.character-gobi-theme .character-home-stage::after,
.character-jarin-theme .character-home-status::before,
.character-gobi-theme .character-home-status::before {
  display: none !important;
}

.character-jarin-theme .character-viewer-stage img[data-character-pose],
.character-jarin-theme .character-viewer-stage img[data-character-pose-blend],
.character-gobi-theme .character-viewer-stage img[data-character-pose],
.character-gobi-theme .character-viewer-stage img[data-character-pose-blend],
.character-jarin-theme .character-viewer-registration,
.character-jarin-theme .character-viewer-ground,
.character-gobi-theme .character-viewer-registration,
.character-gobi-theme .character-viewer-ground {
  display: none !important;
}

.character-jarin-theme .character-home-primary,
.character-gobi-theme .character-home-primary {
  border: 1px solid var(--theme-accent-strong);
  border-radius: 0;
  color: var(--theme-accent-strong) !important;
  background: var(--theme-highlight-soft);
  box-shadow: none;
}

.character-jarin-theme .character-home-primary > svg,
.character-gobi-theme .character-home-primary > svg {
  color: var(--theme-surface);
  background: var(--theme-accent-strong);
}

.character-jarin-theme .character-home-status > header span,
.character-jarin-theme .character-home-next > span,
.character-gobi-theme .character-home-status > header span,
.character-gobi-theme .character-home-next > span {
  color: var(--theme-accent-strong);
}

.character-jarin-theme .character-home-status > header b,
.character-gobi-theme .character-home-status > header b {
  color: var(--theme-surface);
  background: var(--theme-accent-strong);
}

.character-jarin-theme .character-home-progress,
.character-gobi-theme .character-home-progress {
  border-color: var(--theme-line);
  background: var(--theme-surface);
}

.character-jarin-theme .character-home-progress i,
.character-gobi-theme .character-home-progress i {
  border-color: var(--theme-accent-strong);
  background: var(--theme-highlight);
}

.character-jarin-theme .character-home-status > button,
.character-gobi-theme .character-home-status > button {
  border: 1px solid var(--theme-line);
  border-radius: 0;
  color: var(--theme-ink);
  background: var(--theme-surface-alt);
}

/* Feed */
.character-jarin-theme.feed-mono-preview,
.character-gobi-theme.feed-mono-preview {
  border-color: var(--theme-line);
  background: var(--theme-page) !important;
  background-image: none !important;
  box-shadow: none;
}

.character-jarin-theme.feed-mono-preview .feed-heading,
.character-gobi-theme.feed-mono-preview .feed-heading {
  border-color: var(--theme-accent-strong);
  background: var(--theme-soft) !important;
  background-image: none !important;
}

.character-jarin-theme.feed-mono-preview .feed-filter,
.character-gobi-theme.feed-mono-preview .feed-filter,
.character-jarin-theme.feed-mono-preview .feed-friends,
.character-gobi-theme.feed-mono-preview .feed-friends,
.character-jarin-theme.feed-mono-preview .feed-list-head,
.character-gobi-theme.feed-mono-preview .feed-list-head,
.character-jarin-theme.feed-mono-preview .feed-post,
.character-gobi-theme.feed-mono-preview .feed-post,
.character-jarin-theme.feed-mono-preview .feed-empty,
.character-gobi-theme.feed-mono-preview .feed-empty {
  border-color: var(--theme-line);
  background: var(--theme-surface) !important;
  background-image: none !important;
}

.character-jarin-theme.feed-mono-preview .friend-card,
.character-gobi-theme.feed-mono-preview .friend-card {
  border-color: var(--theme-line);
  background: var(--theme-highlight-soft) !important;
  background-image: none !important;
}

.character-gobi-theme.feed-mono-preview .friend-card:nth-child(even) {
  background: var(--theme-mint) !important;
}

.character-jarin-theme.feed-mono-preview .friend-card:nth-child(even) {
  background: var(--theme-sky) !important;
}

.character-jarin-theme.feed-mono-preview .friend-card:nth-child(3n),
.character-gobi-theme.feed-mono-preview .friend-card:nth-child(3n) {
  background: var(--theme-highlight-soft) !important;
}

.character-jarin-theme.feed-mono-preview .friend-card::after,
.character-gobi-theme.feed-mono-preview .friend-card::after {
  background: inherit;
}

.character-jarin-theme.feed-mono-preview .feed-post::before,
.character-gobi-theme.feed-mono-preview .feed-post::before {
  width: 5px;
  border: 0;
  background: var(--theme-accent);
  background-image: none;
}

.character-jarin-theme.feed-mono-preview .feed-post-photo,
.character-gobi-theme.feed-mono-preview .feed-post-photo {
  border-color: var(--theme-line);
  background: var(--theme-surface-alt);
  filter: none;
}

.character-jarin-theme.feed-mono-preview .feed-post-actions button.liked,
.character-gobi-theme.feed-mono-preview .feed-post-actions button.liked {
  background: var(--theme-soft) !important;
}

/* Jarin home-meal stage */
.character-jarin-theme.home-meal-mono-preview .home-meal-screen > .home-meal-hero {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-soft) !important;
  background-image: none !important;
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen .screen-kicker,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .goal-kicker {
  color: var(--theme-ink);
  background: var(--theme-highlight);
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen > .home-meal-hero .map-reference-art,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .node-dish {
  border-color: var(--theme-accent);
  background: var(--theme-highlight-soft);
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen > .home-meal-hero .home-meal-summary,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .chapter-marker,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .map-step .map-stop,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .forest-goal {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen .map-step-status-available .map-stop {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-highlight-soft) !important;
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen .chapter-marker::before {
  background: var(--theme-accent);
  background-image: none;
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen .map-route {
  background: linear-gradient(
    90deg,
    transparent calc(50% - .5px),
    var(--theme-line-soft) calc(50% - .5px),
    var(--theme-line-soft) calc(50% + .5px),
    transparent calc(50% + .5px)
  );
}

.character-jarin-theme.home-meal-mono-preview .home-meal-screen .node-stage-art,
.character-jarin-theme.home-meal-mono-preview .home-meal-screen .node-sticker {
  filter: none;
}

/* Gobi dessert stage */
.character-gobi-theme.dessert-frame-phone.dessert-mono-preview {
  grid-template-rows:
    calc(52px + env(safe-area-inset-top))
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom));
  border: 1px solid var(--theme-line);
  border-radius: 0;
  background: var(--theme-page) !important;
  box-shadow: none;
}

.character-gobi-theme.dessert-mono-preview .content {
  padding: 12px 12px 24px !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-hero.dessert,
.character-gobi-theme.dessert-mono-preview .dessert-screen .chapter-marker,
.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stop,
.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stop.left,
.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stop.right,
.character-gobi-theme.dessert-mono-preview .dessert-screen .forest-goal,
.character-gobi-theme.dessert-mono-preview .dessert-screen .forest-goal.trailhead,
.character-gobi-theme.dessert-mono-preview .dessert-screen .forest-goal.summit {
  border: 1px solid var(--theme-line) !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-hero.dessert {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-soft) !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stop.available {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-highlight-soft) !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .chapter-marker {
  border-color: var(--theme-accent) !important;
  background: var(--theme-mint) !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stop:nth-of-type(3n):not(.available) {
  background: var(--theme-soft-alt) !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .forest-goal.summit {
  background: var(--theme-highlight-soft) !important;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .screen-kicker,
.character-gobi-theme.dessert-mono-preview .dessert-screen .chapter-marker span,
.character-gobi-theme.dessert-mono-preview .dessert-screen .goal-kicker,
.character-gobi-theme.dessert-mono-preview .dessert-screen .available .node-state {
  color: var(--theme-ink);
  background: var(--theme-highlight);
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .chapter-marker::after,
.character-gobi-theme.dessert-mono-preview .dessert-screen .dessert-summary::before {
  background: var(--theme-accent);
  opacity: .45;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-route.dessert::before {
  width: 1px;
  background: var(--theme-line-soft);
  opacity: 1;
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .node-dish,
.character-gobi-theme.dessert-mono-preview .dessert-screen .map-stat,
.character-gobi-theme.dessert-mono-preview .dessert-screen .dessert-summary em,
.character-gobi-theme.dessert-mono-preview .dessert-screen .map-progress {
  border-color: var(--theme-accent-strong);
  background: var(--theme-surface);
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-progress span {
  background: var(--theme-accent);
}

.character-gobi-theme.dessert-mono-preview .dessert-screen .map-reference-art,
.character-gobi-theme.dessert-mono-preview .dessert-screen .node-stage-art,
.character-gobi-theme.dessert-mono-preview .dessert-screen .node-sticker,
.character-gobi-theme.dessert-mono-preview .dessert-screen .goal-reference-art {
  filter: none !important;
}

/* Ranking */
.character-jarin-theme.ranking-mono-preview .ranking-heading,
.character-gobi-theme.ranking-mono-preview .ranking-heading {
  border-color: var(--theme-accent-strong);
  background: var(--theme-soft) !important;
}

.character-jarin-theme.ranking-mono-preview .ranking-heading h2 em,
.character-gobi-theme.ranking-mono-preview .ranking-heading h2 em {
  box-shadow: inset 0 -7px 0 var(--theme-accent);
}

.character-jarin-theme.ranking-mono-preview .ranking-issue,
.character-gobi-theme.ranking-mono-preview .ranking-issue,
.character-jarin-theme.ranking-mono-preview .ranking-segment,
.character-gobi-theme.ranking-mono-preview .ranking-segment,
.character-jarin-theme.ranking-mono-preview .podium,
.character-gobi-theme.ranking-mono-preview .podium,
.character-jarin-theme.ranking-mono-preview .rank-list,
.character-gobi-theme.ranking-mono-preview .rank-list {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
}

.character-jarin-theme.ranking-mono-preview .podium-head span,
.character-jarin-theme.ranking-mono-preview .rank-list-head span,
.character-gobi-theme.ranking-mono-preview .podium-head span,
.character-gobi-theme.ranking-mono-preview .rank-list-head span {
  color: var(--theme-ink);
  background: var(--theme-highlight);
}

.character-jarin-theme.ranking-mono-preview .podium-avatar,
.character-jarin-theme.ranking-mono-preview .rank-row .avatar,
.character-gobi-theme.ranking-mono-preview .podium-avatar,
.character-gobi-theme.ranking-mono-preview .rank-row .avatar {
  border-color: var(--theme-accent-strong);
  background: var(--theme-surface-alt);
}

.character-jarin-theme.ranking-mono-preview .my-rank,
.character-gobi-theme.ranking-mono-preview .my-rank {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-highlight-soft) !important;
}

/* Profile */
.character-jarin-theme.profile-mono-preview .profile-hero,
.character-gobi-theme.profile-mono-preview .profile-hero {
  border-color: var(--theme-accent-strong) !important;
  background: var(--theme-soft) !important;
  background-image: none !important;
}

.character-jarin-theme.profile-mono-preview .profile-hero::before,
.character-jarin-theme.profile-mono-preview .profile-hero::after,
.character-gobi-theme.profile-mono-preview .profile-hero::before,
.character-gobi-theme.profile-mono-preview .profile-hero::after {
  display: none !important;
}

.character-jarin-theme.profile-mono-preview .profile-section-card,
.character-gobi-theme.profile-mono-preview .profile-section-card {
  border-color: var(--theme-line) !important;
  background: var(--theme-surface) !important;
  background-image: none !important;
}

.character-jarin-theme.profile-mono-preview .section-title-icon,
.character-gobi-theme.profile-mono-preview .section-title-icon,
.character-jarin-theme.profile-mono-preview .profile-edit-button,
.character-gobi-theme.profile-mono-preview .profile-edit-button,
.character-jarin-theme.profile-mono-preview .profile-social-link,
.character-gobi-theme.profile-mono-preview .profile-social-link {
  color: var(--theme-surface);
  background: var(--theme-accent-strong);
}

.character-jarin-theme.profile-mono-preview .profile-social-stats,
.character-gobi-theme.profile-mono-preview .profile-social-stats {
  border-color: var(--theme-line);
  background: var(--theme-highlight-soft);
}

.character-jarin-theme.profile-mono-preview .profile-avatar,
.character-gobi-theme.profile-mono-preview .profile-avatar,
.character-jarin-theme.profile-mono-preview .level-chip,
.character-gobi-theme.profile-mono-preview .level-chip {
  border-color: var(--theme-accent-strong);
  background: var(--theme-surface);
}

.character-jarin-theme.profile-mono-preview .profile-stats,
.character-gobi-theme.profile-mono-preview .profile-stats,
.character-jarin-theme.profile-mono-preview .profile-stat + .profile-stat,
.character-gobi-theme.profile-mono-preview .profile-stat + .profile-stat {
  border-color: var(--theme-accent-strong);
}

@media (max-width: 370px) {
  .character-jarin-theme .character-viewer-stage,
  .character-gobi-theme .character-viewer-stage {
    height: clamp(342px, 46vh, 395px);
    background-position: center 49%;
  }
}

/* 2026-07-26 editorial navigation icon system */
.phone .editorial-tabs {
  --menu-icon-line: #817e77;
  --menu-icon-fill: transparent;
  --menu-icon-fill-soft: transparent;
  --menu-icon-highlight: transparent;
  --menu-icon-detail: #817e77;
  min-height: 78px;
  padding: 7px 10px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(67, 62, 56, .28) !important;
  background: var(--theme-nav, #f1f2f1) !important;
  box-shadow: none !important;
}

.phone .editorial-tabs::before,
.phone .editorial-tabs button::before,
.phone .editorial-tabs button.active::before {
  content: none !important;
  display: none !important;
}

.phone .editorial-tabs button,
.phone .editorial-tabs button:hover,
.phone .editorial-tabs button.active {
  min-width: 0;
  min-height: 58px;
  grid-template-rows: 36px 15px;
  align-content: center;
  gap: 3px;
  padding: 2px 1px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #817e77 !important;
  transform: none !important;
}

.phone .editorial-tabs .tab-menu-icon.tab-menu-custom,
.phone .editorial-tabs button.active .tab-menu-icon.tab-menu-custom {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  transform: none !important;
}

.phone .editorial-tabs .menu-icon-svg,
.phone .editorial-tabs button:nth-child(n) .menu-icon-svg {
  width: 34px !important;
  height: 34px !important;
  overflow: visible;
  color: inherit !important;
  stroke: var(--menu-icon-line) !important;
  shape-rendering: geometricPrecision;
}

.phone .editorial-tabs .menu-icon-svg * {
  vector-effect: non-scaling-stroke;
}

.phone .editorial-tabs .menu-icon-fill {
  fill: var(--menu-icon-fill);
}

.phone .editorial-tabs .menu-icon-fill-soft {
  fill: var(--menu-icon-fill-soft);
}

.phone .editorial-tabs .menu-icon-rice,
.phone .editorial-tabs .menu-icon-egg-white {
  fill: var(--theme-surface, #fffdf8);
}

.phone .editorial-tabs .menu-icon-highlight {
  fill: var(--menu-icon-highlight);
}

.phone .editorial-tabs .menu-icon-detail {
  fill: var(--menu-icon-detail);
}

.phone .editorial-tabs .menu-icon-dot {
  fill: var(--menu-icon-line);
  stroke: none;
}

.phone .editorial-tabs .menu-icon-accent-stroke {
  stroke: var(--menu-icon-detail) !important;
}

.phone .editorial-tabs .tab-menu-label,
.phone .editorial-tabs button:hover .tab-menu-label,
.phone .editorial-tabs button.active .tab-menu-label {
  color: inherit !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1;
  white-space: nowrap;
}

.phone.character-jarin-theme .editorial-tabs button.active {
  --menu-icon-line: #464540;
  --menu-icon-fill: #bfe2ee;
  --menu-icon-fill-soft: #edf7f9;
  --menu-icon-highlight: #ffd34e;
  --menu-icon-detail: #78b957;
  color: #78b957 !important;
}

.phone.character-jarin-theme .editorial-tabs button.active .tab-menu-label {
  color: #78b957 !important;
}

.phone.character-gobi-theme .editorial-tabs button.active {
  --menu-icon-line: #4d4944;
  --menu-icon-fill: #efadb8;
  --menu-icon-fill-soft: #fff0bd;
  --menu-icon-highlight: #ef7883;
  --menu-icon-detail: #a9cea5;
  color: #e58d9b !important;
}

.phone.character-gobi-theme .editorial-tabs button.active .tab-menu-label {
  color: #e58d9b !important;
}

.phone .editorial-tabs button.active .menu-icon-home,
.phone .editorial-tabs button.active .menu-icon-feed,
.phone .editorial-tabs button.active .menu-icon-ranking,
.phone .editorial-tabs button.active .menu-icon-profile {
  --menu-icon-fill: var(--menu-icon-fill-soft);
}

@media (max-width: 370px) {
  .phone .editorial-tabs {
    padding-right: 7px;
    padding-left: 7px;
  }

  .phone .editorial-tabs .menu-icon-svg,
  .phone .editorial-tabs button:nth-child(n) .menu-icon-svg {
    width: 32px !important;
    height: 32px !important;
  }
}

/* 2026-07-26 cooking daily profile icon system */
.profile-mono-preview {
  --profile-icon-red: #e23a2e;
  --profile-icon-yellow: #ffe67a;
  --profile-icon-pink: #ffc7d4;
  --profile-icon-ink: #332922;
  --profile-icon-gray: #9b978f;
}

.profile-mono-preview .profile-icon-svg {
  display: block;
  overflow: visible;
  color: var(--profile-icon-ink);
  shape-rendering: geometricPrecision;
}

.profile-mono-preview .profile-icon-accent-red {
  stroke: var(--profile-icon-red) !important;
}

.profile-mono-preview .profile-icon-accent-pink {
  stroke: #ef8fa3 !important;
}

.profile-mono-preview .profile-icon-fill-red {
  fill: var(--profile-icon-red);
  stroke: var(--profile-icon-red) !important;
}

.profile-mono-preview .profile-icon-fill-pink {
  fill: var(--profile-icon-pink);
  stroke: var(--profile-icon-ink);
}

.profile-mono-preview .profile-icon-fill-yellow {
  fill: var(--profile-icon-yellow);
  stroke: var(--profile-icon-ink);
}

.profile-mono-preview .section-title {
  align-items: center;
  gap: 10px;
}

.profile-mono-preview .section-title-icon,
.character-jarin-theme.profile-mono-preview .section-title-icon,
.character-gobi-theme.profile-mono-preview .section-title-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: var(--profile-icon-red) !important;
  box-shadow: none !important;
  transform: none !important;
}

.profile-mono-preview .section-title-icon .profile-icon-svg,
.profile-mono-preview .section-title-icon .profile-icon-svg * {
  color: #fff !important;
  stroke: #fff !important;
}

.profile-mono-preview .section-title-icon .profile-icon-fill-red,
.profile-mono-preview .section-title-icon .profile-icon-fill-pink,
.profile-mono-preview .section-title-icon .profile-icon-fill-yellow {
  fill: none !important;
}

.profile-mono-preview .profile-setting-row {
  min-height: 54px;
  grid-template-columns: 34px minmax(0, 1fr) 24px;
  gap: 10px;
  padding: 0 4px;
  font-size: 10px;
}

.profile-mono-preview .setting-row-icon,
.profile-mono-preview .profile-setting-row:first-child .setting-row-icon,
.profile-mono-preview .profile-setting-danger .setting-row-icon {
  width: 34px;
  height: 34px;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--profile-icon-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.profile-mono-preview .setting-row-icon .profile-icon-svg {
  width: 29px;
  height: 29px;
}

.profile-mono-preview .profile-setting-row > .profile-icon-svg {
  width: 21px;
  height: 21px;
  justify-self: end;
  color: var(--profile-icon-ink);
}

.profile-mono-preview .profile-account-foot button {
  min-height: 32px;
  gap: 6px;
  padding: 5px 8px;
  border-color: var(--profile-icon-ink);
  color: var(--profile-icon-ink);
  background: #fff;
}

.profile-mono-preview .profile-account-foot button .profile-icon-svg {
  width: 21px;
  height: 21px;
}

.profile-mono-preview .profile-social-link .profile-icon-svg {
  width: 18px;
  height: 18px;
  color: inherit;
}

.profile-mono-preview .profile-social-link .profile-icon-svg * {
  stroke: currentColor !important;
}

.profile-mono-preview .skip-row > .profile-icon-svg {
  width: 19px;
  height: 19px;
  justify-self: end;
}

/* 2026-07-26 Jarin unified butter and blue palette */
.phone.character-jarin-theme {
  --jarin-butter: #fffbca;
  --theme-highlight: var(--theme-accent);
  --theme-highlight-soft: var(--jarin-butter);
  --feed-halftone-butter: var(--jarin-butter);
  --mono-accent: var(--theme-accent);
  --mono-accent-soft: var(--jarin-butter);
  --profile-icon-yellow: var(--jarin-butter);
}

.phone.character-jarin-theme.home-frame-phone.home-mono-preview.character-home-jarin-theme {
  --jarin-butter: #fffbca;
}

.phone.character-jarin-theme .character-viewer-stage {
  background-color: var(--jarin-butter);
  background-blend-mode: multiply;
}

.phone.character-jarin-theme.home-frame-phone.home-mono-preview .character-viewer-stage {
  border-right: 0;
  border-left: 0;
}

.phone.character-jarin-theme .editorial-tabs button.active {
  --menu-icon-highlight: var(--jarin-butter);
  --menu-icon-detail: var(--theme-accent-strong);
  color: var(--theme-accent-strong) !important;
}

.phone.character-jarin-theme .editorial-tabs button.active .tab-menu-label {
  color: var(--theme-accent-strong) !important;
}

.phone.character-jarin-theme .map-stop.available .node-badge::after {
  background: var(--theme-accent) !important;
}

/* 2026-07-27 approved home poster: bright screen-print editorial system */
.phone.bapstage-home-v2 {
  --poster-blue: #bfdfe8;
  --poster-cream: #fff2cf;
  --poster-red: #ed1630;
  --poster-green: #a8dc82;
  --poster-pink: #f6bfd0;
  --poster-yellow: #ffdc55;
  --poster-ink: #281a19;
  grid-template-rows: minmax(0, 1fr) calc(82px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--poster-blue) !important;
  box-shadow: none !important;
}

.phone.bapstage-home-v2 > .top {
  display: none !important;
}

.phone.bapstage-home-v2 > .content {
  padding: 0 !important;
  background: var(--poster-blue) !important;
  scroll-behavior: smooth;
}

.bapstage-home-v2 .poster-home-screen {
  width: 100%;
  display: block !important;
  padding: 0 !important;
  color: var(--poster-ink);
  background: var(--poster-blue);
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.bapstage-home-v2 .poster-home-screen button {
  font-family: inherit;
}

.bapstage-home-v2 .poster-home-brand {
  position: relative;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(25px + env(safe-area-inset-top)) 25px 20px;
  overflow: hidden;
  background-color: var(--poster-blue);
  background-image:
    radial-gradient(circle at 14% 24%, rgba(255, 255, 255, .42) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 64%, rgba(40, 26, 25, .08) 0 1px, transparent 1.4px);
  background-size: 17px 19px, 23px 21px;
}

.bapstage-home-v2 .poster-home-brand::after,
.bapstage-home-v2 .poster-progress-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(7deg, transparent 0 5px, rgba(40, 26, 25, .025) 5px 6px);
  pointer-events: none;
}

.bapstage-home-v2 .poster-home-brand h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--poster-ink);
  font-family: "Jua", "Pretendard", sans-serif;
  font-size: clamp(42px, 12.5vw, 57px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.07em;
  white-space: nowrap;
}

.bapstage-home-v2 .poster-home-brand p {
  position: relative;
  z-index: 1;
  margin: 19px 0 0;
  color: var(--poster-ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.025em;
}

.bapstage-home-v2 .poster-character-stage {
  min-height: 405px;
  display: grid;
  grid-template-columns: 33% 67%;
  overflow: hidden;
  background: var(--poster-cream);
}

.bapstage-home-v2 .poster-character-meta {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 47px 12px 25px 25px;
  background-color: var(--poster-cream);
  background-image:
    radial-gradient(circle at 21% 17%, rgba(255, 220, 85, .28) 0 2px, transparent 2.5px);
  background-size: 21px 23px;
}

.bapstage-home-v2 .poster-character-meta::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -10px;
  left: -22px;
  height: 74px;
  border-radius: 48% 65% 0 0 / 74% 85% 0 0;
  background: var(--poster-cream);
}

.bapstage-home-v2 .poster-character-meta h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  color: var(--poster-ink);
  font-family: "Jua", "Pretendard", sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

.bapstage-home-v2 .poster-character-meta p {
  position: relative;
  z-index: 1;
  margin: 0 0 9px;
  color: var(--poster-ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  white-space: nowrap;
}

.bapstage-home-v2 .poster-character-meta > strong {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--poster-ink);
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.bapstage-home-v2 .poster-meta-dots {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 17px;
  margin-top: 29px;
}

.bapstage-home-v2 .poster-meta-dots i {
  width: 27px;
  height: 27px;
  display: block;
  border-radius: 50%;
  background: var(--poster-red);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

.bapstage-home-v2 .poster-character-art {
  position: relative;
  min-width: 0;
  min-height: 405px;
  overflow: hidden;
  background-color: var(--poster-blue);
  background-image:
    conic-gradient(
      from 90deg,
      rgba(255, 242, 207, .96) 25%,
      transparent 0 50%,
      rgba(255, 242, 207, .96) 0 75%,
      transparent 0
    );
  background-size: 47px 47px;
}

.bapstage-home-v2 .poster-character-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .13;
  background-image:
    repeating-linear-gradient(118deg, var(--poster-ink) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(28deg, transparent 0 5px, var(--poster-ink) 5px 6px);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bapstage-home-v2 .poster-character-sun {
  position: absolute;
  z-index: 2;
  width: 320px;
  height: 320px;
  right: -37px;
  bottom: 28px;
  border-radius: 50%;
  background-color: var(--poster-red);
  background-image:
    radial-gradient(circle, var(--poster-ink) 0 1.6px, transparent 2px);
  background-position: 66% 50%;
  background-size: 9px 9px;
  clip-path: circle(50%);
}

.bapstage-home-v2 .poster-character-sun::after {
  content: "";
  position: absolute;
  inset: 0 47% 0 0;
  background: var(--poster-red);
}

.bapstage-home-v2 .poster-character-svg {
  position: absolute;
  z-index: 3;
  width: 88%;
  height: 96%;
  right: 1%;
  bottom: -2%;
  overflow: visible;
}

.bapstage-home-v2 .poster-companion {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
  min-height: 27px;
  padding: 5px 9px;
  border: 0;
  border-radius: 999px;
  color: var(--poster-ink);
  background: var(--poster-green);
  font-size: 9px;
  font-weight: 900;
}

.bapstage-home-v2 .poster-meal-stage {
  position: relative;
  width: 100%;
  min-height: 455px;
  display: grid;
  grid-template-columns: 68% 32%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--poster-ink);
  background: var(--poster-cream);
  text-align: left;
  box-shadow: none;
}

.bapstage-home-v2 .poster-meal-stage:focus-visible,
.bapstage-home-v2 .poster-progress-next:focus-visible,
.bapstage-home-v2 .editorial-tabs button:focus-visible {
  outline: 3px solid var(--poster-red);
  outline-offset: -3px;
}

.bapstage-home-v2 .poster-meal-art {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.bapstage-home-v2 .poster-meal-svg {
  position: absolute;
  width: 150%;
  max-width: none;
  height: 116%;
  left: -47%;
  bottom: -9%;
  display: block;
  overflow: visible;
}

.bapstage-home-v2 .poster-meal-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  align-items: start;
  padding: 43px 16px 28px 4px;
}

.bapstage-home-v2 .poster-meal-copy small {
  min-width: 105px;
  padding: 14px 11px 12px;
  clip-path: polygon(0 50%, 18% 13%, 77% 0, 100% 49%, 77% 100%, 18% 86%);
  color: var(--poster-ink);
  background: var(--poster-green);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.bapstage-home-v2 .poster-meal-copy strong {
  align-self: center;
  color: var(--poster-ink);
  font-family: "Jua", "Pretendard", sans-serif;
  font-size: 35px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -.08em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.bapstage-home-v2 .poster-meal-copy i {
  position: relative;
  width: 76px;
  height: 18px;
  display: block;
  background: var(--poster-red);
}

.bapstage-home-v2 .poster-meal-copy i::after {
  content: "";
  position: absolute;
  top: -11px;
  right: -26px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 28px solid var(--poster-red);
}

.bapstage-home-v2 .poster-progress-stage {
  position: relative;
  min-height: 280px;
  overflow: hidden;
  padding: 25px 24px 28px;
  background-color: var(--poster-pink);
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255, 255, 255, .36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 81% 68%, rgba(40, 26, 25, .07) 0 1px, transparent 1.8px);
  background-size: 19px 19px, 23px 23px;
}

.bapstage-home-v2 .poster-progress-heading {
  position: relative;
  z-index: 3;
}

.bapstage-home-v2 .poster-progress-heading h3 {
  margin: 0 0 4px;
  color: var(--poster-ink);
  font-family: "Jua", "Pretendard", sans-serif;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.05em;
}

.bapstage-home-v2 .poster-progress-heading > strong {
  color: var(--poster-ink);
  font-size: 38px;
  font-weight: 900;
  line-height: 1;
}

.bapstage-home-v2 .poster-progress-route {
  position: relative;
  z-index: 3;
  width: calc(100% + 6px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3px;
  margin: 15px -3px 0;
}

.bapstage-home-v2 .poster-progress-dot {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--poster-cream);
}

.bapstage-home-v2 .poster-progress-dot::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 5px;
  left: 6px;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--poster-ink) 0 1.5px, transparent 1.9px);
  background-size: 6px 6px;
}

.bapstage-home-v2 .poster-progress-dot svg {
  width: 29px;
  height: 29px;
}

.bapstage-home-v2 .poster-progress-dot.dot-2 {
  background: var(--poster-cream);
}

.bapstage-home-v2 .poster-progress-dot.dot-3 {
  background: var(--poster-yellow);
}

.bapstage-home-v2 .poster-progress-dot.dot-4 {
  background: var(--poster-green);
}

.bapstage-home-v2 .poster-progress-dot.dot-5 {
  background: #f4d7e8;
}

.bapstage-home-v2 .poster-progress-dot.complete {
  box-shadow: inset 0 0 0 4px rgba(237, 22, 48, .85);
}

.bapstage-home-v2 .poster-progress-dot:nth-child(2) { transform: translateY(-2px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(3) { transform: translateY(-9px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(4) { transform: translateY(-17px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(5) { transform: translateY(-27px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(6) { transform: translateY(-38px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(7) { transform: translateY(-49px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(8) { transform: translateY(-59px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(9) { transform: translateY(-63px); }
.bapstage-home-v2 .poster-progress-dot:nth-child(10) { transform: translateY(-59px); }

.bapstage-home-v2 .poster-progress-next {
  position: absolute;
  z-index: 4;
  right: 22px;
  bottom: 22px;
  min-width: 170px;
  display: grid;
  justify-items: end;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--poster-ink);
  background: transparent;
  text-align: right;
}

.bapstage-home-v2 .poster-progress-next span {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}

.bapstage-home-v2 .poster-progress-next strong {
  font-family: "Jua", "Pretendard", sans-serif;
  font-size: 25px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
}

.bapstage-home-v2 .poster-progress-next small {
  margin-top: 7px;
  font-size: 10px;
  font-weight: 700;
}

.phone.bapstage-home-v2 .editorial-tabs {
  --menu-icon-line: var(--poster-ink);
  min-height: 82px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  border: 0 !important;
  background: var(--poster-blue) !important;
}

.phone.bapstage-home-v2 .editorial-tabs button,
.phone.bapstage-home-v2 .editorial-tabs button:hover,
.phone.bapstage-home-v2 .editorial-tabs button.active {
  position: relative;
  color: var(--poster-ink) !important;
}

.phone.bapstage-home-v2 .editorial-tabs button:nth-child(1) {
  --menu-icon-fill: var(--poster-cream);
  --menu-icon-fill-soft: var(--poster-cream);
  --menu-icon-highlight: var(--poster-yellow);
  --menu-icon-detail: var(--poster-red);
}

.phone.bapstage-home-v2 .editorial-tabs button:nth-child(2) {
  --menu-icon-fill: var(--poster-green);
  --menu-icon-fill-soft: var(--poster-green);
  --menu-icon-detail: var(--poster-green);
}

.phone.bapstage-home-v2 .editorial-tabs button:nth-child(3) {
  --menu-icon-fill: var(--poster-yellow);
  --menu-icon-fill-soft: var(--poster-yellow);
  --menu-icon-highlight: var(--poster-yellow);
  --menu-icon-detail: var(--poster-ink);
}

.phone.bapstage-home-v2 .editorial-tabs button:nth-child(4) {
  --menu-icon-fill: var(--poster-pink);
  --menu-icon-fill-soft: var(--poster-pink);
  --menu-icon-detail: var(--poster-pink);
}

.phone.bapstage-home-v2 .editorial-tabs button:nth-child(5) {
  --menu-icon-fill: var(--poster-red);
  --menu-icon-fill-soft: var(--poster-red);
  --menu-icon-detail: var(--poster-red);
}

.phone.bapstage-home-v2 .editorial-tabs button.active::after {
  content: "";
  position: absolute;
  right: calc(50% - 5px);
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--poster-red);
}

.phone.bapstage-home-v2 .editorial-tabs .tab-menu-label,
.phone.bapstage-home-v2 .editorial-tabs button.active .tab-menu-label {
  color: var(--poster-ink) !important;
  font-size: 10px !important;
  font-weight: 900 !important;
}

@media (max-width: 370px) {
  .bapstage-home-v2 .poster-home-brand {
    min-height: 158px;
    padding-right: 20px;
    padding-left: 20px;
  }

  .bapstage-home-v2 .poster-home-brand h1 {
    font-size: 42px;
  }

  .bapstage-home-v2 .poster-character-stage,
  .bapstage-home-v2 .poster-character-art {
    min-height: 375px;
  }

  .bapstage-home-v2 .poster-character-meta {
    padding-left: 20px;
  }

  .bapstage-home-v2 .poster-character-meta p {
    font-size: 11px;
  }

  .bapstage-home-v2 .poster-character-sun {
    width: 285px;
    height: 285px;
  }

  .bapstage-home-v2 .poster-meal-stage {
    min-height: 420px;
  }

  .bapstage-home-v2 .poster-meal-copy strong {
    font-size: 31px;
  }

  .bapstage-home-v2 .poster-progress-stage {
    min-height: 260px;
    padding-right: 19px;
    padding-left: 19px;
  }

  .bapstage-home-v2 .poster-progress-dot {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .bapstage-home-v2 .poster-progress-dot svg {
    width: 25px;
    height: 25px;
  }
}

/* 2026-07-27 exact approved poster presentation */
html.home-scroll-lock,
body.home-scroll-lock {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body.home-scroll-lock {
  position: fixed;
  inset: 0;
}

body.home-scroll-lock #app,
body.home-scroll-lock .page {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}

.phone.bapstage-home-v2 {
  grid-template-rows: minmax(0, 1fr) !important;
  background: #bdd6eb !important;
}

.phone.bapstage-home-v2 > .content {
  display: grid;
  place-items: center;
  background: #bdd6eb !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: none;
}

.phone.bapstage-home-v2 > .editorial-tabs {
  display: none !important;
}

.bapstage-home-v2 .exact-poster-home {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 0 6px !important;
  display: grid !important;
  place-items: center;
  overflow: hidden;
  background: #bdd6eb;
}

.bapstage-home-v2 .exact-poster-frame {
  position: relative;
  width: auto;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 852 / 1846;
  overflow: hidden;
  background: #bdd6eb;
}

.bapstage-home-v2 .exact-poster-art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.bapstage-home-v2 .exact-poster-halftone-pulse {
  position: absolute;
  z-index: 3;
  top: 20.7%;
  left: 29.7%;
  width: 52.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, #241716 0 1.2px, transparent 1.35px);
  background-size: 7px 7px;
  -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 60% 68%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 57%, #000 60% 68%, transparent 71%);
  opacity: 0;
  transform: scale(.91);
  animation: exact-poster-halftone-wave 5.6s ease-out infinite;
}

.bapstage-home-v2 .exact-poster-character {
  position: absolute;
  z-index: 6;
  top: 14.55%;
  left: 42.3%;
  width: 27.1%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #211615;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  cursor: pointer;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.bapstage-home-v2 .poster-character-hit-area {
  position: absolute;
  z-index: 1;
  inset: -8% -22% -6%;
  display: block;
  border-radius: 0;
  background: rgb(0 0 0 / .001);
  pointer-events: auto;
  touch-action: none;
}

.bapstage-home-v2 .exact-poster-character.character-rotating {
  cursor: grabbing;
}

.bapstage-home-v2 .exact-poster-character:hover .exact-poster-character-body {
  animation-duration: 2.5s;
}

.bapstage-home-v2 .exact-poster-character:focus-visible {
  outline: 3px dashed #ed001c;
  outline-offset: 5px;
}

.bapstage-home-v2 .exact-poster-character-body {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 436 / 1152;
  transform-origin: 50% 88%;
  transition: transform .18s ease;
  animation: exact-poster-character-breathe 3.4s ease-in-out infinite;
}

.bapstage-home-v2 .exact-poster-character-body > img {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .08s linear;
  will-change: opacity;
}

.bapstage-home-v2 .exact-poster-character-body > img.poster-character-pose-blend {
  z-index: 3;
  opacity: 0;
}

.bapstage-home-v2 .exact-poster-character.pose-changing .exact-poster-character-body > img[data-poster-character-pose] {
  animation: exact-poster-character-pose-change .19s ease-out;
}

.bapstage-home-v2 .exact-poster-character.character-holding .exact-poster-character-body {
  animation: none;
  transform: scale(.988);
}

.bapstage-home-v2 .exact-poster-character.character-rotating .exact-poster-character-body {
  animation: none;
  transform: scale(1.018);
}

.bapstage-home-v2 .exact-poster-character.character-rotating .poster-character-eye-cover,
.bapstage-home-v2 .exact-poster-character.character-rotating .poster-character-rice {
  display: none;
}

.bapstage-home-v2 .poster-character-eye-cover {
  position: absolute;
  z-index: 4;
  top: 19.2%;
  width: 7.2%;
  height: 4.3%;
  border-radius: 50%;
  background: #ffd09f;
  box-shadow: inset 0 -1.4px 0 #201514;
  opacity: 0;
  transform: scaleY(.42);
  transform-origin: center;
  pointer-events: none;
  animation: exact-poster-character-blink 5.6s steps(1, end) infinite;
}

.bapstage-home-v2 .poster-character-eye-cover.eye-left {
  left: 37.6%;
}

.bapstage-home-v2 .poster-character-eye-cover.eye-right {
  left: 55.1%;
}

.bapstage-home-v2 .exact-poster-character:not([data-angle="front"]) .poster-character-eye-cover {
  display: none;
}

.bapstage-home-v2 .poster-character-rice,
.bapstage-home-v2 .poster-character-rice i {
  position: absolute;
  z-index: 5;
  display: block;
  pointer-events: none;
}

.bapstage-home-v2 .poster-character-rice {
  inset: 0;
}

.bapstage-home-v2 .poster-character-rice i {
  width: 10.5%;
  height: 2.4%;
  border: 1px solid #251816;
  border-radius: 70% 35% 68% 38%;
  background: #fff1c7;
  opacity: 0;
  animation: exact-poster-rice-curiosity 5.6s ease-out infinite;
}

.bapstage-home-v2 .poster-character-rice i:nth-child(1) {
  top: 25%;
  left: -13%;
  --rice-x: -38%;
  --rice-y: -145%;
  --rice-r: -28deg;
}

.bapstage-home-v2 .poster-character-rice i:nth-child(2) {
  top: 34%;
  right: -14%;
  --rice-x: 44%;
  --rice-y: -125%;
  --rice-r: 24deg;
  animation-delay: .16s;
}

.bapstage-home-v2 .poster-character-rice i:nth-child(3) {
  top: 58%;
  right: -6%;
  --rice-x: 58%;
  --rice-y: -80%;
  --rice-r: 52deg;
  animation-delay: .32s;
}

.bapstage-home-v2 .exact-poster-frame.character-reacting .exact-poster-character-body {
  animation: exact-poster-character-tap .76s cubic-bezier(.22, 1.15, .45, 1);
}

.bapstage-home-v2 .poster-character-rotate-hint {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: -36px;
  width: max-content;
  max-width: 180px;
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 10px 7px;
  border-radius: 50% 45% 48% 44% / 46% 52% 43% 56%;
  color: #211615;
  background: #a9dc82;
  box-shadow: 4px 4px 0 #ed001c;
  opacity: 0;
  transform: translate(-50%, 7px) rotate(-2deg) scale(.86);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

.bapstage-home-v2 .poster-character-rotate-hint b,
.bapstage-home-v2 .poster-character-rotate-hint small {
  display: block;
  white-space: nowrap;
  line-height: 1.1;
}

.bapstage-home-v2 .poster-character-rotate-hint b {
  font-size: 11px;
  font-weight: 950;
}

.bapstage-home-v2 .poster-character-rotate-hint small {
  font-size: 8px;
  font-weight: 850;
}

.bapstage-home-v2 .exact-poster-character:hover .poster-character-rotate-hint,
.bapstage-home-v2 .exact-poster-character:focus-visible .poster-character-rotate-hint,
.bapstage-home-v2 .exact-poster-character.character-holding .poster-character-rotate-hint,
.bapstage-home-v2 .exact-poster-character.character-rotating .poster-character-rotate-hint {
  opacity: 1;
  transform: translate(-50%, 0) rotate(-2deg) scale(1);
}

.bapstage-home-v2 .exact-poster-character-bubble {
  position: absolute;
  z-index: 8;
  top: 21.7%;
  right: 2.4%;
  width: 30.5%;
  min-height: 9.1%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  margin: 0;
  padding: 10px 12px 11px;
  border: 0;
  border-radius: 54% 46% 50% 43% / 49% 57% 43% 51%;
  color: #241716;
  background: #f3b8d2;
  box-shadow:
    5px 5px 0 #241716,
    9px 9px 0 #a9dc82;
  text-align: center;
  line-height: 1.1;
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) rotate(2deg) scale(.86);
  transform-origin: 22% 100%;
  pointer-events: none;
}

.bapstage-home-v2 .exact-poster-character-bubble::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -13px;
  width: 22px;
  height: 18px;
  background: #f3b8d2;
  clip-path: polygon(0 0, 100% 0, 27% 100%);
}

.bapstage-home-v2 .exact-poster-character-bubble > span,
.bapstage-home-v2 .exact-poster-character-bubble strong,
.bapstage-home-v2 .exact-poster-character-bubble small {
  position: relative;
  z-index: 1;
  display: block;
}

.bapstage-home-v2 .exact-poster-character-bubble > span {
  padding: 2px 6px 1px;
  border-radius: 999px;
  color: #f3b8d2;
  background: #241716;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}

.bapstage-home-v2 .exact-poster-character-bubble strong {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.055em;
  line-height: .94;
  transform: rotate(-1deg);
}

.bapstage-home-v2 .exact-poster-character-bubble strong em {
  color: #ed001c;
  font-style: normal;
}

.bapstage-home-v2 .exact-poster-character-bubble small {
  padding: 3px 7px 2px;
  border-radius: 999px 70% 999px 82%;
  background: #a9dc82;
  font-size: 8px;
  font-weight: 900;
}

.bapstage-home-v2 .exact-poster-character-bubble:focus-visible {
  outline: 3px solid #ed001c;
  outline-offset: 3px;
}

.bapstage-home-v2 .exact-poster-frame.character-bubble-visible .exact-poster-character-bubble {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) rotate(-1deg) scale(1);
  pointer-events: auto;
  animation: exact-poster-bubble-pop .46s cubic-bezier(.2, 1.35, .45, 1);
}

.bapstage-home-v2 .poster-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.bapstage-home-v2 .exact-poster-hotspot,
.bapstage-home-v2 .exact-poster-nav button {
  position: absolute;
  z-index: 4;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bapstage-home-v2 .exact-poster-hotspot:focus-visible,
.bapstage-home-v2 .exact-poster-nav button:focus-visible {
  outline: 3px solid var(--poster-red);
  outline-offset: -3px;
  background: rgba(255, 255, 255, .12);
}

.bapstage-home-v2 .exact-poster-meal {
  inset: 49.84% 0 24% 0;
}

.bapstage-home-v2 .exact-poster-progress {
  inset: 76% 0 8.4% 0;
}

.bapstage-home-v2 .exact-poster-nav {
  position: absolute;
  z-index: 5;
  inset: 91.6% 0 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bapstage-home-v2 .exact-poster-nav button {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (max-width: 560px), (max-aspect-ratio: 3 / 4) {
  .bapstage-home-v2 .exact-poster-frame {
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
  }
}

@keyframes exact-poster-character-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-1.05%) scale(1.012, .994);
  }
}

@keyframes exact-poster-character-blink {
  0%,
  76%,
  81%,
  100% {
    opacity: 0;
  }
  77%,
  80% {
    opacity: 1;
  }
}

@keyframes exact-poster-rice-curiosity {
  0%,
  69%,
  100% {
    opacity: 0;
    transform: translate(0, 0) rotate(0) scale(.7);
  }
  73% {
    opacity: 1;
    transform: translate(0, 0) rotate(0) scale(1);
  }
  82% {
    opacity: .95;
    transform: translate(var(--rice-x), var(--rice-y)) rotate(var(--rice-r)) scale(1.05);
  }
  89% {
    opacity: 0;
    transform: translate(var(--rice-x), calc(var(--rice-y) - 55%)) rotate(var(--rice-r)) scale(.82);
  }
}

@keyframes exact-poster-halftone-wave {
  0%,
  68%,
  100% {
    opacity: 0;
    transform: scale(.91);
  }
  72% {
    opacity: .32;
    transform: scale(.96);
  }
  86% {
    opacity: 0;
    transform: scale(1.16);
  }
}

@keyframes exact-poster-character-tap {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  18% {
    transform: translateY(1.8%) scale(.96, 1.04);
  }
  48% {
    transform: translateY(-5.2%) scale(1.055, .95);
  }
  72% {
    transform: translateY(.8%) scale(.985, 1.015);
  }
}

@keyframes exact-poster-character-pose-change {
  0% {
    opacity: .46;
    transform: translateX(-3px) scale(.985);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes exact-poster-bubble-pop {
  0% {
    opacity: 0;
    transform: translateY(10px) rotate(3deg) scale(.78);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px) rotate(-2deg) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotate(-1deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bapstage-home-v2 .exact-poster-character-body,
  .bapstage-home-v2 .poster-character-eye-cover,
  .bapstage-home-v2 .poster-character-rice i,
  .bapstage-home-v2 .exact-poster-halftone-pulse,
  .bapstage-home-v2 .exact-poster-character.pose-changing .exact-poster-character-body > img[data-poster-character-pose] {
    animation: none !important;
  }

  .bapstage-home-v2 .exact-poster-frame.character-bubble-visible .exact-poster-character-bubble {
    animation: none;
  }
}

/* Profile editorial v2 cascade lock.
   Keep this last: legacy character themes share the same profile shell. */
.phone.profile-frame-phone.profile-mono-preview {
  grid-template-rows: 0 minmax(0, 1fr) calc(88px + env(safe-area-inset-bottom)) !important;
  overflow: hidden;
  border: 0 !important;
  background-color: var(--profile-v2-plum) !important;
  background-image:
    repeating-linear-gradient(
      106deg,
      rgba(255, 244, 221, .08) 0 2px,
      transparent 2px 16px
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .top {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview > .content {
  padding: 18px 32px 34px !important;
  background: transparent !important;
  background-image: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs {
  min-height: 88px;
  padding: 8px 30px max(19px, env(safe-area-inset-bottom));
  border: 0 !important;
  background: var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button,
.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:hover {
  --menu-icon-line: rgba(255, 244, 221, .68);
  --menu-icon-detail: rgba(255, 244, 221, .68);
  color: rgba(255, 244, 221, .68) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active {
  --menu-icon-line: var(--profile-v2-yellow);
  --menu-icon-detail: var(--profile-v2-orange);
  --menu-icon-fill: var(--profile-v2-lilac);
  --menu-icon-fill-soft: var(--profile-v2-lilac);
  --menu-icon-highlight: var(--profile-v2-yellow);
  color: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active .tab-menu-label {
  color: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 {
  color: var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-hero {
  border: 0 !important;
  border-radius: 34px 10px 38px 14px / 23px 13px 31px 17px !important;
  background-color: var(--profile-v2-orange) !important;
  background-image:
    repeating-radial-gradient(
      ellipse at 115% 122%,
      transparent 0 12px,
      rgba(53, 22, 63, .15) 13px 15px
    ) !important;
  box-shadow:
    6px 6px 0 var(--profile-v2-yellow),
    10px 10px 0 var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 52px;
  right: -36px;
  width: 154px;
  height: 154px;
  display: block !important;
  border-radius: 50%;
  background: var(--profile-v2-lilac) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 20px;
  bottom: 72px;
  width: 88px !important;
  height: 17px !important;
  display: block !important;
  border-radius: 50% !important;
  background: var(--profile-v2-yellow) !important;
  opacity: .9;
  transform: rotate(-12deg);
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-avatar {
  border: 0 !important;
  border-radius: 42% 58% 45% 55% / 55% 39% 61% 45% !important;
  background: var(--profile-v2-paper) !important;
  box-shadow: 4px 4px 0 var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-avatar img {
  background: transparent !important;
  filter: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-title-row h2,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-title-note,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat strong,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat span {
  color: var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .level-chip {
  border: 0 !important;
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-white) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-edit-button {
  border: 0 !important;
  border-radius: 52% 48% 42% 58% / 44% 56% 48% 52% !important;
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-yellow) !important;
  box-shadow: 3px 3px 0 var(--profile-v2-paper) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stats {
  border: 0 !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat + .profile-stat {
  border: 0 !important;
  background: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat:nth-child(2) {
  background: var(--profile-v2-paper) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-stat:nth-child(3) {
  background: var(--profile-v2-lilac-soft) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section:nth-of-type(even) .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section:nth-of-type(odd) .profile-section-card {
  border: 0 !important;
  border-radius: 12px 34px 15px 28px / 22px 13px 27px 16px !important;
  clip-path: none !important;
  background: var(--profile-v2-paper) !important;
  box-shadow: var(--profile-card-shadow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section:nth-of-type(even) .profile-section-card {
  border-radius: 34px 12px 28px 15px / 13px 22px 16px 27px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section.profile-social-section .profile-social-card {
  background: var(--profile-v2-lilac-soft) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section.profile-titles-section .profile-section-card {
  background: var(--profile-v2-lilac) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section.profile-sticker-section .profile-section-card {
  background: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section.profile-allergy-section .profile-section-card {
  background: var(--profile-v2-orange-soft) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section.profile-account-section .profile-section-card {
  background: var(--profile-v2-white) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section:nth-of-type(n) .section-title-icon {
  border: 0 !important;
  border-radius: 46% 54% 43% 57% / 58% 42% 55% 45% !important;
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-yellow) !important;
  box-shadow: 3px 3px 0 var(--profile-v2-orange) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-section:nth-of-type(even) .section-title-icon {
  background: var(--profile-v2-orange) !important;
  color: var(--profile-v2-ink) !important;
  box-shadow: 3px 3px 0 var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-social-stats {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-social-stats span {
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-v2-white) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-social-stats span:nth-child(2) {
  background: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-social-stats span:nth-child(3) {
  background: var(--profile-v2-orange-soft) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-social-link {
  border: 0 !important;
  border-radius: 999px 35% 999px 42% !important;
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-white) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .badge-item {
  border: 0 !important;
  border-radius: 50px 16px 50px 18px !important;
  background: rgba(255, 250, 241, .68) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .badge-item:nth-child(even) {
  border-radius: 16px 50px 18px 50px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .badge-item.earned {
  background: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .sticker-board {
  border: 0 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255, 250, 241, .08) 0 2px,
      transparent 2px 10px
    ),
    var(--profile-v2-ink) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .allergy-item {
  border-radius: 999px !important;
  background: rgba(255, 250, 241, .72) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .allergy-item.active {
  background: var(--profile-v2-ink) !important;
  color: var(--profile-v2-yellow) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-setting-row:first-child {
  border: 0 !important;
  border-radius: 999px 16px 999px 18px !important;
  background: var(--profile-v2-lilac-soft) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .profile-setting-row:nth-child(even) {
  border-radius: 16px 999px 18px 999px !important;
  background: var(--profile-v2-paper) !important;
}

@media (max-width: 390px) {
  .phone.profile-frame-phone.profile-mono-preview > .content {
    padding-right: 22px !important;
    padding-left: 22px !important;
  }

  .phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .badge-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 340px) {
  .phone.profile-frame-phone.profile-mono-preview .profile-editorial-v2 .badge-list {
    grid-template-columns: 1fr;
  }
}

/* Profile mint v4: approved calm screen-print composition. */
.phone.profile-frame-phone.profile-mono-preview {
  --profile-mint: #cfe9c5;
  --profile-cream: #fff4df;
  --profile-apricot: #ffc59f;
  --profile-coral: #e95536;
  --profile-butter: #f5c53f;
  --profile-cocoa: #382124;
  --profile-blue: #a9cceb;
  --profile-green: #92c95f;
  --profile-pink: #eb8fbd;
  grid-template-rows: 0 minmax(0, 1fr) calc(84px + env(safe-area-inset-bottom));
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 176px 176px !important;
}

.phone.profile-frame-phone.profile-mono-preview > .content {
  padding: 0 !important;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 176px 176px !important;
  scrollbar-color: var(--profile-coral) transparent;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 {
  --profile-card-shadow: none;
  width: 100%;
  display: block;
  padding: 0 0 20px;
  color: var(--profile-cocoa) !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-hero {
  box-sizing: border-box;
  width: 100%;
  height: 330px;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    radial-gradient(
      ellipse 188px 159px at 14% 50%,
      var(--profile-cream) 0 99%,
      transparent 100%
    ) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-hero::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 250px;
  right: auto;
  bottom: auto;
  left: 88px;
  width: 136px !important;
  height: 59px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 50% !important;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--profile-cocoa) 0 2px,
      transparent 2px 6px
    ) !important;
  clip-path: ellipse(50% 48% at 50% 50%);
  box-shadow: none !important;
  opacity: .9 !important;
  transform: rotate(-4deg) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-issue-line,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-hero-note,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-hero .eyebrow,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-title-note {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-main {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: block;
  padding: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-avatar {
  position: absolute;
  top: 33px;
  left: 18px;
  width: 180px;
  height: 269px;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-avatar img.profile-character-portrait {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-copy {
  position: absolute;
  z-index: 4;
  top: 45px;
  right: 22px;
  width: 132px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-title-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-title-row h2 {
  max-width: 100%;
  margin: 0;
  overflow: visible;
  color: var(--profile-cocoa) !important;
  font-size: 36px;
  font-weight: 950;
  line-height: .95;
  letter-spacing: -.06em !important;
  white-space: nowrap;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .level-chip {
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--profile-cocoa) !important;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  transform: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-edit-button {
  position: absolute;
  z-index: 6;
  top: 20px;
  right: 16px;
  width: 25px;
  height: 25px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-cream) !important;
  color: var(--profile-coral) !important;
  box-shadow: none !important;
  opacity: .84;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-edit-button svg {
  width: 13px;
  height: 13px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stats {
  position: absolute;
  z-index: 5;
  top: 126px;
  right: 21px;
  width: 142px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stat + .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stat:nth-child(n) {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
  text-align: left;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stat strong {
  grid-column: 2;
  grid-row: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  background: var(--profile-cream);
  color: var(--profile-cocoa) !important;
  font-size: 23px;
  font-weight: 850;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stat span {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding-right: 8px;
  color: var(--profile-cocoa) !important;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section {
  width: 100%;
  margin: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section:nth-of-type(even) .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section:nth-of-type(odd) .profile-section-card {
  width: 100%;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section-card::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-section,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card {
  height: 49px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 28px;
  align-items: center;
  gap: 8px;
  padding: 0 18px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card .section-title {
  min-height: 0;
  display: block;
  margin: 0;
  padding-left: 11px;
  border-left: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card .section-title p {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-card .section-title h3 {
  color: var(--profile-cocoa) !important;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats::before {
  content: "♟";
  color: var(--profile-coral);
  font-size: 18px;
  line-height: 1;
  transform: rotate(180deg);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats span,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats span + span,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats span:nth-child(n) {
  min-width: 0;
  display: flex;
  gap: 3px;
  align-items: baseline;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats span:nth-child(3) {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats b {
  color: var(--profile-cocoa);
  font-size: 11px;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-stats small {
  order: -1;
  margin: 0;
  color: var(--profile-cocoa);
  font-size: 9px;
  font-weight: 750;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-link {
  width: 28px;
  min-height: 28px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: var(--profile-coral) !important;
  box-shadow: none !important;
  font-size: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-social-link .profile-icon-svg {
  width: 18px;
  height: 18px;
  color: var(--profile-coral) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .profile-section-card {
  height: 230px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .profile-section-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  padding: 17px 18px 13px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .section-title {
  min-height: 0;
  display: block;
  align-self: center;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .section-title p {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-titles-section .section-title h3 {
  max-width: 5.5ch;
  color: var(--profile-cocoa) !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
  word-break: keep-all;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-list {
  display: grid;
  grid-template-columns: repeat(2, 78px);
  grid-template-rows: repeat(2, 78px);
  gap: 10px 13px;
  justify-content: center;
  margin: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(even),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item.earned {
  width: 78px;
  min-height: 78px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-cream) !important;
  color: var(--profile-cocoa);
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(n + 5) {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-symbol {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 52px 52px !important;
  filter: none !important;
  opacity: 1 !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-symbol img,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-symbol i,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item > span:last-child {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-symbol::after {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(1) .badge-symbol {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e95536' stroke-width='10' stroke-linecap='square'%3E%3Cpath d='M32 5v54M5 32h54M13 13l38 38M51 13 13 51'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(2) .badge-symbol {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f5c53f' stroke-width='9' stroke-linecap='square'%3E%3Cpath d='M32 5v54M8 18l48 28M56 18 8 46'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(3) .badge-symbol {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23c78258'%3E%3Cellipse cx='32' cy='13' rx='11' ry='14'/%3E%3Cellipse cx='51' cy='24' rx='14' ry='11' transform='rotate(30 51 24)'/%3E%3Cellipse cx='51' cy='43' rx='14' ry='11' transform='rotate(-30 51 43)'/%3E%3Cellipse cx='32' cy='51' rx='11' ry='14'/%3E%3Cellipse cx='13' cy='43' rx='14' ry='11' transform='rotate(30 13 43)'/%3E%3Cellipse cx='13' cy='24' rx='14' ry='11' transform='rotate(-30 13 24)'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='8' fill='%23fff4df'/%3E%3C/svg%3E") !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(4) .badge-symbol {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23a9cceb'%3E%3Ccircle cx='32' cy='18' r='15'/%3E%3Ccircle cx='46' cy='32' r='15'/%3E%3Ccircle cx='32' cy='46' r='15'/%3E%3Ccircle cx='18' cy='32' r='15'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .profile-section-card {
  height: 226px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .profile-section-card {
  isolation: isolate;
  background:
    radial-gradient(
      ellipse 255px 210px at 105% 100%,
      var(--profile-apricot) 0 99%,
      transparent 100%
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .profile-section-card::after {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .section-title {
  position: absolute;
  z-index: 3;
  top: 56px;
  left: 26px;
  width: 92px;
  min-height: 0;
  display: block;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .section-title p {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-sticker-section .section-title h3 {
  max-width: 6ch;
  color: var(--profile-cocoa) !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  word-break: keep-all;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-board {
  position: absolute;
  z-index: 3;
  top: 61px;
  right: 9px;
  width: 245px;
  height: 114px;
  display: grid;
  grid-template-columns: repeat(5, 39px);
  grid-auto-rows: 39px;
  gap: 13px 10px;
  margin: 0;
  padding: 0 !important;
  overflow-y: auto;
  overflow-x: hidden;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-board::-webkit-scrollbar {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:nth-child(3n),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell.locked {
  width: 39px;
  height: 39px !important;
  aspect-ratio: 1;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-cream) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:nth-child(2),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:nth-child(5),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:nth-child(7),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:nth-child(9) {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 4px,
      var(--profile-cocoa) 4px 6px
    ),
    var(--profile-cream) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell img,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell > span {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-cell:not(.locked) img {
  width: 29px;
  height: 29px;
  display: block !important;
  margin: auto;
  object-fit: contain;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .sticker-detail {
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 9px;
  width: 225px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--profile-cream);
  box-shadow: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-allergy-section .profile-section-card {
  min-height: 142px;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 2px;
  padding: 17px 18px 14px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-allergy-section .section-title {
  min-height: 0;
  display: block;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-allergy-section .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-allergy-section .section-title p {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-allergy-section .section-title h3 {
  color: var(--profile-cocoa) !important;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-list {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-list::-webkit-scrollbar {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item.active {
  flex: 0 0 66px;
  min-height: 80px;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  gap: 6px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item::after {
  content: "●";
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border-radius: 50%;
  background: #e7dfc8;
  color: rgba(56, 33, 36, .15);
  font-size: 28px;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item:nth-child(1)::after {
  content: "◒";
  font-size: 34px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item:nth-child(2)::after {
  content: "∞";
  font-size: 30px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item:nth-child(3)::after {
  content: "♠";
  font-size: 32px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item.active::after {
  background: var(--profile-apricot);
  color: var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-item > span:first-child {
  width: 100%;
  overflow: hidden;
  color: var(--profile-cocoa);
  font-size: 10px;
  font-weight: 750;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-check {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-add {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 5px;
  margin: -2px 0 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-add input {
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(56, 33, 36, .16);
  border-radius: 999px;
  background: rgba(207, 233, 197, .48);
  color: var(--profile-cocoa);
  box-shadow: none;
  font-size: 8px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .allergy-add .secondary {
  width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 50%;
  background: var(--profile-coral);
  color: var(--profile-cream);
  box-shadow: none;
  font-size: 8px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-account-section,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-skipped-section {
  padding: 14px 18px 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-account-section .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-skipped-section .profile-section-card {
  padding: 18px !important;
  border-radius: 22px !important;
  background: rgba(255, 244, 223, .72) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-account-section .section-title,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-skipped-section .section-title {
  margin-bottom: 12px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-account-section .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-skipped-section .section-title-icon {
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-setting-row:nth-child(even),
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .skip-row {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .46) !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs {
  min-height: 84px;
  padding: 7px 12px max(12px, env(safe-area-inset-bottom));
  border: 0 !important;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 176px 176px !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button,
.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:hover,
.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active {
  --menu-icon-line: var(--profile-cocoa);
  --menu-icon-detail: var(--profile-cocoa);
  --menu-icon-fill: transparent;
  --menu-icon-fill-soft: transparent;
  --menu-icon-highlight: transparent;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:nth-child(1) {
  --menu-icon-line: var(--profile-cream);
  --menu-icon-detail: var(--profile-cream);
  --menu-icon-fill: var(--profile-cream);
  --menu-icon-fill-soft: var(--profile-cream);
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:nth-child(2) {
  --menu-icon-line: var(--profile-green);
  --menu-icon-detail: var(--profile-green);
  --menu-icon-fill: var(--profile-green);
  --menu-icon-fill-soft: var(--profile-green);
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:nth-child(3) {
  --menu-icon-line: var(--profile-butter);
  --menu-icon-detail: var(--profile-butter);
  --menu-icon-fill: var(--profile-butter);
  --menu-icon-fill-soft: var(--profile-cream);
  --menu-icon-highlight: var(--profile-cream);
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:nth-child(4) {
  --menu-icon-line: var(--profile-pink);
  --menu-icon-detail: var(--profile-pink);
  --menu-icon-fill: var(--profile-pink);
  --menu-icon-fill-soft: var(--profile-pink);
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button:nth-child(5) {
  --menu-icon-line: var(--profile-coral);
  --menu-icon-detail: var(--profile-coral);
  --menu-icon-fill: var(--profile-coral);
  --menu-icon-fill-soft: var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button .tab-menu-icon,
.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active .tab-menu-icon {
  border: 0 !important;
  background: transparent !important;
  color: var(--menu-icon-line) !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button .tab-menu-label,
.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active .tab-menu-label {
  color: var(--profile-cocoa) !important;
  font-size: 10px;
  font-weight: 800;
}

.phone.profile-frame-phone.profile-mono-preview > .editorial-tabs button.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--profile-coral);
  transform: translateX(-50%);
}

@media (max-width: 390px) {
  .phone.profile-frame-phone.profile-mono-preview > .content {
    padding: 0 !important;
  }

  .phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-avatar {
    left: 13px;
  }

  .phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-copy {
    right: 17px;
  }

  .phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-stats {
    right: 16px;
  }
}

/* Keep the approved profile surfaces above the earlier card cascade. */
.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-edit-button {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section.profile-social-section .profile-social-card {
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section.profile-titles-section .profile-section-card {
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section.profile-sticker-section .profile-section-card {
  background:
    radial-gradient(
      ellipse 255px 210px at 105% 100%,
      var(--profile-apricot) 0 99%,
      transparent 100%
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .profile-section.profile-allergy-section .profile-section-card {
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item .badge-symbol {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item::before {
  content: "";
  width: 52px;
  height: 52px;
  display: block;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(1)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e95536' stroke-width='10' stroke-linecap='square'%3E%3Cpath d='M32 5v54M5 32h54M13 13l38 38M51 13 13 51'/%3E%3C/g%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(2)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23f5c53f' stroke-width='9' stroke-linecap='square'%3E%3Cpath d='M32 5v54M8 18l48 28M56 18 8 46'/%3E%3C/g%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(3)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23c78258'%3E%3Cellipse cx='32' cy='13' rx='11' ry='14'/%3E%3Cellipse cx='51' cy='24' rx='14' ry='11' transform='rotate(30 51 24)'/%3E%3Cellipse cx='51' cy='43' rx='14' ry='11' transform='rotate(-30 51 43)'/%3E%3Cellipse cx='32' cy='51' rx='11' ry='14'/%3E%3Cellipse cx='13' cy='43' rx='14' ry='11' transform='rotate(30 13 43)'/%3E%3Cellipse cx='13' cy='24' rx='14' ry='11' transform='rotate(-30 13 24)'/%3E%3C/g%3E%3Ccircle cx='32' cy='32' r='8' fill='%23fff4df'/%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-mint-v4 .badge-item:nth-child(4)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23a9cceb'%3E%3Ccircle cx='32' cy='18' r='15'/%3E%3Ccircle cx='46' cy='32' r='15'/%3E%3Ccircle cx='32' cy='46' r='15'/%3E%3Ccircle cx='18' cy='32' r='15'/%3E%3C/g%3E%3C/svg%3E");
}

/* Profile poster v7: measured against the approved 900 × 1750 artwork. */
.phone.profile-frame-phone.profile-mono-preview {
  --profile-mint: #d1eac6;
  --profile-cream: #fff4df;
  --profile-apricot: #ffc39c;
  --profile-coral: #ef4d30;
  --profile-butter: #f6bd2b;
  --profile-cocoa: #382124;
  --profile-blue: #a4cae9;
  --profile-green: #91c953;
  --profile-pink: #eb88bd;
  grid-template-rows: 0 minmax(0, 1fr) 80px !important;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview > .content {
  padding: 0 !important;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 792px;
  display: grid;
  grid-template-rows: 330px 30px 190px 170px 72px;
  gap: 0 !important;
  padding: 0;
  overflow: hidden;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-hero,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-section,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-titles-section,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-sticker-section,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-allergy-section {
  width: 100%;
  height: auto !important;
  min-height: 0;
  margin: 0 !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-hero {
  background:
    radial-gradient(
      ellipse 188px 159px at 14% 50%,
      var(--profile-cream) 0 99%,
      transparent 100%
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-avatar {
  top: 34px;
  left: 18px;
  width: 180px;
  height: 269px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-copy {
  top: 47px;
  right: 23px;
  width: 132px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-title-row {
  gap: 10px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-title-row h2 {
  font-size: 37px;
  line-height: .93;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .level-chip {
  font-size: 20px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stats {
  top: 126px;
  right: 20px;
  width: 143px;
  gap: 10px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stat + .profile-stat,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stat:nth-child(n) {
  min-height: 48px;
  grid-template-columns: minmax(0, 1fr) 48px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stat strong {
  width: 48px;
  height: 48px;
  font-size: 23px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-stat span {
  font-size: 12px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-hero::after {
  top: 250px;
  left: 88px;
  width: 136px !important;
  height: 59px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section:nth-of-type(even) .profile-section-card,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section:nth-of-type(odd) .profile-section-card {
  height: 100% !important;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section.profile-social-section .profile-social-card {
  grid-template-columns: minmax(0, 1fr) auto 22px;
  gap: 7px;
  padding: 0 31px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-card .section-title {
  padding-left: 10px;
  border-left: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-card .section-title h3 {
  font-size: 12px;
  font-weight: 900;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-stats {
  gap: 9px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-stats::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  background:
    radial-gradient(circle at 50% 25%, var(--profile-coral) 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 50% 102%, var(--profile-coral) 0 9px, transparent 9.5px);
  transform: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-stats span {
  gap: 3px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-stats b {
  font-size: 9px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-stats small {
  font-size: 9px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-link {
  width: 22px;
  min-height: 22px;
  display: grid;
  place-items: center;
  overflow: visible;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-link::after {
  content: "→";
  color: var(--profile-coral);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-social-link .profile-icon-svg {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section.profile-titles-section .profile-section-card {
  grid-template-columns: 128px minmax(0, 1fr);
  padding: 8px 29px 7px !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-titles-section .section-title {
  padding-left: 10px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-titles-section .section-title h3 {
  max-width: 5.3ch;
  font-size: 18px;
  line-height: 1.5;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-list {
  grid-template-columns: repeat(2, 78px);
  grid-template-rows: repeat(2, 78px);
  gap: 10px 13px;
  justify-content: end;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item:nth-child(even),
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item.earned {
  width: 78px;
  min-height: 78px;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section.profile-sticker-section .profile-section-card {
  background:
    url("./assets/ui/profile-screenprint-texture-v1.svg") 0 0 / 96px 96px,
    radial-gradient(
      ellipse 335px 190px at 100% 100%,
      var(--profile-apricot) 0 99%,
      transparent 100%
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-sticker-section .section-title {
  top: 39px;
  left: 31px;
  width: 92px;
  padding-bottom: 0;
  border-bottom: 0 !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-sticker-section .section-title::after {
  content: "";
  position: absolute;
  right: auto;
  bottom: -10px;
  left: 0;
  width: 32px;
  height: 2px;
  display: block !important;
  background: var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-sticker-section .section-title h3 {
  font-size: 18px;
  line-height: 1.45;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-board {
  top: 38px;
  right: 10px;
  width: 258px;
  height: 96px;
  grid-template-columns: repeat(5, 42px);
  grid-template-rows: repeat(2, 42px);
  grid-auto-rows: 42px;
  gap: 12px;
  overflow: hidden;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(3n),
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell.locked {
  width: 42px;
  height: 42px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(n + 11) {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(2),
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(5) {
  background-color: var(--profile-cream) !important;
  background-image:
    linear-gradient(90deg, var(--profile-cream) 0 50%, transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M.8 2.5h4.2' fill='none' stroke='%23382124' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 8px 5px !important;
  background-repeat: no-repeat, repeat !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(7),
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .sticker-cell:nth-child(9) {
  background-color: var(--profile-cream) !important;
  background-image:
    linear-gradient(90deg, transparent 0 50%, var(--profile-cream) 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M.8 2.5h4.2' fill='none' stroke='%23382124' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 8px 5px !important;
  background-repeat: no-repeat, repeat !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-section.profile-allergy-section .profile-section-card {
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 0;
  padding: 6px 31px 5px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-allergy-section .section-title {
  padding-left: 10px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .profile-allergy-section .section-title h3 {
  font-size: 15px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  overflow: visible;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item.active {
  min-width: 0;
  min-height: 60px;
  display: grid;
  grid-template-rows: 43px 12px;
  gap: 3px;
  align-content: center;
  padding: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item::after {
  grid-row: 1;
  width: 43px;
  height: 43px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: #e5ddc5;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 35px 35px;
  color: transparent;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item:nth-child(1)::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23cfc6ad' d='M37 11c-9-7-21-2-23 7-2 8 4 14 12 13-4 4-9 5-14 3 4 6 14 7 21 2 8-6 10-17 4-25Z'/%3E%3Cpath fill='none' stroke='%23e5ddc5' stroke-width='2' d='M17 16c5 0 9 3 11 8M16 22c5 0 8 2 10 6'/%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item:nth-child(2)::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23cfc6ad' d='M16 8c-7 0-11 6-9 13 1 4 5 6 8 8 4 3 3 8 7 10 6 4 14 0 15-7 1-5-3-8-7-10-4-2-3-8-6-11-2-2-5-3-8-3Z'/%3E%3Cpath fill='none' stroke='%23e5ddc5' stroke-width='2' d='m14 15 18 18M11 21l14 14M20 11l15 15'/%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item:nth-child(3)::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23cfc6ad' d='M8 25C8 14 15 7 24 7s16 7 16 18H8Zm12 0h8v16h-8z'/%3E%3Cpath fill='%23e5ddc5' d='M13 22c2-6 6-9 11-9s9 3 11 9H13Z' opacity='.45'/%3E%3C/svg%3E");
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item.active::after {
  background-color: var(--profile-apricot);
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .allergy-item > span:first-child {
  grid-row: 2;
  font-size: 9px;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav {
  box-sizing: border-box;
  height: 80px !important;
  min-height: 0;
  padding: 5px 15px 8px;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button:hover,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active {
  min-height: 64px;
  grid-template-rows: 43px 13px;
  gap: 2px;
  padding: 0 2px;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-icon,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active .tab-menu-icon {
  width: 45px;
  height: 43px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .profile-poster-menu-svg {
  width: 38px !important;
  height: 38px !important;
  overflow: visible;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-label,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active .tab-menu-label {
  color: var(--profile-cocoa) !important;
  font-size: 10px;
  font-weight: 850;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active::after {
  bottom: -1px;
  width: 7px;
  height: 7px;
  background: var(--profile-coral);
}

@media (max-height: 830px) {
  .phone.profile-frame-phone.profile-mono-preview > .content {
    overflow-y: auto;
  }
}

/* Profile badge centering correction. */
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item:nth-child(even),
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item.earned {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  justify-items: center !important;
  align-items: center !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item::before {
  grid-column: 1;
  grid-row: 1;
  width: 48px;
  height: 48px;
  justify-self: center;
  align-self: center;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item:nth-child(3)::before,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v7 .badge-item:nth-child(4)::before {
  width: 45px;
  height: 45px;
}

/* Profile poster v8: align the live page with the approved 899 × 1750 mockup. */
.phone.profile-frame-phone.profile-mono-preview {
  --profile-mint: #cfe7c3;
  --profile-cream: #fff3df;
  --profile-apricot: #ffc29a;
}

.phone.profile-frame-phone.profile-mono-preview,
.phone.profile-frame-phone.profile-mono-preview > .content,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-section.profile-social-section .profile-social-card,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .badge-item,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .sticker-cell,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-section.profile-allergy-section .profile-section-card {
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 132px 132px !important;
}

.phone.profile-frame-phone.profile-mono-preview > .content {
  overflow-y: auto !important;
  scrollbar-width: none;
}

.phone.profile-frame-phone.profile-mono-preview > .content::-webkit-scrollbar {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 {
  height: auto !important;
  min-height: 1112px;
  grid-template-rows: 330px 30px 190px 170px 72px 320px;
  overflow: visible;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-hero,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-titles-section,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-sticker-section,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section {
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 132px 132px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-hero {
  background-color: var(--profile-mint) !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    radial-gradient(
      ellipse 188px 159px at 14% 50%,
      var(--profile-cream) 0 99%,
      transparent 100%
    ) !important;
  background-size: 132px 132px, auto !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-avatar {
  top: 42px;
  left: 50px;
  width: 160px;
  height: 265px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-copy {
  top: 49px;
  right: 13px;
  width: 132px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-title-row h2 {
  font-size: 32px;
  letter-spacing: -.045em !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .level-chip {
  font-size: 17px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-stats {
  top: 127px;
  right: 36px;
  width: 115px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-stat span {
  font-size: 11px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-hero::after {
  top: 252px;
  left: 100px;
  width: 148px !important;
  height: 55px !important;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--profile-cocoa) 0 1px,
      transparent 1px 4px
    ) !important;
  opacity: .88 !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-card {
  grid-template-columns: minmax(0, 1fr) auto;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-stats {
  gap: 7px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-stats::before {
  width: 15px;
  height: 18px;
  background:
    radial-gradient(circle at 50% 24%, var(--profile-coral) 0 3.5px, transparent 3.8px),
    radial-gradient(ellipse at 50% 100%, var(--profile-coral) 0 7px, transparent 7.4px);
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-stats i {
  color: var(--profile-coral);
  font-size: 9px;
  font-style: normal;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-stats span:nth-child(3) {
  display: flex;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-link {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-social-link::after {
  content: none !important;
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-titles-section .section-title h3,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-sticker-section .section-title h3 {
  font-size: 16px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-section.profile-titles-section .profile-section-card {
  grid-template-columns: 117px minmax(0, 1fr);
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .badge-list {
  gap: 10px 28px;
  justify-content: start;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-sticker-section .profile-section-card {
  background:
    url("./assets/ui/profile-screenprint-texture-v1.svg") 0 0 / 132px 132px,
    radial-gradient(
      ellipse 335px 190px at 100% 100%,
      var(--profile-apricot) 0 99%,
      transparent 100%
    ) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .sticker-board {
  right: 22px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-sticker-section .section-title::after {
  width: 32px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section {
  box-sizing: border-box;
  width: 100%;
  height: 320px !important;
  margin: 0 !important;
  padding: 15px 18px 17px;
  background-color: var(--profile-mint) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .profile-section-card {
  box-sizing: border-box;
  height: 100% !important;
  padding: 13px 15px 12px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: rgba(255, 243, 223, .56) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .section-title {
  min-height: 39px;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 9px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .section-title::after {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .section-title-icon {
  width: 37px;
  height: 37px;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .section-title h3 {
  color: var(--profile-cocoa) !important;
  font-size: 16px;
  line-height: 1.05;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-section .section-title p {
  display: block !important;
  margin-top: 3px;
  color: rgba(56, 33, 36, .62) !important;
  font-size: 8px;
  font-weight: 750;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-list {
  gap: 6px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row:nth-child(even) {
  box-sizing: border-box;
  min-height: 40px;
  grid-template-columns: 29px minmax(0, 1fr) 18px;
  gap: 8px;
  padding: 4px 11px 4px 6px;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .58) !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
  font-size: 9px;
  font-weight: 850;
  text-align: left;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row:first-child .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-danger .setting-row-icon {
  width: 29px;
  height: 29px;
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-locked .setting-row-icon {
  background: var(--profile-butter) !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row > .profile-icon-svg,
.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-setting-row > svg {
  justify-self: end;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-foot {
  margin-top: 9px;
  padding: 8px 2px 0;
  border-top: 1px solid rgba(239, 77, 48, .5);
  font-size: 7px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-poster-v8 .profile-account-foot button {
  min-height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--profile-cocoa);
  color: var(--profile-cream);
  font-size: 8px;
}

/* Profile reference v14: use the approved poster artwork as the visual source. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 {
  width: 100%;
  height: auto !important;
  min-height: 0;
  display: block !important;
  overflow: visible;
  background: var(--profile-mint) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 > .profile-hero,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 > .profile-social-section,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 > .profile-titles-section,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 > .profile-sticker-section,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 > .profile-allergy-section {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-poster {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 899 / 1595;
  overflow: hidden;
  margin: 0;
  padding: 0;
  background: var(--profile-mint);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-poster > img {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-hotspot {
  position: absolute;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  opacity: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-social-hotspot {
  top: 37.8%;
  right: 0;
  left: 0;
  height: 4.1%;
}

/* Profile title collection v17: a growing, horizontally browsable 2-row archive. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-panel {
  position: absolute;
  z-index: 3;
  top: 45.05%;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 24.95%;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 4px;
  overflow: hidden;
  margin: 0;
  padding: 10px 0 8px 31px;
  background-color: var(--profile-mint);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  color: var(--profile-cocoa);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-panel h3 {
  align-self: center;
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--profile-coral);
  color: var(--profile-cocoa);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.52;
  letter-spacing: -.055em;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-stage {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 17px;
  overflow: hidden;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-stage::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 25px;
  height: calc(100% - 17px);
  background: linear-gradient(90deg, transparent, var(--profile-mint));
  pointer-events: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 72px);
  grid-auto-columns: 72px;
  align-content: center;
  gap: 10px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 34px 0 5px;
  outline: 0;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  touch-action: pan-x;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-track::-webkit-scrollbar {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item {
  position: relative;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--profile-cream);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  color: var(--profile-cocoa);
  scroll-snap-align: start;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item b {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item:nth-child(4n + 1) b {
  color: var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item:nth-child(4n + 2) b {
  color: var(--profile-butter);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item:nth-child(4n + 3) b {
  color: #d18b5d;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item:nth-child(4n) b {
  color: var(--profile-blue);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item span {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-cocoa);
  color: var(--profile-cream);
  font-size: 7px;
  font-weight: 900;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item.locked {
  opacity: .48;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item.locked b {
  filter: grayscale(.75);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 1px 22px 0 6px;
  color: rgba(56, 33, 36, .68);
  font-size: 7px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-meta strong {
  color: var(--profile-coral);
  font-weight: 900;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-sticker-more {
  position: absolute;
  z-index: 4;
  top: 82.35%;
  left: 31px;
  box-sizing: border-box;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 0 10px 0 11px;
  border: 1px solid var(--profile-coral) !important;
  border-radius: 999px !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 132px 132px !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-sticker-more b {
  color: var(--profile-coral);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

/* Profile sticker board v18: an expandable archive above the fixed poster. */
.mono-preview-page .profile-sticker-modal {
  --profile-mint: #cfe9c5;
  --profile-cream: #fff4df;
  --profile-apricot: #ffc59f;
  --profile-coral: #e95536;
  --profile-butter: #f5c53f;
  --profile-cocoa: #382124;
  --profile-blue: #a9cceb;
  z-index: 90;
  align-items: flex-end;
  padding: 0 !important;
  background: rgba(56, 33, 36, .34);
  backdrop-filter: blur(2px);
}

.mono-preview-page .profile-sticker-sheet {
  box-sizing: border-box;
  width: min(100%, 430px);
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 28px 28px 0 0;
  background-color: var(--profile-mint);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  color: var(--profile-cocoa);
  box-shadow: 0 -16px 45px rgba(56, 33, 36, .18);
}

.mono-preview-page .profile-sticker-sheet-head {
  position: relative;
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 16px 29px;
  overflow: hidden;
  background-color: var(--profile-cream);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
}

.mono-preview-page .profile-sticker-sheet-head::after {
  content: "";
  position: absolute;
  right: 68px;
  bottom: -58px;
  width: 180px;
  height: 105px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--profile-cocoa) 0 1px, transparent 1.3px) 0 0 / 7px 7px;
  opacity: .13;
  transform: rotate(-6deg);
  pointer-events: none;
}

.mono-preview-page .profile-sticker-sheet-head > div {
  position: relative;
  z-index: 1;
  padding-left: 11px;
  border-left: 2px solid var(--profile-coral);
}

.mono-preview-page .profile-sticker-sheet-head span,
.mono-preview-page .profile-sticker-sheet-head p {
  display: block;
  margin: 0;
  color: rgba(56, 33, 36, .62);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .04em;
}

.mono-preview-page .profile-sticker-sheet-head h2 {
  margin: 3px 0 4px;
  color: var(--profile-cocoa);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.055em;
}

.mono-preview-page .profile-sticker-sheet-close {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--profile-coral);
  color: var(--profile-cream);
  box-shadow: none;
  font-size: 23px;
  font-weight: 500;
  line-height: 1;
}

.mono-preview-page .profile-sticker-sheet > .sticker-detail {
  margin: 12px 16px 0;
  border: 0;
  border-radius: 16px;
  background: rgba(255, 246, 224, .8);
  box-shadow: none;
}

.mono-preview-page .profile-sticker-sheet-grid {
  box-sizing: border-box;
  max-height: calc(100dvh - 148px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: start;
  gap: 18px 9px;
  overflow-y: auto;
  padding: 20px 18px 112px;
  scrollbar-width: none;
}

.mono-preview-page .profile-sticker-sheet-grid::-webkit-scrollbar {
  display: none;
}

.mono-preview-page .profile-sticker-sheet-item {
  min-width: 0;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--profile-cocoa);
  box-shadow: none;
  text-align: center;
}

.mono-preview-page .profile-sticker-sheet-art {
  position: relative;
  box-sizing: border-box;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--profile-cream);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
}

.mono-preview-page .profile-sticker-sheet-art img {
  width: 46px;
  height: 46px;
  object-fit: contain;
}

.mono-preview-page .profile-sticker-sheet-art i {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-cocoa);
  color: var(--profile-cream);
  font-size: 7px;
  font-style: normal;
  font-weight: 900;
}

.mono-preview-page .profile-sticker-sheet-item > b {
  max-width: 10ch;
  overflow: hidden;
  color: var(--profile-cocoa);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mono-preview-page .profile-sticker-sheet-item.locked {
  opacity: .5;
}

.mono-preview-page .profile-sticker-sheet-item.locked .profile-sticker-sheet-art img {
  filter: grayscale(1);
  opacity: .38;
}

.mono-preview-page .profile-sticker-sheet-coming {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--profile-coral);
  text-align: center;
}

.mono-preview-page .profile-sticker-sheet-coming > span {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--profile-coral);
  border-radius: 50%;
  background: rgba(255, 246, 224, .44);
  font-size: 22px;
  font-weight: 700;
}

.mono-preview-page .profile-sticker-sheet-coming strong {
  font-size: 7px;
  font-weight: 850;
  line-height: 1.2;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-panel {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  height: 9.35%;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 22px 7px 32px;
  background-color: var(--profile-cream);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  color: var(--profile-cocoa);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-panel h3 {
  margin: 0;
  padding-left: 10px;
  border-left: 2px solid var(--profile-coral);
  color: var(--profile-cocoa);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-content {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-chips {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-chips::-webkit-scrollbar {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-chips button,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-add,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-editor button {
  box-sizing: border-box;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid rgba(56, 33, 36, .16) !important;
  border-radius: 999px !important;
  background: rgba(207, 231, 195, .62) !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-chips button b {
  color: var(--profile-coral);
  font-size: 13px;
  font-weight: 900;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-add {
  flex: 0 0 auto;
  min-width: 76px;
  border-color: var(--profile-coral) !important;
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-editor {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px 28px;
  gap: 4px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-editor input {
  box-sizing: border-box;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border: 1px solid rgba(56, 33, 36, .2);
  border-radius: 999px;
  outline: 0;
  background: rgba(255, 255, 255, .7);
  color: var(--profile-cocoa);
  font: inherit;
  font-size: 9px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-editor button {
  min-width: 0;
  padding: 0 6px;
  border-color: var(--profile-coral) !important;
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-allergy-editor .profile-reference-allergy-close {
  width: 28px;
  padding: 0;
  border-color: rgba(56, 33, 36, .15) !important;
  background: transparent !important;
  color: var(--profile-cocoa) !important;
  font-size: 15px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section {
  display: block !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav {
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/ui/profile-approved-poster-v14.png?v=20260727-profile-reference-v14") !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-icon,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-label {
  opacity: 0 !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active::after {
  display: none !important;
}

/* Profile account v16: continue the poster's circle-and-paper visual language. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section {
  position: relative;
  height: 320px !important;
  overflow: hidden;
  padding: 0 !important;
  background-color: var(--profile-mint) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 132px 132px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section::before {
  content: "";
  position: absolute;
  right: -75px;
  bottom: -88px;
  width: 320px;
  height: 205px;
  border-radius: 50%;
  background-color: var(--profile-apricot);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  pointer-events: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section::after {
  content: "";
  position: absolute;
  right: 35px;
  bottom: 26px;
  width: 128px;
  height: 52px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--profile-cocoa) 0 1px, transparent 1.3px) 0 0 / 6px 6px;
  opacity: .16;
  transform: rotate(-5deg);
  pointer-events: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .profile-section-card {
  position: relative;
  z-index: 1;
  height: 100% !important;
  overflow: hidden;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title {
  position: absolute;
  top: 43px;
  left: 31px;
  width: 104px;
  min-height: 0;
  display: block;
  margin: 0;
  padding: 0 0 0 10px;
  border: 0;
  border-left: 2px solid var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title::after,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title p {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title h3 {
  max-width: 5.5ch;
  margin: 0;
  color: var(--profile-cocoa) !important;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.38;
  letter-spacing: -.045em;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-list {
  position: absolute;
  top: 27px;
  right: 31px;
  width: 188px;
  display: grid;
  grid-template-columns: repeat(2, 82px);
  grid-template-rows: repeat(2, 82px);
  gap: 14px 24px;
  margin: 0;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(even) {
  box-sizing: border-box;
  width: 82px;
  min-width: 82px;
  height: 82px;
  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 39px minmax(0, 1fr);
  place-items: center;
  gap: 4px;
  padding: 8px 5px 7px;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: var(--profile-cream) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 132px 132px !important;
  color: var(--profile-cocoa) !important;
  box-shadow: none !important;
  text-align: center;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-danger .setting-row-icon {
  grid-column: 1;
  grid-row: 1;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--profile-coral) !important;
  color: var(--profile-cream) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(2) .setting-row-icon {
  background: var(--profile-butter) !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(3) .setting-row-icon {
  background: var(--profile-blue) !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(4) .setting-row-icon {
  background: #d18b5d !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  color: var(--profile-cocoa);
  font-size: 8px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) b,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) small {
  display: block;
  font-size: inherit;
  line-height: inherit;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) small {
  margin-top: 2px;
  color: rgba(56, 33, 36, .58);
  font-size: 6px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > svg {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot {
  position: absolute;
  right: 31px;
  bottom: 22px;
  left: 31px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 10px 0 0;
  border-top: 2px solid var(--profile-coral);
  color: rgba(56, 33, 36, .58);
  font-size: 7px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot button {
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-cocoa);
  color: var(--profile-cream);
  box-shadow: none;
  font-size: 8px;
  font-weight: 850;
}

/* Profile account v19: compact stamp row instead of a top-heavy 2 × 2 cluster. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section {
  height: 248px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section::before {
  right: -62px;
  bottom: 22px;
  width: 282px;
  height: 164px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section::after {
  right: 28px;
  bottom: 58px;
  width: 116px;
  height: 44px;
  opacity: .13;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title {
  top: 20px;
  right: 30px;
  left: 30px;
  width: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 0 0 11px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title::after {
  content: "PROFILE & ACCOUNT";
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  flex: 0 0 auto;
  border: 0 !important;
  background: none !important;
  color: rgba(56, 33, 36, .54);
  opacity: 1 !important;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
  transform: none !important;
  white-space: nowrap;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section .section-title h3 {
  max-width: none;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -.055em;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-list {
  top: 68px;
  right: 27px;
  left: 27px;
  width: auto;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 82px;
  gap: 0 12px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(even) {
  width: 82px;
  min-width: 0;
  height: 82px;
  min-height: 82px;
  grid-template-rows: 38px minmax(0, 1fr);
  padding: 8px 4px 7px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-danger .setting-row-icon {
  width: 36px;
  height: 36px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) {
  font-size: 7.5px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row > span:nth-child(2) small {
  font-size: 5.5px;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot {
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 50px;
  box-sizing: border-box;
  padding: 0 29px;
  border-top: 0;
  background-color: rgba(255, 244, 223, .91);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 132px 132px;
  color: rgba(56, 33, 36, .62);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot::before {
  content: "";
  width: 2px;
  height: 20px;
  margin-right: 8px;
  background: var(--profile-coral);
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot > span {
  margin-right: auto;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot button {
  min-height: 30px;
  padding: 0 12px;
  background: var(--profile-coral);
  color: var(--profile-cream);
}

/* Profile account palette v20: quieter tones and a unified icon family. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(even) {
  background-color: rgba(255, 244, 223, .94) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child .setting-row-icon,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-danger .setting-row-icon {
  width: 38px;
  height: 38px;
  background: #e88772 !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(2) .setting-row-icon {
  background: #abc98d !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(3) .setting-row-icon {
  background: #a6c3d8 !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(4) .setting-row-icon {
  background: #d5a080 !important;
  color: var(--profile-cocoa) !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.6;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-accent-red,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-accent-pink,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-fill-red,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-fill-pink,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row .setting-row-icon .profile-icon-fill-yellow {
  fill: none !important;
  stroke: currentColor !important;
}

/* Profile texture v21: reuse an exact clean mint sample from the approved poster. */
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-panel,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-section {
  background-color: #cfe9c5 !important;
  background-image: url("./assets/ui/profile-mint-texture-tile-v21.png") !important;
  background-repeat: repeat !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-stage::after {
  display: none;
}

.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-reference-title-item,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:first-child,
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-setting-row:nth-child(even),
.phone.profile-frame-phone.profile-mono-preview .profile-reference-v14 .profile-account-foot {
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-repeat: repeat, repeat !important;
  background-size: 176px 176px, 96px 96px !important;
}

/* Ranking poster v1 — approved 2026-07-27 character-first screenprint artwork. */
.phone.ranking-frame-phone.ranking-mono-preview {
  --ranking-red: #ff5147;
  --ranking-blue: #79bfe8;
  --ranking-navy: #0c214e;
  --ranking-cream: #fff4dc;
  --ranking-lime: #b8db28;
  --ranking-yellow: #ffbd13;
  --ranking-mint: #dcefc8;
  grid-template-rows:
    minmax(0, 1fr)
    calc(72px + env(safe-area-inset-bottom)) !important;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--ranking-red) !important;
  box-shadow: none;
  filter: none;
}

.phone.ranking-frame-phone.ranking-mono-preview > .top {
  display: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .content {
  position: relative;
  min-height: 0;
  overflow: hidden !important;
  padding: 0 !important;
  background: var(--ranking-red) !important;
  overscroll-behavior: none;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-v1 {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: 70% 30%;
  gap: 0 !important;
  overflow: hidden;
  color: var(--ranking-navy);
  background: var(--ranking-red);
  font-family: "SUIT", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
  isolation: isolate;
  animation: none;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-v1::after {
  content: "";
  position: absolute;
  z-index: 20;
  inset: 0;
  background: url("./assets/paper-grain.svg") repeat;
  background-size: 170px 170px;
  opacity: .18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.ranking-poster-v1 .ranking-poster-upper,
.ranking-poster-v1 .ranking-poster-lower {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.ranking-poster-v1 .ranking-poster-upper {
  background-color: var(--ranking-red);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-repeat: repeat;
  background-size: 112px 112px;
}

.ranking-poster-v1 .ranking-poster-heading {
  position: absolute;
  z-index: 12;
  top: 4.5%;
  left: 6%;
  width: 38%;
  margin: 0;
  padding: 0;
}

.ranking-poster-v1 .ranking-poster-heading h2 {
  margin: 0;
  color: var(--ranking-navy);
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: clamp(40px, 11.6vw, 52px);
  font-weight: 900;
  line-height: .91;
  letter-spacing: -.09em;
}

.ranking-poster-v1 .ranking-poster-scope {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 23px;
}

.ranking-poster-v1 .ranking-poster-scope button,
.ranking-poster-v1 .ranking-poster-scope button:hover,
.ranking-poster-v1 .ranking-poster-scope button.active {
  position: relative;
  min-width: 0;
  padding: 0 0 8px;
  border: 0;
  border-radius: 0;
  color: var(--ranking-navy);
  background: transparent !important;
  box-shadow: none;
  font-size: 16px;
  font-weight: 850;
  line-height: 1;
  transform: none;
}

.ranking-poster-v1 .ranking-poster-scope button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  background: transparent;
}

.ranking-poster-v1 .ranking-poster-scope button.active::after {
  background: var(--ranking-navy);
}

.ranking-poster-v1 .ranking-poster-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.ranking-poster-v1 .ranking-poster-person {
  position: absolute;
  bottom: 0;
  margin: 0;
}

.ranking-poster-v1 .ranking-poster-person > img {
  position: absolute;
  z-index: 4;
  display: block;
  height: auto;
  object-fit: contain;
  filter: saturate(.98) contrast(1.01);
  pointer-events: none;
}

.ranking-poster-v1 .ranking-poster-first {
  z-index: 5;
  left: 33.5%;
  width: 33%;
  height: 83%;
}

.ranking-poster-v1 .ranking-poster-second {
  z-index: 4;
  left: 4.8%;
  width: 30%;
  height: 61%;
}

.ranking-poster-v1 .ranking-poster-third {
  z-index: 4;
  right: 4.8%;
  width: 30%;
  height: 61%;
}

.ranking-poster-v1 .ranking-poster-first > img {
  top: 0;
  left: 18%;
  width: 64%;
}

.ranking-poster-v1 .ranking-poster-second > img,
.ranking-poster-v1 .ranking-poster-third > img {
  top: 0;
  left: 26%;
  width: 48%;
}

.ranking-poster-v1 .ranking-food-halo {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ranking-cream);
}

.ranking-poster-v1 .ranking-food-halo::after {
  content: "";
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background-image: radial-gradient(circle, var(--ranking-navy) 0 1.5px, transparent 1.7px);
  background-size: 8px 8px;
}

.ranking-poster-v1 .ranking-food-halo-first {
  top: 2%;
  left: -34%;
  width: 168%;
  aspect-ratio: 1;
}

.ranking-poster-v1 .ranking-food-halo-second,
.ranking-poster-v1 .ranking-food-halo-third {
  top: 2%;
  left: -8%;
  width: 116%;
  aspect-ratio: 1;
}

.ranking-poster-v1 .ranking-food-halo-first::after {
  right: -4%;
  bottom: -4%;
  width: 68%;
  height: 46%;
}

.ranking-poster-v1 .ranking-food-halo-second::after {
  left: -3%;
  bottom: -1%;
  width: 66%;
  height: 48%;
  background-color: var(--ranking-blue);
}

.ranking-poster-v1 .ranking-food-halo-third::after {
  right: -9%;
  bottom: -7%;
  width: 60%;
  height: 52%;
}

.ranking-poster-v1 .ranking-food-halo i {
  position: absolute;
  z-index: 2;
  display: block;
}

.ranking-poster-v1 .food-egg {
  width: 39%;
  aspect-ratio: 1.35;
  border-radius: 50% 50% 45% 48%;
  background: #fffaf0;
}

.ranking-poster-v1 .food-egg::after {
  content: "";
  position: absolute;
  width: 43%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f6a000;
}

.ranking-poster-v1 .food-egg-a {
  top: 28%;
  left: -5%;
  transform: rotate(-15deg);
}

.ranking-poster-v1 .food-egg-a::after {
  right: 8%;
  bottom: 10%;
}

.ranking-poster-v1 .food-egg-b {
  right: -4%;
  bottom: 16%;
  transform: rotate(13deg);
}

.ranking-poster-v1 .food-egg-b::after {
  bottom: 8%;
  left: 16%;
}

.ranking-poster-v1 .food-lime {
  border-radius: 60% 40% 56% 44%;
  background: var(--ranking-lime);
}

.ranking-poster-v1 .food-lime-a {
  left: -8%;
  bottom: 4%;
  width: 42%;
  height: 31%;
  transform: rotate(-26deg);
}

.ranking-poster-v1 .food-lime-b {
  top: 24%;
  right: -7%;
  width: 52%;
  height: 16%;
  border-radius: 2px;
  transform: rotate(-14deg);
}

.ranking-poster-v1 .food-navy {
  right: -10%;
  bottom: 3%;
  width: 46%;
  height: 61%;
  border-radius: 50% 0 0 50%;
  background: var(--ranking-navy);
  transform: rotate(-10deg);
}

.ranking-poster-v1 .food-halftone {
  right: 4%;
  bottom: -7%;
  width: 56%;
  height: 34%;
  background-image: radial-gradient(circle, #141414 0 1.35px, transparent 1.55px);
  background-size: 6px 6px;
  transform: rotate(-7deg);
}

.ranking-poster-v1 .ranking-poster-podium {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 7px solid var(--ranking-navy);
  background-color: var(--ranking-cream);
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(circle, rgba(12, 33, 78, .92) 0 1.1px, transparent 1.3px);
  background-repeat: repeat, repeat;
  background-size: 148px 148px, 29px 29px;
  background-position: 0 0, 7px 7px;
  color: var(--ranking-navy);
}

.ranking-poster-v1 .ranking-poster-podium::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12px;
  background-image: radial-gradient(circle, #111 0 1.7px, transparent 1.9px);
  background-size: 5px 5px;
}

.ranking-poster-v1 .ranking-poster-first .ranking-poster-podium {
  height: 33%;
  border-top-color: var(--ranking-lime);
}

.ranking-poster-v1 .ranking-poster-second .ranking-poster-podium,
.ranking-poster-v1 .ranking-poster-third .ranking-poster-podium {
  height: 38%;
}

.ranking-poster-v1 .ranking-poster-podium strong {
  display: block;
  margin: 0;
  font-size: clamp(58px, 17vw, 78px);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.05em;
}

.ranking-poster-v1 .ranking-poster-first .ranking-poster-podium strong {
  color: #ff3f34;
}

.ranking-poster-v1 .ranking-poster-second .ranking-poster-podium strong,
.ranking-poster-v1 .ranking-poster-third .ranking-poster-podium strong {
  font-size: clamp(48px, 13.5vw, 62px);
}

.ranking-poster-v1 .ranking-poster-podium span {
  margin-top: 11px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.ranking-poster-v1 .ranking-poster-lower {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 17px 25px 17px;
  background-color: var(--ranking-blue);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-repeat: repeat;
  background-size: 116px 116px;
}

.ranking-poster-v1 .ranking-poster-followers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ranking-poster-v1 .ranking-poster-follower {
  min-width: 0;
  text-align: center;
}

.ranking-poster-v1 .ranking-poster-follower > strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ranking-navy);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.ranking-poster-v1 .ranking-follower-medallion {
  position: relative;
  width: min(100%, 74px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ranking-cream);
}

.ranking-poster-v1 .ranking-follower-pattern {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
}

.ranking-poster-v1 .ranking-follower-pattern::before,
.ranking-poster-v1 .ranking-follower-pattern::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.ranking-poster-v1 .ranking-follower-pattern::after {
  background-image: radial-gradient(circle, var(--ranking-navy) 0 1px, transparent 1.2px);
  background-size: 5px 5px;
}

.ranking-poster-v1 .pattern-1 {
  background: linear-gradient(120deg, var(--ranking-lime) 0 49%, transparent 49%);
}

.ranking-poster-v1 .pattern-1::after {
  right: -12%;
  bottom: -4%;
  width: 77%;
  height: 62%;
  background-color: var(--ranking-blue);
}

.ranking-poster-v1 .pattern-2::before {
  top: -5%;
  left: -6%;
  width: 84%;
  height: 96%;
  background: var(--ranking-blue);
}

.ranking-poster-v1 .pattern-2::after {
  inset: 0;
}

.ranking-poster-v1 .pattern-3 {
  background: linear-gradient(125deg, var(--ranking-cream) 0 45%, var(--ranking-lime) 45% 74%, #f5a000 74%);
}

.ranking-poster-v1 .pattern-3::after {
  left: -11%;
  bottom: -18%;
  width: 75%;
  height: 57%;
}

.ranking-poster-v1 .pattern-4 {
  background: linear-gradient(125deg, var(--ranking-blue) 0 54%, var(--ranking-cream) 54%);
}

.ranking-poster-v1 .pattern-4::before {
  right: -16%;
  bottom: -8%;
  width: 64%;
  height: 76%;
  background: var(--ranking-navy);
}

.ranking-poster-v1 .pattern-4::after {
  top: -5%;
  left: -6%;
  width: 72%;
  height: 62%;
}

.ranking-poster-v1 .ranking-follower-medallion img {
  position: absolute;
  z-index: 3;
  top: 4%;
  left: 26%;
  width: 48%;
  max-width: none;
  height: auto;
  object-fit: contain;
}

.ranking-poster-v1 .rank-5 .ranking-follower-medallion img {
  transform: scaleX(-1);
}

.ranking-poster-v1 .rank-6 .ranking-follower-medallion img {
  left: 24%;
  width: 52%;
}

.ranking-poster-v1 .rank-7 .ranking-follower-medallion img {
  transform: scaleX(-1);
}

.ranking-poster-v1 .ranking-poster-my-rank {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  color: var(--ranking-navy);
  font-size: 15px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.ranking-poster-v1 .ranking-poster-my-rank i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ranking-yellow);
}

.ranking-poster-v1 .ranking-poster-my-rank strong {
  font-size: 1.14em;
  font-weight: 900;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav {
  position: relative;
  z-index: 30;
  height: auto !important;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  padding: 4px 14px calc(5px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background-color: var(--ranking-mint) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-repeat: repeat, repeat !important;
  background-size: 154px 154px, 96px 96px !important;
  box-shadow: none;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav::before {
  display: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button:hover,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button.active {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 42px 15px;
  align-content: center;
  justify-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #342326 !important;
  background: transparent !important;
  box-shadow: none;
  transform: none;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button::before {
  content: "";
  position: absolute;
  right: auto;
  bottom: 0;
  left: 50%;
  width: 19px !important;
  height: 3px !important;
  border-radius: 0;
  background: transparent !important;
  transform: translateX(-50%);
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button.active::before {
  background: var(--ranking-navy) !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-icon {
  width: 44px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .profile-poster-menu-svg {
  width: 40px;
  height: 40px;
  filter: none;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-label {
  color: #342326 !important;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.035em;
}

@media (max-width: 370px) {
  .ranking-poster-v1 .ranking-poster-heading h2 {
    font-size: 39px;
  }

  .ranking-poster-v1 .ranking-poster-heading {
    left: 5.5%;
  }

  .ranking-poster-v1 .ranking-poster-scope {
    gap: 17px;
    margin-top: 17px;
  }

  .ranking-poster-v1 .ranking-poster-scope button {
    font-size: 14px;
  }

  .ranking-poster-v1 .ranking-poster-lower {
    padding-right: 17px;
    padding-left: 17px;
  }

  .ranking-poster-v1 .ranking-poster-followers {
    gap: 5px;
  }

  .ranking-poster-v1 .ranking-poster-my-rank {
    font-size: 13px;
  }
}

/*
 * Ranking poster v2
 * The approved 866 × 1816 artwork is the visual source of truth. Interactive
 * ranking filters and the five app destinations remain as transparent,
 * accessible hotspots above the artwork.
 */
.page.ranking-preview-page {
  min-height: 0;
  place-items: start center;
  overflow: visible;
  padding: 0;
}

.phone.ranking-frame-phone.ranking-mono-preview {
  position: relative;
  width: min(100%, 430px);
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 866 / 1816;
  display: block;
  overflow: hidden;
  background: #ff473d !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .content {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-v1 {
  width: 100%;
  height: 100%;
  display: block !important;
  overflow: hidden;
  background:
    url("./assets/ui/ranking-approved-poster-v2.png?v=20260727-ranking-poster-v2")
    center / 100% 100% no-repeat !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-v1::after {
  display: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-upper,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-lower {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: transparent !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-lower {
  pointer-events: none;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-heading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-heading h2 {
  display: none;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope {
  position: absolute;
  z-index: 40;
  top: 16.2%;
  left: 4.5%;
  width: 22%;
  height: 5.2%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0;
  pointer-events: auto;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope button,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope button:hover,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope button.active {
  width: 100%;
  height: 100%;
  padding: 0;
  color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope button::after,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-scope button.active::after {
  display: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav {
  position: absolute;
  z-index: 50;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 7.3% !important;
  min-height: 0 !important;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button:hover,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button.active {
  width: 100%;
  height: 100%;
  display: block;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-icon,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-label,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button::before,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button::after {
  opacity: 0 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .profile-poster-menu-svg,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .profile-poster-menu-svg * {
  stroke: none !important;
}

/*
 * Ranking poster v3
 * Match the shared app viewport: restore the same 20px outer breathing room
 * and 872px maximum phone height used by the other signed-in pages. The
 * approved artwork scales into that frame so the complete menu remains visible.
 */
.page.ranking-preview-page {
  min-height: 100dvh;
  place-items: center;
  overflow: hidden;
  padding: 20px;
}

.phone.ranking-frame-phone.ranking-mono-preview {
  width: min(100%, 430px);
  height: min(872px, calc(100dvh - 40px)) !important;
  min-height: 0 !important;
  aspect-ratio: auto;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-poster-v1 {
  background-image:
    url("./assets/ui/ranking-approved-poster-v2.png?v=20260728-ranking-poster-v3") !important;
}

/*
 * Profile cleanup v22
 * Keep live title/account controls fully opaque over the approved poster.
 * This prevents the old baked badges and ingredient labels from bleeding
 * through while retaining the approved mint paper texture.
 */
.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-reference-title-track {
  box-sizing: border-box;
  grid-template-rows: repeat(2, 68px);
  grid-auto-columns: 68px;
  align-content: center;
  gap: 6px 12px;
  padding: 6px 34px 6px 5px;
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-reference-title-item {
  width: 68px;
  height: 68px;
  background-color: var(--profile-cream) !important;
  opacity: 1 !important;
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-reference-title-item b {
  font-size: 44px;
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-reference-title-item.locked b {
  opacity: .42;
  filter: grayscale(.72);
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-reference-title-item.locked span {
  opacity: .72;
}

.phone.profile-frame-phone.profile-mono-preview
  > .profile-poster-nav {
  background-color: #cfe9c5 !important;
  background-image: url("./assets/ui/profile-mint-texture-tile-v21.png") !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-size: 96px 96px !important;
}

.phone.profile-frame-phone.profile-mono-preview
  > .profile-poster-nav .tab-menu-icon,
.phone.profile-frame-phone.profile-mono-preview
  > .profile-poster-nav .tab-menu-label {
  opacity: 1 !important;
}

.phone.profile-frame-phone.profile-mono-preview
  > .profile-poster-nav button.active::after {
  display: block !important;
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-account-section,
.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-account-section .profile-section-card {
  isolation: isolate;
}

.phone.profile-frame-phone.profile-mono-preview
  .profile-reference-v14
  .profile-account-section {
  z-index: 4;
  background-color: #cfe9c5 !important;
}

/*
 * Ranking full-bleed v4
 * On phone-sized viewports use the same edge-to-edge frame as Home.
 */
@media (max-width: 560px) {
  .page.ranking-preview-page {
    min-height: 100dvh;
    place-items: stretch;
    padding: 0;
  }

  .phone.ranking-frame-phone.ranking-mono-preview {
    width: 100%;
    max-width: none;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

/*
 * Feed reference v1 — approved lavender one-meal feed.
 * Keep the photo area completely clean; texture is applied only to UI paper.
 */
.phone.feed-frame-phone.feed-mono-preview {
  --feed-reference-paper: #e9e1f8;
  --feed-reference-paper-deep: #ddd1f3;
  --feed-reference-ink: #301258;
  --feed-reference-line: #3b1a64;
  --feed-reference-red: #ef363c;
  grid-template-rows: 0 minmax(0, 1fr) calc(86px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--feed-reference-paper) !important;
  box-shadow: none !important;
}

.phone.feed-frame-phone.feed-mono-preview::before,
.phone.feed-frame-phone.feed-mono-preview::after {
  display: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .top {
  display: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .content {
  grid-row: 2 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--feed-reference-paper) !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.phone.feed-frame-phone.feed-mono-preview > .content::-webkit-scrollbar {
  display: none;
}

.feed-frame-phone .feed-reference-v1 {
  position: relative;
  width: 100%;
  min-height: 100%;
  padding: 0 !important;
  color: var(--feed-reference-ink);
  background-color: var(--feed-reference-paper);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-position: 0 0;
  background-repeat: repeat;
  background-size: 96px 96px;
  font-family: "Pretendard", "SUIT", sans-serif;
  isolation: isolate;
}

.feed-frame-phone .feed-reference-header {
  position: relative;
  z-index: 2;
  min-height: 116px;
  overflow: hidden;
  padding: 25px 24px 0;
  border-bottom: 1.5px solid var(--feed-reference-line);
  background-color: var(--feed-reference-paper);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
}

.feed-frame-phone .feed-reference-header h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: var(--feed-reference-ink);
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: clamp(38px, 10vw, 46px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.055em;
}

.feed-frame-phone .feed-reference-stripes {
  position: absolute;
  z-index: 0;
  top: -10px;
  right: 56px;
  width: 148px;
  height: 67px;
  background: repeating-linear-gradient(90deg, #6555c8 0 5px, transparent 5px 12px);
  transform: skewY(-1deg);
  opacity: .94;
}

.feed-frame-phone .feed-reference-dots {
  position: absolute;
  z-index: 1;
  top: -25px;
  right: -32px;
  width: 132px;
  height: 114px;
  border-radius: 0 0 0 80%;
  background-image: radial-gradient(circle, #6555c8 0 4px, transparent 4.5px);
  background-position: 0 0;
  background-size: 22px 22px;
  transform: rotate(-5deg);
}

.feed-frame-phone .feed-reference-controls {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 0;
  left: 24px;
  min-height: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.feed-frame-phone .feed-reference-v1 .feed-filter {
  width: auto !important;
  display: flex !important;
  align-items: flex-end;
  gap: 34px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button,
.feed-frame-phone .feed-reference-v1 .feed-filter button:hover,
.feed-frame-phone .feed-reference-v1 .feed-filter button.active {
  position: relative;
  min-width: 48px;
  min-height: 43px;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--feed-reference-ink) !important;
  box-shadow: none !important;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 15px !important;
  font-weight: 850;
  line-height: 1;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button + button {
  border-left: 0 !important;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  display: block;
  background: transparent;
}

.feed-frame-phone .feed-reference-v1 .feed-filter button.active::after {
  background: var(--feed-reference-line);
}

.feed-frame-phone .feed-record-button {
  min-width: 84px;
  min-height: 38px;
  margin-bottom: 8px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--feed-reference-ink);
  color: #fff9ef;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 15px;
  font-weight: 850;
  box-shadow: none;
}

.feed-frame-phone .feed-record-button:active {
  transform: translateY(1px) scale(.98);
}

.feed-frame-phone .feed-reference-v1 .feed-list {
  position: relative;
  z-index: 1;
  margin: 0 !important;
  padding: 0 0 2px !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post::before,
.feed-frame-phone .feed-reference-v1 .feed-post::after {
  display: none !important;
  content: none !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post + .feed-post {
  border-top: 1.5px solid var(--feed-reference-line) !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author {
  min-height: 68px;
  display: grid !important;
  grid-template-columns: 49px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 9px 24px !important;
  border: 0 !important;
  background-color: var(--feed-reference-paper) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.feed-frame-phone .feed-avatar-shell {
  position: relative;
  width: 47px;
  height: 47px;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  background: #fff8e7;
}

.feed-frame-phone .feed-avatar-shell img {
  position: absolute;
  display: block;
  max-width: none !important;
}

.feed-frame-phone .feed-avatar-female {
  position: relative;
  background: #fff5d5;
}

.feed-frame-phone .feed-avatar-female > i {
  position: absolute;
  display: block;
}

.feed-frame-phone .feed-avatar-female-hair {
  z-index: 1;
  top: 5px;
  left: 8px;
  width: 31px;
  height: 32px;
  border-radius: 48% 48% 42% 42%;
  background: #333238;
}

.feed-frame-phone .feed-avatar-female-face {
  z-index: 2;
  top: 10px;
  left: 12px;
  width: 23px;
  height: 25px;
  border-radius: 45% 45% 50% 50%;
  background: #ffc994;
}

.feed-frame-phone .feed-avatar-female-bangs {
  z-index: 3;
  top: 7px;
  left: 12px;
  width: 23px;
  height: 13px;
  border-radius: 55% 55% 38% 42%;
  background: #333238;
  clip-path: polygon(0 0, 100% 0, 95% 64%, 80% 46%, 67% 80%, 51% 51%, 36% 82%, 22% 50%, 4% 73%);
}

.feed-frame-phone .feed-avatar-female-eyes {
  z-index: 4;
  top: 21px;
  left: 18px;
  width: 3px;
  height: 4px;
  border-radius: 50%;
  background: #2b2540;
  box-shadow: 9px 0 0 #2b2540;
}

.feed-frame-phone .feed-avatar-female-shirt {
  z-index: 1;
  right: 7px;
  bottom: -9px;
  left: 7px;
  height: 22px;
  border-radius: 50% 50% 0 0;
  background: #f4bd20;
}

.feed-frame-phone .feed-avatar-jarin img {
  width: 50px !important;
  height: auto !important;
  left: -1px;
  top: 1px;
}

.feed-frame-phone .feed-avatar-other img {
  width: 54px !important;
  height: 54px !important;
  left: -4px;
  top: -2px;
  object-fit: cover;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author > div {
  min-width: 0;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author strong {
  display: block;
  overflow: hidden;
  margin: 0 0 3px !important;
  color: var(--feed-reference-ink) !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author span {
  display: block;
  overflow: hidden;
  color: #4a326d !important;
  font-size: 12.5px !important;
  font-weight: 520;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-frame-phone .feed-reference-v1 .feed-post-author em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(48, 18, 88, .1);
  color: var(--feed-reference-ink);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.feed-frame-phone .feed-reference-v1 .feed-post-photo {
  position: relative;
  z-index: 3;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1.7 / 1;
  display: block;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #eee;
  object-fit: cover;
  object-position: center;
  filter: none !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-actions {
  min-height: 51px;
  display: flex !important;
  align-items: center;
  gap: 44px;
  margin: 0 !important;
  padding: 0 30px !important;
  border: 0 !important;
  background-color: var(--feed-reference-paper) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-actions::after {
  display: none !important;
}

.feed-frame-phone .feed-reference-v1 .feed-post-actions button,
.feed-frame-phone .feed-reference-v1 .feed-post-actions button:hover,
.feed-frame-phone .feed-reference-v1 .feed-post-actions button.liked {
  position: relative;
  min-width: 0;
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--feed-reference-ink) !important;
  box-shadow: none !important;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 14px !important;
  font-weight: 560 !important;
}

.feed-frame-phone .feed-reference-v1 .feed-like-action > svg {
  width: 25px !important;
  height: 25px !important;
  color: var(--feed-reference-red) !important;
  fill: var(--feed-reference-red) !important;
  stroke: var(--feed-reference-red) !important;
  stroke-width: 1.35 !important;
}

.feed-frame-phone .feed-reference-v1 .feed-like-action.liked > svg {
  color: #d81e34 !important;
  fill: #d81e34 !important;
}

.feed-frame-phone .feed-comment-symbol {
  position: relative;
  width: 25px;
  height: 25px;
  display: block;
  border-radius: 50%;
  background: var(--feed-reference-ink);
}

.feed-frame-phone .feed-comment-symbol::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  background: var(--feed-reference-ink);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(7deg);
}

.feed-frame-phone .feed-reference-v1 .feed-empty {
  min-height: 260px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  color: var(--feed-reference-ink);
  text-align: center;
}

.feed-frame-phone .feed-dialog-layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(29, 10, 54, .48);
  backdrop-filter: blur(2px);
}

.feed-frame-phone .feed-dialog {
  width: min(100%, 430px);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  padding: 22px;
  border: 1.5px solid var(--feed-reference-line);
  border-radius: 24px 24px 8px 8px;
  background-color: var(--feed-reference-paper);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  color: var(--feed-reference-ink);
  box-shadow: 0 18px 55px rgba(30, 13, 53, .28);
}

.feed-frame-phone .feed-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.feed-frame-phone .feed-dialog > header span {
  display: block;
  margin-bottom: 3px;
  color: #695287;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .13em;
}

.feed-frame-phone .feed-dialog h3 {
  margin: 0;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 27px;
  font-weight: 400;
}

.feed-frame-phone .feed-dialog > header > button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(48, 18, 88, .2);
  border-radius: 50%;
  background: #fff9e9;
  color: var(--feed-reference-ink);
  font-size: 24px;
  line-height: 1;
}

.feed-frame-phone .feed-record-field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 850;
}

.feed-frame-phone .feed-record-field input,
.feed-frame-phone .feed-record-field textarea,
.feed-frame-phone .feed-comment-compose input {
  width: 100%;
  border: 1.5px solid rgba(48, 18, 88, .28);
  border-radius: 13px;
  outline: 0;
  background: rgba(255, 250, 235, .86);
  color: var(--feed-reference-ink);
  font: 600 14px/1.45 "Pretendard", "SUIT", sans-serif;
}

.feed-frame-phone .feed-record-field input {
  min-height: 47px;
  padding: 0 13px;
}

.feed-frame-phone .feed-record-field textarea {
  min-height: 84px;
  padding: 12px 13px;
  resize: vertical;
}

.feed-frame-phone .feed-record-photo-input {
  min-height: 174px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 14px;
  border: 1.5px dashed var(--feed-reference-line);
  border-radius: 16px;
  background: rgba(255, 250, 235, .6);
  cursor: pointer;
}

.feed-frame-phone .feed-record-photo-input > span {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 25px;
  text-align: center;
}

.feed-frame-phone .feed-record-photo-input b {
  font-size: 15px;
}

.feed-frame-phone .feed-record-photo-input small {
  color: #6a5587;
  font-size: 10px;
}

.feed-frame-phone .feed-record-photo-input img {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
}

.feed-frame-phone #feed-record-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.feed-frame-phone .feed-dialog-error {
  margin: 11px 0 0;
  color: #c82c47;
  font-size: 12px;
  font-weight: 750;
}

.feed-frame-phone .feed-dialog-primary {
  width: 100%;
  min-height: 49px;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: var(--feed-reference-ink);
  color: #fff9eb;
  font-size: 14px;
  font-weight: 900;
}

.feed-frame-phone .feed-comment-list {
  max-height: 390px;
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 14px;
}

.feed-frame-phone .feed-comment-list article {
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(255, 250, 235, .72);
}

.feed-frame-phone .feed-comment-list b {
  font-size: 12px;
}

.feed-frame-phone .feed-comment-list p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.feed-frame-phone .feed-comment-empty {
  padding: 25px 0;
  text-align: center;
}

.feed-frame-phone .feed-comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(48, 18, 88, .22);
}

.feed-frame-phone .feed-comment-compose input {
  min-height: 44px;
  padding: 0 12px;
}

.feed-frame-phone .feed-comment-compose button {
  border: 0;
  border-radius: 12px;
  background: var(--feed-reference-ink);
  color: #fff9eb;
  font-size: 12px;
  font-weight: 900;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs {
  position: relative;
  z-index: 12;
  grid-row: 3 !important;
  min-height: calc(86px + env(safe-area-inset-bottom)) !important;
  padding: 7px 15px max(8px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1.5px solid var(--feed-reference-line) !important;
  background-color: var(--feed-reference-paper) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
  box-shadow: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs::before {
  display: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button {
  min-height: 68px !important;
  gap: 2px !important;
  padding: 4px 0 7px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--feed-reference-ink) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:hover,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active {
  background: transparent !important;
  transform: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .tab-menu-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg {
  width: 39px !important;
  height: 39px !important;
  overflow: visible;
  stroke-width: 1.35 !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(1) {
  --menu-icon-line: #fff8e8;
  --menu-icon-fill: #fff8e8;
  --menu-icon-fill-soft: #fff8e8;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(2) {
  --menu-icon-line: #83c914;
  --menu-icon-fill: #83c914;
  --menu-icon-fill-soft: #83c914;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(3) {
  --menu-icon-line: #f5bd19;
  --menu-icon-fill: #f5bd19;
  --menu-icon-fill-soft: #fff7dc;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(4) {
  --menu-icon-line: #ee70bc;
  --menu-icon-fill: #ee70bc;
  --menu-icon-fill-soft: #ee70bc;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button:nth-child(5) {
  --menu-icon-line: #ed371c;
  --menu-icon-fill: #ed371c;
  --menu-icon-fill-soft: #ed371c;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg path,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-svg circle {
  stroke: var(--menu-icon-line) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-fill {
  fill: var(--menu-icon-fill) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-fill-soft,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-rice,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .menu-icon-egg-white {
  fill: var(--menu-icon-fill-soft) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs .tab-menu-label {
  color: var(--feed-reference-ink) !important;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 2px;
  left: 17px;
  height: 3px;
  display: block !important;
  border-radius: 0;
  background: var(--feed-reference-ink);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs button.active::before {
  display: none !important;
}

@media (max-width: 560px) {
  .page.mono-preview-page:has(.feed-frame-phone) {
    min-height: 100dvh;
    place-items: stretch;
    padding: 0 !important;
  }

  .phone.feed-frame-phone.feed-mono-preview {
    width: 100%;
    max-width: none;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

@media (max-width: 370px) {
  .feed-frame-phone .feed-reference-header {
    min-height: 108px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .feed-frame-phone .feed-reference-controls {
    right: 18px;
    left: 18px;
  }

  .feed-frame-phone .feed-reference-v1 .feed-post-author {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .feed-frame-phone .feed-reference-v1 .feed-post-actions {
    gap: 32px;
    padding-right: 24px !important;
    padding-left: 24px !important;
  }
}

/* ===== feed-reference-v2.css ===== */
/*
 * Bapstage feed — watercolor paper reference v3.
 * The 430 × 853 phone layout follows the supplied 891 × 1765 artwork.
 */
.phone.feed-frame-phone.feed-mono-preview {
  --feed-paper: #fbf5e9;
  --feed-paper-card: #fffaf0;
  --feed-ink: #3b1e10;
  --feed-coral: #e8755d;
  --feed-coral-deep: #dc5e47;
  --feed-blue: #8eb8d7;
  --feed-yellow: #efbb22;
  --feed-sage: #89a35c;
  width: min(100%, 430px);
  height: min(100dvh, 853px) !important;
  min-height: min(100dvh, 853px) !important;
  grid-template-rows: 0 minmax(0, 1fr) calc(76px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--feed-paper) !important;
  box-shadow: 0 18px 60px rgba(71, 49, 23, .14) !important;
}

.phone.feed-frame-phone.feed-mono-preview::before,
.phone.feed-frame-phone.feed-mono-preview::after,
.phone.feed-frame-phone.feed-mono-preview > .top {
  display: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .content {
  grid-row: 2 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--feed-paper) !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.phone.feed-frame-phone.feed-mono-preview > .content::-webkit-scrollbar {
  display: none;
}

.feed-frame-phone .feed-reference-v3 {
  position: relative;
  width: 100%;
  min-height: 1125px;
  padding: 0 0 26px !important;
  color: var(--feed-ink);
  background-color: var(--feed-paper) !important;
  background-image:
    radial-gradient(circle at 2.5% 25%, rgba(137, 163, 92, .92) 0 3px, transparent 3.5px),
    radial-gradient(circle at 5.5% 28%, rgba(137, 163, 92, .8) 0 4px, transparent 4.5px),
    radial-gradient(circle at 2% 31%, rgba(137, 163, 92, .72) 0 3px, transparent 3.5px),
    radial-gradient(circle at 98% 74%, rgba(232, 117, 93, .7) 0 3px, transparent 3.5px),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
  background-size: auto, auto, auto, auto, 112px 112px !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  isolation: isolate;
}

.feed-frame-phone .feed-reference-v3::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -40px;
  left: -88px;
  width: 310px;
  height: 205px;
  background:
    radial-gradient(ellipse at 56% 51%, rgba(252, 214, 91, .72) 0 37%, rgba(252, 214, 91, .45) 52%, transparent 72%),
    radial-gradient(circle at 79% 12%, rgba(252, 214, 91, .43) 0 18%, transparent 42%);
  filter: url("#none");
  opacity: .9;
  transform: rotate(-7deg);
  pointer-events: none;
}

.feed-frame-phone .feed-reference-header {
  position: relative;
  z-index: 2;
  height: 174px;
  min-height: 174px;
  overflow: visible;
  padding: 38px 42px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-kicker {
  position: relative;
  z-index: 3;
  display: block;
  margin: 0 0 5px;
  color: var(--feed-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.025em;
}

.feed-frame-phone .feed-reference-header h2 {
  position: relative;
  z-index: 3;
  margin: 0;
  color: var(--feed-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 45px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.045em;
}

.feed-frame-phone .feed-reference-header > p {
  position: relative;
  z-index: 3;
  margin: 5px 0 0;
  color: var(--feed-ink);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.feed-frame-phone .feed-reference-wash {
  display: none;
}

.feed-frame-phone .feed-reference-checker {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 34px;
  width: 42px;
  height: 42px;
  opacity: .78;
  background:
    linear-gradient(90deg, var(--feed-blue) 13px, transparent 13px 26px, var(--feed-blue) 26px 39px, transparent 39px) 0 0 / 39px 13px no-repeat,
    linear-gradient(90deg, transparent 13px, var(--feed-blue) 13px 26px, transparent 26px) 0 13px / 39px 13px no-repeat,
    linear-gradient(90deg, var(--feed-blue) 13px, transparent 13px 26px, var(--feed-blue) 26px 39px, transparent 39px) 0 26px / 39px 13px no-repeat;
  filter: blur(.15px);
  transform: rotate(1.5deg);
}

.feed-frame-phone .feed-reference-coral-dots,
.feed-frame-phone .feed-reference-green-dots {
  position: absolute;
  z-index: 2;
  display: block;
  border-radius: 50%;
}

.feed-frame-phone .feed-reference-coral-dots {
  top: 67px;
  right: 13px;
  width: 7px;
  height: 7px;
  background: rgba(232, 117, 93, .85);
  box-shadow: 20px -11px 0 rgba(232, 117, 93, .9), 30px 7px 0 rgba(232, 117, 93, .8);
}

.feed-frame-phone .feed-reference-green-dots {
  top: 124px;
  left: 9px;
  width: 7px;
  height: 7px;
  background: rgba(137, 163, 92, .82);
  box-shadow: 16px 18px 0 rgba(137, 163, 92, .78), -2px 37px 0 rgba(137, 163, 92, .78);
}

.feed-frame-phone .feed-reference-controls {
  position: absolute;
  z-index: 4;
  right: 21px;
  bottom: 13px;
  left: 43px;
  min-height: 38px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.feed-frame-phone .feed-reference-v3 .feed-filter {
  width: auto !important;
  display: flex !important;
  align-items: flex-end;
  gap: 29px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-v3 .feed-filter button,
.feed-frame-phone .feed-reference-v3 .feed-filter button:hover,
.feed-frame-phone .feed-reference-v3 .feed-filter button.active {
  position: relative;
  min-width: 45px;
  min-height: 36px;
  padding: 0 1px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--feed-ink) !important;
  box-shadow: none !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1;
}

.feed-frame-phone .feed-reference-v3 .feed-filter button::after {
  content: "";
  position: absolute;
  right: 2px;
  bottom: 2px;
  left: 2px;
  height: 4px;
  display: block;
  border-radius: 50% 40% 55% 35%;
  background: transparent;
  transform: rotate(-1deg);
}

.feed-frame-phone .feed-reference-v3 .feed-filter button.active::after {
  background: var(--feed-coral);
}

.feed-frame-phone .feed-record-button,
.feed-frame-phone .feed-record-button:hover {
  position: relative;
  width: 113px;
  min-width: 113px;
  height: 39px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 11px 1px 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--feed-coral) !important;
  color: #fffaf0 !important;
  clip-path: polygon(5% 8%, 28% 2%, 52% 5%, 75% 0, 96% 8%, 100% 48%, 95% 91%, 72% 98%, 49% 94%, 27% 100%, 4% 89%, 0 50%);
  box-shadow: none !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1;
}

.feed-frame-phone .feed-record-button b {
  margin-top: -2px;
  font-family: "Pretendard", sans-serif;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
}

.feed-frame-phone .feed-record-button:active {
  transform: translateY(1px) scale(.985);
}

.feed-frame-phone .feed-reference-v3 .feed-list {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 9px;
  margin: -12px 0 0 !important;
  padding: 0 22px 20px !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post {
  position: relative;
  min-height: 434px;
  overflow: hidden;
  margin: 0 !important;
  padding: 10px 16px 11px !important;
  border: 1px solid rgba(194, 164, 119, .35) !important;
  border-radius: 24px 19px 25px 22px !important;
  background-color: rgba(255, 250, 240, .97) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 3px 7px rgba(90, 64, 34, .15) !important;
  isolation: isolate;
}

.feed-frame-phone .feed-reference-v3 .feed-post:nth-child(even) {
  border-radius: 22px 25px 20px 26px !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post::before,
.feed-frame-phone .feed-reference-v3 .feed-post::after {
  display: none !important;
  content: none !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post + .feed-post {
  border-top: 1px solid rgba(194, 164, 119, .35) !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post-author {
  height: 61px;
  min-height: 61px;
  display: grid !important;
  grid-template-columns: 59px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 1px 4px !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-avatar-shell {
  position: relative;
  width: 57px;
  height: 57px;
  display: block;
  overflow: hidden;
  border: 0 !important;
  border-radius: 50%;
  background: rgba(250, 210, 83, .48);
  box-shadow: inset 0 0 0 1px rgba(225, 178, 51, .2);
}

.feed-frame-phone .feed-avatar-shell img {
  position: absolute;
  z-index: 1;
  top: -2px;
  left: -2px;
  width: 62px !important;
  height: auto !important;
  max-width: none !important;
  display: block;
}

.feed-frame-phone .feed-avatar-gobi {
  background: rgba(231, 173, 162, .34);
}

.feed-frame-phone .feed-avatar-gobi img {
  top: -2px;
  left: -3px;
  width: 63px !important;
}

.feed-frame-phone .feed-avatar-shirt-layer {
  z-index: 2 !important;
}

.feed-frame-phone .feed-avatar-other img {
  top: 0;
  left: 0;
  width: 57px !important;
  height: 57px !important;
  object-fit: cover;
}

.feed-frame-phone .feed-reference-v3 .feed-post-author > div {
  min-width: 0;
  align-self: center;
}

.feed-frame-phone .feed-reference-v3 .feed-post-author strong {
  display: block;
  overflow: hidden;
  margin: 0 0 6px !important;
  color: var(--feed-ink) !important;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-frame-phone .feed-reference-v3 .feed-post-author span {
  display: block;
  overflow: hidden;
  color: var(--feed-ink) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-frame-phone .feed-post-more,
.feed-frame-phone .feed-post-more:hover {
  width: 22px;
  height: 38px;
  align-self: start;
  margin-top: 5px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--feed-ink) !important;
  box-shadow: none !important;
  font-family: "Pretendard", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: .7;
}

.feed-frame-phone .feed-reference-v3 .feed-post-author em {
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(232, 117, 93, .12);
  color: var(--feed-coral-deep);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.feed-frame-phone .feed-post-photo-frame {
  position: relative;
  z-index: 2;
  height: 269px;
  margin: 0;
  padding: 6px;
  background: #fffdf7;
  box-shadow: 0 2px 5px rgba(80, 57, 27, .14);
}

.feed-frame-phone .feed-reference-v3 .feed-post-photo {
  position: relative;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  display: block;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #efe4cf;
  object-fit: cover;
  object-position: center;
  filter: saturate(.96) contrast(.97) !important;
}

.feed-frame-phone .feed-tape {
  position: absolute;
  z-index: 4;
  display: block;
  width: 66px;
  height: 25px;
  background-color: rgba(177, 203, 222, .65);
  background-image:
    linear-gradient(120deg, rgba(255, 255, 255, .23), transparent 44%, rgba(91, 135, 171, .1)),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: auto, 74px 74px;
  clip-path: polygon(1% 16%, 97% 0, 100% 84%, 3% 100%);
  pointer-events: none;
}

.feed-frame-phone .feed-tape-left {
  top: -8px;
  left: -11px;
  transform: rotate(-31deg);
}

.feed-frame-phone .feed-tape-right {
  right: -12px;
  bottom: -8px;
  transform: rotate(35deg);
}

.feed-frame-phone .feed-reference-v3 .feed-post:nth-child(even) .feed-tape {
  background-color: rgba(231, 171, 171, .58);
}

.feed-frame-phone .feed-reference-v3 .feed-post:nth-child(even) .feed-tape-left {
  top: -7px;
  left: -12px;
  transform: rotate(30deg);
}

.feed-frame-phone .feed-post-caption {
  min-height: 32px;
  margin: 0 !important;
  padding: 11px 10px 0;
  color: var(--feed-ink);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.feed-frame-phone .feed-reference-v3 .feed-post-actions {
  min-height: 48px;
  width: 220px;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 4px 10px 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post-actions::after {
  display: none !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post-actions button,
.feed-frame-phone .feed-reference-v3 .feed-post-actions button:hover,
.feed-frame-phone .feed-reference-v3 .feed-post-actions button.liked {
  position: relative;
  min-width: 0;
  min-height: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--feed-ink) !important;
  box-shadow: none !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap;
}

.feed-frame-phone .feed-reference-v3 .feed-like-action > svg {
  width: 28px !important;
  height: 28px !important;
  color: var(--feed-coral-deep) !important;
  fill: rgba(232, 117, 93, .18) !important;
  stroke: var(--feed-coral-deep) !important;
  stroke-width: 1.6 !important;
  filter: drop-shadow(.4px .5px 0 rgba(146, 55, 39, .15));
}

.feed-frame-phone .feed-reference-v3 .feed-like-action.liked > svg {
  fill: var(--feed-coral) !important;
}

.feed-frame-phone .feed-comment-symbol {
  position: relative;
  width: 26px !important;
  height: 22px !important;
  display: block;
  border: 1.7px solid #376ba9;
  border-radius: 48% 48% 45% 46%;
  background: rgba(142, 184, 215, .42) !important;
  transform: rotate(-4deg);
}

.feed-frame-phone .feed-comment-symbol::after {
  content: "";
  position: absolute;
  left: 3px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  border-bottom: 1.7px solid #376ba9;
  border-left: 1.7px solid #376ba9;
  background: #d5e3ec;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  transform: rotate(-13deg);
}

.feed-frame-phone .feed-stage-stamp {
  position: absolute;
  z-index: 4;
  right: 21px;
  bottom: 5px;
  width: 97px;
  height: 56px;
  display: grid;
  place-content: center;
  justify-items: center;
  border: 2px solid var(--feed-yellow);
  border-radius: 17px 13px 19px 14px;
  color: var(--feed-yellow);
  font-family: "Pretendard", sans-serif;
  line-height: 1;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px rgba(255, 250, 240, .7);
}

.feed-frame-phone .feed-stage-stamp::before,
.feed-frame-phone .feed-stage-stamp::after {
  content: "❧";
  position: absolute;
  top: 22px;
  font-size: 17px;
}

.feed-frame-phone .feed-stage-stamp::before {
  left: -4px;
  transform: rotate(-75deg);
}

.feed-frame-phone .feed-stage-stamp::after {
  right: -4px;
  transform: scaleX(-1) rotate(-75deg);
}

.feed-frame-phone .feed-stage-stamp small {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -.03em;
}

.feed-frame-phone .feed-stage-stamp strong {
  margin-top: 2px;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.05em;
}

.feed-frame-phone .feed-stage-stamp > i {
  display: none;
}

.feed-frame-phone .feed-reference-v3 .feed-empty {
  min-height: 300px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 30px;
  border-radius: 22px;
  background: rgba(255, 250, 240, .9);
  color: var(--feed-ink);
  text-align: center;
}

/* The recording and comment sheets retain every interaction and use the same paper language. */
.feed-frame-phone .feed-dialog-layer {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  background: rgba(54, 40, 26, .48);
  backdrop-filter: blur(3px);
}

.feed-frame-phone .feed-dialog {
  width: min(100%, 398px);
  max-height: min(720px, calc(100dvh - 32px));
  overflow: auto;
  padding: 22px;
  border: 1px solid rgba(194, 164, 119, .42);
  border-radius: 25px 22px 12px 14px;
  background-color: var(--feed-paper-card) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  color: var(--feed-ink);
  box-shadow: 0 18px 55px rgba(45, 28, 11, .28);
}

.feed-frame-phone .feed-dialog > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.feed-frame-phone .feed-dialog > header span {
  display: block;
  margin-bottom: 3px;
  color: var(--feed-coral-deep);
  font: 850 10px/1 "Pretendard", sans-serif;
  letter-spacing: .13em;
}

.feed-frame-phone .feed-dialog h3 {
  margin: 0;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 27px;
  font-weight: 400;
}

.feed-frame-phone .feed-dialog > header > button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(59, 30, 16, .18);
  border-radius: 50%;
  background: #fff9eb;
  color: var(--feed-ink);
  font-size: 24px;
  line-height: 1;
}

.feed-frame-phone .feed-record-field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 850;
}

.feed-frame-phone .feed-record-field input,
.feed-frame-phone .feed-record-field textarea,
.feed-frame-phone .feed-comment-compose input {
  width: 100%;
  border: 1px solid rgba(177, 137, 91, .4);
  border-radius: 13px;
  outline: 0;
  background: rgba(255, 252, 244, .92);
  color: var(--feed-ink);
  font: 650 14px/1.45 "Bap Gowun", "Pretendard", sans-serif;
}

.feed-frame-phone .feed-record-field input {
  min-height: 47px;
  padding: 0 13px;
}

.feed-frame-phone .feed-record-field textarea {
  min-height: 84px;
  padding: 12px 13px;
  resize: vertical;
}

.feed-frame-phone .feed-record-photo-input {
  min-height: 174px;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: 14px;
  border: 1px dashed var(--feed-coral);
  border-radius: 16px;
  background: rgba(255, 250, 235, .62);
  cursor: pointer;
}

.feed-frame-phone .feed-record-photo-input > span {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 25px;
  text-align: center;
}

.feed-frame-phone .feed-record-photo-input b {
  font-size: 15px;
}

.feed-frame-phone .feed-record-photo-input small {
  color: #80644e;
  font-size: 10px;
}

.feed-frame-phone .feed-record-photo-input img {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
}

.feed-frame-phone #feed-record-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.feed-frame-phone .feed-dialog-error {
  margin: 11px 0 0;
  color: #c84937;
  font-size: 12px;
  font-weight: 750;
}

.feed-frame-phone .feed-dialog-primary,
.feed-frame-phone .feed-comment-compose button {
  border: 0;
  background: var(--feed-coral);
  color: #fffaf0;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-weight: 900;
}

.feed-frame-phone .feed-dialog-primary {
  width: 100%;
  min-height: 49px;
  margin-top: 16px;
  border-radius: 15px;
  clip-path: polygon(2% 8%, 28% 2%, 52% 6%, 78% 1%, 98% 8%, 100% 50%, 97% 92%, 74% 98%, 50% 94%, 25% 100%, 2% 91%, 0 50%);
  font-size: 14px;
}

.feed-frame-phone .feed-comment-list {
  max-height: 390px;
  display: grid;
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 14px;
}

.feed-frame-phone .feed-comment-list article {
  padding: 12px 14px;
  border-radius: 15px;
  background: rgba(248, 231, 194, .42);
}

.feed-frame-phone .feed-comment-list b {
  font-size: 12px;
}

.feed-frame-phone .feed-comment-list p {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.feed-frame-phone .feed-comment-empty {
  padding: 25px 0;
  text-align: center;
}

.feed-frame-phone .feed-comment-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(177, 137, 91, .28);
}

.feed-frame-phone .feed-comment-compose input {
  min-height: 44px;
  padding: 0 12px;
}

.feed-frame-phone .feed-comment-compose button {
  border-radius: 12px;
  font-size: 12px;
}

/* Feed navigation: same watercolor icon system, exact paper bar proportions. */
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav {
  position: relative;
  z-index: 20;
  grid-row: 3 !important;
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  padding: 8px 17px calc(7px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(190, 155, 111, .34) !important;
  background-color: rgba(255, 250, 240, .985) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 -2px 8px rgba(90, 64, 34, .08) !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:hover,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button.active {
  position: relative;
  min-height: 60px !important;
  grid-template-rows: 35px 14px !important;
  align-content: center;
  gap: 2px !important;
  padding: 1px 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--feed-ink) !important;
  transform: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav .tab-menu-icon {
  width: 50px !important;
  height: 50px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav .menu-icon-svg {
  width: 48px !important;
  height: 48px !important;
  overflow: visible;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:nth-child(1) {
  --menu-icon-line: #5c4a3a;
  --menu-icon-fill: #fff9ec;
  --menu-icon-fill-soft: #fff9ec;
  --menu-icon-highlight: #efc549;
  --menu-icon-detail: #e8755d;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:nth-child(2) {
  --menu-icon-line: #617c46;
  --menu-icon-fill: #a7c97a;
  --menu-icon-fill-soft: #a7c97a;
  --menu-icon-detail: #8eb75f;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:nth-child(3) {
  --menu-icon-line: #6b563e;
  --menu-icon-fill: #efc553;
  --menu-icon-fill-soft: #fff5d3;
  --menu-icon-highlight: #efc553;
  --menu-icon-detail: #6b563e;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:nth-child(4) {
  --menu-icon-line: #95658e;
  --menu-icon-fill: #d88acb;
  --menu-icon-fill-soft: #e4a2d8;
  --menu-icon-detail: #d88acb;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button:nth-child(5) {
  --menu-icon-line: #a54d3e;
  --menu-icon-fill: #de735f;
  --menu-icon-fill-soft: #de735f;
  --menu-icon-detail: #de735f;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav .tab-menu-label,
.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button.active .tab-menu-label {
  color: var(--feed-ink) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  opacity: 1 !important;
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button.active::after {
  content: "";
  position: absolute;
  right: calc(50% - 14px);
  bottom: 1px;
  left: auto;
  width: 28px;
  height: 4px;
  display: block !important;
  border-radius: 50% 45% 55% 40%;
  background: var(--feed-coral);
  transform: rotate(-1deg);
}

.phone.feed-frame-phone.feed-mono-preview > .editorial-tabs.feed-poster-nav button.active::before {
  display: none !important;
}

@media (max-width: 560px) {
  .page.mono-preview-page:has(.feed-frame-phone) {
    min-height: 100dvh;
    place-items: stretch;
    padding: 0 !important;
  }

  .phone.feed-frame-phone.feed-mono-preview {
    width: 100%;
    max-width: none;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

@media (max-width: 370px) {
  .feed-frame-phone .feed-reference-header {
    padding-right: 31px !important;
    padding-left: 31px !important;
  }

  .feed-frame-phone .feed-reference-controls {
    right: 16px;
    left: 32px;
  }

  .feed-frame-phone .feed-record-button,
  .feed-frame-phone .feed-record-button:hover {
    width: 104px;
    min-width: 104px;
  }

  .feed-frame-phone .feed-reference-v3 .feed-list {
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  .feed-frame-phone .feed-reference-v3 .feed-post {
    padding-right: 13px !important;
    padding-left: 13px !important;
  }
}

/* ===== character-maker.css ===== */
/* Approved watercolor Jarin character maker — reference-locked 2026-07-29 */
@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Regular-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Bold-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --maker-ink: #4a2d1b;
  --maker-coral: #ef765c;
  --maker-paper: #fcf7e9;
}

.character-select-shell.character-story-shell:has(.character-maker-page) {
  min-height: 100svh;
  height: 100svh;
  padding: 0;
  place-items: start center;
  overflow: hidden;
  background: #f7f2e5;
}

.character-select-page.character-story-page.character-maker-page {
  width: min(430px, 100vw);
  height: 100svh;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: var(--maker-ink);
  background: var(--maker-paper);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.character-maker-layout {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  overflow: hidden;
  color: var(--maker-ink);
  background:
    url("./assets/ui/character-maker-approved-watercolor-v1.png?v=20260729-character-maker-stability-v4")
    center / 100% 100% no-repeat;
}

.character-maker-layout::before,
.character-maker-layout::after {
  content: none;
}

/* The approved header is baked into the reference layer. The real elements remain
   in the same places as accessible interaction targets. */
.character-maker-layout .character-story-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.35%;
  min-height: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 18% 64% 18%;
  align-items: center;
  border: 0;
  background: transparent;
}

.character-maker-layout .character-story-header::after {
  content: none;
}

.character-maker-layout .character-story-header > span,
.character-maker-layout .character-story-header > b {
  opacity: 0;
  pointer-events: none;
}

.character-maker-layout .character-story-header > button {
  width: 66px;
  height: 64px;
  margin: 0;
  padding: 0;
  justify-self: start;
  color: transparent;
  background: transparent;
  border: 0;
  box-shadow: none;
  cursor: pointer;
}

.character-maker-layout .character-story-header > button svg {
  opacity: 0;
}

.character-maker-main {
  display: contents;
}

.character-maker-preview {
  position: absolute;
  z-index: 2;
  top: 7.24%;
  left: 0;
  width: 100%;
  height: 55.37%;
  overflow: hidden;
}

.character-maker-preview::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  display: none;
  background:
    url("./assets/ui/interactive/character-maker-preview-clean-v2.png?v=20260729-character-maker-stability-v4")
    center / 100% 100% no-repeat;
  pointer-events: none;
}

.character-maker-layout.is-custom-style .character-maker-preview::before {
  display: block;
}

.character-maker-preview::after,
.character-maker-motif {
  display: none;
}

.character-maker-figure {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 50%;
  width: 55.7%;
  height: 84%;
  display: block;
  transform: translateX(-50%);
}

.character-maker-layout.is-default-style .character-maker-figure {
  opacity: 0;
  pointer-events: none;
}

.character-maker-figure > img,
.character-maker-figure > i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.character-maker-figure > img {
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
}

.character-maker-figure > i {
  z-index: 2;
  pointer-events: none;
}

.character-maker-shirt-tint {
  background: var(--maker-shirt);
  -webkit-mask: var(--maker-shirt-mask) center / contain no-repeat;
  mask: var(--maker-shirt-mask) center / contain no-repeat;
  mix-blend-mode: color;
  opacity: .96;
}

.character-maker-figure.default-shirt .character-maker-shirt-tint {
  display: none;
}

/* Exact watercolor control panel from the approved artwork. */
.character-maker-controls {
  position: absolute;
  z-index: 10;
  top: 62.5%;
  left: 0;
  width: 100%;
  height: 28.95%;
  min-width: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 33.5% 30.5% 36%;
  overflow: hidden;
  color: var(--maker-ink);
  background:
    url("./assets/ui/interactive/character-maker-controls-clean-v2.png?v=20260729-character-maker-stability-v4")
    center / 100% 100% no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.character-maker-layout.is-default-style .character-maker-controls {
  background: transparent;
}

.character-maker-controls::before,
.character-maker-controls::after {
  content: none;
}

.character-maker-controls fieldset {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 6.7% 0 24.3%;
  display: flex;
  align-items: center;
  border: 0;
}

.character-maker-controls legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.character-maker-hair-options {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 1.5%;
}

.character-maker-hair-options button,
.character-maker-color-options button {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
}

.character-maker-hair-options button {
  width: 100%;
  max-width: 54px;
  aspect-ratio: 1;
  justify-self: center;
}

.character-maker-hair-options button::after,
.character-maker-color-options button::after {
  content: "";
  position: absolute;
  inset: -3px;
  opacity: 0;
  border: 2px solid #ef765c;
  border-radius: 48% 52% 45% 55% / 52% 46% 54% 48%;
  transform: rotate(-3deg);
  pointer-events: none;
}

.character-maker-hair-options button.active::after,
.character-maker-color-options button.active::after {
  opacity: 1;
}

.character-maker-layout.is-default-style .character-maker-hair-options button.active::after,
.character-maker-layout.is-default-style .character-maker-color-options button.active::after,
.character-maker-layout.is-default-style .character-maker-hair-options button.active::before,
.character-maker-layout.is-default-style .character-maker-color-options button.active::before {
  opacity: 0;
}

.character-maker-hair-options button.active::before,
.character-maker-color-options button.active::before {
  content: "";
  position: absolute;
  z-index: 3;
  right: 10%;
  bottom: -7px;
  left: 10%;
  height: 3px;
  border-radius: 50%;
  background: #ef765c;
  transform: rotate(-2deg);
  pointer-events: none;
}

.character-maker-hair-options small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hair-chip {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.character-maker-color-options {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13.5px;
}

.character-maker-color-options button {
  width: 43px;
  max-width: 14.5%;
  aspect-ratio: 1;
  flex: 0 0 auto;
}

.character-maker-color-options button > span {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
}

.character-maker-controls fieldset:nth-of-type(3) .character-maker-color-options {
  transform: translateY(-11px);
}

.character-maker-hair-options button:focus-visible,
.character-maker-color-options button:focus-visible,
.character-maker-select:focus-visible,
.character-maker-layout .character-story-header > button:focus-visible {
  outline: 2px solid #ef765c;
  outline-offset: 3px;
}

/* The approved coral brushstroke CTA is also baked into the reference image. */
.character-maker-select {
  position: absolute;
  z-index: 20;
  right: 4.6%;
  bottom: 2.35%;
  left: 4.6%;
  width: auto;
  height: 6.55%;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}

.character-maker-select::before,
.character-maker-select::after {
  content: none;
}

.character-maker-select > span,
.character-maker-select > svg {
  opacity: 0;
}

.character-maker-select:active {
  transform: translateY(1px);
}

.character-pick-jarin .character-pick-art img {
  max-height: 100%;
}

.character-confirm-avatar img[src*="jarin-watercolor"] {
  object-fit: contain;
  object-position: center top;
  transform: scale(1.45) translateY(14%);
}

@media (min-width: 621px) {
  .character-select-page.character-story-page.character-maker-page {
    width: min(430px, 47.15svh);
    height: min(912px, 100svh);
    aspect-ratio: 430 / 912;
  }
}

/* Approved watercolor character-selection and final-check dialogs — 2026-07-29 */
.character-pick-smile-cover {
  position: absolute;
  z-index: 1;
  top: 66.3%;
  left: 7.4%;
  width: 40.8%;
  height: 5.8%;
  display: block;
  opacity: 1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 244, 196, .98) 0 58%, rgba(255, 244, 196, .82) 72%, rgba(255, 244, 196, 0) 100%);
  filter: blur(.25px);
  pointer-events: none;
  transition: opacity .18s ease;
}

.character-pick-poster-layout.is-selected-jarin .character-pick-smile-cover {
  opacity: 0;
}

.character-pick-poster-gobi::after {
  content: "";
  position: absolute;
  right: 11%;
  bottom: 20.5%;
  width: 66%;
  height: 12%;
  opacity: 0;
  border-bottom: 4px solid rgba(239, 118, 92, .92);
  border-radius: 0 0 58% 58%;
  transform: rotate(-2deg);
  filter: url("#none");
  pointer-events: none;
  transition: opacity .18s ease;
}

.character-pick-poster-layout.is-selected-gobi .character-pick-poster-gobi::after {
  opacity: 1;
}

.character-choice-backdrop,
.character-confirm-backdrop {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 28px 24px max(28px, env(safe-area-inset-bottom));
  background: rgba(55, 42, 30, .52);
  -webkit-backdrop-filter: blur(1.4px) saturate(.84);
  backdrop-filter: blur(1.4px) saturate(.84);
  animation: watercolorDialogFade .2s ease-out both;
}

.character-choice-dialog,
.character-confirm-dialog.character-final-confirm {
  position: relative;
  isolation: isolate;
  width: min(100%, 358px);
  margin: 0;
  padding: 79px 28px 25px;
  color: #4a2d1b;
  background:
    linear-gradient(rgba(255, 252, 242, .91), rgba(255, 250, 235, .94)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 140% auto no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: polygon(
    1.2% 1.8%, 9% .8%, 18% 1.6%, 29% .6%, 39% 1.4%, 50% .7%,
    61% 1.6%, 72% .6%, 82% 1.4%, 91% .7%, 99% 1.8%,
    98.6% 13%, 99.2% 25%, 98.7% 38%, 99.3% 51%, 98.8% 64%,
    99.1% 77%, 98.4% 89%, 99% 98.3%,
    89% 99.2%, 79% 98.6%, 69% 99.4%, 58% 98.7%, 48% 99.3%,
    37% 98.5%, 27% 99.2%, 16% 98.6%, 7% 99.3%, 1% 98.1%,
    1.5% 87%, .8% 75%, 1.3% 63%, .7% 51%, 1.4% 39%,
    .8% 27%, 1.3% 14%
  );
  text-align: center;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  animation: watercolorDialogRise .34s cubic-bezier(.2, .85, .32, 1) both;
}

.character-choice-dialog::before,
.character-confirm-dialog.character-final-confirm::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 9px -4px -8px 8px;
  opacity: .32;
  background: #ef765c;
  clip-path: inherit;
  pointer-events: none;
}

.character-choice-dialog::after,
.character-confirm-dialog.character-final-confirm::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .32;
  background:
    radial-gradient(circle at 8% 21%, rgba(239, 118, 92, .44) 0 2px, transparent 2.4px) 0 0 / 19px 19px,
    radial-gradient(circle at 92% 76%, rgba(137, 177, 218, .36) 0 1.6px, transparent 2px) 0 0 / 17px 17px;
  -webkit-mask: linear-gradient(#0000, #000 22% 78%, #0000);
  mask: linear-gradient(#0000, #000 22% 78%, #0000);
  pointer-events: none;
}

.character-choice-portrait,
.character-confirm-avatar.character-confirm-maker {
  position: absolute;
  z-index: 3;
  top: -53px;
  left: 50%;
  width: 112px;
  height: 112px;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 245, 199, .98), rgba(247, 222, 145, .9) 70%, rgba(239, 118, 92, .26));
  border: 0;
  border-radius: 48% 52% 47% 53% / 51% 46% 54% 49%;
  box-shadow: 0 0 0 7px rgba(255, 250, 235, .9);
  transform: translateX(-50%) rotate(-1deg);
}

.character-choice-portrait img {
  position: absolute;
  width: 350px;
  max-width: none;
  height: auto;
  display: block;
  pointer-events: none;
}

.character-choice-jarin .character-choice-portrait img {
  top: -211px;
  left: -63px;
}

.character-choice-gobi .character-choice-portrait img {
  top: -222px;
  left: -187px;
}

.character-choice-kicker,
.character-confirm-dialog.character-final-confirm .character-confirm-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 9px 4px;
  color: #ef765c;
  background: rgba(255, 239, 197, .74);
  border: 0;
  border-radius: 45% 55% 48% 52% / 55% 45% 55% 45%;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1;
}

.character-choice-dialog h2,
.character-confirm-dialog.character-final-confirm h2 {
  margin: 0;
  color: #4a2d1b;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: clamp(27px, 7.2vw, 32px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.15;
}

.character-choice-dialog > p,
.character-confirm-dialog.character-final-confirm > p {
  margin: 15px 0 0;
  color: #5e4838;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.55;
}

.character-choice-dialog > p strong {
  color: #ef765c;
  font-weight: 800;
}

.character-choice-dialog > small,
.character-confirm-dialog.character-final-confirm > small {
  position: relative;
  display: block;
  margin: 18px 0 0;
  padding: 18px 8px 0;
  color: #745e4d;
  border: 0;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.55;
}

.character-choice-dialog > small::before,
.character-confirm-dialog.character-final-confirm > small::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 2px;
  opacity: .66;
  background: repeating-linear-gradient(90deg, #ef765c 0 8px, transparent 8px 14px);
}

.character-choice-dialog > small b {
  color: #ef765c;
  font-weight: 800;
}

.character-choice-actions,
.character-confirm-dialog.character-final-confirm .character-confirm-actions {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 10px;
  margin-top: 22px;
}

.character-choice-actions button,
.character-confirm-dialog.character-final-confirm .character-confirm-actions button {
  min-height: 50px;
  margin: 0;
  padding: 7px 10px;
  color: #694d3a;
  background: rgba(255, 250, 236, .62);
  border: 1.5px solid rgba(239, 118, 92, .68);
  border-radius: 48% 52% 47% 53% / 18% 20% 16% 22%;
  box-shadow: none;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  cursor: pointer;
}

.character-choice-actions button:last-child,
.character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  color: #fffaf0;
  background:
    linear-gradient(rgba(239, 118, 92, .94), rgba(239, 118, 92, .94)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 66% / 210% auto;
  border: 0;
  border-radius: 46% 54% 49% 51% / 22% 18% 24% 20%;
  clip-path: polygon(1% 12%, 7% 5%, 18% 8%, 30% 3%, 43% 7%, 56% 4%, 70% 8%, 83% 3%, 96% 8%, 100% 22%, 98% 48%, 100% 76%, 95% 91%, 82% 96%, 68% 92%, 54% 97%, 39% 93%, 25% 97%, 10% 92%, 1% 82%, 3% 54%);
}

.character-choice-actions button:focus-visible,
.character-confirm-dialog.character-final-confirm .character-confirm-actions button:focus-visible {
  outline: 3px solid rgba(239, 118, 92, .72);
  outline-offset: 3px;
}

.character-confirm-dialog.character-final-confirm {
  padding-top: 78px;
}

.character-confirm-avatar.character-confirm-maker {
  display: block;
}

.character-confirm-maker-figure {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 76px;
  height: 134px;
  display: block;
  transform: translateX(-50%);
}

.character-confirm-maker-figure > img,
.character-confirm-maker-figure > i {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.character-confirm-maker-figure > img {
  z-index: 1;
  object-fit: contain;
  object-position: center top;
  transform: none;
  filter: none;
}

.character-confirm-shirt-tint {
  z-index: 2;
  background: var(--maker-shirt);
  -webkit-mask: var(--maker-shirt-mask) center / contain no-repeat;
  mask: var(--maker-shirt-mask) center / contain no-repeat;
  mix-blend-mode: color;
  opacity: .96;
}

.character-confirm-dialog.character-final-confirm h2 {
  font-size: clamp(28px, 7.4vw, 33px);
}

@keyframes watercolorDialogFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes watercolorDialogRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 370px) {
  .character-choice-backdrop,
  .character-confirm-backdrop {
    padding-inline: 16px;
  }

  .character-choice-dialog,
  .character-confirm-dialog.character-final-confirm {
    padding-right: 20px;
    padding-left: 20px;
  }

  .character-choice-actions button,
  .character-confirm-dialog.character-final-confirm .character-confirm-actions button {
    font-size: 11px;
  }
}

/* Keep Gobi's approved watercolor typography ahead of the global app font lock. */
#app .character-maker-layout.is-gobi-maker .character-story-header > span {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  font-family: "Bap Gowun", sans-serif !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options small,
#app .character-maker-layout.is-gobi-maker .character-maker-select > span {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

/* Gobi maker — same watercolor structure as Jarin, with live Gobi artwork. */
.character-maker-layout.is-gobi-maker {
  background:
    linear-gradient(rgba(255, 252, 242, .72), rgba(255, 250, 236, .72)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover no-repeat,
    #fcf7e9;
}

.character-maker-layout.is-gobi-maker::before,
.character-maker-layout.is-gobi-maker::after {
  content: "";
  position: absolute;
  z-index: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.character-maker-layout.is-gobi-maker::before {
  top: 7.8%;
  left: -9%;
  width: 34%;
  aspect-ratio: 1;
  opacity: .72;
  background:
    radial-gradient(circle at 48% 48%, rgba(247, 214, 117, .66) 0 48%, rgba(247, 214, 117, .2) 69%, transparent 74%);
  filter: blur(.2px);
}

.character-maker-layout.is-gobi-maker::after {
  top: 51%;
  right: -12%;
  width: 39%;
  aspect-ratio: 1;
  opacity: .56;
  background:
    radial-gradient(circle at 50% 50%, rgba(188, 219, 233, .7) 0 46%, rgba(188, 219, 233, .18) 68%, transparent 74%);
}

.character-maker-layout.is-gobi-maker .character-story-header {
  padding: 0 4%;
  grid-template-columns: 17% 66% 17%;
  box-sizing: border-box;
}

.character-maker-layout.is-gobi-maker .character-story-header::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 0;
  left: 4%;
  height: 2px;
  opacity: .7;
  background: repeating-linear-gradient(90deg, #ef765c 0 7px, transparent 7px 13px);
}

.character-maker-layout.is-gobi-maker .character-story-header > span,
.character-maker-layout.is-gobi-maker .character-story-header > b {
  opacity: 1;
  pointer-events: auto;
}

.character-maker-layout.is-gobi-maker .character-story-header > span {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--maker-ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: clamp(25px, 7vw, 31px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  text-align: center;
  white-space: nowrap;
  transform: none;
}

.character-maker-layout.is-gobi-maker .character-story-header > b {
  display: block;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--maker-ink);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-align: right;
  white-space: nowrap;
  transform: none;
}

.character-maker-layout.is-gobi-maker .character-story-header > button {
  width: 48px;
  height: 48px;
  color: var(--maker-ink);
}

.character-maker-layout.is-gobi-maker .character-story-header > button svg {
  width: 25px;
  height: 25px;
  opacity: 1;
  stroke-width: 2;
}

.character-maker-layout.is-gobi-maker .character-maker-preview::before {
  display: block;
  opacity: .9;
  background:
    url("./assets/ui/interactive/character-maker-preview-clean-v2.png?v=20260730-gobi-maker-v1")
    center / 100% 100% no-repeat;
}

.character-maker-layout.is-gobi-maker .character-maker-preview::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 5%;
  top: 9%;
  width: 74px;
  height: 74px;
  display: block;
  opacity: .45;
  background:
    radial-gradient(circle, rgba(239, 118, 92, .86) 0 2px, transparent 2.4px)
    0 0 / 17px 17px;
  -webkit-mask: radial-gradient(circle, #000 0 66%, transparent 69%);
  mask: radial-gradient(circle, #000 0 66%, transparent 69%);
}

.character-maker-layout.is-gobi-maker .character-maker-figure,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-figure {
  top: 5.2%;
  width: 58%;
  height: 86.5%;
  opacity: 1;
  pointer-events: auto;
}

.character-maker-layout.is-gobi-maker .character-maker-figure > img {
  object-position: center bottom;
}

.character-maker-layout.is-gobi-maker .character-maker-controls,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-controls {
  top: 62.5%;
  left: 3.8%;
  width: 92.4%;
  height: 28.7%;
  padding: 1.2% 3.3%;
  grid-template-rows: 34% 31% 35%;
  box-sizing: border-box;
  overflow: visible;
  background:
    linear-gradient(rgba(255, 252, 242, .92), rgba(255, 249, 234, .92)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 48% 50% / 155% auto;
  border-radius: 18px 16px 20px 17px;
  box-shadow: 0 0 0 1px rgba(215, 179, 129, .16), 0 3px 11px rgba(92, 63, 36, .05);
}

.character-maker-layout.is-gobi-maker .character-maker-controls::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -4px 2px 2px -3px;
  display: block;
  opacity: .36;
  background: rgba(249, 230, 194, .72);
  border-radius: 17px 20px 16px 21px;
  clip-path: polygon(1% 2%, 13% 0, 25% 1.5%, 38% .2%, 51% 1.2%, 64% .1%, 77% 1.3%, 90% .3%, 99% 2%, 100% 97%, 89% 99%, 75% 98%, 61% 99.5%, 47% 98%, 32% 99%, 17% 98%, 1% 99%);
}

.character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  padding: 0 1.5% 0 23.5%;
  border-bottom: 1px dashed rgba(221, 157, 100, .42);
}

.character-maker-layout.is-gobi-maker .character-maker-controls fieldset:last-child {
  border-bottom: 0;
}

.character-maker-layout.is-gobi-maker .character-maker-controls legend {
  top: 50%;
  left: 1.5%;
  width: 21%;
  height: auto;
  display: grid;
  grid-template-columns: 38% 62%;
  align-items: center;
  padding: 0;
  overflow: visible;
  clip: auto;
  transform: translateY(-50%);
  white-space: normal;
}

.character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  color: var(--maker-coral);
  font-family: "Bap Gowun", sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  color: var(--maker-ink);
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.05;
}

.character-maker-layout.is-gobi-maker .character-maker-hair-options {
  gap: 3.2%;
}

.character-maker-layout.is-gobi-maker .character-maker-hair-options button {
  width: 48px;
  max-width: 100%;
  overflow: visible;
  background: rgba(255, 251, 238, .83);
  box-shadow: inset 0 0 0 1px rgba(204, 168, 120, .2);
}

.character-maker-layout.is-gobi-maker .character-maker-hair-options button::after,
.character-maker-layout.is-gobi-maker .character-maker-color-options button::after {
  opacity: 0;
}

.character-maker-layout.is-gobi-maker .character-maker-hair-options button.active::after,
.character-maker-layout.is-gobi-maker .character-maker-color-options button.active::after,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-hair-options button.active::after,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-color-options button.active::after {
  opacity: 1;
}

.character-maker-layout.is-gobi-maker .character-maker-hair-options button.active::before,
.character-maker-layout.is-gobi-maker .character-maker-color-options button.active::before,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-hair-options button.active::before,
.character-maker-layout.is-gobi-maker.is-default-style .character-maker-color-options button.active::before {
  opacity: 1;
}

.character-maker-layout.is-gobi-maker .gobi-hair-chip {
  position: relative;
  overflow: hidden;
  opacity: 1;
  border-radius: 50%;
}

.character-maker-layout.is-gobi-maker .gobi-hair-chip img {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 118px;
  max-width: none;
  height: auto;
  display: block;
  transform: translateX(-50%);
}

.character-maker-layout.is-gobi-maker .character-maker-color-options {
  gap: 13px;
}

.character-maker-layout.is-gobi-maker .character-maker-color-options button {
  width: 42px;
  max-width: 16%;
  background: rgba(255, 252, 240, .9);
  box-shadow: inset 0 0 0 1px rgba(109, 76, 47, .16);
}

.character-maker-layout.is-gobi-maker .character-maker-color-options button > span {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  margin: 3px;
  opacity: 1;
  background:
    linear-gradient(rgba(255, 255, 255, .08), rgba(74, 45, 27, .04)),
    var(--option-color);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(74, 45, 27, .16);
}

.character-maker-layout.is-gobi-maker .character-maker-controls fieldset:nth-of-type(3) .character-maker-color-options {
  transform: none;
}

.character-maker-layout.is-gobi-maker .character-maker-select {
  right: 4.8%;
  bottom: 1.35%;
  left: 4.8%;
  height: 6.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9%;
  color: #fffaf0;
  background:
    linear-gradient(rgba(239, 118, 92, .96), rgba(239, 118, 92, .96)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 190% auto;
  border-radius: 19px 16px 21px 18px;
  clip-path: polygon(1% 18%, 6% 9%, 16% 11%, 27% 6%, 39% 10%, 51% 5%, 64% 9%, 76% 5%, 89% 10%, 98% 8%, 100% 24%, 99% 48%, 100% 76%, 97% 91%, 87% 93%, 75% 90%, 63% 95%, 50% 91%, 37% 95%, 24% 91%, 11% 94%, 2% 87%, 0 70%);
}

.character-maker-layout.is-gobi-maker .character-maker-select > span,
.character-maker-layout.is-gobi-maker .character-maker-select > svg {
  opacity: 1;
}

.character-maker-layout.is-gobi-maker .character-maker-select > span {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif;
  font-size: clamp(22px, 6.4vw, 28px);
  font-weight: 700;
  letter-spacing: -.045em;
}

.character-maker-layout.is-gobi-maker .character-maker-select > svg {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}

@media (max-width: 370px) {
  .character-maker-layout.is-gobi-maker .character-maker-controls {
    left: 3%;
    width: 94%;
    padding-inline: 2.6%;
  }

  .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
    padding-left: 22%;
  }

  .character-maker-layout.is-gobi-maker .character-maker-controls legend {
    width: 20%;
  }

  .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
    font-size: 15px;
  }

  .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
    font-size: 12px;
  }

  .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
    width: 43px;
  }

  .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
    width: 108px;
  }

  .character-maker-layout.is-gobi-maker .character-maker-color-options {
    gap: 9px;
  }

  .character-maker-layout.is-gobi-maker .character-maker-color-options button {
    width: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .character-choice-backdrop,
  .character-confirm-backdrop,
  .character-choice-dialog,
  .character-confirm-dialog.character-final-confirm {
    animation: none;
  }
}

/* Approved ivory player-select dialogs — corrected to the supplied artwork */
.character-pick-smile-cover {
  display: none;
}

.character-choice-backdrop {
  padding: 76px 24px max(34px, env(safe-area-inset-bottom));
  background: rgba(68, 58, 47, .48);
  -webkit-backdrop-filter: blur(1px) saturate(.76);
  backdrop-filter: blur(1px) saturate(.76);
}

.character-choice-dialog {
  width: min(100%, 394px);
  min-height: 500px;
  padding: 91px 38px 31px;
  overflow: visible;
  color: #402819;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
}

.character-choice-dialog::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(circle at 12% 22%, rgba(245, 117, 92, .38) 0 2px, transparent 2.8px),
    radial-gradient(circle at 13.7% 24.2%, rgba(245, 117, 92, .32) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 88% 62%, rgba(137, 180, 219, .34) 0 2px, transparent 2.8px),
    radial-gradient(circle at 90.2% 65%, rgba(137, 180, 219, .3) 0 1.5px, transparent 2.2px),
    linear-gradient(rgba(255, 252, 242, .76), rgba(255, 250, 237, .8)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 118% 118%;
  clip-path: polygon(
    1.2% 2.1%, 7% 1.2%, 13% 1.8%, 20% .9%, 27% 1.5%, 34% .8%,
    41% 1.4%, 48% .7%, 55% 1.4%, 62% .9%, 69% 1.5%, 76% .7%,
    83% 1.3%, 90% .8%, 98.6% 1.9%,
    99.1% 9%, 98.5% 18%, 99.2% 28%, 98.6% 38%, 99.1% 48%,
    98.5% 58%, 99.2% 68%, 98.6% 78%, 99% 88%, 98.2% 98.2%,
    91% 99%, 83% 98.4%, 75% 99.1%, 67% 98.5%, 59% 99.2%,
    51% 98.5%, 43% 99.2%, 35% 98.4%, 27% 99.1%, 19% 98.5%,
    11% 99.1%, 1.3% 98.1%,
    .8% 89%, 1.4% 79%, .7% 69%, 1.3% 59%, .7% 49%,
    1.4% 39%, .8% 29%, 1.3% 19%
  );
  pointer-events: none;
}

.character-choice-dialog::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 10px;
  opacity: .26;
  background:
    radial-gradient(circle at 12% 22%, rgba(245, 117, 92, .92) 0 2px, transparent 2.8px),
    radial-gradient(circle at 13.7% 24.2%, rgba(245, 117, 92, .85) 0 1.4px, transparent 2.1px),
    radial-gradient(circle at 88% 62%, rgba(137, 180, 219, .9) 0 2px, transparent 2.8px),
    radial-gradient(circle at 90.2% 65%, rgba(137, 180, 219, .8) 0 1.5px, transparent 2.2px);
  pointer-events: none;
}

.character-choice-dialog > * {
  position: relative;
  z-index: 2;
}

.character-choice-portrait {
  position: absolute;
  z-index: 3;
  top: -53px;
  width: 112px;
  height: 112px;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 247, 216, .98), rgba(255, 238, 182, .9) 72%, rgba(237, 192, 115, .28));
  border-radius: 50%;
  box-shadow:
    0 0 0 7px rgba(255, 250, 236, .92),
    0 0 0 10px rgba(241, 224, 185, .45);
  transform: translateX(-50%);
}

.character-choice-kicker {
  margin: 0 0 14px;
  padding: 0;
  color: #ef765c;
  background: transparent;
  border-radius: 0;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
}

.character-choice-dialog h2 {
  position: relative;
  margin: 0;
  padding: 0 0 40px;
  color: #402819;
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: clamp(28px, 7vw, 34px);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.18;
}

.character-choice-dialog h2 span {
  display: block;
}

.character-choice-dialog h2::after {
  content: "";
  position: absolute;
  bottom: 14px;
  left: 50%;
  width: 64px;
  height: 15px;
  border-bottom: 4px solid rgba(239, 118, 92, .88);
  border-radius: 0 0 55% 55%;
  transform: translateX(-50%) rotate(-1deg);
}

.character-choice-gobi h2 {
  margin-inline: -15px;
  padding-bottom: 35px;
  font-size: clamp(24px, 5.9vw, 29px);
  white-space: nowrap;
}

.character-choice-gobi h2 span {
  display: inline;
}

.character-choice-gobi h2 span + span::before {
  content: " ";
}

.character-choice-gobi h2::after {
  bottom: 12px;
  width: 150px;
  height: 4px;
  border: 0;
  border-radius: 0;
  background: repeating-linear-gradient(90deg, rgba(239, 118, 92, .88) 0 4px, transparent 4px 9px);
}

.character-choice-dialog > p {
  margin: 0;
  color: #402819;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.55;
}

.character-choice-dialog > p strong,
.character-choice-dialog > small b {
  color: inherit;
  font-weight: inherit;
}

.character-choice-dialog > small {
  margin: 20px 0 0;
  padding: 0 4px 26px;
  color: #402819;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.62;
}

.character-choice-dialog > small::before {
  display: none;
}

.character-choice-actions {
  position: relative;
  grid-template-columns: .82fr 1.42fr;
  gap: 8px;
  margin-top: 0;
  padding-top: 23px;
}

.character-choice-actions::before {
  content: "";
  position: absolute;
  top: 0;
  right: 1%;
  left: 1%;
  height: 1px;
  opacity: .54;
  background: rgba(126, 91, 60, .32);
}

.character-choice-actions button {
  min-height: 54px;
  padding: 8px 5px;
  color: #402819;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 700;
}

.character-choice-actions button:last-child {
  color: #fffaf0;
  background:
    linear-gradient(rgba(239, 118, 92, .94), rgba(239, 118, 92, .94)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 190% auto;
  border: 0;
  border-radius: 999px;
  clip-path: polygon(
    2% 19%, 8% 11%, 18% 13%, 30% 8%, 43% 12%, 57% 8%, 71% 12%,
    83% 8%, 96% 14%, 99% 27%, 98% 52%, 99% 75%, 94% 88%,
    82% 92%, 68% 90%, 53% 94%, 39% 91%, 25% 94%, 11% 90%, 2% 81%
  );
  font-size: 15px;
  font-weight: 750;
}

@media (max-width: 370px) {
  .character-choice-backdrop {
    padding: 68px 17px 28px;
  }

  .character-choice-dialog {
    min-height: 478px;
    padding: 84px 25px 26px;
  }

  .character-choice-gobi h2 {
    font-size: 23px;
  }

  .character-choice-dialog > p {
    font-size: 14px;
  }

  .character-choice-dialog > small {
    font-size: 13px;
  }

  .character-choice-actions button,
  .character-choice-actions button:last-child {
    font-size: 12px;
  }
}

/* Reference-locked player selection sheet v4
   The approved mockups use a compact, softly deckled watercolor card. */
.character-choice-backdrop {
  padding: 54px 0 max(26px, env(safe-area-inset-bottom));
  background: rgba(67, 57, 47, .46);
  -webkit-backdrop-filter: blur(.7px) saturate(.78);
  backdrop-filter: blur(.7px) saturate(.78);
}

.character-choice-dialog {
  width: 82%;
  max-width: 352px;
  min-height: 0;
  padding: 74px 30px 25px;
  color: #402919;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

.character-choice-dialog::before {
  z-index: 0;
  inset: 0;
  opacity: 1;
  background:
    linear-gradient(rgba(255, 252, 242, .12), rgba(255, 249, 233, .16)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 166% auto;
  border-radius: 7px;
  clip-path: polygon(
    1% 2%, 11% .7%, 21% 1.8%, 32% .5%, 43% 1.6%,
    54% .5%, 66% 1.8%, 78% .7%, 90% 1.9%, 99% .8%,
    100% 11%, 99.4% 23%, 100% 36%, 99.3% 49%, 100% 62%,
    99.2% 75%, 100% 88%, 98.7% 98%,
    89% 99.2%, 78% 98.2%, 67% 99.5%, 56% 98.3%,
    45% 99.5%, 34% 98.2%, 23% 99.3%, 12% 98.1%, 1.2% 99%,
    0 88%, .7% 75%, 0 62%, .6% 49%, 0 36%, .7% 23%, 0 11%
  );
  box-shadow:
    0 0 0 3px rgba(255, 249, 231, .32),
    0 0 13px 5px rgba(255, 250, 237, .34),
    0 10px 28px rgba(54, 39, 27, .08);
  filter: contrast(1.035) saturate(.74);
}

.character-choice-dialog::after {
  z-index: 1;
  inset: 0;
  opacity: .34;
  background:
    radial-gradient(ellipse at 0 18%, rgba(255, 250, 235, .82) 0 11px, transparent 12px),
    radial-gradient(ellipse at 100% 73%, rgba(255, 250, 235, .76) 0 13px, transparent 14px),
    radial-gradient(circle at 10% 22%, rgba(239, 118, 92, .48) 0 1.8px, transparent 2.4px),
    radial-gradient(circle at 13% 24%, rgba(239, 118, 92, .38) 0 1.2px, transparent 1.9px),
    radial-gradient(circle at 89% 62%, rgba(137, 180, 219, .46) 0 1.7px, transparent 2.3px),
    radial-gradient(circle at 91% 65%, rgba(137, 180, 219, .34) 0 1.2px, transparent 1.9px);
  border-radius: inherit;
  pointer-events: none;
}

.character-choice-portrait {
  top: -43px;
  width: 92px;
  height: 92px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 247, 213, .98), rgba(247, 224, 159, .88) 74%, rgba(224, 175, 96, .2));
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(255, 251, 238, .9),
    0 0 0 8px rgba(242, 226, 191, .42);
}

.character-choice-portrait img {
  width: 287px;
}

.character-choice-jarin .character-choice-portrait img {
  top: -173px;
  left: -52px;
}

.character-choice-gobi .character-choice-portrait img {
  top: -182px;
  left: -154px;
}

.character-choice-kicker {
  margin: 0 0 8px;
  color: #ef765c;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .15em !important;
  line-height: 1;
}

.character-choice-dialog h2 {
  padding: 0 0 31px;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: clamp(27px, 6.7vw, 29px);
  font-weight: 700;
  letter-spacing: -.035em !important;
  line-height: 1.12;
}

.character-choice-dialog h2::after {
  bottom: 9px;
  width: 54px;
  height: 12px;
  border-bottom-width: 3px;
}

.character-choice-gobi h2 {
  margin-inline: -17px;
  padding-bottom: 29px;
  font-size: 21px;
  letter-spacing: -.045em !important;
  white-space: nowrap;
}

.character-choice-gobi h2 span {
  display: inline;
}

.character-choice-gobi h2::after {
  bottom: 10px;
  width: 143px;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(239, 118, 92, .85) 0 3px, transparent 3px 7px);
}

.character-choice-dialog > p {
  color: #402919;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
}

.character-choice-dialog > p strong,
.character-choice-dialog > small b {
  color: inherit;
  font-weight: 700;
}

.character-choice-dialog > small {
  margin: 15px 0 0;
  padding: 0 0 19px;
  color: #402919;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.46;
}

.character-choice-actions {
  grid-template-columns: .82fr 1.45fr;
  gap: 9px;
  padding-top: 18px;
}

.character-choice-actions::before {
  right: 2%;
  left: 2%;
  background: rgba(129, 96, 68, .25);
}

.character-choice-actions button,
.character-choice-actions button:last-child {
  min-height: 48px;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.character-choice-actions button:last-child {
  padding-inline: 10px;
  background:
    linear-gradient(rgba(239, 118, 92, .92), rgba(239, 118, 92, .92)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 58% / 225% auto;
  border-radius: 17px;
  clip-path: polygon(
    2% 16%, 8% 7%, 18% 10%, 29% 5%, 40% 9%, 51% 5%,
    62% 9%, 74% 6%, 86% 10%, 96% 7%, 100% 23%,
    99% 50%, 100% 78%, 94% 92%, 82% 90%, 70% 95%,
    58% 91%, 46% 95%, 34% 91%, 22% 94%, 10% 90%, 2% 80%, 0 49%
  );
  box-shadow: 0 0 7px rgba(239, 118, 92, .12);
}

@media (max-width: 370px) {
  .character-choice-backdrop {
    padding: 52px 0 24px;
  }

  .character-choice-dialog {
    width: 84%;
    max-width: 318px;
    min-height: 0;
    padding: 70px 24px 23px;
  }

  .character-choice-dialog h2 {
    font-size: 25px;
  }

  .character-choice-gobi h2 {
    font-size: 21px;
  }

  .character-choice-dialog > p {
    font-size: 14px;
  }

  .character-choice-dialog > small {
    font-size: 13px;
  }

  .character-choice-actions button,
  .character-choice-actions button:last-child {
    font-size: 13px;
  }
}

/* The global type reset uses an ID selector with !important.
   Keep the approved modal typography isolated from that reset. */
#app .character-choice-dialog,
#app .character-choice-kicker,
#app .character-choice-dialog h2 {
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

#app .character-choice-dialog > p,
#app .character-choice-dialog > small,
#app .character-choice-actions button,
#app .character-choice-actions button:last-child {
  font-family: "Bap Gowun", sans-serif !important;
}

#app .character-choice-kicker {
  letter-spacing: .15em !important;
}

#app .character-choice-dialog h2 {
  letter-spacing: -.035em !important;
}

#app .character-choice-gobi h2 {
  letter-spacing: -.045em !important;
}

#app .character-choice-actions button:first-child {
  padding-inline: 2px;
}

/* Reference-locked final confirmation — approved ivory watercolor mockup */
.character-confirm-backdrop {
  padding: 72px 0 max(30px, env(safe-area-inset-bottom));
  background: rgba(61, 52, 43, .55);
  -webkit-backdrop-filter: blur(1.2px) saturate(.74);
  backdrop-filter: blur(1.2px) saturate(.74);
}

.character-confirm-dialog.character-final-confirm {
  position: relative;
  isolation: isolate;
  width: 88%;
  max-width: 378px;
  min-height: 0;
  margin: 0;
  padding: 91px 24px 20px;
  overflow: visible;
  color: #402919;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  text-align: center;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

.character-confirm-dialog.character-final-confirm::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: 1;
  background:
    url("./assets/ui/final-confirm-watercolor-motifs-v1.svg") center / 100% 100% no-repeat,
    linear-gradient(rgba(255, 252, 242, .1), rgba(255, 249, 233, .14)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 164% auto;
  border-radius: 0;
  clip-path: none;
  -webkit-mask: url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100% no-repeat;
  mask: url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100% no-repeat;
  box-shadow:
    0 0 0 3px rgba(255, 249, 231, .3),
    0 0 14px 5px rgba(255, 250, 237, .36),
    0 10px 26px rgba(54, 39, 27, .08);
  filter: contrast(1.025) saturate(.74);
  pointer-events: none;
}

.character-confirm-dialog.character-final-confirm::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 7px -6px -8px 7px;
  opacity: .48;
  background:
    linear-gradient(rgba(239, 118, 92, .7), rgba(239, 118, 92, .7)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 50% / 160% auto;
  border-radius: 0;
  clip-path: none;
  -webkit-mask: url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100% no-repeat;
  mask: url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.character-confirm-avatar.character-confirm-maker {
  top: -58px;
  width: 140px;
  height: 140px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 249, 227, .98), rgba(249, 232, 190, .84) 76%, rgba(224, 175, 96, .14));
  border: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(255, 251, 238, .94),
    0 0 0 10px rgba(242, 226, 191, .42),
    0 8px 18px rgba(74, 45, 27, .08);
  transform: translateX(-50%);
}

.character-confirm-maker-figure {
  top: 8px;
  width: 96px;
  height: 170px;
}

.character-confirm-avatar.character-confirm-maker .character-confirm-maker-figure > img {
  object-fit: contain;
  object-position: center top;
  transform: none;
}

.character-confirm-maker-figure.default-shirt .character-confirm-shirt-tint {
  display: none;
}

.character-confirm-dialog.character-final-confirm .character-confirm-kicker {
  position: relative;
  display: inline-block;
  margin: 0 0 8px;
  padding: 0 0 8px;
  color: #ef765c;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em !important;
  line-height: 1;
}

.character-confirm-dialog.character-final-confirm .character-confirm-kicker::after {
  content: "";
  position: absolute;
  right: 5%;
  bottom: 0;
  left: 5%;
  height: 3px;
  background: repeating-linear-gradient(90deg, rgba(239, 118, 92, .86) 0 4px, transparent 4px 8px);
  transform: rotate(-1deg);
}

#app .character-confirm-dialog.character-final-confirm h2 {
  margin: 0;
  color: #402919;
  font-family: "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: clamp(25px, 6.5vw, 28px);
  font-weight: 700;
  letter-spacing: -.06em !important;
  line-height: 1.08;
  white-space: nowrap;
}

#app .character-confirm-dialog.character-final-confirm > p {
  margin: 14px -5px 0;
  color: #402919;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.45;
  white-space: nowrap;
}

#app .character-confirm-dialog.character-final-confirm > small {
  position: relative;
  display: block;
  margin: 14px 0 0;
  padding: 14px 0 0;
  color: #402919;
  border: 0;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -.025em;
  line-height: 1.45;
  white-space: nowrap;
}

.character-confirm-dialog.character-final-confirm > small::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  opacity: .52;
  background: repeating-linear-gradient(90deg, rgba(222, 143, 102, .7) 0 3px, transparent 3px 8px);
}

.character-confirm-dialog.character-final-confirm .character-confirm-actions {
  display: grid;
  grid-template-columns: .78fr 1.52fr;
  align-items: center;
  gap: 11px;
  margin-top: 15px;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button {
  position: relative;
  min-height: 50px;
  margin: 0;
  padding: 8px 5px;
  color: #402919;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  clip-path: none;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:first-child::after {
  content: "";
  position: absolute;
  right: 10%;
  bottom: 3px;
  left: 10%;
  height: 7px;
  background: transparent;
  border-bottom: 2px solid #ef765c;
  border-radius: 50%;
  transform: rotate(-1.4deg);
  opacity: .88;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  min-height: 52px;
  padding-inline: 12px;
  color: #fffaf0;
  background:
    linear-gradient(rgba(223, 118, 95, .94), rgba(223, 118, 95, .94)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 58% / 225% auto;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 0 8px rgba(239, 118, 92, .11);
  clip-path: polygon(
    1% 18%, 7% 8%, 18% 10%, 30% 6%, 42% 9%, 54% 6%,
    66% 9%, 78% 6%, 90% 10%, 98% 8%, 100% 24%,
    99% 50%, 100% 76%, 97% 90%, 88% 92%, 76% 90%,
    64% 94%, 52% 91%, 40% 94%, 28% 91%, 16% 93%, 5% 88%, 0 72%, 1% 46%
  );
  font-size: 14px;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child span {
  display: inline-block;
  margin-left: 7px;
  font-size: 22px;
  font-weight: 400;
  line-height: .7;
  vertical-align: -2px;
}

@media (max-width: 370px) {
  .character-confirm-backdrop {
    padding: 65px 0 26px;
  }

  .character-confirm-dialog.character-final-confirm {
    width: 90%;
    max-width: 330px;
    min-height: 0;
    padding: 88px 24px 19px;
  }

  .character-confirm-avatar.character-confirm-maker {
    top: -53px;
    width: 130px;
    height: 130px;
  }

  .character-confirm-maker-figure {
    width: 90px;
    height: 159px;
  }

  #app .character-confirm-dialog.character-final-confirm h2 {
    font-size: 24px;
  }

  #app .character-confirm-dialog.character-final-confirm > p {
    font-size: 12px;
  }

  #app .character-confirm-dialog.character-final-confirm > small {
    font-size: 11px;
  }

  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button,
  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
    font-size: 13px;
  }
}

/* Final-check modal fidelity pass — must stay last to override legacy rules. */
#app .character-confirm-dialog.character-final-confirm,
#app .character-confirm-dialog.character-final-confirm .character-confirm-kicker,
#app .character-confirm-dialog.character-final-confirm h2,
#app .character-confirm-dialog.character-final-confirm > p,
#app .character-confirm-dialog.character-final-confirm > small,
#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button {
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-synthesis: none;
}

#app .character-confirm-avatar.character-confirm-maker {
  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(255, 249, 227, .26),
      rgba(249, 232, 190, .14) 76%,
      rgba(224, 175, 96, .03)
    ) !important;
}

#app .character-confirm-dialog.character-final-confirm h2 {
  font-size: clamp(26px, 6.8vw, 29px);
  font-weight: 700;
  letter-spacing: -.035em !important;
  line-height: 1.15;
}

#app .character-confirm-dialog.character-final-confirm > p {
  margin-inline: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -.018em !important;
  line-height: 1.55;
}

#app .character-confirm-dialog.character-final-confirm > small {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -.018em !important;
  line-height: 1.55;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.48fr);
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  margin: 16px 0 0;
  padding: 0;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button,
#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  justify-self: stretch;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:first-child {
  padding-inline: 0;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  padding-inline: 8px;
}

@media (max-width: 370px) {
  #app .character-confirm-dialog.character-final-confirm {
    width: calc(100% - 24px);
    max-width: 342px;
    padding-right: 20px;
    padding-left: 20px;
  }

  #app .character-confirm-dialog.character-final-confirm h2 {
    font-size: 25px;
  }

  #app .character-confirm-dialog.character-final-confirm > p {
    font-size: 13px;
  }

  #app .character-confirm-dialog.character-final-confirm > small {
    font-size: 12px;
  }

  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
    gap: 8px;
  }

  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button,
  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
    font-size: 13px;
  }
}

/* Gobi maker parity pass — keep only Gobi artwork/options different from Jarin. */
#app .character-maker-layout.is-gobi-maker,
#app .character-maker-layout.is-gobi-maker button,
#app .character-maker-layout.is-gobi-maker legend,
#app .character-maker-layout.is-gobi-maker small,
#app .character-maker-layout.is-gobi-maker span {
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

#app .character-maker-layout.is-gobi-maker {
  background:
    radial-gradient(ellipse at 50% 37%, rgba(255, 226, 127, .48) 0 27%, rgba(255, 231, 153, .24) 43%, rgba(255, 245, 211, 0) 63%),
    linear-gradient(rgba(255, 252, 242, .79), rgba(255, 250, 238, .8)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover no-repeat,
    #fcf7e9;
}

#app .character-maker-layout.is-gobi-maker::before,
#app .character-maker-layout.is-gobi-maker::after {
  content: none;
  display: none;
}

#app .character-maker-layout.is-gobi-maker .character-story-header {
  top: 0;
  left: 0;
  width: 100%;
  height: 7.35%;
  padding: 0;
  grid-template-columns: 18% 64% 18%;
}

#app .character-maker-layout.is-gobi-maker .character-story-header::after {
  right: 3.5%;
  bottom: 0;
  left: 3.5%;
  height: 1.5px;
  opacity: .72;
  background: repeating-linear-gradient(90deg, #ef765c 0 7px, transparent 7px 13px);
}

#app .character-maker-layout.is-gobi-maker .character-story-header > button {
  width: 66px;
  height: 64px;
  margin: 0;
  padding: 0;
  justify-self: start;
  color: var(--maker-ink);
}

#app .character-maker-layout.is-gobi-maker .character-story-header > button svg {
  width: 28px;
  height: 28px;
  opacity: 1;
  stroke-width: 1.85;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > span {
  display: block;
  grid-column: 2;
  justify-self: center;
  color: var(--maker-ink);
  font-size: clamp(27px, 7.5vw, 33px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  text-align: center;
  white-space: nowrap;
  opacity: 1;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > b {
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-preview {
  top: 7.24%;
  left: 0;
  width: 100%;
  height: 55.37%;
}

#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker.is-custom-style .character-maker-preview::before {
  inset: 2.5% 3.5% 1.5%;
  display: block;
  opacity: 1;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 230, 146, .44) 0 48%, rgba(255, 238, 184, .2) 62%, transparent 72%);
}

#app .character-maker-layout.is-gobi-maker .character-maker-preview::after {
  top: 10%;
  right: 5%;
  width: 76px;
  height: 76px;
  display: block;
  opacity: .52;
  background:
    radial-gradient(circle, rgba(239, 118, 92, .82) 0 2.1px, transparent 2.5px)
    0 0 / 17px 17px;
  -webkit-mask: radial-gradient(circle, #000 0 66%, transparent 69%);
  mask: radial-gradient(circle, #000 0 66%, transparent 69%);
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-figure {
  top: 7%;
  left: 50%;
  width: 55.7%;
  height: 84%;
  opacity: 1;
  transform: translateX(-50%);
  pointer-events: auto;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure > img {
  object-fit: contain;
  object-position: center bottom;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-controls {
  top: 62.5%;
  left: 2.4%;
  width: 95.2%;
  height: 28.95%;
  padding: 0 2.5%;
  grid-template-rows: 33.5% 30.5% 36%;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 252, 242, .88), rgba(255, 249, 234, .9)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 155% auto no-repeat;
  border: 0;
  border-radius: 20px 20px 8px 8px;
  box-shadow:
    inset 0 0 0 1px rgba(216, 181, 132, .16),
    0 3px 10px rgba(92, 63, 36, .04);
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls::before,
#app .character-maker-layout.is-gobi-maker .character-maker-controls::after {
  content: none;
  display: none;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  padding: 0 1% 0 23%;
  border: 0;
  border-bottom: 1px dashed rgba(221, 157, 100, .45);
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset:last-child {
  border-bottom: 0;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
  top: 50%;
  left: 1%;
  width: 21%;
  height: auto;
  display: grid;
  grid-template-columns: 39% 61%;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: visible;
  clip: auto;
  transform: translateY(-50%);
  white-space: nowrap;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  color: var(--maker-coral);
  font-size: clamp(17px, 4.7vw, 21px);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  white-space: nowrap;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  color: var(--maker-ink);
  font-size: clamp(14px, 3.9vw, 17px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
  white-space: nowrap;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5%;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
  width: 100%;
  max-width: 54px;
  overflow: visible;
  background: rgba(255, 251, 238, .9);
  box-shadow: inset 0 0 0 1px rgba(204, 168, 120, .18);
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button::after,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button::after {
  opacity: 0;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button.active::after,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button.active::after,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-hair-options button.active::after,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-color-options button.active::after {
  opacity: 1;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button.active::before,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button.active::before,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-hair-options button.active::before,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-color-options button.active::before {
  opacity: 1;
}

#app .character-maker-layout.is-gobi-maker .gobi-hair-chip {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  opacity: 1;
  border-radius: 50%;
}

#app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 86px;
  max-width: none;
  height: auto;
  display: block;
  transform: translateX(-50%);
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options small {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-options {
  gap: 13.5px;
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
  width: 43px;
  max-width: 14.5%;
  background: rgba(255, 252, 240, .9);
  box-shadow: inset 0 0 0 1px rgba(109, 76, 47, .15);
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-options button > span {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  margin: 3px;
  opacity: 1;
  background:
    linear-gradient(rgba(255, 255, 255, .08), rgba(74, 45, 27, .04)),
    var(--option-color);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(74, 45, 27, .15);
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset:nth-of-type(3) .character-maker-color-options {
  transform: translateY(-11px);
}

#app .character-maker-layout.is-gobi-maker .character-maker-select {
  right: 4.6%;
  bottom: 2.35%;
  left: 4.6%;
  width: auto;
  height: 6.55%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12%;
  color: #fffaf0;
  background:
    linear-gradient(rgba(239, 118, 92, .97), rgba(239, 118, 92, .97)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 62% / 205% auto;
  border: 0;
  border-radius: 18px 16px 19px 17px;
  box-shadow: none;
  clip-path: polygon(
    .8% 18%, 6% 8%, 16% 11%, 27% 6%, 39% 9%, 51% 5%,
    64% 9%, 76% 5%, 89% 10%, 98.5% 8%, 100% 24%,
    99% 48%, 100% 76%, 97% 91%, 87% 94%, 75% 90%,
    63% 95%, 50% 91%, 37% 95%, 24% 91%, 11% 94%,
    2% 87%, 0 70%
  );
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > span,
#app .character-maker-layout.is-gobi-maker .character-maker-select > svg {
  opacity: 1;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > span {
  font-size: clamp(23px, 6.5vw, 29px);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > svg {
  width: 25px;
  height: 25px;
  stroke-width: 2;
}

@media (max-width: 370px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-controls {
    left: 2%;
    width: 96%;
    padding-inline: 2.2%;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
    padding-left: 22%;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
    width: 20.5%;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
    font-size: 16px;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
    font-size: 13px;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
    max-width: 46px;
  }

  #app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
    width: 76px;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-color-options {
    gap: 9px;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
    width: 39px;
  }
}

/* Final confirmation modal master lock.
   Jarin and Gobi intentionally share this exact presentation. */
#app .character-confirm-backdrop {
  padding: 72px 0 max(28px, env(safe-area-inset-bottom));
  background: rgba(61, 52, 43, .58);
  -webkit-backdrop-filter: blur(1.1px) saturate(.72);
  backdrop-filter: blur(1.1px) saturate(.72);
}

#app .character-confirm-dialog.character-final-confirm {
  width: calc(100% - 30px);
  max-width: 366px;
  min-height: 0;
  box-sizing: border-box;
  padding: 92px 25px 22px;
  overflow: visible;
}

#app .character-confirm-dialog.character-final-confirm::before {
  background:
    url("./assets/ui/final-confirm-watercolor-motifs-v1.svg") center / 100% 100% no-repeat,
    linear-gradient(rgba(255, 253, 246, .26), rgba(255, 249, 232, .28)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 164% auto;
  filter: contrast(1.02) saturate(.72);
}

#app .character-confirm-avatar.character-confirm-maker {
  top: -58px;
  width: 140px;
  height: 140px;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  background-color: #fff8e8 !important;
  background-image:
    linear-gradient(rgba(255, 250, 235, .82), rgba(250, 234, 194, .78)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, 50% 46% !important;
  background-size: 100% 100%, 180% auto !important;
  box-shadow:
    0 0 0 6px rgba(255, 251, 238, .96),
    0 0 0 10px rgba(242, 226, 191, .46),
    0 8px 18px rgba(74, 45, 27, .09);
}

#app .character-confirm-avatar.character-confirm-maker::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(rgba(255, 250, 235, .36), rgba(250, 234, 194, .24)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 46% / 180% auto no-repeat;
  pointer-events: none;
}

#app .character-confirm-avatar.character-confirm-maker .character-confirm-maker-figure {
  z-index: 1;
  opacity: 1;
  mix-blend-mode: normal;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions {
  width: calc(100% - 2px);
  max-width: calc(100% - 2px);
  min-width: 0;
  box-sizing: border-box;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.52fr);
  gap: 10px;
  margin: 17px auto 0;
  padding: 0;
  overflow: clip;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button,
#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  margin: 0;
  transform: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 1.15;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:first-child {
  padding: 7px 0 11px;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:first-child::after {
  right: 13%;
  bottom: 5px;
  left: 13%;
  height: 7px;
  border-bottom: 2px solid #ef765c;
  border-radius: 0 0 50% 45%;
  transform: rotate(-1.2deg) skewX(-7deg);
  opacity: .92;
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
  padding: 8px 9px;
  color: #fffaf0;
  background:
    linear-gradient(rgba(223, 118, 95, .95), rgba(223, 118, 95, .95)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 58% / 225% auto;
  border: 0;
  border-radius: 0;
  clip-path: polygon(
    1% 18%, 7% 8%, 18% 10%, 30% 6%, 42% 9%, 54% 6%,
    66% 9%, 78% 6%, 90% 10%, 98% 8%, 100% 24%,
    99% 50%, 100% 76%, 97% 90%, 88% 92%, 76% 90%,
    64% 94%, 52% 91%, 40% 94%, 28% 91%, 16% 93%,
    5% 88%, 0 72%, 1% 46%
  );
}

#app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child span {
  margin-left: 6px;
  font-size: 22px;
}

@media (max-width: 370px) {
  #app .character-confirm-dialog.character-final-confirm {
    width: calc(100% - 24px);
    max-width: 342px;
    padding-right: 22px;
    padding-left: 22px;
  }

  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr);
    gap: 7px;
  }

  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button,
  #app .character-confirm-dialog.character-final-confirm .character-confirm-actions button:last-child {
    font-size: 13px;
  }
}

/* ===== character-maker-gobi-parity.css ===== */
/*
 * Gobi maker parity lock
 * Keep Gobi's character/options, but inherit the approved Jarin maker's
 * geometry, typography and coral CTA without rebuilding those pieces.
 */

#app .character-maker-layout.is-gobi-maker {
  --gobi-maker-ink: #4a2a18;
  --gobi-maker-coral: #f2765d;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Bap Gowun", sans-serif !important;
}

/* Remove every legacy glow/silhouette layer behind Gobi. */
#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker .character-maker-preview::after,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::before,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 0 !important;
}

/* Match the approved Jarin preview and control-panel proportions. */
#app .character-maker-layout.is-gobi-maker .character-maker-preview {
  top: 7.24% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 55.37% !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure {
  top: 7% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 55.7% !important;
  height: 84% !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  filter: none !important;
}

/* The default white shirt and blue pants are already painted in the artwork. */
#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-shirt .character-maker-shirt-tint,
#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-pants .character-maker-pants-tint {
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls {
  top: 62.5% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 28.95% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  box-shadow: none !important;
  background:
    linear-gradient(rgba(255, 252, 239, 0.95), rgba(255, 252, 239, 0.95)),
    none
      center / 100% 100% no-repeat !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset {
  position: absolute !important;
  right: 0 !important;
  left: 0 !important;
  display: grid !important;
  grid-template-columns: 20.5% 1fr !important;
  align-items: center !important;
  width: auto !important;
  min-width: 0 !important;
  height: 33.333% !important;
  margin: 0 !important;
  padding: 0 6.7% 0 3.8% !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(214, 151, 95, 0.55) !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset:nth-of-type(1) {
  top: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset:nth-of-type(2) {
  top: 33.333% !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset:nth-of-type(3) {
  top: 66.666% !important;
  border-bottom: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-legend {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gobi-maker-ink) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: clamp(15px, 2.55svh, 22px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  text-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-legend .step,
#app .character-maker-layout.is-gobi-maker .character-maker-legend strong {
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-legend .step {
  color: var(--gobi-maker-coral) !important;
  font-size: 1.18em !important;
  letter-spacing: -0.02em !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-options {
  position: static !important;
  display: grid !important;
  align-items: center !important;
  justify-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: clamp(7px, 1.6vw, 14px) !important;
  transform: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset:first-of-type .character-maker-options {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-fieldset:not(:first-of-type) .character-maker-options {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-option,
#app .character-maker-layout.is-gobi-maker .character-maker-color-option {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: clamp(36px, 5.2svh, 50px) !important;
  min-width: 0 !important;
  max-width: 50px !important;
  height: clamp(36px, 5.2svh, 50px) !important;
  min-height: 0 !important;
  max-height: 50px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 251, 239, 0.7) !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-option::before,
#app .character-maker-layout.is-gobi-maker .character-maker-color-option::before {
  box-sizing: border-box !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-option.is-selected::before,
#app .character-maker-layout.is-gobi-maker .character-maker-color-option.is-selected::before {
  position: absolute !important;
  inset: -5px !important;
  display: block !important;
  content: "" !important;
  border: 3px solid var(--gobi-maker-coral) !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-option.is-selected::after,
#app .character-maker-layout.is-gobi-maker .character-maker-color-option.is-selected::after {
  position: absolute !important;
  right: 4px !important;
  bottom: -9px !important;
  left: 4px !important;
  display: block !important;
  height: 2px !important;
  content: "" !important;
  border-radius: 50% !important;
  background: var(--gobi-maker-coral) !important;
  transform: rotate(-2deg) !important;
}

/* Keep whole Gobi faces inside the same small circles used by Jarin. */
#app .character-maker-layout.is-gobi-maker .gobi-hair-chip {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: #fff8e7 !important;
}

#app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
  position: absolute !important;
  top: -1px !important;
  left: 50% !important;
  width: 78px !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-option > span,
#app .character-maker-layout.is-gobi-maker .character-maker-color-option .swatch {
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  border: 1px solid rgba(91, 67, 40, 0.24) !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
}

/*
 * Use the exact approved coral CTA crop from the Jarin page.
 * The semantic text remains in the DOM for accessibility but is visually
 * supplied by the approved bitmap, preventing font/shape drift.
 */
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select {
  position: absolute !important;
  right: 4.6% !important;
  bottom: 2.35% !important;
  left: 4.6% !important;
  z-index: 12 !important;
  display: block !important;
  width: auto !important;
  height: 6.55% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    url("./assets/ui/interactive/character-maker-coral-cta-v1.png")
      center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
  filter: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > * {
  opacity: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select:focus-visible {
  outline: 3px solid rgba(74, 42, 24, 0.85) !important;
  outline-offset: 2px !important;
}

@media (max-width: 390px), (max-height: 760px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-legend {
    gap: 6px !important;
    font-size: clamp(13px, 2.35svh, 18px) !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-option,
  #app .character-maker-layout.is-gobi-maker .character-maker-color-option {
    width: clamp(32px, 5svh, 44px) !important;
    height: clamp(32px, 5svh, 44px) !important;
  }

  #app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
    width: 70px !important;
  }
}
/* Final Gobi parity lock: reuse Jarin's layout, type, controls and CTA. */
#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker .character-maker-preview::after,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::before,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-shirt .character-maker-shirt-tint,
#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-pants .character-maker-pants-tint {
  display: none !important;
  opacity: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls {
  top: 62.5% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 28.95% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: 33.333% !important;
  margin: 0 !important;
  padding: 0 6.7% 0 24.3% !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend * {
  position: absolute !important;
  left: 6% !important;
  width: 16.5% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #402516 !important;
  font-family: "Gaegu", "Noto Sans KR", sans-serif !important;
  font-size: clamp(15px, 3.85vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-options,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-options {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
  box-sizing: border-box !important;
  width: clamp(42px, 11.15vw, 50px) !important;
  height: clamp(42px, 11.15vw, 50px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .gobi-hair-chip img {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  width: 74px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select {
  position: absolute !important;
  right: 4.6% !important;
  bottom: 2.35% !important;
  left: 4.6% !important;
  width: auto !important;
  height: 6.55% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent url("./assets/ui/interactive/character-maker-coral-cta-v1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > * {
  visibility: hidden !important;
}

@media (max-width: 430px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend * {
    font-size: 16px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
  #app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
    width: 44px !important;
    height: 44px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls .gobi-hair-chip img {
    width: 68px !important;
  }
}

/* ===== character-maker-gobi-lock-v2.css ===== */
/* Final Gobi parity lock: reuse Jarin's layout, type, controls and CTA. */
#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker .character-maker-preview::after,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::before,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-shirt .character-maker-shirt-tint,
#app .character-maker-layout.is-gobi-maker .character-maker-figure.default-pants .character-maker-pants-tint {
  display: none !important;
  opacity: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls {
  top: 62.5% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 28.95% !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  box-sizing: border-box !important;
  min-width: 0 !important;
  height: 33.333% !important;
  margin: 0 !important;
  padding: 0 6.7% 0 24.3% !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend * {
  position: absolute !important;
  left: 6% !important;
  width: 16.5% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #402516 !important;
  font-family: "Gaegu", "Noto Sans KR", sans-serif !important;
  font-size: clamp(15px, 3.85vw, 18px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-options,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-options {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
  box-sizing: border-box !important;
  width: clamp(42px, 11.15vw, 50px) !important;
  height: clamp(42px, 11.15vw, 50px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .gobi-hair-chip img {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  width: 74px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select {
  position: absolute !important;
  right: 4.6% !important;
  bottom: 2.35% !important;
  left: 4.6% !important;
  width: auto !important;
  height: 6.55% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent url("./assets/ui/interactive/character-maker-coral-cta-v1.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > * {
  visibility: hidden !important;
}

@media (max-width: 430px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend * {
    font-size: 16px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
  #app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
    width: 44px !important;
    height: 44px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls .gobi-hair-chip img {
    width: 68px !important;
  }
}

/* ===== character-maker-gobi-lock-v3.css ===== */
/*
 * Gobi/Jarin parity lock
 * The Gobi maker deliberately reuses the approved Jarin geometry, typography,
 * control sizing, selection treatment and coral CTA. Only the character art
 * and the available option values differ.
 */

#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker .character-maker-preview::after,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::before,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-figure.default-shirt
  .character-maker-shirt-tint,
#app
  .character-maker-layout.is-gobi-maker
  .character-maker-figure.default-pants
  .character-maker-pants-tint {
  display: none !important;
  opacity: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls {
  position: absolute !important;
  top: 62.5% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 28.95% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none
    center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  box-sizing: border-box !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 33.333% !important;
  margin: 0 !important;
  padding: 0 6.7% 0 24.3% !important;
  border: 0 !important;
  display: flex !important;
  align-items: center !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend * {
  position: absolute !important;
  left: 6% !important;
  box-sizing: border-box !important;
  width: 16.5% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #402516 !important;
  font-family: "Gaegu", "Noto Sans KR", sans-serif !important;
  font-size: clamp(15px, 3.85vw, 18px) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-options,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-options {
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 4px !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
#app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
  position: relative !important;
  box-sizing: border-box !important;
  width: clamp(42px, 11.15vw, 50px) !important;
  height: clamp(42px, 11.15vw, 50px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  .gobi-hair-chip
  img {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  width: 74px !important;
  max-width: none !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select {
  position: absolute !important;
  right: 4.6% !important;
  bottom: 2.35% !important;
  left: 4.6% !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 6.55% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: transparent
    url("./assets/ui/interactive/character-maker-coral-cta-v1.png") center / 100%
    100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  overflow: hidden !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-select > * {
  visibility: hidden !important;
}

@media (max-width: 430px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
  #app
    .character-maker-layout.is-gobi-maker
    .character-maker-controls
    legend
    * {
    font-size: 16px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-controls .hair-chip,
  #app .character-maker-layout.is-gobi-maker .character-maker-controls .color-chip {
    width: 44px !important;
    height: 44px !important;
  }

  #app
    .character-maker-layout.is-gobi-maker
    .character-maker-controls
    .gobi-hair-chip
    img {
    width: 68px !important;
  }
}

/* ===== character-maker-gobi-jarin-parity-v1.css ===== */
/*
 * Gobi maker visual parity with the approved Jarin maker.
 *
 * Keep Gobi's live character and hairstyle artwork, but reuse Jarin's page
 * geometry, watercolor preview, lower paper panel, typography, controls and
 * CTA treatment.
 */

#app .character-maker-layout.is-gobi-maker {
  --gobi-parity-ink: #4a2d1b;
  --gobi-parity-coral: #ef765c;
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
  background:
    linear-gradient(rgba(255, 252, 242, 0.82), rgba(255, 250, 238, 0.82)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover
      no-repeat,
    #fcf7e9 !important;
}

/*
 * Jarin's visible typography is baked into the approved watercolor artwork.
 * Keep every live Gobi label on that same Gaegu handwriting family.
 */
#app .character-maker-layout.is-gobi-maker *,
#app .character-maker-layout.is-gobi-maker .character-story-header::before {
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
}

#app .character-maker-layout.is-gobi-maker::before {
  content: none !important;
  display: none !important;
}

/* Jarin's lower rounded paper panel continues behind the controls and CTA. */
#app .character-maker-layout.is-gobi-maker::after {
  position: absolute !important;
  z-index: 1 !important;
  top: 62.5% !important;
  right: 0.7% !important;
  bottom: 0.55% !important;
  left: 0.7% !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: auto !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    linear-gradient(rgba(255, 253, 245, 0.88), rgba(255, 250, 238, 0.9)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 155%
      auto no-repeat !important;
  border: 1px dashed rgba(214, 169, 112, 0.34) !important;
  border-radius: 22px 22px 7px 7px !important;
  box-shadow: inset 0 0 0 1px rgba(225, 192, 143, 0.08) !important;
  filter: none !important;
}

/* Header: same three-column balance and right-side player label as Jarin. */
#app .character-maker-layout.is-gobi-maker .character-story-header {
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 7.35% !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 18% 64% 18% !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header::before {
  position: absolute !important;
  top: 50% !important;
  right: 4.6% !important;
  display: block !important;
  content: "PLAYER · 02" !important;
  color: var(--gobi-parity-ink) !important;
  font-family: "Bap Gowun", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > button {
  width: 66px !important;
  height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-self: start !important;
  color: var(--gobi-parity-ink) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > button svg {
  width: 29px !important;
  height: 29px !important;
  opacity: 1 !important;
  stroke-width: 1.85 !important;
}

#app .character-maker-layout.is-gobi-maker .character-story-header > span {
  grid-column: 2 !important;
  justify-self: center !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--gobi-parity-ink) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-size: clamp(20px, 2.8svh, 25px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.055em !important;
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Exact clean watercolor preview used by Jarin, with Gobi rendered on top. */
#app .character-maker-layout.is-gobi-maker .character-maker-preview {
  top: 7.24% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: 55.37% !important;
  overflow: hidden !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app
  .character-maker-layout.is-gobi-maker.is-custom-style
  .character-maker-preview::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background:
    url("./assets/ui/interactive/character-maker-preview-clean-v2.png")
    center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-preview::after,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::before,
#app .character-maker-layout.is-gobi-maker .character-maker-figure::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure,
#app
  .character-maker-layout.is-gobi-maker.is-default-style
  .character-maker-figure {
  top: 7% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 55.7% !important;
  height: 84% !important;
  opacity: 1 !important;
  transform: translateX(-50%) !important;
  filter: none !important;
  pointer-events: auto !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-figure > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  filter: none !important;
}

/* Controls use the same rows, label stack and spacing as the Jarin panel. */
#app .character-maker-layout.is-gobi-maker .character-maker-controls,
#app
  .character-maker-layout.is-gobi-maker.is-default-style
  .character-maker-controls {
  position: absolute !important;
  z-index: 10 !important;
  top: 62.5% !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 28.95% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-rows: 33.5% 30.5% 36% !important;
  overflow: hidden !important;
  color: var(--gobi-parity-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls::before,
#app .character-maker-layout.is-gobi-maker .character-maker-controls::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 6.7% 0 24.3% !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(214, 151, 95, 0.46) !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  fieldset:last-child {
  border-bottom: 0 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
  position: absolute !important;
  top: 50% !important;
  left: 6.7% !important;
  box-sizing: border-box !important;
  width: 16.5% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  position: static !important;
  left: auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Bap Gowun", sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  color: var(--gobi-parity-coral) !important;
  font-size: clamp(18px, 4.8vw, 21px) !important;
  letter-spacing: -0.02em !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  legend
  span {
  color: var(--gobi-parity-ink) !important;
  font-size: clamp(14px, 3.9vw, 17px) !important;
  letter-spacing: -0.055em !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1.5% !important;
  transform: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-options {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13.5px !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  fieldset:nth-of-type(3)
  .character-maker-color-options {
  transform: translateY(-11px) !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  appearance: none !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 251, 238, 0.9) !important;
  box-shadow: inset 0 0 0 1px rgba(204, 168, 120, 0.2) !important;
  transform: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
  width: 100% !important;
  max-width: 54px !important;
  aspect-ratio: 1 !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
  width: 43px !important;
  max-width: 14.5% !important;
  aspect-ratio: 1 !important;
  flex: 0 0 auto !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-color-options
  button
  > span {
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  margin: 3px !important;
  display: block !important;
  opacity: 1 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(74, 45, 27, 0.04)),
    var(--option-color) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: inset 0 0 0 1px rgba(74, 45, 27, 0.15) !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-hair-options
  button::after,
#app
  .character-maker-layout.is-gobi-maker
  .character-maker-color-options
  button::after {
  position: absolute !important;
  inset: -3px !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: transparent !important;
  border: 2px solid var(--gobi-parity-coral) !important;
  border-radius: 48% 52% 45% 55% / 52% 46% 54% 48% !important;
  transform: rotate(-3deg) !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-hair-options
  button.active::after,
#app
  .character-maker-layout.is-gobi-maker
  .character-maker-color-options
  button.active::after {
  opacity: 1 !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-hair-options
  button.active::before,
#app
  .character-maker-layout.is-gobi-maker
  .character-maker-color-options
  button.active::before {
  position: absolute !important;
  z-index: 3 !important;
  right: 10% !important;
  bottom: -7px !important;
  left: 10% !important;
  display: block !important;
  height: 3px !important;
  content: "" !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: var(--gobi-parity-coral) !important;
  border-radius: 50% !important;
  transform: rotate(-2deg) !important;
}

/* Preserve the Gobi-specific face and hairstyle thumbnails. */
#app .character-maker-layout.is-gobi-maker .gobi-hair-chip {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background: #fff8e7 !important;
  border-radius: 50% !important;
}

#app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
  position: absolute !important;
  top: -3px !important;
  left: 50% !important;
  width: 74px !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

/* Reuse the exact Jarin coral brush artwork and interaction bounds. */
#app
  .character-maker-layout.is-gobi-maker
  .character-story-select.character-maker-select {
  position: absolute !important;
  z-index: 20 !important;
  right: 4.6% !important;
  bottom: 2.35% !important;
  left: 4.6% !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: 6.55% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: transparent !important;
  background:
    transparent url("./assets/ui/interactive/character-maker-coral-cta-v1.png")
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  transform: none !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-story-select.character-maker-select
  > * {
  visibility: hidden !important;
  opacity: 0 !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
    gap: 6px !important;
  }

  #app
    .character-maker-layout.is-gobi-maker
    .character-maker-controls
    legend
    b {
    font-size: 17px !important;
  }

  #app
    .character-maker-layout.is-gobi-maker
    .character-maker-controls
    legend
    span {
    font-size: 13px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
    max-width: 46px !important;
  }

  #app .character-maker-layout.is-gobi-maker .gobi-hair-chip img {
    width: 68px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-color-options {
    gap: 9px !important;
  }

  #app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
    width: 39px !important;
  }
}

/* Final typography lock: use Jarin's Gaegu family for every visible label. */
#app .character-maker-layout.is-gobi-maker .character-story-header::before,
#app .character-maker-layout.is-gobi-maker .character-story-header > span,
#app .character-maker-layout.is-gobi-maker .character-story-header > b,
#app .character-maker-layout.is-gobi-maker .character-story-header > button,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options small,
#app
  .character-maker-layout.is-gobi-maker
  .character-story-select.character-maker-select
  > span {
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
}

/*
 * Gobi controls and shirt cleanup.
 *
 * Do not rely on a fieldset border for the row separators: browsers reserve a
 * gap for the legend and can paint short vertical fragments around it. Draw
 * the two separators independently so they remain continuous at every size.
 */
#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  border: 0 !important;
  border-block: 0 !important;
  border-inline: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  fieldset::before {
  content: none !important;
  display: none !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  fieldset::after {
  position: absolute !important;
  z-index: 0 !important;
  right: 4.6% !important;
  bottom: 0 !important;
  left: 4.6% !important;
  display: block !important;
  height: 1px !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(214, 151, 95, 0.5) 0 4px,
      transparent 4px 9px
    ) !important;
  border: 0 !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-controls
  fieldset:last-child::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
  float: none !important;
  min-inline-size: 0 !important;
  max-inline-size: none !important;
  border: 0 !important;
  outline: 0 !important;
}

/* Keep the selected shirt tint clipped to the live Gobi shirt artwork. */
#app .character-maker-layout.is-gobi-maker .character-maker-figure {
  isolation: isolate !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-figure
  > .character-maker-shirt-tint,
#app
  .character-confirm-maker-figure.is-gobi-maker
  > .character-confirm-shirt-tint {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  background: var(--maker-shirt) !important;
  -webkit-mask-image: var(--maker-shirt-mask) !important;
  -webkit-mask-position: center !important;
  -webkit-mask-size: contain !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-image: var(--maker-shirt-mask) !important;
  mask-position: center !important;
  mask-size: contain !important;
  mask-repeat: no-repeat !important;
  mix-blend-mode: color !important;
  opacity: 0.96 !important;
}

#app
  .character-maker-layout.is-gobi-maker
  .character-maker-figure.default-shirt
  > .character-maker-shirt-tint,
#app
  .character-confirm-maker-figure.is-gobi-maker.default-shirt
  > .character-confirm-shirt-tint {
  display: none !important;
  opacity: 0 !important;
}

/*
 * Gobi's default shirt is cream, not untreated white.
 * Keep the masked cream layer visible while preserving the embroidery artwork.
 */
#app
  .character-maker-layout.is-gobi-maker
  .character-maker-figure.default-shirt
  > .character-maker-shirt-tint,
#app
  .character-confirm-maker-figure.is-gobi-maker.default-shirt
  > .character-confirm-shirt-tint {
  display: block !important;
  background: #f4dfb3 !important;
  mix-blend-mode: multiply !important;
  opacity: 0.96 !important;
}

/* ===== character-maker-jarin-default-live-v1.css ===== */
/*
 * Jarin default-style parity.
 *
 * The approved page background contains a baked default character, while all
 * customized hair options use the normalized live figure. Cover the baked
 * preview and render the same normalized live figure for the default style.
 */
#app
  .character-maker-layout.is-default-style:not(.is-gobi-maker)
  .character-maker-preview::before {
  display: block !important;
  opacity: 1 !important;
}

#app
  .character-maker-layout.is-default-style:not(.is-gobi-maker)
  .character-maker-figure {
  opacity: 1 !important;
  pointer-events: none !important;
}

/* ===== character-maker-jarin-shirt-fidelity-v1.css ===== */
/* Both character makers use precomposed watercolor shirt overlays. */
#app
  .character-maker-layout:not(.is-gobi-maker)
  .character-maker-figure {
  isolation: isolate;
}

#app
  .character-maker-figure
  > img.character-maker-shirt-overlay,
#app
  .character-confirm-maker-figure
  > img.character-maker-shirt-overlay {
  z-index: 2 !important;
  pointer-events: none !important;
}

/* ===== character-maker-final-modal-reference-v2.css ===== */
/*
 * Final character confirmation modal — reference lock v2.
 *
 * Jarin and Gobi share this exact presentation. The live character artwork,
 * selected colors and stage name remain character-specific.
 */

#app .character-confirm-backdrop {
  position: absolute !important;
  z-index: 80 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: 72px 0 max(28px, env(safe-area-inset-bottom)) !important;
  background: rgba(58, 52, 44, 0.64) !important;
  -webkit-backdrop-filter: blur(1.2px) saturate(0.72) !important;
  backdrop-filter: blur(1.2px) saturate(0.72) !important;
}

#app .character-confirm-dialog.character-final-confirm {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: calc(100% - 30px) !important;
  max-width: 378px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 98px 27px 24px !important;
  overflow: visible !important;
  color: #402919 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  text-align: center !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-synthesis: none !important;
}

/* Ivory handmade paper with the same blue stitches and coral dots. */
#app .character-confirm-dialog.character-final-confirm::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    url("./assets/ui/final-confirm-watercolor-motifs-v1.svg") center / 100%
      100% no-repeat,
    linear-gradient(rgba(255, 253, 246, 0.22), rgba(255, 249, 232, 0.26)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 164%
      auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow:
    0 0 0 3px rgba(255, 249, 231, 0.3),
    0 0 14px 5px rgba(255, 250, 237, 0.34),
    0 12px 30px rgba(44, 34, 25, 0.11) !important;
  clip-path: none !important;
  -webkit-mask:
    url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100%
    no-repeat !important;
  mask:
    url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100%
    no-repeat !important;
  filter: contrast(1.02) saturate(0.72) !important;
}

/* Warm coral paper edge peeking out along the right and bottom. */
#app .character-confirm-dialog.character-final-confirm::after {
  position: absolute !important;
  z-index: -2 !important;
  inset: 7px -6px -8px 7px !important;
  display: block !important;
  content: "" !important;
  opacity: 0.48 !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(221, 118, 95, 0.72), rgba(221, 118, 95, 0.72)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 50% / 160%
      auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask:
    url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100%
    no-repeat !important;
  mask:
    url("./assets/ui/final-confirm-deckle-mask-v1.svg") center / 100% 100%
    no-repeat !important;
}

/* Large overlapping watercolor portrait medallion. */
#app .character-confirm-avatar.character-confirm-maker {
  position: absolute !important;
  z-index: 3 !important;
  top: -62px !important;
  left: 50% !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: 148px !important;
  height: 148px !important;
  margin: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  background-color: #fff8e8 !important;
  background-image:
    linear-gradient(rgba(255, 250, 235, 0.78), rgba(250, 234, 194, 0.74)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center, 50% 46% !important;
  background-size: 100% 100%, 180% auto !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 7px rgba(255, 251, 238, 0.96),
    0 0 0 11px rgba(242, 226, 191, 0.48),
    0 9px 20px rgba(74, 45, 27, 0.11) !important;
  transform: translateX(-50%) !important;
}

#app .character-confirm-avatar.character-confirm-maker::before {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  display: block !important;
  content: "" !important;
  pointer-events: none !important;
  background:
    linear-gradient(rgba(255, 250, 235, 0.28), rgba(250, 234, 194, 0.2)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 46% / 180%
      auto no-repeat !important;
  border-radius: 50% !important;
}

/*
 * The source art is a full-body 410×720 canvas. Enlarging it here makes the
 * circular portrait match the reference's head-and-torso crop.
 */
#app
  .character-confirm-avatar.character-confirm-maker
  .character-confirm-maker-figure {
  position: absolute !important;
  z-index: 1 !important;
  top: -2px !important;
  left: 50% !important;
  width: 132px !important;
  height: 232px !important;
  display: block !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  transform: translateX(-50%) !important;
}

#app
  .character-confirm-avatar.character-confirm-maker
  .character-confirm-maker-figure
  > img,
#app
  .character-confirm-avatar.character-confirm-maker
  .character-confirm-maker-figure
  > i {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#app
  .character-confirm-avatar.character-confirm-maker
  .character-confirm-maker-figure
  > img {
  z-index: 1 !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: none !important;
  filter: none !important;
}

#app
  .character-confirm-avatar.character-confirm-maker
  .character-confirm-shirt-tint {
  z-index: 2 !important;
}

/* Kicker and stitched coral underline. */
#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-kicker {
  position: relative !important;
  display: inline-block !important;
  margin: 0 0 10px !important;
  padding: 0 0 9px !important;
  color: #de755f !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-kicker::after {
  position: absolute !important;
  right: 4% !important;
  bottom: 0 !important;
  left: 4% !important;
  display: block !important;
  height: 3px !important;
  content: "" !important;
  opacity: 0.9 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(222, 117, 95, 0.88) 0 4px,
      transparent 4px 8px
    ) !important;
  transform: rotate(-1deg) !important;
}

#app .character-confirm-dialog.character-final-confirm h2 {
  margin: 0 !important;
  color: #402919 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: clamp(27px, 6.8vw, 30px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.14 !important;
  white-space: nowrap !important;
}

#app .character-confirm-dialog.character-final-confirm > p {
  margin: 17px 0 0 !important;
  color: #402919 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

#app .character-confirm-dialog.character-final-confirm > small {
  position: relative !important;
  display: block !important;
  margin: 18px 0 0 !important;
  padding: 18px 0 0 !important;
  color: #402919 !important;
  border: 0 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.5 !important;
  white-space: nowrap !important;
}

#app .character-confirm-dialog.character-final-confirm > small::before {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  height: 2px !important;
  content: "" !important;
  opacity: 0.58 !important;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(222, 143, 102, 0.72) 0 4px,
      transparent 4px 9px
    ) !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 19px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.5fr) !important;
  align-items: center !important;
  gap: 11px !important;
  overflow: visible !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 8px 4px !important;
  justify-self: stretch !important;
  color: #402919 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  transform: none !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:first-child {
  padding: 7px 0 12px !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:first-child::after {
  position: absolute !important;
  right: 11% !important;
  bottom: 5px !important;
  left: 11% !important;
  display: block !important;
  height: 7px !important;
  content: "" !important;
  opacity: 0.92 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid #de755f !important;
  border-radius: 0 0 50% 45% !important;
  transform: rotate(-1.2deg) skewX(-7deg) !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:last-child {
  min-height: 58px !important;
  padding: 8px 10px !important;
  color: #fffaf0 !important;
  background:
    linear-gradient(rgba(213, 112, 91, 0.95), rgba(213, 112, 91, 0.95)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 58% / 225%
      auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  clip-path:
    polygon(
      1% 18%,
      7% 8%,
      18% 10%,
      30% 6%,
      42% 9%,
      54% 6%,
      66% 9%,
      78% 6%,
      90% 10%,
      98% 8%,
      100% 24%,
      99% 50%,
      100% 76%,
      97% 90%,
      88% 92%,
      76% 90%,
      64% 94%,
      52% 91%,
      40% 94%,
      28% 91%,
      16% 93%,
      5% 88%,
      0 72%,
      1% 46%
    ) !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:last-child
  span {
  display: inline-block !important;
  margin-left: 7px !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 0.7 !important;
  vertical-align: -2px !important;
}

@media (max-width: 370px), (max-height: 760px) {
  #app .character-confirm-backdrop {
    padding: 64px 0 24px !important;
  }

  #app .character-confirm-dialog.character-final-confirm {
    width: calc(100% - 24px) !important;
    max-width: 342px !important;
    padding: 92px 21px 24px !important;
  }

  #app .character-confirm-avatar.character-confirm-maker {
    top: -57px !important;
    width: 138px !important;
    height: 138px !important;
  }

  #app
    .character-confirm-avatar.character-confirm-maker
    .character-confirm-maker-figure {
    width: 123px !important;
    height: 216px !important;
  }

  #app
    .character-confirm-dialog.character-final-confirm
    .character-confirm-kicker {
    font-size: 13px !important;
  }

  #app .character-confirm-dialog.character-final-confirm h2 {
    font-size: 27px !important;
  }

  #app .character-confirm-dialog.character-final-confirm > p {
    margin-top: 16px !important;
    font-size: 13.5px !important;
  }

  #app .character-confirm-dialog.character-final-confirm > small {
    margin-top: 16px !important;
    padding-top: 16px !important;
    font-size: 13px !important;
  }

  #app
    .character-confirm-dialog.character-final-confirm
    .character-confirm-actions {
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.5fr) !important;
    gap: 8px !important;
    margin-top: 19px !important;
  }

  #app
    .character-confirm-dialog.character-final-confirm
    .character-confirm-actions
    button,
  #app
    .character-confirm-dialog.character-final-confirm
    .character-confirm-actions
    button:last-child {
    min-height: 54px !important;
    font-size: 14px !important;
  }
}

/*
 * Shared Jarin/Gobi final-check actions.
 * Match the watercolor choice modal without changing the modal geometry.
 */
#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:first-child {
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:first-child::after {
  right: 15% !important;
  bottom: 2px !important;
  left: 15% !important;
  height: 12px !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg")
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

#app
  .character-confirm-dialog.character-final-confirm
  .character-confirm-actions
  button:last-child {
  min-height: 60px !important;
  padding: 9px 13px !important;
  color: #fffaf0 !important;
  background: url("./assets/ui/character-choice-coral-brush-v2.svg")
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  clip-path: none !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

/* ===== character-choice-modal-reference-v1.css ===== */
/*
 * Character choice confirmation reuses the exact final-confirm modal.
 * This file only adapts each character illustration to the shared portrait crop.
 */
#app .character-choice-dialog.character-confirm-dialog.character-final-confirm h2::after,
#app .character-choice-actions.character-confirm-actions::before {
  content: none !important;
  display: none !important;
}

#app .character-choice-backdrop.character-confirm-backdrop {
  position: fixed !important;
}

#app .character-choice-dialog.character-confirm-dialog.character-final-confirm {
  width: calc(100% - 24px) !important;
  max-width: 388px !important;
  padding-right: 44px !important;
  padding-left: 44px !important;
  transform: translateY(-30px) !important;
}

#app
  .character-choice-portrait.character-confirm-avatar.character-confirm-maker
  img {
  position: absolute !important;
  display: block !important;
  width: 287px !important;
  max-width: none !important;
  height: auto !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

#app
  .character-choice-jarin
  .character-choice-portrait.character-confirm-avatar
  img {
  top: -173px !important;
  left: -17px !important;
}

#app
  .character-choice-gobi
  .character-choice-portrait.character-confirm-avatar
  img {
  top: -182px !important;
  left: -125px !important;
}

#app .character-choice-dialog.character-confirm-dialog.character-final-confirm h2 {
  padding: 0 !important;
  white-space: nowrap !important;
}

#app .character-choice-dialog.character-confirm-dialog.character-final-confirm > p,
#app .character-choice-dialog.character-confirm-dialog.character-final-confirm > small {
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

#app
  .character-choice-dialog.character-confirm-dialog.character-final-confirm
  > p
  strong,
#app
  .character-choice-dialog.character-confirm-dialog.character-final-confirm
  > small
  b {
  font: inherit !important;
  color: inherit !important;
}

#app
  .character-choice-dialog.character-confirm-dialog.character-final-confirm
  .character-choice-actions.character-confirm-actions
  button:first-child {
  font-size: 16px !important;
  font-weight: 400 !important;
}

#app
  .character-choice-dialog.character-confirm-dialog.character-final-confirm
  .character-choice-actions.character-confirm-actions
  button:first-child::after {
  right: 15% !important;
  bottom: 2px !important;
  left: 15% !important;
  height: 12px !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg")
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

#app
  .character-choice-dialog.character-confirm-dialog.character-final-confirm
  .character-choice-actions.character-confirm-actions
  button:last-child {
  min-height: 60px !important;
  padding: 9px 13px !important;
  color: #fffaf0 !important;
  background: url("./assets/ui/character-choice-coral-brush-v2.svg")
    center / 100% 100% no-repeat !important;
  border: 0 !important;
  clip-path: none !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

@media (max-width: 400px) {
  #app .character-choice-dialog.character-confirm-dialog.character-final-confirm {
    padding-right: 30px !important;
    padding-left: 30px !important;
  }
}

@media (max-width: 370px) {
  #app .character-choice-dialog.character-confirm-dialog.character-final-confirm {
    width: calc(100% - 22px) !important;
    max-width: 342px !important;
    padding-right: 24px !important;
    padding-left: 24px !important;
    transform: translateY(-24px) !important;
  }
}

/* ===== home-character-hero-v1.css ===== */
/* Home v3: a blue watercolor cooking journal in the same visual family. */
.phone.bapstage-home-v2 {
  --home-journal-sky: #c8e0e8;
  --home-journal-sky-deep: #9fc6d4;
  --home-journal-paper: #fffaf0;
  --home-journal-cream: #fff1cf;
  --home-journal-butter: #f3d878;
  --home-journal-coral: #ed765f;
  --home-journal-coral-deep: #cf5948;
  --home-journal-mint: #b8d7c7;
  --home-journal-ink: #482d20;
  --home-journal-line: rgba(102, 73, 54, .2);
  grid-template-rows:
    minmax(0, 1fr)
    calc(82px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--home-journal-sky) !important;
  box-shadow: none !important;
}

.phone.bapstage-home-v2.character-home-gobi-theme {
  --home-journal-sky: #cfe3e5;
  --home-journal-sky-deep: #a8ced0;
  --home-journal-coral: #df7484;
  --home-journal-coral-deep: #bd586c;
  --home-journal-mint: #b7d8c9;
}

.phone.bapstage-home-v2::before,
.phone.bapstage-home-v2::after,
.phone.bapstage-home-v2 > .top {
  display: none !important;
}

.phone.bapstage-home-v2 > .content {
  display: block !important;
  min-height: 0;
  padding: 0 !important;
  overflow: hidden !important;
  background-color: var(--home-journal-sky) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-position: center !important;
  background-repeat: repeat !important;
  background-size: 96px 96px !important;
}

.bapstage-home-v2 .character-hero-home {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0 !important;
  padding:
    max(17px, env(safe-area-inset-top))
    17px
    12px !important;
  overflow: hidden;
  color: var(--home-journal-ink);
  background: transparent !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
}

.bapstage-home-v2 .character-hero-home::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 88px;
  right: 18px;
  bottom: 112px;
  left: 18px;
  border: 1px solid rgba(90, 67, 52, .1);
  border-radius: 47% 53% 46% 54% / 6% 7% 5% 6%;
  background-color: rgba(255, 250, 240, .92);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 5px 6px 0 rgba(86, 122, 134, .13);
  transform: rotate(-.35deg);
}

.phone.character-home-gobi-theme .character-hero-home::before {
  transform: rotate(.35deg);
}

.bapstage-home-v2 .character-hero-home::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 122px;
  left: 50%;
  width: 79%;
  height: 58%;
  border-radius: 49% 51% 45% 55% / 51% 45% 55% 49%;
  background-color: rgba(255, 239, 184, .48);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  transform: translateX(-50%) rotate(-2deg);
}

.phone.character-home-gobi-theme .character-hero-home::after {
  background-color: rgba(247, 224, 188, .52);
  transform: translateX(-50%) rotate(2deg);
}

.bapstage-home-v2 .character-hero-brand {
  position: relative;
  z-index: 12;
  min-height: 65px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0 3px 11px;
  border-bottom: 2px dashed rgba(237, 118, 95, .62);
}

.bapstage-home-v2 .character-hero-brand > div {
  min-width: 0;
}

.bapstage-home-v2 .character-hero-brand > div > span {
  display: block;
  margin-bottom: 2px;
  color: var(--home-journal-coral-deep);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .15em;
}

.bapstage-home-v2 .character-hero-brand h1 {
  margin: 0;
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: clamp(27px, 7.6vw, 35px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}

.bapstage-home-v2 .character-hero-brand > button {
  width: 55px;
  min-height: 45px;
  display: grid;
  place-content: center;
  gap: 0;
  padding: 4px 7px 5px;
  border: 2px solid rgba(237, 118, 95, .72);
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
  color: var(--home-journal-ink);
  background-color: rgba(255, 250, 240, .86);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 2px 3px 0 rgba(72, 45, 32, .12);
  cursor: pointer;
  transform: rotate(1.5deg);
}

.bapstage-home-v2 .character-hero-brand > button span {
  color: var(--home-journal-coral-deep);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 6px;
  font-weight: 700;
  letter-spacing: .12em;
}

.bapstage-home-v2 .character-hero-brand > button strong {
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 20px;
  line-height: .9;
}

.bapstage-home-v2 .character-hero-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.bapstage-home-v2 .character-hero-name {
  position: absolute;
  z-index: 9;
  top: 20px;
  left: 1px;
  display: grid;
  justify-items: start;
  transform: rotate(-1.6deg);
}

.bapstage-home-v2 .character-hero-name > span {
  display: inline-block;
  padding: 3px 7px 2px;
  color: var(--home-journal-paper);
  background: var(--home-journal-ink);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}

.bapstage-home-v2 .character-hero-name h2 {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin: 7px 0 0;
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: clamp(34px, 9.2vw, 43px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.06em;
}

.bapstage-home-v2 .character-hero-name h2 strong {
  color: inherit;
  font: inherit;
}

.bapstage-home-v2 .character-hero-name h2 small {
  margin-bottom: 1px;
  color: var(--home-journal-coral-deep);
  font: inherit;
  font-size: 17px;
  line-height: 1;
  white-space: nowrap;
}

.bapstage-home-v2 .character-hero-figure {
  position: absolute;
  z-index: 6;
  top: 7px;
  right: 46%;
  bottom: 5px;
  width: min(72%, 302px);
  display: grid;
  place-items: end center;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--home-journal-ink);
  background: transparent;
  box-shadow: none;
  transform: translateX(50%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bapstage-home-v2 .character-hero-halo {
  position: absolute;
  z-index: -1;
  top: 14%;
  left: 50%;
  width: 91%;
  aspect-ratio: 1;
  border: 2px dashed rgba(237, 118, 95, .42);
  border-radius: 49% 51% 47% 53% / 52% 46% 54% 48%;
  background-color: rgba(255, 240, 194, .55);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 6px 7px 0 rgba(159, 198, 212, .28);
  transform: translateX(-50%) rotate(4deg);
}

.phone.character-home-gobi-theme .character-hero-halo {
  background-color: rgba(247, 218, 208, .58);
  border-color: rgba(223, 116, 132, .42);
}

.bapstage-home-v2 .character-hero-figure-art {
  position: absolute;
  inset: 0;
  display: block;
}

.bapstage-home-v2 .character-hero-figure-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.bapstage-home-v2 .character-hero-figure-art > img.character-hero-shirt-overlay {
  z-index: 2;
}

.bapstage-home-v2 .character-hero-figure:focus-visible {
  outline: 3px dashed var(--home-journal-coral);
  outline-offset: 3px;
}

.bapstage-home-v2 .character-hero-progress {
  position: absolute;
  z-index: 10;
  right: 0;
  bottom: 18px;
  width: 74px;
  display: grid;
  justify-items: end;
  gap: 4px;
  padding: 9px 9px 8px;
  border: 2px solid rgba(237, 118, 95, .7);
  border-radius: 49% 51% 45% 55% / 52% 46% 54% 48%;
  color: var(--home-journal-ink);
  background-color: rgba(255, 250, 240, .9);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 3px 3px 0 rgba(72, 45, 32, .12);
  transform: rotate(1.5deg);
}

.bapstage-home-v2 .character-hero-progress > small {
  overflow: hidden;
  max-width: 100%;
  color: rgba(72, 45, 32, .6);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 6px;
  font-weight: 700;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bapstage-home-v2 .character-hero-progress > span {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  line-height: 1;
}

.bapstage-home-v2 .character-hero-progress > span b {
  color: var(--home-journal-coral-deep);
  font-size: 22px;
}

.bapstage-home-v2 .character-hero-progress > span em {
  color: var(--home-journal-ink);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.bapstage-home-v2 .character-hero-progress > i {
  width: 100%;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(72, 45, 32, .12);
}

.bapstage-home-v2 .character-hero-progress > i em {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: var(--home-journal-coral);
}

.bapstage-home-v2 .character-hero-progress > strong {
  color: rgba(72, 45, 32, .66);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
}

.bapstage-home-v2 .character-hero-motif {
  position: absolute;
  z-index: 3;
  display: block;
  pointer-events: none;
}

.bapstage-home-v2 .character-hero-motif.motif-stitch {
  right: 4px;
  bottom: 31%;
  width: 26px;
  height: 26px;
  color: rgba(78, 125, 161, .58);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 24px;
  line-height: .68;
  transform: rotate(8deg);
}

.bapstage-home-v2 .character-hero-motif.motif-stitch::before {
  content: "×\A×";
  white-space: pre;
}

.bapstage-home-v2 .character-hero-motif.motif-dots {
  top: 33%;
  left: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(131, 170, 113, .7);
  box-shadow:
    17px 0 0 rgba(131, 170, 113, .7),
    0 17px 0 rgba(131, 170, 113, .7),
    17px 17px 0 rgba(131, 170, 113, .7);
  transform: rotate(-4deg);
}

.bapstage-home-v2 .character-hero-motif.motif-sun {
  right: 3px;
  top: 25%;
  width: 35px;
  height: 10px;
  border-radius: 999px;
  background: rgba(243, 216, 120, .8);
  box-shadow:
    0 14px 0 rgba(243, 216, 120, .8),
    0 28px 0 rgba(243, 216, 120, .8);
  transform: rotate(3deg);
}

.bapstage-home-v2 .character-hero-motif.motif-checker {
  top: 11px;
  right: 5px;
  width: 44px;
  display: grid;
  grid-template-columns: repeat(4, 11px);
  grid-auto-rows: 11px;
  opacity: .56;
  transform: rotate(2deg);
}

.bapstage-home-v2 .character-hero-motif.motif-checker i {
  display: block;
  background: rgba(82, 132, 170, .65);
}

.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(2),
.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(4),
.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(5),
.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(7),
.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(10),
.bapstage-home-v2 .character-hero-motif.motif-checker i:nth-child(12) {
  background: rgba(255, 250, 240, .82);
}

.bapstage-home-v2 .character-hero-today {
  position: relative;
  z-index: 14;
  min-height: 108px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 7px;
  padding-top: 5px;
}

.bapstage-home-v2 .character-hero-meal,
.bapstage-home-v2 .character-hero-next {
  min-width: 0;
  min-height: 101px;
  color: var(--home-journal-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.bapstage-home-v2 .character-hero-meal {
  display: grid;
  grid-template-columns: 61px minmax(0, 1fr) 27px;
  align-items: center;
  gap: 8px;
  padding: 8px 8px;
  border: 1px dashed rgba(72, 45, 32, .28);
  border-radius: 4% 3% 5% 3% / 5% 4% 3% 5%;
  clip-path: none;
  background-color: rgba(255, 250, 240, .92);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 3px 4px 0 rgba(72, 45, 32, .1);
  text-align: left;
  transform: rotate(.25deg);
}

.bapstage-home-v2 .character-hero-meal-art {
  width: 59px;
  height: 67px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 240, .82);
  border-radius: 52% 48% 45% 55% / 49% 55% 45% 51%;
  background: var(--home-journal-butter);
  box-shadow: 2px 3px 0 rgba(72, 45, 32, .13);
  transform: rotate(-2deg);
}

.bapstage-home-v2 .character-hero-meal-art img {
  width: 77px;
  height: 77px;
  display: block;
  object-fit: contain;
}

.bapstage-home-v2 .character-hero-meal-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.bapstage-home-v2 .character-hero-meal-copy small {
  color: var(--home-journal-coral-deep);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}

.bapstage-home-v2 .character-hero-meal-copy strong {
  overflow: hidden;
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: clamp(21px, 5.8vw, 27px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bapstage-home-v2 .character-hero-meal-copy em {
  color: rgba(72, 45, 32, .62);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
}

.bapstage-home-v2 .character-hero-meal-arrow {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--home-journal-paper);
  background: var(--home-journal-coral);
  font-family: "Bap Gowun", sans-serif;
  font-size: 18px;
  line-height: 1;
  box-shadow: 2px 2px 0 rgba(72, 45, 32, .14);
}

.bapstage-home-v2 .character-hero-next {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 5px;
  padding: 11px 9px 9px;
  border: 1px dashed rgba(72, 45, 32, .26);
  border-radius: 8% 6% 9% 5% / 6% 9% 5% 8%;
  background-color: rgba(255, 239, 188, .88);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 96px 96px;
  box-shadow: 3px 4px 0 rgba(72, 45, 32, .1);
  text-align: left;
  transform: rotate(-.6deg);
}

.bapstage-home-v2 .character-hero-next span {
  min-width: 0;
}

.bapstage-home-v2 .character-hero-next small {
  display: block;
  margin-bottom: 5px;
  color: var(--home-journal-coral-deep);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: .1em;
}

.bapstage-home-v2 .character-hero-next strong {
  display: block;
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 16px;
  font-weight: 700;
  line-height: .95;
  white-space: nowrap;
}

.bapstage-home-v2 .character-hero-next > em {
  color: rgba(72, 45, 32, .6);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.3;
}

.phone.bapstage-home-v2 > .editorial-tabs {
  position: relative !important;
  z-index: 30;
  box-sizing: border-box;
  width: 100%;
  height: calc(82px + env(safe-area-inset-bottom));
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 1px !important;
  padding: 7px 9px calc(7px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background-color: rgba(255, 250, 240, .94) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 96px 96px !important;
  box-shadow: 0 -2px 0 rgba(237, 118, 95, .42) !important;
}

.phone.bapstage-home-v2 > .editorial-tabs::before,
.phone.bapstage-home-v2 > .editorial-tabs::after {
  display: none !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button {
  position: relative;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 36px 13px !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(72, 45, 32, .52) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 1px;
  left: 50%;
  width: 39px;
  height: 35px;
  border-radius: 48% 52% 45% 55% / 53% 46% 54% 47%;
  background: rgba(200, 224, 232, .38);
  transform: translateX(-50%) rotate(-4deg);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(2)::before {
  background: rgba(184, 215, 199, .45);
  transform: translateX(-50%) rotate(3deg);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(3)::before {
  background: rgba(243, 216, 120, .42);
  transform: translateX(-50%) rotate(-2deg);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(4)::before {
  background: rgba(229, 173, 194, .38);
  transform: translateX(-50%) rotate(4deg);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(5)::before {
  background: rgba(237, 118, 95, .28);
  transform: translateX(-50%) rotate(-3deg);
}

.phone.bapstage-home-v2 > .editorial-tabs button.active {
  color: var(--home-journal-coral-deep) !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button.active::before {
  opacity: .95;
  box-shadow: inset 0 0 0 1px rgba(237, 118, 95, .25);
}

.phone.bapstage-home-v2 > .editorial-tabs button.active::after {
  content: "";
  position: absolute;
  right: 24%;
  bottom: 1px;
  left: 24%;
  height: 2px;
  border-radius: 999px;
  background: var(--home-journal-coral);
  transform: rotate(-2deg);
}

.phone.bapstage-home-v2 > .editorial-tabs .tab-menu-icon,
.phone.bapstage-home-v2 > .editorial-tabs .tab-menu-label {
  position: relative;
  z-index: 2;
}

.phone.bapstage-home-v2 > .editorial-tabs .tab-menu-icon {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center;
}

.phone.bapstage-home-v2 > .editorial-tabs .profile-poster-menu-svg {
  width: 31px !important;
  height: 31px !important;
  display: block;
  opacity: .84;
  filter: saturate(.72) brightness(1.05);
  mix-blend-mode: multiply;
  transform: none !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button.active .profile-poster-menu-svg {
  opacity: .96;
  filter: saturate(.82) brightness(1.02);
}

.phone.bapstage-home-v2 > .editorial-tabs .tab-menu-label {
  color: inherit !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (max-height: 730px) and (min-width: 561px) {
  .bapstage-home-v2 .character-hero-home {
    padding-top: 11px !important;
    padding-bottom: 9px !important;
  }

  .bapstage-home-v2 .character-hero-home::before {
    top: 76px;
    bottom: 103px;
  }

  .bapstage-home-v2 .character-hero-home::after {
    top: 105px;
  }

  .bapstage-home-v2 .character-hero-brand {
    min-height: 55px;
    padding-bottom: 8px;
  }

  .bapstage-home-v2 .character-hero-figure {
    top: 1px;
    bottom: 1px;
    width: min(68%, 270px);
  }

  .bapstage-home-v2 .character-hero-name {
    top: 14px;
  }

  .bapstage-home-v2 .character-hero-name h2 {
    font-size: 36px;
  }

  .bapstage-home-v2 .character-hero-progress {
    bottom: 10px;
  }

  .bapstage-home-v2 .character-hero-today {
    min-height: 98px;
  }

  .bapstage-home-v2 .character-hero-meal,
  .bapstage-home-v2 .character-hero-next {
    min-height: 92px;
  }
}

@media (max-width: 370px) {
  .bapstage-home-v2 .character-hero-home {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  .bapstage-home-v2 .character-hero-home::before {
    right: 14px;
    left: 14px;
  }

  .bapstage-home-v2 .character-hero-name h2 {
    font-size: 34px;
  }

  .bapstage-home-v2 .character-hero-today {
    grid-template-columns: minmax(0, 1fr) 95px;
    gap: 6px;
  }

  .bapstage-home-v2 .character-hero-meal {
    grid-template-columns: 52px minmax(0, 1fr) 24px;
    gap: 6px;
    padding-right: 6px;
  }

  .bapstage-home-v2 .character-hero-meal-art {
    width: 52px;
    height: 61px;
  }

  .bapstage-home-v2 .character-hero-next {
    padding-right: 7px;
    padding-left: 8px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .bapstage-home-v2 .character-hero-figure-art {
    transform-origin: center bottom;
    animation: home-character-breathe 4.5s ease-in-out infinite;
  }
}

@keyframes home-character-breathe {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-3px) scale(1.006, .997);
  }
}

/*
 * Home v4 — refined watercolor table.
 * The home keeps its own daily-journal layout while sharing the approved
 * authentication and character-select palette, paper, typography and spacing.
 */
.phone.bapstage-home-v2,
.phone.bapstage-home-v2.character-home-gobi-theme {
  --home-journal-sky: #fff1a5;
  --home-journal-sky-deep: #e7d26f;
  --home-journal-paper: #fffaf0;
  --home-journal-cream: #fff7e4;
  --home-journal-butter: #f6df78;
  --home-journal-coral: #ef6d58;
  --home-journal-coral-deep: #d95946;
  --home-journal-mint: #a9cf95;
  --home-journal-ink: #2d190f;
  --home-journal-line: rgba(63, 37, 24, .16);
  grid-template-rows:
    minmax(0, 1fr)
    calc(80px + env(safe-area-inset-bottom)) !important;
  background: #fff1a5 !important;
}

.phone.bapstage-home-v2.character-home-gobi-theme {
  --home-journal-butter: #f4dcb8;
  --home-journal-coral: #e97969;
  --home-journal-coral-deep: #c9534d;
  --home-journal-mint: #a8cfbe;
}

.phone.bapstage-home-v2 > .content {
  background-color: #fff1a5 !important;
  background-image:
    url("./assets/ui/auth-watercolor-background-v2.png?v=20260729-auth-v2"),
    url("./assets/paper-grain.svg") !important;
  background-position: center top, center !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 100% auto, 320px 320px !important;
}

.bapstage-home-v2 .character-hero-home {
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding:
    max(18px, env(safe-area-inset-top))
    20px
    12px !important;
  color: var(--home-journal-ink);
  font-family: "Pretendard", "SUIT", sans-serif;
}

.bapstage-home-v2 .character-hero-home::before {
  top: 78px;
  right: 14px;
  bottom: 112px;
  left: 14px;
  border: 0;
  border-radius: 48% 52% 46% 54% / 5% 7% 4% 6%;
  background-color: rgba(255, 250, 240, .9);
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 320px 320px, 112px 112px;
  box-shadow:
    0 14px 30px rgba(88, 61, 34, .055),
    inset 0 0 0 1px rgba(99, 67, 42, .035);
  transform: rotate(-.18deg);
}

.phone.character-home-gobi-theme .character-hero-home::before {
  transform: rotate(.2deg);
}

.bapstage-home-v2 .character-hero-home::after {
  top: 126px;
  left: 48%;
  width: 82%;
  height: 55%;
  border-radius: 49% 51% 46% 54% / 54% 47% 53% 46%;
  background-color: rgba(250, 219, 98, .34);
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 320px 320px, 112px 112px;
  opacity: .88;
  transform: translateX(-50%) rotate(-3deg);
}

.phone.character-home-gobi-theme .character-hero-home::after {
  background-color: rgba(239, 200, 176, .38);
  transform: translateX(-50%) rotate(2.4deg);
}

.bapstage-home-v2 .character-hero-brand {
  min-height: 63px;
  align-items: flex-start;
  padding: 0 2px 10px;
  border: 0;
}

.bapstage-home-v2 .character-hero-brand::after {
  content: "";
  position: absolute;
  right: 75px;
  bottom: 4px;
  left: 2px;
  height: 7px;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg")
    left center / 150px 7px no-repeat;
  opacity: .58;
  pointer-events: none;
}

.bapstage-home-v2 .character-hero-brand > div > span {
  margin: 0 0 5px 2px;
  color: var(--home-journal-coral-deep);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.bapstage-home-v2 .character-hero-brand h1 {
  color: var(--home-journal-ink);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: clamp(29px, 8vw, 36px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.075em;
}

.bapstage-home-v2 .character-hero-brand > button {
  width: 57px;
  height: 57px;
  min-height: 57px;
  padding: 7px 7px 6px;
  border: 1.5px solid rgba(239, 109, 88, .78);
  border-radius: 53% 47% 51% 49% / 48% 52% 46% 54%;
  background-color: rgba(255, 250, 240, .84);
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 320px 320px, 112px 112px;
  box-shadow:
    0 5px 13px rgba(79, 49, 28, .08),
    inset 0 0 0 4px rgba(255, 250, 240, .62);
  transform: rotate(2deg);
}

.bapstage-home-v2 .character-hero-brand > button span {
  color: var(--home-journal-coral-deep);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 6px;
  font-weight: 800;
  letter-spacing: .1em;
}

.bapstage-home-v2 .character-hero-brand > button strong {
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 22px;
  font-weight: 700;
  line-height: .84;
}

.bapstage-home-v2 .character-hero-stage {
  overflow: visible;
}

.bapstage-home-v2 .character-hero-name {
  top: 13px;
  left: 6px;
  gap: 0;
  transform: rotate(-.6deg);
}

.bapstage-home-v2 .character-hero-name > span {
  padding: 0;
  color: var(--home-journal-coral-deep);
  background: transparent;
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .18em;
}

.bapstage-home-v2 .character-hero-name h2 {
  align-items: baseline;
  gap: 6px;
  margin-top: 6px;
  color: var(--home-journal-ink);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: clamp(34px, 9vw, 41px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.075em;
}

.bapstage-home-v2 .character-hero-name h2 small {
  position: relative;
  margin: 0;
  padding-bottom: 3px;
  color: var(--home-journal-coral-deep);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.04em;
}

.bapstage-home-v2 .character-hero-name h2 small::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  left: -2px;
  height: 5px;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg")
    center / 100% 100% no-repeat;
  opacity: .62;
}

.bapstage-home-v2 .character-hero-figure {
  top: 25px;
  right: 49%;
  bottom: -1px;
  width: min(76%, 315px);
  transform: translateX(50%);
}

.bapstage-home-v2 .character-hero-halo {
  top: 12%;
  width: 94%;
  border: 0;
  border-radius: 48% 52% 45% 55% / 53% 45% 55% 47%;
  background-color: rgba(251, 222, 108, .38);
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 320px 320px, 112px 112px;
  box-shadow:
    12px 15px 0 rgba(255, 250, 240, .38),
    -9px 10px 0 rgba(247, 223, 142, .13);
  opacity: .86;
  transform: translateX(-50%) rotate(3.5deg);
}

.phone.character-home-gobi-theme .character-hero-halo {
  border: 0;
  background-color: rgba(238, 192, 180, .32);
  box-shadow:
    12px 15px 0 rgba(255, 250, 240, .42),
    -9px 10px 0 rgba(183, 216, 201, .14);
}

.bapstage-home-v2 .character-hero-progress {
  right: 2px;
  bottom: 10px;
  width: 84px;
  gap: 4px;
  padding: 8px 8px 7px;
  border: 0;
  border-top: 1px solid rgba(239, 109, 88, .45);
  border-bottom: 1px solid rgba(239, 109, 88, .45);
  border-radius: 0;
  background-color: rgba(255, 250, 240, .72);
  background-image: url("./assets/paper-grain.svg");
  background-size: 320px 320px;
  box-shadow: none;
  transform: rotate(1.2deg);
}

.bapstage-home-v2 .character-hero-progress > small {
  color: rgba(45, 25, 15, .57);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 6px;
  font-weight: 750;
}

.bapstage-home-v2 .character-hero-progress > span {
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
}

.bapstage-home-v2 .character-hero-progress > span b {
  color: var(--home-journal-coral-deep);
  font-size: 24px;
}

.bapstage-home-v2 .character-hero-progress > span em,
.bapstage-home-v2 .character-hero-progress > strong {
  color: rgba(45, 25, 15, .62);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 750;
}

.bapstage-home-v2 .character-hero-progress > i {
  height: 4px;
  background: rgba(45, 25, 15, .1);
}

.bapstage-home-v2 .character-hero-progress > i em {
  background: var(--home-journal-coral);
}

.bapstage-home-v2 .character-hero-motif.motif-checker {
  display: none;
}

.bapstage-home-v2 .character-hero-motif.motif-stitch {
  right: 5px;
  bottom: 35%;
  color: rgba(104, 155, 186, .58);
  transform: rotate(8deg) scale(.86);
}

.bapstage-home-v2 .character-hero-motif.motif-dots {
  top: 40%;
  left: 4px;
  background: rgba(104, 155, 186, .5);
  box-shadow:
    14px 0 0 rgba(104, 155, 186, .34),
    0 14px 0 rgba(104, 155, 186, .34),
    14px 14px 0 rgba(104, 155, 186, .5);
}

.bapstage-home-v2 .character-hero-motif.motif-sun {
  top: 29%;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(239, 109, 88, .58);
  box-shadow:
    15px -8px 0 rgba(239, 109, 88, .36),
    17px 9px 0 rgba(239, 109, 88, .5),
    -1px 18px 0 rgba(239, 109, 88, .32);
  transform: rotate(0);
}

.bapstage-home-v2 .character-hero-today {
  min-height: 102px;
  grid-template-columns: minmax(0, 1fr) 94px;
  gap: 9px;
  padding-top: 7px;
}

.bapstage-home-v2 .character-hero-meal,
.bapstage-home-v2 .character-hero-next {
  min-height: 94px;
  border: 0;
  background-image: url("./assets/paper-grain.svg");
  background-size: 320px 320px;
  box-shadow: 0 8px 18px rgba(75, 50, 28, .065);
}

.bapstage-home-v2 .character-hero-meal {
  grid-template-columns: 59px minmax(0, 1fr) 29px;
  gap: 8px;
  padding: 8px 9px 8px 8px;
  border-radius: 8% 5% 7% 5% / 9% 6% 8% 5%;
  background-color: rgba(255, 250, 240, .92);
  transform: rotate(.15deg);
}

.bapstage-home-v2 .character-hero-meal::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(96, 61, 35, .07);
  border-radius: inherit;
  pointer-events: none;
}

.bapstage-home-v2 .character-hero-meal-art {
  width: 58px;
  height: 66px;
  border: 0;
  background-color: rgba(248, 219, 100, .72);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 112px 112px;
  box-shadow: none;
}

.bapstage-home-v2 .character-hero-meal-art img {
  width: 74px;
  height: 74px;
}

.bapstage-home-v2 .character-hero-meal-copy {
  gap: 3px;
}

.bapstage-home-v2 .character-hero-meal-copy small,
.bapstage-home-v2 .character-hero-next small {
  color: var(--home-journal-coral-deep);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .13em;
}

.bapstage-home-v2 .character-hero-meal-copy strong {
  color: var(--home-journal-ink);
  font-family: "Pretendard", "SUIT", sans-serif;
  font-size: clamp(19px, 5.3vw, 24px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.06em;
}

.bapstage-home-v2 .character-hero-meal-copy em {
  color: rgba(45, 25, 15, .57);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
}

.bapstage-home-v2 .character-hero-meal-arrow {
  width: 29px;
  height: 29px;
  color: #fffaf0;
  background: var(--home-journal-coral);
  box-shadow: none;
}

.bapstage-home-v2 .character-hero-next {
  padding: 12px 9px 10px;
  border-radius: 10% 7% 12% 6% / 8% 12% 7% 10%;
  background-color: rgba(183, 216, 188, .82);
  transform: rotate(-.7deg);
}

.phone.character-home-gobi-theme .character-hero-next {
  background-color: rgba(248, 218, 153, .82);
}

.bapstage-home-v2 .character-hero-next strong {
  color: var(--home-journal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 17px;
  font-weight: 700;
}

.bapstage-home-v2 .character-hero-next > em {
  color: rgba(45, 25, 15, .58);
  font-family: "Bap Gowun", "SUIT", sans-serif;
  font-size: 7px;
  font-weight: 700;
}

.phone.bapstage-home-v2 > .editorial-tabs {
  height: calc(80px + env(safe-area-inset-bottom));
  padding: 7px 9px calc(6px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background-color: rgba(255, 250, 240, .96) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 320px 320px, 112px 112px !important;
  box-shadow: 0 -1px 0 rgba(239, 109, 88, .26) !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button {
  grid-template-rows: 34px 13px !important;
  color: rgba(45, 25, 15, .52) !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button::before {
  width: 37px;
  height: 33px;
  background: rgba(248, 220, 117, .3);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(2)::before {
  background: rgba(170, 210, 191, .34);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(3)::before {
  background: rgba(248, 220, 117, .4);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(4)::before {
  background: rgba(226, 170, 187, .32);
}

.phone.bapstage-home-v2 > .editorial-tabs button:nth-child(5)::before {
  background: rgba(239, 109, 88, .24);
}

.phone.bapstage-home-v2 > .editorial-tabs .profile-poster-menu-svg {
  width: 29px !important;
  height: 29px !important;
  opacity: .78;
  filter: saturate(.66) brightness(1.04);
}

.phone.bapstage-home-v2 > .editorial-tabs .tab-menu-label {
  color: inherit !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 9px !important;
  font-weight: 750 !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button.active {
  color: var(--home-journal-ink) !important;
}

.phone.bapstage-home-v2 > .editorial-tabs button.active::after {
  right: 31%;
  bottom: 0;
  left: 31%;
  height: 5px;
  border-radius: 0;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg")
    center / 100% 100% no-repeat;
  transform: none;
}

@media (max-height: 730px) and (min-width: 561px) {
  .bapstage-home-v2 .character-hero-home {
    padding-top: 13px !important;
    padding-bottom: 8px !important;
  }

  .bapstage-home-v2 .character-hero-home::before {
    top: 70px;
    bottom: 104px;
  }

  .bapstage-home-v2 .character-hero-home::after {
    top: 108px;
  }

  .bapstage-home-v2 .character-hero-brand {
    min-height: 57px;
    padding-bottom: 6px;
  }

  .bapstage-home-v2 .character-hero-brand > div > span {
    margin-bottom: 3px;
  }

  .bapstage-home-v2 .character-hero-brand h1 {
    font-size: 31px;
  }

  .bapstage-home-v2 .character-hero-brand > button {
    width: 51px;
    height: 51px;
    min-height: 51px;
  }

  .bapstage-home-v2 .character-hero-name {
    top: 10px;
  }

  .bapstage-home-v2 .character-hero-name h2 {
    font-size: 36px;
  }

  .bapstage-home-v2 .character-hero-figure {
    top: 16px;
    width: min(73%, 285px);
  }

  .bapstage-home-v2 .character-hero-progress {
    bottom: 7px;
  }

  .bapstage-home-v2 .character-hero-today {
    min-height: 94px;
  }

  .bapstage-home-v2 .character-hero-meal,
  .bapstage-home-v2 .character-hero-next {
    min-height: 88px;
  }
}

@media (max-width: 370px) {
  .bapstage-home-v2 .character-hero-home {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  .bapstage-home-v2 .character-hero-home::before {
    right: 10px;
    left: 10px;
  }

  .bapstage-home-v2 .character-hero-name h2 {
    font-size: 33px;
  }

  .bapstage-home-v2 .character-hero-figure {
    width: min(76%, 280px);
  }

  .bapstage-home-v2 .character-hero-today {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 7px;
  }

  .bapstage-home-v2 .character-hero-meal {
    grid-template-columns: 52px minmax(0, 1fr) 26px;
    gap: 6px;
    padding-right: 7px;
  }

  .bapstage-home-v2 .character-hero-meal-art {
    width: 52px;
    height: 60px;
  }
}

/* ===== home-screen-watercolor-v2.css ===== */
@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Regular-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Bold-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Home reference poster — 430 × 853 design canvas. */
.phone.home-frame-phone.bapstage-home-v2,
.phone.home-frame-phone.bapstage-home-v2.character-home-gobi-theme,
.phone.home-frame-phone.bapstage-home-v2.character-home-jarin-theme {
  --home-paper: #fffaf0;
  --home-ink: #35180d;
  --home-coral: #ec7258;
  --home-coral-deep: #d95539;
  --home-yellow: #f7d55e;
  --home-mint: #dcebd7;
  --home-blue: #82aed2;
  grid-template-rows: minmax(0, 1fr) calc(88px + env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--home-paper) !important;
  box-shadow: none !important;
  filter: none !important;
}

.phone.bapstage-home-v2 > .top,
.phone.bapstage-home-v2::before,
.phone.bapstage-home-v2::after {
  display: none !important;
}

.phone.bapstage-home-v2 > .content {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--home-paper) !important;
}

.phone.bapstage-home-v2 > .content::-webkit-scrollbar {
  display: none;
}

#app .home-watercolor-v3,
#app .home-watercolor-v3 * {
  box-sizing: border-box;
}

#app .home-watercolor-v3 {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 765px;
  margin: 0;
  padding: 0 !important;
  overflow: hidden;
  color: var(--home-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  letter-spacing: 0;
  background-color: var(--home-paper);
  background-image:
    linear-gradient(rgba(255, 252, 242, .68), rgba(255, 250, 238, .68)),
    url("./assets/paper-grain.svg");
  background-position: center, center;
  background-repeat: repeat, repeat;
  background-size: auto, 280px 280px;
}

#app .home-watercolor-v3::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -126px;
  left: -72px;
  width: 366px;
  height: 260px;
  border-radius: 38% 62% 49% 51% / 52% 44% 56% 48%;
  background: rgba(249, 212, 73, .68);
  filter: blur(5px);
  transform: rotate(-7deg);
  opacity: .9;
}

#app .home-watercolor-v3::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 129px;
  left: 10px;
  width: 28px;
  height: 25px;
  background:
    radial-gradient(circle at 7px 6px, rgba(100, 151, 193, .68) 0 4px, transparent 4.7px),
    radial-gradient(circle at 20px 14px, rgba(100, 151, 193, .68) 0 4px, transparent 4.7px),
    radial-gradient(circle at 7px 23px, rgba(100, 151, 193, .68) 0 4px, transparent 4.7px);
  opacity: .88;
  pointer-events: none;
}

#app .home-ref-brand {
  position: absolute;
  z-index: 10;
  top: 32px;
  right: 27px;
  left: 42px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

#app .home-ref-brand::after {
  content: "";
  position: absolute;
  top: 102px;
  right: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(236, 114, 88, .7);
  box-shadow: -15px 10px 0 rgba(236, 114, 88, .62), 4px 17px 0 rgba(236, 114, 88, .66);
  pointer-events: none;
}

#app .home-ref-brand > div {
  min-width: 0;
}

#app .home-ref-brand > div > span {
  display: block;
  color: var(--home-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

#app .home-ref-brand h1 {
  margin: 7px 0 0 !important;
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 43px !important;
  font-weight: 400 !important;
  line-height: .93 !important;
  letter-spacing: -.065em !important;
  white-space: nowrap;
}

#app .home-ref-player {
  position: relative;
  width: 60px;
  height: 60px;
  flex: 0 0 60px;
  display: grid;
  place-content: center;
  gap: 1px;
  margin: -8px 0 0 !important;
  padding: 0 0 2px !important;
  border: 2px solid var(--home-coral) !important;
  border-radius: 49% 51% 47% 53% / 53% 47% 51% 49% !important;
  color: var(--home-ink) !important;
  background-color: rgba(255, 251, 240, .75) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 170px 170px !important;
  box-shadow: 1px 2px 0 rgba(116, 75, 45, .09) !important;
  transform: rotate(-1.5deg) !important;
}

#app .home-ref-player::before,
#app .home-ref-player::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 1px dashed rgba(230, 95, 68, .58);
  border-radius: inherit;
  pointer-events: none;
}

#app .home-ref-player::after {
  inset: 2px;
  opacity: .45;
}

#app .home-ref-player small {
  color: var(--home-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 7px !important;
  font-style: normal;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

#app .home-ref-player strong {
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
  letter-spacing: -.035em !important;
}

#app .home-ref-greeting {
  position: absolute;
  z-index: 9;
  top: 113px;
  left: 43px;
}

#app .home-ref-greeting h2 {
  margin: 0 !important;
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-ref-greeting p {
  margin: 8px 0 0 !important;
  color: #4a2a1e !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

#app .home-ref-hero {
  position: absolute;
  z-index: 3;
  top: 147px;
  right: 0;
  left: 0;
  height: 346px;
}

#app .home-ref-wash {
  position: absolute;
  z-index: -2;
  top: 5px;
  left: 10px;
  width: 330px;
  height: 326px;
  border-radius: 48% 52% 42% 58% / 47% 42% 58% 53%;
  background:
    radial-gradient(ellipse at 52% 49%, rgba(250, 214, 72, .82) 0 50%, rgba(250, 214, 72, .5) 63%, transparent 76%);
  filter: blur(3px);
  transform: rotate(-5deg);
  opacity: .9;
}

#app .home-ref-halo {
  position: absolute;
  z-index: -1;
  top: 30px;
  left: 46px;
  width: 253px;
  height: 274px;
  border: 2px dashed rgba(236, 105, 76, .9);
  border-radius: 50%;
  transform: rotate(-6deg);
}

#app .home-ref-character {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: 65px;
  width: 245px;
  height: 343px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .home-ref-character-art {
  position: absolute;
  inset: 0;
  display: block;
}

#app .home-ref-character-art > img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(1.04) contrast(1.02);
}

#app .home-ref-character-art > .home-ref-character-overlay {
  z-index: 2;
}

#app .home-ref-progress {
  position: absolute;
  z-index: 8;
  top: 207px;
  right: 22px;
  width: 153px;
  height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 !important;
  padding: 16px 14px 13px !important;
  border: 1px solid rgba(151, 116, 72, .13) !important;
  border-radius: 17% 11% 14% 12% / 10% 12% 13% 11% !important;
  clip-path: polygon(2% 4%, 8% 1%, 17% 3%, 26% 1%, 36% 3%, 47% 1%, 58% 3%, 68% 1%, 78% 3%, 89% 1%, 97% 5%, 99% 15%, 98% 27%, 100% 39%, 98% 51%, 100% 64%, 98% 77%, 99% 90%, 95% 98%, 83% 99%, 71% 98%, 59% 100%, 47% 98%, 35% 100%, 23% 98%, 11% 100%, 3% 95%, 1% 82%, 2% 68%, 0 55%, 2% 42%, 1% 29%, 2% 16%);
  color: var(--home-ink) !important;
  background-color: rgba(255, 248, 230, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 190px 190px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(79, 57, 33, .18));
  transform: rotate(.7deg) !important;
}

#app .home-ref-progress small {
  color: var(--home-ink) !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

#app .home-ref-progress-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 7px;
  line-height: 1;
}

#app .home-ref-progress-count b {
  color: var(--home-coral-deep) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: .82 !important;
}

#app .home-ref-progress-count em {
  color: var(--home-ink) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 15px !important;
  font-style: normal;
  font-weight: 700 !important;
}

#app .home-ref-progress-line {
  position: relative;
  width: 118px;
  height: 7px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 48% 52% 45% 55% / 55% 42% 58% 45%;
  background: #eadbbc;
}

#app .home-ref-progress-line::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--home-coral-deep);
}

#app .home-ref-progress-line i {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 5px;
  border-radius: inherit;
  background: var(--home-coral);
}

#app .home-ref-progress > strong {
  margin-top: 8px;
  color: var(--home-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap;
}

#app .home-ref-progress > strong::first-letter {
  color: var(--home-coral-deep);
}

#app .home-ref-doodle {
  position: absolute;
  z-index: 2;
  display: block;
  font-family: "Bap Gaegu Full", cursive !important;
  font-style: normal;
  font-weight: 700;
  line-height: .62;
  pointer-events: none;
}

#app .home-ref-doodle-blue-dots {
  top: 94px;
  right: 3px;
  color: rgba(103, 151, 190, .75);
  font-size: 12px;
  transform: rotate(-22deg);
}

#app .home-ref-doodle-blue-stitch {
  top: 43px;
  right: 78px;
  color: rgba(100, 151, 193, .72);
  font-size: 25px;
  transform: rotate(-16deg);
}

#app .home-ref-doodle-yellow-spark {
  top: 164px;
  right: 100px;
  color: #ecb516;
  font-size: 28px;
  transform: rotate(7deg);
}

#app .home-ref-doodle-green-dots {
  top: 240px;
  left: 8px;
  color: rgba(114, 147, 69, .76);
  font-size: 13px;
  transform: rotate(-33deg);
}

#app .home-ref-today {
  position: absolute;
  z-index: 11;
  top: 494px;
  right: 23px;
  left: 23px;
  height: 263px;
}

#app .home-ref-recipe {
  position: relative;
  width: 100%;
  height: 207px;
  display: grid;
  grid-template-columns: 55% 45%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(149, 111, 66, .14) !important;
  border-radius: 9% 8% 9% 7% / 7% 6% 8% 7% !important;
  clip-path: polygon(2% 2%, 9% 1%, 17% 2%, 25% 1%, 34% 2%, 43% 1%, 52% 2%, 61% 1%, 70% 2%, 79% 1%, 89% 2%, 97% 4%, 99% 13%, 98% 25%, 100% 37%, 98% 49%, 100% 61%, 98% 73%, 99% 86%, 96% 97%, 87% 99%, 77% 98%, 67% 100%, 57% 98%, 47% 100%, 37% 98%, 27% 100%, 17% 98%, 7% 100%, 2% 96%, 1% 84%, 2% 72%, 0 60%, 2% 48%, 1% 36%, 2% 24%, 1% 12%);
  color: var(--home-ink) !important;
  background-color: rgba(255, 250, 236, .99) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 230px 230px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 6px 4px rgba(96, 65, 33, .16));
  transform: rotate(.25deg) !important;
}

#app .home-ref-food {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-items: center;
}

#app .home-ref-food::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 178px;
  height: 178px;
  border-radius: 46% 54% 49% 51% / 54% 45% 55% 46%;
  background: rgba(249, 213, 83, .42);
  filter: blur(2px);
  transform: rotate(-6deg);
}

#app .home-ref-food i {
  position: absolute;
  z-index: 3;
  top: 31px;
  left: 42px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(236, 116, 88, .65);
  box-shadow: -7px 13px 0 rgba(236, 116, 88, .58);
}

#app .home-ref-food img {
  position: relative;
  z-index: 2;
  width: 183px;
  height: 183px;
  display: block;
  object-fit: contain;
  filter: saturate(1.08) contrast(1.05);
  transform: translate(3px, 1px) rotate(-1deg);
}

#app .home-ref-recipe-copy {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 16px 15px 4px;
  text-align: left;
}

#app .home-ref-recipe-copy > small {
  color: var(--home-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 10px !important;
  font-style: normal;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

#app .home-ref-recipe-copy > span {
  margin-top: 9px;
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

#app .home-ref-recipe-copy > i {
  width: 100%;
  height: 1px;
  margin-top: 9px;
  background: repeating-linear-gradient(90deg, rgba(217, 111, 77, .35) 0 3px, transparent 3px 7px);
}

#app .home-ref-recipe-copy > strong {
  max-width: 100%;
  margin-top: 11px;
  overflow: hidden;
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: -.065em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .home-ref-recipe-copy > em {
  margin-top: 10px;
  color: #4c3025 !important;
  font-size: 14px !important;
  font-style: normal;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-ref-start {
  position: absolute;
  right: 12px;
  bottom: 18px;
  left: -2px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 7px 1px;
  clip-path: polygon(4% 13%, 14% 6%, 27% 10%, 40% 4%, 53% 9%, 67% 4%, 81% 9%, 96% 5%, 99% 25%, 97% 49%, 100% 74%, 95% 94%, 80% 90%, 67% 96%, 53% 91%, 40% 96%, 27% 90%, 13% 95%, 2% 85%, 0 63%, 2% 39%);
  color: #fffaf0 !important;
  background: var(--home-coral) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap;
}

#app .home-ref-start > span {
  color: #fffaf0 !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: translateY(-1px);
}

#app .home-ref-next {
  position: absolute;
  z-index: 8;
  top: 194px;
  right: 17px;
  width: 183px;
  height: 67px;
  display: grid;
  place-content: center;
  gap: 4px;
  margin: 0 !important;
  padding: 2px 10px 5px !important;
  border: 1px solid rgba(83, 122, 91, .14) !important;
  border-radius: 14% 10% 13% 11% / 15% 10% 14% 12% !important;
  clip-path: polygon(3% 6%, 13% 2%, 25% 5%, 37% 2%, 49% 5%, 61% 2%, 73% 5%, 86% 2%, 97% 7%, 99% 22%, 97% 40%, 100% 57%, 97% 76%, 98% 93%, 87% 98%, 74% 96%, 62% 100%, 49% 97%, 37% 100%, 25% 97%, 12% 100%, 3% 94%, 1% 76%, 3% 58%, 1% 40%, 3% 22%);
  color: var(--home-ink) !important;
  background-color: rgba(216, 235, 211, .97) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 180px 180px !important;
  box-shadow: none !important;
  filter: drop-shadow(2px 5px 3px rgba(66, 89, 62, .16));
  transform: rotate(-.45deg) !important;
}

#app .home-ref-next small {
  color: var(--home-ink) !important;
  font-size: 13px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

#app .home-ref-next strong {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--home-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  white-space: nowrap;
}

#app .home-ref-next strong i {
  color: #5f9075 !important;
  font-family: serif !important;
  font-size: 20px !important;
  font-style: normal;
  font-weight: 400 !important;
  transform: rotate(-42deg);
}

#app .home-ref-next strong i:last-child {
  transform: scaleX(-1) rotate(-42deg);
}

#app .home-ref-character:focus-visible,
#app .home-ref-player:focus-visible,
#app .home-ref-progress:focus-visible,
#app .home-ref-recipe:focus-visible,
#app .home-ref-next:focus-visible {
  outline: 3px dashed var(--home-coral) !important;
  outline-offset: 3px;
}

/* The reference uses the same warm paper strip and five painted menu symbols. */
#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav {
  position: relative !important;
  z-index: 30;
  width: 100%;
  height: calc(88px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 0 !important;
  margin: 0 !important;
  padding: 7px 13px calc(5px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .14) !important;
  border-radius: 4% 5% 0 0 / 7% 8% 0 0 !important;
  background-color: rgba(255, 250, 239, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 250px 250px !important;
  box-shadow: 0 -3px 8px rgba(105, 76, 43, .05) !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav::before,
#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav::after {
  display: none !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav button {
  position: relative;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 50px 17px !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--home-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav button::before {
  display: none !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav button.active::after {
  content: "";
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 5px;
  display: block !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(-1deg);
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav .tab-menu-icon {
  position: relative;
  width: 47px !important;
  height: 47px !important;
  display: grid !important;
  place-items: center;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav .tab-menu-icon::before {
  display: none !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  display: block;
  overflow: visible;
  opacity: .83;
  filter: saturate(.84) contrast(.95);
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav button.active .profile-poster-menu-svg {
  opacity: 1;
  filter: saturate(.96) contrast(.99);
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav .tab-menu-label {
  color: var(--home-ink) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav button:not(.active) .tab-menu-label {
  color: rgba(53, 24, 13, .72) !important;
}

@media (max-width: 390px) {
  #app .home-ref-brand {
    right: 20px;
    left: 34px;
  }

  #app .home-ref-brand h1 {
    font-size: 38px !important;
  }

  #app .home-ref-greeting {
    left: 35px;
  }

  #app .home-ref-character {
    left: 47px;
  }

  #app .home-ref-halo {
    left: 31px;
  }

  #app .home-ref-progress {
    right: 15px;
    width: 145px;
  }

  #app .home-ref-today {
    right: 17px;
    left: 17px;
  }

  #app .home-ref-recipe {
    grid-template-columns: 53% 47%;
  }

  #app .home-ref-food img {
    width: 169px;
    height: 169px;
  }

  #app .home-ref-food::before {
    width: 166px;
    height: 166px;
  }

  #app .home-ref-recipe-copy > strong {
    font-size: 28px !important;
  }
}

@media (max-width: 350px) {
  #app .home-watercolor-v3 {
    min-height: 745px;
  }

  #app .home-ref-brand {
    top: 26px;
    left: 26px;
  }

  #app .home-ref-brand h1 {
    font-size: 34px !important;
  }

  #app .home-ref-player {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
  }

  #app .home-ref-greeting {
    top: 105px;
    left: 28px;
  }

  #app .home-ref-hero {
    top: 136px;
  }

  #app .home-ref-character {
    left: 31px;
    width: 235px;
  }

  #app .home-ref-halo {
    left: 19px;
    width: 232px;
  }

  #app .home-ref-progress {
    right: 10px;
    width: 137px;
  }

  #app .home-ref-today {
    top: 482px;
    right: 12px;
    left: 12px;
  }

  #app .home-ref-recipe-copy {
    padding-right: 10px;
  }

  #app .home-ref-recipe-copy > span {
    font-size: 21px !important;
  }

  #app .home-ref-recipe-copy > strong {
    font-size: 25px !important;
  }

  #app .home-ref-start {
    right: 8px;
    font-size: 18px !important;
  }

  #app .home-ref-next {
    right: 10px;
    width: 171px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .home-watercolor-v3 *,
  #app .home-watercolor-nav * {
    transition: none !important;
    animation: none !important;
  }
}

/* ===== home-reference-exact-v4.css ===== */
/* Home reference fidelity pass — measured against the supplied 891 × 1765 artwork. */
#app .home-reference-v4 {
  min-height: 765px;
}

#app .home-reference-v4::after {
  top: 158px;
}

#app .home-reference-v4 .home-ref-brand {
  top: 33px;
  right: 26px;
  left: 42px;
}

#app .home-reference-v4 .home-ref-brand > div > span {
  font-size: 11px !important;
  letter-spacing: -.018em !important;
}

#app .home-reference-v4 .home-ref-brand h1 {
  margin-top: 8px !important;
  font-size: 45px !important;
  line-height: .91 !important;
  letter-spacing: -.061em !important;
}

#app .home-reference-v4 .home-ref-player {
  width: 59px;
  height: 59px;
  flex-basis: 59px;
  margin-top: -9px !important;
}

#app .home-reference-v4 .home-ref-player small {
  font-size: 7px !important;
}

#app .home-reference-v4 .home-ref-player strong {
  font-size: 27px !important;
}

#app .home-reference-v4 .home-ref-brand::after {
  top: 111px;
}

#app .home-reference-v4 .home-ref-greeting {
  top: 114px;
  left: 43px;
}

#app .home-reference-v4 .home-ref-greeting h2 {
  font-size: 25px !important;
}

#app .home-reference-v4 .home-ref-greeting p {
  margin-top: 8px !important;
  font-size: 16px !important;
}

#app .home-reference-v4 .home-ref-hero {
  top: 148px;
  height: 345px;
}

#app .home-reference-v4 .home-ref-wash {
  top: 3px;
  left: 10px;
  width: 331px;
  height: 327px;
  opacity: .92;
}

#app .home-reference-v4 .home-ref-halo {
  top: 29px;
  left: 47px;
  width: 253px;
  height: 274px;
}

#app .home-reference-v4 .home-ref-character {
  top: 1px;
  left: 58px;
  width: 246px;
  height: 348px;
}

#app .home-reference-v4 .home-ref-character-art > img {
  filter: saturate(1.01) contrast(1.015);
}

#app .home-reference-v4 .home-ref-progress {
  top: 212px;
  right: 22px;
  width: 153px;
  height: 122px;
  padding: 15px 14px 12px !important;
}

#app .home-reference-v4 .home-ref-progress small {
  font-size: 14px !important;
}

#app .home-reference-v4 .home-ref-progress-count {
  margin-top: 7px;
}

#app .home-reference-v4 .home-ref-progress-count b {
  font-size: 35px !important;
}

#app .home-reference-v4 .home-ref-progress-line {
  width: 118px;
  margin-top: 8px;
}

#app .home-reference-v4 .home-ref-progress > strong {
  margin-top: 7px;
  font-size: 12px !important;
}

#app .home-reference-v4 .home-ref-doodle-yellow-spark {
  top: 59px;
  right: 95px;
  font-size: 25px;
}

#app .home-reference-v4 .home-ref-doodle-yellow-spark-two {
  top: 135px;
  right: 112px;
  color: #ecb516;
  font-size: 24px;
  transform: rotate(-4deg);
}

#app .home-reference-v4 .home-ref-doodle-yellow-spark-three {
  top: 198px;
  left: 41px;
  color: #ecb516;
  font-size: 23px;
  transform: rotate(5deg);
}

#app .home-reference-v4 .home-ref-doodle-blue-stitch {
  top: 10px;
  right: 77px;
  line-height: 1;
}

#app .home-reference-v4 .home-ref-doodle-blue-stitch-left {
  top: 116px;
  left: 27px;
  color: rgba(100, 151, 193, .7);
  font-size: 21px;
  line-height: .65;
  transform: rotate(-39deg);
}

#app .home-reference-v4 .home-ref-doodle-green-stitch {
  top: 283px;
  left: 62px;
  color: rgba(111, 147, 71, .76);
  font-size: 23px;
  line-height: .58;
  transform: rotate(-42deg);
}

#app .home-reference-v4 .home-ref-doodle-coral-stitch {
  top: 190px;
  right: -1px;
  color: rgba(233, 111, 86, .75);
  font-size: 23px;
  line-height: .58;
  transform: rotate(-37deg);
}

#app .home-reference-v4 .home-ref-today {
  top: 492px;
  right: 23px;
  left: 23px;
  height: 265px;
}

#app .home-reference-v4 .home-ref-recipe {
  height: 207px;
  grid-template-columns: 55% 45%;
}

#app .home-reference-v4 .home-ref-food::before {
  width: 200px;
  height: 200px;
}

#app .home-reference-v4 .home-ref-food img {
  width: 212px;
  height: 212px;
  filter: saturate(1.03) contrast(1.02);
  transform: translate(9px, 7px) rotate(-1deg);
}

#app .home-reference-v4 .home-ref-recipe-copy {
  padding: 22px 16px 15px 4px;
}

#app .home-reference-v4 .home-ref-recipe-copy > small {
  font-size: 10px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > span {
  margin-top: 9px;
  font-size: 25px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > strong {
  margin-top: 11px;
  font-size: 32px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > em {
  margin-top: 10px;
  font-size: 14px !important;
}

#app .home-reference-v4 .home-ref-start {
  right: 22px;
  bottom: 18px;
  left: 0;
  height: 45px;
  font-size: 20px !important;
}

#app .home-reference-v4 .home-ref-next {
  top: 191px;
  right: 17px;
  width: 181px;
  height: 67px;
}

#app .home-reference-v4 .home-ref-next small {
  font-size: 13px !important;
}

#app .home-reference-v4 .home-ref-next strong {
  font-size: 24px !important;
}

#app .phone.bapstage-home-v2 > .editorial-tabs.home-watercolor-nav {
  height: calc(88px + env(safe-area-inset-bottom)) !important;
  padding-top: 7px !important;
}

@media (max-width: 390px) {
  #app .home-reference-v4 .home-ref-brand h1 {
    font-size: 39px !important;
  }

  #app .home-reference-v4 .home-ref-progress {
    right: 15px;
    width: 145px;
  }

  #app .home-reference-v4 .home-ref-doodle-green-stitch {
    left: 35px;
  }
}

/* ===== home-meal-reference-v1.css ===== */
@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Regular-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Bold-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Supplied home-meal journey reference — 430 × 853 CSS canvas. */
.phone.home-meal-frame-phone.home-meal-mono-preview {
  --meal-paper: #fffaf0;
  --meal-ink: #371b10;
  --meal-coral: #e87358;
  --meal-coral-deep: #d65b40;
  --meal-yellow: #f4d45c;
  --meal-mint: #d8ead6;
  --meal-blue: #86add0;
  grid-template-rows: minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--meal-paper) !important;
  box-shadow: none !important;
}

.phone.home-meal-frame-phone.home-meal-mono-preview > .top,
.phone.home-meal-frame-phone.home-meal-mono-preview::before,
.phone.home-meal-frame-phone.home-meal-mono-preview::after {
  display: none !important;
}

.phone.home-meal-frame-phone.home-meal-mono-preview > .content {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--meal-paper) !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

.phone.home-meal-frame-phone.home-meal-mono-preview > .content::-webkit-scrollbar {
  display: none;
}

#app .home-meal-reference-v1,
#app .home-meal-reference-v1 * {
  box-sizing: border-box;
}

#app .home-meal-reference-v1 {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
  color: var(--meal-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  background-color: var(--meal-paper) !important;
  background-image:
    linear-gradient(rgba(255, 252, 243, .7), rgba(255, 250, 239, .7)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 260px 260px !important;
}

#app .home-meal-ref-canvas {
  position: relative;
  isolation: isolate;
  height: 773px;
  overflow: hidden;
  background: transparent;
}

#app .home-meal-ref-canvas::before {
  content: "";
  position: absolute;
  z-index: -3;
  top: -91px;
  left: -22px;
  width: 346px;
  height: 227px;
  border-radius: 41% 59% 48% 52% / 57% 45% 55% 43%;
  background: rgba(248, 213, 84, .52);
  filter: blur(5px);
  transform: rotate(-3deg);
}

#app .home-meal-ref-canvas::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 245px;
  left: 3px;
  width: 177px;
  height: 92px;
  border-radius: 48% 52% 44% 56% / 57% 42% 58% 43%;
  background: rgba(249, 216, 91, .31);
  filter: blur(3px);
  transform: rotate(-7deg);
}

#app .home-meal-ref-heading {
  position: absolute;
  z-index: 10;
  top: 22px;
  right: 29px;
  left: 31px;
}

#app .home-meal-ref-heading > span {
  display: block;
  color: var(--meal-coral-deep);
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.015em;
}

#app .home-meal-ref-heading h2 {
  max-width: 310px;
  margin: 8px 0 0 !important;
  color: var(--meal-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  white-space: nowrap;
}

#app .home-meal-ref-heading p {
  margin: 11px 0 0 !important;
  color: #493025 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

#app .home-meal-ref-player {
  position: absolute;
  top: -6px;
  right: -9px;
  width: 61px;
  height: 61px;
  display: grid;
  place-content: center;
  gap: 1px;
  margin: 0 !important;
  padding: 1px 0 2px !important;
  border: 2px solid var(--meal-coral) !important;
  border-radius: 50% 47% 52% 48% / 49% 52% 48% 51% !important;
  color: var(--meal-ink) !important;
  background: rgba(255, 250, 239, .83) url("./assets/paper-grain.svg") center / 160px 160px !important;
  box-shadow: 1px 2px 0 rgba(107, 75, 45, .09) !important;
  transform: rotate(-1.2deg) !important;
}

#app .home-meal-ref-player::before,
#app .home-meal-ref-player::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 1px dashed rgba(218, 91, 63, .56);
  border-radius: inherit;
  pointer-events: none;
}

#app .home-meal-ref-player::after {
  inset: 3px;
  opacity: .45;
}

#app .home-meal-ref-player small {
  color: var(--meal-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 7px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

#app .home-meal-ref-player strong {
  color: var(--meal-ink) !important;
  font-family: "Bap Jua", "Pretendard", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: .86 !important;
}

#app .home-meal-ref-character {
  position: absolute;
  z-index: 5;
  top: 126px;
  left: 20px;
  width: 145px;
  height: 202px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .home-meal-ref-character::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -13px;
  bottom: 4px;
  left: -10px;
  height: 72px;
  border-radius: 49% 51% 46% 54% / 58% 42% 58% 42%;
  background: rgba(247, 216, 94, .28);
  filter: blur(3px);
}

#app .home-meal-ref-character > span,
#app .home-meal-ref-character img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#app .home-meal-ref-character img {
  z-index: 1;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(1.01) contrast(1.01);
}

#app .home-meal-ref-character .home-meal-ref-character-overlay {
  z-index: 2;
}

#app .home-meal-ref-progress {
  position: absolute;
  z-index: 7;
  top: 116px;
  left: 137px;
  width: 178px;
  height: 73px;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: 16px 28px 13px;
  column-gap: 9px;
  margin: 0;
  padding: 11px 15px 9px;
  clip-path: polygon(3% 5%, 14% 2%, 27% 4%, 40% 1%, 53% 4%, 66% 1%, 79% 4%, 94% 2%, 99% 13%, 98% 29%, 100% 45%, 98% 63%, 100% 82%, 95% 97%, 80% 99%, 65% 97%, 50% 100%, 35% 97%, 19% 100%, 4% 96%, 1% 80%, 2% 61%, 0 44%, 2% 25%);
  background: rgba(255, 250, 236, .98) url("./assets/paper-grain.svg") center / 170px 170px;
  filter: drop-shadow(2px 4px 3px rgba(87, 64, 38, .16));
}

#app .home-meal-ref-progress > small {
  grid-column: 1;
  grid-row: 1;
  color: var(--meal-ink) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#app .home-meal-ref-progress > span {
  grid-column: 1;
  grid-row: 2 / span 2;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

#app .home-meal-ref-progress > span b {
  color: var(--meal-coral-deep);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: .9;
}

#app .home-meal-ref-progress > span em {
  color: var(--meal-ink);
  font-family: "Pretendard", sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

#app .home-meal-ref-progress > i {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  align-self: center;
  width: 79px;
  height: 6px;
  display: block;
  overflow: hidden;
  border-radius: 999px;
  background: #e8d9bb;
}

#app .home-meal-ref-progress > i::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--meal-coral);
}

#app .home-meal-ref-progress > i b {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 5px;
  border-radius: inherit;
  background: var(--meal-coral);
}

#app .home-meal-ref-progress > strong {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  color: var(--meal-coral-deep);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

#app .home-meal-ref-start-sign {
  position: absolute;
  z-index: 6;
  top: 219px;
  left: 126px;
  width: 66px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #705333;
  background: #c7a26b;
  clip-path: polygon(0 17%, 69% 8%, 100% 48%, 70% 89%, 0 82%);
  font-family: "Bap Gaegu Full", cursive;
  font-size: 13px;
  font-weight: 700;
  transform: rotate(-2deg);
}

#app .home-meal-ref-start-sign::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 26px;
  width: 6px;
  height: 27px;
  background: #8a6841;
  clip-path: polygon(14% 0, 86% 3%, 100% 100%, 0 96%);
}

#app .home-meal-ref-start-sign i {
  font-style: normal;
  font-size: 11px;
}

#app .home-meal-ref-path {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

#app .home-meal-ref-path > i {
  position: absolute;
  height: 0;
  border-top: 3px dotted rgba(218, 105, 78, .86);
  transform-origin: left center;
}

#app .home-meal-ref-path .segment-one { top: 303px; left: 126px; width: 96px; transform: rotate(-30deg); }
#app .home-meal-ref-path .segment-two { top: 292px; left: 315px; width: 96px; transform: rotate(71deg); }
#app .home-meal-ref-path .segment-three { top: 382px; left: 289px; width: 139px; transform: rotate(164deg); }
#app .home-meal-ref-path .segment-four { top: 410px; left: 107px; width: 119px; transform: rotate(39deg); }
#app .home-meal-ref-path .segment-five { top: 503px; left: 224px; width: 116px; transform: rotate(-20deg); }
#app .home-meal-ref-path .segment-six { top: 568px; left: 311px; width: 156px; transform: rotate(155deg); }

#app .home-meal-ref-path .path-dot {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 250, 240, .95);
  border-radius: 50%;
  background: var(--meal-coral);
  box-shadow: 0 0 0 1px rgba(218, 105, 78, .4);
}

#app .home-meal-ref-path .dot-one { top: 273px; left: 198px; }
#app .home-meal-ref-path .dot-two { top: 381px; left: 204px; }
#app .home-meal-ref-path .dot-three { top: 535px; left: 207px; }
#app .home-meal-ref-path .dot-four { top: 620px; left: 214px; }
#app .home-meal-ref-path .dot-five { top: 715px; left: 210px; }

#app .home-meal-ref-stage-card {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 !important;
  padding: 8px 10px !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(2% 5%, 12% 2%, 24% 4%, 36% 1%, 48% 4%, 61% 1%, 74% 4%, 87% 1%, 98% 5%, 100% 17%, 98% 32%, 100% 48%, 98% 63%, 100% 81%, 96% 97%, 83% 99%, 69% 97%, 55% 100%, 41% 97%, 27% 100%, 13% 97%, 3% 94%, 1% 78%, 2% 61%, 0 45%, 2% 29%, 1% 13%);
  color: var(--meal-ink) !important;
  background: rgba(255, 250, 238, .98) url("./assets/paper-grain.svg") center / 190px 190px !important;
  box-shadow: none !important;
  filter: drop-shadow(2px 4px 3px rgba(92, 66, 36, .14));
  text-align: left;
  transform: none !important;
}

#app .home-meal-ref-stage-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -10px -7px;
  border-radius: 48% 52% 45% 55% / 55% 47% 53% 45%;
  background: rgba(248, 214, 84, .25);
  filter: blur(3px);
}

#app .home-meal-ref-stage-card:disabled {
  cursor: default;
  opacity: 1 !important;
}

#app .home-meal-ref-stage-card:focus-visible,
#app .home-meal-ref-player:focus-visible,
#app .home-meal-ref-character:focus-visible {
  outline: 3px dashed var(--meal-coral) !important;
  outline-offset: 3px;
}

#app .home-meal-ref-stage-1 { top: 205px; right: 14px; width: 214px; height: 132px; grid-template-columns: 98px 1fr; gap: 4px; padding: 10px 10px 9px !important; }
#app .home-meal-ref-stage-2 { top: 347px; left: 16px; width: 205px; height: 96px; }
#app .home-meal-ref-stage-3 { top: 508px; right: 12px; width: 200px; height: 96px; }
#app .home-meal-ref-stage-4 { top: 590px; left: 16px; width: 206px; height: 94px; }
#app .home-meal-ref-stage-5 { top: 667px; right: 12px; width: 201px; height: 92px; }

#app .home-meal-ref-today {
  position: absolute;
  z-index: 8;
  top: -9px;
  left: 12px;
  width: 65px;
  height: 26px;
  display: grid;
  place-items: center;
  padding-bottom: 2px;
  clip-path: polygon(3% 12%, 24% 4%, 46% 9%, 68% 3%, 97% 15%, 91% 48%, 98% 87%, 71% 92%, 46% 85%, 20% 94%, 1% 82%, 8% 48%);
  color: #fffaf0 !important;
  background: var(--meal-coral) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .06em !important;
  transform: rotate(-5deg);
}

#app .home-meal-ref-food {
  position: relative;
  width: 89px;
  height: 78px;
  display: grid;
  place-items: center;
}

#app .home-meal-ref-stage-1 .home-meal-ref-food {
  width: 102px;
  height: 102px;
  transform: translate(-3px, 5px);
}

#app .home-meal-ref-food img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: saturate(1.03) contrast(1.02);
}

#app .home-meal-ref-stage-2 .home-meal-ref-food img,
#app .home-meal-ref-stage-3 .home-meal-ref-food img,
#app .home-meal-ref-stage-4 .home-meal-ref-food img,
#app .home-meal-ref-stage-5 .home-meal-ref-food img {
  filter: saturate(.55) contrast(.94) brightness(1.04);
}

#app .home-meal-ref-stage-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#app .home-meal-ref-stage-copy > b {
  color: var(--meal-coral-deep) !important;
  font-family: "Bap Jua", "Pretendard", sans-serif !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
}

#app .home-meal-ref-stage-copy > strong {
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  color: var(--meal-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.08em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .home-meal-ref-stage-copy > small {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 7px;
  color: #5b4335 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

#app .home-meal-ref-stage-copy > small i {
  color: #735f43 !important;
  font-family: sans-serif !important;
  font-size: 10px !important;
  font-style: normal !important;
}

#app .home-meal-ref-stage-copy > small .home-meal-ref-lock-icon {
  position: relative;
  width: 9px;
  height: 8px;
  flex: 0 0 9px;
  border: 0;
  border-radius: 1px;
  background: #735f43;
}

#app .home-meal-ref-stage-copy > small .home-meal-ref-lock-icon::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 2px;
  width: 5px;
  height: 6px;
  border: 1.5px solid #735f43;
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy {
  align-self: stretch;
  padding: 10px 0 0;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > b {
  font-size: 30px !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > strong {
  margin-top: 4px;
  font-size: 24px !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > small {
  margin-top: 6px;
  font-size: 11px !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > em {
  position: absolute;
  right: 11px;
  bottom: 10px;
  width: 112px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  clip-path: polygon(3% 12%, 16% 5%, 31% 10%, 46% 4%, 61% 9%, 76% 4%, 96% 11%, 100% 35%, 97% 63%, 100% 87%, 78% 93%, 62% 88%, 46% 95%, 31% 89%, 15% 95%, 1% 84%, 4% 58%, 0 34%);
  color: #fffaf0 !important;
  background: var(--meal-coral) !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > em i {
  font-family: "Pretendard", sans-serif !important;
  font-size: 21px !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

#app .home-meal-ref-milestone {
  position: absolute;
  z-index: 5;
  top: 447px;
  left: 143px;
  width: 132px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  clip-path: polygon(2% 8%, 15% 3%, 29% 7%, 44% 2%, 59% 7%, 74% 2%, 89% 6%, 98% 12%, 100% 30%, 98% 50%, 100% 70%, 97% 92%, 83% 97%, 68% 94%, 53% 100%, 38% 95%, 22% 99%, 5% 93%, 1% 72%, 3% 50%, 0 29%);
  color: var(--meal-ink);
  background: rgba(215, 234, 212, .98) url("./assets/paper-grain.svg") center / 150px 150px;
  filter: drop-shadow(2px 4px 3px rgba(61, 93, 69, .15));
  transform: rotate(-1deg);
}

#app .home-meal-ref-milestone i {
  color: #5e9173;
  font-family: serif;
  font-size: 17px;
  font-style: normal;
  transform: rotate(-40deg);
}

#app .home-meal-ref-milestone i:last-child {
  transform: scaleX(-1) rotate(-40deg);
}

#app .home-meal-ref-milestone strong {
  color: var(--meal-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  white-space: nowrap;
}

#app .home-meal-ref-down {
  position: absolute;
  z-index: 2;
  right: 37px;
  bottom: 8px;
  color: var(--meal-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 36px;
  line-height: 1;
  transform: rotate(7deg);
}

#app .home-meal-ref-deco {
  position: absolute;
  z-index: 2;
  display: block;
  pointer-events: none;
}

#app .home-meal-ref-deco.deco-blue-dots {
  top: 132px;
  left: 12px;
  width: 25px;
  height: 28px;
  background:
    radial-gradient(circle at 7px 6px, rgba(101, 151, 193, .68) 0 4px, transparent 4.7px),
    radial-gradient(circle at 20px 15px, rgba(101, 151, 193, .68) 0 4px, transparent 4.7px),
    radial-gradient(circle at 7px 25px, rgba(101, 151, 193, .68) 0 4px, transparent 4.7px);
}

#app .home-meal-ref-deco.deco-blue-cross {
  top: 95px;
  right: 72px;
  color: rgba(100, 151, 193, .7);
  font-size: 25px;
  font-style: normal;
  font-weight: 700;
  line-height: .86;
  transform: rotate(-20deg);
}

#app .home-meal-ref-deco.deco-coral-dots {
  top: 97px;
  right: 22px;
  width: 29px;
  height: 30px;
  background:
    radial-gradient(circle at 8px 6px, rgba(232, 111, 85, .72) 0 4px, transparent 4.7px),
    radial-gradient(circle at 22px 16px, rgba(232, 111, 85, .72) 0 4px, transparent 4.7px),
    radial-gradient(circle at 8px 27px, rgba(232, 111, 85, .72) 0 4px, transparent 4.7px);
}

#app .home-meal-ref-deco.deco-green-leaf {
  top: 151px;
  right: 21px;
  color: #75954d;
  font-family: serif;
  font-size: 42px;
  font-style: normal;
  transform: rotate(-39deg);
}

#app .home-meal-ref-deco.deco-yellow-cross {
  top: 198px;
  left: 13px;
  color: #e9b829;
  font-size: 25px;
  font-style: normal;
  transform: rotate(-13deg);
}

#app .home-meal-ref-deco.deco-coral-cross {
  top: 358px;
  right: 39px;
  color: rgba(224, 105, 79, .77);
  font-size: 26px;
  font-style: normal;
  transform: rotate(-24deg);
}

#app .home-meal-ref-deco.deco-green-dots {
  top: 609px;
  right: 13px;
  width: 31px;
  height: 31px;
  background:
    radial-gradient(circle at 8px 7px, rgba(101, 143, 79, .75) 0 4px, transparent 4.7px),
    radial-gradient(circle at 23px 16px, rgba(101, 143, 79, .75) 0 4px, transparent 4.7px),
    radial-gradient(circle at 8px 28px, rgba(101, 143, 79, .75) 0 4px, transparent 4.7px);
}

#app .home-meal-ref-continuation {
  position: relative;
  isolation: isolate;
  min-height: 9100px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 34px 15px 130px;
  overflow: hidden;
  border-top: 1px dashed rgba(219, 112, 83, .3);
  background:
    linear-gradient(rgba(255, 251, 241, .78), rgba(255, 250, 239, .78)),
    url("./assets/paper-grain.svg") center / 250px 250px;
}

#app .home-meal-ref-continuation::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    radial-gradient(ellipse at 17% 5%, rgba(247, 212, 81, .2) 0 90px, transparent 94px),
    radial-gradient(ellipse at 84% 15%, rgba(218, 235, 213, .3) 0 100px, transparent 104px),
    radial-gradient(ellipse at 16% 28%, rgba(236, 183, 171, .18) 0 95px, transparent 99px);
  background-size: 100% 620px;
  background-repeat: repeat-y;
}

#app .home-meal-ref-continuation > header {
  position: relative;
  z-index: 3;
  margin: 0 9px 11px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(219, 112, 83, .32);
}

#app .home-meal-ref-continuation > header span {
  color: var(--meal-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
}

#app .home-meal-ref-continuation > header h3 {
  margin: 5px 0 0;
  color: var(--meal-ink);
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

#app .home-meal-ref-continuation > header p {
  margin: 5px 0 0;
  color: #694d3e;
  font-size: 13px;
  font-weight: 700;
}

#app .home-meal-ref-continuation-path {
  position: absolute;
  z-index: 0;
  top: 136px;
  bottom: 130px;
  left: 50%;
  border-left: 3px dotted rgba(218, 105, 78, .58);
  transform: translateX(-50%);
}

#app .home-meal-ref-stage-card.is-continuation {
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 82%;
  min-height: 84px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  flex: 0 0 84px;
  gap: 7px;
  padding: 8px 11px !important;
}

#app .home-meal-ref-stage-card.is-continuation:nth-of-type(odd) {
  align-self: flex-start;
}

#app .home-meal-ref-stage-card.is-continuation:nth-of-type(even) {
  align-self: flex-end;
}

#app .home-meal-ref-stage-card.is-continuation::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  border: 2px solid var(--meal-paper);
  border-radius: 50%;
  background: var(--meal-coral);
  box-shadow: 0 0 0 1px rgba(218, 105, 78, .4);
  transform: translateY(-50%);
}

#app .home-meal-ref-stage-card.is-continuation:nth-of-type(odd)::after {
  right: -47px;
}

#app .home-meal-ref-stage-card.is-continuation:nth-of-type(even)::after {
  left: -47px;
}

#app .home-meal-ref-stage-card.is-continuation .home-meal-ref-food {
  width: 74px;
  height: 68px;
}

#app .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > b {
  font-size: 20px !important;
}

#app .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > strong {
  margin-top: 3px;
  font-size: 17px !important;
}

#app .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > small {
  margin-top: 6px;
  font-size: 10px !important;
}

#app .home-meal-ref-stage-card.home-meal-ref-status-cleared {
  background-color: rgba(223, 237, 215, .98) !important;
}

#app .home-meal-ref-stage-card.home-meal-ref-status-skipped {
  background-color: rgba(235, 231, 242, .98) !important;
}

#app .home-meal-ref-stage-card.is-continuation.is-featured {
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(214, 91, 64, .22));
}

#app .home-meal-ref-finish {
  position: relative;
  z-index: 2;
  min-height: 102px;
  display: grid;
  place-content: center;
  gap: 4px;
  margin-top: 11px;
  clip-path: polygon(3% 7%, 15% 2%, 29% 6%, 43% 2%, 58% 6%, 72% 2%, 87% 6%, 98% 12%, 100% 31%, 98% 52%, 100% 74%, 96% 94%, 82% 98%, 67% 95%, 52% 100%, 37% 96%, 21% 99%, 5% 93%, 1% 72%, 3% 51%, 0 30%);
  color: var(--meal-ink);
  background: rgba(216, 235, 211, .96) url("./assets/paper-grain.svg") center / 190px 190px;
  text-align: center;
}

#app .home-meal-ref-finish span {
  color: var(--meal-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .1em;
}

#app .home-meal-ref-finish strong {
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 24px;
  font-weight: 400;
}

#app .home-meal-ref-finish small {
  font-size: 12px;
  font-weight: 700;
}

/* Warm fixed paper navigation from the supplied reference. */
#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav {
  position: relative !important;
  z-index: 40;
  width: 100%;
  height: calc(80px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 0 !important;
  margin: 0 !important;
  padding: 5px 13px calc(4px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .14) !important;
  border-radius: 4% 5% 0 0 / 7% 8% 0 0 !important;
  background: rgba(255, 250, 239, .98) url("./assets/paper-grain.svg") center / 250px 250px !important;
  box-shadow: 0 -3px 8px rgba(105, 76, 43, .05) !important;
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav::before,
#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav::after {
  display: none !important;
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav button {
  position: relative;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 45px 17px !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--meal-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav button::before {
  display: none !important;
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav button.active::after {
  content: "";
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 50%;
  width: 31px;
  height: 5px;
  display: block !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(-1deg);
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav .tab-menu-icon {
  width: 45px !important;
  height: 45px !important;
  display: grid !important;
  place-items: center;
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav .profile-poster-menu-svg {
  width: 39px !important;
  height: 39px !important;
  display: block;
  overflow: visible;
  opacity: .84;
  filter: saturate(.85) contrast(.96);
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav button.active .profile-poster-menu-svg {
  opacity: 1;
  filter: saturate(.98) contrast(1);
}

#app .phone.home-meal-frame-phone > .editorial-tabs.home-meal-reference-nav .tab-menu-label {
  color: var(--meal-ink) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

@media (max-width: 390px) {
  #app .home-meal-ref-heading {
    left: 25px;
  }

  #app .home-meal-ref-heading h2 {
    font-size: 40px !important;
  }

  #app .home-meal-ref-progress {
    left: 124px;
  }

  #app .home-meal-ref-stage-1 {
    right: 8px;
  }

  #app .home-meal-ref-stage-3,
  #app .home-meal-ref-stage-5 {
    right: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .home-meal-reference-v1 *,
  #app .home-meal-reference-nav * {
    animation: none !important;
    transition: none !important;
  }
}

/* ===== profile-functional-v1.css ===== */
/* Functional profile v1 — live implementation of the approved screenprint concept. */
.phone.profile-frame-phone.profile-mono-preview {
  --profile-live-mint: #cfe5c7;
  --profile-live-mint-deep: #9fc68f;
  --profile-live-cream: #fff4df;
  --profile-live-coral: #e85b3b;
  --profile-live-yellow: #f5c53f;
  --profile-live-blue: #a9cceb;
  --profile-live-pink: #e89abc;
  --profile-live-cocoa: #382124;
  --profile-live-muted: rgba(56, 33, 36, .62);
  grid-template-rows: 0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--profile-live-mint) !important;
  box-shadow: none;
}

.phone.profile-frame-phone.profile-mono-preview > .top {
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

.phone.profile-frame-phone.profile-mono-preview > .content {
  padding: 0 !important;
  overflow-x: hidden;
  background-color: var(--profile-live-mint) !important;
  background-image: url("./assets/ui/profile-mint-texture-tile-v21.png") !important;
  background-repeat: repeat !important;
  background-size: 96px 96px !important;
  overscroll-behavior: contain;
  scrollbar-color: var(--profile-live-coral) transparent;
}

.phone.profile-frame-phone.profile-mono-preview > .content::-webkit-scrollbar {
  width: 4px;
}

.phone.profile-frame-phone.profile-mono-preview > .content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--profile-live-coral);
}

.profile-live-v1,
.profile-live-v1 * {
  box-sizing: border-box;
}

.profile-live-v1 {
  width: 100%;
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 17px 16px 30px;
  color: var(--profile-live-cocoa);
  background: transparent;
  font-family: "SUIT", "Pretendard", -apple-system, BlinkMacSystemFont, sans-serif;
}

.profile-live-v1 button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.profile-live-v1 button:focus-visible {
  outline: 3px solid rgba(232, 91, 59, .32);
  outline-offset: 3px;
}

.profile-live-toolbar {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 6px;
}

.profile-live-toolbar span,
.profile-live-card header span {
  display: block;
  color: var(--profile-live-coral);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
}

.profile-live-toolbar h2 {
  margin: 2px 0 0;
  color: var(--profile-live-cocoa);
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.075em;
}

.profile-live-toolbar > button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--profile-live-cream);
  color: var(--profile-live-cocoa);
  box-shadow: 0 3px 0 rgba(56, 33, 36, .12);
  cursor: pointer;
}

.profile-live-toolbar > button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(56, 33, 36, .12);
}

.profile-live-hero {
  position: relative;
  isolation: isolate;
  min-height: 318px;
  display: grid;
  grid-template-columns: 45% 55%;
  overflow: hidden;
  padding: 24px 18px 17px;
  border: 0;
  border-radius: 74px 52px 60px 44px / 48px 58px 45px 54px;
  background-color: var(--profile-live-cream);
  background-image:
    radial-gradient(circle at 6px 7px, rgba(56, 33, 36, .045) 0 .6px, transparent .8px),
    url("./assets/paper-grain.svg");
  background-size: 18px 19px, 176px 176px;
  box-shadow: 0 5px 0 rgba(56, 33, 36, .08);
}

.profile-live-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -42px;
  bottom: -55px;
  width: 178px;
  height: 116px;
  border-radius: 50%;
  background: var(--profile-live-mint);
  opacity: .34;
  transform: rotate(-9deg);
}

.profile-live-character {
  position: relative;
  min-width: 0;
  height: 100%;
}

.profile-live-character > img {
  position: absolute;
  z-index: 3;
  right: -1px;
  bottom: -10px;
  width: 132%;
  height: 292px;
  display: block;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 5px 0 rgba(56, 33, 36, .08));
}

.profile-live-flower {
  position: absolute;
  z-index: 1;
  top: 92px;
  left: -8px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--profile-live-cream) 0 8px, transparent 9px),
    radial-gradient(ellipse at 50% 13%, var(--profile-live-coral) 0 14px, transparent 15px),
    radial-gradient(ellipse at 86% 50%, var(--profile-live-coral) 0 14px, transparent 15px),
    radial-gradient(ellipse at 50% 87%, var(--profile-live-coral) 0 14px, transparent 15px),
    radial-gradient(ellipse at 14% 50%, var(--profile-live-coral) 0 14px, transparent 15px);
  transform: rotate(-8deg);
}

.profile-live-dots {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: -10px;
  width: 90px;
  height: 116px;
  background: radial-gradient(circle, var(--profile-live-cocoa) 0 1.2px, transparent 1.5px) 0 0 / 7px 7px;
  opacity: .78;
  mask-image: radial-gradient(ellipse, #000 28%, transparent 72%);
  transform: rotate(-7deg);
}

.profile-live-identity {
  position: relative;
  z-index: 4;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 31px 0 0 15px;
}

.profile-live-role {
  color: var(--profile-live-muted);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .02em;
}

.profile-live-name {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  margin-top: 3px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--profile-live-coral);
}

.profile-live-name h1 {
  margin: 0;
  color: var(--profile-live-cocoa);
  font-size: 36px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.08em;
}

.profile-live-name b {
  padding-bottom: 2px;
  color: var(--profile-live-cocoa);
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
}

.profile-live-identity > p {
  align-self: flex-start;
  margin: 17px 0 12px;
  padding: 7px 12px;
  border-radius: 999px 999px 999px 4px;
  background: rgba(159, 198, 143, .58);
  color: var(--profile-live-cocoa);
  font-size: 11px;
  font-weight: 850;
}

.profile-live-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-bottom: 9px;
}

.profile-live-stats > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 0 4px;
  text-align: center;
}

.profile-live-stats > span + span {
  border-left: 1px dashed rgba(56, 33, 36, .24);
}

.profile-live-stats small {
  color: var(--profile-live-cocoa);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

.profile-live-stats strong {
  color: var(--profile-live-coral);
  font-size: 28px;
  font-weight: 950;
  line-height: 1;
}

.profile-live-social {
  min-height: 88px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 63px 63px 18px;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 13px 14px;
  border: 0;
  border-radius: 17px;
  background-color: var(--profile-live-cream);
  background-image: url("./assets/paper-grain.svg");
  background-size: 176px 176px;
  color: var(--profile-live-cocoa);
  box-shadow: 0 4px 0 rgba(56, 33, 36, .08);
  text-align: left;
  cursor: pointer;
}

.profile-live-social:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(56, 33, 36, .08);
}

.profile-live-social-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px 15px 11px 14px;
  background: var(--profile-live-mint-deep);
  color: var(--profile-live-cream);
}

.profile-live-social > strong {
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.045em;
}

.profile-live-social-number {
  min-width: 0;
  padding-left: 9px;
  border-left: 1px dashed rgba(56, 33, 36, .22);
  text-align: center;
}

.profile-live-social-number small,
.profile-live-social-number b {
  display: block;
}

.profile-live-social-number small {
  color: var(--profile-live-muted);
  font-size: 8px;
  font-weight: 800;
}

.profile-live-social-number b {
  margin-top: 3px;
  color: var(--profile-live-coral);
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
}

.profile-live-card {
  min-width: 0;
  padding: 18px;
  border: 0;
  border-radius: 17px;
  background-color: var(--profile-live-cream);
  background-image: url("./assets/paper-grain.svg");
  background-size: 176px 176px;
  box-shadow: 0 4px 0 rgba(56, 33, 36, .08);
}

.profile-live-card > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.profile-live-card header h3 {
  margin: 3px 0 0;
  color: var(--profile-live-cocoa);
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: -.065em;
}

.profile-live-card > header > b {
  color: var(--profile-live-coral);
  font-size: 12px;
  font-weight: 900;
}

.profile-live-current-title {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -2px 0 13px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(159, 198, 143, .32);
  transition: transform 180ms ease, background-color 180ms ease;
}

.profile-live-current-title.is-picked {
  background: rgba(245, 197, 63, .42);
  transform: scale(1.015);
}

.profile-live-current-title span {
  color: var(--profile-live-muted);
  font-size: 8px;
  font-weight: 850;
}

.profile-live-current-title strong {
  color: var(--profile-live-cocoa);
  font-size: 11px;
  font-weight: 900;
}

.profile-live-title-track {
  min-width: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72px;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 5px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.profile-live-title-track::-webkit-scrollbar {
  display: none;
}

.profile-live-title-badge {
  position: relative;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(207, 229, 199, .62);
  color: var(--profile-live-coral);
  box-shadow: none;
  scroll-snap-align: start;
  cursor: pointer;
}

.profile-live-title-badge:nth-child(4n + 2) { color: var(--profile-live-yellow); }
.profile-live-title-badge:nth-child(4n + 3) { color: var(--profile-live-blue); }
.profile-live-title-badge:nth-child(4n) { color: var(--profile-live-pink); }

.profile-live-title-badge i {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 43px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.profile-live-title-badge small {
  position: absolute;
  right: 3px;
  bottom: 3px;
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-live-cocoa);
  color: var(--profile-live-cream);
  font-size: 7px;
  font-weight: 900;
}

.profile-live-title-badge.locked {
  opacity: .34;
  filter: grayscale(.65);
  cursor: default;
}

.profile-live-stickers > header > button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(56, 33, 36, .16);
  border-radius: 999px;
  background: rgba(207, 229, 199, .44);
  color: var(--profile-live-cocoa);
  box-shadow: none;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.profile-live-stickers > header > button span {
  color: var(--profile-live-muted);
  font-size: 7px;
  letter-spacing: 0;
}

.profile-live-sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.profile-live-sticker {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background: rgba(207, 229, 199, .52);
  box-shadow: none;
  cursor: pointer;
}

.profile-live-sticker:nth-child(4n + 2) { background: rgba(245, 197, 63, .38); }
.profile-live-sticker:nth-child(4n + 3) { background: rgba(169, 204, 235, .45); }
.profile-live-sticker:nth-child(4n) { background: rgba(232, 154, 188, .34); }

.profile-live-sticker img {
  width: 80%;
  height: 80%;
  display: block;
  object-fit: contain;
}

.profile-live-sticker > span {
  position: absolute;
  right: 2px;
  bottom: 2px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-live-cocoa);
  color: var(--profile-live-cream);
  font-size: 7px;
  font-weight: 900;
}

.profile-live-sticker.locked {
  opacity: .38;
  filter: grayscale(.86);
  cursor: default;
}

.profile-live-sticker.locked img {
  opacity: .45;
}

.profile-live-stickers > .sticker-detail {
  margin: 13px 0 0;
  border: 0;
  border-radius: 14px;
  background: rgba(207, 229, 199, .42);
  box-shadow: none;
}

.profile-live-allergies > header > button {
  min-height: 30px;
  margin: 0;
  padding: 0 11px;
  border: 1px solid var(--profile-live-coral);
  border-radius: 999px;
  background: transparent;
  color: var(--profile-live-coral);
  box-shadow: none;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.profile-live-allergy-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-live-allergy-chip {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(56, 33, 36, .19);
  border-radius: 999px;
  background: rgba(255, 255, 255, .42);
  color: var(--profile-live-cocoa);
  overflow: hidden;
}

.profile-live-allergy-chip.active {
  border-color: var(--profile-live-mint-deep);
  background: rgba(159, 198, 143, .62);
}

.profile-live-allergy-chip > button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0 13px;
  border: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.profile-live-allergy-chip > .profile-live-allergy-remove {
  width: 28px;
  min-height: 34px;
  justify-content: center;
  padding: 0 7px 1px 2px;
  color: var(--profile-live-coral);
  font-size: 17px;
  line-height: 1;
}

.profile-live-allergy-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 55px;
  gap: 7px;
  margin-top: 11px;
}

.profile-live-allergy-editor input {
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(56, 33, 36, .2);
  border-radius: 12px;
  outline: 0;
  background: rgba(255, 255, 255, .62);
  color: var(--profile-live-cocoa);
  font: inherit;
  font-size: 11px;
}

.profile-live-allergy-editor input:focus {
  border-color: var(--profile-live-coral);
  box-shadow: 0 0 0 3px rgba(232, 91, 59, .12);
}

.profile-live-allergy-editor button {
  border: 0;
  border-radius: 12px;
  background: var(--profile-live-coral);
  color: var(--profile-live-cream);
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
}

.profile-live-account {
  scroll-margin-top: 14px;
}

.profile-live-setting-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.profile-live-setting-list > button {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 0;
  border-radius: 13px;
  background: rgba(207, 229, 199, .42);
  color: var(--profile-live-cocoa);
  box-shadow: none;
  text-align: left;
  cursor: pointer;
}

.profile-live-setting-list > button:nth-child(2) { background: rgba(245, 197, 63, .28); }
.profile-live-setting-list > button:nth-child(3) { background: rgba(169, 204, 235, .34); }
.profile-live-setting-list > button.danger { background: rgba(232, 91, 59, .12); }

.profile-live-setting-list > button > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--profile-live-cream);
}

.profile-live-setting-list > button > b {
  min-width: 0;
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1.28;
}

.profile-live-account > footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px dashed rgba(56, 33, 36, .24);
  color: var(--profile-live-muted);
  font-size: 8px;
  font-weight: 750;
}

.profile-live-account > footer > button {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--profile-live-cocoa);
  color: var(--profile-live-cream);
  box-shadow: none;
  font-size: 9px;
  font-weight: 850;
  cursor: pointer;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav {
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  padding: 7px 10px max(10px, env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  background-color: var(--profile-live-cream) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 176px 176px !important;
  box-shadow: 0 -5px 18px rgba(56, 33, 36, .08) !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav::before,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button:hover,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active {
  min-width: 0;
  min-height: 61px;
  padding: 3px 2px 8px;
  border: 0 !important;
  background: transparent !important;
  color: var(--profile-live-cocoa) !important;
  box-shadow: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-icon,
.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-label {
  opacity: 1 !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-icon {
  width: 39px !important;
  height: 39px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .profile-poster-menu-svg {
  width: 37px;
  height: 37px;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav .tab-menu-label {
  color: var(--profile-live-cocoa) !important;
  font-family: "SUIT", "Pretendard", sans-serif;
  font-size: 9px !important;
  font-weight: 850 !important;
}

.phone.profile-frame-phone.profile-mono-preview > .profile-poster-nav button.active::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 2px;
  left: 17px;
  height: 3px;
  display: block !important;
  border-radius: 0;
  background: var(--profile-live-coral);
}

@media (max-width: 560px) {
  .page.mono-preview-page:has(.profile-frame-phone) {
    min-height: 100dvh;
    place-items: stretch;
    padding: 0 !important;
  }

  .phone.profile-frame-phone.profile-mono-preview {
    width: 100%;
    max-width: none;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

@media (max-width: 380px) {
  .profile-live-v1 {
    padding-right: 13px;
    padding-left: 13px;
  }

  .profile-live-hero {
    min-height: 300px;
    grid-template-columns: 43% 57%;
    padding-right: 14px;
    padding-left: 14px;
  }

  .profile-live-character > img {
    right: -7px;
    height: 276px;
  }

  .profile-live-identity {
    padding-left: 10px;
  }

  .profile-live-name h1 {
    font-size: 32px;
  }

  .profile-live-name b {
    font-size: 13px;
  }

  .profile-live-stats small {
    font-size: 8px;
  }

  .profile-live-stats strong {
    font-size: 24px;
  }

  .profile-live-social {
    grid-template-columns: 42px minmax(0, 1fr) 54px 54px 14px;
    gap: 6px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .profile-live-social-icon {
    width: 40px;
    height: 40px;
  }

  .profile-live-social > strong {
    font-size: 12px;
  }

  .profile-live-title-track {
    grid-auto-columns: 66px;
    gap: 8px;
  }

  .profile-live-title-badge {
    width: 66px;
    height: 66px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-live-v1 *,
  .profile-live-v1 *::before,
  .profile-live-v1 *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Reference-faithful compact composition (v2). */
.profile-live-v1 {
  gap: 13px;
  padding: 17px 14px 22px;
}

.profile-live-toolbar {
  min-height: 40px;
  padding: 0 7px;
}

.profile-live-toolbar h2 {
  margin: 0;
  font-size: 30px;
  letter-spacing: -.07em;
}

.profile-live-toolbar > button {
  width: 36px;
  height: 36px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.profile-live-toolbar > button:active {
  transform: rotate(12deg);
  box-shadow: none;
}

.profile-live-hero {
  width: calc(100% + 28px);
  min-height: 270px;
  margin-inline: -14px;
  grid-template-columns: 46% 54%;
  padding: 17px 20px 13px 16px;
  border-radius: 108px 104px 98px 96px / 74px 82px 63px 72px;
  box-shadow: none;
}

.profile-live-hero::after {
  right: -48px;
  bottom: -50px;
  width: 176px;
  height: 103px;
}

.profile-live-character > img {
  right: 4px;
  bottom: -7px;
  width: 128%;
  height: 260px;
  filter: drop-shadow(0 4px 0 rgba(56, 33, 36, .07));
}

.profile-live-flower {
  top: 71px;
  left: -2px;
  width: 52px;
  height: 52px;
}

.profile-live-dots {
  bottom: 18px;
  left: 4px;
  width: 75px;
  height: 108px;
}

.profile-live-identity {
  padding: 35px 0 0 7px;
}

.profile-live-name {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.profile-live-name h1 {
  font-size: 38px;
  letter-spacing: -.075em;
}

.profile-live-level {
  margin-top: 11px;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.profile-live-accent-line {
  width: 31px;
  height: 2px;
  display: block;
  margin-top: 14px;
  background: var(--profile-live-coral);
}

.profile-live-identity > p {
  margin: 19px 0 12px;
  padding: 6px 11px 7px;
  border-radius: 1px 999px 999px 1px;
  font-size: 11px;
}

.profile-live-identity > p::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: -18px;
  border-top: 8px solid transparent;
  border-right: 12px solid rgba(159, 198, 143, .58);
  border-bottom: 8px solid transparent;
}

.profile-live-stats {
  padding: 0 0 6px;
}

.profile-live-stats > span {
  gap: 4px;
  padding: 0 3px;
}

.profile-live-stats small {
  font-size: 8px;
}

.profile-live-stats strong {
  font-size: 27px;
}

.profile-live-social {
  min-height: 84px;
  grid-template-columns: 49px 108px minmax(70px, 1fr) minmax(70px, 1fr) 12px;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 9px;
  box-shadow: none;
}

.profile-live-social-icon {
  width: 45px;
  height: 52px;
  border-radius: 0;
  background: transparent;
  color: #7ca85f;
}

.profile-live-social > strong {
  padding-left: 5px;
  font-size: 15px;
  line-height: 1.25;
}

.profile-live-social-number {
  min-width: 0;
  min-height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding-left: 8px;
  text-align: left;
}

.profile-live-social-number i {
  width: 28px;
  display: grid;
  flex: 0 0 28px;
  place-items: center;
  color: var(--profile-live-coral);
  font-style: normal;
}

.profile-live-social-number.following {
  border-left: 0;
}

.profile-live-social-number.following i {
  color: #77aee0;
}

.profile-live-social-number small {
  font-size: 7px;
  white-space: nowrap;
}

.profile-live-social-number b {
  margin-top: 4px;
  font-size: 19px;
}

.profile-live-card {
  border-radius: 9px;
  box-shadow: none;
}

.profile-live-titles,
.profile-live-stickers,
.profile-live-allergies {
  display: grid;
  align-items: center;
}

.profile-live-titles {
  min-height: 108px;
  grid-template-columns: 87px minmax(0, 1fr);
  gap: 7px;
  padding: 11px 12px;
}

.profile-live-titles > header,
.profile-live-stickers > header,
.profile-live-allergies > header {
  display: block;
  align-self: stretch;
  margin: 0;
}

.profile-live-card header h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
}

.profile-live-current-title {
  min-height: 25px;
  display: inline-flex;
  margin: 11px 0 0;
  padding: 5px 8px;
  white-space: nowrap;
}

.profile-live-current-title::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--profile-live-mint-deep);
}

.profile-live-current-title strong {
  font-size: 9px;
}

.profile-live-title-side {
  min-width: 0;
  align-self: center;
}

.profile-live-title-side > b {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.profile-live-title-track {
  grid-auto-columns: 55px;
  gap: 6px;
  padding: 1px 0 3px;
}

.profile-live-title-badge {
  width: 55px;
  height: 55px;
  background: rgba(159, 198, 143, .64);
  color: #66944e;
  border: 2px solid rgba(255, 255, 255, .68);
}

.profile-live-title-badge:nth-child(4n + 2) { background: rgba(245, 197, 63, .56); color: #e65436; }
.profile-live-title-badge:nth-child(4n + 3) { background: rgba(169, 204, 235, .72); color: var(--profile-live-cocoa); }
.profile-live-title-badge:nth-child(4n) { background: rgba(232, 154, 188, .5); color: #da679b; }

.profile-live-title-badge i,
.profile-live-sticker i {
  display: grid;
  place-items: center;
  font-style: normal;
}

.profile-live-title-badge i svg {
  width: 41px;
  height: 41px;
}

.profile-live-title-badge small {
  right: -2px;
  bottom: -2px;
  min-width: 17px;
  height: 17px;
  background: rgba(56, 33, 36, .74);
  font-size: 6px;
}

.profile-live-stickers {
  min-height: 126px;
  grid-template-columns: 101px minmax(0, 1fr);
  gap: 9px;
  padding: 11px 12px;
}

.profile-live-stickers > header {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.profile-live-stickers > header > button {
  justify-content: flex-start;
  align-self: flex-start;
  min-height: 28px;
  margin-top: 13px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 14px;
}

.profile-live-stickers > header > button b {
  color: var(--profile-live-coral);
  font-size: 24px;
}

.profile-live-stickers > header > button span,
.profile-live-stickers > header > button svg {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.profile-live-sticker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px 6px;
}

.profile-live-sticker {
  min-height: 0;
  padding: 3px;
  border: 1px solid rgba(56, 33, 36, .18);
  background: rgba(255, 255, 255, .48);
  color: var(--profile-live-coral);
}

.profile-live-sticker:nth-child(4n + 2) { background: rgba(255, 255, 255, .48); color: #f2b91c; }
.profile-live-sticker:nth-child(4n + 3) { background: rgba(255, 255, 255, .48); color: #77aee0; }
.profile-live-sticker:nth-child(4n) { background: rgba(255, 255, 255, .48); color: #b9795e; }
.profile-live-sticker:nth-child(5) { color: #76a458; }
.profile-live-sticker:nth-child(7) { color: #e78ab8; }
.profile-live-sticker:nth-child(8) { color: var(--profile-live-coral); }

.profile-live-sticker i svg {
  width: 30px;
  height: 30px;
}

.profile-live-sticker > span {
  right: -1px;
  bottom: -1px;
  min-width: 14px;
  height: 14px;
  font-size: 6px;
}

.profile-live-stickers > .sticker-detail {
  grid-column: 1 / -1;
}

.profile-live-allergies {
  min-height: 50px;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 6px;
  padding: 8px 12px;
}

.profile-live-allergies .profile-live-card header h3,
.profile-live-allergies header h3 {
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
}

.profile-live-allergy-list {
  min-width: 0;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  padding: 1px;
  scrollbar-width: none;
}

.profile-live-allergy-list::-webkit-scrollbar {
  display: none;
}

.profile-live-allergy-chip {
  min-height: 29px;
  flex: 0 0 auto;
  background: transparent;
}

.profile-live-allergy-chip > button {
  min-height: 27px;
  gap: 3px;
  padding: 0 8px;
  font-size: 10px;
}

.profile-live-allergy-chip svg {
  flex: 0 0 auto;
}

.profile-live-allergy-chip > .profile-live-allergy-remove {
  width: 22px;
  min-height: 27px;
  padding: 0 5px 1px 0;
}

.profile-live-allergy-add {
  width: 29px;
  height: 29px;
  flex: 0 0 29px;
  border: 1px dashed rgba(56, 33, 36, .28);
  border-radius: 50%;
  background: transparent;
  color: var(--profile-live-coral);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.profile-live-allergy-editor {
  grid-column: 1 / -1;
  margin-top: 7px;
}

@media (max-width: 380px) {
  .profile-live-v1 {
    padding-right: 12px;
    padding-left: 12px;
  }

  .profile-live-hero {
    width: calc(100% + 24px);
    min-height: 260px;
    margin-inline: -12px;
    padding-right: 16px;
    padding-left: 12px;
  }

  .profile-live-character > img {
    right: 1px;
    height: 250px;
  }

  .profile-live-name h1 {
    font-size: 35px;
  }

  .profile-live-social {
    grid-template-columns: 44px 92px minmax(64px, 1fr) minmax(64px, 1fr) 10px;
  }

  .profile-live-social-number {
    gap: 2px;
    padding-left: 5px;
  }

  .profile-live-social-number i {
    width: 23px;
    flex-basis: 23px;
  }

  .profile-live-titles {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .profile-live-title-track {
    grid-auto-columns: 51px;
  }

  .profile-live-title-badge {
    width: 51px;
    height: 51px;
  }

  .profile-live-stickers {
    grid-template-columns: 94px minmax(0, 1fr);
  }
}

/* ===== profile-exact-v3.css ===== */
@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Regular-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bap Gaegu Full";
  src: url("./assets/fonts/Gaegu-Bold-full.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

/* Profile reference — built on the 430 × 853 poster proportions. */
.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) {
  --profile-paper: #fffaf0;
  --profile-ink: #35180d;
  --profile-coral: #e86f55;
  --profile-coral-deep: #d9573e;
  --profile-mint: #d7e7d1;
  --profile-blue: #97bdd8;
  --profile-yellow: #f4cb49;
  grid-template-rows: minmax(0, 1fr) 68px !important;
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--profile-paper) !important;
  box-shadow: none !important;
  filter: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4)::before,
.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4)::after,
.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .top {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .content {
  display: block !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--profile-paper) !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .content::-webkit-scrollbar {
  display: none;
}

.profile-reference-v4,
.profile-reference-v4 * {
  box-sizing: border-box;
}

.profile-reference-v4 {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: 785px;
  margin: 0;
  padding: 805px 0 26px !important;
  overflow: hidden;
  color: var(--profile-ink);
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  background-color: var(--profile-paper);
  background-image:
    linear-gradient(rgba(255, 252, 242, .66), rgba(255, 249, 237, .66)),
    url("./assets/paper-grain.svg");
  background-repeat: repeat, repeat;
  background-size: auto, 270px 270px;
}

.profile-reference-v4::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -61px;
  left: -55px;
  width: 140px;
  height: 128px;
  border-radius: 45% 55% 41% 59% / 53% 40% 60% 47%;
  background: rgba(248, 214, 85, .57);
  filter: blur(4px);
  transform: rotate(-10deg);
}

.profile-reference-v4::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 83px;
  left: 27px;
  width: 31px;
  height: 31px;
  background:
    linear-gradient(90deg, transparent 35%, rgba(119, 169, 204, .63) 35% 65%, transparent 65%),
    linear-gradient(transparent 35%, rgba(119, 169, 204, .63) 35% 65%, transparent 65%);
  background-size: 19px 19px;
  opacity: .8;
  pointer-events: none;
}

.profile-ref-header {
  position: absolute;
  z-index: 10;
  top: 34px;
  right: 19px;
  left: 80px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.profile-ref-header::after {
  content: "";
  position: absolute;
  top: 51px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(232, 111, 85, .68);
  box-shadow: -14px 10px 0 rgba(232, 111, 85, .62), 3px 17px 0 rgba(232, 111, 85, .66);
  pointer-events: none;
}

.profile-ref-header > div {
  min-width: 0;
}

.profile-ref-header > div > span {
  display: block;
  color: var(--profile-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .075em !important;
}

.profile-ref-header h1 {
  margin: 8px 0 0 !important;
  color: var(--profile-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  -webkit-text-stroke: .25px currentColor;
  white-space: nowrap;
}

.profile-ref-settings {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  margin: -14px 0 0 !important;
  padding: 0 !important;
  border: 1px solid rgba(123, 91, 57, .18) !important;
  border-radius: 50% !important;
  color: #6f5439 !important;
  background-color: rgba(255, 250, 235, .96) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
  box-shadow: 1px 3px 5px rgba(91, 66, 39, .14) !important;
  transform: rotate(-5deg) !important;
}

.profile-ref-settings svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.25;
}

.profile-ref-settings .profile-icon-accent-red {
  stroke: currentColor !important;
}

.profile-ref-hero {
  position: absolute;
  z-index: 5;
  top: 105px;
  right: 27px;
  left: 27px;
  height: 257px;
  overflow: hidden;
  border: 1px solid rgba(143, 106, 65, .22);
  border-radius: 9% 7% 8% 7% / 8% 7% 9% 8%;
  clip-path: polygon(2% 2%, 11% 1%, 20% 2%, 29% 1%, 39% 2%, 49% 1%, 59% 2%, 69% 1%, 79% 2%, 89% 1%, 98% 3%, 99% 12%, 98% 24%, 100% 36%, 98% 48%, 100% 60%, 98% 72%, 99% 85%, 97% 97%, 88% 99%, 78% 98%, 68% 100%, 58% 98%, 48% 100%, 38% 98%, 28% 100%, 18% 98%, 8% 100%, 2% 96%, 1% 84%, 2% 72%, 0 60%, 2% 48%, 1% 36%, 2% 24%, 1% 12%);
  background-color: rgba(255, 253, 246, .99);
  background-image: url("./assets/paper-grain.svg");
  background-size: 230px 230px;
  filter:
    drop-shadow(0 1px 0 rgba(118, 84, 48, .17))
    drop-shadow(3px 6px 5px rgba(91, 67, 37, .19));
}

.profile-ref-hero::before {
  content: "×\A×";
  position: absolute;
  z-index: 3;
  top: 101px;
  left: -18px;
  color: rgba(113, 164, 198, .66);
  font-size: 24px;
  font-weight: 700;
  line-height: .65;
  white-space: pre;
  transform: rotate(-12deg);
}

.profile-ref-character {
  position: absolute;
  inset: 0 auto 0 0;
  width: 218px;
}

.profile-ref-character > i {
  position: absolute;
  top: 43px;
  left: 16px;
  width: 190px;
  height: 184px;
  border-radius: 46% 54% 49% 51% / 54% 45% 55% 46%;
  background: rgba(249, 215, 91, .58);
  filter: blur(3px);
  transform: rotate(-7deg);
}

.profile-ref-character > b {
  position: absolute;
  z-index: 1;
  top: 36px;
  left: 23px;
  width: 180px;
  height: 193px;
  border: 1.5px dashed rgba(235, 112, 83, .82);
  border-radius: 50%;
  transform: rotate(-8deg);
}

.profile-ref-character > span {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 26px;
  width: 181px;
  height: 246px;
}

.profile-ref-character > span img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(1.03) contrast(1.02);
}

.profile-ref-character .profile-ref-character-overlay {
  z-index: 2;
}

.profile-ref-character::after {
  content: "✦";
  position: absolute;
  z-index: 3;
  top: 19px;
  left: 53px;
  color: var(--profile-yellow);
  font-size: 25px;
  transform: rotate(4deg);
}

.profile-ref-summary {
  position: absolute;
  z-index: 4;
  top: 28px;
  right: 14px;
  width: 148px;
  text-align: left;
}

.profile-ref-level {
  display: block;
  color: var(--profile-coral-deep) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .025em !important;
}

.profile-ref-current-title {
  position: relative;
  width: 143px;
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 5px 0 0 -5px !important;
  padding: 0 8px 2px !important;
  border: 2px dashed rgba(105, 148, 120, .48) !important;
  border-radius: 18% 14% 17% 13% / 24% 20% 26% 19% !important;
  color: var(--profile-ink) !important;
  background-color: rgba(211, 232, 207, .92) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
  box-shadow: 1px 3px 5px rgba(80, 108, 78, .13) !important;
  transform: rotate(-1deg) !important;
}

.profile-ref-current-title b {
  max-width: 118px;
  overflow: hidden;
  color: inherit !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.07em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-ref-current-title i {
  position: absolute;
  left: 8px;
  color: #6e9c7d !important;
  font-family: serif !important;
  font-size: 13px !important;
  font-style: normal;
  transform: rotate(-36deg);
}

.profile-ref-current-title i:last-child {
  right: 8px;
  left: auto;
  transform: scaleX(-1) rotate(-36deg);
}

.profile-ref-stats {
  margin: 6px 0 0 !important;
}

.profile-ref-stats > div {
  position: relative;
  height: 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px dotted rgba(126, 92, 58, .25);
}

.profile-ref-stats dt {
  color: var(--profile-ink) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

.profile-ref-stats dd {
  margin: 0 !important;
  color: var(--profile-coral-deep) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
}

.profile-ref-social {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--profile-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.profile-ref-social span,
.profile-ref-social b,
.profile-ref-social i {
  color: inherit !important;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.profile-ref-edit {
  width: 119px;
  height: 35px;
  display: grid;
  place-items: center;
  margin: 3px 0 0 -2px !important;
  padding: 0 8px 2px !important;
  border: 0 !important;
  clip-path: polygon(5% 11%, 19% 4%, 34% 9%, 49% 3%, 64% 8%, 80% 3%, 96% 10%, 100% 30%, 97% 52%, 100% 75%, 95% 94%, 80% 90%, 65% 97%, 50% 91%, 35% 97%, 20% 90%, 4% 95%, 0 74%, 3% 51%, 0 29%);
  color: #fff9ed !important;
  background: var(--profile-coral) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  transform: rotate(-1deg) !important;
}

.profile-ref-card {
  position: absolute;
  z-index: 6;
  right: 27px;
  left: 27px;
  overflow: hidden;
  border: 1px solid rgba(143, 106, 65, .21);
  border-radius: 8% 7% 8% 7% / 10% 8% 9% 8%;
  clip-path: polygon(2% 3%, 12% 1%, 22% 3%, 32% 1%, 42% 3%, 52% 1%, 62% 3%, 72% 1%, 82% 3%, 92% 1%, 98% 5%, 99% 18%, 98% 34%, 100% 50%, 98% 66%, 99% 83%, 97% 96%, 88% 99%, 77% 98%, 66% 100%, 55% 98%, 44% 100%, 33% 98%, 22% 100%, 11% 98%, 3% 95%, 1% 82%, 2% 66%, 0 50%, 2% 34%, 1% 18%);
  background-color: rgba(255, 253, 246, .99);
  background-image: url("./assets/paper-grain.svg");
  background-size: 220px 220px;
  filter:
    drop-shadow(0 1px 0 rgba(118, 84, 48, .16))
    drop-shadow(2px 5px 4px rgba(91, 67, 37, .18));
}

.profile-ref-card > header {
  position: absolute;
  z-index: 5;
  top: 13px;
  right: 18px;
  left: 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.profile-ref-card > header h2 {
  margin: 0 !important;
  color: var(--profile-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

.profile-ref-card > header strong {
  color: var(--profile-ink) !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.profile-ref-card > header strong b {
  color: var(--profile-coral-deep) !important;
  font-size: 22px !important;
}

.profile-ref-titles {
  top: 366px;
  height: 140px;
}

.profile-ref-title-grid {
  position: absolute;
  top: 40px;
  right: 14px;
  left: 14px;
  height: 92px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.profile-ref-title-badge {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  margin: 0 !important;
  padding: 8px 8px 15px !important;
  border: 2px dashed rgba(137, 105, 67, .28) !important;
  border-radius: 42% 48% 44% 51% / 47% 43% 52% 46% !important;
  clip-path: polygon(50% 0, 61% 7%, 74% 4%, 82% 15%, 94% 20%, 95% 34%, 100% 46%, 94% 58%, 95% 72%, 83% 80%, 76% 92%, 62% 91%, 50% 100%, 38% 92%, 25% 95%, 18% 82%, 6% 75%, 7% 61%, 0 49%, 6% 36%, 4% 23%, 17% 17%, 25% 5%, 39% 8%);
  color: var(--profile-ink) !important;
  background-color: rgba(255, 242, 218, .9) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 130px 130px !important;
  box-shadow: none !important;
  transform: rotate(-1deg) !important;
}

.profile-ref-title-badge span {
  color: inherit !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.04em !important;
}

.profile-ref-title-badge > i {
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  color: var(--profile-coral) !important;
  font-family: serif !important;
  font-size: 16px !important;
  font-style: normal;
  line-height: 1 !important;
}

.profile-ref-title-badge.earned {
  border-color: rgba(96, 143, 112, .58) !important;
  background-color: rgba(213, 233, 208, .96) !important;
  box-shadow: 0 0 0 3px rgba(231, 110, 83, .84) inset !important;
}

.profile-ref-title-badge.locked {
  color: rgba(91, 65, 43, .72) !important;
  background-color: rgba(255, 240, 211, .94) !important;
  filter: saturate(.68) contrast(.98);
}

.profile-ref-title-badge .profile-ref-lock {
  color: rgba(113, 88, 61, .65) !important;
  font-size: 15px !important;
}

.profile-ref-stickers {
  top: 513px;
  height: 196px;
}

.profile-ref-sticker-grid {
  position: absolute;
  top: 42px;
  right: 23px;
  left: 23px;
  height: 125px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, 1fr);
  gap: 5px 15px;
}

.profile-ref-sticker {
  position: relative;
  min-width: 0;
  display: grid;
  place-items: center;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px dashed rgba(143, 108, 68, .2) !important;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48% !important;
  color: rgba(118, 88, 55, .65) !important;
  background: rgba(255, 247, 227, .58) !important;
  box-shadow: none !important;
  transform: none !important;
}

.profile-ref-sticker img {
  width: 100px;
  height: 80px;
  display: block;
  object-fit: contain;
  filter: saturate(1.02) contrast(1.02);
}

.profile-ref-sticker.locked img {
  opacity: .72;
  filter: saturate(.68) contrast(.96);
}

.profile-ref-sticker-more span {
  color: rgba(143, 108, 68, .45) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 29px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.profile-ref-view-all {
  position: absolute;
  right: 19px;
  bottom: 8px;
  height: 21px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--profile-coral-deep) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

.profile-ref-view-all span {
  margin-left: 4px;
  color: inherit !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

.profile-ref-allergies {
  top: 716px;
  height: 62px;
  overflow: visible;
}

.profile-ref-allergies > header {
  top: 8px;
  right: auto;
}

.profile-ref-allergies > header h2 {
  font-size: 17px !important;
}

.profile-ref-allergy-list {
  position: absolute;
  top: 27px;
  right: 13px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.profile-ref-allergy,
.profile-ref-allergy-add {
  width: 78px;
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 !important;
  padding: 0 6px !important;
  border: 1px solid rgba(146, 110, 71, .17) !important;
  border-radius: 8px 6px 9px 7px !important;
  color: var(--profile-ink) !important;
  background-color: rgba(255, 248, 233, .92) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 105px 105px !important;
  box-shadow: 1px 2px 3px rgba(91, 67, 38, .08) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap;
  transform: none !important;
}

.profile-ref-allergy span {
  font-family: sans-serif !important;
  font-size: 15px !important;
}

.profile-ref-allergy.active {
  border-color: var(--profile-coral) !important;
  box-shadow: 0 0 0 2px rgba(232, 111, 85, .16) inset !important;
}

.profile-ref-allergy-add {
  width: 84px;
  flex: 0 0 84px;
  margin-left: auto !important;
  border: 1.5px dashed var(--profile-coral) !important;
  color: var(--profile-coral-deep) !important;
  background-color: rgba(255, 249, 237, .75) !important;
}

.profile-ref-allergy-editor {
  position: absolute;
  z-index: 20;
  top: 57px;
  right: 13px;
  width: 188px;
  height: 39px;
  display: grid;
  grid-template-columns: 1fr 49px;
  gap: 5px;
  padding: 5px;
  border: 1px solid rgba(143, 106, 65, .14);
  border-radius: 8px;
  background: #fff8e9;
  box-shadow: 2px 4px 8px rgba(72, 48, 29, .18);
}

.profile-ref-allergy-editor input {
  min-width: 0;
  height: 27px;
  padding: 0 7px;
  border: 1px solid rgba(143, 106, 65, .22);
  border-radius: 5px;
  color: var(--profile-ink);
  background: #fffdf7;
  font: 700 12px/1 "Bap Gaegu Full", cursive;
}

.profile-ref-allergy-editor button {
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #fff9ed;
  background: var(--profile-coral);
  font: 700 12px/1 "Bap Gaegu Full", cursive;
}

.profile-exact-live-summary {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.profile-reference-v4 > .profile-live-account {
  position: relative;
  z-index: 10;
  width: calc(100% - 36px);
  margin: 0 18px 24px;
  border-radius: 18px;
}

.profile-reference-v4 button:focus-visible {
  outline: 3px dashed var(--profile-coral) !important;
  outline-offset: 2px;
}

/* Bottom navigation matches the reference paper strip. */
.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav {
  position: relative !important;
  z-index: 30;
  width: 100%;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: stretch;
  gap: 0 !important;
  margin: 0 !important;
  padding: 3px 13px 2px !important;
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .13) !important;
  background-color: rgba(255, 250, 239, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 240px 240px !important;
  box-shadow: 0 -2px 7px rgba(105, 76, 43, .05) !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav::before,
.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav::after {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav button {
  position: relative;
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 42px 14px !important;
  place-content: center !important;
  justify-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--profile-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav button::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav button.active::after {
  content: "";
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 50%;
  width: 31px;
  height: 5px;
  display: block !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(-1deg);
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav .tab-menu-icon {
  width: 42px !important;
  height: 42px !important;
  display: grid !important;
  place-items: center;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav .tab-menu-icon::before {
  display: none !important;
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav .profile-poster-menu-svg {
  width: 37px !important;
  height: 37px !important;
  display: block;
  overflow: visible;
  opacity: .84;
  filter: saturate(.85) contrast(.96);
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav button.active .profile-poster-menu-svg {
  opacity: 1;
  filter: saturate(.98) contrast(1);
}

.phone.profile-frame-phone.profile-mono-preview:has(.profile-reference-v4) > .editorial-tabs.profile-poster-nav .tab-menu-label {
  color: var(--profile-ink) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

@media (max-width: 390px) {
  .profile-ref-header {
    left: 65px;
  }

  .profile-ref-header h1 {
    font-size: 31px !important;
  }

  .profile-ref-hero,
  .profile-ref-card {
    right: 20px;
    left: 20px;
  }

  .profile-ref-character {
    transform: translateX(-8px);
  }

  .profile-ref-summary {
    right: 14px;
  }

  .profile-ref-allergy,
  .profile-ref-allergy-add {
    padding-right: 7px !important;
    padding-left: 7px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 350px) {
  .profile-reference-v4 {
    min-height: 770px;
    padding-top: 790px !important;
  }

  .profile-ref-header {
    top: 29px;
    left: 54px;
  }

  .profile-ref-header h1 {
    font-size: 28px !important;
  }

  .profile-ref-hero,
  .profile-ref-card {
    right: 14px;
    left: 14px;
  }

  .profile-ref-summary {
    right: 9px;
    width: 137px;
  }

  .profile-ref-character {
    transform: translateX(-18px) scale(.96);
    transform-origin: left center;
  }

  .profile-ref-current-title {
    width: 130px;
  }

  .profile-ref-title-grid {
    gap: 4px;
  }

  .profile-ref-title-badge span {
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-reference-v4 *,
  .profile-poster-nav * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== ranking-reference-exact-v4.css ===== */
/*
 * Bapstage ranking — live watercolor reference v4.
 * The 430 × 853 layout follows the supplied 891 × 1765 artwork.
 */
.page.ranking-preview-page {
  min-height: 100dvh !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview {
  --ranking-paper: #fbf5e9;
  --ranking-card: #fffaf0;
  --ranking-ink: #3c1e0e;
  --ranking-coral: #e8755d;
  --ranking-coral-deep: #d95d47;
  --ranking-blue: #87b5d6;
  --ranking-blue-deep: #3e67a7;
  --ranking-yellow: #efbd31;
  --ranking-sage: #8da85f;
  --ranking-mint: #dcebd3;
  position: relative !important;
  width: min(100%, 430px) !important;
  height: min(100dvh, 853px) !important;
  min-height: min(100dvh, 853px) !important;
  aspect-ratio: auto !important;
  display: grid !important;
  grid-template-rows: 0 minmax(0, 1fr) calc(76px + env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ranking-paper) !important;
  box-shadow: 0 18px 60px rgba(71, 49, 23, .14) !important;
}

.phone.ranking-frame-phone.ranking-mono-preview::before,
.phone.ranking-frame-phone.ranking-mono-preview::after,
.phone.ranking-frame-phone.ranking-mono-preview > .top {
  display: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .content {
  position: relative !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--ranking-paper) !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-reference-v4 {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden !important;
  color: var(--ranking-ink) !important;
  background-color: var(--ranking-paper) !important;
  background-image:
    radial-gradient(circle at 1.5% 38%, rgba(141, 168, 95, .82) 0 3px, transparent 3.5px),
    radial-gradient(circle at 5% 41%, rgba(141, 168, 95, .75) 0 4px, transparent 4.5px),
    radial-gradient(circle at 98% 78%, rgba(141, 168, 95, .7) 0 3px, transparent 3.5px),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat !important;
  background-size: auto, auto, auto, 112px 112px !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  isolation: isolate;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-reference-v4::after {
  display: none !important;
  content: none !important;
}

.ranking-reference-v4 .ranking-page-wash {
  position: absolute;
  z-index: 0;
  top: -74px;
  left: -93px;
  width: 285px;
  height: 177px;
  display: block;
  border-radius: 44% 56% 51% 49%;
  background:
    radial-gradient(ellipse at center, rgba(249, 213, 93, .7) 0 42%, rgba(249, 213, 93, .48) 56%, transparent 74%);
  transform: rotate(-9deg);
}

.ranking-reference-v4 .ranking-page-checker {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 27px;
  width: 42px;
  height: 42px;
  display: block;
  opacity: .75;
  background:
    linear-gradient(90deg, var(--ranking-blue) 13px, transparent 13px 26px, var(--ranking-blue) 26px 39px, transparent 39px) 0 0 / 39px 13px no-repeat,
    linear-gradient(90deg, transparent 13px, var(--ranking-blue) 13px 26px, transparent 26px) 0 13px / 39px 13px no-repeat,
    linear-gradient(90deg, var(--ranking-blue) 13px, transparent 13px 26px, var(--ranking-blue) 26px 39px, transparent 39px) 0 26px / 39px 13px no-repeat;
}

.ranking-reference-v4 .ranking-page-coral-dots,
.ranking-reference-v4 .ranking-page-green-dots {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
}

.ranking-reference-v4 .ranking-page-coral-dots {
  top: 191px;
  right: 27px;
  background: rgba(232, 117, 93, .72);
  box-shadow: 19px -9px 0 rgba(232, 117, 93, .8), 31px 7px 0 rgba(232, 117, 93, .76);
}

.ranking-reference-v4 .ranking-page-green-dots {
  top: 139px;
  left: 7px;
  background: rgba(141, 168, 95, .8);
  box-shadow: 15px 17px 0 rgba(141, 168, 95, .72), -1px 35px 0 rgba(141, 168, 95, .66);
}

.ranking-reference-v4 .ranking-page-yellow-bars {
  position: absolute;
  z-index: 1;
  top: 103px;
  right: -14px;
  width: 47px;
  height: 13px;
  display: block;
  border-radius: 999px;
  background: rgba(241, 197, 61, .82);
  box-shadow: 0 16px 0 rgba(241, 197, 61, .78), 0 32px 0 rgba(241, 197, 61, .7);
}

.ranking-reference-v4 .ranking-poster-upper,
.ranking-reference-v4 .ranking-poster-lower {
  position: absolute !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  opacity: 1 !important;
  background: transparent !important;
}

.ranking-reference-v4 .ranking-poster-upper {
  z-index: 2;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 490px !important;
}

.ranking-reference-v4 .ranking-poster-heading {
  position: absolute !important;
  z-index: 12 !important;
  inset: 0 auto auto 43px !important;
  width: 345px !important;
  height: 164px !important;
  margin: 0 !important;
  padding: 29px 0 0 !important;
}

.ranking-reference-v4 .ranking-poster-heading > span {
  display: block;
  margin: 0 0 7px;
  color: var(--ranking-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.02em;
}

.ranking-reference-v4 .ranking-poster-heading h2 {
  display: block !important;
  margin: 0 !important;
  color: var(--ranking-ink) !important;
  font-family: "Bap Jua", "Pretendard", sans-serif !important;
  font-size: 43px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  white-space: nowrap;
}

.ranking-reference-v4 .ranking-poster-heading > p {
  margin: 8px 0 0;
  color: var(--ranking-ink);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.035em;
}

.ranking-reference-v4 .ranking-poster-scope {
  position: absolute !important;
  z-index: 40 !important;
  top: 132px !important;
  left: 16px !important;
  width: auto !important;
  height: 34px !important;
  display: flex !important;
  grid-template-columns: none !important;
  align-items: flex-start;
  gap: 29px !important;
  margin: 0 !important;
  pointer-events: auto !important;
}

.ranking-reference-v4 .ranking-poster-scope button,
.ranking-reference-v4 .ranking-poster-scope button:hover,
.ranking-reference-v4 .ranking-poster-scope button.active {
  position: relative;
  width: auto !important;
  min-width: 44px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 1px 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ranking-ink) !important;
  box-shadow: none !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ranking-reference-v4 .ranking-poster-scope button::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  bottom: 2px !important;
  left: 1px !important;
  width: auto !important;
  height: 4px !important;
  display: block !important;
  border-radius: 50% 40% 55% 35%;
  background: transparent !important;
  transform: rotate(-1deg);
}

.ranking-reference-v4 .ranking-poster-scope button.active::after {
  background: var(--ranking-coral) !important;
}

.phone.ranking-frame-phone.ranking-mono-preview .ranking-reference-v4 .ranking-poster-scope button,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-reference-v4 .ranking-poster-scope button:hover,
.phone.ranking-frame-phone.ranking-mono-preview .ranking-reference-v4 .ranking-poster-scope button.active {
  color: var(--ranking-ink) !important;
  opacity: 1 !important;
}

.ranking-reference-v4 .ranking-poster-stage {
  position: absolute !important;
  z-index: 3 !important;
  inset: 139px 0 auto 0 !important;
  width: 100% !important;
  height: 340px !important;
}

.ranking-reference-v4 .ranking-poster-stage::before,
.ranking-reference-v4 .ranking-poster-stage::after {
  content: "";
  position: absolute;
  z-index: 7;
  bottom: 4px;
  width: 28px;
  height: 38px;
  background: #9bb663;
  clip-path: polygon(0 100%, 11% 32%, 32% 72%, 46% 0, 62% 67%, 88% 29%, 100% 100%);
  opacity: .82;
}

.ranking-reference-v4 .ranking-poster-stage::before {
  left: 25px;
  transform: rotate(-8deg);
}

.ranking-reference-v4 .ranking-poster-stage::after {
  right: 26px;
  transform: scaleX(-1) rotate(-8deg);
}

.ranking-reference-v4 .ranking-poster-person {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

.ranking-reference-v4 .ranking-poster-first {
  z-index: 6 !important;
  top: 0 !important;
  left: 146px !important;
  width: 138px !important;
  height: 340px !important;
}

.ranking-reference-v4 .ranking-poster-second {
  z-index: 5 !important;
  top: 84px !important;
  left: 39px !important;
  width: 121px !important;
  height: 256px !important;
}

.ranking-reference-v4 .ranking-poster-third {
  z-index: 5 !important;
  top: 94px !important;
  right: 38px !important;
  left: auto !important;
  width: 121px !important;
  height: 246px !important;
}

.ranking-reference-v4 .ranking-watercolor-halo {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 50%;
  pointer-events: none;
}

.ranking-reference-v4 .ranking-watercolor-halo::before,
.ranking-reference-v4 .ranking-watercolor-halo::after,
.ranking-reference-v4 .ranking-watercolor-halo > i {
  content: "";
  position: absolute;
  display: block;
  border-radius: 50%;
}

.ranking-reference-v4 .ranking-watercolor-halo-first {
  top: 0;
  left: -29px;
  width: 196px;
  height: 196px;
  background: radial-gradient(circle, rgba(250, 220, 91, .62) 0 50%, rgba(250, 220, 91, .35) 66%, transparent 75%);
}

.ranking-reference-v4 .ranking-watercolor-halo-first::before {
  inset: 14px;
  border: 1px dashed rgba(232, 174, 31, .62);
}

.ranking-reference-v4 .ranking-watercolor-halo-first::after {
  top: 14px;
  left: 26px;
  width: 4px;
  height: 4px;
  background: rgba(232, 174, 31, .7);
  box-shadow: 151px 65px 0 rgba(232, 174, 31, .62), 139px 110px 0 rgba(232, 174, 31, .55);
}

.ranking-reference-v4 .ranking-watercolor-halo-first > i {
  top: 85px;
  left: -5px;
  width: 8px;
  height: 8px;
  background: var(--ranking-yellow);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.ranking-reference-v4 .ranking-watercolor-halo-second,
.ranking-reference-v4 .ranking-watercolor-halo-third {
  top: 0;
  left: -13px;
  width: 142px;
  height: 142px;
}

.ranking-reference-v4 .ranking-watercolor-halo-second {
  background: radial-gradient(circle, rgba(167, 205, 226, .56) 0 52%, rgba(167, 205, 226, .29) 68%, transparent 76%);
}

.ranking-reference-v4 .ranking-watercolor-halo-second::before,
.ranking-reference-v4 .ranking-watercolor-halo-third::before {
  inset: 11px;
  border: 1px dashed rgba(81, 145, 183, .5);
}

.ranking-reference-v4 .ranking-watercolor-halo-third {
  background: radial-gradient(circle, rgba(244, 181, 166, .48) 0 52%, rgba(244, 181, 166, .25) 68%, transparent 76%);
}

.ranking-reference-v4 .ranking-watercolor-halo-third::before {
  border-color: rgba(218, 103, 78, .46);
}

.ranking-reference-v4 .ranking-watercolor-halo-second::after,
.ranking-reference-v4 .ranking-watercolor-halo-third::after {
  right: 4px;
  bottom: 22px;
  width: 3px;
  height: 3px;
  background: rgba(81, 145, 183, .62);
  box-shadow: 8px 9px 0 rgba(81, 145, 183, .58), 13px 21px 0 rgba(81, 145, 183, .5);
}

.ranking-reference-v4 .ranking-watercolor-halo-third::after {
  background: rgba(218, 103, 78, .65);
  box-shadow: 8px 9px 0 rgba(218, 103, 78, .6), 13px 21px 0 rgba(218, 103, 78, .52);
}

.ranking-reference-v4 .ranking-character-art {
  position: absolute;
  z-index: 4;
  display: block;
  pointer-events: none;
}

.ranking-reference-v4 .ranking-character-art > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  object-fit: contain;
  filter: saturate(.93) contrast(.98);
}

.ranking-reference-v4 .ranking-character-first {
  top: 8px;
  left: 13px;
  width: 112px;
  height: 197px;
}

.ranking-reference-v4 .ranking-character-second {
  top: 5px;
  left: 16px;
  width: 89px;
  height: 156px;
}

.ranking-reference-v4 .ranking-character-third {
  top: 4px;
  left: 16px;
  width: 90px;
  height: 158px;
}

.ranking-reference-v4 .ranking-poster-podium {
  position: absolute !important;
  z-index: 3 !important;
  inset: auto 0 0 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  border: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background-color: rgba(255, 250, 240, .98) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  color: var(--ranking-ink) !important;
  box-shadow: 0 -1px 5px rgba(95, 70, 37, .13) !important;
}

.ranking-reference-v4 .ranking-poster-podium::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 0;
  left: 0;
  height: 9px;
  border-radius: 50% 46% 42% 56%;
  background: #e6d2a7;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35);
}

.ranking-reference-v4 .ranking-poster-podium::after {
  display: none !important;
  content: none !important;
}

.ranking-reference-v4 .ranking-poster-first .ranking-poster-podium::after {
  display: none !important;
  content: none !important;
}

.ranking-reference-v4 .ranking-poster-first .ranking-poster-podium {
  height: 137px !important;
  padding-top: 0 !important;
}

.ranking-reference-v4 .ranking-poster-second .ranking-poster-podium,
.ranking-reference-v4 .ranking-poster-third .ranking-poster-podium {
  height: 103px !important;
  padding-top: 16px !important;
}

.ranking-reference-v4 .ranking-poster-podium > strong {
  position: relative;
  z-index: 6;
  display: block;
  margin: 0 !important;
  font-family: "Pretendard", sans-serif;
  font-size: 34px !important;
  font-weight: 800 !important;
  line-height: .84 !important;
  letter-spacing: -.05em !important;
}

.ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > strong {
  position: absolute !important;
  z-index: 8 !important;
  top: 51px;
  left: 0;
  width: 100%;
  color: var(--ranking-coral-deep) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 40px !important;
  font-weight: 800 !important;
  text-align: center;
  opacity: 1 !important;
}

.ranking-reference-v4 .ranking-poster-second .ranking-poster-podium > strong {
  color: var(--ranking-blue-deep) !important;
}

.ranking-reference-v4 .ranking-poster-third .ranking-poster-podium > strong {
  color: var(--ranking-coral) !important;
}

.ranking-reference-v4 .ranking-poster-podium > b {
  position: relative;
  z-index: 3;
  margin-top: 8px;
  color: var(--ranking-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

.ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b {
  position: absolute;
  top: 88px;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
}

.ranking-reference-v4 .ranking-poster-podium > small {
  position: relative;
  z-index: 3;
  margin-top: 7px;
  color: var(--ranking-coral-deep);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > small {
  position: absolute;
  top: 114px;
  left: 0;
  width: 100%;
  margin: 0;
  text-align: center;
}

.ranking-reference-v4 .ranking-poster-second .ranking-poster-podium > small {
  color: var(--ranking-blue-deep);
}

.ranking-reference-v4 .ranking-winner-medal {
  position: absolute;
  z-index: 5;
  top: -8px;
  left: 50%;
  width: 42px;
  height: 42px;
  display: block;
  border: 6px solid var(--ranking-coral);
  border-radius: 50%;
  background: #f7cf54;
  transform: translateX(-50%);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 222, .42);
}

.ranking-reference-v4 .ranking-winner-medal::before,
.ranking-reference-v4 .ranking-winner-medal::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 27px;
  width: 15px;
  height: 27px;
  background: var(--ranking-coral-deep);
}

.ranking-reference-v4 .ranking-winner-medal::before {
  left: 3px;
  clip-path: polygon(0 0, 100% 7%, 69% 100%, 38% 72%, 0 94%);
}

.ranking-reference-v4 .ranking-winner-medal::after {
  right: 3px;
  clip-path: polygon(0 7%, 100% 0, 100% 94%, 62% 72%, 31% 100%);
}

.ranking-reference-v4 .ranking-winner-medal > i {
  position: absolute;
  inset: 5px;
  display: block;
  border-radius: 50%;
  background: rgba(255, 224, 102, .55);
}

.ranking-reference-v4 .ranking-podium-leaves {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 16px;
  left: 14px;
  height: 16px;
  display: block;
  opacity: .8;
  background:
    radial-gradient(ellipse at 8% 52%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 19% 28%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 30% 67%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 92% 52%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 81% 28%, currentColor 0 4px, transparent 4.5px),
    radial-gradient(ellipse at 70% 67%, currentColor 0 4px, transparent 4.5px);
  color: var(--ranking-yellow);
}

.ranking-reference-v4 .ranking-poster-second .ranking-podium-leaves {
  color: var(--ranking-blue);
}

.ranking-reference-v4 .ranking-poster-third .ranking-podium-leaves {
  color: #eaa28e;
}

.ranking-reference-v4 .ranking-poster-lower {
  z-index: 5;
  top: 492px !important;
  right: 29px !important;
  left: 29px !important;
  height: 209px !important;
  display: block !important;
  padding: 10px 28px 9px !important;
  border: 1px solid rgba(194, 164, 119, .28) !important;
  border-radius: 24px 19px 25px 22px !important;
  background-color: rgba(255, 250, 240, .97) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 3px 7px rgba(90, 64, 34, .13) !important;
  pointer-events: auto !important;
}

.ranking-reference-v4 .ranking-poster-lower > h3 {
  height: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--ranking-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
}

.ranking-reference-v4 .ranking-poster-lower > h3 i {
  color: var(--ranking-coral);
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  font-style: normal;
  letter-spacing: .22em;
}

.ranking-reference-v4 .ranking-poster-followers {
  height: 161px;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: repeat(4, 40px) !important;
  gap: 0 !important;
}

.ranking-reference-v4 .ranking-poster-follower {
  min-width: 0;
  display: grid;
  grid-template-columns: 39px 43px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 5px;
  border-bottom: 1px dashed rgba(184, 151, 111, .32);
  color: var(--ranking-ink);
  text-align: left !important;
}

.ranking-reference-v4 .ranking-poster-follower:last-child {
  border-bottom: 0;
}

.ranking-reference-v4 .ranking-poster-follower > strong {
  display: block !important;
  margin: 0 !important;
  color: var(--ranking-ink) !important;
  font-family: "Pretendard", sans-serif;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.ranking-reference-v4 .ranking-follower-medallion {
  position: relative !important;
  width: 39px !important;
  height: 39px !important;
  aspect-ratio: 1 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 50% !important;
  background: rgba(193, 224, 207, .68) !important;
}

.ranking-reference-v4 .ranking-follower-pink {
  background: rgba(241, 192, 191, .56) !important;
}

.ranking-reference-v4 .ranking-follower-blue {
  background: rgba(169, 204, 228, .6) !important;
}

.ranking-reference-v4 .ranking-follower-yellow {
  background: rgba(247, 215, 109, .58) !important;
}

.ranking-reference-v4 .ranking-character-follower {
  position: absolute;
  top: -4px;
  left: -15px;
  width: 70px;
  height: 123px;
}

/* Keep the 4–7 place portraits centered inside the new medallions. The old
   poster stylesheet applies a special left/width adjustment to rank 6 and
   mirrors ranks 5 and 7; reset those legacy rules for this reference layout. */
.ranking-reference-v4 .ranking-poster-follower .ranking-character-follower > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
}

.ranking-reference-v4 .ranking-poster-follower > b {
  overflow: hidden;
  color: var(--ranking-ink);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ranking-reference-v4 .ranking-poster-follower > span {
  justify-self: end;
  color: var(--ranking-ink);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.ranking-reference-v4 .ranking-poster-my-rank {
  position: absolute !important;
  z-index: 7 !important;
  top: 712px !important;
  right: 29px !important;
  left: 29px !important;
  height: 54px !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 9px !important;
  margin: 0 !important;
  padding: 0 16px 0 13px;
  border: 1px solid rgba(136, 166, 116, .23);
  border-radius: 9px 14px 8px 12px;
  background-color: rgba(220, 235, 211, .94) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  color: var(--ranking-ink) !important;
  box-shadow: 0 2px 5px rgba(90, 64, 34, .11);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  white-space: nowrap;
  clip-path: polygon(.5% 6%, 26% 1%, 52% 5%, 78% 0, 99.5% 6%, 100% 51%, 99.5% 94%, 75% 100%, 50% 96%, 25% 100%, .5% 94%, 0 51%);
}

.ranking-reference-v4 .ranking-poster-my-rank > i {
  width: 34px !important;
  height: 34px !important;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ranking-yellow) !important;
  color: #fff9e9;
  font-family: "Pretendard", sans-serif;
  font-size: 19px;
  font-style: normal;
}

.ranking-reference-v4 .ranking-poster-my-rank strong {
  color: var(--ranking-coral-deep);
  font-size: 1.08em !important;
  font-weight: 900 !important;
}

.ranking-reference-v4 .ranking-poster-my-rank > b {
  justify-self: end;
  color: var(--ranking-blue);
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.25em;
  transform: rotate(-9deg);
}

/* Ranking navigation: visible watercolor menu with the ranking item active. */
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav {
  position: relative !important;
  z-index: 30 !important;
  inset: auto !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(76px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  padding: 8px 17px calc(7px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(190, 155, 111, .34) !important;
  background-color: rgba(255, 250, 240, .985) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 -2px 8px rgba(90, 64, 34, .08) !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button:hover,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button.active {
  position: relative !important;
  width: auto !important;
  height: auto !important;
  min-height: 60px !important;
  display: grid !important;
  grid-template-rows: 43px 14px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  padding: 0 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ranking-ink) !important;
  transform: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button::before {
  display: none !important;
  content: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-icon,
.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-label {
  opacity: 1 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-icon {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  opacity: 1 !important;
  filter: none !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .profile-poster-menu-svg * {
  opacity: 1 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav .tab-menu-label {
  color: var(--ranking-ink) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button::after {
  content: "" !important;
  position: absolute !important;
  right: calc(50% - 14px) !important;
  bottom: 1px !important;
  left: auto !important;
  width: 28px !important;
  height: 4px !important;
  display: block !important;
  border-radius: 50% 45% 55% 40%;
  background: transparent !important;
  opacity: 1 !important;
}

.phone.ranking-frame-phone.ranking-mono-preview > .ranking-poster-nav button.active::after {
  background: var(--ranking-coral) !important;
}

@media (max-width: 560px) {
  .page.ranking-preview-page {
    min-height: 100dvh !important;
    place-items: stretch !important;
  }

  .phone.ranking-frame-phone.ranking-mono-preview {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

@media (max-width: 370px) {
  .ranking-reference-v4 .ranking-poster-heading {
    left: 32px !important;
  }

  .ranking-reference-v4 .ranking-poster-first {
    left: calc(50% - 69px) !important;
  }

  .ranking-reference-v4 .ranking-poster-second {
    left: 20px !important;
  }

  .ranking-reference-v4 .ranking-poster-third {
    right: 20px !important;
  }

  .ranking-reference-v4 .ranking-poster-lower,
  .ranking-reference-v4 .ranking-poster-my-rank {
    right: 18px !important;
    left: 18px !important;
  }
}

/* ===== unified-reference-nav-v1.css ===== */
/* Shared watercolor bottom navigation for every primary app page. */
#app .phone.home-frame-phone,
#app .phone.feed-frame-phone,
#app .phone.home-meal-frame-phone,
#app .phone.ranking-frame-phone,
#app .phone.profile-frame-phone {
  grid-template-rows: 0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
}

#app .phone > .editorial-tabs.unified-reference-nav {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
  inset: auto !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: auto !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid rgba(185, 149, 105, .34) !important;
  border-radius: 0 !important;
  background-color: rgba(255, 250, 240, .985) !important;
  background-image:
    linear-gradient(rgba(255, 251, 242, .72), rgba(255, 249, 237, .72)),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 112px 112px !important;
  box-shadow: 0 -2px 8px rgba(90, 64, 34, .08) !important;
  transform: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: -2px !important;
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 3px !important;
  display: block !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, transparent 0 2%, rgba(194, 158, 113, .22) 2% 98%, transparent 98% 100%) !important;
  clip-path: polygon(0 45%, 8% 28%, 16% 50%, 25% 32%, 35% 53%, 46% 35%, 57% 54%, 68% 30%, 78% 51%, 89% 29%, 100% 47%, 100% 100%, 0 100%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav::after {
  display: none !important;
  content: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav button,
#app .phone > .editorial-tabs.unified-reference-nav button:hover,
#app .phone > .editorial-tabs.unified-reference-nav button.active {
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
  display: grid !important;
  grid-template-rows: 44px 15px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #3c1e0e !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav button::before {
  display: none !important;
  content: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .tab-menu-icon,
#app .phone > .editorial-tabs.unified-reference-nav button.active .tab-menu-icon {
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .tab-menu-icon::before,
#app .phone > .editorial-tabs.unified-reference-nav .tab-menu-icon::after {
  display: none !important;
  content: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .profile-poster-menu-svg,
#app .phone > .editorial-tabs.unified-reference-nav button.active .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: saturate(.9) contrast(.98) !important;
  transform: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .profile-poster-menu-svg * {
  opacity: 1 !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .tab-menu-label,
#app .phone > .editorial-tabs.unified-reference-nav button:hover .tab-menu-label,
#app .phone > .editorial-tabs.unified-reference-nav button.active .tab-menu-label {
  display: block !important;
  margin: 0 !important;
  color: #3c1e0e !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav button::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 31px !important;
  height: 5px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translateX(-50%) rotate(-1deg) !important;
}

#app .phone > .editorial-tabs.unified-reference-nav button.active::after {
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat !important;
}

/* Folded green paper mark from the approved navigation reference. */
#app .phone > .editorial-tabs.unified-reference-nav .bap-unified-feed-icon {
  position: relative !important;
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  background: url("./assets/ui/nav-feed-chat-v4.svg") center / 40px 44px no-repeat !important;
  filter: saturate(.9) contrast(.98) !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .bap-unified-feed-icon::before,
#app .phone > .editorial-tabs.unified-reference-nav .bap-unified-feed-icon::after {
  content: none !important;
  display: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav .bap-unified-feed-icon i,
#app .phone > .editorial-tabs.unified-reference-nav .bap-unified-feed-icon b {
  display: none !important;
}

#app .phone > .editorial-tabs.unified-reference-nav button:focus-visible {
  outline: 2px dashed #e8755d !important;
  outline-offset: -2px !important;
}

@media (max-width: 390px) {
  #app .phone > .editorial-tabs.unified-reference-nav {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .phone > .editorial-tabs.unified-reference-nav *,
  #app .phone > .editorial-tabs.unified-reference-nav *::before,
  #app .phone > .editorial-tabs.unified-reference-nav *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Final specificity guard against older page-specific navigation rules. */
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  height: auto !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
}

#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  min-height: 64px !important;
  grid-template-rows: 44px 15px !important;
  gap: 1px !important;
  padding: 0 0 4px !important;
}

#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-icon,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-icon {
  width: 44px !important;
  height: 44px !important;
}

#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav .profile-poster-menu-svg,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
}

#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-label,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover .tab-menu-label,
#app .phone > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-label {
  font-size: 12px !important;
  line-height: 1 !important;
}

/* ===== profile-polish-v1.css ===== */
/* Profile spacing and account-card polish — 2026-08-01. */

/* The shared navigation uses a three-row phone grid. Keep the profile scroller
   in the middle row even though its legacy top bar is visually hidden. */
#app .phone.profile-frame-phone:has(.profile-reference-v4) > .content {
  grid-row: 2 !important;
  min-height: 0 !important;
}

.profile-reference-v4 {
  padding-top: 854px !important;
  padding-bottom: 30px !important;
}

/* Give the torn-paper shadows their own breathing room. */
.profile-reference-v4 .profile-ref-titles {
  top: 366px !important;
  height: 152px !important;
}

.profile-reference-v4 .profile-ref-title-grid {
  top: 41px !important;
  height: 100px !important;
}

.profile-reference-v4 .profile-ref-stickers {
  top: 530px !important;
  height: 214px !important;
}

.profile-reference-v4 .profile-ref-sticker-grid {
  top: 45px !important;
  height: 132px !important;
  gap: 8px 15px !important;
}

.profile-reference-v4 .profile-ref-view-all {
  right: 22px !important;
  bottom: 10px !important;
}

.profile-reference-v4 .profile-ref-allergies {
  top: 756px !important;
  height: 76px !important;
  overflow: visible !important;
}

.profile-reference-v4 .profile-ref-allergies > header {
  top: 11px !important;
}

.profile-reference-v4 .profile-ref-allergy-list {
  top: 36px !important;
  right: 13px !important;
  left: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 7px 6px !important;
}

.profile-reference-v4 .profile-ref-allergy,
.profile-reference-v4 .profile-ref-allergy-add {
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 5px !important;
}

.profile-reference-v4 .profile-ref-allergy {
  gap: 0 !important;
}

.profile-reference-v4 .profile-ref-allergy-add {
  margin-left: 0 !important;
}

.profile-reference-v4 .profile-ref-allergy-add:disabled {
  opacity: .52 !important;
  cursor: not-allowed !important;
  filter: grayscale(.22) !important;
}

.profile-reference-v4 .profile-ref-allergy-custom {
  position: relative !important;
  padding-right: 20px !important;
  border-color: rgba(126, 158, 112, .48) !important;
  background-color: rgba(220, 236, 211, .88) !important;
}

.profile-reference-v4 .profile-ref-allergy-remove {
  position: absolute !important;
  top: 50% !important;
  right: 7px !important;
  width: auto !important;
  color: var(--profile-coral-deep) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: translateY(-52%) !important;
}

.profile-reference-v4:has(.profile-ref-allergy-custom) {
  padding-top: 891px !important;
}

.profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom) {
  height: 113px !important;
}

.profile-reference-v4:has(.profile-ref-allergy-editor) {
  padding-top: 904px !important;
}

.profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-editor) {
  height: 126px !important;
  overflow: hidden !important;
}

.profile-reference-v4:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  padding-top: 941px !important;
}

.profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  height: 163px !important;
}

.profile-reference-v4 .profile-ref-allergy-editor {
  top: 70px !important;
  right: 13px !important;
  left: 18px !important;
  width: auto !important;
  height: 43px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  gap: 7px !important;
  padding: 6px !important;
  border: 1px dashed rgba(224, 101, 76, .55) !important;
  border-radius: 10px 8px 11px 9px !important;
  background-color: rgba(255, 249, 236, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 110px 110px !important;
  box-shadow: 1px 3px 5px rgba(82, 57, 31, .12) !important;
}

.profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom) .profile-ref-allergy-editor {
  top: 107px !important;
}

.profile-reference-v4 .profile-ref-allergy-editor label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.profile-reference-v4 .profile-ref-allergy-editor input {
  width: 100% !important;
  height: 29px !important;
  min-width: 0 !important;
  padding: 0 10px !important;
  border: 1px solid rgba(137, 99, 59, .22) !important;
  border-radius: 7px !important;
  color: var(--profile-ink) !important;
  background: rgba(255, 254, 248, .98) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

.profile-reference-v4 .profile-ref-allergy-editor input:focus {
  outline: 2px solid rgba(224, 101, 76, .26) !important;
  outline-offset: 1px !important;
}

.profile-reference-v4 .profile-ref-allergy-editor button {
  width: 58px !important;
  height: 29px !important;
  border-radius: 7px 6px 8px 6px !important;
  color: #fff9ed !important;
  background-color: var(--profile-coral) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 90px 90px !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

/* The account area is a small paper stationery set rather than generic UI tiles. */
.profile-reference-v4 > .profile-live-account {
  --account-ink: #3b1d10;
  --account-coral: #df654c;
  --account-paper: #fffaf0;
  position: relative !important;
  isolation: isolate;
  width: calc(100% - 36px) !important;
  margin: 0 18px 18px !important;
  padding: 25px 19px 19px !important;
  overflow: hidden !important;
  border: 1px solid rgba(142, 102, 58, .18) !important;
  border-radius: 28px 22px 26px 20px / 24px 28px 22px 26px !important;
  clip-path: polygon(1% 2%, 12% 1%, 22% 2.2%, 34% .7%, 45% 2%, 57% .8%, 69% 2%, 80% .9%, 91% 2%, 99% 1%, 100% 13%, 99% 25%, 100% 38%, 99% 50%, 100% 63%, 99% 76%, 100% 89%, 98% 99%, 87% 98%, 76% 99.5%, 65% 98%, 54% 99.5%, 43% 98%, 31% 99%, 20% 98%, 9% 99.5%, 1% 97%, 0 86%, 1% 73%, 0 60%, 1% 48%, 0 35%, 1% 22%);
  color: var(--account-ink) !important;
  background-color: var(--account-paper) !important;
  background-image:
    radial-gradient(circle at 7% 9%, rgba(248, 210, 84, .28) 0 42px, transparent 43px),
    radial-gradient(circle at 96% 92%, rgba(167, 202, 151, .22) 0 68px, transparent 69px),
    linear-gradient(rgba(255, 252, 243, .76), rgba(255, 248, 232, .8)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, auto, auto, 210px 210px !important;
  box-shadow: 0 7px 16px rgba(84, 57, 29, .15), 0 2px 0 rgba(136, 98, 57, .13) !important;
  filter: none !important;
}

.profile-reference-v4 > .profile-live-account::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 30px;
  opacity: .66;
  background:
    radial-gradient(circle, rgba(228, 105, 80, .78) 0 3px, transparent 3.6px) 0 1px / 18px 15px,
    radial-gradient(circle, rgba(228, 105, 80, .68) 0 3px, transparent 3.6px) 9px 9px / 18px 15px;
  transform: rotate(-5deg);
  pointer-events: none;
}

.profile-reference-v4 > .profile-live-account::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -18px;
  bottom: 70px;
  width: 88px;
  height: 72px;
  border-radius: 45% 55% 42% 58% / 55% 40% 60% 45%;
  background: rgba(153, 194, 137, .16);
  filter: blur(1px);
  transform: rotate(-12deg);
}

.profile-reference-v4 > .profile-live-account > header {
  position: relative !important;
  min-height: 55px !important;
  display: block !important;
  margin: 0 0 17px !important;
  padding: 0 0 11px !important;
  border-bottom: 1px dashed rgba(139, 99, 58, .23) !important;
}

.profile-reference-v4 > .profile-live-account > header::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 72px;
  height: 5px;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat;
  transform: rotate(-1deg);
}

.profile-reference-v4 > .profile-live-account > header span {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--account-coral) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

.profile-reference-v4 > .profile-live-account > header h3 {
  margin: 0 !important;
  color: var(--account-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

.profile-reference-v4 .profile-live-setting-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 11px 10px !important;
}

.profile-reference-v4 .profile-live-setting-list > button,
.profile-reference-v4 .profile-live-setting-list > button:hover,
.profile-reference-v4 .profile-live-setting-list > button:active {
  position: relative !important;
  min-width: 0 !important;
  min-height: 105px !important;
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) 13px !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 13px 11px !important;
  overflow: hidden !important;
  border: 1px solid rgba(125, 92, 55, .13) !important;
  border-radius: 21px 17px 20px 16px / 18px 22px 17px 21px !important;
  clip-path: polygon(2% 5%, 18% 2%, 34% 4%, 51% 1%, 68% 4%, 84% 2%, 98% 5%, 100% 23%, 98% 43%, 100% 63%, 98% 82%, 96% 97%, 79% 99%, 62% 97%, 45% 100%, 27% 97%, 5% 99%, 1% 84%, 2% 64%, 0 45%, 2% 24%);
  color: var(--account-ink) !important;
  background-color: rgba(219, 235, 210, .88) !important;
  background-image: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 251, 240, .14)), url("./assets/paper-grain.svg") !important;
  background-size: auto, 126px 126px !important;
  box-shadow: 1px 3px 5px rgba(80, 55, 30, .1) !important;
  text-align: left !important;
  transform: rotate(-.45deg) !important;
  transition: transform 150ms ease, filter 150ms ease !important;
}

.profile-reference-v4 .profile-live-setting-list > button:nth-child(2) {
  background-color: rgba(251, 224, 151, .8) !important;
  transform: rotate(.45deg) !important;
}

.profile-reference-v4 .profile-live-setting-list > button:nth-child(3) {
  background-color: rgba(207, 225, 236, .84) !important;
  transform: rotate(.35deg) !important;
}

.profile-reference-v4 .profile-live-setting-list > button.danger {
  background-color: rgba(247, 206, 184, .78) !important;
  transform: rotate(-.35deg) !important;
}

.profile-reference-v4 .profile-live-setting-list > button:active {
  filter: brightness(.96) !important;
  transform: translateY(1px) rotate(0deg) !important;
}

.profile-reference-v4 .profile-live-setting-list .profile-account-icon {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(139, 99, 58, .12) !important;
  border-radius: 48% 52% 45% 55% / 52% 44% 56% 48% !important;
  color: var(--account-ink) !important;
  background: rgba(255, 250, 239, .84) !important;
  box-shadow: 0 2px 3px rgba(87, 61, 32, .08) !important;
  transform: rotate(-2deg) !important;
}

.profile-reference-v4 .profile-live-setting-list .profile-account-icon svg {
  width: 25px !important;
  height: 25px !important;
}

.profile-reference-v4 .profile-live-setting-list .profile-account-copy {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  display: grid !important;
  place-items: initial !important;
  gap: 5px !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
}

.profile-reference-v4 .profile-live-setting-list .profile-account-copy b {
  color: inherit !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.14 !important;
  letter-spacing: -.04em !important;
  overflow-wrap: anywhere;
}

.profile-reference-v4 .profile-live-setting-list .profile-account-copy small {
  color: rgba(59, 29, 16, .62) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
  letter-spacing: -.025em !important;
}

.profile-reference-v4 .profile-live-setting-list > button > svg {
  width: 13px !important;
  height: 13px !important;
  color: rgba(59, 29, 16, .72) !important;
}

.profile-reference-v4 > .profile-live-account > footer {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: 17px 0 0 !important;
  padding: 15px 3px 0 !important;
  border-top: 1px dashed rgba(104, 74, 43, .25) !important;
}

.profile-reference-v4 > .profile-live-account > footer > span {
  display: grid !important;
  gap: 3px !important;
  color: rgba(59, 29, 16, .66) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.profile-reference-v4 > .profile-live-account > footer > span small {
  color: var(--account-coral) !important;
  font-size: 7px !important;
  letter-spacing: .09em !important;
}

.profile-reference-v4 > .profile-live-account > footer > button,
.profile-reference-v4 > .profile-live-account > footer > button:hover,
.profile-reference-v4 > .profile-live-account > footer > button:active {
  min-width: 106px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(3% 8%, 20% 3%, 39% 7%, 58% 2%, 77% 6%, 97% 3%, 100% 28%, 97% 51%, 100% 76%, 96% 96%, 76% 92%, 58% 98%, 39% 93%, 18% 97%, 2% 91%, 0 67%, 3% 45%, 0 22%);
  color: #fff9ed !important;
  background-color: var(--account-coral) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 110px 110px !important;
  box-shadow: 1px 3px 4px rgba(100, 53, 35, .16) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  transform: rotate(-1deg) !important;
}

@media (max-width: 380px) {
  .profile-reference-v4 {
    padding-top: 850px !important;
  }

  .profile-reference-v4 > .profile-live-account {
    width: calc(100% - 28px) !important;
    margin-right: 14px !important;
    margin-left: 14px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
  }

  .profile-reference-v4 .profile-live-setting-list > button {
    grid-template-columns: 38px minmax(0, 1fr) 11px !important;
    gap: 6px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
  }

  .profile-reference-v4 .profile-live-setting-list .profile-account-icon {
    width: 38px !important;
    height: 38px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .profile-reference-v4 .profile-live-setting-list > button {
    transition: none !important;
  }
}

/* ===== primary-layout-unified-v1.css ===== */
/* Shared primary-page frame — keeps every tab at one stable proportion. */

#app .page.mono-preview-page:has(> .phone > .unified-reference-nav) {
  min-height: 100dvh !important;
  place-items: center !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  width: min(100%, 430px) !important;
  min-width: 0 !important;
  max-width: 430px !important;
  height: min(872px, calc(100dvh - 28px)) !important;
  min-height: 0 !important;
  max-height: min(872px, calc(100dvh - 28px)) !important;
  display: grid !important;
  grid-template-rows: 0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .top {
  grid-row: 1 !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .content {
  box-sizing: border-box !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: calc(80px + env(safe-area-inset-bottom)) !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  max-height: calc(80px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
  border-radius: 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  align-self: center !important;
  justify-self: stretch !important;
  grid-template-rows: 44px 15px !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  border-radius: 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-icon,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-icon {
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav .profile-poster-menu-svg,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-label,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover .tab-menu-label,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-label {
  height: 12px !important;
  display: block !important;
  margin: 0 !important;
  color: #3c1e0e !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: none !important;
}

@media (max-width: 560px) {
  #app .page.mono-preview-page:has(> .phone > .unified-reference-nav) {
    width: 100% !important;
    min-height: 100dvh !important;
    place-items: stretch !important;
    padding: 0 !important;
  }

  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }
}

@media (max-width: 390px) {
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }
}

/* ===== home-reference-canvas-v5.css ===== */
/*
 * Home poster canvas lock.
 *
 * The supplied reference is 891 × 1765. At the application's 430px phone
 * width that resolves to a 430 × 853 canvas: 765px of artwork plus the 88px
 * painted navigation strip. Keep the home poster on that canvas instead of
 * squeezing it into the shared short desktop viewport.
 */

#app .page.mono-preview-page:has(> .phone.bapstage-home-v2) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) {
  box-sizing: border-box !important;
  position: absolute !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 430px !important;
  min-width: 430px !important;
  max-width: 430px !important;
  height: calc(853px + env(safe-area-inset-bottom)) !important;
  min-height: calc(853px + env(safe-area-inset-bottom)) !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 0 765px calc(88px + env(safe-area-inset-bottom)) !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  transform: translate(-50%, -50%) scale(var(--home-reference-scale, 1)) !important;
  transform-origin: center center !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .content {
  box-sizing: border-box !important;
  grid-row: 2 !important;
  width: 100% !important;
  height: 765px !important;
  min-height: 765px !important;
  max-height: 765px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  box-sizing: border-box !important;
  position: relative !important;
  inset: auto !important;
  grid-row: 3 !important;
  width: 100% !important;
  height: calc(88px + env(safe-area-inset-bottom)) !important;
  min-height: calc(88px + env(safe-area-inset-bottom)) !important;
  max-height: calc(88px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 7px 13px calc(5px + env(safe-area-inset-bottom)) !important;
  border-radius: 4% 5% 0 0 / 7% 8% 0 0 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  grid-template-rows: 50px 17px !important;
  place-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-icon,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-icon {
  width: 47px !important;
  height: 47px !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-label,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover .tab-menu-label,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-label {
  height: 13px !important;
  color: #35180d !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}

@media (max-width: 560px) {
  #app .page.mono-preview-page:has(> .phone.bapstage-home-v2) {
    background-color: #fffaf0 !important;
    background-image: url("./assets/paper-grain.svg") !important;
    background-size: 280px 280px !important;
  }
}

/* ===== home-reference-fidelity-v7.css ===== */
/* Home reference fidelity: paper grain, painted washes, and the approved meal card. */
#app .home-watercolor-v3 {
  background-color: #fff9ed !important;
  background-image:
    linear-gradient(rgba(255, 251, 241, .18), rgba(255, 248, 233, .12)),
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    url("./assets/paper-grain.svg") !important;
  background-position: center, center, center !important;
  background-repeat: repeat, repeat, repeat !important;
  background-size: auto, 112px 112px, 210px 210px !important;
}

#app .home-watercolor-v3::before {
  border-radius: 41% 59% 48% 52% / 57% 42% 58% 43% !important;
  background-color: transparent !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 45% 49%, rgba(249, 215, 90, .76) 0 55%, rgba(250, 220, 112, .56) 68%, transparent 82%) !important;
  background-size: 175px 175px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(2.4px) saturate(.94) !important;
  opacity: .86 !important;
}

#app .home-ref-wash {
  border-radius: 45% 55% 41% 59% / 48% 42% 58% 52% !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 50% 49%, rgba(249, 214, 73, .8) 0 49%, rgba(249, 216, 84, .55) 64%, transparent 79%) !important;
  background-size: 170px 170px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(2.1px) saturate(.94) !important;
  opacity: .88 !important;
}

#app .home-ref-today::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 218px;
  left: -17px;
  width: 34px;
  height: 33px;
  background:
    radial-gradient(circle at 7px 8px, rgba(231, 111, 89, .58) 0 5px, transparent 5.8px),
    radial-gradient(circle at 25px 26px, rgba(231, 111, 89, .5) 0 5px, transparent 5.8px);
  transform: rotate(-11deg);
  pointer-events: none;
}

#app .home-ref-recipe {
  height: 208px !important;
  grid-template-columns: 54% 46% !important;
  overflow: hidden !important;
  border: 1px solid rgba(165, 124, 76, .2) !important;
  border-radius: 28px 31px 27px 30px !important;
  clip-path: none !important;
  background-color: #fffaf0 !important;
  background-image:
    linear-gradient(rgba(255, 252, 243, .22), rgba(255, 248, 235, .13)),
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 104px 104px, 190px 190px !important;
  box-shadow:
    0 8px 15px rgba(103, 72, 37, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .42) !important;
  filter: none !important;
  transform: rotate(.12deg) !important;
}

#app .home-ref-food::before {
  width: 184px !important;
  height: 184px !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 52% 50%, rgba(249, 213, 83, .54) 0 59%, rgba(249, 213, 83, .2) 74%, transparent 86%) !important;
  background-size: 145px 145px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(1.2px) !important;
}

#app .home-ref-food i {
  display: none !important;
}

#app .home-ref-food img {
  width: 194px !important;
  height: 194px !important;
  filter: saturate(1.01) contrast(1.01) !important;
  transform: translate(1px, 4px) rotate(-.6deg) !important;
}

#app .home-ref-recipe-copy {
  padding: 23px 17px 15px 3px !important;
}

#app .home-ref-recipe-copy > small {
  font-size: 11px !important;
}

#app .home-ref-recipe-copy > span {
  margin-top: 8px !important;
  font-size: 27px !important;
}

#app .home-ref-recipe-copy > i {
  margin-top: 8px !important;
  opacity: .82 !important;
}

#app .home-ref-recipe-copy > strong {
  margin-top: 10px !important;
  font-size: 33px !important;
}

#app .home-ref-recipe-copy > em {
  margin-top: 8px !important;
  font-size: 14px !important;
}

#app .home-ref-start {
  right: 16px !important;
  bottom: 16px !important;
  left: -1px !important;
  height: 47px !important;
  border: 0 !important;
  border-radius: 24px 27px 23px 26px !important;
  clip-path: none !important;
  background-color: #ea7057 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .025), rgba(129, 46, 27, .025)),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 92px 92px !important;
  box-shadow: inset 0 -1px 0 rgba(141, 53, 35, .08) !important;
  font-size: 21px !important;
}

#app .home-ref-next {
  top: 191px !important;
  right: 18px !important;
  width: 182px !important;
  height: 69px !important;
  border: 1px solid rgba(91, 126, 96, .16) !important;
  border-radius: 23px 25px 22px 24px !important;
  clip-path: none !important;
  background-color: #dcebd9 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .12), rgba(155, 194, 162, .08)),
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 96px 96px, 170px 170px !important;
  box-shadow: 0 6px 10px rgba(66, 89, 62, .14) !important;
  filter: none !important;
  transform: rotate(-.25deg) !important;
}

#app .home-ref-next small {
  font-size: 14px !important;
}

#app .home-ref-next strong {
  gap: 8px !important;
  font-size: 25px !important;
}

#app .home-ref-next strong i {
  width: 29px !important;
  height: 25px !important;
  flex: 0 0 29px !important;
  display: block !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  background: url("./assets/ui/home-title-laurel-v1.svg") center / contain no-repeat !important;
  transform: none !important;
}

#app .home-ref-next strong i:last-child {
  transform: scaleX(-1) !important;
}

/* ===== home-reference-dynamic-v9.css ===== */
/*
 * Dynamic home fidelity pass.
 * The 891 × 1765 reference is measured onto the live 430 × 853 canvas.
 * All copy, progress, artwork and controls remain state-driven DOM elements.
 */
#app .home-watercolor-v3 {
  background-color: #fffaf0 !important;
  background-image:
    linear-gradient(rgba(255, 252, 244, .08), rgba(255, 249, 236, .06)),
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 166px 166px, 108px 108px !important;
  background-blend-mode: normal, multiply, soft-light !important;
}

#app .home-watercolor-v3::before {
  top: -124px !important;
  left: -74px !important;
  width: 370px !important;
  height: 267px !important;
  border-radius: 36% 64% 47% 53% / 55% 43% 57% 45% !important;
  clip-path: none !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 46% 44%, rgba(249, 214, 77, .78) 0 52%, rgba(249, 218, 98, .62) 68%, transparent 84%) !important;
  background-size: 158px 158px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(1.4px) saturate(.91) !important;
  opacity: .84 !important;
}

#app .home-reference-v4 .home-ref-brand {
  top: 34px !important;
  right: 26px !important;
  left: 42px !important;
}

#app .home-reference-v4 .home-ref-brand > div > span {
  font-size: 11px !important;
  letter-spacing: -.015em !important;
}

#app .home-reference-v4 .home-ref-brand h1 {
  margin-top: 8px !important;
  font-size: 42px !important;
  line-height: .93 !important;
  letter-spacing: -.058em !important;
}

#app .home-reference-v4 .home-ref-player {
  width: 57px !important;
  height: 57px !important;
  flex-basis: 57px !important;
  margin-top: -10px !important;
}

#app .home-reference-v4 .home-ref-player strong {
  font-size: 26px !important;
}

#app .home-reference-v4 .home-ref-brand::after {
  top: 108px !important;
}

#app .home-reference-v4 .home-ref-greeting {
  top: 114px !important;
  left: 43px !important;
}

#app .home-reference-v4 .home-ref-greeting h2 {
  font-size: 23px !important;
  letter-spacing: -.032em !important;
}

#app .home-reference-v4 .home-ref-greeting p {
  margin-top: 8px !important;
  font-size: 14px !important;
  letter-spacing: -.022em !important;
}

#app .home-reference-v4 .home-ref-wash {
  top: 4px !important;
  left: 10px !important;
  width: 331px !important;
  height: 328px !important;
  clip-path: none !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 50% 49%, rgba(249, 214, 72, .77) 0 49%, rgba(249, 219, 97, .56) 64%, transparent 80%) !important;
  background-size: 158px 158px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(1.3px) saturate(.92) !important;
  opacity: .88 !important;
}

#app .home-reference-v4 .home-ref-progress {
  top: 211px !important;
  right: 22px !important;
  width: 153px !important;
  height: 122px !important;
  padding: 15px 14px 12px !important;
  border: 1px solid rgba(149, 111, 66, .15) !important;
  border-radius: 22px 19px 21px 20px !important;
  clip-path: polygon(2% 5%, 9% 2%, 18% 3%, 28% 1%, 38% 3%, 49% 1%, 60% 3%, 71% 1%, 81% 3%, 91% 2%, 98% 6%, 99% 17%, 98% 31%, 100% 46%, 98% 60%, 100% 76%, 97% 94%, 89% 98%, 77% 97%, 65% 100%, 52% 98%, 40% 100%, 28% 98%, 16% 100%, 5% 96%, 1% 83%, 2% 67%, 0 51%, 2% 34%, 1% 18%) !important;
  background-color: #fff8e9 !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .11), rgba(231, 212, 179, .06)),
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 158px 158px, 100px 100px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(79, 57, 33, .15)) !important;
}

#app .home-reference-v4 .home-ref-progress small {
  font-size: 14px !important;
}

#app .home-reference-v4 .home-ref-progress-count b {
  font-size: 35px !important;
}

#app .home-reference-v4 .home-ref-today {
  top: 492px !important;
  right: 23px !important;
  left: 23px !important;
  height: 265px !important;
}

#app .home-reference-v4 .home-ref-recipe {
  height: 208px !important;
  grid-template-columns: 55% 45% !important;
  border: 1px solid rgba(160, 120, 72, .18) !important;
  border-radius: 27px 29px 26px 28px !important;
  clip-path: none !important;
  background-color: #fffaf0 !important;
  background-image:
    linear-gradient(rgba(255, 253, 246, .12), rgba(244, 229, 201, .06)),
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 170px 170px, 104px 104px !important;
  box-shadow:
    0 7px 14px rgba(103, 72, 37, .11),
    inset 0 0 0 1px rgba(255, 255, 255, .38) !important;
  filter: none !important;
  transform: rotate(.08deg) !important;
}

#app .home-reference-v4 .home-ref-food::before {
  width: 187px !important;
  height: 187px !important;
  background-image:
    url("./assets/paper-grain.svg"),
    radial-gradient(ellipse at 51% 50%, rgba(249, 213, 83, .5) 0 58%, rgba(249, 216, 92, .2) 74%, transparent 86%) !important;
  background-size: 142px 142px, 100% 100% !important;
  background-blend-mode: multiply, normal !important;
  filter: blur(1px) !important;
}

#app .home-reference-v4 .home-ref-food img {
  width: 188px !important;
  height: 188px !important;
  filter: saturate(1.01) contrast(1.01) !important;
  transform: translate(3px, 4px) rotate(-.65deg) !important;
}

#app .home-reference-v4 .home-ref-recipe-copy {
  padding: 25px 14px 14px 3px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > small {
  font-size: 10px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > span {
  margin-top: 9px !important;
  font-size: 26px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > i {
  margin-top: 9px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > strong {
  margin-top: 10px !important;
  font-size: 32px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > em {
  margin-top: 8px !important;
  font-size: 14px !important;
}

#app .home-reference-v4 .home-ref-start {
  right: 27px !important;
  bottom: 17px !important;
  left: 1px !important;
  height: 50px !important;
  border-radius: 21px 24px 20px 23px !important;
  clip-path: polygon(4% 12%, 14% 6%, 27% 9%, 40% 4%, 53% 8%, 67% 4%, 81% 8%, 96% 5%, 99% 24%, 97% 49%, 100% 75%, 95% 94%, 80% 91%, 67% 96%, 53% 92%, 40% 96%, 27% 91%, 13% 95%, 2% 86%, 0 64%, 2% 39%) !important;
  background-color: #ea7057 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(rgba(255, 255, 255, .03), rgba(126, 45, 28, .025)) !important;
  background-size: 92px 92px, auto !important;
  font-size: 20px !important;
}

#app .home-reference-v4 .home-ref-next {
  top: 197px !important;
  right: 10px !important;
  width: 182px !important;
  height: 66px !important;
  border: 1px solid rgba(83, 122, 91, .14) !important;
  border-radius: 20px 22px 19px 21px !important;
  clip-path: polygon(3% 7%, 14% 3%, 26% 5%, 38% 2%, 50% 5%, 62% 2%, 74% 5%, 87% 2%, 97% 8%, 99% 23%, 97% 41%, 100% 58%, 97% 77%, 98% 93%, 87% 98%, 74% 96%, 62% 100%, 49% 97%, 37% 100%, 25% 97%, 12% 100%, 3% 94%, 1% 76%, 3% 58%, 1% 40%, 3% 22%) !important;
  background-color: #dcebd8 !important;
  background-image:
    url("./assets/paper-grain.svg"),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 154px 154px, 94px 94px !important;
  box-shadow: none !important;
  filter: drop-shadow(2px 5px 3px rgba(66, 89, 62, .14)) !important;
  transform: rotate(-.35deg) !important;
}

#app .home-reference-v4 .home-ref-next small {
  font-size: 13px !important;
}

#app .home-reference-v4 .home-ref-next strong {
  font-size: 24px !important;
}

#app .home-reference-v4 .home-ref-next strong i {
  width: 27px !important;
  height: 24px !important;
  flex-basis: 27px !important;
}

#app .home-reference-v4 .home-ref-today::after {
  top: 220px !important;
  left: -18px !important;
}

/* ===== home-reference-dynamic-v10.css ===== */
/*
 * Approved home reference, dynamic implementation v10.
 * Only the paper/watercolor backdrop is rasterized. Character, progress,
 * stage artwork, copy and controls remain live DOM driven by app state.
 */

#app .home-watercolor-v3 {
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: 430px 853px !important;
}

/* The background asset already contains the approved paper grain, washes and motifs. */
#app .home-watercolor-v3::before,
#app .home-watercolor-v3::after,
#app .home-reference-v4 .home-ref-brand::after,
#app .home-reference-v4 .home-ref-wash,
#app .home-reference-v4 .home-ref-doodle,
#app .home-reference-v4 .home-ref-today::after {
  display: none !important;
  content: none !important;
}

#app .home-reference-v4 .home-ref-brand h1 {
  font-size: 45px !important;
  letter-spacing: -.061em !important;
}

#app .home-reference-v4 .home-ref-greeting h2 {
  font-size: 24px !important;
}

#app .home-reference-v4 .home-ref-greeting p {
  font-size: 15px !important;
}

/* Keep the live character over the painted central wash from the backdrop. */
#app .home-reference-v4 .home-ref-character {
  top: 8px !important;
  left: 57px !important;
  width: 246px !important;
  height: 340px !important;
}

/* Natural deckled paper instead of a smooth rounded digital card. */
#app .home-reference-v4 .home-ref-progress,
#app .home-reference-v4 .home-ref-recipe,
#app .home-reference-v4 .home-ref-next {
  -webkit-mask-image: url("./assets/ui/home-card-deckle-mask-v10.svg") !important;
  mask-image: url("./assets/ui/home-card-deckle-mask-v10.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  clip-path: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}

#app .home-reference-v4 .home-ref-progress {
  top: 211px !important;
  right: 22px !important;
  width: 153px !important;
  height: 122px !important;
  border: 1px solid rgba(149, 111, 66, .16) !important;
  background-color: rgba(255, 249, 235, .97) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08), rgba(238, 220, 188, .05)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 176px 176px !important;
  filter: drop-shadow(3px 5px 3px rgba(79, 57, 33, .17)) !important;
}

#app .home-reference-v4 .home-ref-today {
  top: 492px !important;
  right: 23px !important;
  left: 23px !important;
  height: 265px !important;
}

#app .home-reference-v4 .home-ref-recipe {
  height: 208px !important;
  grid-template-columns: 55% 45% !important;
  border: 1px solid rgba(160, 120, 72, .17) !important;
  background-color: rgba(255, 250, 238, .98) !important;
  background-image:
    linear-gradient(rgba(255, 254, 249, .12), rgba(239, 222, 190, .045)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 178px 178px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 6px 4px rgba(96, 65, 33, .15)) !important;
  transform: rotate(.08deg) !important;
}

#app .home-reference-v4 .home-ref-food::before {
  width: 200px !important;
  height: 200px !important;
  border-radius: 46% 54% 49% 51% / 54% 45% 55% 46% !important;
  background-color: rgba(249, 213, 83, .37) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
  filter: blur(.45px) !important;
  transform: rotate(-6deg) !important;
}

#app .home-reference-v4 .home-ref-food img {
  width: 200px !important;
  height: 200px !important;
  transform: translate(6px, 6px) rotate(-.8deg) !important;
}

#app .home-reference-v4 .home-ref-recipe-copy {
  padding: 22px 16px 15px 4px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > span {
  font-size: 27px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > strong {
  margin-top: 10px !important;
  font-size: 34px !important;
}

#app .home-reference-v4 .home-ref-start {
  right: 22px !important;
  bottom: 18px !important;
  left: 0 !important;
  height: 45px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/character-choice-coral-brush-v2.svg") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  font-size: 20px !important;
}

#app .home-reference-v4 .home-ref-next {
  top: 195px !important;
  right: 17px !important;
  width: 181px !important;
  height: 67px !important;
  border: 1px solid rgba(83, 122, 91, .14) !important;
  background-color: rgba(220, 235, 216, .98) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .08), rgba(151, 190, 158, .06)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 165px 165px !important;
  box-shadow: none !important;
  filter: drop-shadow(2px 5px 3px rgba(66, 89, 62, .14)) !important;
}

/* Continue the same paper artwork under the fixed navigation. */
#app .phone.bapstage-home-v2 > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  border-top: 1px solid rgba(185, 149, 105, .28) !important;
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center bottom !important;
  background-repeat: no-repeat !important;
  background-size: 430px 853px !important;
  box-shadow: 0 -2px 7px rgba(90, 64, 34, .05) !important;
}

@media (max-width: 390px) {
  #app .home-reference-v4 .home-ref-brand h1 {
    font-size: 45px !important;
  }
}

/* ===== home-reference-progress-v11.css ===== */
/*
 * Home progress card v11 — measured from the approved paper-card crop.
 * Content stays dynamic; this file only reproduces the visual treatment.
 */

#app .home-reference-v4 .home-ref-progress {
  top: 211px !important;
  right: 22px !important;
  width: 153px !important;
  height: 125px !important;
  padding: 18px 14px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #35180c !important;
  background-color: #fff8e9 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 160px 160px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(77, 53, 29, .18)) !important;
  transform: rotate(.28deg) !important;
}

#app .home-reference-v4 .home-ref-progress small {
  color: #35180c !important;
  font-family: "Bap Gaegu Full", "Bap Jua", sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-reference-v4 .home-ref-progress-count {
  gap: 7px !important;
  margin-top: 12px !important;
  line-height: 1 !important;
}

#app .home-reference-v4 .home-ref-progress-count b {
  color: #db6043 !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  line-height: .8 !important;
}

#app .home-reference-v4 .home-ref-progress-count em {
  color: #25120b !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.025em !important;
}

#app .home-reference-v4 .home-ref-progress-line {
  width: 118px !important;
  height: 7px !important;
  margin-top: 13px !important;
  overflow: visible !important;
  border-radius: 50% 48% 47% 52% / 45% 55% 46% 54% !important;
  background: #eadbbc !important;
  transform: rotate(-.15deg) !important;
}

#app .home-reference-v4 .home-ref-progress-line::before {
  top: 0 !important;
  left: -1px !important;
  width: 7px !important;
  height: 7px !important;
  background: #df6247 !important;
  box-shadow: 0 0 0 1px rgba(216, 83, 56, .05) !important;
}

#app .home-reference-v4 .home-ref-progress-line i {
  min-width: 5px !important;
  height: 7px !important;
  background: #df6247 !important;
}

#app .home-reference-v4 .home-ref-progress > strong {
  margin-top: 11px !important;
  color: #35180c !important;
  font-family: "Bap Gaegu Full", "Bap Jua", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-reference-v4 .home-ref-progress > strong::first-letter {
  color: inherit !important;
}

#app .home-reference-v4 .home-ref-progress > strong em {
  margin: 0 2px !important;
  color: #dc5e43 !important;
  font: inherit !important;
  font-style: normal !important;
}

/* ===== home-reference-cards-v12.css ===== */
/*
 * Home recipe and next-title cards v12.
 * Visuals follow the approved crop while all content and actions remain live.
 */

#app .home-reference-v4 .home-ref-today {
  top: 488px !important;
  right: 16px !important;
  left: 16px !important;
  height: 265px !important;
}

#app .home-reference-v4 .home-ref-recipe {
  height: 224px !important;
  grid-template-columns: 54.7% 45.3% !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: url("./assets/ui/home-recipe-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-recipe-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  background-color: #fff8e9 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 160px 160px !important;
  box-shadow: inset 0 0 0 1px rgba(153, 112, 67, .14) !important;
  filter: drop-shadow(3px 7px 5px rgba(84, 58, 31, .2)) !important;
  transform: rotate(.08deg) !important;
}

#app .home-reference-v4 .home-ref-food::before {
  width: 188px !important;
  height: 188px !important;
  border-radius: 46% 54% 49% 51% / 54% 45% 55% 46% !important;
  background-color: rgba(249, 213, 83, .38) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 145px 145px !important;
  filter: blur(.55px) !important;
  transform: rotate(-6deg) !important;
}

#app .home-reference-v4 .home-ref-food img {
  width: 174px !important;
  height: 174px !important;
  filter: saturate(1.01) contrast(1.01) !important;
  transform: translate(-2px, -3px) rotate(-.7deg) scaleX(1.03) scaleY(1.046) !important;
}

#app .home-reference-v4 .home-ref-recipe-copy {
  padding: 29px 16px 16px 4px !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > small {
  color: #dc6044 !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 850 !important;
  letter-spacing: .015em !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > span {
  margin-top: 13px !important;
  color: #35180c !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: .94 !important;
  letter-spacing: -.045em !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > i {
  margin-top: 5px !important;
  background: repeating-linear-gradient(90deg, rgba(200, 139, 88, .33) 0 3px, transparent 3px 7px) !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > strong {
  margin-top: 14px !important;
  color: #35180c !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: .92 !important;
  letter-spacing: -.035em !important;
}

#app .home-reference-v4 .home-ref-recipe-copy > em {
  margin-top: 8px !important;
  color: #472a20 !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-reference-v4 .home-ref-start {
  right: 31px !important;
  bottom: 28px !important;
  left: -3px !important;
  height: 43px !important;
  gap: 9px !important;
  padding: 0 8px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  box-shadow: none !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .home-reference-v4 .home-ref-start > span {
  color: #fffaf0 !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
}

#app .home-reference-v4 .home-ref-next {
  top: 202px !important;
  right: 20px !important;
  width: 183px !important;
  height: 70px !important;
  gap: 4px !important;
  padding: 3px 9px 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  -webkit-mask-image: url("./assets/ui/home-title-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-title-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  background-color: #d8e8d5 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(134, 171, 141, .045)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 155px 155px !important;
  box-shadow: inset 0 0 0 1px rgba(83, 122, 91, .13) !important;
  filter: drop-shadow(2px 5px 4px rgba(66, 89, 62, .18)) !important;
  transform: rotate(-.3deg) !important;
}

#app .home-reference-v4 .home-ref-next small {
  color: #35180c !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: translateY(7px) !important;
}

#app .home-reference-v4 .home-ref-next strong {
  gap: 7px !important;
  color: #35180c !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  transform: translateY(7px) !important;
}

#app .home-reference-v4 .home-ref-next strong i {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px !important;
  color: #5f9075 !important;
  background: url("./assets/ui/home-title-laurel-v12.svg") center / contain no-repeat !important;
  font-size: 0 !important;
  transform: none !important;
}

#app .home-reference-v4 .home-ref-next strong i:last-child {
  transform: scaleX(-1) !important;
}

/* ===== shared-home-background-v14.css ===== */
/* Share the approved home watercolor-paper backdrop across all primary tabs. */

#app .feed-frame-phone .feed-reference-v3,
#app .home-meal-reference-v1,
#app .ranking-frame-phone .ranking-reference-v4,
#app .profile-frame-phone .profile-reference-v4 {
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 430px 853px !important;
}

/* Keep the same paper visible while a primary page scrolls or overscrolls. */
#app .feed-frame-phone,
#app .home-meal-frame-phone,
#app .ranking-frame-phone,
#app .profile-frame-phone,
#app .feed-frame-phone > .content,
#app .home-meal-frame-phone > .content,
#app .ranking-frame-phone > .content,
#app .profile-frame-phone > .content {
  background-color: #fffaf0 !important;
}

/* The approved backdrop already contains its watercolor washes and motifs. */
#app .feed-reference-v3::before,
#app .feed-reference-v3 .feed-reference-wash,
#app .feed-reference-v3 .feed-reference-checker,
#app .feed-reference-v3 .feed-reference-coral-dots,
#app .feed-reference-v3 .feed-reference-green-dots,
#app .ranking-reference-v4 .ranking-page-wash,
#app .ranking-reference-v4 .ranking-page-checker,
#app .ranking-reference-v4 .ranking-page-coral-dots,
#app .ranking-reference-v4 .ranking-page-green-dots,
#app .ranking-reference-v4 .ranking-page-yellow-bars,
#app .profile-reference-v4::before,
#app .profile-reference-v4::after,
#app .home-meal-ref-canvas::before,
#app .home-meal-ref-canvas::after {
  display: none !important;
  content: none !important;
}

/* Continue the same approved backdrop below the first five home-meal stages. */
#app .home-meal-ref-continuation {
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center top !important;
  background-repeat: repeat-y !important;
  background-size: 430px 853px !important;
}

#app .home-meal-ref-continuation::before {
  display: none !important;
  content: none !important;
}

/* ===== profile-card-progress-style-v19.css ===== */
/* Match the main profile cards to the approved home progress paper card. */

#app .profile-reference-v4 .profile-ref-hero,
#app .profile-reference-v4 .profile-ref-card {
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  background-color: #fff8e9 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 160px 160px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(77, 53, 29, .18)) !important;
}

/* ===== navigation-home-meal-parity-v20.css ===== */
/* Use the current home-meal navigation as the single source of truth. */

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
  grid-template-rows: 0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
  inset: auto !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: calc(80px + env(safe-area-inset-bottom)) !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  max-height: calc(80px + env(safe-area-inset-bottom)) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
  overflow: visible !important;
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .14) !important;
  border-radius: 0 !important;
  background-color: rgba(255, 250, 239, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-repeat: repeat !important;
  background-size: 250px 250px !important;
  box-shadow: 0 -3px 8px rgba(105, 76, 43, .05) !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::before,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::after {
  display: none !important;
  content: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 2 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  display: grid !important;
  grid-template-rows: 44px 15px !important;
  align-self: center !important;
  align-content: center !important;
  justify-self: stretch !important;
  justify-items: center !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #3c1e0e !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-icon,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-icon {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .profile-poster-menu-svg,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  max-width: none !important;
  display: block !important;
  overflow: visible !important;
  opacity: 1 !important;
  filter: saturate(.9) contrast(.98) !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-label,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover .tab-menu-label,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-label {
  height: 12px !important;
  display: block !important;
  margin: 0 !important;
  color: #3c1e0e !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button::after {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 31px !important;
  height: 5px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: translateX(-50%) rotate(-1deg) !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active::after {
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat !important;
}

@media (max-width: 390px) {
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }
}

/* The home poster had a stronger legacy 88px navigation lock. */
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) {
  grid-template-rows: 0 773px calc(80px + env(safe-area-inset-bottom)) !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .content {
  height: 773px !important;
  min-height: 773px !important;
  max-height: 773px !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  height: calc(80px + env(safe-area-inset-bottom)) !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  max-height: calc(80px + env(safe-area-inset-bottom)) !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .14) !important;
  border-radius: 0 !important;
  background-color: rgba(255, 250, 239, .98) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-position: center !important;
  background-repeat: repeat !important;
  background-size: 250px 250px !important;
  box-shadow: 0 -3px 8px rgba(105, 76, 43, .05) !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  width: auto !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  grid-template-rows: 44px 15px !important;
  gap: 1px !important;
  padding: 0 0 4px !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-icon,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-icon {
  width: 44px !important;
  height: 44px !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .profile-poster-menu-svg,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .profile-poster-menu-svg {
  width: 40px !important;
  height: 40px !important;
  opacity: 1 !important;
  filter: saturate(.9) contrast(.98) !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav .tab-menu-label,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover .tab-menu-label,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active .tab-menu-label,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:not(.active) .tab-menu-label {
  height: 12px !important;
  color: #3c1e0e !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button::after {
  width: 31px !important;
  height: 5px !important;
  bottom: 0 !important;
  background: transparent !important;
}

#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active::after {
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat !important;
}

@media (max-width: 390px) {
  #app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    padding-right: 11px !important;
    padding-left: 11px !important;
  }
}

/* ===== feed-interactions-cleanup-v21.css ===== */
/* Feed interaction cleanup: distinct scopes and a single, explicit like action. */
.feed-frame-phone .feed-reference-controls {
  justify-content: flex-start !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post-actions {
  width: 100% !important;
  min-height: 48px;
  padding: 4px 10px 7px !important;
}

.feed-frame-phone .feed-reference-v3 .feed-like-action > svg {
  fill: transparent !important;
}

.feed-frame-phone .feed-reference-v3 .feed-like-action.liked > svg {
  fill: var(--feed-coral) !important;
}

/* Safety net for old cached markup while the new app script replaces it. */
.feed-frame-phone .feed-record-button,
.feed-frame-phone .feed-comment-action,
.feed-frame-phone .feed-stage-stamp,
.feed-frame-phone .feed-post-more,
.feed-frame-phone .feed-dialog-layer {
  display: none !important;
}

/* ===== ranking-character-scope-polish-v23.css ===== */
/* Character-specific ranking roster and interaction/layout polish. */
.ranking-reference-v4 .ranking-poster-scope button.active::after,
.ranking-reference-v4 .ranking-poster-scope button[aria-selected="true"]::after {
  display: block !important;
  background: var(--ranking-coral, #ef745e) !important;
  opacity: 1 !important;
}

/* Keep each character's feet exactly on the podium's top edge. */
.ranking-reference-v4 .ranking-character-first {
  top: auto !important;
  bottom: 137px !important;
}

.ranking-reference-v4 .ranking-character-second,
.ranking-reference-v4 .ranking-character-third {
  top: auto !important;
  bottom: 103px !important;
}

/* Add breathing room between the personal-rank card and the shared menu bar. */
.ranking-reference-v4 .ranking-poster-my-rank {
  top: 707px !important;
  bottom: auto !important;
  height: 48px !important;
}

/* ===== profile-background-continuity-v24.css ===== */
/* Keep the profile on one continuous sheet; do not restart the watercolor art. */
#app .profile-frame-phone .profile-reference-v4 {
  background-color: #fffaf0 !important;
  background-image:
    url("./assets/ui/home-reference-background-dynamic-v10.png"),
    url("./assets/paper-grain.svg") !important;
  background-position: center top, center top !important;
  background-repeat: no-repeat, repeat !important;
  background-size: 430px 853px, 180px 180px !important;
}

/* ===== profile-logout-home-start-v26.css ===== */
/* Match the profile logout control to the Home "요리 시작" brush button. */
#app .profile-reference-v4 > .profile-live-account > footer > button,
#app .profile-reference-v4 > .profile-live-account > footer > button:hover,
#app .profile-reference-v4 > .profile-live-account > footer > button:active {
  box-sizing: border-box !important;
  width: 146px !important;
  min-width: 146px !important;
  height: 43px !important;
  min-height: 43px !important;
  gap: 9px !important;
  padding: 0 8px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  box-shadow: none !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: none !important;
}

#app .profile-reference-v4 > .profile-live-account > footer > button > svg {
  width: 22px !important;
  height: 22px !important;
  color: #fffaf0 !important;
  stroke-width: 1.8 !important;
}

/* ===== profile-title-collection-v27.css ===== */
/* A fuller two-row title collection using the app's watercolor paper palette. */
#app .profile-reference-v4 .profile-ref-title-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 5px 7px !important;
}

#app .profile-reference-v4 .profile-ref-title-badge {
  min-height: 0 !important;
  gap: 0 !important;
  padding: 3px 5px 11px !important;
  border-width: 1.5px !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(116, 80, 41, .025)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 105px 105px !important;
  filter: none !important;
}

#app .profile-reference-v4 .profile-ref-title-badge span {
  font-size: 11.5px !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
}

#app .profile-reference-v4 .profile-ref-title-badge > i,
#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-lock {
  bottom: 1px !important;
  font-size: 10px !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-1 {
  border-color: rgba(102, 145, 111, .45) !important;
  background-color: rgba(214, 234, 208, .96) !important;
  transform: rotate(-.7deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-2 {
  border-color: rgba(193, 145, 60, .42) !important;
  border-radius: 35% 48% 40% 51% / 45% 38% 54% 43% !important;
  background-color: rgba(248, 227, 174, .96) !important;
  transform: rotate(.6deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-3 {
  border-color: rgba(92, 142, 176, .4) !important;
  clip-path: polygon(3% 8%, 26% 2%, 49% 6%, 73% 1%, 97% 8%, 100% 48%, 96% 93%, 72% 98%, 48% 94%, 25% 100%, 2% 92%, 0 48%) !important;
  background-color: rgba(217, 233, 243, .97) !important;
  transform: rotate(-.35deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-4 {
  border-color: rgba(197, 112, 107, .38) !important;
  clip-path: polygon(5% 3%, 29% 7%, 52% 1%, 77% 6%, 96% 3%, 100% 50%, 95% 97%, 73% 93%, 49% 100%, 26% 94%, 3% 98%, 0 49%) !important;
  background-color: rgba(243, 215, 215, .95) !important;
  transform: rotate(.45deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-5 {
  border-color: rgba(128, 157, 91, .42) !important;
  border-radius: 48% 39% 50% 41% / 37% 52% 42% 55% !important;
  background-color: rgba(228, 237, 213, .97) !important;
  transform: rotate(-.5deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-6 {
  border-color: rgba(185, 130, 86, .4) !important;
  clip-path: polygon(2% 7%, 21% 1%, 42% 5%, 62% 0, 81% 5%, 98% 2%, 100% 49%, 97% 96%, 79% 92%, 59% 99%, 40% 94%, 19% 100%, 1% 93%, 0 48%) !important;
  background-color: rgba(245, 223, 196, .97) !important;
  transform: rotate(.65deg) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.earned {
  box-shadow: 0 0 0 2px rgba(231, 110, 83, .8) inset !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.locked {
  color: rgba(91, 65, 43, .7) !important;
  opacity: .82 !important;
  filter: saturate(.72) contrast(.98) !important;
}

/* ===== profile-sticker-board-v28.css ===== */
/* Profile sticker preview and mobile archive polish — 2026-08-03. */

/* Keep the two preview rows inside the paper card and reserve a clear footer
   for the archive button. */
#app .profile-reference-v4 .profile-ref-sticker-grid {
  top: 45px !important;
  right: 22px !important;
  left: 22px !important;
  height: 126px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px 12px !important;
}

#app .profile-reference-v4 .profile-ref-sticker {
  min-height: 0 !important;
  overflow: hidden !important;
  border-color: rgba(151, 116, 74, .25) !important;
  background-color: rgba(255, 248, 230, .82) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 105px 105px !important;
}

#app .profile-reference-v4 .profile-ref-sticker:nth-child(2) {
  background-color: rgba(230, 239, 215, .82) !important;
}

#app .profile-reference-v4 .profile-ref-sticker:nth-child(3) {
  background-color: rgba(222, 236, 245, .84) !important;
}

#app .profile-reference-v4 .profile-ref-sticker:nth-child(4) {
  background-color: rgba(247, 224, 217, .82) !important;
}

#app .profile-reference-v4 .profile-ref-sticker:nth-child(5) {
  background-color: rgba(247, 233, 194, .82) !important;
}

#app .profile-reference-v4 .profile-ref-sticker img {
  width: 76px !important;
  height: 54px !important;
  object-fit: contain !important;
}

#app .profile-reference-v4 .profile-ref-sticker.locked img {
  opacity: .58 !important;
  filter: grayscale(.22) saturate(.58) contrast(.96) !important;
}

#app .profile-reference-v4 .profile-ref-sticker-more {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  border-color: rgba(227, 105, 79, .42) !important;
  background-color: rgba(248, 218, 207, .72) !important;
}

#app .profile-reference-v4 .profile-ref-sticker-more span {
  font-size: 22px !important;
}

#app .profile-reference-v4 .profile-ref-sticker-more::after {
  content: "모아보기";
  color: rgba(98, 66, 43, .76);
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

#app .profile-reference-v4 .profile-ref-view-all {
  right: 21px !important;
  bottom: 8px !important;
  min-width: 92px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 0 11px 1px !important;
  border: 1px dashed rgba(231, 110, 83, .72) !important;
  border-radius: 42% 48% 44% 51% / 47% 43% 52% 46% !important;
  background-color: rgba(255, 248, 231, .92) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 80px 80px !important;
  font-size: 12px !important;
}

#app .profile-reference-v4 .profile-ref-view-all span {
  margin-left: 1px !important;
  font-size: 17px !important;
}

/* Mobile sticker archive: one centered paper notebook, readable three-column
   stickers, and an independently scrolling collection area. */
#app .mono-preview-page .profile-sticker-modal {
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(66, 49, 39, .48) !important;
  backdrop-filter: blur(5px) saturate(.78) !important;
}

#app .mono-preview-page .profile-sticker-sheet {
  width: min(calc(100vw - 20px), 410px) !important;
  height: min(760px, calc(100dvh - 20px)) !important;
  max-height: calc(100dvh - 20px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(145, 105, 64, .22) !important;
  border-radius: 26px !important;
  background-color: #fffaf0 !important;
  background-image:
    radial-gradient(ellipse at 14% 19%, rgba(250, 220, 104, .28) 0 19%, transparent 47%),
    radial-gradient(ellipse at 92% 79%, rgba(208, 232, 199, .44) 0 17%, transparent 44%),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, auto, 180px 180px !important;
  color: #43281b !important;
  box-shadow: 0 18px 48px rgba(46, 31, 22, .28) !important;
}

#app .mono-preview-page .profile-sticker-sheet-head {
  flex: 0 0 auto !important;
  min-height: 104px !important;
  padding: 18px 20px 15px 25px !important;
  border-bottom: 1px dashed rgba(215, 153, 103, .42) !important;
  background-color: rgba(255, 250, 239, .9) !important;
  background-image:
    linear-gradient(90deg, rgba(247, 209, 89, .18), transparent 42%),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 150px 150px !important;
}

#app .mono-preview-page .profile-sticker-sheet-head::before {
  content: "";
  position: absolute;
  right: 54px;
  top: 7px;
  width: 72px;
  height: 72px;
  border: 2px dashed rgba(233, 111, 82, .28);
  border-radius: 50%;
  transform: rotate(9deg);
  pointer-events: none;
}

#app .mono-preview-page .profile-sticker-sheet-head::after {
  right: 80px !important;
  bottom: -50px !important;
  opacity: .1 !important;
}

#app .mono-preview-page .profile-sticker-sheet-head > div {
  padding-left: 12px !important;
  border-left: 3px solid #e96f52 !important;
}

#app .mono-preview-page .profile-sticker-sheet-head span,
#app .mono-preview-page .profile-sticker-sheet-head p {
  font-size: 10px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
}

#app .mono-preview-page .profile-sticker-sheet-head span {
  color: #df674d !important;
  letter-spacing: .07em !important;
}

#app .mono-preview-page .profile-sticker-sheet-head h2 {
  margin: 4px 0 5px !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app .mono-preview-page .profile-sticker-sheet-close {
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border: 2px solid rgba(255, 250, 239, .8) !important;
  background: #e96f52 !important;
  box-shadow: 0 2px 0 rgba(116, 70, 48, .13) !important;
  font-size: 25px !important;
}

#app .mono-preview-page .profile-sticker-sheet > .sticker-detail {
  flex: 0 0 auto !important;
  margin: 12px 14px 0 !important;
  border: 1px dashed rgba(215, 153, 103, .42) !important;
  background: rgba(255, 249, 232, .94) !important;
}

#app .mono-preview-page .profile-sticker-sheet-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 15px max(28px, env(safe-area-inset-bottom)) !important;
  background: transparent !important;
  overscroll-behavior: contain;
}

#app .mono-preview-page .profile-sticker-sheet-item {
  min-height: 112px !important;
  gap: 7px !important;
  padding: 7px 5px 8px !important;
  border: 1px dashed rgba(150, 113, 72, .2) !important;
  border-radius: 42% 48% 44% 51% / 18% 16% 19% 17% !important;
  background-color: rgba(255, 248, 230, .72) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 105px 105px !important;
}

#app .mono-preview-page .profile-sticker-sheet-item:nth-child(3n + 2) {
  background-color: rgba(226, 238, 216, .76) !important;
}

#app .mono-preview-page .profile-sticker-sheet-item:nth-child(3n) {
  background-color: rgba(222, 236, 245, .76) !important;
}

#app .mono-preview-page .profile-sticker-sheet-art {
  width: 74px !important;
  height: 74px !important;
  border: 1px solid rgba(153, 118, 77, .16) !important;
  background-color: rgba(255, 252, 242, .9) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 96px 96px !important;
  box-shadow: 0 2px 5px rgba(97, 70, 42, .08) !important;
}

#app .mono-preview-page .profile-sticker-sheet-art img {
  width: 57px !important;
  height: 57px !important;
}

#app .mono-preview-page .profile-sticker-sheet-art i {
  right: 2px !important;
  bottom: 2px !important;
  min-width: 21px !important;
  height: 21px !important;
  padding: 0 3px !important;
  background: #e96f52 !important;
  color: #fffaf0 !important;
  font-size: 9px !important;
}

#app .mono-preview-page .profile-sticker-sheet-item > b {
  max-width: 100% !important;
  min-height: 26px !important;
  display: -webkit-box !important;
  overflow: hidden !important;
  color: #4b2c1d !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app .mono-preview-page .profile-sticker-sheet-item.locked {
  opacity: .72 !important;
}

#app .mono-preview-page .profile-sticker-sheet-item.locked .profile-sticker-sheet-art img {
  opacity: .46 !important;
  filter: grayscale(.55) saturate(.46) contrast(.98) !important;
}

#app .mono-preview-page .profile-sticker-sheet-coming {
  min-height: 112px !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  padding: 7px 5px 8px !important;
  border-radius: 42% 48% 44% 51% / 18% 16% 19% 17% !important;
  background: rgba(247, 224, 217, .68) !important;
}

#app .mono-preview-page .profile-sticker-sheet-coming > span {
  width: 74px !important;
  height: 74px !important;
  border-color: rgba(233, 111, 82, .68) !important;
  background: rgba(255, 250, 239, .74) !important;
  font-size: 25px !important;
}

#app .mono-preview-page .profile-sticker-sheet-coming strong {
  min-height: 26px !important;
  color: #ca5d47 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

@media (max-width: 360px), (max-height: 620px) {
  #app .mono-preview-page .profile-sticker-sheet {
    width: min(calc(100vw - 12px), 410px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 20px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-head {
    min-height: 88px !important;
    padding: 13px 15px 12px 18px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-head h2 {
    font-size: 24px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-close {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-grid {
    gap: 9px 7px !important;
    padding: 13px 10px 22px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-item,
  #app .mono-preview-page .profile-sticker-sheet-coming {
    min-height: 102px !important;
    padding-right: 2px !important;
    padding-left: 2px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-art,
  #app .mono-preview-page .profile-sticker-sheet-coming > span {
    width: 66px !important;
    height: 66px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-art img {
    width: 51px !important;
    height: 51px !important;
  }

  #app .mono-preview-page .profile-sticker-sheet-item > b,
  #app .mono-preview-page .profile-sticker-sheet-coming strong {
    font-size: 10.5px !important;
  }
}

/* ===== profile-allergy-scan-v29.css ===== */
/* Allergy ingredient scan, substitution results, and recipe guidance — 2026-08-03. */

/* A custom ingredient is removable as one clear, generous chip target. */
#app .profile-reference-v4 .profile-ref-allergy-custom {
  padding-right: 31px !important;
  cursor: pointer !important;
}

#app .profile-reference-v4 .profile-ref-allergy-remove {
  right: 4px !important;
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: #df654c !important;
  font-size: 14px !important;
  line-height: 1 !important;
  transform: translateY(-50%) !important;
}

/* Search progress and result notebook. */
#app .mono-preview-page .allergy-scan-modal {
  z-index: 110 !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(62, 45, 34, .52) !important;
  backdrop-filter: blur(6px) saturate(.76) !important;
}

#app .mono-preview-page .allergy-scan-sheet {
  --allergy-ink: #46291c;
  --allergy-coral: #e86d53;
  --allergy-mint: #dcebd7;
  --allergy-yellow: #f8e4a9;
  box-sizing: border-box !important;
  width: min(calc(100vw - 20px), 410px) !important;
  max-height: calc(100dvh - 20px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 1px solid rgba(145, 105, 64, .24) !important;
  border-radius: 26px !important;
  color: var(--allergy-ink) !important;
  background-color: #fffaf0 !important;
  background-image:
    radial-gradient(ellipse at 5% 6%, rgba(250, 217, 92, .28) 0 13%, transparent 37%),
    radial-gradient(ellipse at 95% 91%, rgba(202, 227, 193, .42) 0 15%, transparent 41%),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, auto, 180px 180px !important;
  box-shadow: 0 18px 50px rgba(46, 31, 22, .3) !important;
}

#app .mono-preview-page .allergy-scan-sheet.is-scanning {
  height: min(560px, calc(100dvh - 20px)) !important;
}

#app .mono-preview-page .allergy-scan-sheet.is-complete {
  height: min(760px, calc(100dvh - 20px)) !important;
}

#app .mono-preview-page .allergy-scan-head {
  position: relative;
  flex: 0 0 auto;
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 19px 14px 24px;
  overflow: hidden;
  border-bottom: 1px dashed rgba(211, 149, 96, .45);
  background-color: rgba(255, 250, 239, .9);
  background-image: url("./assets/paper-grain.svg");
  background-size: 145px 145px;
}

#app .mono-preview-page .allergy-scan-head::after {
  content: "";
  position: absolute;
  right: 61px;
  bottom: -48px;
  width: 150px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--allergy-coral) 0 1.2px, transparent 1.5px) 0 0 / 8px 8px;
  opacity: .12;
  transform: rotate(-8deg);
  pointer-events: none;
}

#app .mono-preview-page .allergy-scan-head > div {
  position: relative;
  z-index: 1;
  padding-left: 11px;
  border-left: 3px solid var(--allergy-coral);
}

#app .mono-preview-page .allergy-scan-head span {
  display: block;
  color: var(--allergy-coral);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .07em;
}

#app .mono-preview-page .allergy-scan-head h2 {
  margin: 4px 0 0;
  color: var(--allergy-ink);
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

#app .mono-preview-page .allergy-scan-close {
  position: relative;
  z-index: 2;
  width: 41px;
  height: 41px;
  flex: 0 0 41px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0 0 2px;
  border: 2px solid rgba(255, 250, 239, .82);
  border-radius: 50%;
  color: #fffaf0;
  background: var(--allergy-coral);
  box-shadow: 0 2px 0 rgba(116, 70, 48, .14);
  font-size: 25px;
  font-weight: 500;
  line-height: 1;
}

#app .mono-preview-page .allergy-scan-loading {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 27px 34px;
  text-align: center;
}

#app .mono-preview-page .allergy-scan-bowl {
  position: relative;
  width: 114px;
  height: 114px;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  border-radius: 50%;
  background: conic-gradient(var(--allergy-coral) var(--scan-progress), rgba(212, 187, 145, .3) 0);
  transform: rotate(-3deg);
}

#app .mono-preview-page .allergy-scan-bowl::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(145, 105, 64, .35);
  border-radius: 50%;
  background-color: #fff8e9;
  background-image: url("./assets/paper-grain.svg");
  background-size: 92px 92px;
}

#app .mono-preview-page .allergy-scan-bowl::after {
  content: "";
  position: absolute;
  width: 57px;
  height: 31px;
  bottom: 25px;
  border: 3px solid var(--allergy-ink);
  border-top: 0;
  border-radius: 0 0 50% 50%;
  opacity: .88;
}

#app .mono-preview-page .allergy-scan-bowl span {
  position: relative;
  z-index: 2;
  margin-top: -21px;
  color: var(--allergy-coral);
  font-family: "Bap Jua", sans-serif;
  font-size: 39px;
  line-height: 1;
}

#app .mono-preview-page .allergy-scan-kicker,
#app .mono-preview-page .allergy-scan-summary > span {
  color: var(--allergy-coral);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .06em;
}

#app .mono-preview-page .allergy-scan-loading h3 {
  margin: 9px 0 7px;
  color: var(--allergy-ink);
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.035em;
}

#app .mono-preview-page .allergy-scan-loading h3 b {
  color: var(--allergy-coral);
  font-weight: 400;
}

#app .mono-preview-page .allergy-scan-loading > p {
  margin: 0 0 14px;
  color: rgba(70, 41, 28, .66);
  font-size: 12px;
  font-weight: 750;
}

#app .mono-preview-page .allergy-scan-progress {
  width: min(100%, 280px);
  height: 12px;
  overflow: hidden;
  border: 1px solid rgba(142, 106, 69, .2);
  border-radius: 999px;
  background: rgba(226, 207, 169, .42);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .68) inset;
}

#app .mono-preview-page .allergy-scan-progress i {
  height: 100%;
  display: block;
  border-radius: inherit;
  background-color: var(--allergy-coral);
  background-image: url("./assets/paper-grain.svg");
  background-size: 70px 70px;
  transition: width .16s ease;
}

#app .mono-preview-page .allergy-scan-summary {
  flex: 0 0 auto;
  padding: 18px 22px 15px;
  border-bottom: 1px dashed rgba(211, 149, 96, .38);
  background: rgba(255, 249, 232, .64);
}

#app .mono-preview-page .allergy-scan-summary h3 {
  margin: 4px 0 4px;
  color: var(--allergy-ink);
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
}

#app .mono-preview-page .allergy-scan-summary h3 b,
#app .mono-preview-page .allergy-scan-summary p strong {
  color: var(--allergy-coral);
  font-weight: 400;
}

#app .mono-preview-page .allergy-scan-summary p {
  margin: 0;
  color: rgba(70, 41, 28, .74);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

#app .mono-preview-page .allergy-scan-results {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 14px 18px;
  scrollbar-width: none;
  overscroll-behavior: contain;
}

#app .mono-preview-page .allergy-scan-results::-webkit-scrollbar {
  display: none;
}

#app .mono-preview-page .allergy-scan-result {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 2px 11px;
  padding: 11px 10px 10px;
  border: 1px dashed rgba(146, 108, 69, .28);
  border-radius: 13% 10% 12% 9% / 15% 11% 14% 10%;
  background-color: rgba(255, 249, 234, .91);
  background-image: url("./assets/paper-grain.svg");
  background-size: 120px 120px;
}

#app .mono-preview-page .allergy-scan-result:nth-child(even) {
  background-color: rgba(225, 238, 217, .88);
}

#app .mono-preview-page .allergy-scan-result-art {
  position: relative;
  grid-row: 1 / span 2;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(145, 105, 64, .17);
  border-radius: 50%;
  background: rgba(255, 252, 243, .94);
}

#app .mono-preview-page .allergy-scan-result-art img {
  width: 57px;
  height: 57px;
  object-fit: contain;
}

#app .mono-preview-page .allergy-scan-result-art i {
  position: absolute;
  right: 1px;
  bottom: 1px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 3px;
  border-radius: 50%;
  color: #fffaf0;
  background: var(--allergy-coral);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
}

#app .mono-preview-page .allergy-scan-result-copy > span {
  color: var(--allergy-coral);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .05em;
}

#app .mono-preview-page .allergy-scan-result-copy h4 {
  margin: 2px 0 6px;
  color: var(--allergy-ink);
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.1;
}

#app .mono-preview-page .allergy-scan-swaps {
  display: grid;
  gap: 4px;
}

#app .mono-preview-page .allergy-scan-swaps p {
  display: grid;
  grid-template-columns: minmax(0, auto) 12px minmax(0, 1fr);
  align-items: start;
  gap: 4px;
  margin: 0;
  color: rgba(70, 41, 28, .76);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}

#app .mono-preview-page .allergy-scan-swaps em {
  overflow: hidden;
  color: #ad5b48;
  font-style: normal;
  text-decoration: line-through;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .mono-preview-page .allergy-scan-swaps i {
  color: var(--allergy-coral);
  font-style: normal;
}

#app .mono-preview-page .allergy-scan-swaps strong {
  color: #56745d;
  font-weight: 850;
}

#app .mono-preview-page .allergy-scan-result > button {
  grid-column: 2;
  justify-self: start;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 7px 0 0;
  padding: 0 10px 1px;
  border: 1px dashed rgba(232, 108, 82, .68);
  border-radius: 999px;
  color: #c95c46;
  background: rgba(255, 250, 239, .84);
  font-size: 10px;
  font-weight: 850;
}

#app .mono-preview-page .allergy-scan-empty {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  text-align: center;
}

#app .mono-preview-page .allergy-scan-empty i {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border: 2px dashed rgba(111, 151, 118, .55);
  border-radius: 50%;
  color: #63856b;
  background: rgba(220, 235, 214, .76);
  font-size: 31px;
  font-style: normal;
}

#app .mono-preview-page .allergy-scan-empty strong {
  color: var(--allergy-ink);
  font-family: "Bap Jua", sans-serif;
  font-size: 21px;
  font-weight: 400;
}

#app .mono-preview-page .allergy-scan-empty p {
  margin: 5px 0 0;
  color: rgba(70, 41, 28, .66);
  font-size: 11px;
  line-height: 1.45;
}

#app .mono-preview-page .allergy-scan-safety {
  flex: 0 0 auto;
  margin: 0 14px 10px;
  padding: 9px 11px;
  border: 1px dashed rgba(198, 139, 76, .4);
  border-radius: 10px 8px 11px 9px;
  background: rgba(248, 229, 173, .58);
}

#app .mono-preview-page .allergy-scan-safety b {
  display: block;
  margin-bottom: 2px;
  color: #b65c42;
  font-size: 10px;
  font-weight: 850;
}

#app .mono-preview-page .allergy-scan-safety p {
  margin: 0;
  color: rgba(70, 41, 28, .72);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.35;
}

#app .mono-preview-page .allergy-scan-footer {
  flex: 0 0 auto;
  padding: 0 14px max(14px, env(safe-area-inset-bottom));
}

#app .mono-preview-page .allergy-scan-footer button {
  width: 100%;
  min-height: 42px;
  margin: 0;
  border: 0;
  border-radius: 40% 47% 43% 49% / 28% 34% 27% 36%;
  color: #fffaf0;
  background-color: var(--allergy-coral);
  background-image: url("./assets/paper-grain.svg");
  background-size: 90px 90px;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 14px;
  font-weight: 850;
}

/* Substitution guidance stays attached to the ingredient it replaces. */
#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-substitution-warning {
  align-items: flex-start;
  border-color: rgba(219, 105, 79, .7) !important;
  background-color: rgba(248, 226, 216, .84) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 95px 95px !important;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-substitution-warning b {
  color: #c75b45;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row-copy > b {
  color: var(--mono-modal-ink);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.3;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row.has-substitution {
  min-height: 76px;
  align-items: start;
  padding-top: 10px;
  padding-bottom: 9px;
  background: rgba(249, 231, 219, .55);
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-alternative {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: 6px;
  padding: 6px 7px;
  border: 1px dashed rgba(101, 145, 109, .46);
  border-radius: 8px 7px 9px 6px;
  color: #486250;
  background: rgba(220, 235, 214, .8);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.35;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-alternative > i {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffaf0;
  background: #6d9475;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-alternative em {
  color: #bd604b;
  font-style: normal;
  text-decoration: line-through;
}

#app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-alternative strong {
  color: #41624a;
  font-weight: 900;
}

@media (max-width: 360px), (max-height: 620px) {
  #app .mono-preview-page .allergy-scan-sheet {
    width: min(calc(100vw - 12px), 410px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 20px !important;
  }

  #app .mono-preview-page .allergy-scan-sheet.is-scanning,
  #app .mono-preview-page .allergy-scan-sheet.is-complete {
    height: calc(100dvh - 12px) !important;
  }

  #app .mono-preview-page .allergy-scan-head {
    min-height: 83px;
    padding: 12px 14px 11px 18px;
  }

  #app .mono-preview-page .allergy-scan-head h2 {
    font-size: 23px;
  }

  #app .mono-preview-page .allergy-scan-close {
    width: 37px;
    height: 37px;
    flex-basis: 37px;
  }

  #app .mono-preview-page .allergy-scan-bowl {
    width: 92px;
    height: 92px;
    margin-bottom: 12px;
  }

  #app .mono-preview-page .allergy-scan-loading h3 {
    font-size: 21px;
  }

  #app .mono-preview-page .allergy-scan-summary {
    padding: 13px 16px 11px;
  }

  #app .mono-preview-page .allergy-scan-results {
    padding: 10px 9px 13px;
  }

  #app .mono-preview-page .allergy-scan-result {
    grid-template-columns: 61px minmax(0, 1fr);
    gap: 2px 8px;
    padding: 8px;
  }

  #app .mono-preview-page .allergy-scan-result-art {
    width: 59px;
    height: 59px;
  }

  #app .mono-preview-page .allergy-scan-result-art img {
    width: 50px;
    height: 50px;
  }

  #app .mono-preview-page .allergy-scan-result-copy h4 {
    font-size: 16px;
  }
}

/* ===== profile-sticker-bottom-space-v30.css ===== */
/* Profile sticker-board bottom breathing room — 2026-08-03. */

/* The archive button previously sat only 8px above the torn paper edge, which
   made the second sticker row look clipped. Extend the paper while keeping the
   grid and CTA in their existing visual positions. */
#app .profile-reference-v4 {
  padding-top: 866px !important;
}

#app .profile-reference-v4 .profile-ref-stickers {
  height: 226px !important;
}

#app .profile-reference-v4 .profile-ref-view-all {
  bottom: 14px !important;
}

/* Preserve the original gap between the sticker paper and the allergy paper. */
#app .profile-reference-v4 .profile-ref-allergies {
  top: 768px !important;
}

/* The allergy editor expands the absolutely-positioned allergy paper. Shift
   the following account section by the same 12px in every expansion state. */
#app .profile-reference-v4:has(.profile-ref-allergy-custom) {
  padding-top: 903px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-editor) {
  padding-top: 916px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  padding-top: 953px !important;
}

/* ===== navigation-frame-parity-v31.css ===== */
/* Home/ranking navigation frame parity — 2026-08-03. */

/* Keep the paper seam visible on every primary tab. Older page-specific rules
   either softened this line too far or removed the torn-paper edge entirely. */
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  border: 0 !important;
  border-top: 1px solid rgba(135, 97, 59, .3) !important;
  background-color: rgba(255, 250, 239, .985) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 -3px 8px rgba(105, 76, 43, .08) !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::before,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  top: -2px !important;
  right: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: 3px !important;
  display: block !important;
  border: 0 !important;
  background: linear-gradient(
    90deg,
    transparent 0 2%,
    rgba(161, 123, 79, .28) 2% 98%,
    transparent 98% 100%
  ) !important;
  clip-path: polygon(
    0 48%, 8% 25%, 16% 53%, 25% 30%, 35% 56%, 46% 33%,
    57% 57%, 68% 28%, 78% 54%, 89% 27%, 100% 49%, 100% 100%, 0 100%
  ) !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::after,
#app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::after {
  display: none !important;
  content: none !important;
}

/* ===== home-meal-upward-v32.css ===== */
/* Bottom-up home-meal stage journey — 2026-08-03. */

/* The route now starts at stage 1 at the very bottom and climbs toward 100. */
#app .home-meal-reference-v1 {
  display: flex !important;
  flex-direction: column !important;
}

#app .home-meal-ref-continuation {
  order: 1 !important;
  border-top: 0 !important;
  border-bottom: 1px dashed rgba(219, 112, 83, .3) !important;
}

#app .home-meal-ref-canvas {
  order: 2 !important;
  flex: 0 0 773px !important;
}

/* The character is intentionally absent from the stage map. */
#app .home-meal-ref-character {
  display: none !important;
}

/* Reverse the five-stage opening route inside the final paper canvas. */
#app .home-meal-ref-stage-5 {
  top: 202px !important;
  right: 12px !important;
  left: auto !important;
  width: 201px !important;
  height: 82px !important;
}

#app .home-meal-ref-stage-4 {
  top: 294px !important;
  right: auto !important;
  left: 16px !important;
  width: 206px !important;
  height: 82px !important;
}

#app .home-meal-ref-stage-3 {
  top: 386px !important;
  right: 12px !important;
  left: auto !important;
  width: 200px !important;
  height: 82px !important;
}

#app .home-meal-ref-milestone {
  top: 475px !important;
  left: 143px !important;
  height: 48px !important;
}

#app .home-meal-ref-milestone strong {
  font-size: 21px !important;
}

#app .home-meal-ref-stage-2 {
  top: 532px !important;
  right: auto !important;
  left: 16px !important;
  width: 205px !important;
  height: 82px !important;
}

#app .home-meal-ref-stage-1 {
  top: 625px !important;
  right: 14px !important;
  left: auto !important;
  width: 214px !important;
  height: 132px !important;
}

/* A single dotted spine makes the upward direction immediately readable. */
#app .home-meal-ref-path::before {
  content: "";
  position: absolute;
  top: 238px;
  bottom: 18px;
  left: 50%;
  border-left: 3px dotted rgba(218, 105, 78, .72);
  transform: translateX(-50%);
}

#app .home-meal-ref-path > i {
  display: none !important;
}

#app .home-meal-ref-path .dot-one { top: 690px !important; left: calc(50% - 7px) !important; }
#app .home-meal-ref-path .dot-two { top: 573px !important; left: calc(50% - 7px) !important; }
#app .home-meal-ref-path .dot-three { top: 427px !important; left: calc(50% - 7px) !important; }
#app .home-meal-ref-path .dot-four { top: 335px !important; left: calc(50% - 7px) !important; }
#app .home-meal-ref-path .dot-five { top: 243px !important; left: calc(50% - 7px) !important; }

#app .home-meal-ref-start-sign {
  top: 666px !important;
  left: 118px !important;
}

#app .home-meal-ref-down {
  top: 181px !important;
  right: 34px !important;
  bottom: auto !important;
  transform: rotate(-4deg) !important;
}

/* Stage 100 is the summit, so the goal card belongs before the descending DOM
   list while stages 100→6 continue toward stage 1 below. */
#app .home-meal-ref-finish {
  order: 0 !important;
  margin: 0 8px 18px !important;
}

#app .home-meal-ref-continuation-path {
  top: 270px !important;
  bottom: 110px !important;
}

@media (max-width: 390px) {
  #app .home-meal-ref-stage-1 {
    right: 8px !important;
  }

  #app .home-meal-ref-stage-3,
  #app .home-meal-ref-stage-5 {
    right: 7px !important;
  }
}

/* ===== home-meal-background-continuity-v33.css ===== */
/* Seamless home-meal map background — 2026-08-03. */

/* Paint one backdrop on the scroll viewport. The long stage sections remain
   transparent, so an 853px poster tile is never repeated inside the map. */
#app .phone.home-meal-frame-phone.home-meal-mono-preview > .content {
  background-color: #fffaf0 !important;
  background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: scroll !important;
}

#app .home-meal-reference-v1,
#app .home-meal-ref-continuation,
#app .home-meal-ref-canvas {
  background-color: transparent !important;
  background-image: none !important;
  background-position: initial !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
}

/* Remove the section seam between the 100→6 route and the final 5→1 route. */
#app .home-meal-ref-continuation {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

#app .home-meal-ref-continuation::before,
#app .home-meal-ref-canvas::before,
#app .home-meal-ref-canvas::after {
  display: none !important;
  content: none !important;
}

/* ===== feed-following-ratio-badge-v34.css ===== */
/* Feed following tab: content-sized cards and restored stage-clear stamp. */
.feed-frame-phone .feed-reference-v3 {
  align-content: start !important;
  grid-template-rows: 174px max-content !important;
}

.feed-frame-phone .feed-reference-v3 .feed-list {
  align-content: start !important;
  align-items: start !important;
  grid-auto-rows: max-content !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post {
  height: auto !important;
  min-height: 434px !important;
  align-self: start !important;
}

.feed-frame-phone .feed-reference-v3 .feed-post-photo-contain {
  padding: 20px !important;
  background-color: #fbf0d2 !important;
  background-image:
    radial-gradient(circle at 50% 48%, rgba(250, 213, 79, .42) 0 33%, transparent 68%),
    url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: auto, 96px 96px !important;
  object-fit: contain !important;
}

.feed-frame-phone .feed-stage-stamp {
  display: grid !important;
}

/* ===== character-maker-nickname-font-v35.css ===== */
/* Shared character-maker header, nickname field and typography parity. */
#app .character-maker-layout .character-story-header,
#app .character-maker-layout.is-gobi-maker .character-story-header {
  isolation: isolate !important;
  border-bottom: 1px dashed rgba(239, 118, 92, .55) !important;
}

/* Cover the baked PLAYER labels and render one live header for both characters. */
#app .character-maker-layout .character-story-header::before,
#app .character-maker-layout.is-gobi-maker .character-story-header::before {
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  content: "" !important;
  opacity: 1 !important;
  background:
    linear-gradient(rgba(252, 248, 237, .96), rgba(252, 248, 237, .96)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover no-repeat !important;
  transform: none !important;
  pointer-events: none !important;
}

#app .character-maker-layout .character-story-header > button,
#app .character-maker-layout.is-gobi-maker .character-story-header > button,
#app .character-maker-layout .character-story-header > span,
#app .character-maker-layout.is-gobi-maker .character-story-header > span {
  position: relative !important;
  z-index: 1 !important;
}

#app .character-maker-layout .character-story-header > button,
#app .character-maker-layout.is-gobi-maker .character-story-header > button {
  color: #4a2d1b !important;
}

#app .character-maker-layout .character-story-header > button svg,
#app .character-maker-layout.is-gobi-maker .character-story-header > button svg {
  width: 29px !important;
  height: 29px !important;
  opacity: 1 !important;
  stroke-width: 1.85 !important;
  transform: none !important;
}

#app .character-maker-layout .character-story-header > span,
#app .character-maker-layout.is-gobi-maker .character-story-header > span {
  grid-column: 2 !important;
  justify-self: center !important;
  display: block !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #4a2d1b !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
  font-size: clamp(20px, 2.8svh, 25px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  text-align: center !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
}

#app .character-maker-layout .character-maker-nickname {
  position: absolute;
  z-index: 30;
  top: 56.9%;
  right: 12%;
  left: 12%;
  height: 4.8%;
  min-height: 38px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  border: 1px dashed rgba(239, 118, 92, .75);
  border-radius: 15px 12px 16px 13px;
  background:
    linear-gradient(rgba(255, 252, 243, .95), rgba(255, 249, 236, .95)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / cover no-repeat;
  box-shadow: 0 2px 6px rgba(91, 57, 30, .09);
}

#app .character-maker-layout .character-maker-nickname > span,
#app .character-maker-layout .character-maker-nickname > input {
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
}

#app .character-maker-layout .character-maker-nickname > span {
  color: #e56850;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

#app .character-maker-layout .character-maker-nickname > input {
  width: 100%;
  min-width: 0;
  height: 30px;
  box-sizing: border-box;
  padding: 1px 7px 0;
  border: 0;
  border-bottom: 1px solid rgba(145, 100, 65, .28);
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: #4a2d1b;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.035em;
}

#app .character-maker-layout .character-maker-nickname > input::placeholder {
  color: rgba(74, 45, 27, .42);
}

#app .character-maker-layout .character-maker-nickname > input:focus::placeholder {
  color: transparent;
}

#app .character-maker-layout .character-maker-nickname:focus-within {
  border-color: #ef765c;
  box-shadow: 0 0 0 2px rgba(239, 118, 92, .13), 0 2px 6px rgba(91, 57, 30, .09);
}

#app .character-maker-layout .character-maker-nickname.has-error {
  border-color: #d94e3a;
}

/* Use one live label layer so Gobi and Jarin have the exact same typeface. */
#app .character-maker-layout .character-maker-controls fieldset::before,
#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset::before {
  position: absolute !important;
  z-index: 1 !important;
  top: 8% !important;
  bottom: 8% !important;
  left: 3.9% !important;
  width: 19.8% !important;
  display: block !important;
  content: "" !important;
  background: rgba(255, 251, 241, .95) !important;
  border: 0 !important;
  border-radius: 9px !important;
  pointer-events: none !important;
}

#app .character-maker-layout .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 6.7% !important;
  width: 16.5% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  transform: translateY(-50%) !important;
}

#app .character-maker-layout .character-maker-controls legend b,
#app .character-maker-layout .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#app .character-maker-layout .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  color: #ef765c !important;
  font-size: clamp(18px, 4.8vw, 21px) !important;
  letter-spacing: -.02em !important;
}

#app .character-maker-layout .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  color: #4a2d1b !important;
  font-size: clamp(14px, 3.9vw, 17px) !important;
  letter-spacing: -.055em !important;
}

/* ===== project-gaegu-support-font-v37.css ===== */
/*
 * Project support typography v37
 *
 * Keep the five large screen titles in their display face, while unifying
 * supporting copy, controls, cards and data labels with the handwriting used
 * by the original "이 모습으로 시작하기" button.
 */
:root {
  --bap-support-typeface: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive;
}

#app :is(p, small, label, button, input, textarea, select, dt, dd) {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Character maker and both confirmation sheets. */
#app :is(
    .character-maker-select,
    .character-maker-controls,
    .character-maker-nickname,
    .character-choice-dialog.character-final-confirm,
    .character-confirm-dialog.character-final-confirm
  ),
#app :is(
    .character-maker-select,
    .character-maker-controls,
    .character-maker-nickname,
    .character-choice-dialog.character-final-confirm,
    .character-confirm-dialog.character-final-confirm
  ) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Home: greeting copy, progress paper and today's meal card. */
#app .home-ref-greeting > p,
#app :is(.home-ref-progress, .home-ref-recipe-copy, .home-ref-next),
#app :is(.home-ref-progress, .home-ref-recipe-copy, .home-ref-next) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Feed: supporting heading, tabs and every live post label. */
#app .feed-reference-header > p,
#app :is(.feed-filter, .feed-post, .feed-empty, .feed-dialog),
#app :is(.feed-filter, .feed-post, .feed-empty, .feed-dialog) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Stage maps: progress, recipe nodes, unlock copy and milestones. */
#app .home-meal-ref-heading > p,
#app :is(
    .home-meal-ref-progress,
    .home-meal-ref-stage-card,
    .home-meal-ref-continuation,
    .home-meal-ref-finish,
    .home-meal-ref-milestone,
    .node-copy,
    .map-stat,
    .chapter-marker
  ),
#app :is(
    .home-meal-ref-progress,
    .home-meal-ref-stage-card,
    .home-meal-ref-continuation,
    .home-meal-ref-finish,
    .home-meal-ref-milestone,
    .node-copy,
    .map-stat,
    .chapter-marker
  ) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Ranking: supporting copy, filters, podium, list and personal rank strip. */
#app .ranking-poster-heading > p,
#app :is(
    .ranking-poster-scope,
    .ranking-poster-stage,
    .ranking-poster-lower,
    .ranking-poster-my-rank
  ),
#app :is(
    .ranking-poster-scope,
    .ranking-poster-stage,
    .ranking-poster-lower,
    .ranking-poster-my-rank
  ) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Profile cards, statistics, account actions and their functional sheets. */
#app :is(
    .profile-ref-hero,
    .profile-ref-card,
    .profile-live-account,
    .profile-sticker-sheet,
    .allergy-scan-sheet
  ),
#app :is(
    .profile-ref-hero,
    .profile-ref-card,
    .profile-live-account,
    .profile-sticker-sheet,
    .allergy-scan-sheet
  ) * {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* Keep the shared navigation labels consistent on every primary screen. */
#app .tab-menu-label {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/*
 * The player-select subtitle and role labels are baked into the approved
 * watercolor poster. These live text patches replace only those supporting
 * lines; the large illustrated title and character names stay untouched.
 */
#app .character-pick-font-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  color: #4a2d1b;
  font-family: var(--bap-support-typeface);
  font-synthesis: none;
}

#app .character-pick-font-overlay > * {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  font-family: var(--bap-support-typeface) !important;
}

#app .character-pick-font-subtitle {
  top: 23.55%;
  left: 8.4%;
  width: 65.6%;
  min-height: 5.15%;
  display: flex;
  align-items: center;
  padding: .35% 1.55%;
  background:
    linear-gradient(rgba(251, 247, 237, .965), rgba(251, 247, 237, .965)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 160% auto;
  box-shadow: 0 0 8px 7px rgba(251, 247, 237, .9);
  font-size: clamp(11px, 3.1vw, 14px);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -.035em;
}

#app .character-pick-font-role {
  top: 72.05%;
  width: 24%;
  min-height: 3.15%;
  display: grid;
  place-items: center;
  padding: .3% .5%;
  background:
    linear-gradient(rgba(255, 247, 213, .91), rgba(255, 247, 213, .91)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 180% auto;
  box-shadow: 0 0 8px 6px rgba(255, 247, 213, .84);
  font-size: clamp(13px, 3.45vw, 15px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  text-align: center;
  white-space: nowrap;
}

#app .character-pick-font-role-jarin {
  left: 17.2%;
}

#app .character-pick-font-role-gobi {
  right: 17.2%;
}

@media (min-width: 621px) {
  #app .character-pick-font-subtitle {
    font-size: 14px;
  }

  #app .character-pick-font-role {
    font-size: 15px;
  }
}

/* Final specificity locks for late, reference-specific typography rules. */
#app .home-reference-v4 .home-ref-recipe-copy > :is(small, span, strong, em, b),
#app .home-reference-v4 .home-ref-progress :is(small, span, strong, em, b),
#app .home-meal-reference-v1 .home-meal-ref-stage-copy > :is(b, strong, small, em),
#app .home-meal-reference-v1 .home-meal-ref-start-sign,
#app .profile-reference-v4 .profile-ref-header h1 {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

html body #app .page.mono-preview-page
  > .phone[class]
  > .editorial-tabs.unified-reference-nav.unified-reference-nav[class]
  button
  > .tab-menu-label,
html body #app .page.mono-preview-page
  > .phone[class]
  > .editorial-tabs.unified-reference-nav.unified-reference-nav[class]
  button:not(.active)
  > .tab-menu-label,
html body #app .page.mono-preview-page
  > .phone[class]
  > .editorial-tabs.unified-reference-nav.unified-reference-nav[class]
  button:hover
  > .tab-menu-label,
html body #app .page.mono-preview-page
  > .phone[class]
  > .editorial-tabs.unified-reference-nav.unified-reference-nav[class]
  button.active
  > .tab-menu-label {
  font-family: var(--bap-support-typeface) !important;
  font-synthesis: none;
}

/* ===== profile-title-collection-modal-v38.css ===== */
/* Profile title collection preview and complete archive — 2026-08-04. */

/* Keep six badges as the compact preview and expose all ten beside the count. */
#app .profile-reference-v4 .profile-ref-title-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

#app .profile-reference-v4 .profile-ref-title-summary > strong {
  white-space: nowrap;
}

#app .profile-reference-v4 .profile-ref-title-summary > button {
  min-width: 82px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  margin: 0 !important;
  padding: 0 9px 1px !important;
  border: 1px dashed rgba(231, 110, 83, .72) !important;
  border-radius: 44% 48% 45% 51% / 47% 43% 52% 46% !important;
  background-color: rgba(255, 248, 231, .92) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 72px 72px !important;
  color: #df6049 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(113, 78, 42, .08) !important;
}

#app .profile-reference-v4 .profile-ref-title-summary > button span {
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Mobile archive sheet. */
#app .mono-preview-page .profile-title-modal {
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  padding:
    max(10px, env(safe-area-inset-top))
    10px
    max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(66, 49, 39, .5) !important;
  backdrop-filter: blur(5px) saturate(.8) !important;
}

#app .mono-preview-page .profile-title-sheet {
  width: min(calc(100vw - 20px), 410px) !important;
  height: min(720px, calc(100dvh - 20px)) !important;
  max-height: calc(100dvh - 20px) !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(145, 105, 64, .22) !important;
  border-radius: 26px !important;
  background-color: #fffaf0 !important;
  background-image:
    radial-gradient(ellipse at 8% 16%, rgba(250, 220, 104, .3) 0 18%, transparent 45%),
    radial-gradient(ellipse at 93% 88%, rgba(208, 232, 199, .42) 0 18%, transparent 46%),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, auto, 180px 180px !important;
  color: #43281b !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  box-shadow: 0 18px 48px rgba(46, 31, 22, .28) !important;
}

#app .mono-preview-page .profile-title-sheet,
#app .mono-preview-page .profile-title-sheet * {
  box-sizing: border-box;
  font-synthesis: none;
}

#app .mono-preview-page .profile-title-sheet-head {
  position: relative;
  flex: 0 0 auto !important;
  min-height: 105px !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 15px 25px !important;
  border-bottom: 1px dashed rgba(215, 153, 103, .42) !important;
  background-color: rgba(255, 250, 239, .9) !important;
  background-image:
    linear-gradient(90deg, rgba(247, 209, 89, .2), transparent 46%),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 150px 150px !important;
}

#app .mono-preview-page .profile-title-sheet-head::before {
  content: "";
  position: absolute;
  right: 56px;
  top: 7px;
  width: 72px;
  height: 72px;
  border: 2px dashed rgba(233, 111, 82, .28);
  border-radius: 50%;
  transform: rotate(9deg);
  pointer-events: none;
}

#app .mono-preview-page .profile-title-sheet-head > div {
  position: relative;
  z-index: 1;
  padding-left: 12px !important;
  border-left: 3px solid #e96f52 !important;
}

#app .mono-preview-page .profile-title-sheet-head span,
#app .mono-preview-page .profile-title-sheet-head p {
  margin: 0;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

#app .mono-preview-page .profile-title-sheet-head span {
  color: #df674d !important;
  letter-spacing: .07em !important;
}

#app .mono-preview-page .profile-title-sheet-head h2 {
  margin: 4px 0 5px !important;
  color: #43281b !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .mono-preview-page .profile-title-sheet-close {
  position: relative;
  z-index: 2;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  border: 2px solid rgba(255, 250, 239, .8) !important;
  border-radius: 50% !important;
  background: #e96f52 !important;
  color: #fffaf0 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  box-shadow: 0 2px 0 rgba(116, 70, 48, .13) !important;
}

#app .mono-preview-page .profile-title-sheet-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 12px 11px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 16px max(28px, env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain;
}

#app .mono-preview-page .profile-title-sheet-item {
  position: relative;
  min-width: 0;
  min-height: 91px !important;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 7px;
  padding: 11px 9px 10px !important;
  border: 1.5px dashed rgba(147, 109, 66, .25) !important;
  border-radius: 28% 34% 29% 36% / 23% 19% 27% 21% !important;
  background-color: rgba(255, 242, 218, .88) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(116, 80, 41, .025)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 105px 105px !important;
  transform: rotate(-.35deg);
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(even) {
  transform: rotate(.4deg);
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(4n + 1) {
  background-color: rgba(218, 235, 211, .92) !important;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(4n + 2) {
  background-color: rgba(248, 228, 177, .92) !important;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(4n + 3) {
  background-color: rgba(220, 235, 244, .92) !important;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(4n) {
  background-color: rgba(245, 220, 215, .92) !important;
}

#app .mono-preview-page .profile-title-sheet-item.earned {
  border-color: rgba(99, 145, 111, .62) !important;
  box-shadow: 0 0 0 2px rgba(231, 110, 83, .68) inset !important;
}

#app .mono-preview-page .profile-title-sheet-item.locked {
  color: rgba(91, 65, 43, .72) !important;
  filter: saturate(.66) contrast(.98) !important;
}

#app .mono-preview-page .profile-title-sheet-mark {
  grid-row: 1 / 3;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(139, 101, 63, .17);
  border-radius: 50%;
  background: rgba(255, 251, 240, .78);
  color: #de664e !important;
  font-family: serif !important;
  font-size: 17px !important;
  line-height: 1 !important;
  box-shadow: 0 2px 4px rgba(104, 74, 42, .08);
}

#app .mono-preview-page .profile-title-sheet-item.locked .profile-title-sheet-mark {
  color: rgba(108, 82, 57, .55) !important;
}

#app .mono-preview-page .profile-title-sheet-item b {
  min-width: 0;
  align-self: end;
  overflow-wrap: anywhere;
  color: inherit !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

#app .mono-preview-page .profile-title-sheet-item small {
  align-self: start;
  color: rgba(112, 78, 49, .72) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

@media (max-width: 360px), (max-height: 620px) {
  #app .mono-preview-page .profile-title-sheet {
    width: min(calc(100vw - 12px), 410px) !important;
    height: calc(100dvh - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    border-radius: 20px !important;
  }

  #app .mono-preview-page .profile-title-sheet-head {
    min-height: 88px !important;
    padding: 13px 15px 12px 18px !important;
  }

  #app .mono-preview-page .profile-title-sheet-head h2 {
    font-size: 24px !important;
  }

  #app .mono-preview-page .profile-title-sheet-close {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

  #app .mono-preview-page .profile-title-sheet-grid {
    gap: 9px 8px !important;
    padding: 13px 10px 22px !important;
  }

  #app .mono-preview-page .profile-title-sheet-item {
    min-height: 84px !important;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 5px;
    padding: 9px 7px !important;
  }

  #app .mono-preview-page .profile-title-sheet-mark {
    width: 28px;
    height: 28px;
    font-size: 15px !important;
  }

  #app .mono-preview-page .profile-title-sheet-item b {
    font-size: 12.5px !important;
  }

  #app .mono-preview-page .profile-title-sheet-item small {
    font-size: 9px !important;
  }
}

/* ===== primary-header-home-parity-v39.css ===== */
/* Primary page headers — align Feed, Home Meal, Ranking, and Profile to Home. */
:root {
  --bap-primary-header-top: 33px;
  --bap-primary-header-right: 26px;
  --bap-primary-header-left: 42px;
  --bap-primary-title-font: "Bap Jua", "Bap Gaegu Full", sans-serif;
  --bap-primary-support-font: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive;
}

/* Feed */
html body #app .feed-frame-phone .feed-reference-header {
  padding: var(--bap-primary-header-top) var(--bap-primary-header-right) 0
    var(--bap-primary-header-left) !important;
}

html body #app .feed-frame-phone .feed-reference-kicker,
html body #app .home-meal-reference-v1 .home-meal-ref-heading > span,
html body #app .ranking-reference-v4 .ranking-poster-heading > span,
html body #app .profile-reference-v4 .profile-ref-header > div > span {
  margin: 0 0 8px !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: -.018em !important;
}

html body #app .feed-frame-phone .feed-reference-header h2,
html body #app .home-meal-reference-v1 .home-meal-ref-heading h2,
html body #app .ranking-reference-v4 .ranking-poster-heading h2,
html body #app .profile-reference-v4 .profile-ref-header h1 {
  max-width: none !important;
  margin: 0 !important;
  font-family: var(--bap-primary-title-font) !important;
  font-size: 45px !important;
  font-weight: 400 !important;
  line-height: .91 !important;
  letter-spacing: -.061em !important;
  font-synthesis: none !important;
  -webkit-text-stroke: 0 !important;
  white-space: nowrap !important;
}

html body #app .feed-frame-phone .feed-reference-header > p,
html body #app .home-meal-reference-v1 .home-meal-ref-heading > p,
html body #app .ranking-reference-v4 .ranking-poster-heading > p {
  margin: 8px 0 0 !important;
  font-family: var(--bap-primary-support-font) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
  font-synthesis: none !important;
}

/* Home meal */
html body #app .home-meal-reference-v1 .home-meal-ref-heading {
  top: var(--bap-primary-header-top) !important;
  right: var(--bap-primary-header-right) !important;
  left: var(--bap-primary-header-left) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-progress {
  top: 129px !important;
}

/* Ranking */
html body #app .ranking-reference-v4 .ranking-poster-heading {
  inset: 0 var(--bap-primary-header-right) auto var(--bap-primary-header-left) !important;
  width: auto !important;
  padding: var(--bap-primary-header-top) 0 0 !important;
}

/* Profile */
html body #app .profile-reference-v4 .profile-ref-header {
  top: var(--bap-primary-header-top) !important;
  right: var(--bap-primary-header-right) !important;
  left: var(--bap-primary-header-left) !important;
}

@media (max-width: 390px) {
  html body #app .feed-frame-phone .feed-reference-header h2,
  html body #app .home-meal-reference-v1 .home-meal-ref-heading h2,
  html body #app .ranking-reference-v4 .ranking-poster-heading h2,
  html body #app .profile-reference-v4 .profile-ref-header h1 {
    font-size: 39px !important;
  }
}

/* ===== ranking-nav-icon-outline-v41.css ===== */
/* Ranking navigation icons must keep the same illustrated outlines as Home Meal. */
html body #app .phone.ranking-frame-phone.ranking-mono-preview
  > .editorial-tabs.unified-reference-nav.ranking-poster-nav
  .profile-poster-menu-svg * {
  stroke: #3c1e0e !important;
  stroke-width: 1px !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  opacity: 1 !important;
}

/* ===== profile-background-seam-v42.css ===== */
/* Keep the approved watercolor-paper background continuous below the first viewport.
   Fade the finite poster artwork into the same paper instead of restarting it. */
#app .profile-frame-phone .profile-reference-v4 {
  background-color: #fffaf0 !important;
  background-image:
    url("./assets/paper-grain.svg"),
    linear-gradient(
      to bottom,
      rgba(255, 250, 240, 0) 680px,
      rgba(255, 250, 240, .48) 770px,
      #fffaf0 850px
    ),
    url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
  background-position: center top, center top, center top !important;
  background-repeat: repeat, no-repeat, no-repeat !important;
  background-size: 180px 180px, 430px 100%, 430px 853px !important;
}

/* ===== home-primary-ratio-parity-v43.css ===== */
/* Keep Home at the same physical frame width as the other primary tabs.
   On short desktop viewports, scroll the poster content instead of shrinking
   the entire phone (which made the screen and navigation jump in size). */
@media (min-width: 561px) {
  #app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(100%, 430px) !important;
    min-width: 0 !important;
    max-width: 430px !important;
    height: min(872px, calc(100dvh - 28px)) !important;
    min-height: 0 !important;
    max-height: min(872px, calc(100dvh - 28px)) !important;
    grid-template-rows: 0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
    align-self: center !important;
    justify-self: center !important;
    transform: none !important;
    transform-origin: center center !important;
  }

  #app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .content {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
  }

  #app .page.mono-preview-page > .phone.bapstage-home-v2:has(> .unified-reference-nav) > .content::-webkit-scrollbar {
    display: none !important;
  }
}

/* ===== profile-social-summary-v44.css ===== */
/* Turn the follower row into a compact paper summary so the hero card's
   lower-right corner remains visually balanced after removing Edit Profile. */
#app .profile-reference-v4 .profile-ref-social,
#app .profile-reference-v4 .profile-ref-social:hover,
#app .profile-reference-v4 .profile-ref-social:active {
  box-sizing: border-box !important;
  width: 143px !important;
  height: 50px !important;
  display: grid !important;
  grid-template-columns: 1fr 1px 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 10px 0 0 -4px !important;
  padding: 4px 7px 5px !important;
  border: 1px dashed rgba(154, 119, 68, .32) !important;
  border-radius: 14px 11px 15px 10px / 12px 15px 11px 14px !important;
  color: var(--profile-ink) !important;
  background-color: rgba(248, 229, 170, .48) !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, .2), rgba(248, 220, 141, .06)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 110px 110px !important;
  box-shadow: 1px 3px 4px rgba(94, 66, 35, .09) !important;
  transform: rotate(.35deg) !important;
}

#app .profile-reference-v4 .profile-ref-social span {
  min-width: 0 !important;
  height: 38px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  color: rgba(53, 24, 13, .72) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#app .profile-reference-v4 .profile-ref-social span b {
  color: var(--profile-coral-deep) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
}

#app .profile-reference-v4 .profile-ref-social > i {
  width: 1px !important;
  height: 27px !important;
  overflow: hidden !important;
  border-left: 1px dashed rgba(137, 101, 58, .3) !important;
  color: transparent !important;
  font-size: 0 !important;
}

/* ===== home-meal-featured-card-v46.css ===== */
/* Featured home-meal card spacing and control parity — 2026-08-04. */

/* Give the larger current-stage card enough vertical room without crowding the
   stage above it or clipping the paper edge at the bottom of the route. */
#app .home-meal-ref-canvas {
  flex-basis: 805px !important;
}

#app .home-meal-ref-stage-1 {
  top: 625px !important;
  right: 10px !important;
  width: 232px !important;
  height: 158px !important;
  grid-template-columns: 105px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 15px 11px 12px 10px !important;
}

/* The card itself uses clip-path, so an outside label is clipped. Keep the
   full paper tag inside the card and reserve its own clear top-left area. */
#app .home-meal-ref-stage-1 .home-meal-ref-today {
  top: 7px !important;
  left: 13px !important;
  width: 68px !important;
  height: 27px !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-food {
  width: 105px !important;
  height: 105px !important;
  transform: translate(-2px, 13px) !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy {
  align-self: stretch !important;
  padding: 13px 0 0 !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > b {
  font-size: 30px !important;
  line-height: 1 !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > strong {
  max-width: none !important;
  margin-top: 7px !important;
  overflow: visible !important;
  font-size: 22px !important;
  line-height: 1.08 !important;
  letter-spacing: -.055em !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > small {
  margin-top: 8px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

/* Reuse the approved Home cooking button's deckled mask, coral ink, paper
   texture and typography while keeping this live stage button clickable. */
#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > em {
  right: 11px !important;
  bottom: 11px !important;
  width: 132px !important;
  height: 38px !important;
  gap: 9px !important;
  padding: 0 9px 2px !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  letter-spacing: -.03em !important;
}

#app .home-meal-ref-stage-1 .home-meal-ref-stage-copy > em i {
  font-size: 25px !important;
  line-height: 1 !important;
}

@media (max-width: 390px) {
  #app .home-meal-ref-stage-1 {
    right: 7px !important;
    width: 228px !important;
    grid-template-columns: 101px minmax(0, 1fr) !important;
    gap: 8px !important;
  }

  #app .home-meal-ref-stage-1 .home-meal-ref-food {
    width: 101px !important;
    height: 101px !important;
  }
}

/* ===== home-meal-card-copy-spacing-v47.css ===== */
/* Home-meal card copy edge and lower-spacing polish — 2026-08-04. */

/* Handwritten glyphs extend slightly left of their text box. Allow those
   strokes to render instead of clipping the first character. */
#app .home-meal-reference-v1
  .home-meal-ref-stage-card:not(.home-meal-ref-stage-1)
  .home-meal-ref-stage-copy > strong {
  overflow: visible !important;
  text-overflow: clip !important;
}

/* The opening route uses compact 82px cards. Lift the copy group slightly and
   tighten only the internal gaps so the unlock note has a clear paper margin
   beneath it without changing the route-card positions. */
#app .home-meal-ref-stage-2 .home-meal-ref-stage-copy,
#app .home-meal-ref-stage-3 .home-meal-ref-stage-copy,
#app .home-meal-ref-stage-4 .home-meal-ref-stage-copy,
#app .home-meal-ref-stage-5 .home-meal-ref-stage-copy {
  transform: translate(2px, -3px) !important;
}

#app .home-meal-ref-stage-2 .home-meal-ref-stage-copy > strong,
#app .home-meal-ref-stage-3 .home-meal-ref-stage-copy > strong,
#app .home-meal-ref-stage-4 .home-meal-ref-stage-copy > strong,
#app .home-meal-ref-stage-5 .home-meal-ref-stage-copy > strong {
  margin-top: 4px !important;
}

#app .home-meal-ref-stage-2 .home-meal-ref-stage-copy > small,
#app .home-meal-ref-stage-3 .home-meal-ref-stage-copy > small,
#app .home-meal-ref-stage-4 .home-meal-ref-stage-copy > small,
#app .home-meal-ref-stage-5 .home-meal-ref-stage-copy > small {
  margin-top: 4px !important;
}

/* ===== home-meal-sticky-heading-v48.css ===== */
/* One persistent title for the complete bottom-up home-meal journey. */

html body #app .home-meal-reference-v1
  > .home-meal-ref-heading.home-meal-ref-sticky-heading {
  box-sizing: border-box !important;
  position: sticky !important;
  z-index: 80 !important;
  inset: 0 0 auto !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  order: 0 !important;
  width: 100% !important;
  min-height: 120px !important;
  flex: 0 0 120px !important;
  align-self: stretch !important;
  margin: 0 !important;
  padding: 18px 42px 14px !important;
  overflow: hidden !important;
  border-bottom: 1px dashed rgba(219, 112, 83, .28) !important;
  background-color: rgba(255, 250, 240, .97) !important;
  background-image:
    linear-gradient(90deg, rgba(248, 213, 84, .18), transparent 62%),
    url("./assets/paper-grain.svg") !important;
  background-position: center, center !important;
  background-size: auto, 220px 220px !important;
  box-shadow: 0 4px 10px rgba(94, 65, 35, .08) !important;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > span {
  margin-bottom: 7px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading h2 {
  font-size: 42px !important;
  line-height: .9 !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > p {
  margin-top: 7px !important;
  font-size: 16px !important;
}

/* The former 100→6 section title is gone; its route now starts immediately
   below the shared sticky title. */
#app .home-meal-ref-continuation {
  padding-top: 18px !important;
}

#app .home-meal-ref-continuation-path {
  top: 150px !important;
}

/* Remove the empty title-sized pocket that used to sit between stage 6 and
   stage 5, then keep the whole opening route evenly spaced. */
#app .home-meal-ref-canvas {
  height: 704px !important;
  flex: 0 0 704px !important;
  flex-basis: 704px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-progress {
  top: 20px !important;
}

#app .home-meal-ref-stage-5 { top: 104px !important; }
#app .home-meal-ref-stage-4 { top: 196px !important; }
#app .home-meal-ref-stage-3 { top: 288px !important; }
#app .home-meal-ref-milestone { top: 377px !important; }
#app .home-meal-ref-stage-2 { top: 434px !important; }
#app .home-meal-ref-stage-1 { top: 527px !important; }

#app .home-meal-ref-path::before {
  top: 140px !important;
}

#app .home-meal-ref-path .dot-one { top: 592px !important; }
#app .home-meal-ref-path .dot-two { top: 475px !important; }
#app .home-meal-ref-path .dot-three { top: 329px !important; }
#app .home-meal-ref-path .dot-four { top: 237px !important; }
#app .home-meal-ref-path .dot-five { top: 145px !important; }

#app .home-meal-ref-start-sign {
  top: 568px !important;
}

#app .home-meal-ref-down {
  top: 83px !important;
}

@media (max-width: 390px) {
  html body #app .home-meal-reference-v1
    > .home-meal-ref-heading.home-meal-ref-sticky-heading {
    min-height: 112px !important;
    flex-basis: 112px !important;
    padding: 16px 28px 12px !important;
  }

  html body #app .home-meal-reference-v1
    > .home-meal-ref-sticky-heading h2 {
    font-size: 38px !important;
  }
}

/* ===== home-meal-stage-card-paper-v51.css ===== */
/* Home-meal stage card paper contrast polish — 2026-08-04. */

/*
 * The old yellow under-glow left pale white points at the torn-paper corners
 * and visually merged the cards with the yellow watercolor route. Use one
 * calm sage-ivory sheet all the way to the deckled edge instead.
 */
#app .home-meal-reference-v1 .home-meal-ref-stage-card {
  background-color: rgba(235, 241, 225, .985) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(202, 217, 189, .15)) !important;
  background-position: center, center !important;
  background-size: 190px 190px, auto !important;
  box-shadow: inset 0 0 0 1px rgba(113, 126, 86, .12) !important;
  filter: drop-shadow(2px 4px 4px rgba(92, 66, 36, .13)) !important;
}

/* Remove the blurred yellow layer that created the white/yellow corner tips. */
#app .home-meal-reference-v1 .home-meal-ref-stage-card::before {
  content: none !important;
  display: none !important;
}

/* Keep stage-state colors readable while using the same paper family. */
#app .home-meal-reference-v1 .home-meal-ref-stage-card.home-meal-ref-status-available {
  background-color: rgba(249, 238, 215, .985) !important;
}

#app .home-meal-reference-v1 .home-meal-ref-stage-card.home-meal-ref-status-cleared {
  background-color: rgba(218, 233, 211, .985) !important;
}

#app .home-meal-reference-v1 .home-meal-ref-stage-card.home-meal-ref-status-skipped {
  background-color: rgba(232, 229, 239, .985) !important;
}

/* ===== home-bottom-gap-v52.css ===== */
/* Home screen bottom continuity — 2026-08-04. */

/*
 * The shared phone frame grows its content row to the available viewport.
 * Keep the home artwork attached to the navigation by letting it fill that
 * row instead of stopping at its older fixed 765px canvas height.
 */
#app .page.mono-preview-page
  > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .content
  > .home-reference-v4 {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

/* ===== navigation-top-line-remove-v53.css ===== */
/* Primary navigation top-edge cleanup — 2026-08-04. */

#app .page.mono-preview-page
  > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav,
#app .page.mono-preview-page
  > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  border-top: 0 !important;
  box-shadow: none !important;
}

#app .page.mono-preview-page
  > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::before,
#app .page.mono-preview-page
  > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::after,
#app .page.mono-preview-page
  > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::before,
#app .page.mono-preview-page
  > .phone.bapstage-home-v2:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav::after {
  content: none !important;
  display: none !important;
}

/* ===== ranking-toggle-active-v54.css ===== */
/* Ranking scope active-state parity with the feed tabs — 2026-08-04. */

#app .phone.ranking-frame-phone.ranking-mono-preview
  .ranking-reference-v4
  .ranking-poster-scope button::after {
  content: "" !important;
  position: absolute !important;
  right: 2px !important;
  bottom: 2px !important;
  left: 2px !important;
  width: auto !important;
  height: 4px !important;
  display: block !important;
  border-radius: 50% 40% 55% 35% !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: rotate(-1deg) !important;
}

#app .phone.ranking-frame-phone.ranking-mono-preview
  .ranking-reference-v4
  .ranking-poster-scope button.active::after,
#app .phone.ranking-frame-phone.ranking-mono-preview
  .ranking-reference-v4
  .ranking-poster-scope button[aria-selected="true"]::after {
  display: block !important;
  background: #e8755d !important;
  opacity: 1 !important;
}

/* ===== profile-background-solid-v55.css ===== */
/* One continuous paper color for the full profile page — 2026-08-04. */

#app .profile-frame-phone .profile-reference-v4 {
  background-color: #fffaf0 !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  background-size: 180px 180px !important;
}

/* ===== character-maker-jarin-size-parity-v58.css ===== */
/* Jarin maker size parity v58
 * The four non-default source sheets have a slightly larger painted alpha
 * footprint than the spike source. Scale their live artwork to the spike
 * sheet's measured 278x682 footprint while keeping the shared canvas center.
 */

#app :is(.character-maker-figure, .character-confirm-maker-figure)
  > img[src*="jarin-watercolor-crop"],
#app :is(.character-maker-figure, .character-confirm-maker-figure)
  > img[src*="jarin-watercolor-side"],
#app :is(.character-maker-figure, .character-confirm-maker-figure)
  > img[src*="jarin-watercolor-wave"],
#app :is(.character-maker-figure, .character-confirm-maker-figure)
  > img[src*="jarin-watercolor-short"] {
  transform: scaleX(.96528) scaleY(.99128) !important;
  transform-origin: 50% 50% !important;
}

/* ===== home-meal-route-continuity-v59.css ===== */
/* Home-meal route continuity v59
 * Keep progress with the persistent page heading and let stages 100→1 read as
 * one uninterrupted upward trail. Nothing sits between stage 6 and stage 5.
 */

html body #app .home-meal-reference-v1
  > .home-meal-ref-heading.home-meal-ref-sticky-heading {
  min-height: 126px !important;
  flex: 0 0 126px !important;
  padding: 18px 30px 14px !important;
}

#app .home-meal-reference-v1 {
  gap: 0 !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading h2 {
  width: fit-content !important;
  max-width: 205px !important;
  font-size: 40px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > p {
  max-width: 205px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress {
  position: absolute !important;
  top: 18px !important;
  right: 22px !important;
  left: auto !important;
  width: 132px !important;
  height: 79px !important;
  grid-template-columns: 47px 1fr !important;
  grid-template-rows: 14px 27px 15px !important;
  column-gap: 7px !important;
  padding: 10px 12px 9px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > small {
  font-size: 11px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > span b {
  font-size: 28px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > span em {
  font-size: 11px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > i {
  width: 57px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > strong {
  font-size: 9px !important;
}

/* The former 130px section tail plus the opening progress card caused the
   visible hole between stages 6 and 5. Collapse both into the normal rhythm. */
#app .home-meal-ref-continuation {
  padding-bottom: 15px !important;
}

#app .home-meal-ref-canvas {
  height: 575px !important;
  flex: 0 0 575px !important;
  flex-basis: 575px !important;
}

#app .home-meal-ref-stage-5 { top: 0 !important; }
#app .home-meal-ref-stage-4 { top: 92px !important; }
#app .home-meal-ref-stage-3 { top: 184px !important; }
#app .home-meal-ref-milestone { top: 273px !important; }
#app .home-meal-ref-stage-2 { top: 330px !important; }
#app .home-meal-ref-stage-1 { top: 423px !important; }

#app .home-meal-ref-path::before {
  top: 36px !important;
  bottom: 18px !important;
}

#app .home-meal-ref-path .dot-one { top: 488px !important; }
#app .home-meal-ref-path .dot-two { top: 371px !important; }
#app .home-meal-ref-path .dot-three { top: 225px !important; }
#app .home-meal-ref-path .dot-four { top: 133px !important; }
#app .home-meal-ref-path .dot-five { top: 41px !important; }

#app .home-meal-ref-start-sign {
  top: 464px !important;
}

#app .home-meal-ref-down {
  display: none !important;
}

@media (max-width: 390px) {
  html body #app .home-meal-reference-v1
    > .home-meal-ref-heading.home-meal-ref-sticky-heading {
    min-height: 120px !important;
    flex-basis: 120px !important;
    padding: 16px 22px 12px !important;
  }

  html body #app .home-meal-reference-v1
    > .home-meal-ref-sticky-heading h2 {
    max-width: 188px !important;
    font-size: 37px !important;
  }

  html body #app .home-meal-reference-v1
    > .home-meal-ref-sticky-heading > p {
    max-width: 188px !important;
    font-size: 15px !important;
  }

  html body #app .home-meal-reference-v1
    > .home-meal-ref-sticky-heading > .home-meal-ref-progress {
    right: 13px !important;
    width: 124px !important;
    grid-template-columns: 44px 1fr !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }
}

/* ===== recipe-modal-watercolor-v60.css ===== */
/* Home-meal recipe modal — watercolor paper redesign v60. */

#app .mono-preview-page > .modal:has(.recipe-sheet:not(.dessert-recipe-sheet)) {
  padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important;
  background: rgba(58, 42, 31, .58) !important;
  backdrop-filter: blur(5px) saturate(.82) !important;
  -webkit-backdrop-filter: blur(5px) saturate(.82) !important;
}

html body #app .mono-preview-page .sheet.recipe-sheet:not(.dessert-recipe-sheet) {
  --recipe-paper: #fffaf0;
  --recipe-ink: #3b2014;
  --recipe-coral: #ed7158;
  --recipe-coral-deep: #d95740;
  --recipe-yellow: #f6d65e;
  --recipe-mint: #dcebd8;
  --recipe-blue: #dceaf2;
  width: min(100%, 410px) !important;
  height: min(820px, calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom)))) !important;
  max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 27px 23px 25px 21px / 23px 27px 21px 26px !important;
  color: var(--recipe-ink) !important;
  background: var(--recipe-paper) url("./assets/paper-grain.svg") center / 220px 220px !important;
  box-shadow: 0 18px 46px rgba(45, 30, 20, .28) !important;
  clip-path: none !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
}

html body #app .mono-preview-page .sheet.recipe-sheet:not(.dessert-recipe-sheet)::before {
  content: "" !important;
  position: absolute !important;
  z-index: 40 !important;
  inset: 7px !important;
  display: block !important;
  border: 1px dashed rgba(210, 111, 79, .24) !important;
  border-radius: 22px 19px 21px 18px / 19px 22px 18px 21px !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover {
  position: relative !important;
  isolation: isolate !important;
  min-height: 224px !important;
  padding: 22px 24px 20px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--recipe-ink) !important;
  background:
    radial-gradient(ellipse at 79% 58%, rgba(248, 213, 82, .55) 0 86px, transparent 91px),
    radial-gradient(ellipse at 9% -8%, rgba(248, 213, 82, .34) 0 102px, transparent 108px),
    linear-gradient(rgba(255, 250, 240, .73), rgba(255, 249, 236, .9)),
    url("./assets/paper-grain.svg") center / 220px 220px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover::before {
  content: "" !important;
  position: absolute !important;
  right: -20px !important;
  bottom: -18px !important;
  width: 210px !important;
  height: 160px !important;
  display: block !important;
  z-index: 1 !important;
  border: 2px dashed rgba(232, 110, 83, .58) !important;
  border-radius: 50% !important;
  background: transparent !important;
  pointer-events: none !important;
  transform: rotate(-8deg) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover::after {
  content: "×\A ×" !important;
  position: absolute !important;
  right: 15px !important;
  bottom: 8px !important;
  display: block !important;
  z-index: 1 !important;
  color: rgba(103, 153, 195, .57) !important;
  font-family: sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: .72 !important;
  white-space: pre !important;
  pointer-events: none !important;
  transform: rotate(-18deg) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-title-row {
  position: relative !important;
  z-index: 8 !important;
  min-height: 42px !important;
  align-items: flex-start !important;
  padding: 0 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-stage-chip {
  min-height: 30px !important;
  padding: 7px 13px 6px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(3% 12%, 19% 5%, 36% 10%, 53% 4%, 70% 9%, 96% 8%, 100% 34%, 96% 65%, 100% 89%, 72% 94%, 48% 89%, 24% 96%, 2% 87%, 5% 56%, 0 30%) !important;
  color: #fffaf0 !important;
  background: var(--recipe-coral) url("./assets/paper-grain.svg") center / 150px 150px !important;
  box-shadow: none !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  transform: rotate(-1deg) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-stage-chip svg {
  width: 13px !important;
  height: 13px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover .icon {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  border: 1px dashed rgba(218, 91, 63, .56) !important;
  border-radius: 50% !important;
  color: var(--recipe-ink) !important;
  background: rgba(255, 250, 239, .94) url("./assets/paper-grain.svg") center / 140px 140px !important;
  box-shadow: 0 3px 7px rgba(82, 56, 36, .12) !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  transform: rotate(2deg) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover-copy {
  position: relative !important;
  z-index: 7 !important;
  width: 62% !important;
  margin-top: 26px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover h2 {
  margin: 0 !important;
  overflow: visible !important;
  color: var(--recipe-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 38px !important;
  font-weight: 400 !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover p {
  margin: 11px 0 0 !important;
  color: #6c4c3a !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-reference-art {
  position: absolute !important;
  z-index: 6 !important;
  right: 23px !important;
  bottom: 16px !important;
  width: 142px !important;
  height: 142px !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(1.03) contrast(1.04) drop-shadow(0 5px 7px rgba(82, 55, 31, .13)) !important;
  mix-blend-mode: normal !important;
  transform: rotate(-1deg) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-utensil-art {
  display: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body {
  min-height: 0 !important;
  padding: 18px 20px 26px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background:
    linear-gradient(rgba(255, 251, 241, .74), rgba(255, 250, 239, .86)),
    url("./assets/paper-grain.svg") center / 220px 220px !important;
  scrollbar-width: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body::-webkit-scrollbar {
  display: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item {
  min-width: 0 !important;
  min-height: 68px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  padding: 8px 4px !important;
  border: 1px dashed rgba(205, 174, 126, .7) !important;
  border-radius: 15px 12px 14px 11px / 12px 15px 11px 14px !important;
  color: var(--recipe-ink) !important;
  background: rgba(255, 250, 237, .93) url("./assets/paper-grain.svg") center / 140px 140px !important;
  box-shadow: 0 3px 8px rgba(95, 70, 43, .08) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item + .recipe-meta-item {
  border-left: 1px dashed rgba(205, 174, 126, .7) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item svg {
  margin: 0 0 3px !important;
  color: var(--recipe-coral-deep) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item strong {
  max-width: 100% !important;
  color: var(--recipe-ink) !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-align: center !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-meta-item span {
  margin-top: 3px !important;
  color: #8b7566 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .warning {
  margin-top: 14px !important;
  padding: 11px 12px !important;
  border: 1px dashed rgba(221, 112, 84, .5) !important;
  border-radius: 14px 11px 13px 10px !important;
  color: var(--recipe-ink) !important;
  background: rgba(250, 225, 216, .72) url("./assets/paper-grain.svg") center / 130px 130px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block {
  margin-top: 20px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block-head {
  min-height: 30px !important;
  align-items: flex-end !important;
  margin: 0 0 10px !important;
  padding: 0 2px 7px !important;
  border: 0 !important;
  border-bottom: 1px dashed rgba(210, 174, 123, .65) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block h3 {
  position: relative !important;
  color: var(--recipe-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block h3::after {
  content: "" !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -9px !important;
  left: 0 !important;
  height: 3px !important;
  background: var(--recipe-coral) !important;
  clip-path: polygon(0 45%, 17% 24%, 35% 48%, 54% 28%, 73% 56%, 100% 38%, 99% 72%, 72% 87%, 51% 69%, 30% 86%, 11% 67%, 0 82%) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-block-head span {
  color: #8b7566 !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-list {
  display: grid !important;
  gap: 7px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row {
  min-height: 42px !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 9px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(222, 199, 160, .7) !important;
  border-radius: 13px 10px 12px 9px / 10px 13px 9px 12px !important;
  color: var(--recipe-ink) !important;
  background: rgba(255, 251, 242, .9) url("./assets/paper-grain.svg") center / 140px 140px !important;
  box-shadow: 0 2px 7px rgba(90, 64, 37, .07) !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row + .ingredient-row {
  border-top: 1px solid rgba(222, 199, 160, .7) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-check {
  width: 21px !important;
  height: 21px !important;
  border: 1px dashed rgba(210, 111, 79, .58) !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: rgba(255, 250, 239, .9) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row.checked {
  color: #697a63 !important;
  background: var(--recipe-mint) url("./assets/paper-grain.svg") center / 140px 140px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .ingredient-row.checked .ingredient-check {
  border-color: #73a080 !important;
  color: #fffaf0 !important;
  background: #73a080 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-list,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-list {
  gap: 8px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-chip,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-chip {
  min-height: 34px !important;
  padding: 8px 12px !important;
  border: 1px solid rgba(220, 190, 143, .74) !important;
  border-radius: 999px !important;
  color: var(--recipe-ink) !important;
  background: rgba(255, 249, 232, .95) url("./assets/paper-grain.svg") center / 120px 120px !important;
  box-shadow: 0 2px 6px rgba(86, 61, 35, .07) !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tool-chip svg {
  color: #7199b8 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .tag-chip {
  border-color: rgba(222, 117, 88, .38) !important;
  color: #8f4f3f !important;
  background: rgba(250, 226, 216, .78) url("./assets/paper-grain.svg") center / 120px 120px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-list {
  display: grid !important;
  gap: 9px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row {
  min-height: 62px !important;
  grid-template-columns: 39px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(222, 199, 160, .68) !important;
  border-radius: 15px 11px 14px 10px / 11px 15px 10px 14px !important;
  background: rgba(255, 251, 242, .92) url("./assets/paper-grain.svg") center / 150px 150px !important;
  box-shadow: 0 3px 8px rgba(90, 64, 37, .07) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row + .step-row {
  border-top: 1px solid rgba(222, 199, 160, .68) !important;
  background: rgba(255, 251, 242, .92) url("./assets/paper-grain.svg") center / 150px 150px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-number {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 50% 47% 52% 48% / 49% 53% 47% 51% !important;
  color: #fffaf0 !important;
  background: var(--recipe-coral) url("./assets/paper-grain.svg") center / 90px 90px !important;
  box-shadow: none !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .step-row p {
  padding: 0 !important;
  color: var(--recipe-ink) !important;
  font-family: "Bap Gaegu Full", cursive !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions {
  position: sticky !important;
  z-index: 20 !important;
  bottom: -26px !important;
  display: grid !important;
  gap: 9px !important;
  margin: 24px -20px -26px !important;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px dashed rgba(210, 174, 123, .62) !important;
  background: rgba(255, 250, 239, .98) url("./assets/paper-grain.svg") center / 180px 180px !important;
  box-shadow: 0 -5px 13px rgba(83, 58, 34, .08) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary {
  min-height: 52px !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(3% 10%, 15% 4%, 29% 9%, 44% 3%, 59% 9%, 74% 3%, 96% 9%, 100% 31%, 97% 53%, 100% 86%, 77% 94%, 60% 89%, 44% 96%, 27% 90%, 4% 95%, 0 72%, 3% 47%, 0 25%) !important;
  color: #fffaf0 !important;
  background: var(--recipe-coral) url("./assets/paper-grain.svg") center / 150px 150px !important;
  box-shadow: none !important;
  font-family: "Bap Gaegu Full", cursive !important;
  transform: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary {
  min-height: 42px !important;
  margin-top: 0 !important;
  border: 1px dashed rgba(210, 111, 79, .55) !important;
  border-radius: 14px !important;
  clip-path: none !important;
  color: #795343 !important;
  background: rgba(255, 250, 239, .9) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary svg,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary svg {
  color: currentColor !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary > span {
  font-size: 18px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .secondary > span {
  font-size: 15px !important;
  font-weight: 700 !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture {
  margin-top: 22px !important;
  padding: 16px !important;
  border: 1px dashed rgba(210, 174, 123, .68) !important;
  border-radius: 17px 13px 16px 12px !important;
  color: var(--recipe-ink) !important;
  background: rgba(255, 251, 242, .94) url("./assets/paper-grain.svg") center / 160px 160px !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > div > span {
  color: var(--recipe-coral-deep) !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture h3,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture p {
  color: var(--recipe-ink) !important;
}

@media (max-width: 370px) {
  html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover {
    min-height: 212px !important;
    padding-inline: 19px !important;
  }

  html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-cover h2 {
    font-size: 34px !important;
  }

  html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-reference-art {
    right: 14px !important;
    width: 128px !important;
    height: 128px !important;
  }

  html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .recipe-body {
    padding-inline: 16px !important;
  }

  html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions {
    margin-inline: -16px !important;
    padding-inline: 16px !important;
  }
}

/* ===== mobile-viewport-edge-v61.css ===== */
/* Mobile viewport edge continuity — 2026-08-04.
 *
 * The home poster used to be scaled as one fixed 430 × 853 canvas and then
 * vertically centred. On a narrower/taller phone this left visible bands
 * above and below the app. Let the mobile frame own the real viewport
 * instead, while retaining the existing poster composition inside it.
 */

@media (max-width: 560px) {
  html.home-scroll-lock,
  body.home-scroll-lock,
  body.home-scroll-lock #app,
  #app .page.mono-preview-page:has(> .phone.bapstage-home-v2) {
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: #fffaf0 !important;
    background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 430px 853px !important;
  }

  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav) {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    grid-template-rows: 0 minmax(0, 1fr) 80px !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    transform: none !important;
    transform-origin: center top !important;
  }

  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  /* Use one compact navigation height on every primary mobile page. The
     browser already accounts for its own viewport chrome, so adding the
     safe-area value here created the long empty strip seen on iPhone. */
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
    grid-template-rows: 0 minmax(0, 1fr) 80px !important;
  }

  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 6px 11px 4px !important;
  }

  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    grid-template-rows: 47px 15px !important;
    padding: 0 0 2px !important;
  }
}

/* ===== mobile-overscroll-paper-v68.css ===== */
/* Mobile scroll-edge continuity — 2026-08-04.
 *
 * iOS exposes the background behind the inner app scroller during elastic
 * over-scroll. Keep that entire stack on the approved watercolor paper so a
 * plain band cannot appear above the header or below the last card.
 */

@media (max-width: 560px) {
  html.primary-scroll-lock,
  body.primary-scroll-lock,
  body.primary-scroll-lock #app,
  body.primary-scroll-lock #app > .page.mono-preview-page {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background-color: #fffaf0 !important;
    background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: 430px 853px !important;
  }

  body.primary-scroll-lock {
    position: fixed !important;
    inset: 0 !important;
  }

  body.primary-scroll-lock #app > .page.mono-preview-page
    > .phone:has(> .unified-reference-nav),
  body.primary-scroll-lock #app > .page.mono-preview-page
    > .phone:has(> .unified-reference-nav)
    > .content {
    background-color: #fffaf0 !important;
    background-image: url("./assets/ui/home-reference-background-dynamic-v10.png") !important;
    background-position: center top !important;
    background-repeat: repeat-y !important;
    background-size: 430px 853px !important;
  }

  body.primary-scroll-lock #app > .page.mono-preview-page
    > .phone:has(> .unified-reference-nav)
    > .content {
    overscroll-behavior-y: none !important;
  }
}

/* ===== character-select-native-text-v71.css ===== */
/* Character selection: native text only.
 * Removed poster copy is absent from the raster asset. No paper patches,
 * cover layers, shadows, or duplicate text are used on this screen.
 */

#app .character-pick-font-overlay {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  color: #4a2d1b;
  font-family: var(--bap-support-typeface);
  font-synthesis: none;
}

#app .character-pick-note-copy {
  position: absolute;
  box-sizing: border-box;
  top: 86.25%;
  left: 17.5%;
  width: 65%;
  min-height: 5.2%;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  color: #4a2d1b;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  font-family: var(--bap-support-typeface) !important;
  font-size: clamp(12px, 3.25vw, 15px);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.42;
  letter-spacing: -.035em;
  text-align: center;
  text-shadow: none;
}

@media (max-width: 620px) {
  #app .character-select-page.character-story-page.character-poster-page {
    height: 100svh;
    min-height: 100svh;
    aspect-ratio: auto;
  }

  #app .character-pick-poster-layout {
    height: 100%;
    min-height: 100svh;
  }

  #app .character-pick-poster {
    height: 100%;
    object-fit: fill;
  }
}

@media (min-width: 621px) {
  #app .character-pick-note-copy {
    font-size: 15px;
  }
}

/* ===== character-maker-cta-clean-v74.css ===== */
/* Clean native CTA for both makers. The previous bitmap/baked button contained
   a pale horizontal seam, so the real button now uses a transparent watercolor
   brush shape and real DOM copy. */
#app .character-maker-layout .character-story-select.character-maker-select,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fffdf7 !important;
  background-color: transparent !important;
  background-image: url("./assets/ui/character-choice-coral-brush-v2.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
}

#app .character-maker-layout .character-story-select.character-maker-select::before,
#app .character-maker-layout .character-story-select.character-maker-select::after,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select::before,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > span,
#app .character-maker-layout .character-story-select.character-maker-select > svg,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > span,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > svg {
  opacity: 1 !important;
  visibility: visible !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > span,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > span {
  font-family: "Bap Gaegu Full", "Bap Gaegu", sans-serif !important;
  font-size: clamp(25px, 4.1svh, 36px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > svg,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > svg {
  position: absolute !important;
  right: 7% !important;
  width: clamp(26px, 4.2svh, 38px) !important;
  height: auto !important;
  color: currentColor !important;
  fill: none !important;
}

#app .character-maker-layout .character-story-select.character-maker-select:focus-visible,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select:focus-visible {
  outline: 2px solid rgba(74, 45, 27, 0.82) !important;
  outline-offset: 2px !important;
}

/* ===== primary-header-mobile-position-v75.css ===== */
/* Primary mobile header position v75
 * Give every main tab one shared title origin and a little more breathing
 * room below the phone status area. This file intentionally loads last so
 * page-specific legacy offsets cannot make the headers jump between tabs.
 */

:root {
  --bap-primary-header-top: 44px;
  --bap-primary-header-left: clamp(30px, 9.8vw, 42px);
  --bap-primary-header-right: clamp(20px, 6vw, 26px);
}

/* Home */
html body #app .home-reference-v4 .home-ref-brand {
  top: var(--bap-primary-header-top) !important;
  right: var(--bap-primary-header-right) !important;
  left: var(--bap-primary-header-left) !important;
}

/* Keep Home's greeting/subtitle block at the same distance below its title. */
html body #app .home-reference-v4 .home-ref-greeting {
  top: calc(var(--bap-primary-header-top) + 80px) !important;
  left: var(--bap-primary-header-left) !important;
}

/* Feed */
html body #app .feed-frame-phone .feed-reference-header {
  height: 185px !important;
  min-height: 185px !important;
  padding: var(--bap-primary-header-top) var(--bap-primary-header-right) 0
    var(--bap-primary-header-left) !important;
}

/* Home meal uses a sticky title, so its internal top padding is the shared
 * origin. The larger shell preserves room for the title and subtitle. */
html body #app .home-meal-reference-v1
  > .home-meal-ref-heading.home-meal-ref-sticky-heading {
  min-height: 151px !important;
  flex: 0 0 151px !important;
  flex-basis: 151px !important;
  padding: var(--bap-primary-header-top) var(--bap-primary-header-left) 14px !important;
}

/* Fallback for the same heading before the sticky class is attached. */
html body #app .home-meal-reference-v1 .home-meal-ref-heading:not(.home-meal-ref-sticky-heading) {
  top: var(--bap-primary-header-top) !important;
  right: var(--bap-primary-header-right) !important;
  left: var(--bap-primary-header-left) !important;
}

/* Ranking */
html body #app .ranking-reference-v4 .ranking-poster-heading {
  inset: 0 var(--bap-primary-header-right) auto var(--bap-primary-header-left) !important;
  width: auto !important;
  padding: var(--bap-primary-header-top) 0 0 !important;
}

/* Profile */
html body #app .profile-reference-v4 .profile-ref-header {
  top: var(--bap-primary-header-top) !important;
  right: var(--bap-primary-header-right) !important;
  left: var(--bap-primary-header-left) !important;
}

/* ===== home-meal-card-system-v76.css ===== */
/* Home-meal stage card system v76
 * One visual and typographic system for stages 1–100. The current stage keeps
 * its live action control, but otherwise shares the same paper, image scale,
 * copy rhythm and alignment as every locked/cleared stage.
 */

:root {
  --meal-card-width: 82%;
  --meal-card-height: 96px;
  --meal-card-paper: rgba(239, 241, 224, .99);
  --meal-card-ink: #442619;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card {
  box-sizing: border-box !important;
  width: var(--meal-card-width) !important;
  height: var(--meal-card-height) !important;
  min-height: var(--meal-card-height) !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 9px 17px 9px 13px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: polygon(2% 5%, 12% 2%, 24% 4%, 36% 1%, 48% 4%, 61% 1%, 74% 4%, 87% 1%, 98% 5%, 100% 17%, 98% 32%, 100% 48%, 98% 63%, 100% 81%, 96% 97%, 83% 99%, 69% 97%, 55% 100%, 41% 97%, 27% 100%, 13% 97%, 3% 94%, 1% 78%, 2% 61%, 0 45%, 2% 29%, 1% 13%) !important;
  color: var(--meal-card-ink) !important;
  background-color: var(--meal-card-paper) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(198, 211, 183, .08)) !important;
  background-position: center, center !important;
  background-size: 190px 190px, auto !important;
  box-shadow: inset 0 0 0 1px rgba(113, 126, 86, .1) !important;
  filter: drop-shadow(2px 4px 4px rgba(92, 66, 36, .13)) !important;
  transform: none !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card::before {
  content: none !important;
  display: none !important;
}

/* Status remains understandable through its copy/icon/action instead of
 * changing the entire card into a different component. */
html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card:is(
    .home-meal-ref-status-available,
    .home-meal-ref-status-cleared,
    .home-meal-ref-status-skipped
  ) {
  background-color: var(--meal-card-paper) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-food,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-food {
  width: 82px !important;
  height: 78px !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-food img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter: saturate(.88) contrast(.96) brightness(1.02) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy {
  min-width: 0 !important;
  align-self: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding: 0 !important;
  transform: none !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > b,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > b {
  margin: 0 !important;
  color: var(--meal-coral-deep) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
  letter-spacing: -.025em !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > strong {
  max-width: 100% !important;
  margin: 4px 0 0 !important;
  overflow: visible !important;
  color: var(--meal-card-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > small,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-stage-copy > small {
  min-height: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 7px 0 0 !important;
  color: #644b38 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.015em !important;
  white-space: nowrap !important;
}

/* Continuation route: same card height and an even vertical rhythm. */
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 var(--meal-card-height) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-continuation {
  gap: 16px !important;
}

/* Opening route (5 → 1): use the same card width, paper and copy system. */
html body #app .home-meal-reference-v1 .home-meal-ref-canvas {
  height: 626px !important;
  flex: 0 0 626px !important;
  flex-basis: 626px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-5 {
  top: 0 !important;
  right: 18px !important;
  left: auto !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-4 {
  top: 108px !important;
  right: auto !important;
  left: 18px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-3 {
  top: 216px !important;
  right: 18px !important;
  left: auto !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-milestone {
  top: 315px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-2 {
  top: 378px !important;
  right: auto !important;
  left: 18px !important;
}

/* Current stage shares the system but gets one extra row for its live CTA. */
html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 {
  top: 488px !important;
  right: 18px !important;
  left: auto !important;
  width: var(--meal-card-width) !important;
  height: 126px !important;
  min-height: 126px !important;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 10px 16px 10px 12px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 .home-meal-ref-food {
  width: 92px !important;
  height: 90px !important;
  transform: none !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 .home-meal-ref-stage-copy {
  align-self: stretch !important;
  padding-top: 4px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 .home-meal-ref-stage-copy > em {
  right: 14px !important;
  bottom: 9px !important;
  width: 135px !important;
  height: 35px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 .home-meal-ref-today {
  top: 5px !important;
  left: 14px !important;
}

/* Re-align the decorative route dots to the new, even card rhythm. */
html body #app .home-meal-reference-v1 .home-meal-ref-path::before {
  top: 45px !important;
  bottom: 24px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-path .dot-five { top: 43px !important; }
html body #app .home-meal-reference-v1 .home-meal-ref-path .dot-four { top: 151px !important; }
html body #app .home-meal-reference-v1 .home-meal-ref-path .dot-three { top: 259px !important; }
html body #app .home-meal-reference-v1 .home-meal-ref-path .dot-two { top: 421px !important; }
html body #app .home-meal-reference-v1 .home-meal-ref-path .dot-one { top: 551px !important; }

html body #app .home-meal-reference-v1 .home-meal-ref-start-sign {
  top: 526px !important;
}

@media (max-width: 390px) {
  :root {
    --meal-card-width: calc(100% - 30px);
  }

  html body #app .home-meal-reference-v1 .home-meal-ref-stage-card {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    gap: 10px !important;
    padding-right: 14px !important;
    padding-left: 11px !important;
  }

  html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-food,
  html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-continuation .home-meal-ref-food {
    width: 76px !important;
    height: 73px !important;
  }

  html body #app .home-meal-reference-v1 .home-meal-ref-stage-5,
  html body #app .home-meal-reference-v1 .home-meal-ref-stage-3,
  html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 {
    right: 15px !important;
  }

  html body #app .home-meal-reference-v1 .home-meal-ref-stage-4,
  html body #app .home-meal-reference-v1 .home-meal-ref-stage-2 {
    left: 15px !important;
  }
}

/* ===== ranking-podium-count-clean-v77.css ===== */
/* Keep the podium completion counts free from decorative marks. */
html body #app .ranking-reference-v4 .ranking-podium-leaves {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  content: none !important;
}

/* ===== recipe-clear-home-cta-v78.css ===== */
/* Match recipe-clear actions to the Home screen's coral deckle-paper CTA. */
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > .primary {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 52px !important;
  gap: 10px !important;
  padding: 0 18px 2px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  box-shadow: none !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary::before,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary::after,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > .primary::before,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > .primary::after {
  display: none !important;
  content: none !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary > span,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > .primary > span {
  color: inherit !important;
  font: inherit !important;
}

html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .sheet-actions > .primary svg,
html body #app .mono-preview-page .recipe-sheet:not(.dessert-recipe-sheet) .proof-capture > .primary svg {
  width: 22px !important;
  height: 22px !important;
  color: #fffaf0 !important;
  stroke-width: 1.8 !important;
}

/* ===== project-title-memoment-v79.css ===== */
@font-face {
  font-family: "Bap Memoment Kkukkukk";
  src:
    local("MemomentKkukkukk"),
    local("MemomentKkukkukk Regular"),
    url("./assets/fonts/MemomentKkukkukk-Regular.ttf?v=20260804-memoment-title-v79") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bap-primary-title-font: "Bap Memoment Kkukkukk", "Bap Jua", "Bap Gaegu Full", sans-serif;
}

/* Primary screen titles */
html body #app .home-reference-v4 .home-ref-brand h1,
html body #app .feed-reference-v3 .feed-reference-header h2,
html body #app .home-meal-reference-v1 .home-meal-ref-heading h2,
html body #app .ranking-reference-v4 .ranking-poster-heading h2,
html body #app .profile-reference-v4 .profile-ref-header h1,
html body #app .map-hero-top h2,
html body #app .mono-title-row h2 {
  font-family: var(--bap-primary-title-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
}

/* Character, authentication and modal titles */
html body #app .character-choice-dialog h2,
html body #app .character-confirm-dialog h2,
html body #app .watercolor-auth-page .watercolor-auth-brand h1,
html body #app .watercolor-auth-page .auth-copy h1,
html body #app .watercolor-auth-page #clean-login-heading,
html body #app .recipe-sheet .recipe-cover-copy h2,
html body #app .reward-reference h2,
html body #app .legal-app-head h2,
html body #app .account-sheet-head h2 {
  font-family: var(--bap-primary-title-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  line-height: 1.04 !important;
  letter-spacing: -.02em !important;
}

/* Major profile collection headings */
html body #app .profile-reference-v4 .profile-ref-card > header h2,
html body #app .profile-reference-v4 .profile-live-card h2,
html body #app .profile-title-sheet h2,
html body #app .profile-sticker-sheet h2,
html body #app .allergy-scan-sheet h2 {
  font-family: var(--bap-primary-title-font) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-synthesis: none !important;
  letter-spacing: -.015em !important;
}

@media (max-width: 390px) {
  html body #app .home-reference-v4 .home-ref-brand h1,
  html body #app .feed-reference-v3 .feed-reference-header h2,
  html body #app .home-meal-reference-v1 .home-meal-ref-heading h2,
  html body #app .ranking-reference-v4 .ranking-poster-heading h2,
  html body #app .profile-reference-v4 .profile-ref-header h1 {
    letter-spacing: -.035em !important;
  }
}

/* ===== project-body-omyu-v80.css ===== */
@font-face {
  font-family: "Bap Omyu Pretty";
  src:
    local("omyu pretty"),
    local("Omyu Pretty"),
    url("./assets/fonts/OmyuPretty-Regular.ttf?v=20260804-omyu-body-v80") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bap-support-font: "Bap Omyu Pretty", "Bap Gaegu Full", sans-serif;
}

/*
 * Every non-title string uses the shared Omyu face. Repeating #app keeps this
 * final project-level rule ahead of older component-level !important rules
 * without changing their font sizes, weights or spacing.
 */
html body #app#app#app,
html body #app#app#app * {
  font-family: var(--bap-support-font) !important;
  font-synthesis: none;
}

html body #app#app#app input::placeholder,
html body #app#app#app textarea::placeholder {
  font-family: var(--bap-support-font) !important;
}

/* Keep the approved Memoment face on primary and modal titles only. */
html body #app#app#app :is(
  .home-reference-v4 .home-ref-brand h1,
  .feed-reference-v3 .feed-reference-header h2,
  .home-meal-reference-v1 .home-meal-ref-heading h2,
  .ranking-reference-v4 .ranking-poster-heading h2,
  .profile-reference-v4 .profile-ref-header h1,
  .map-hero-top h2,
  .mono-title-row h2,
  .character-choice-dialog h2,
  .character-confirm-dialog h2,
  .watercolor-auth-page .watercolor-auth-brand h1,
  .watercolor-auth-page .auth-copy h1,
  .watercolor-auth-page #clean-login-heading,
  .recipe-sheet .recipe-cover-copy h2,
  .reward-reference h2,
  .legal-app-head h2,
  .account-sheet-head h2,
  .profile-reference-v4 .profile-ref-card > header h2,
  .profile-reference-v4 .profile-live-card h2,
  .profile-title-sheet h2,
  .profile-sticker-sheet h2,
  .allergy-scan-sheet h2
),
html body #app#app#app :is(
  .home-reference-v4 .home-ref-brand h1,
  .feed-reference-v3 .feed-reference-header h2,
  .home-meal-reference-v1 .home-meal-ref-heading h2,
  .ranking-reference-v4 .ranking-poster-heading h2,
  .profile-reference-v4 .profile-ref-header h1,
  .map-hero-top h2,
  .mono-title-row h2,
  .character-choice-dialog h2,
  .character-confirm-dialog h2,
  .watercolor-auth-page .watercolor-auth-brand h1,
  .watercolor-auth-page .auth-copy h1,
  .watercolor-auth-page #clean-login-heading,
  .recipe-sheet .recipe-cover-copy h2,
  .reward-reference h2,
  .legal-app-head h2,
  .account-sheet-head h2,
  .profile-reference-v4 .profile-ref-card > header h2,
  .profile-reference-v4 .profile-live-card h2,
  .profile-title-sheet h2,
  .profile-sticker-sheet h2,
  .allergy-scan-sheet h2
) * {
  font-family: var(--bap-primary-title-font) !important;
}

/* ===== character-select-smile-removed-v82.css ===== */
/* Character select: the clean poster asset has no coral smile.
 * Keep every obsolete paint-over layer out of layout so the original
 * watercolor ground and both characters' feet remain untouched. */
#app .character-pick-smile-cover,
#app .character-pick-smile-cover::before,
#app .character-pick-smile-cover::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* ===== screen-reader-only-v85.css ===== */
/* Screen-reader-only content must remain accessible without appearing visually. */
html body #app .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* ===== character-select-note-position-v87.css ===== */
/* Align the live guidance with the illustrated paper's optical center. */
#app .character-pick-note-copy {
  top: 89.9% !important;
  left: 12% !important;
  width: 65% !important;
  min-height: 4.6% !important;
}

/* ===== character-maker-native-controls-v88.css ===== */
/*
 * Character maker native controls.
 *
 * The previous screen used a full-page bitmap containing labels, swatches and
 * CTA copy. Later text changes were painted over that bitmap. This layer stops
 * using those baked words entirely: paper, controls and brush are backgrounds;
 * every label, option and button is a single live DOM element.
 */

#app .character-maker-layout,
#app .character-maker-layout.is-gobi-maker {
  background:
    linear-gradient(rgba(255, 252, 243, .78), rgba(255, 250, 238, .8)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover repeat-y,
    #fcf7e9 !important;
}

/* No baked header/player cover and no extra lower-panel sheet. */
#app .character-maker-layout .character-story-header::before,
#app .character-maker-layout.is-gobi-maker .character-story-header::before,
#app .character-maker-layout::after,
#app .character-maker-layout.is-gobi-maker::after {
  content: none !important;
  display: none !important;
}

/* The preview artwork contains only watercolor paper and motifs. */
#app .character-maker-layout .character-maker-preview::before,
#app .character-maker-layout.is-default-style .character-maker-preview::before,
#app .character-maker-layout.is-custom-style .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-preview::before,
#app .character-maker-layout.is-gobi-maker.is-custom-style .character-maker-preview::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  opacity: 1 !important;
  background: url("./assets/ui/interactive/character-maker-preview-clean-v2.png?v=20260805-native-controls-v88") center / 100% 100% no-repeat !important;
  filter: none !important;
  pointer-events: none !important;
}

#app .character-maker-layout .character-maker-figure,
#app .character-maker-layout.is-default-style .character-maker-figure,
#app .character-maker-layout.is-gobi-maker .character-maker-figure,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-figure {
  opacity: 1 !important;
}

/* One real paper panel. No white rectangles behind individual labels. */
#app .character-maker-layout .character-maker-controls,
#app .character-maker-layout.is-default-style .character-maker-controls,
#app .character-maker-layout.is-custom-style .character-maker-controls,
#app .character-maker-layout.is-gobi-maker .character-maker-controls,
#app .character-maker-layout.is-gobi-maker.is-default-style .character-maker-controls,
#app .character-maker-layout.is-gobi-maker.is-custom-style .character-maker-controls {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-rows: repeat(3, 1fr) !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 168, 111, .16) !important;
  border-radius: 20px 20px 7px 7px !important;
  background:
    linear-gradient(rgba(255, 253, 245, .9), rgba(255, 250, 238, .92)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 145% auto no-repeat,
    #fffaf0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22) !important;
}

#app .character-maker-layout .character-maker-controls fieldset,
#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 6.2% 0 24.3% !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

#app .character-maker-layout .character-maker-controls fieldset:not(:last-child)::after,
#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset:not(:last-child)::after {
  content: "" !important;
  position: absolute !important;
  right: 4.5% !important;
  bottom: 0 !important;
  left: 4.5% !important;
  height: 1px !important;
  display: block !important;
  border: 0 !important;
  background: repeating-linear-gradient(90deg, rgba(213, 162, 105, .45) 0 5px, transparent 5px 10px) !important;
  pointer-events: none !important;
}

#app .character-maker-layout .character-maker-controls fieldset::before,
#app .character-maker-layout.is-gobi-maker .character-maker-controls fieldset::before {
  content: none !important;
  display: none !important;
  background: none !important;
}

#app .character-maker-layout .character-maker-controls legend,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend {
  position: absolute !important;
  z-index: 2 !important;
  top: 50% !important;
  left: 6.2% !important;
  width: 16.5% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  overflow: visible !important;
  clip: auto !important;
  transform: translateY(-50%) !important;
  white-space: nowrap !important;
}

#app .character-maker-layout .character-maker-controls legend b,
#app .character-maker-layout .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

#app .character-maker-layout .character-maker-controls legend b,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend b {
  color: #ed7057 !important;
  font-size: clamp(18px, 4.7vw, 21px) !important;
  letter-spacing: -.02em !important;
}

#app .character-maker-layout .character-maker-controls legend span,
#app .character-maker-layout.is-gobi-maker .character-maker-controls legend span {
  color: #4a2d1b !important;
  font-size: clamp(15px, 4vw, 18px) !important;
  letter-spacing: -.035em !important;
}

/* Native hairstyle thumbnails and color swatches. */
#app .character-maker-layout .character-maker-hair-options,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1.5% !important;
}

#app .character-maker-layout .character-maker-hair-options button,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options button {
  width: min(11.4vw, 50px) !important;
  max-width: 50px !important;
  aspect-ratio: 1 !important;
  overflow: visible !important;
  background: rgba(255, 250, 238, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(119, 83, 48, .13) !important;
}

#app .character-maker-layout .character-maker-hair-options .hair-chip,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options .hair-chip {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 1 !important;
  border-radius: 50% !important;
}

#app .character-maker-layout .character-maker-hair-options .hair-chip img,
#app .character-maker-layout.is-gobi-maker .character-maker-hair-options .hair-chip img {
  position: absolute !important;
  top: -2px !important;
  left: 50% !important;
  width: 82px !important;
  max-width: none !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  object-position: top center !important;
  transform: translateX(-50%) !important;
  filter: none !important;
}

#app .character-maker-layout .character-maker-color-options,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 1.5% !important;
  transform: none !important;
}

#app .character-maker-layout .character-maker-color-options button,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button {
  width: min(10.8vw, 47px) !important;
  max-width: 47px !important;
  aspect-ratio: 1 !important;
  background: rgba(255, 252, 242, .88) !important;
  box-shadow: inset 0 0 0 1px rgba(109, 76, 47, .13) !important;
}

#app .character-maker-layout .character-maker-color-options button > span,
#app .character-maker-layout.is-gobi-maker .character-maker-color-options button > span {
  width: calc(100% - 6px) !important;
  height: calc(100% - 6px) !important;
  margin: 3px !important;
  display: block !important;
  opacity: 1 !important;
  border-radius: 50% !important;
  background:
    linear-gradient(rgba(255, 255, 255, .08), rgba(74, 45, 27, .04)),
    var(--option-color) !important;
  box-shadow: inset 0 0 0 1px rgba(74, 45, 27, .14) !important;
}

#app .character-maker-layout.is-default-style .character-maker-hair-options button.active::after,
#app .character-maker-layout.is-default-style .character-maker-color-options button.active::after,
#app .character-maker-layout.is-default-style .character-maker-hair-options button.active::before,
#app .character-maker-layout.is-default-style .character-maker-color-options button.active::before,
#app .character-maker-layout .character-maker-hair-options button.active::after,
#app .character-maker-layout .character-maker-color-options button.active::after,
#app .character-maker-layout .character-maker-hair-options button.active::before,
#app .character-maker-layout .character-maker-color-options button.active::before {
  opacity: 1 !important;
}

/* Clean brush background: no baked copy, no inner highlight rectangle. */
#app .character-maker-layout .character-story-select.character-maker-select,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #fffdf7 !important;
  background: transparent url("./assets/ui/character-maker-coral-brush-native-v1.svg?v=20260805-native-controls-v88") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
}

#app .character-maker-layout .character-story-select.character-maker-select::before,
#app .character-maker-layout .character-story-select.character-maker-select::after,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select::before,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > span,
#app .character-maker-layout .character-story-select.character-maker-select > svg,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > span,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > svg {
  opacity: 1 !important;
  visibility: visible !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > span,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > span {
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: clamp(26px, 4.1svh, 36px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
}

#app .character-maker-layout .character-story-select.character-maker-select > svg,
#app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > svg {
  position: absolute !important;
  right: 7% !important;
  width: clamp(26px, 4.2svh, 38px) !important;
  height: auto !important;
  color: currentColor !important;
  fill: none !important;
}

@media (max-width: 390px) {
  #app .character-maker-layout .character-maker-hair-options .hair-chip img,
  #app .character-maker-layout.is-gobi-maker .character-maker-hair-options .hair-chip img {
    width: 76px !important;
  }

  #app .character-maker-layout .character-story-select.character-maker-select > span,
  #app .character-maker-layout.is-gobi-maker .character-story-select.character-maker-select > span {
    font-size: clamp(25px, 3.9svh, 33px) !important;
  }
}

/* ===== home-meal-top-controls-v90.css ===== */
/* Home-meal top controls v90
 * Keep the live progress, TODAY badge and START marker as native DOM elements.
 * Their positions are separated so none of them sit under the phone status bar
 * or on top of the stage artwork.
 */

html body #app .home-meal-reference-v1
  > .home-meal-ref-heading.home-meal-ref-sticky-heading {
  min-height: 164px !important;
  flex: 0 0 164px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress {
  top: 54px !important;
}

/* A quiet paper stamp replaces the tilted coral ribbon. */
html body #app .home-meal-reference-v1
  .home-meal-ref-stage-1 .home-meal-ref-today {
  top: 10px !important;
  left: 14px !important;
  width: 62px !important;
  height: 24px !important;
  padding: 0 0 1px !important;
  border: 1.5px solid rgba(225, 100, 75, .8) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #df644d !important;
  background-color: rgba(255, 249, 234, .96) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-position: center !important;
  background-size: 110px 110px !important;
  box-shadow: 0 2px 4px rgba(104, 70, 38, .1) !important;
  transform: rotate(-2deg) !important;
}

/* Put START beside the first route point, never over the food image or under
 * the fixed navigation. */
html body #app .home-meal-reference-v1 .home-meal-ref-canvas {
  height: 626px !important;
  flex: 0 0 626px !important;
  flex-basis: 626px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-start-sign {
  top: 530px !important;
  left: 10px !important;
  right: auto !important;
  width: 58px !important;
  height: 32px !important;
  transform: rotate(-1deg) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-start-sign::after {
  top: 25px !important;
  left: 23px !important;
  height: 22px !important;
}

@media (max-width: 430px) {
  html body #app .home-meal-reference-v1
    > .home-meal-ref-heading.home-meal-ref-sticky-heading {
    min-height: 160px !important;
    flex-basis: 160px !important;
  }

  html body #app .home-meal-reference-v1
    > .home-meal-ref-sticky-heading > .home-meal-ref-progress {
    top: 52px !important;
    right: 14px !important;
  }
}

/* ===== home-meal-stage-layout-parity-v105.css ===== */
/* Opening-stage layout parity v105
 * Match stages 1–5 to the card size and left/right trail rhythm used from
 * stage 6 onward. Keep the live stage action compact inside the shared card.
 */

/* The continuation section has 15px inline padding. Subtract its weighted
 * 24.6px contribution so cards in the full-width opening canvas resolve to
 * the same rendered width. */
html body #app .home-meal-reference-v1 .home-meal-ref-canvas
  .home-meal-ref-stage-card {
  width: calc(82% - 24.6px) !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-5,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-3,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 {
  right: 15px !important;
  left: auto !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-4,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-2 {
  right: auto !important;
  left: 15px !important;
}

/* Stage 1 is the same 96px card as every other stop. Its time and action sit
 * side by side on the last row instead of creating a taller featured card. */
html body #app .home-meal-reference-v1 .home-meal-ref-stage-1 {
  height: var(--meal-card-height) !important;
  min-height: var(--meal-card-height) !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 9px 17px 9px 13px !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-1 .home-meal-ref-food {
  width: 82px !important;
  height: 78px !important;
  transform: none !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-1 .home-meal-ref-stage-copy {
  align-self: stretch !important;
  padding: 0 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)
  .home-meal-ref-stage-copy {
  align-self: stretch !important;
  padding: 0 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-1 .home-meal-ref-stage-copy > small,
html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)
  .home-meal-ref-stage-copy > small {
  position: absolute !important;
  bottom: 12px !important;
  left: 107px !important;
  margin: 0 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)
  .home-meal-ref-stage-copy > em {
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  right: 12px !important;
  bottom: 7px !important;
  width: 112px !important;
  height: 30px !important;
  gap: 7px !important;
  padding: 0 8px 1px !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 94px 94px !important;
  font-size: 15px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)
  .home-meal-ref-stage-copy > em i {
  font-size: 20px !important;
}

/* Reducing the featured card by 30px also removes the unused tail below it.
 * The first route dot remains centered on the normalized card. */
html body #app .home-meal-reference-v1 .home-meal-ref-canvas {
  height: 596px !important;
  flex: 0 0 596px !important;
  flex-basis: 596px !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-path .dot-one {
  top: 529px !important;
}

/* A card clip-path clips every descendant regardless of overflow. Move the
 * featured card's torn-paper clipping to its background layer so TODAY stays
 * complete while the visible card shape remains unchanged. */
html body #app .home-meal-reference-v1 .home-meal-ref-canvas
  .home-meal-ref-stage-card.is-featured:not(.is-continuation) {
  isolation: isolate !important;
  clip-path: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-canvas
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  display: block !important;
  clip-path: polygon(2% 5%, 12% 2%, 24% 4%, 36% 1%, 48% 4%, 61% 1%, 74% 4%, 87% 1%, 98% 5%, 100% 17%, 98% 32%, 100% 48%, 98% 63%, 100% 81%, 96% 97%, 83% 99%, 69% 97%, 55% 100%, 41% 97%, 27% 100%, 13% 97%, 3% 94%, 1% 78%, 2% 61%, 0 45%, 2% 29%, 1% 13%) !important;
  background-color: var(--meal-card-paper) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(198, 211, 183, .08)) !important;
  background-position: center, center !important;
  background-size: 190px 190px, auto !important;
  box-shadow: inset 0 0 0 1px rgba(113, 126, 86, .1) !important;
  filter: drop-shadow(2px 4px 4px rgba(92, 66, 36, .13)) !important;
  pointer-events: none !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-featured:not(.is-continuation)
  .home-meal-ref-today {
  top: 8px !important;
  left: 14px !important;
  width: 62px !important;
  height: 24px !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1.5px solid rgba(225, 100, 75, .8) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  color: #df644d !important;
  background-color: rgba(255, 249, 234, .96) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-position: center !important;
  background-size: 110px 110px !important;
  box-shadow: 0 2px 4px rgba(104, 70, 38, .1) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: none !important;
}

/* v76 switches card width math at this common phone breakpoint. Match the
 * continuation card exactly without changing the already-correct 6–100 route. */
@media (max-width: 390px) {
  html body #app .home-meal-reference-v1 .home-meal-ref-canvas
    .home-meal-ref-stage-card {
    width: calc(100% - 60px) !important;
    grid-template-columns: 76px minmax(0, 1fr) !important;
  }

  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-1 .home-meal-ref-food {
    width: 76px !important;
    height: 73px !important;
  }

  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-1 .home-meal-ref-stage-copy > small,
  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-card.is-featured:not(.is-continuation)
    .home-meal-ref-stage-copy > small {
    left: 101px !important;
  }

  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-card.is-featured:not(.is-continuation)
    .home-meal-ref-stage-copy > em {
    right: 10px !important;
    width: 104px !important;
  }
}

/* ===== ranking-podium-layout-v91.css ===== */
/* Ranking podium rebuild — one coordinate system for the full ranking poster. */

/* A short desktop preview must scroll instead of cropping ranks 6–7 and my rank. */
#app .phone.ranking-frame-phone.ranking-mono-preview > .content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}

#app .phone.ranking-frame-phone.ranking-mono-preview > .content::-webkit-scrollbar {
  display: none;
}

#app .ranking-reference-v4 {
  height: max(100%, 766px) !important;
  min-height: 766px !important;
}

/* Podium group */
#app .ranking-reference-v4 .ranking-poster-stage {
  top: 139px !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 340px !important;
  overflow: visible !important;
}

#app .ranking-reference-v4 .ranking-poster-person {
  position: absolute !important;
  top: auto !important;
  right: auto !important;
  bottom: 0 !important;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box !important;
}

#app .ranking-reference-v4 .ranking-poster-first {
  z-index: 6 !important;
  left: calc(50% - 69px) !important;
  width: 138px !important;
  height: 340px !important;
}

#app .ranking-reference-v4 .ranking-poster-second {
  z-index: 5 !important;
  left: calc(50% - 176px) !important;
  width: 122px !important;
  height: 256px !important;
}

#app .ranking-reference-v4 .ranking-poster-third {
  z-index: 5 !important;
  right: calc(50% - 176px) !important;
  left: auto !important;
  width: 122px !important;
  height: 246px !important;
}

/* Every character is centered, and its feet terminate at the podium top. */
#app .ranking-reference-v4 .ranking-character-first {
  top: auto !important;
  bottom: 137px !important;
  left: 13px !important;
  width: 112px !important;
  height: 197px !important;
}

#app .ranking-reference-v4 .ranking-character-second,
#app .ranking-reference-v4 .ranking-character-third {
  top: auto !important;
  bottom: 103px !important;
  left: 16px !important;
  width: 90px !important;
  height: 158px !important;
}

#app .ranking-reference-v4 .ranking-character-art > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  transform: none !important;
}

/* The three podium blocks share one paper treatment and one text rhythm. */
#app .ranking-reference-v4 .ranking-poster-podium {
  position: absolute !important;
  z-index: 3 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: 1px solid rgba(201, 174, 132, .2) !important;
  border-bottom: 0 !important;
  border-radius: 5px 5px 0 0 !important;
  background-color: rgba(255, 250, 240, .985) !important;
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 -2px 7px rgba(89, 63, 35, .11) !important;
}

#app .ranking-reference-v4 .ranking-poster-podium::before {
  top: -5px !important;
  right: -1px !important;
  left: -1px !important;
  height: 9px !important;
  border-radius: 55% 44% 52% 46% !important;
  background: #e5d0a2 !important;
  box-shadow: none !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium {
  height: 137px !important;
  padding: 0 !important;
}

#app .ranking-reference-v4 .ranking-poster-second .ranking-poster-podium,
#app .ranking-reference-v4 .ranking-poster-third .ranking-poster-podium {
  height: 103px !important;
  padding: 15px 4px 8px !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > strong,
#app .ranking-reference-v4 .ranking-poster-podium > b,
#app .ranking-reference-v4 .ranking-poster-podium > small {
  width: 100% !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
  white-space: nowrap !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > strong {
  margin: 0 !important;
  font-size: 34px !important;
  font-weight: 400 !important;
  line-height: .86 !important;
  letter-spacing: 0 !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > b {
  margin: 8px 0 0 !important;
  overflow: hidden !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > small {
  margin: 7px 0 0 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > strong {
  position: absolute !important;
  top: 50px !important;
  left: 0 !important;
  font-size: 40px !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b {
  position: absolute !important;
  top: 87px !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 6px !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > small {
  position: absolute !important;
  top: 113px !important;
  left: 0 !important;
  margin: 0 !important;
}

#app .ranking-reference-v4 .ranking-winner-medal {
  top: -9px !important;
  width: 42px !important;
  height: 42px !important;
  box-sizing: border-box !important;
}

/* 4–7th place card */
#app .ranking-reference-v4 .ranking-poster-lower {
  top: 492px !important;
  right: 29px !important;
  left: 29px !important;
  height: 209px !important;
  box-sizing: border-box !important;
  padding: 10px 28px 9px !important;
  overflow: hidden !important;
}

#app .ranking-reference-v4 .ranking-poster-followers {
  height: 161px !important;
  grid-template-rows: repeat(4, 40px) !important;
}

#app .ranking-reference-v4 .ranking-poster-follower {
  grid-template-columns: 35px 42px minmax(0, 1fr) 72px !important;
  gap: 7px !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
}

#app .ranking-reference-v4 .ranking-poster-follower > strong {
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app .ranking-reference-v4 .ranking-follower-medallion {
  width: 38px !important;
  height: 38px !important;
}

#app .ranking-reference-v4 .ranking-character-follower {
  top: -4px !important;
  left: -16px !important;
  width: 70px !important;
  height: 123px !important;
}

#app .ranking-reference-v4 .ranking-poster-follower > b {
  min-width: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

#app .ranking-reference-v4 .ranking-poster-follower > span {
  justify-self: end !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

/* Personal rank stays a separate card with a visible gap above the menu. */
#app .ranking-reference-v4 .ranking-poster-my-rank {
  top: 712px !important;
  right: 29px !important;
  left: 29px !important;
  width: auto !important;
  height: 48px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (max-width: 390px) {
  #app .ranking-reference-v4 .ranking-poster-second {
    left: 19px !important;
  }

  #app .ranking-reference-v4 .ranking-poster-third {
    right: 19px !important;
  }

  #app .ranking-reference-v4 .ranking-poster-lower,
  #app .ranking-reference-v4 .ranking-poster-my-rank {
    right: 18px !important;
    left: 18px !important;
  }
}

/* ===== character-select-responsive-v92.css ===== */
/* Responsive native character choice.
 * Every visible word, character and control is an independent live element.
 * The old 864 x 1821 poster is no longer stretched to fit the viewport. */

#app .character-select-shell.character-poster-shell {
  width: 100%;
  min-height: 100svh;
  height: auto;
  display: grid;
  place-items: start center;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: none;
  background: #f3f1eb;
}

#app .character-select-page.character-story-page.character-poster-page {
  width: min(430px, 100%);
  min-height: 100svh;
  height: auto;
  aspect-ratio: auto;
  padding: 0;
  overflow: visible;
  color: #442818;
  background:
    radial-gradient(circle at 12% 24%, rgba(174, 207, 231, .62) 0 5px, transparent 6px),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center top / cover repeat-y,
    #fbf7ed;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

#app .character-pick-native {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding:
    max(38px, calc(env(safe-area-inset-top) + 22px))
    clamp(18px, 5.4vw, 25px)
    max(20px, calc(env(safe-area-inset-bottom) + 12px));
  isolation: isolate;
  overflow: hidden;
}

#app .character-pick-native::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: -34px;
  bottom: -52px;
  width: 170px;
  height: 118px;
  border-radius: 58% 42% 44% 56% / 51% 55% 45% 49%;
  background: rgba(251, 216, 88, .42);
  filter: blur(11px);
}

html body #app#app#app .character-pick-native-header h1 {
  margin: 0;
  color: #3d2212;
  font-family: var(--bap-primary-title-font) !important;
  font-size: clamp(48px, 13.4vw, 60px);
  font-style: normal;
  font-weight: 400;
  font-synthesis: none;
  line-height: .98;
  letter-spacing: -.04em;
}

#app .character-pick-native-header {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: 0 clamp(9px, 2.7vw, 13px);
}

#app .character-pick-native-stage {
  position: relative;
  z-index: 1;
  min-height: 392px;
  height: clamp(392px, 50svh, 472px);
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2.4vw, 13px);
  margin-top: clamp(18px, 4.6svh, 34px);
}

#app .character-pick-ground {
  position: absolute;
  z-index: -1;
  left: 1%;
  right: 1%;
  bottom: 82px;
  height: 142px;
  border-radius: 48% 52% 50% 50% / 55% 46% 54% 45%;
  background:
    radial-gradient(ellipse at center, rgba(255, 231, 133, .62) 0 44%, rgba(255, 231, 133, .36) 66%, transparent 74%);
  filter: blur(.1px);
  transform: rotate(-1deg);
}

#app .character-pick-native-option {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  margin: 0;
  padding: 0;
  color: #442818;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#app .character-pick-native-option:focus-visible {
  outline: 3px solid #ef745f;
  outline-offset: 3px;
  border-radius: 20px;
}

#app .character-pick-native-option:active .character-pick-native-art {
  transform: translateY(2px) scale(.99);
}

#app .character-pick-native-art {
  min-height: 0;
  display: grid;
  place-items: end center;
  transition: transform 140ms ease;
}

#app .character-pick-native-art img {
  width: 100%;
  height: 100%;
  max-height: 350px;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  filter: none;
  transform: none;
}

/* Keep both characters on the same source-canvas scale. Gobi's previous
 * horizontal enlargement made the bob haircut and body read noticeably
 * larger than Jarini even though their height and foot baseline already match. */
#app .character-pick-native-gobi .character-pick-native-art img {
  transform: none;
  transform-origin: center bottom;
}

#app .character-pick-native-copy {
  min-height: 88px;
  display: grid;
  justify-items: center;
  align-content: start;
  padding-top: 8px;
}

#app .character-pick-native-copy small {
  color: #5a3926;
  font-size: clamp(13px, 3.6vw, 16px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
}

#app .character-pick-native-copy strong {
  margin-top: 3px;
  color: #3d2212;
  font-size: clamp(30px, 8.4vw, 38px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.035em;
}

#app .character-pick-native-arrow {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  margin-top: 9px;
  color: #fffaf0;
  background: #ef6f5f;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(160, 65, 48, .12);
}

#app .character-pick-native-arrow svg {
  width: 23px;
  height: 23px;
}

#app .character-pick-native-note {
  position: relative;
  z-index: 2;
  min-height: 74px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 5px;
  margin-top: 22px;
  padding: 12px 10px;
  color: #4a2d1b;
  background:
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 165% auto,
    #f7f0df;
  clip-path: polygon(1% 6%, 13% 2%, 24% 5%, 37% 1%, 49% 4%, 61% 1%, 75% 5%, 88% 2%, 99% 7%, 98% 91%, 86% 96%, 73% 93%, 60% 98%, 47% 94%, 35% 97%, 22% 93%, 10% 97%, 1% 90%);
  filter: drop-shadow(0 4px 4px rgba(91, 61, 33, .08));
}

#app .character-pick-native-note p {
  margin: 0;
  font-size: clamp(13px, 3.55vw, 16px);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -.025em;
  text-align: center;
}

#app .character-pick-note-flower {
  width: 34px;
  height: 34px;
  justify-self: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 20%, #f4c83c 0 20%, transparent 21%),
    radial-gradient(circle at 80% 50%, #f2ba35 0 20%, transparent 21%),
    radial-gradient(circle at 50% 80%, #f7d154 0 20%, transparent 21%),
    radial-gradient(circle at 20% 50%, #edb638 0 20%, transparent 21%),
    radial-gradient(circle, #d89b29 0 17%, transparent 18%);
  opacity: .82;
}

#app .character-pick-note-stitch {
  width: 42px;
  height: 42px;
  justify-self: center;
  opacity: .7;
  background:
    linear-gradient(45deg, transparent 42%, #6aa7cb 43% 48%, transparent 49% 58%, #6aa7cb 59% 64%, transparent 65%) 0 0 / 18px 18px;
}

#app .character-pick-native-logout {
  position: relative;
  z-index: 2;
  width: max-content;
  flex: 0 0 auto;
  margin: 14px auto 0;
  padding: 4px 2px 5px;
  color: #4a2d1b;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid currentColor;
  border-radius: 0;
  box-shadow: none;
  font-size: clamp(14px, 3.8vw, 17px);
  font-weight: 400;
  cursor: pointer;
}

#app .character-pick-decoration {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

#app .character-pick-decoration.decoration-rain {
  top: 26px;
  right: 28px;
  width: 72px;
  height: 74px;
  opacity: .55;
  background: repeating-linear-gradient(105deg, transparent 0 10px, #f4ce56 11px 14px, transparent 15px 24px);
  transform: rotate(8deg);
}

#app .character-pick-decoration.decoration-blue {
  left: -12px;
  top: 56%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(115, 169, 204, .45);
  filter: blur(2px);
}

@media (min-width: 621px) {
  #app .character-select-shell.character-poster-shell {
    padding: 20px;
    background: #ececea;
  }

  #app .character-select-page.character-story-page.character-poster-page {
    min-height: min(900px, calc(100svh - 40px));
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(55, 40, 26, .12);
  }

  #app .character-pick-native {
    min-height: min(900px, calc(100svh - 40px));
  }
}

@media (max-height: 740px) {
  #app .character-pick-native {
    min-height: 735px;
    padding-top: max(24px, calc(env(safe-area-inset-top) + 14px));
  }

  #app .character-pick-native-stage {
    min-height: 366px;
    height: 366px;
    margin-top: 14px;
  }

  #app .character-pick-native-art img {
    max-height: 306px;
  }

  #app .character-pick-native-note {
    margin-top: 16px;
  }
}

@media (max-width: 350px) {
  #app .character-pick-native {
    padding-right: 14px;
    padding-left: 14px;
  }

  #app .character-pick-native-header h1 {
    font-size: 45px;
  }

  #app .character-pick-native-stage {
    gap: 4px;
  }

  #app .character-pick-native-note {
    grid-template-columns: 36px minmax(0, 1fr) 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .character-pick-native-art {
    transition: none;
  }
}

/* ===== character-maker-hair-center-v93.css ===== */
/* Keep the circular controls fixed and center only Jarin's artwork inside. */
#app .character-maker-layout:not(.is-gobi-maker)
  .character-maker-hair-options
  .jarin-hair-chip
  img {
  left: calc(50% + 2px) !important;
}

/* Gobi uses the same 410×720 full-character canvas for every hairstyle.
 * Keep one shared image scale so the face and body remain the same size when
 * switching styles. Wider silhouettes such as waves and pigtails may occupy
 * more of the circle, but must not shrink the character itself. */
#app .character-maker-layout.is-gobi-maker
  .character-maker-hair-options
  .gobi-hair-chip {
  background: transparent !important;
}

#app .character-maker-layout.is-gobi-maker
  .character-maker-hair-options
  .gobi-hair-chip
  img {
  width: 68px !important;
}

@media (max-width: 390px) {
  #app .character-maker-layout.is-gobi-maker
    .character-maker-hair-options
    .gobi-hair-chip
    img {
    width: 64px !important;
  }
}

/* ===== social-proof-flow-v99.css ===== */
/*
 * Social profile and AI cooking-proof flow v99.
 * Extends the 430 x 853 feed paper system without changing the account profile.
 */

/* Feed entry points ------------------------------------------------------- */

#app .feed-frame-phone .feed-my-profile-link,
#app .feed-frame-phone .feed-my-profile-link:hover,
#app .feed-frame-phone .feed-my-profile-link:active {
  box-sizing: border-box;
  min-width: 78px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 6px 11px 7px;
  border: 1px dashed rgba(109, 75, 45, .34);
  border-radius: 14px 11px 15px 10px / 12px 15px 11px 14px;
  color: var(--feed-ink, #3b1e10);
  background-color: rgba(255, 250, 240, .82);
  background-image: url("./assets/paper-grain.svg");
  background-size: 110px 110px;
  box-shadow: 1px 2px 3px rgba(87, 59, 31, .08);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 850;
  line-height: 1;
  text-decoration: none;
  transform: rotate(.35deg);
  cursor: pointer;
}

#app .feed-frame-phone .feed-my-profile-link svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--feed-coral-deep, #dc5e47);
}

#app .feed-frame-phone .feed-reference-controls .feed-my-profile-link {
  margin-left: auto;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link,
#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link:hover,
#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link:active {
  box-sizing: border-box;
  position: relative;
  grid-column: 1 / 3;
  min-width: 0;
  min-height: 57px;
  display: grid;
  grid-template-columns: 59px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 13px;
  color: inherit;
  background: transparent;
  box-shadow: none;
  text-align: left;
  transform: none;
  cursor: pointer;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link > div {
  min-width: 0;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link::after {
  content: "›";
  position: absolute;
  right: 2px;
  color: rgba(59, 30, 16, .44);
  font-family: "Pretendard", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-author:has(> em) .feed-author-link::after {
  display: none;
}

/* Shared social page canvas --------------------------------------------- */

#app .feed-frame-phone .social-profile-screen,
#app .feed-frame-phone .social-list-screen {
  --social-paper: var(--feed-paper, #fbf5e9);
  --social-card: var(--feed-paper-card, #fffaf0);
  --social-ink: var(--feed-ink, #3b1e10);
  --social-coral: var(--feed-coral, #e8755d);
  --social-coral-deep: var(--feed-coral-deep, #dc5e47);
  --social-blue: var(--feed-blue, #8eb8d7);
  --social-yellow: var(--feed-yellow, #efbb22);
  --social-sage: var(--feed-sage, #89a35c);
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 0 0 34px;
  overflow-x: hidden;
  color: var(--social-ink);
  background-color: var(--social-paper);
  background-image:
    radial-gradient(circle at 3% 28%, rgba(137, 163, 92, .62) 0 3px, transparent 3.5px),
    radial-gradient(circle at 97% 71%, rgba(232, 117, 93, .52) 0 3px, transparent 3.5px),
    url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 112px 112px;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  isolation: isolate;
}

#app .feed-frame-phone .social-profile-screen *,
#app .feed-frame-phone .social-list-screen * {
  box-sizing: border-box;
}

#app .feed-frame-phone .social-profile-screen::before,
#app .feed-frame-phone .social-list-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -72px;
  left: -105px;
  width: 300px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(246, 214, 94, .52), transparent 70%);
  transform: rotate(-9deg);
  pointer-events: none;
}

/* Social top bar --------------------------------------------------------- */

#app .feed-frame-phone .social-topbar {
  position: sticky;
  z-index: 15;
  top: 0;
  min-height: 68px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: max(9px, env(safe-area-inset-top)) 17px 9px;
  border-bottom: 1px dashed rgba(137, 99, 58, .28);
  background-color: rgba(251, 245, 233, .96);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 112px 112px;
  box-shadow: 0 2px 8px rgba(72, 49, 27, .06);
}

#app .feed-frame-phone .social-topbar h1,
#app .feed-frame-phone .social-topbar h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--social-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-topbar > button,
#app .feed-frame-phone .social-topbar > a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(91, 59, 34, .18);
  border-radius: 50% 47% 51% 45%;
  color: var(--social-ink);
  background: rgba(255, 250, 240, .88);
  box-shadow: 1px 2px 3px rgba(87, 59, 31, .07);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  transform: rotate(-1deg);
  cursor: pointer;
}

#app .feed-frame-phone .social-topbar > :last-child:not(button):not(a) {
  width: 40px;
  height: 1px;
}

#app .feed-frame-phone .social-topbar svg {
  width: 21px;
  height: 21px;
}

/* Profile hero ----------------------------------------------------------- */

#app .feed-frame-phone .social-profile-hero {
  position: relative;
  z-index: 1;
  margin: 18px 18px 14px;
  padding: 18px 16px 16px;
  overflow: hidden;
  border: 1px solid rgba(194, 164, 119, .38);
  border-radius: 25px 20px 27px 22px / 21px 26px 20px 25px;
  background-color: rgba(255, 250, 240, .96);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 112px 112px;
  box-shadow: 2px 5px 9px rgba(90, 64, 34, .12);
}

#app .feed-frame-phone .social-profile-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -52px;
  right: -54px;
  width: 160px;
  height: 145px;
  border-radius: 50%;
  background: rgba(142, 184, 215, .23);
  transform: rotate(14deg);
}

#app .feed-frame-phone .social-profile-hero > :first-child:not(.social-stats):not(.social-profile-actions) {
  min-width: 0;
}

#app .feed-frame-phone .social-avatar {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 92px;
  display: block;
  overflow: hidden;
  border: 3px solid rgba(255, 250, 240, .96);
  border-radius: 50% 47% 52% 46%;
  background: rgba(246, 214, 94, .48);
  box-shadow:
    0 0 0 2px var(--social-coral),
    2px 4px 6px rgba(81, 54, 28, .15);
  transform: rotate(-1.5deg);
}

#app .feed-frame-phone .social-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

#app .feed-frame-phone .social-avatar.feed-avatar-character img,
#app .feed-frame-phone .social-avatar .feed-avatar-character img {
  object-fit: contain;
  object-position: center bottom;
}

/* Match the close head-and-shoulders crop used by feed cards. The source
 * artwork is a 410×720 full-body canvas, so fitting it inside the profile
 * circle makes the character tiny. Keep the artwork scale consistent with the
 * feed avatar and optically center Jarin's slightly left-weighted painting. */
#app .feed-frame-phone
  .social-avatar.feed-avatar-character
  > img {
  inset: auto !important;
  top: -3.5% !important;
  right: auto !important;
  bottom: auto !important;
  left: 50% !important;
  width: 109% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  transform: translateX(-50%) !important;
}

#app .feed-frame-phone
  .social-avatar.feed-avatar-character.feed-avatar-jarin
  > img {
  left: 54% !important;
}

#app .feed-frame-phone
  .social-avatar.feed-avatar-character.feed-avatar-gobi
  > img {
  top: -13.9% !important;
}

#app .feed-frame-phone .social-profile-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 4px;
}

#app .feed-frame-phone .social-profile-copy > small,
#app .feed-frame-phone .social-profile-copy > span {
  color: var(--social-coral-deep);
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: .08em;
}

#app .feed-frame-phone .social-profile-copy h2,
#app .feed-frame-phone .social-profile-copy h1 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--social-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-profile-copy p {
  margin: 2px 0 0;
  color: rgba(59, 30, 16, .76);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#app .feed-frame-phone .social-profile-hero > .social-profile-copy,
#app .feed-frame-phone .social-profile-hero > .social-avatar + .social-profile-copy {
  margin-left: 108px;
  min-height: 92px;
}

#app .feed-frame-phone .social-profile-hero > .social-avatar {
  position: absolute;
  top: 18px;
  left: 17px;
}

/* Social counts and actions --------------------------------------------- */

#app .feed-frame-phone .social-stats {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 16px 0 0;
  padding: 11px 4px 9px;
  border-top: 1px dashed rgba(137, 99, 58, .26);
  border-bottom: 1px dashed rgba(137, 99, 58, .26);
}

#app .feed-frame-phone .social-stats > button,
#app .feed-frame-phone .social-stats > a,
#app .feed-frame-phone .social-stats > div {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  border-right: 1px dotted rgba(126, 92, 58, .24);
  border-radius: 0;
  color: var(--social-ink);
  background: transparent;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
  transform: none;
  cursor: pointer;
}

#app .feed-frame-phone .social-stats > :last-child {
  border-right: 0;
}

#app .feed-frame-phone .social-stats strong,
#app .feed-frame-phone .social-stats b {
  color: var(--social-coral-deep);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: .95;
}

#app .feed-frame-phone .social-stats span,
#app .feed-frame-phone .social-stats small {
  overflow: hidden;
  color: rgba(59, 30, 16, .72);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-profile-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px;
  margin-top: 13px;
}

#app .feed-frame-phone .social-profile-actions button,
#app .feed-frame-phone .social-profile-actions a {
  min-width: 0;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 13px 9px;
  border: 1px solid rgba(185, 92, 71, .38);
  border-radius: 15px 12px 16px 11px / 12px 16px 11px 15px;
  color: #fffaf0;
  background-color: var(--social-coral);
  background-image: url("./assets/paper-grain.svg");
  background-size: 120px 120px;
  box-shadow: 1px 3px 4px rgba(138, 67, 49, .14);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transform: rotate(-.25deg);
  cursor: pointer;
}

#app .feed-frame-phone .social-profile-actions button.is-following,
#app .feed-frame-phone .social-profile-actions button[aria-pressed="true"],
#app .feed-frame-phone .social-profile-actions .secondary {
  border-color: rgba(92, 125, 70, .35);
  color: var(--social-ink);
  background-color: rgba(220, 235, 216, .92);
  box-shadow: 1px 3px 4px rgba(76, 104, 63, .1);
}

/* Social post grid ------------------------------------------------------- */

#app .feed-frame-phone .social-post-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 18px;
  padding: 12px 0 24px;
  border-top: 1px dashed rgba(137, 99, 58, .25);
}

#app .feed-frame-phone .social-post-tile,
#app .feed-frame-phone .social-post-tile:hover,
#app .feed-frame-phone .social-post-tile:active {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 3px;
  border: 1px solid rgba(194, 164, 119, .34);
  border-radius: 10px 7px 11px 8px;
  color: var(--social-ink);
  background: var(--social-card);
  box-shadow: 1px 2px 3px rgba(82, 57, 31, .08);
  text-decoration: none;
  transform: none;
  cursor: pointer;
}

#app .feed-frame-phone .social-post-tile:nth-child(3n + 2) {
  transform: rotate(.45deg);
}

#app .feed-frame-phone .social-post-tile:nth-child(3n) {
  transform: rotate(-.35deg);
}

#app .feed-frame-phone .social-post-tile img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 7px 5px 8px 6px;
  background: #eee2cc;
  object-fit: cover;
}

#app .feed-frame-phone .social-post-tile > span,
#app .feed-frame-phone .social-post-tile > em {
  position: absolute;
  right: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  padding: 4px 6px;
  border-radius: 999px;
  color: #fffaf0;
  background: rgba(59, 30, 16, .72);
  font-size: 8px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-empty {
  min-height: 235px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  margin: 12px 18px 24px;
  padding: 28px 22px;
  border: 1px dashed rgba(137, 99, 58, .3);
  border-radius: 23px 19px 25px 20px;
  color: var(--social-ink);
  background: rgba(255, 250, 240, .78);
  text-align: center;
}

#app .feed-frame-phone .social-empty > span,
#app .feed-frame-phone .social-empty > i {
  color: var(--social-coral-deep);
  font-size: 28px;
  font-style: normal;
}

#app .feed-frame-phone .social-empty strong {
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 19px;
}

#app .feed-frame-phone .social-empty p {
  max-width: 260px;
  margin: 0;
  color: rgba(59, 30, 16, .68);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

/* Followers and following lists ----------------------------------------- */

#app .feed-frame-phone .social-user-list {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 15px 17px 30px;
  list-style: none;
}

#app .feed-frame-phone .social-user-row {
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 9px 10px 9px 9px;
  border: 1px solid rgba(194, 164, 119, .34);
  border-radius: 18px 15px 20px 14px / 15px 20px 14px 18px;
  background-color: rgba(255, 250, 240, .92);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 112px 112px;
  box-shadow: 1px 3px 5px rgba(84, 58, 31, .08);
}

#app .feed-frame-phone .social-user-row:nth-child(even) {
  border-radius: 15px 20px 14px 19px / 19px 14px 20px 15px;
}

#app .feed-frame-phone .social-user-main,
#app .feed-frame-phone .social-user-main:hover,
#app .feed-frame-phone .social-user-main:active {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  color: var(--social-ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
  text-decoration: none;
  transform: none;
  cursor: pointer;
}

#app .feed-frame-phone .social-user-main .social-avatar {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
  border-width: 2px;
  box-shadow: 0 0 0 1.5px var(--social-blue);
}

#app .feed-frame-phone .social-user-main > div {
  min-width: 0;
}

#app .feed-frame-phone .social-user-main strong,
#app .feed-frame-phone .social-user-main b {
  display: block;
  overflow: hidden;
  color: var(--social-ink);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-user-main span,
#app .feed-frame-phone .social-user-main small,
#app .feed-frame-phone .social-user-main p {
  display: block;
  overflow: hidden;
  margin: 4px 0 0;
  color: rgba(59, 30, 16, .64);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .feed-frame-phone .social-follow-button,
#app .feed-frame-phone .social-follow-button:hover,
#app .feed-frame-phone .social-follow-button:active {
  min-width: 68px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px 10px 7px;
  border: 1px solid rgba(185, 92, 71, .38);
  border-radius: 13px 10px 14px 9px;
  color: #fffaf0;
  background-color: var(--social-coral);
  background-image: url("./assets/paper-grain.svg");
  background-size: 100px 100px;
  box-shadow: none;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(.25deg);
  cursor: pointer;
}

#app .feed-frame-phone .social-follow-button.is-following,
#app .feed-frame-phone .social-follow-button[aria-pressed="true"] {
  border-color: rgba(94, 127, 73, .36);
  color: var(--social-ink);
  background-color: rgba(220, 235, 216, .94);
}

/* AI proof flow ---------------------------------------------------------- */

#app .mono-preview-page .recipe-sheet .proof-capture {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

#app .mono-preview-page .recipe-sheet .proof-capture > * {
  min-width: 0;
  max-width: 100%;
}

#app .mono-preview-page .recipe-sheet .proof-privacy-note {
  margin: -2px 1px 0;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(59, 32, 20, .68);
  background: rgba(142, 184, 215, .14);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.5;
}

#app .mono-preview-page .recipe-sheet .proof-privacy-note a {
  color: #3f718e;
  font-weight: 900;
  text-underline-offset: 2px;
}

#app .mono-preview-page .recipe-sheet .proof-step {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--recipe-ink, #3b2014);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

#app .mono-preview-page .recipe-sheet .proof-step > span:first-child,
#app .mono-preview-page .recipe-sheet .proof-step > b:first-child {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fffaf0;
  background: var(--recipe-coral, #ed7158);
  font-family: "Pretendard", sans-serif;
  font-size: 10px;
  line-height: 1;
}

#app .mono-preview-page .recipe-sheet .proof-preview-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(174, 130, 82, .34);
  border-radius: 15px 11px 16px 12px;
  background: #eee3cf;
  box-shadow: 1px 3px 5px rgba(77, 54, 32, .1);
}

#app .mono-preview-page .recipe-sheet .proof-preview-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 5px solid rgba(255, 250, 240, .48);
  border-radius: inherit;
  pointer-events: none;
}

#app .mono-preview-page .recipe-sheet .proof-preview-wrap img,
#app .mono-preview-page .recipe-sheet .proof-preview-wrap .proof-preview {
  width: 100%;
  height: 100%;
  max-height: none;
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: cover;
}

#app .mono-preview-page .recipe-sheet .proof-ai-state {
  position: relative;
  min-width: 0;
  min-height: 66px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 12px 13px;
  border: 1px dashed rgba(105, 120, 91, .38);
  border-radius: 15px 12px 16px 11px;
  color: var(--recipe-ink, #3b2014);
  background-color: rgba(220, 235, 216, .62);
  background-image: url("./assets/paper-grain.svg");
  background-size: 130px 130px;
}

#app .mono-preview-page .recipe-sheet .proof-ai-state.is-loading {
  border-color: rgba(91, 137, 169, .42);
  background-color: rgba(220, 234, 242, .76);
}

#app .mono-preview-page .recipe-sheet .proof-ai-state.is-match {
  border-color: rgba(92, 132, 70, .52);
  background-color: rgba(220, 235, 216, .88);
}

#app .mono-preview-page .recipe-sheet .proof-ai-state.is-reject {
  border-color: rgba(206, 143, 47, .52);
  background-color: rgba(249, 231, 158, .66);
}

#app .mono-preview-page .recipe-sheet .proof-ai-state.is-error {
  border-color: rgba(196, 76, 57, .46);
  background-color: rgba(246, 215, 208, .72);
}

#app .mono-preview-page .recipe-sheet .proof-ai-state > div,
#app .mono-preview-page .recipe-sheet .proof-ai-state > span:last-child {
  min-width: 0;
}

#app .mono-preview-page .recipe-sheet .proof-ai-state strong,
#app .mono-preview-page .recipe-sheet .proof-ai-state b {
  display: block;
  margin: 0;
  color: inherit;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

#app .mono-preview-page .recipe-sheet .proof-ai-state p,
#app .mono-preview-page .recipe-sheet .proof-ai-state small {
  display: block;
  margin: 4px 0 0;
  color: rgba(59, 32, 20, .7);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

#app .mono-preview-page .recipe-sheet .proof-spinner {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: block;
  border: 3px solid rgba(91, 137, 169, .24);
  border-top-color: #5788aa;
  border-radius: 50%;
  animation: bapstage-proof-spin .82s linear infinite;
}

@keyframes bapstage-proof-spin {
  to { transform: rotate(360deg); }
}

#app .mono-preview-page .recipe-sheet .proof-result-food {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px 7px 5px;
  overflow: hidden;
  border-radius: 999px;
  color: #466137;
  background: rgba(255, 250, 240, .76);
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .mono-preview-page .recipe-sheet .proof-share-options {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

#app .mono-preview-page .recipe-sheet .proof-share-option {
  position: relative;
  min-width: 0;
  min-height: 68px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  margin: 0;
  padding: 9px 7px;
  border: 1px dashed rgba(144, 104, 66, .34);
  border-radius: 14px 11px 15px 10px;
  color: var(--recipe-ink, #3b2014);
  background: rgba(255, 250, 240, .78);
  box-shadow: none;
  text-align: center;
  cursor: pointer;
}

#app .mono-preview-page .recipe-sheet .proof-share-option:has(input:checked),
#app .mono-preview-page .recipe-sheet .proof-share-option.is-checked,
#app .mono-preview-page .recipe-sheet .proof-share-option[aria-checked="true"] {
  border-color: var(--recipe-coral, #ed7158);
  color: var(--recipe-coral-deep, #d95740);
  background: rgba(246, 215, 94, .28);
  box-shadow: inset 0 0 0 1px rgba(237, 113, 88, .16);
}

/* Restore radio semantics after the legacy .proof-capture input rule. */
#app .mono-preview-page .recipe-sheet .proof-share-option input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  display: block;
  overflow: hidden;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#app .mono-preview-page .recipe-sheet .proof-share-option strong,
#app .mono-preview-page .recipe-sheet .proof-share-option b {
  display: block;
  overflow: hidden;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#app .mono-preview-page .recipe-sheet .proof-share-option span,
#app .mono-preview-page .recipe-sheet .proof-share-option small {
  display: block;
  color: rgba(59, 32, 20, .66);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#app .mono-preview-page .recipe-sheet .proof-actions {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin: 2px 0 0;
}

#app .mono-preview-page .recipe-sheet .proof-actions button {
  min-width: 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 8px 12px 9px;
  border: 1px dashed rgba(194, 91, 69, .42);
  border-radius: 15px 12px 16px 11px;
  color: #fffaf0;
  background-color: var(--recipe-coral, #ed7158);
  background-image: url("./assets/paper-grain.svg");
  background-size: 120px 120px;
  box-shadow: 1px 3px 4px rgba(138, 67, 49, .12);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  transform: none;
  cursor: pointer;
}

#app .mono-preview-page .recipe-sheet .proof-actions button.secondary,
#app .mono-preview-page .recipe-sheet .proof-actions button:last-child:not(:first-child) {
  border-color: rgba(137, 99, 58, .34);
  color: var(--recipe-ink, #3b2014);
  background-color: rgba(255, 250, 240, .9);
}

#app .mono-preview-page .recipe-sheet .proof-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#app .mono-preview-page .recipe-sheet .proof-error {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #c84c39;
  border-radius: 4px 11px 11px 4px;
  color: #8f3327;
  background: rgba(246, 215, 208, .66);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Interaction and accessibility ----------------------------------------- */

#app .feed-frame-phone .feed-my-profile-link:focus-visible,
#app .feed-frame-phone .feed-author-link:focus-visible,
#app .feed-frame-phone .social-topbar > button:focus-visible,
#app .feed-frame-phone .social-topbar > a:focus-visible,
#app .feed-frame-phone .social-stats > button:focus-visible,
#app .feed-frame-phone .social-stats > a:focus-visible,
#app .feed-frame-phone .social-profile-actions button:focus-visible,
#app .feed-frame-phone .social-profile-actions a:focus-visible,
#app .feed-frame-phone .social-post-tile:focus-visible,
#app .feed-frame-phone .social-user-main:focus-visible,
#app .feed-frame-phone .social-follow-button:focus-visible,
#app .mono-preview-page .recipe-sheet .proof-share-option:has(input:focus-visible),
#app .mono-preview-page .recipe-sheet .proof-actions button:focus-visible {
  outline: 3px dashed var(--feed-coral-deep, var(--recipe-coral-deep, #d95740));
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #app .feed-frame-phone .feed-my-profile-link:hover,
  #app .feed-frame-phone .social-profile-actions button:hover,
  #app .feed-frame-phone .social-follow-button:hover,
  #app .mono-preview-page .recipe-sheet .proof-actions button:hover {
    filter: saturate(1.04) brightness(.99);
  }

  #app .feed-frame-phone .feed-author-link:hover,
  #app .feed-frame-phone .social-user-main:hover,
  #app .feed-frame-phone .social-stats > button:hover,
  #app .feed-frame-phone .social-stats > a:hover {
    background: rgba(232, 117, 93, .07);
  }

  #app .feed-frame-phone .social-post-tile:hover {
    z-index: 2;
    box-shadow: 2px 5px 9px rgba(82, 57, 31, .15);
  }
}

@media (max-width: 370px) {
  #app .feed-frame-phone .social-profile-hero {
    margin-inline: 13px;
    padding-inline: 13px;
  }

  #app .feed-frame-phone .social-avatar {
    width: 82px;
    height: 82px;
    flex-basis: 82px;
  }

  #app .feed-frame-phone .social-profile-hero > .social-avatar {
    left: 14px;
  }

  #app .feed-frame-phone .social-profile-hero > .social-profile-copy,
  #app .feed-frame-phone .social-profile-hero > .social-avatar + .social-profile-copy {
    min-height: 82px;
    margin-left: 94px;
  }

  #app .feed-frame-phone .social-profile-copy h1,
  #app .feed-frame-phone .social-profile-copy h2 {
    font-size: 21px;
  }

  #app .feed-frame-phone .social-post-grid {
    margin-inline: 13px;
  }

  #app .feed-frame-phone .social-user-list {
    padding-inline: 12px;
  }

  #app .feed-frame-phone .social-follow-button {
    min-width: 61px;
    padding-inline: 8px;
  }

  #app .mono-preview-page .recipe-sheet .proof-share-options,
  #app .mono-preview-page .recipe-sheet .proof-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .mono-preview-page .recipe-sheet .proof-spinner {
    animation-duration: 1.8s;
  }

  #app .feed-frame-phone .feed-my-profile-link,
  #app .feed-frame-phone .social-profile-actions button,
  #app .feed-frame-phone .social-post-tile,
  #app .feed-frame-phone .social-follow-button {
    scroll-behavior: auto;
    transition: none;
  }
}

/* ===== ranking-character-center-v107.css ===== */
/* Center Jarin's visible artwork inside its normalized transparent canvas. */
#app .ranking-reference-v4 .ranking-character-jarin {
  transform: translateX(2.2%) !important;
}

/* ===== feed-author-arrow-remove-v109.css ===== */
/* The full author row remains clickable; remove its redundant decoration. */
#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link::after {
  content: none !important;
  display: none !important;
}

/* ===== feed-my-profile-x-cover-v111.css ===== */
/* Hide the blue X baked into the shared backdrop below the My Feed icon. */
#app .feed-frame-phone .feed-reference-v3::after {
  content: "" !important;
  position: absolute;
  z-index: 1;
  top: 154px;
  left: calc(50% + 104px);
  width: 28px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    #fffaf0 0 58%,
    rgba(255, 250, 240, .98) 72%,
    rgba(255, 250, 240, 0) 100%
  );
  pointer-events: none;
}

/* ===== profile-stats-circle-spacing-v112.css ===== */
/* Keep profile stat labels clear of the fixed-size watercolor circle. */
#app .profile-reference-v4 .profile-ref-stats {
  box-sizing: border-box;
  padding-left: max(9px, calc(439px - 100vw)) !important;
}

@media (max-width: 390px) {
  #app .profile-reference-v4 .profile-ref-stats {
    padding-left: calc(417px - 100vw) !important;
  }
}

@media (max-width: 350px) {
  #app .profile-reference-v4 .profile-ref-stats {
    padding-left: calc(370px - 100vw) !important;
  }
}

#app .profile-reference-v4 .profile-ref-stats dt {
  white-space: nowrap;
}

@media (max-width: 330px) {
  #app .profile-reference-v4 .profile-ref-stats dt {
    font-size: 14px !important;
  }

  #app .profile-reference-v4 .profile-ref-stats dd {
    font-size: 25px !important;
  }
}

/* ===== account-legal-sheet-scroll-v114.css ===== */
/* Keep policy sheet controls visible while the long legal copy scrolls. */
#app .modal > .account-sheet.legal-sheet {
  box-sizing: border-box !important;
  width: min(100%, 430px) !important;
  height: min(820px, calc(100dvh - 24px)) !important;
  max-height: calc(100dvh - 24px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 22px 20px 18px !important;
}

#app .modal > .account-sheet.legal-sheet > .account-sheet-head {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
}

#app .modal > .account-sheet.legal-sheet > .legal-sheet-body {
  box-sizing: border-box;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 7px 16px 0 !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 84, 55, .34) transparent;
}

#app .modal > .account-sheet.legal-sheet > .legal-sheet-body::-webkit-scrollbar {
  width: 4px;
}

#app .modal > .account-sheet.legal-sheet > .legal-sheet-body::-webkit-scrollbar-track {
  background: transparent;
}

#app .modal > .account-sheet.legal-sheet > .legal-sheet-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(111, 84, 55, .28);
}

#app .modal > .account-sheet.legal-sheet > .legal-sheet-foot {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-top: 0 !important;
  padding: 12px 2px 0 !important;
  background: transparent;
}

@media (max-width: 360px) {
  #app .modal > .account-sheet.legal-sheet {
    padding-right: 17px !important;
    padding-left: 17px !important;
  }

  #app .modal > .account-sheet.legal-sheet > .legal-sheet-body {
    padding-right: 5px !important;
  }
}

/* ===== delete-account-confirm-v115.css ===== */
/* Account deletion safety gate: compact paper dialog with exact-phrase confirmation. */
#app .modal.delete-account-confirm-modal {
  box-sizing: border-box !important;
  z-index: 1000 !important;
  padding: 14px !important;
  background: rgba(48, 28, 18, .38) !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#app .modal > .sheet.delete-account-confirm-sheet {
  box-sizing: border-box !important;
  width: min(100%, 376px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: auto !important;
  padding: 0 !important;
  border: 1px solid rgba(117, 77, 48, .22) !important;
  border-radius: 24px 19px 23px 18px / 20px 24px 19px 22px !important;
  color: #3b1d10 !important;
  background-color: #fffaf0 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(239, 214, 170, .07)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 180px 180px !important;
  box-shadow: 0 18px 48px rgba(48, 28, 18, .24), 0 3px 10px rgba(48, 28, 18, .12) !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

#app .modal > .sheet.delete-account-confirm-sheet:focus {
  outline: 0;
}

#app .delete-account-confirm-head {
  box-sizing: border-box;
  min-height: 86px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 15px;
  border-bottom: 1px dashed rgba(117, 77, 48, .2);
}

#app .delete-account-confirm-head > div {
  min-width: 0;
}

#app .delete-account-confirm-head span {
  display: block;
  margin-bottom: 5px;
  color: #b64b39;
  font-family: Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
}

#app .delete-account-confirm-head h2 {
  margin: 0 !important;
  color: #3b1d10 !important;
  font-size: 25px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
  word-break: keep-all;
}

#app .delete-account-confirm-head > button.icon {
  box-sizing: border-box !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  display: grid !important;
  place-items: center !important;
  margin: -3px -3px 0 0 !important;
  padding: 0 0 2px !important;
  border: 1px solid rgba(117, 77, 48, .18) !important;
  border-radius: 50% !important;
  color: rgba(59, 29, 16, .7) !important;
  background: rgba(255, 252, 245, .76) !important;
  box-shadow: none !important;
  font: 400 25px/1 Arial, sans-serif !important;
}

#app .delete-account-confirm-body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 19px 20px 18px;
}

#app .delete-account-warning-mark {
  box-sizing: border-box;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 13px;
  border: 1px solid rgba(174, 72, 54, .18);
  border-radius: 50%;
  color: #a34837;
  background-color: rgba(242, 211, 201, .72);
  background-image: url("./assets/paper-grain.svg");
  background-size: 100px 100px;
}

#app .delete-account-warning-mark svg {
  width: 27px;
  height: 27px;
}

#app #delete-account-confirm-description {
  margin: 0 !important;
  color: rgba(59, 29, 16, .74) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: center;
  word-break: keep-all;
}

#app .delete-account-confirm-instruction {
  margin: 14px 0 17px !important;
  padding: 11px 12px !important;
  border: 1px dashed rgba(182, 75, 57, .3);
  border-radius: 13px 10px 14px 11px / 11px 14px 10px 13px;
  color: rgba(59, 29, 16, .76) !important;
  background: rgba(242, 211, 201, .27);
  font-size: 13px !important;
  line-height: 1.45 !important;
  text-align: center;
  word-break: keep-all;
}

#app .delete-account-confirm-instruction strong {
  color: #9f4032;
  font-weight: 800;
  white-space: nowrap;
}

#app .delete-account-confirm-body > label {
  margin: 0 0 7px;
  color: #4a2a1a;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

#app #delete-account-confirmation {
  box-sizing: border-box !important;
  width: 100% !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(117, 77, 48, .3) !important;
  border-radius: 12px 9px 13px 10px / 10px 13px 9px 12px !important;
  outline: 0;
  color: #3b1d10 !important;
  background: rgba(255, 253, 247, .92) !important;
  box-shadow: inset 0 1px 2px rgba(59, 29, 16, .05) !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 48px !important;
  -webkit-user-select: text !important;
  user-select: text !important;
}

#app #delete-account-confirmation::placeholder {
  color: rgba(59, 29, 16, .36);
}

#app #delete-account-confirmation:focus {
  border-color: rgba(182, 75, 57, .72) !important;
  box-shadow: 0 0 0 3px rgba(232, 111, 87, .14) !important;
}

#app .delete-account-confirm-helper,
#app .delete-account-confirm-error {
  margin: 7px 1px 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  word-break: keep-all;
}

#app .delete-account-confirm-helper {
  color: rgba(59, 29, 16, .54) !important;
}

#app .delete-account-confirm-helper.is-ready {
  color: #3f7048 !important;
}

#app .delete-account-confirm-error {
  padding: 9px 10px !important;
  border-radius: 10px;
  color: #913727 !important;
  background: rgba(232, 111, 87, .12);
  font-weight: 700;
}

#app .delete-account-confirm-actions {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 20px 20px;
}

#app .delete-account-confirm-actions > button,
#app .delete-account-confirm-actions > button:hover,
#app .delete-account-confirm-actions > button:active {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 49px !important;
  min-height: 49px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  border-radius: 14px 11px 15px 10px / 12px 15px 11px 14px !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

#app .delete-account-confirm-actions > .delete-account-cancel,
#app .delete-account-confirm-actions > .delete-account-cancel:hover,
#app .delete-account-confirm-actions > .delete-account-cancel:active {
  border: 1px solid rgba(117, 77, 48, .24) !important;
  color: #4a2a1a !important;
  background: rgba(255, 252, 244, .86) !important;
}

#app .delete-account-confirm-actions > .delete-account-submit,
#app .delete-account-confirm-actions > .delete-account-submit:hover,
#app .delete-account-confirm-actions > .delete-account-submit:active {
  border: 1px solid #a54433 !important;
  color: #fffaf0 !important;
  background: #b64b39 !important;
}

#app .delete-account-confirm-actions > button:disabled,
#app .delete-account-confirm-actions > button:disabled:hover,
#app .delete-account-confirm-actions > button:disabled:active,
#app .delete-account-confirm-head > button.icon:disabled {
  border-color: rgba(117, 77, 48, .1) !important;
  color: rgba(59, 29, 16, .35) !important;
  background: rgba(218, 199, 183, .38) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

#app .delete-account-confirm-sheet button:focus-visible,
#app #delete-account-confirmation:focus-visible {
  outline: 3px solid rgba(55, 101, 123, .62) !important;
  outline-offset: 2px !important;
}

@media (max-width: 360px) {
  #app .modal.delete-account-confirm-modal {
    padding: 10px !important;
  }

  #app .modal > .sheet.delete-account-confirm-sheet {
    max-height: calc(100dvh - 20px) !important;
  }

  #app .delete-account-confirm-head {
    padding: 17px 16px 13px;
  }

  #app .delete-account-confirm-head h2 {
    font-size: 23px !important;
  }

  #app .delete-account-confirm-body {
    padding: 16px 16px 15px;
  }

  #app .delete-account-confirm-actions {
    gap: 8px;
    padding: 0 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .delete-account-confirm-sheet,
  #app .delete-account-confirm-sheet * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ===== logout-confirm-v116.css ===== */
/* Logout confirmation reuses the v115 paper dialog with a lighter message. */
#app .logout-confirm-sheet .logout-confirm-body {
  padding-top: 22px;
  padding-bottom: 20px;
}

#app .logout-confirm-sheet .logout-confirm-mark {
  color: #a34837;
  background-color: rgba(242, 211, 201, .66);
}

#app #logout-confirm-description {
  margin: 0 !important;
  color: rgba(59, 29, 16, .78) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  text-align: center;
  word-break: keep-all;
}

#app .logout-confirm-note {
  margin: 14px 0 0 !important;
  padding: 11px 12px !important;
  border: 1px dashed rgba(117, 77, 48, .24);
  border-radius: 13px 10px 14px 11px / 11px 14px 10px 13px;
  color: rgba(59, 29, 16, .65) !important;
  background: rgba(246, 226, 173, .25);
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-align: center;
  word-break: keep-all;
}

#app .logout-confirm-sheet .logout-confirm-error {
  margin-top: 12px !important;
  text-align: center;
}

#app .logout-confirm-actions > .logout-confirm-submit,
#app .logout-confirm-actions > .logout-confirm-submit:hover,
#app .logout-confirm-actions > .logout-confirm-submit:active {
  border-color: #a54433 !important;
  color: #fffaf0 !important;
  background: #b64b39 !important;
}

@media (max-width: 360px) {
  #app .logout-confirm-sheet .logout-confirm-body {
    padding-top: 18px;
    padding-bottom: 17px;
  }
}

/* ===== stage-complete-start-v121.css ===== */
/* Completed stages and the live START marker — 2026-08-05. */

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared {
  background-color: rgba(205, 229, 194, .99) !important;
  background-image:
    url("./assets/paper-grain.svg"),
    linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(126, 171, 104, .16)) !important;
  background-position: center, center !important;
  background-size: 190px 190px, auto !important;
  box-shadow:
    inset 0 0 0 1.5px rgba(76, 121, 59, .2),
    inset 0 -12px 22px rgba(101, 148, 80, .06) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared
  .home-meal-ref-stage-copy > b {
  color: #5c874a !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared
  .home-meal-ref-stage-copy > strong {
  color: #38542d !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared
  .home-meal-ref-stage-copy > small {
  color: #4b6f3f !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared
  .home-meal-ref-stage-copy > small i {
  display: inline-grid !important;
  width: 16px !important;
  height: 16px !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: #6f9b5c !important;
  font-size: 11px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-cleared
  .home-meal-ref-food img {
  opacity: .86 !important;
  filter: saturate(.76) contrast(.96) brightness(1.03) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card > .home-meal-ref-current-start {
  position: absolute !important;
  z-index: 14 !important;
  top: 50% !important;
  width: 64px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  padding: 0 4px 1px !important;
  border: 1.5px solid rgba(218, 92, 68, .72) !important;
  border-radius: 999px !important;
  color: #bd4f3b !important;
  background: rgba(255, 249, 232, .98) url("./assets/paper-grain.svg") center / 100px 100px !important;
  box-shadow: 0 2px 5px rgba(91, 59, 34, .14) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  pointer-events: none !important;
  white-space: nowrap !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-route-right > .home-meal-ref-current-start {
  right: auto !important;
  left: -64px !important;
  transform: translateY(-50%) rotate(-2deg) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-route-left > .home-meal-ref-current-start {
  right: -64px !important;
  left: auto !important;
  transform: translateY(-50%) rotate(2deg) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card > .home-meal-ref-current-start i {
  font-size: 14px !important;
  font-style: normal !important;
  line-height: 1 !important;
}

@media (max-width: 390px) {
  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-card > .home-meal-ref-current-start {
    width: 52px !important;
    height: 25px !important;
    font-size: 9px !important;
  }

  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-card.is-route-right > .home-meal-ref-current-start {
    left: -44px !important;
  }

  html body #app .home-meal-reference-v1
    .home-meal-ref-stage-card.is-route-left > .home-meal-ref-current-start {
    right: -44px !important;
  }
}

/* The 6–100 route clips overflow by design, so keep its live marker inside
 * the card instead of letting the badge disappear at the page edge. */
html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.is-continuation > .home-meal-ref-current-start {
  top: 8px !important;
  right: 10px !important;
  left: auto !important;
  width: 58px !important;
  height: 23px !important;
  transform: rotate(1deg) !important;
}

/* ===== reward-completion-modal-v123.css ===== */
/* Photo-first stage completion modal, matched to the warm watercolor stage pages. */
html body #app .reward-completion-modal {
  align-items: center !important;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom)) !important;
  background: rgba(84, 61, 51, .34) !important;
  backdrop-filter: blur(7px) saturate(.96) !important;
  -webkit-backdrop-filter: blur(7px) saturate(.96) !important;
}

html body #app .reward-completion-sheet {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: min(100%, 420px) !important;
  max-height: min(760px, calc(100dvh - 24px)) !important;
  padding: 24px 22px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  border: 1px solid rgba(218, 151, 122, .38) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 7% 3%, rgba(248, 210, 124, .24), transparent 28%),
    radial-gradient(circle at 96% 22%, rgba(161, 211, 201, .24), transparent 31%),
    radial-gradient(circle at 14% 93%, rgba(235, 160, 155, .12), transparent 30%),
    linear-gradient(180deg, rgba(255, 253, 245, .99), rgba(250, 242, 226, .99)) !important;
  box-shadow:
    0 22px 55px rgba(83, 57, 45, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
  color: #4d3025 !important;
  text-align: left !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #app .reward-completion-sheet::before,
html body #app .reward-completion-sheet::after,
html body #app .reward-completion-sheet > *::before,
html body #app .reward-completion-sheet > *::after {
  border-color: transparent;
}

html body #app .reward-completion-sheet::before,
html body #app .reward-completion-sheet::after {
  display: none !important;
  content: none !important;
}

html body #app .reward-completion-close {
  position: absolute !important;
  z-index: 4 !important;
  top: 13px !important;
  right: 13px !important;
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #87685b !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: 0 5px 14px rgba(96, 67, 54, .1) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

html body #app .reward-completion-head {
  display: grid !important;
  justify-items: center !important;
  padding: 2px 34px 0 !important;
  text-align: center !important;
}

html body #app .reward-completion-kicker {
  color: #d56d58 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: .075em !important;
}

html body #app .reward-completion-check {
  width: 39px !important;
  height: 39px !important;
  display: grid !important;
  place-items: center !important;
  margin-top: 10px !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: #e8755d !important;
  box-shadow: 0 7px 16px rgba(190, 91, 69, .2) !important;
}

html body #app .reward-completion-check svg {
  stroke-width: 2.5 !important;
}

html body #app .reward-completion-head h2 {
  margin: 9px 0 0 !important;
  color: #452b20 !important;
  font-family: var(--bap-primary-title-font, "Bap Memoment Kkukkukk", sans-serif) !important;
  font-size: clamp(27px, 7.5vw, 32px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.06 !important;
  letter-spacing: -.035em !important;
}

html body #app .reward-completion-head p {
  margin: 7px 0 0 !important;
  color: #806d64 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

html body #app .reward-proof-card {
  display: block !important;
  margin: 17px 0 0 !important;
  padding: 8px 8px 10px !important;
  border: 1px solid rgba(217, 155, 124, .3) !important;
  border-radius: 20px !important;
  background: rgba(255, 254, 249, .88) !important;
  box-shadow: 0 9px 24px rgba(110, 78, 60, .1) !important;
}

html body #app .reward-proof-frame {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #eee4d2 !important;
}

html body #app .reward-proof-photo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: none !important;
  transform: none !important;
}

html body #app .reward-proof-card.is-fallback .reward-proof-photo {
  padding: 16px !important;
  object-fit: contain !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(246, 211, 120, .44), transparent 51%),
    #fff7e6 !important;
}

html body #app .reward-proof-label {
  position: absolute !important;
  left: 10px !important;
  bottom: 10px !important;
  padding: 6px 10px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fffaf1 !important;
  background: rgba(213, 99, 77, .9) !important;
  box-shadow: 0 4px 11px rgba(95, 56, 43, .12) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
}

html body #app .reward-proof-card figcaption {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 5px 1px !important;
}

html body #app .reward-sticker {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fae6a8 !important;
  box-shadow: inset 0 0 0 4px rgba(255, 250, 231, .75) !important;
  font-size: 21px !important;
}

html body #app .reward-proof-card figcaption > span:last-child {
  min-width: 0 !important;
}

html body #app .reward-proof-card figcaption strong,
html body #app .reward-proof-card figcaption small {
  display: block !important;
}

html body #app .reward-proof-card figcaption strong {
  color: #55392d !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html body #app .reward-proof-card figcaption small {
  margin-top: 3px !important;
  color: #8d7b72 !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

html body #app .reward-next-card {
  display: grid !important;
  grid-template-columns: 43px minmax(0, 1fr) !important;
  gap: 11px !important;
  align-items: center !important;
  margin-top: 13px !important;
  padding: 12px 14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 17px !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 7% 46%, rgba(255, 255, 255, .7), transparent 36%),
    linear-gradient(105deg, rgba(211, 234, 224, .92), rgba(231, 241, 216, .9)) !important;
  box-shadow: 0 7px 18px rgba(82, 118, 101, .09) !important;
}

html body #app .reward-next-complete {
  background: linear-gradient(105deg, rgba(250, 229, 180, .9), rgba(248, 217, 207, .8)) !important;
}

html body #app .reward-next-icon {
  width: 43px !important;
  height: 43px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #628b78 !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 4px 12px rgba(65, 98, 82, .08) !important;
}

html body #app .reward-next-copy,
html body #app .reward-next-copy b,
html body #app .reward-next-copy strong {
  display: block !important;
  min-width: 0 !important;
}

html body #app .reward-next-copy b {
  color: #5a816f !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

html body #app .reward-next-copy strong {
  margin-top: 3px !important;
  overflow: hidden !important;
  color: #48372e !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body #app .reward-completion-total {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  margin: 11px 0 0 !important;
  color: #8a756a !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

html body #app .reward-completion-total svg {
  color: #e8755d !important;
  stroke-width: 2.5 !important;
}

html body #app .reward-completion-total strong {
  color: #d66550 !important;
  font-weight: 700 !important;
}

html body #app .reward-completion-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important;
  gap: 9px !important;
  margin-top: 14px !important;
}

html body #app .reward-completion-actions button {
  min-width: 0 !important;
  min-height: 49px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 13px !important;
  border: 0 !important;
  border-radius: 15px !important;
  clip-path: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  box-shadow: none !important;
  transform: none !important;
}

html body #app .reward-completion-actions button::before,
html body #app .reward-completion-actions button::after {
  display: none !important;
  content: none !important;
}

html body #app .reward-completion-primary {
  color: #fffaf0 !important;
  background: linear-gradient(110deg, #e96f57, #e67c68) !important;
  box-shadow: 0 9px 19px rgba(192, 84, 62, .2) !important;
}

html body #app .reward-completion-secondary {
  color: #6f5b50 !important;
  background: rgba(239, 228, 210, .92) !important;
  box-shadow: 0 7px 17px rgba(101, 74, 59, .08) !important;
}

html body #app .reward-completion-actions button:focus-visible,
html body #app .reward-completion-close:focus-visible {
  outline: 3px solid rgba(232, 117, 93, .34) !important;
  outline-offset: 2px !important;
}

html body #app .reward-completion-actions button:active,
html body #app .reward-completion-close:active {
  transform: scale(.98) !important;
}

@media (max-width: 390px), (max-height: 720px) {
  html body #app .reward-completion-sheet {
    padding: 20px 17px 17px !important;
  }

  html body #app .reward-completion-head {
    padding-inline: 30px !important;
  }

  html body #app .reward-completion-check {
    width: 34px !important;
    height: 34px !important;
    margin-top: 7px !important;
  }

  html body #app .reward-completion-head h2 {
    margin-top: 7px !important;
    font-size: 26px !important;
  }

  html body #app .reward-completion-head p {
    margin-top: 5px !important;
    font-size: 13px !important;
  }

  html body #app .reward-proof-card {
    margin-top: 13px !important;
  }

  html body #app .reward-proof-frame {
    aspect-ratio: 16 / 10 !important;
  }

  html body #app .reward-proof-card figcaption {
    padding-top: 8px !important;
  }

  html body #app .reward-next-card {
    margin-top: 10px !important;
    padding-block: 10px !important;
  }

  html body #app .reward-completion-total {
    margin-top: 8px !important;
  }

  html body #app .reward-completion-actions {
    margin-top: 10px !important;
  }
}

@media (max-width: 340px) {
  html body #app .reward-completion-actions {
    grid-template-columns: 1fr !important;
  }

  html body #app .reward-completion-actions button {
    min-height: 45px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app .reward-completion-sheet {
    animation: none !important;
  }
}

/* ===== dessert-recipe-modal-v125.css ===== */
/* Gobi dessert recipe modal: warm baking-paper palette, no black frame. */
html body #app .dessert-recipe-modal {
  --dessert-recipe-ink: #4a352f;
  --dessert-recipe-muted: #826f69;
  --dessert-recipe-coral: #dc7882;
  --dessert-recipe-coral-deep: #b84d59;
  --dessert-recipe-pink: #f4d7dd;
  --dessert-recipe-yellow: #f2d878;
  --dessert-recipe-yellow-soft: #fff2bd;
  --dessert-recipe-mint: #cfe4c7;
  --dessert-recipe-sky: #d9ebf1;
  --dessert-recipe-paper: #fffaf0;
  --dessert-recipe-line: rgba(184, 77, 89, .22);
  align-items: center !important;
  padding:
    max(12px, env(safe-area-inset-top))
    12px
    max(12px, env(safe-area-inset-bottom)) !important;
  background: rgba(78, 54, 46, .34) !important;
  backdrop-filter: blur(7px) saturate(.96) !important;
  -webkit-backdrop-filter: blur(7px) saturate(.96) !important;
  filter: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: min(100%, 430px) !important;
  height: min(824px, calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)))) !important;
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border: 1px solid rgba(211, 131, 125, .35) !important;
  border-radius: 28px !important;
  clip-path: none !important;
  background:
    radial-gradient(circle at 10% 5%, rgba(242, 216, 120, .19), transparent 29%),
    radial-gradient(circle at 94% 28%, rgba(207, 228, 199, .22), transparent 31%),
    linear-gradient(180deg, #fffaf0 0%, #fbf0e3 100%) !important;
  box-shadow:
    0 22px 55px rgba(75, 49, 39, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .72) !important;
  color: var(--dessert-recipe-ink) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet::before,
html body #app .dessert-recipe-modal .dessert-recipe-sheet::after {
  display: none !important;
  content: none !important;
}

/* Hero ----------------------------------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover.dessert {
  position: relative !important;
  min-height: 218px !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  padding: 19px 21px 18px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(211, 131, 125, .2) !important;
  border-radius: 27px 27px 0 0 !important;
  background:
    linear-gradient(rgba(255, 250, 240, .78), rgba(255, 250, 240, .78)),
    url("./assets/ui/dessert-confetti-pattern-v1.svg") center / 178px 178px repeat,
    linear-gradient(118deg, #fff1c4, #f7dce3 58%, #dceee7) !important;
  color: var(--dessert-recipe-ink) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover.dessert::before {
  display: none !important;
  content: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover.dessert::after {
  position: absolute !important;
  right: 7px !important;
  bottom: 4px !important;
  width: 158px !important;
  height: 158px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 48% 52% 45% 55% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .82), rgba(242, 216, 120, .22) 68%, transparent 71%) !important;
  content: "" !important;
  pointer-events: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-title-row {
  position: relative !important;
  z-index: 4 !important;
  min-height: 38px !important;
  align-items: flex-start !important;
  padding: 0 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-stage-chip {
  min-height: 27px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 6px 10px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fffaf0 !important;
  background: linear-gradient(110deg, #d96978, #e58b91) !important;
  box-shadow: 0 5px 13px rgba(184, 77, 89, .16) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .045em !important;
  transform: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-stage-chip svg {
  width: 12px !important;
  height: 12px !important;
  color: #fff4c1 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover .icon {
  width: 44px !important;
  height: 44px !important;
  flex: 0 0 44px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #846b63 !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: 0 5px 14px rgba(91, 60, 50, .1) !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover-copy {
  position: relative !important;
  z-index: 3 !important;
  width: 58% !important;
  margin-top: 25px !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover h2 {
  margin: 0 !important;
  color: #4a302a !important;
  font-family: var(--bap-primary-title-font, "Bap Memoment Kkukkukk", sans-serif) !important;
  font-size: clamp(29px, 8vw, 35px) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: anywhere !important;
  word-break: keep-all !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover p {
  margin: 9px 0 0 !important;
  color: #816d67 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-reference-art {
  z-index: 3 !important;
  right: 14px !important;
  bottom: 9px !important;
  width: 144px !important;
  height: 144px !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
  filter: saturate(1.02) contrast(1.01) drop-shadow(0 7px 10px rgba(113, 74, 61, .12)) !important;
  mix-blend-mode: normal !important;
  transform: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-utensil-art {
  display: none !important;
}

/* Scrollable recipe body ------------------------------------------------ */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-body {
  min-height: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  padding: 18px 20px 24px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background:
    radial-gradient(circle at 9px 11px, rgba(120, 88, 72, .035) 0 .55px, transparent .75px),
    linear-gradient(180deg, rgba(255, 250, 240, .96), rgba(250, 239, 226, .98)) !important;
  background-size: 22px 24px, auto !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-body::-webkit-scrollbar {
  display: none !important;
}

/* Metadata -------------------------------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item {
  min-width: 0 !important;
  min-height: 72px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  padding: 9px 4px !important;
  border: 0 !important;
  border-radius: 15px !important;
  color: var(--dessert-recipe-ink) !important;
  background: rgba(250, 220, 225, .82) !important;
  box-shadow: 0 5px 14px rgba(103, 70, 58, .06) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item:nth-child(2) {
  background: rgba(255, 239, 174, .86) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item:nth-child(3) {
  background: rgba(210, 232, 224, .88) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item + .recipe-meta-item {
  border-left: 0 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item svg {
  width: 17px !important;
  height: 17px !important;
  flex: 0 0 17px !important;
  margin: 0 0 4px !important;
  color: var(--dessert-recipe-coral-deep) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item strong {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: #523a33 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item span {
  margin-top: 3px !important;
  color: #89756e !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Recipe sections ------------------------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .warning {
  margin-top: 13px !important;
  padding: 11px 12px !important;
  border: 0 !important;
  border-radius: 14px !important;
  color: #7a5149 !important;
  background: rgba(248, 217, 207, .78) !important;
  box-shadow: 0 5px 13px rgba(112, 69, 58, .05) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .warning svg {
  color: var(--dessert-recipe-coral-deep) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-block {
  margin-top: 22px !important;
  border: 0 !important;
  background: transparent !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-block-head {
  min-height: 30px !important;
  align-items: flex-end !important;
  margin: 0 0 9px !important;
  padding: 0 2px !important;
  border: 0 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-block h3 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: #4e3731 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  background: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-block h3::after {
  position: absolute !important;
  z-index: -1 !important;
  right: -5px !important;
  bottom: -1px !important;
  left: -3px !important;
  height: 7px !important;
  display: block !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(242, 216, 120, .62) !important;
  content: "" !important;
  transform: rotate(-1deg) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-block-head span {
  color: #948078 !important;
  font-size: 9px !important;
  font-weight: 400 !important;
}

/* Ingredients */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-list {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(184, 77, 89, .16) !important;
  border-radius: 17px !important;
  background: rgba(255, 253, 247, .9) !important;
  box-shadow: 0 7px 18px rgba(102, 70, 57, .06) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row {
  min-height: 46px !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #5b4540 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row + .ingredient-row {
  border-top: 1px dashed rgba(184, 77, 89, .18) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-check {
  width: 21px !important;
  height: 21px !important;
  border: 1.5px solid rgba(184, 77, 89, .42) !important;
  border-radius: 50% !important;
  color: transparent !important;
  background: #fffdf8 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row.checked {
  color: #917d76 !important;
  background: rgba(244, 215, 221, .48) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row.checked .ingredient-check {
  border-color: var(--dessert-recipe-coral) !important;
  color: #fffaf0 !important;
  background: var(--dessert-recipe-coral) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
  color: inherit !important;
  font-size: inherit !important;
  text-align: left !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row-copy > b {
  min-width: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-row.has-substitution {
  min-height: 78px !important;
  align-items: start !important;
  padding-top: 11px !important;
  padding-bottom: 10px !important;
  background: rgba(249, 232, 220, .48) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-alternative {
  margin-top: 6px !important;
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 7px !important;
  padding: 7px 8px !important;
  border: 1px dashed rgba(105, 141, 130, .44) !important;
  border-radius: 10px !important;
  color: #4f665d !important;
  background: rgba(218, 235, 226, .78) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-alternative > i {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: #668b7d !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-alternative em {
  color: #aa5a52 !important;
  font-style: normal !important;
  text-decoration: line-through !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .ingredient-alternative strong {
  color: #3d6254 !important;
  font-weight: 800 !important;
}

/* Tools and allergy tags */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .tool-list,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .tag-list {
  gap: 7px !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .tool-chip,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .tag-chip {
  min-height: 33px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #5e554a !important;
  background: rgba(207, 228, 199, .78) !important;
  box-shadow: 0 4px 10px rgba(83, 104, 77, .06) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  transform: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .tool-chip:nth-child(even) {
  background: rgba(217, 235, 241, .85) !important;
  transform: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .tool-chip svg {
  color: #698d82 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .tag-chip {
  color: #99515d !important;
  background: rgba(244, 215, 221, .78) !important;
}

/* Steps */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .step-list {
  display: grid !important;
  gap: 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .step-row {
  min-height: 62px !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(184, 77, 89, .14) !important;
  border-radius: 15px !important;
  background: rgba(255, 253, 247, .9) !important;
  box-shadow: 0 6px 15px rgba(102, 70, 57, .05) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .step-row + .step-row {
  border-top: 1px solid rgba(184, 77, 89, .14) !important;
  background: rgba(255, 253, 247, .9) !important;
  background-image: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .step-number {
  width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: linear-gradient(135deg, #dc7882, #e49494) !important;
  box-shadow: 0 5px 12px rgba(184, 77, 89, .15) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .step-row p {
  margin: 0 !important;
  padding: 0 !important;
  color: #5d4942 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.52 !important;
}

/* Sticky actions -------------------------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions {
  position: sticky !important;
  z-index: 12 !important;
  bottom: -24px !important;
  margin: 24px -20px -24px !important;
  padding: 14px 20px calc(16px + env(safe-area-inset-bottom)) !important;
  border: 0 !important;
  border-top: 1px solid rgba(184, 77, 89, .13) !important;
  background: rgba(255, 250, 240, .95) !important;
  box-shadow: 0 -8px 22px rgba(104, 72, 58, .055) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .primary,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .secondary {
  width: 100% !important;
  min-height: 51px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 16px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  clip-path: none !important;
  color: #fffaf0 !important;
  background: linear-gradient(110deg, #b84d59, #a8424d) !important;
  background-image: linear-gradient(110deg, #b84d59, #a8424d) !important;
  box-shadow: 0 9px 20px rgba(184, 77, 89, .18) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .secondary {
  margin-top: 8px !important;
  color: #745f56 !important;
  background: rgba(239, 226, 207, .92) !important;
  background-image: none !important;
  box-shadow: 0 7px 16px rgba(94, 68, 56, .07) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .primary::before,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .primary::after,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .secondary::before,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .secondary::after {
  display: none !important;
  content: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions svg {
  color: inherit !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .primary > span,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions > .secondary > span {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* AI photo proof flow --------------------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-capture {
  --recipe-ink: var(--dessert-recipe-ink);
  --recipe-coral: var(--dessert-recipe-coral);
  --recipe-coral-deep: var(--dessert-recipe-coral-deep);
  display: grid !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding: 15px !important;
  overflow: hidden !important;
  border: 1px solid rgba(184, 77, 89, .16) !important;
  border-radius: 18px !important;
  background: rgba(255, 253, 247, .9) !important;
  background-image: none !important;
  box-shadow: 0 8px 20px rgba(102, 70, 57, .06) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-capture > div > span {
  color: var(--dessert-recipe-coral-deep) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-capture h3 {
  color: #4e3731 !important;
  font-size: 19px !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-capture p {
  color: #7e6d66 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-photo-button {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 15px !important;
  color: #7f4c52 !important;
  background: rgba(244, 215, 221, .82) !important;
  box-shadow: 0 6px 15px rgba(112, 70, 65, .07) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-privacy-note {
  color: #776963 !important;
  background: rgba(217, 235, 241, .55) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-preview-wrap {
  border: 0 !important;
  border-radius: 15px !important;
  box-shadow: 0 7px 17px rgba(102, 70, 57, .09) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-ai-state {
  border: 0 !important;
  border-radius: 15px !important;
  background-image: none !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-share-option {
  border: 1px solid rgba(184, 77, 89, .18) !important;
  border-radius: 14px !important;
  background: #fffaf0 !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-share-option.is-checked,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-share-option[aria-checked="true"] {
  border-color: rgba(184, 77, 89, .46) !important;
  color: var(--dessert-recipe-coral-deep) !important;
  background: rgba(255, 240, 168, .52) !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-actions button {
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 15px !important;
  color: #fffaf0 !important;
  background: linear-gradient(110deg, #b84d59, #a8424d) !important;
  background-image: linear-gradient(110deg, #b84d59, #a8424d) !important;
  box-shadow: 0 8px 18px rgba(184, 77, 89, .15) !important;
}

/* Interaction and compact screens ------------------------------------- */

html body #app .dessert-recipe-modal .dessert-recipe-sheet button:focus-visible,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-photo-button:focus-visible {
  outline: 3px solid #71343d !important;
  outline-offset: 2px !important;
}

html body #app .dessert-recipe-modal .dessert-recipe-sheet button:active,
html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-photo-button:active {
  transform: scale(.985) !important;
}

@media (max-width: 390px), (max-height: 720px) {
  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover.dessert {
    min-height: 202px !important;
    padding: 17px 18px 15px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover-copy {
    margin-top: 18px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover h2 {
    font-size: 28px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-reference-art {
    right: 8px !important;
    width: 130px !important;
    height: 130px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover.dessert::after {
    right: 0 !important;
    width: 142px !important;
    height: 142px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-body {
    padding: 15px 17px 21px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-meta-item {
    min-height: 66px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .sheet-actions {
    bottom: -21px !important;
    margin: 21px -17px -21px !important;
    padding: 12px 17px calc(14px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 340px) {
  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover-copy {
    width: 55% !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-cover h2 {
    font-size: 26px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .recipe-reference-art {
    width: 112px !important;
    height: 112px !important;
  }

  html body #app .dessert-recipe-modal .dessert-recipe-sheet .proof-share-options {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app .dessert-recipe-modal .dessert-recipe-sheet {
    animation: none !important;
  }
}

/* ===== profile-account-paper-grid-v126.css ===== */
/* Keep profile and account controls in the same handmade paper language as the profile cards. */
html body #app .profile-reference-v4 > .profile-live-account {
  --account-ink: #3b1d10;
  --account-coral: #df654c;
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: calc(100% - 54px) !important;
  margin: 0 27px 24px !important;
  padding: 23px 18px 19px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  mask-image: url("./assets/ui/home-progress-deckle-mask-v11.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: var(--account-ink) !important;
  background-color: #fff8e9 !important;
  background-image:
    radial-gradient(circle at 96% 5%, rgba(244, 203, 73, .19) 0 52px, transparent 53px),
    radial-gradient(circle at 3% 96%, rgba(151, 189, 216, .14) 0 66px, transparent 67px),
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, auto, auto, 160px 160px !important;
  box-shadow: none !important;
  filter: drop-shadow(3px 5px 3px rgba(77, 53, 29, .18)) !important;
}

html body #app .profile-reference-v4 > .profile-live-account::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  top: 17px !important;
  right: 16px !important;
  display: block !important;
  width: 39px !important;
  height: 29px !important;
  opacity: .58 !important;
  background:
    radial-gradient(circle, rgba(223, 101, 76, .72) 0 2.5px, transparent 3.2px) 0 0 / 15px 14px,
    radial-gradient(circle, rgba(223, 101, 76, .58) 0 2.5px, transparent 3.2px) 7px 7px / 15px 14px !important;
  transform: rotate(-4deg) !important;
  pointer-events: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  right: -27px !important;
  bottom: 54px !important;
  display: block !important;
  width: 82px !important;
  height: 66px !important;
  border-radius: 46% 54% 43% 57% / 54% 41% 59% 46% !important;
  background: rgba(167, 202, 151, .14) !important;
  transform: rotate(-11deg) !important;
  pointer-events: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account > header {
  position: relative !important;
  min-height: 48px !important;
  margin: 0 0 14px !important;
  padding: 0 2px 11px !important;
  border-bottom: 1px dashed rgba(126, 91, 53, .22) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > header::after {
  content: "" !important;
  position: absolute !important;
  bottom: -3px !important;
  left: 1px !important;
  width: 66px !important;
  height: 5px !important;
  background: url("./assets/ui/character-choice-coral-underline-v2.svg") center / 100% 100% no-repeat !important;
  transform: rotate(-1deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > header span {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--account-coral) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .08em !important;
}

html body #app .profile-reference-v4 > .profile-live-account > header h2 {
  margin: 0 !important;
  color: var(--account-ink) !important;
  font-family: var(--bap-primary-title-font, "Bap Memoment Kkukkukk", "Bap Jua", sans-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 9px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:hover,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:active {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 106px !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 27px !important;
  grid-template-rows: 38px minmax(36px, auto) !important;
  align-items: center !important;
  column-gap: 7px !important;
  row-gap: 7px !important;
  margin: 0 !important;
  padding: 11px 11px 10px !important;
  overflow: visible !important;
  border: 1px solid rgba(112, 82, 48, .1) !important;
  border-radius: 18px 14px 19px 13px / 15px 19px 14px 18px !important;
  clip-path: none !important;
  color: var(--account-ink) !important;
  background-color: #e5efdf !important;
  background-image:
    linear-gradient(150deg, rgba(255, 255, 255, .27), rgba(255, 250, 236, .06)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 120px 120px !important;
  box-shadow: 0 1px 0 rgba(117, 84, 48, .08), 1px 3px 5px rgba(80, 55, 30, .09) !important;
  text-align: left !important;
  transform: rotate(-.25deg) !important;
  transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(2),
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(2):hover,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(2):active {
  background-color: #fff0bd !important;
  transform: rotate(.28deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(3),
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(3):hover,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(3):active {
  background-color: #e3eef5 !important;
  transform: rotate(.22deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button.danger,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button.danger:hover,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button.danger:active {
  color: #914133 !important;
  background-color: #f8e3dc !important;
  transform: rotate(-.22deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:hover {
  filter: brightness(.985) saturate(1.03) !important;
  box-shadow: 0 1px 0 rgba(117, 84, 48, .08), 2px 4px 7px rgba(80, 55, 30, .12) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:active {
  filter: brightness(.96) !important;
  transform: translateY(1px) rotate(0deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:focus-visible {
  outline: 0 !important;
  box-shadow:
    inset 0 0 0 3px rgba(232, 111, 85, .74),
    1px 3px 5px rgba(80, 55, 30, .09) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-icon {
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(112, 82, 48, .1) !important;
  border-radius: 47% 53% 44% 56% / 53% 45% 55% 47% !important;
  color: #4e6f52 !important;
  background: rgba(255, 250, 237, .86) url("./assets/paper-grain.svg") center / 90px 90px !important;
  box-shadow: 0 2px 3px rgba(87, 61, 32, .07) !important;
  transform: rotate(-2deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(2) .profile-account-icon {
  color: #8c6825 !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:nth-child(3) .profile-account-icon {
  color: #426b82 !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button.danger .profile-account-icon {
  color: #a34837 !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-icon svg {
  width: 21px !important;
  height: 21px !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-copy {
  width: 100% !important;
  min-width: 0 !important;
  grid-column: 1 / 4 !important;
  grid-row: 2 !important;
  display: grid !important;
  place-items: initial !important;
  align-self: start !important;
  gap: 4px !important;
  color: inherit !important;
  background: transparent !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-copy > b {
  overflow: visible !important;
  color: inherit !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-copy > small {
  display: block !important;
  overflow: visible !important;
  color: rgba(59, 29, 16, .68) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -.025em !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button > svg:last-child {
  box-sizing: border-box !important;
  width: 27px !important;
  height: 27px !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  justify-self: end !important;
  padding: 7px !important;
  border-radius: 50% !important;
  color: rgba(59, 29, 16, .62) !important;
  background: rgba(255, 250, 237, .62) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer {
  box-sizing: border-box !important;
  min-height: 59px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 15px 2px 0 !important;
  padding: 14px 1px 0 !important;
  border-top: 1px dashed rgba(104, 74, 43, .22) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > span {
  display: grid !important;
  gap: 4px !important;
  color: rgba(59, 29, 16, .66) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > span small {
  color: var(--account-coral) !important;
  font-size: 7px !important;
  letter-spacing: .09em !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > button,
html body #app .profile-reference-v4 > .profile-live-account > footer > button:hover,
html body #app .profile-reference-v4 > .profile-live-account > footer > button:active {
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 112px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 15px 1px !important;
  border: 1px dashed rgba(205, 85, 64, .42) !important;
  border-radius: 15px 12px 16px 11px / 13px 16px 12px 15px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  clip-path: none !important;
  color: #b64b39 !important;
  background-color: rgba(255, 249, 236, .74) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 100px 100px !important;
  box-shadow: 0 2px 4px rgba(92, 59, 34, .08) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  transform: rotate(-.35deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > button:hover {
  background-color: rgba(248, 226, 213, .64) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > button:active {
  transform: translateY(1px) rotate(0deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > button:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px rgba(232, 111, 85, .58) !important;
}

html body #app .profile-reference-v4 > .profile-live-account > footer > button > svg {
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

@media (max-width: 390px) {
  html body #app .profile-reference-v4 > .profile-live-account {
    width: calc(100% - 40px) !important;
    margin-right: 20px !important;
    margin-left: 20px !important;
    padding-right: 16px !important;
    padding-left: 16px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button,
  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:hover,
  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:active {
    grid-template-columns: 36px minmax(0, 1fr) 25px !important;
    grid-template-rows: 36px minmax(36px, auto) !important;
    column-gap: 6px !important;
    min-height: 104px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-icon {
    width: 36px !important;
    height: 36px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button > svg:last-child {
    width: 25px !important;
    height: 25px !important;
    padding: 6px !important;
  }
}

@media (max-width: 350px) {
  html body #app .profile-reference-v4 > .profile-live-account {
    width: calc(100% - 28px) !important;
    margin-right: 14px !important;
    margin-left: 14px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list {
    gap: 8px 7px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button,
  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:hover,
  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button:active {
    grid-template-columns: 34px minmax(0, 1fr) 24px !important;
    grid-template-rows: 34px minmax(37px, auto) !important;
    min-height: 102px !important;
    padding: 10px 8px 9px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-icon {
    width: 34px !important;
    height: 34px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-copy > b {
    font-size: 14px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list .profile-account-copy > small {
    font-size: 10px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account > footer {
    gap: 8px !important;
  }

  html body #app .profile-reference-v4 > .profile-live-account > footer > button,
  html body #app .profile-reference-v4 > .profile-live-account > footer > button:hover,
  html body #app .profile-reference-v4 > .profile-live-account > footer > button:active {
    min-width: 105px !important;
    padding-right: 12px !important;
    padding-left: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > button,
  html body #app .profile-reference-v4 > .profile-live-account > footer > button {
    transition: none !important;
  }
}

/* ===== character-switch-unlock-v128.css ===== */
/* Character switch gate: 50-stage lock, unlock notice, and maker handoff. */
#app .character-confirm-backdrop.character-gate-backdrop {
  position: fixed !important;
  z-index: 180 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: max(76px, env(safe-area-inset-top)) 12px max(28px, env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

#app .character-gate-dialog.character-final-confirm {
  width: min(calc(100% - 8px), 388px) !important;
  max-width: 388px !important;
  padding: 98px 34px 26px !important;
  overflow: visible !important;
  transform: translateY(8px) !important;
}

#app .character-gate-dialog.character-final-confirm:focus {
  outline: none !important;
}

#app .character-gate-dialog.character-final-confirm:focus-visible::before {
  box-shadow:
    0 0 0 4px rgba(232, 111, 85, .56),
    0 12px 30px rgba(44, 34, 25, .11) !important;
}

#app .character-gate-dialog .character-gate-avatar {
  background-color: #fff0b9 !important;
  background-image:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .66), transparent 59%),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") !important;
}

#app .character-gate-dialog.character-gate-jarin .character-gate-avatar {
  background-color: #dff0f6 !important;
}

#app .character-gate-dialog .character-gate-avatar .character-confirm-maker-figure {
  top: 2px !important;
  width: 130px !important;
  height: 228px !important;
}

#app .character-gate-dialog .character-gate-avatar .character-maker-shirt-overlay {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center top !important;
}

#app .character-gate-dialog.is-locked .character-gate-avatar .character-confirm-maker-figure {
  opacity: .38 !important;
  filter: grayscale(.76) saturate(.45) !important;
}

#app .character-gate-lock,
#app .character-gate-spark {
  position: absolute !important;
  z-index: 5 !important;
  right: 7px !important;
  bottom: 8px !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  color: #fffaf0 !important;
  background: #806c58 !important;
  border: 4px solid #fff9e9 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 9px rgba(63, 44, 28, .18) !important;
}

#app .character-gate-spark {
  color: #8d581f !important;
  background: #ffd769 !important;
  font-size: 21px !important;
  transform: rotate(8deg) !important;
}

#app .character-gate-dialog.character-final-confirm h2 {
  max-width: 310px !important;
  margin-right: auto !important;
  margin-left: auto !important;
  font-size: clamp(25px, 6.4vw, 29px) !important;
  line-height: 1.17 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#app .character-gate-dialog.character-final-confirm > p {
  max-width: 300px !important;
  margin: 14px auto 0 !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#app .character-gate-progress {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 15px 0 0 !important;
  padding: 11px 13px 12px !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  color: #644333 !important;
  background: rgba(255, 247, 222, .72) !important;
  border: 1px dashed rgba(178, 126, 79, .4) !important;
  border-radius: 14px 11px 15px 12px !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
}

#app .character-gate-progress > span {
  min-width: 57px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#app .character-gate-progress > span b {
  color: #dc6f59 !important;
  font-size: 22px !important;
}

#app .character-gate-progress > i {
  position: relative !important;
  width: 100% !important;
  height: 9px !important;
  overflow: hidden !important;
  background: rgba(111, 85, 59, .13) !important;
  border-radius: 999px !important;
}

#app .character-gate-progress > i > em {
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: var(--character-gate-progress) !important;
  max-width: 100% !important;
  background: linear-gradient(90deg, #e9836d, #f2b865) !important;
  border-radius: inherit !important;
  transition: width 220ms ease !important;
}

#app .character-gate-dialog.is-unlocked .character-gate-progress > i > em {
  background: linear-gradient(90deg, #87bba4, #efbd55) !important;
}

#app .character-gate-dialog.character-final-confirm > small {
  margin-top: 13px !important;
  padding-top: 14px !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#app .character-gate-dialog.character-final-confirm .character-gate-actions {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.48fr) !important;
  margin-top: 16px !important;
}

#app .character-gate-dialog.character-final-confirm .character-gate-actions button {
  white-space: normal !important;
  word-break: keep-all !important;
}

#app .character-gate-dialog.character-final-confirm .character-gate-actions button:focus-visible {
  outline: 3px solid rgba(70, 117, 141, .68) !important;
  outline-offset: 3px !important;
}

@media (max-width: 370px), (max-height: 720px) {
  #app .character-confirm-backdrop.character-gate-backdrop {
    padding-top: max(64px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  #app .character-gate-dialog.character-final-confirm {
    width: min(calc(100% - 4px), 346px) !important;
    padding: 88px 23px 20px !important;
    transform: translateY(5px) !important;
  }

  #app .character-gate-dialog .character-gate-avatar {
    top: -54px !important;
    width: 132px !important;
    height: 132px !important;
  }

  #app .character-gate-dialog .character-gate-avatar .character-confirm-maker-figure {
    width: 118px !important;
    height: 207px !important;
  }

  #app .character-gate-dialog.character-final-confirm h2 {
    font-size: 25px !important;
  }

  #app .character-gate-dialog.character-final-confirm > p {
    margin-top: 10px !important;
    font-size: 14px !important;
  }

  #app .character-gate-progress {
    margin-top: 11px !important;
    padding: 9px 11px 10px !important;
  }

  #app .character-gate-dialog.character-final-confirm > small {
    margin-top: 10px !important;
    padding-top: 11px !important;
    font-size: 13px !important;
  }

  #app .character-gate-dialog.character-final-confirm .character-gate-actions {
    margin-top: 11px !important;
    gap: 7px !important;
  }

  #app .character-gate-dialog.character-final-confirm .character-gate-actions button {
    min-height: 52px !important;
    font-size: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .character-gate-progress > i > em {
    transition: none !important;
  }
}

/* ===== home-progress-line-redraw-v130.css ===== */
/*
 * Home progress line redraw v130.
 * Keep the approved paper card, but make the completed and remaining paths
 * read as one continuous hand-drawn progress line.
 */

#app .home-reference-v4 .home-ref-progress-line {
  position: relative !important;
  display: block !important;
  width: 118px !important;
  height: 5px !important;
  margin-top: 14px !important;
  overflow: visible !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(210, 174, 121, .08)),
    #e8d7b8 !important;
  box-shadow:
    inset 0 1px 1px rgba(111, 75, 39, .13),
    0 1px 0 rgba(255, 255, 255, .62) !important;
  transform: rotate(-.25deg) !important;
}

/* Remove the old fixed start dot. The moving dot now shows current progress. */
#app .home-reference-v4 .home-ref-progress-line::before {
  content: none !important;
}

#app .home-reference-v4 .home-ref-progress-line i {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  min-width: 0 !important;
  height: 5px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(180deg, #eb755b 0%, #db5d43 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 1px 1px rgba(154, 61, 39, .14) !important;
}

#app .home-reference-v4 .home-ref-progress-line i::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(190, 69, 43, .14);
  border-radius: 52% 48% 55% 45% / 49% 55% 45% 51%;
  background: #df6247;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 1px 2px rgba(132, 57, 38, .17);
  transform: translate(50%, -50%) rotate(5deg);
}

#app .home-reference-v4 .home-ref-progress-line i[style*="width:0%"]::after {
  opacity: 0;
}

#app .home-reference-v4 .home-ref-progress > strong {
  margin-top: 12px !important;
}

/* ===== stage-progress-spacing-v131.css ===== */
/*
 * Stage progress card spacing v131.
 * Put the bar on its own row so 0 / 100 through 100 / 100 can never collide.
 */

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress {
  height: 88px !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: 14px 28px 6px 13px !important;
  gap: 3px 0 !important;
  padding: 10px 12px 8px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > span {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > i {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 6px !important;
}

html body #app .home-meal-reference-v1
  > .home-meal-ref-sticky-heading > .home-meal-ref-progress > strong {
  grid-column: 1 !important;
  grid-row: 4 !important;
  align-self: end !important;
}

/* ===== profile-sticker-earned-v132.css ===== */
/* Profile sticker earned-state clarity v132. */

#app .profile-reference-v4 .profile-ref-sticker.earned {
  border-color: rgba(205, 133, 83, .42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    0 2px 5px rgba(105, 73, 43, .08) !important;
}

#app .profile-reference-v4 .profile-ref-sticker.earned img {
  opacity: 1 !important;
  filter:
    saturate(1.12)
    contrast(1.04)
    drop-shadow(0 2px 2px rgba(95, 67, 43, .12)) !important;
}

/* ===== profile-account-underline-remove-v133.css ===== */
/* Remove only the coral brush underline from the profile/account heading. */

html body #app .profile-reference-v4 > .profile-live-account > header::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* ===== stage-locked-muted-v134.css ===== */
/* Locked stage hierarchy — 2026-08-06.
 * Keep the active and cleared cards vivid while letting future stages recede.
 */

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked {
  background-color: rgba(235, 232, 221, .95) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-position: center !important;
  background-size: 190px 190px !important;
  box-shadow: inset 0 0 0 1px rgba(119, 108, 89, .12) !important;
  filter: drop-shadow(1px 2px 3px rgba(82, 68, 49, .06)) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-food img {
  opacity: .48 !important;
  filter: grayscale(.42) saturate(.28) contrast(.9) brightness(1.08) !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-stage-copy > b {
  color: #a08f78 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-stage-copy > strong {
  color: #71685c !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-stage-copy > small {
  color: #8a7d6b !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-lock-icon {
  background-color: #998b76 !important;
}

html body #app .home-meal-reference-v1
  .home-meal-ref-stage-card.home-meal-ref-status-locked
  .home-meal-ref-lock-icon::before {
  border-color: #998b76 !important;
  border-bottom-color: transparent !important;
}

/* ===== profile-title-medallion-v135.css ===== */
/* Ribbon-medallion title collection selected from Product Design option 3. */

#app .profile-reference-v4 .profile-ref-titles {
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 22px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: #fcf8ef !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 160px 160px !important;
  box-shadow: 0 2px 8px rgba(77, 53, 29, .08) !important;
  filter: none !important;
}

#app .profile-reference-v4 .profile-ref-titles::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px 9px;
  border: 1px dashed rgba(174, 136, 91, .24);
  border-radius: 18px;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-titles > header,
#app .profile-reference-v4 .profile-ref-title-grid {
  z-index: 2;
}

#app .profile-reference-v4 .profile-ref-titles > header h2 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

#app .profile-reference-v4 .profile-ref-titles > header h2::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 20px;
  width: 74px;
  border-bottom: 1px dashed rgba(231, 110, 83, .42);
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-title-heading-motif {
  width: 13px !important;
  height: 13px !important;
  display: grid !important;
  place-items: center !important;
  color: #e96f52 !important;
}

#app .profile-reference-v4 .profile-ref-title-heading-motif svg {
  width: 100% !important;
  height: 100% !important;
}

#app .profile-reference-v4 .profile-ref-title-summary {
  gap: 7px !important;
}

#app .profile-reference-v4 .profile-ref-title-summary > button {
  min-width: 79px !important;
  height: 25px !important;
  padding: 0 9px 1px !important;
  border: 1px dashed rgba(231, 110, 83, .72) !important;
  border-radius: 999px !important;
  background-color: rgba(255, 249, 237, .94) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  color: #df6049 !important;
  box-shadow: 0 1px 2px rgba(113, 78, 42, .07) !important;
}

#app .profile-reference-v4 .profile-ref-title-grid {
  top: 41px !important;
  right: 16px !important;
  left: 16px !important;
  height: 100px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  row-gap: 3px !important;
  column-gap: 12px !important;
  overflow: visible !important;
}

#app .profile-reference-v4 .profile-ref-title-grid > .profile-ref-title-badge {
  position: relative !important;
  min-width: 0 !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 4px 8px 5px !important;
  border: 1px solid var(--title-medallion-border, #9abda0) !important;
  border-radius: 50% !important;
  clip-path: none !important;
  color: #472d20 !important;
  background-color: var(--title-medallion-paper, #e4f0e2) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 96px 96px !important;
  box-shadow: 0 1px 3px rgba(98, 73, 43, .08) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  isolation: isolate;
}

#app .profile-reference-v4 .profile-ref-title-grid > .profile-ref-title-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px 4px;
  border: 1px dashed color-mix(in srgb, var(--title-medallion-border, #9abda0) 78%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-1 {
  --title-medallion-paper: #e4f0e2;
  --title-medallion-border: #97b99c;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-2 {
  --title-medallion-paper: #f6e8b6;
  --title-medallion-border: #d5ba68;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-3 {
  --title-medallion-paper: #deedf4;
  --title-medallion-border: #8eb8cf;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-4 {
  --title-medallion-paper: #f3ddda;
  --title-medallion-border: #dfa196;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-5 {
  --title-medallion-paper: #e2eee0;
  --title-medallion-border: #9db99b;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-6 {
  --title-medallion-paper: #ece6dc;
  --title-medallion-border: #b8aa98;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-motif {
  position: absolute !important;
  z-index: -1 !important;
  inset: 4px auto auto 50% !important;
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--title-medallion-border, #97b99c) !important;
  opacity: .25 !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-motif svg {
  width: 100% !important;
  height: 100% !important;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-label {
  position: relative !important;
  z-index: 2 !important;
  max-width: calc(100% - 12px) !important;
  color: #472d20 !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.04 !important;
  letter-spacing: -.045em !important;
  text-align: center !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  white-space: nowrap !important;
  transform: translateY(7px) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.badge-3 .profile-ref-title-label,
#app .profile-reference-v4 .profile-ref-title-badge.badge-4 .profile-ref-title-label,
#app .profile-reference-v4 .profile-ref-title-badge.badge-5 .profile-ref-title-label {
  max-width: calc(100% - 8px) !important;
  font-size: 10px !important;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-ribbon {
  position: absolute !important;
  z-index: 4 !important;
  bottom: -5px !important;
  left: 50% !important;
  width: 26px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-lock {
  position: absolute !important;
  z-index: 3 !important;
  right: 0 !important;
  bottom: 3px !important;
  left: 0 !important;
  height: 13px !important;
  display: grid !important;
  place-items: center !important;
  color: #8b7c69 !important;
  opacity: .78 !important;
}

#app .profile-reference-v4 .profile-ref-title-badge .profile-ref-title-lock svg {
  width: 12px !important;
  height: 12px !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.locked {
  color: #8a7d6d !important;
  background-color: #ece6dc !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

#app .profile-reference-v4 .profile-ref-title-badge.locked .profile-ref-title-label {
  color: #8a7d6d !important;
  transform: translateY(2px) !important;
}

#app .profile-reference-v4 .profile-ref-title-badge:focus-visible,
#app .profile-reference-v4 .profile-ref-title-summary > button:focus-visible,
#app .mono-preview-page .profile-title-sheet-close:focus-visible {
  outline: 2px solid #e96f52 !important;
  outline-offset: 2px !important;
}

/* Full collection archive: the same medallion language, with all ten titles. */
#app .mono-preview-page .profile-title-sheet {
  background-color: #fffaf0 !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 180px 180px !important;
}

#app .mono-preview-page .profile-title-sheet-head {
  background-color: rgba(255, 250, 239, .96) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 150px 150px !important;
}

#app .mono-preview-page .profile-title-sheet-grid {
  gap: 14px 11px !important;
  padding: 18px 16px max(32px, env(safe-area-inset-bottom)) !important;
}

#app .mono-preview-page .profile-title-sheet-item {
  --title-medallion-paper: #e4f0e2;
  --title-medallion-border: #97b99c;
  position: relative !important;
  min-width: 0 !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr auto !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
  overflow: visible !important;
  padding: 18px 14px 19px !important;
  border: 1px solid var(--title-medallion-border) !important;
  border-radius: 50% !important;
  color: #472d20 !important;
  background-color: var(--title-medallion-paper) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 112px 112px !important;
  box-shadow: 0 2px 5px rgba(98, 73, 43, .08) !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  isolation: isolate;
}

#app .mono-preview-page .profile-title-sheet-item::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 6px;
  border: 1px dashed color-mix(in srgb, var(--title-medallion-border) 78%, transparent);
  border-radius: 50%;
  pointer-events: none;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(5n + 1) {
  --title-medallion-paper: #e4f0e2;
  --title-medallion-border: #97b99c;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(5n + 2) {
  --title-medallion-paper: #f6e8b6;
  --title-medallion-border: #d5ba68;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(5n + 3) {
  --title-medallion-paper: #deedf4;
  --title-medallion-border: #8eb8cf;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(5n + 4) {
  --title-medallion-paper: #f3ddda;
  --title-medallion-border: #dfa196;
}

#app .mono-preview-page .profile-title-sheet-item:nth-child(5n) {
  --title-medallion-paper: #e2eee0;
  --title-medallion-border: #9db99b;
}

#app .mono-preview-page .profile-title-sheet-item .profile-title-sheet-motif {
  position: absolute !important;
  z-index: -1 !important;
  inset: 50% auto auto 50% !important;
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--title-medallion-border) !important;
  opacity: .17 !important;
  transform: translate(-50%, -53%) !important;
  pointer-events: none;
}

#app .mono-preview-page .profile-title-sheet-item .profile-title-sheet-motif svg {
  width: 100% !important;
  height: 100% !important;
}

#app .mono-preview-page .profile-title-sheet-item b {
  position: relative !important;
  z-index: 2 !important;
  max-width: 124px !important;
  align-self: end !important;
  color: inherit !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -.04em !important;
  text-align: center !important;
  word-break: keep-all !important;
}

#app .mono-preview-page .profile-title-sheet-item small {
  position: relative !important;
  z-index: 2 !important;
  align-self: start !important;
  color: rgba(91, 65, 43, .72) !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}

#app .mono-preview-page .profile-title-sheet-item .profile-title-sheet-ribbon {
  position: absolute !important;
  z-index: 4 !important;
  bottom: -8px !important;
  left: 50% !important;
  width: 46px !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  transform: translateX(-50%) !important;
  pointer-events: none;
}

#app .mono-preview-page .profile-title-sheet-item .profile-title-sheet-lock {
  position: absolute !important;
  z-index: 3 !important;
  bottom: 9px !important;
  left: 50% !important;
  display: grid !important;
  place-items: center !important;
  color: #8a7d6d !important;
  opacity: .8 !important;
  transform: translateX(-50%) !important;
}

#app .mono-preview-page .profile-title-sheet-item.locked {
  --title-medallion-paper: #ece6dc;
  --title-medallion-border: #b8aa98;
  color: #857867 !important;
  background-color: #ece6dc !important;
  filter: none !important;
  opacity: 1 !important;
}

#app .mono-preview-page .profile-title-sheet-item.locked b,
#app .mono-preview-page .profile-title-sheet-item.locked small {
  transform: translateY(-4px) !important;
}

@media (max-width: 360px), (max-height: 620px) {
  #app .mono-preview-page .profile-title-sheet-grid {
    gap: 12px 8px !important;
    padding: 14px 10px 28px !important;
  }

  #app .mono-preview-page .profile-title-sheet-item {
    min-height: 92px !important;
    padding: 15px 9px 17px !important;
  }

  #app .mono-preview-page .profile-title-sheet-item b {
    max-width: 112px !important;
    font-size: 13.5px !important;
  }
}

/* ===== profile-title-spacing-v136.css ===== */
/* Give the two title-medallion rows enough breathing room for their ribbons. */

#app .profile-reference-v4 .profile-ref-titles {
  height: 176px !important;
}

#app .profile-reference-v4 .profile-ref-title-grid {
  height: 114px !important;
  row-gap: 16px !important;
}

/* Keep every following profile section aligned after the 24px expansion. */
#app .profile-reference-v4 .profile-ref-stickers {
  top: 554px !important;
}

#app .profile-reference-v4 .profile-ref-allergies {
  top: 792px !important;
}

#app .profile-reference-v4 {
  padding-top: 890px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-custom) {
  padding-top: 927px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-editor) {
  padding-top: 940px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  padding-top: 977px !important;
}

/* ===== profile-sticker-frame-v137.css ===== */
/* Match the sticker board to the stitched inner frame used by title collection. */

#app .profile-reference-v4 .profile-ref-stickers::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px 9px;
  border: 1px dashed rgba(174, 136, 91, .24);
  border-radius: 18px;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-stickers > header,
#app .profile-reference-v4 .profile-ref-sticker-grid,
#app .profile-reference-v4 .profile-ref-view-all {
  z-index: 2;
}

/* ===== profile-allergy-frame-v138.css ===== */
/* Match the allergy card to the stitched inner frames used above it. */

#app .profile-reference-v4 .profile-ref-allergies::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 7px 9px;
  border: 1px dashed rgba(174, 136, 91, .24);
  border-radius: 18px;
  pointer-events: none;
}

#app .profile-reference-v4 .profile-ref-allergies > header,
#app .profile-reference-v4 .profile-ref-allergy-list,
#app .profile-reference-v4 .profile-ref-allergy-editor {
  z-index: 2;
}

/* ===== profile-account-frame-v139.css ===== */
/* Remove the account-card corner decorations and use the shared stitched frame. */

html body #app .profile-reference-v4 > .profile-live-account {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 160px 160px !important;
}

html body #app .profile-reference-v4 > .profile-live-account::before {
  content: "" !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: 7px 9px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  opacity: 1 !important;
  border: 1px dashed rgba(174, 136, 91, .24) !important;
  border-radius: 18px !important;
  background: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account > header,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list,
html body #app .profile-reference-v4 > .profile-live-account > footer {
  position: relative !important;
  z-index: 2 !important;
}

/* ===== home-meal-stage100-finale-v140.css ===== */
/* Product Design option 3: stitched scallop finale banner for the home-meal summit. */

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish {
  position: relative !important;
  isolation: isolate !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 5 !important;
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 8px 18px !important;
  padding: 0 !important;
  overflow: visible !important;
  clip-path: none !important;
  color: var(--meal-ink) !important;
  background: transparent !important;
  filter: drop-shadow(0 4px 4px rgba(83, 61, 34, .12)) !important;
  text-align: center !important;
}

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets/ui/home-meal-stage-100-finale-frame-v140.png") center / 100% 100% no-repeat;
  pointer-events: none;
}

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > span,
html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > strong,
html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > small {
  position: absolute !important;
  z-index: 1 !important;
  right: 0 !important;
  left: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > span {
  top: 17px !important;
  color: #4f291b !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > strong {
  top: 43px !important;
  color: #3a1b0d !important;
  font-family: var(--bap-primary-title-font, "Bap Memoment Kkukkukk", "Bap Jua", sans-serif) !important;
  font-size: 29px !important;
  font-weight: 400 !important;
  letter-spacing: -.045em !important;
}

html body #app#app#app .home-meal-reference-v1
  .home-meal-ref-continuation > .home-meal-ref-finish > small {
  top: 88px !important;
  color: #402415 !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", cursive !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

@media (max-width: 390px) {
  html body #app#app#app .home-meal-reference-v1
    .home-meal-ref-continuation > .home-meal-ref-finish > span {
    top: 16px !important;
    font-size: 9px !important;
  }

  html body #app#app#app .home-meal-reference-v1
    .home-meal-ref-continuation > .home-meal-ref-finish > strong {
    top: 39px !important;
    font-size: 26px !important;
  }

  html body #app#app#app .home-meal-reference-v1
    .home-meal-ref-continuation > .home-meal-ref-finish > small {
    top: 80px !important;
    font-size: 11px !important;
  }
}

/* ===== character-outfit-milestones-v143.css ===== */
/*
 * Character milestone outfits v143
 *
 * This is the final, native UI layer for the 20 / 40 / 70 / 100 stage
 * wardrobe flow. It deliberately reuses the approved watercolor character
 * maker and its exact 410 x 720 artwork canvas, so the same selected outfit
 * can be stacked without a crop jump on Home, Feed, Profile and Ranking.
 */

#app {
  --outfit-ink: #4a2d1b;
  --outfit-coral: #e8755d;
  --outfit-coral-deep: #d95f48;
  --outfit-paper: #fffaf0;
  --outfit-gold: #e6b44d;
  --outfit-mint: #dcebdc;
}

/* Shared 410 x 720 artwork stack --------------------------------------- */

#app .character-art-stack {
  position: relative;
  isolation: isolate;
  display: block;
}

#app .character-art-stack > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Body and head use the same canvas. Never move either layer by itself. */
#app img.character-outfit-body,
#app .character-outfit-body {
  z-index: 1 !important;
}

#app img.character-outfit-head,
#app .character-outfit-head,
#app .home-ref-character-overlay,
#app .profile-ref-character-overlay,
#app .feed-avatar-shirt-layer,
#app .ranking-character-shirt,
#app .character-maker-shirt-overlay {
  z-index: 3 !important;
}

#app :is(
    .home-ref-character-art,
    .profile-ref-character > span,
    .feed-avatar-shell.feed-avatar-character,
    .social-avatar.feed-avatar-character,
    .ranking-character-art,
    .character-maker-figure,
    .character-confirm-maker-figure
  ) {
  isolation: isolate;
}

/* Unlock announcement -------------------------------------------------- */

#app .character-confirm-backdrop.character-outfit-unlock-backdrop {
  position: fixed !important;
  z-index: 210 !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding:
    max(76px, env(safe-area-inset-top))
    14px
    max(24px, env(safe-area-inset-bottom)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  background: rgba(64, 48, 38, .61) !important;
  -webkit-backdrop-filter: blur(3px) saturate(.82) !important;
  backdrop-filter: blur(3px) saturate(.82) !important;
}

#app .character-outfit-unlock-dialog.character-final-confirm {
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: min(100%, 388px) !important;
  max-width: 388px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 105px 31px 27px !important;
  overflow: visible !important;
  color: var(--outfit-ink) !important;
  transform: translateY(5px) !important;
}

#app .character-outfit-unlock-dialog.character-final-confirm::before {
  background:
    radial-gradient(circle at 13% 18%, rgba(246, 207, 100, .2), transparent 22%),
    radial-gradient(circle at 88% 78%, rgba(134, 190, 174, .18), transparent 27%),
    url("./assets/ui/final-confirm-watercolor-motifs-v1.svg") center / 100% 100% no-repeat,
    linear-gradient(rgba(255, 253, 246, .42), rgba(255, 248, 230, .38)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 48% / 164% auto !important;
  filter: contrast(1.01) saturate(.78) !important;
}

#app .character-outfit-unlock-dialog.character-final-confirm::after {
  opacity: .4 !important;
  background:
    linear-gradient(rgba(231, 116, 91, .78), rgba(231, 116, 91, .78)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") 50% 50% / 160% auto !important;
}

#app .character-outfit-unlock-avatar.character-confirm-maker {
  top: -60px !important;
  width: 150px !important;
  height: 150px !important;
  overflow: hidden !important;
  background-color: #fff0bd !important;
  background-image:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .73), transparent 61%),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") !important;
  box-shadow:
    0 0 0 7px rgba(255, 251, 238, .98),
    0 0 0 10px rgba(232, 117, 93, .42),
    0 10px 24px rgba(74, 45, 27, .14) !important;
}

#app .character-outfit-unlock-dialog.is-gobi .character-outfit-unlock-avatar,
#app .character-outfit-unlock-dialog.character-outfit-unlock-gobi .character-outfit-unlock-avatar {
  background-color: #f8dfd7 !important;
}

#app .character-outfit-unlock-avatar::after {
  position: absolute !important;
  z-index: 5 !important;
  right: 5px !important;
  bottom: 9px !important;
  width: 35px !important;
  height: 35px !important;
  display: grid !important;
  place-items: center !important;
  content: "\2726" !important;
  color: #8a5b22 !important;
  background: #ffd868 !important;
  border: 4px solid #fff9e9 !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 9px rgba(63, 44, 28, .16) !important;
  font-size: 19px !important;
  line-height: 1 !important;
  transform: rotate(8deg) !important;
}

#app .character-outfit-unlock-avatar .character-confirm-maker-figure {
  top: 0 !important;
  width: 134px !important;
  height: 235px !important;
}

#app .character-outfit-unlock-dialog .character-confirm-kicker {
  margin-bottom: 8px !important;
}

#app .character-outfit-unlock-stage {
  width: max-content !important;
  max-width: 100% !important;
  min-height: 30px !important;
  margin: 0 auto 12px !important;
  padding: 7px 14px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  color: #a94e3d !important;
  background: rgba(250, 222, 151, .58) !important;
  border: 1px dashed rgba(219, 112, 86, .58) !important;
  border-radius: 999px 948px 999px 936px !important;
  box-shadow: 0 4px 10px rgba(83, 58, 36, .05) !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  white-space: nowrap !important;
}

#app .character-outfit-unlock-dialog[data-tier="100"] .character-outfit-unlock-stage,
#app .character-outfit-unlock-dialog.is-tier-100 .character-outfit-unlock-stage {
  color: #72501c !important;
  background: rgba(250, 222, 132, .74) !important;
  border-color: rgba(185, 132, 40, .64) !important;
}

#app .character-outfit-unlock-dialog.character-final-confirm h2 {
  max-width: 315px !important;
  margin: 0 auto !important;
  color: #402919 !important;
  font-size: clamp(26px, 7.1vw, 31px) !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
}

#app .character-outfit-unlock-dialog .character-outfit-unlock-copy,
#app .character-outfit-unlock-dialog.character-final-confirm > p {
  max-width: 298px !important;
  margin: 13px auto 0 !important;
  color: #70584a !important;
  font-size: 15px !important;
  line-height: 1.48 !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

#app
  .character-confirm-dialog.character-final-confirm.character-outfit-unlock-dialog
  .character-outfit-unlock-actions.character-confirm-actions {
  width: 100% !important;
  margin-top: 19px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  gap: 9px !important;
}

#app
  .character-confirm-dialog.character-final-confirm.character-outfit-unlock-dialog
  .character-outfit-unlock-actions.character-confirm-actions
  button {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  justify-self: stretch !important;
  min-height: 56px !important;
  color: #fffdf7 !important;
  background: transparent url("./assets/ui/character-choice-coral-brush-v2.svg") center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app
  .character-confirm-dialog.character-final-confirm.character-outfit-unlock-dialog
  .character-outfit-unlock-actions.character-confirm-actions
  button.secondary {
  color: #735c4e !important;
  background: rgba(255, 250, 238, .74) !important;
  border: 1px dashed rgba(155, 110, 72, .38) !important;
  border-radius: 15px 13px 16px 12px !important;
}

#app
  .character-confirm-dialog.character-final-confirm.character-outfit-unlock-dialog
  .character-outfit-unlock-actions.character-confirm-actions
  button:focus-visible {
  outline: 3px solid rgba(78, 128, 151, .7) !important;
  outline-offset: 3px !important;
}

/* Outfit-only character maker ----------------------------------------- */

#app .character-maker-layout.is-outfit-only {
  --outfit-tier-accent: #e8755d;
  --outfit-tier-soft: rgba(250, 222, 151, .58);
}

#app .character-maker-layout.is-outfit-only[data-tier="40"],
#app .character-maker-layout.is-outfit-only.is-tier-40 {
  --outfit-tier-accent: #d99158;
  --outfit-tier-soft: rgba(244, 218, 153, .62);
}

#app .character-maker-layout.is-outfit-only[data-tier="70"],
#app .character-maker-layout.is-outfit-only.is-tier-70 {
  --outfit-tier-accent: #6f9e8c;
  --outfit-tier-soft: rgba(204, 230, 216, .66);
}

#app .character-maker-layout.is-outfit-only[data-tier="100"],
#app .character-maker-layout.is-outfit-only.is-tier-100 {
  --outfit-tier-accent: #c69536;
  --outfit-tier-soft: rgba(248, 222, 139, .68);
}

/* This flow keeps the saved nickname and hair; only clothing is editable. */
#app .character-maker-layout.is-outfit-only .character-maker-nickname,
#app .character-maker-layout.is-outfit-only .character-maker-hair-fieldset,
#app .character-maker-layout.is-outfit-only fieldset[data-outfit-part="hair"] {
  display: none !important;
}

/* Restore a native title in the header, which the original poster hid. */
#app .character-maker-layout.is-outfit-only .character-story-header {
  z-index: 40 !important;
  height: 7.5% !important;
  padding: max(3px, env(safe-area-inset-top)) 8px 0 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  background: rgba(255, 252, 241, .82) !important;
  border-bottom: 1px dashed rgba(218, 139, 95, .32) !important;
}

#app .character-maker-layout.is-outfit-only .character-story-header > button {
  width: 44px !important;
  height: 44px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--outfit-ink) !important;
  border-radius: 50% !important;
}

#app .character-maker-layout.is-outfit-only .character-story-header > button svg {
  width: 22px !important;
  height: 22px !important;
  opacity: 1 !important;
}

#app .character-maker-layout.is-outfit-only .character-story-header > span,
#app .character-maker-layout.is-outfit-only .character-story-header > b {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  opacity: 1 !important;
  color: var(--outfit-ink) !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: clamp(20px, 5.3vw, 24px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  text-align: center !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-preview {
  top: 7.5% !important;
  height: 52.5% !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-figure {
  top: 16% !important;
  width: 58% !important;
  height: 73% !important;
  isolation: isolate !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-figure > img {
  object-position: center bottom !important;
}

#app .character-outfit-tier {
  position: absolute !important;
  z-index: 15 !important;
  top: 9.4% !important;
  left: 50% !important;
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: calc(100% - 36px) !important;
  min-height: 31px !important;
  padding: 7px 15px 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #9b4c3c !important;
  background: var(--outfit-tier-soft) !important;
  border: 1px dashed color-mix(in srgb, var(--outfit-tier-accent) 68%, transparent) !important;
  border-radius: 999px 934px 999px 948px !important;
  box-shadow: 0 4px 12px rgba(85, 57, 34, .06) !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transform: translateX(-50%) rotate(-.5deg) !important;
}

#app .character-maker-layout.is-outfit-only .character-outfit-copy h1 {
  position: absolute !important;
  z-index: 18 !important;
  top: 8.9% !important;
  right: 9% !important;
  left: 9% !important;
  margin: 0 !important;
  color: var(--outfit-ink) !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: clamp(21px, 5.8vw, 26px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
  text-align: center !important;
  white-space: normal !important;
  word-break: keep-all !important;
}

@supports not (color: color-mix(in srgb, red, transparent)) {
  #app .character-outfit-tier {
    border-color: rgba(218, 112, 87, .52) !important;
  }
}

#app .character-outfit-helper {
  position: absolute !important;
  z-index: 16 !important;
  top: 55.2% !important;
  right: 8% !important;
  left: 8% !important;
  margin: 0 !important;
  color: #7b6557 !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
  text-align: center !important;
  word-break: keep-all !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls,
#app .character-maker-layout.is-outfit-only .character-maker-controls.character-outfit-controls,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls {
  top: 60% !important;
  height: 29.2% !important;
  display: grid !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid rgba(212, 168, 111, .18) !important;
  border-radius: 20px 20px 7px 7px !important;
  background:
    linear-gradient(rgba(255, 253, 245, .94), rgba(255, 250, 238, .95)),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp") center / 145% auto no-repeat,
    #fffaf0 !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28) !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls fieldset,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls fieldset,
#app .character-maker-layout.is-outfit-only .character-outfit-fieldset {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 8% 0 28% !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls fieldset::before,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls fieldset::before {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls fieldset:not(:last-child)::after,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls fieldset:not(:last-child)::after {
  right: 5% !important;
  bottom: 0 !important;
  left: 5% !important;
  display: block !important;
  height: 1px !important;
  content: "" !important;
  background: repeating-linear-gradient(90deg, rgba(213, 162, 105, .48) 0 5px, transparent 5px 10px) !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls fieldset:last-child::after,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls fieldset:last-child::after {
  content: none !important;
  display: none !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls legend,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls legend {
  top: 50% !important;
  left: 7.5% !important;
  width: 18% !important;
  gap: 7px !important;
  transform: translateY(-50%) !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-controls legend b,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls legend b {
  color: var(--outfit-tier-accent) !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-color-options,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-color-options,
#app .character-maker-layout.is-outfit-only .character-outfit-color-options {
  width: min(100%, 205px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: center !important;
  gap: clamp(14px, 5vw, 22px) !important;
  transform: none !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-color-options button,
#app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-color-options button {
  width: min(12.2vw, 50px) !important;
  max-width: 50px !important;
  min-width: 42px !important;
  aspect-ratio: 1 !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-color-options button.active::after,
#app .character-maker-layout.is-outfit-only .character-maker-color-options button[aria-pressed="true"]::after {
  inset: -4px !important;
  border-color: var(--outfit-tier-accent) !important;
  opacity: 1 !important;
}

#app .character-maker-layout.is-outfit-only .character-maker-color-options button.active::before,
#app .character-maker-layout.is-outfit-only .character-maker-color-options button[aria-pressed="true"]::before {
  background: var(--outfit-tier-accent) !important;
  opacity: 1 !important;
}

#app .character-maker-layout.is-outfit-only .character-story-select.character-maker-select,
#app .character-maker-layout.is-outfit-only .character-maker-select.character-outfit-apply {
  bottom: 2.1% !important;
  height: 6.7% !important;
}

#app .character-maker-layout.is-outfit-only .character-outfit-error {
  position: absolute !important;
  z-index: 32 !important;
  right: 7% !important;
  bottom: 9.2% !important;
  left: 7% !important;
  margin: 0 !important;
  color: #b14735 !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: center !important;
}

@media (max-width: 370px), (max-height: 720px) {
  #app .character-confirm-backdrop.character-outfit-unlock-backdrop {
    padding-top: max(66px, env(safe-area-inset-top)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }

  #app .character-outfit-unlock-dialog.character-final-confirm {
    width: min(100%, 348px) !important;
    padding: 91px 23px 21px !important;
  }

  #app .character-outfit-unlock-avatar.character-confirm-maker {
    top: -54px !important;
    width: 134px !important;
    height: 134px !important;
  }

  #app .character-outfit-unlock-avatar .character-confirm-maker-figure {
    width: 120px !important;
    height: 211px !important;
  }

  #app .character-outfit-unlock-stage {
    margin-bottom: 9px !important;
  }

  #app .character-outfit-unlock-dialog.character-final-confirm h2 {
    font-size: 25px !important;
  }

  #app .character-outfit-unlock-dialog .character-outfit-unlock-copy,
  #app .character-outfit-unlock-dialog.character-final-confirm > p {
    margin-top: 9px !important;
    font-size: 14px !important;
  }

  #app
    .character-confirm-dialog.character-final-confirm.character-outfit-unlock-dialog
    .character-outfit-unlock-actions.character-confirm-actions {
    margin-top: 13px !important;
  }

  #app .character-maker-layout.is-outfit-only .character-maker-preview {
    height: 51.7% !important;
  }

  #app .character-maker-layout.is-outfit-only .character-maker-figure {
    top: 16.5% !important;
    width: 54% !important;
    height: 72% !important;
  }

  #app .character-maker-layout.is-outfit-only .character-outfit-copy h1 {
    top: 8.8% !important;
    font-size: 21px !important;
  }

  #app .character-outfit-helper {
    top: 54.3% !important;
    font-size: 13px !important;
  }

  #app .character-maker-layout.is-outfit-only .character-maker-controls,
  #app .character-maker-layout.is-outfit-only .character-maker-controls.character-outfit-controls,
  #app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls {
    top: 59.2% !important;
    height: 29.8% !important;
  }

  #app .character-maker-layout.is-outfit-only .character-maker-controls fieldset,
  #app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-controls fieldset {
    padding-right: 6% !important;
    padding-left: 27% !important;
  }

  #app .character-maker-layout.is-outfit-only .character-maker-color-options button,
  #app .character-maker-layout.is-outfit-only.is-gobi-maker .character-maker-color-options button {
    width: 43px !important;
    min-width: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .character-outfit-unlock-backdrop,
  #app .character-outfit-unlock-dialog,
  #app .character-maker-layout.is-outfit-only * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== primary-nav-position-v163.css ===== */
/* Primary navigation position parity v163
 *
 * Keep the navigation frame on one shared geometry for Home, Feed, Stage,
 * Ranking and Profile. Older Home-only guards made the same bar depend on
 * which tab happened to render it, so this final layer deliberately avoids
 * every page-specific class.
 */

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
  grid-template-rows:
    0 minmax(0, 1fr) calc(80px + env(safe-area-inset-bottom)) !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav {
  position: relative !important;
  inset: auto !important;
  grid-row: 3 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  height: calc(80px + env(safe-area-inset-bottom)) !important;
  min-height: calc(80px + env(safe-area-inset-bottom)) !important;
  max-height: calc(80px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  padding: 7px 19px calc(7px + env(safe-area-inset-bottom)) !important;
  transform: none !important;
}

#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
#app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
  > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
  align-self: center !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  grid-template-rows: 44px 15px !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  transform: none !important;
}

@media (max-width: 560px) {
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav) {
    grid-template-rows: 0 minmax(0, 1fr) 80px !important;
  }

  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 6px 11px 4px !important;
  }

  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
  #app .page.mono-preview-page > .phone:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    grid-template-rows: 47px 15px !important;
    padding: 0 0 2px !important;
  }
}

/* ===== character-outfit-mobile-polish-v146.css ===== */
/*
 * Character outfit mobile polish v146
 * Keeps the stage badge inside the header grid and prevents the instruction
 * copy from leaving the polite ending by itself on narrow screens.
 */

#app
  .character-maker-layout.is-outfit-only
  .character-story-header > .character-outfit-tier {
  position: static !important;
  z-index: auto !important;
  top: auto !important;
  left: auto !important;
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  box-sizing: border-box !important;
  width: max-content !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 12px 5px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #9b4c3c !important;
  background: var(--outfit-tier-soft) !important;
  border: 1px dashed color-mix(in srgb, var(--outfit-tier-accent) 68%, transparent) !important;
  border-radius: 999px 934px 999px 948px !important;
  box-shadow: 0 4px 12px rgba(85, 57, 34, .06) !important;
  font-family: var(--bap-support-font, "Bap Omyu Pretty", sans-serif) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  letter-spacing: .01em !important;
  text-align: center !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  transform: none !important;
}

@supports not (color: color-mix(in srgb, red, transparent)) {
  #app
    .character-maker-layout.is-outfit-only
    .character-story-header > .character-outfit-tier {
    border-color: rgba(218, 112, 87, .52) !important;
  }
}

@media (max-width: 370px) {
  #app .character-outfit-helper {
    right: 4% !important;
    left: 4% !important;
    max-width: none !important;
  }
}

/* ===== character-outfit-surface-stack-v147.css ===== */
/*
 * Character outfit surface stack v147
 * Milestone outfits use two absolutely positioned 410 x 720 layers. Restore
 * each surface's original positioning context after the shared stack helper.
 */

#app .home-ref-character-art.character-art-stack {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

#app .ranking-reference-v4 .ranking-character-art.character-art-stack {
  position: absolute !important;
  display: block !important;
}

/* ===== ranking-long-name-wrap-v149.css ===== */
/* Ranking long-name wrapping v149 */

#app .ranking-reference-v4 .ranking-poster-podium > b.ranking-name-long {
  overflow: hidden !important;
  display: -webkit-box !important;
  font-size: 15px !important;
  line-height: 1.02 !important;
  letter-spacing: -.045em !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b.ranking-name-long {
  top: 83px !important;
  max-height: 31px !important;
  padding: 0 9px !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b.ranking-name-long + small {
  top: 118px !important;
  font-size: 10px !important;
}

#app .ranking-reference-v4 :is(.ranking-poster-second, .ranking-poster-third) .ranking-poster-podium > b.ranking-name-long {
  width: 74px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin-top: 3px !important;
  padding: 0 2px !important;
}

#app .ranking-reference-v4 :is(.ranking-poster-second, .ranking-poster-third) .ranking-poster-podium > b.ranking-name-long + small {
  width: 74px !important;
  margin-top: 2px !important;
  font-size: 10px !important;
}

#app .ranking-reference-v4 .ranking-poster-second .ranking-poster-podium > :is(b.ranking-name-long, b.ranking-name-long + small) {
  margin-right: auto !important;
  margin-left: 0 !important;
}

#app .ranking-reference-v4 .ranking-poster-third .ranking-poster-podium > :is(b.ranking-name-long, b.ranking-name-long + small) {
  margin-right: 0 !important;
  margin-left: auto !important;
}

#app .ranking-reference-v4 .ranking-poster-follower > b.ranking-name-long {
  min-width: 0 !important;
  max-height: 25px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  font-size: 12px !important;
  line-height: 1.02 !important;
  letter-spacing: -.035em !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

/* ===== social-avatar-breathing-room-v153.css ===== */
/* Keep circular social-profile portraits comfortably framed.
 * Character artwork uses the same 410 x 720 canvas for both the base avatar
 * and milestone body/head stacks, so every direct layer must share one crop. */
#app .feed-frame-phone
  .social-avatar.feed-avatar-character
  > img {
  top: 5% !important;
  left: 50% !important;
  width: 100% !important;
}

/* Jarin's painted silhouette is slightly left-heavy inside the source canvas. */
#app .feed-frame-phone
  .social-avatar.feed-avatar-character.feed-avatar-jarin
  > img {
  left: 52% !important;
}

/* Gobi's hair starts lower in the shared canvas, so use a smaller lift than
 * the old -13.9% crop while preserving the same visual headroom as Jarin. */
#app .feed-frame-phone
  .social-avatar.feed-avatar-character.feed-avatar-gobi
  > img {
  top: -4% !important;
}

/* ===== ranking-name-one-line-v156.css ===== */
/* Ranking names stay on one line; long names use a compact type size. */

#app .ranking-reference-v4 .ranking-poster-podium > b.ranking-name-long,
#app .ranking-reference-v4 .ranking-poster-follower > b.ranking-name-long {
  overflow: hidden !important;
  display: block !important;
  max-height: none !important;
  min-height: 0 !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: unset !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > b.ranking-name-long {
  width: 100% !important;
  padding-right: 4px !important;
  padding-left: 4px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b.ranking-name-long {
  top: 87px !important;
  max-height: 14px !important;
  padding-right: 6px !important;
  padding-left: 6px !important;
}

#app .ranking-reference-v4 .ranking-poster-first .ranking-poster-podium > b.ranking-name-long + small {
  top: 113px !important;
  font-size: 12px !important;
}

#app .ranking-reference-v4 :is(.ranking-poster-second, .ranking-poster-third) .ranking-poster-podium > b.ranking-name-long {
  width: 100% !important;
  max-height: 14px !important;
  margin: 8px 0 0 !important;
  padding-right: 2px !important;
  padding-left: 2px !important;
}

#app .ranking-reference-v4 :is(.ranking-poster-second, .ranking-poster-third) .ranking-poster-podium > b.ranking-name-long + small {
  width: 100% !important;
  margin: 7px 0 0 !important;
  font-size: 12px !important;
}

#app .ranking-reference-v4 .ranking-poster-follower > b.ranking-name-long {
  min-width: 0 !important;
  max-height: 13px !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}

#app .ranking-reference-v4 .ranking-poster-podium > b.ranking-name-extra-long,
#app .ranking-reference-v4 .ranking-poster-follower > b.ranking-name-extra-long {
  font-size: 10px !important;
  letter-spacing: -.055em !important;
}

/* ===== ranking-third-podium-center-v157.css ===== */
/* Keep the third-place name and stage label centered on the full podium. */

#app .ranking-reference-v4 .ranking-poster-person.ranking-poster-third .ranking-poster-podium > b.ranking-name-long,
#app .ranking-reference-v4 .ranking-poster-person.ranking-poster-third .ranking-poster-podium > b.ranking-name-long + small {
  right: auto !important;
  left: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
  align-self: stretch !important;
  text-align: center !important;
  transform: none !important;
}

#app .ranking-reference-v4 .ranking-poster-person.ranking-poster-third .ranking-poster-podium > b.ranking-name-long {
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  line-height: 18px !important;
}

/* ===== menu-title-two-line-v158.css ===== */
/* Long dessert and home-meal names use at most two lines. */

html body #app .home-reference-v4 .home-ref-recipe-copy > strong,
html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong,
html body #app .mono-preview-page .sheet.recipe-sheet .recipe-cover h2,
html body #app .reward-completion-modal .reward-completion-head h2,
html body #app .reward-completion-modal .reward-next-copy strong {
  overflow: hidden !important;
  display: -webkit-box !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: anywhere !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
}

html body #app .home-reference-v4 .home-ref-recipe-copy > strong {
  width: 100% !important;
  max-width: 100% !important;
  max-height: 2em !important;
  margin-top: 8px !important;
  font-size: clamp(28px, 7.5vw, 32px) !important;
  line-height: .96 !important;
  text-wrap: balance;
}

html body #app .home-reference-v4 .home-ref-recipe-copy > strong + em {
  margin-top: 5px !important;
}

html body #app .home-reference-v4 .home-ref-recipe.food-title-long .home-ref-recipe-copy {
  padding-top: 26px !important;
}

html body #app .home-reference-v4 .home-ref-recipe-copy > strong.food-title-long {
  max-height: 1.94em !important;
  margin-top: 7px !important;
  font-size: clamp(23px, 6.6vw, 27px) !important;
  line-height: .97 !important;
}

html body #app .home-reference-v4 .home-ref-recipe-copy > strong.food-title-extra-long {
  font-size: clamp(21px, 6vw, 24px) !important;
}

html body #app .home-reference-v4 .home-ref-recipe-copy > strong.food-title-long + em {
  margin-top: 3px !important;
  font-size: 14px !important;
}

html body #app .home-reference-v4 .home-ref-recipe.food-title-long .home-ref-start {
  bottom: 17px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong {
  max-width: 100% !important;
  max-height: 2em !important;
  margin-top: 4px !important;
  line-height: 1 !important;
  text-wrap: balance;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong + small {
  margin-top: 4px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong.food-title-long {
  margin-top: 3px !important;
  font-size: 16px !important;
  line-height: .96 !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card .home-meal-ref-stage-copy > strong.food-title-extra-long {
  font-size: 15px !important;
}

html body #app .home-meal-reference-v1 .home-meal-ref-stage-card.is-featured:not(.is-continuation) .home-meal-ref-stage-copy > strong.food-title-long {
  margin-top: 2px !important;
  font-size: 15px !important;
  line-height: .94 !important;
}

html body #app .mono-preview-page .sheet.recipe-sheet .recipe-cover h2,
html body #app .reward-completion-modal .reward-completion-head h2 {
  max-height: 2.12em !important;
  text-wrap: balance;
}

html body #app .mono-preview-page .sheet.recipe-sheet .recipe-cover h2.food-title-long {
  font-size: 32px !important;
  line-height: .98 !important;
}

html body #app .mono-preview-page .sheet.recipe-sheet .recipe-cover h2.food-title-extra-long {
  font-size: 29px !important;
}

html body #app .reward-completion-modal .reward-next-copy strong {
  max-height: 2.5em !important;
  text-wrap: balance;
}

/* ===== social-friend-code-v162.css ===== */
/* Friend code, nickname search, and server-backed follow UI. */

#app .feed-frame-phone .social-friend-code {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  margin-top: 13px;
  padding: 10px 11px 9px;
  border: 1px dashed rgba(222, 105, 79, .48);
  border-radius: 15px 12px 16px 11px / 12px 16px 11px 15px;
  background: rgba(255, 242, 205, .58);
  box-shadow: inset 0 0 0 3px rgba(255, 250, 240, .42);
}

#app .feed-frame-phone .social-friend-code > span {
  min-width: 0;
  display: grid;
  gap: 3px;
}

#app .feed-frame-phone .social-friend-code small {
  color: #d85e48;
  font-family: "Pretendard", sans-serif;
  font-size: 8px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .12em;
}

#app .feed-frame-phone .social-friend-code b {
  overflow: hidden;
  color: #47271b;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: text;
  -webkit-user-select: text;
}

#app .feed-frame-phone .social-friend-code > button {
  min-width: 68px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 7px 10px 8px;
  border: 1px solid rgba(216, 94, 72, .34);
  border-radius: 13px 10px 14px 9px;
  color: #a84232;
  background: rgba(255, 250, 240, .9);
  box-shadow: 1px 2px 4px rgba(100, 66, 31, .08);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#app .feed-frame-phone .social-friend-code-status {
  min-height: 12px;
  grid-column: 1 / -1;
  margin: -1px 1px 0;
  color: rgba(66, 79, 48, .82);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.25;
}

#app .feed-frame-phone .social-friend-code-status:empty {
  display: none;
}

#app .feed-frame-phone .social-search-toggle[aria-expanded="true"] {
  border-color: rgba(216, 94, 72, .52);
  color: #c94f3c;
  background: rgba(255, 235, 221, .94);
}

#app .feed-frame-phone .social-search-panel {
  position: relative;
  z-index: 1;
  margin: 14px 17px 2px;
  padding: 14px 13px 13px;
  border: 1px dashed rgba(187, 131, 76, .46);
  border-radius: 19px 15px 21px 14px / 15px 21px 14px 19px;
  background-color: rgba(255, 250, 240, .94);
  background-image: url("./assets/ui/profile-screenprint-texture-v1.svg");
  background-size: 112px 112px;
  box-shadow: 1px 3px 7px rgba(84, 58, 31, .08);
}

#app .feed-frame-phone .social-search-form {
  display: grid;
  gap: 7px;
  margin: 0;
}

#app .feed-frame-phone .social-search-form > label {
  color: #49291c;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

#app .feed-frame-phone .social-search-form > div {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

#app .feed-frame-phone .social-search-form input {
  min-width: 0;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(161, 116, 70, .34);
  border-radius: 13px 10px 14px 9px;
  color: #43271c;
  background: rgba(255, 255, 250, .9);
  box-shadow: inset 0 1px 3px rgba(86, 58, 28, .06);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

#app .feed-frame-phone .social-search-form input:focus {
  border-color: rgba(216, 94, 72, .7);
  box-shadow: 0 0 0 3px rgba(232, 117, 93, .12);
}

#app .feed-frame-phone .social-search-form button {
  min-width: 72px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(197, 78, 58, .36);
  border-radius: 13px 10px 14px 9px;
  color: #fffaf2;
  background: #df6a54;
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

#app .feed-frame-phone .social-search-form button:disabled,
#app .feed-frame-phone .social-follow-button:disabled {
  cursor: wait;
  opacity: .62;
}

#app .feed-frame-phone .social-search-help,
#app .feed-frame-phone .social-search-feedback {
  margin: 7px 1px 0;
  color: rgba(67, 39, 28, .62);
  font-size: 9px;
  font-weight: 750;
  line-height: 1.4;
}

#app .feed-frame-phone .social-search-feedback.is-error {
  color: #b74035;
}

#app .feed-frame-phone .social-search-feedback.is-success {
  color: #557345;
}

#app .feed-frame-phone .social-search-result-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed rgba(137, 99, 58, .25);
  color: #4a2b1e;
  font-size: 11px;
}

#app .feed-frame-phone .social-search-results {
  gap: 7px;
  margin: 8px 0 0;
  padding: 0;
}

#app .feed-frame-phone .social-search-results .social-user-row {
  background-color: rgba(255, 253, 247, .88);
}

@media (max-width: 370px) {
  #app .feed-frame-phone .social-friend-code {
    grid-template-columns: minmax(0, 1fr) 62px;
    padding-inline: 9px;
  }

  #app .feed-frame-phone .social-friend-code b {
    font-size: 14px;
    letter-spacing: .025em;
  }

  #app .feed-frame-phone .social-friend-code > button {
    min-width: 62px;
    padding-inline: 7px;
  }

  #app .feed-frame-phone .social-search-panel {
    margin-inline: 12px;
    padding-inline: 10px;
  }

  #app .feed-frame-phone .social-search-form button {
    min-width: 62px;
  }
}

/* ===== home-nav-mobile-parity-v164.css ===== */
/* Home mobile navigation parity v164
 *
 * The legacy Home poster rule has one extra class in its selector, so its
 * 64px desktop button geometry was still winning on mobile. Match that same
 * specificity here and give Home the exact 68px mobile geometry used by every
 * other primary tab.
 */

@media (max-width: 560px) {
  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    padding: 6px 11px 4px !important;
  }

  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button,
  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button:hover,
  #app .page.mono-preview-page
    > .phone.bapstage-home-v2:has(> .unified-reference-nav)
    > .editorial-tabs.unified-reference-nav.unified-reference-nav button.active {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    grid-template-rows: 47px 15px !important;
    gap: 1px !important;
    padding: 0 0 2px !important;
  }
}

/* ===== character-gate-contained-footer-v165.css ===== */
/* Keep the character unlock actions visibly inside the handmade-paper modal. */
#app .character-gate-dialog.character-final-confirm {
  width: min(calc(100% - 18px), 380px) !important;
  max-width: 380px !important;
  padding: 94px 28px 34px !important;
  transform: none !important;
}

#app .character-gate-dialog.character-final-confirm::before,
#app .character-gate-dialog.character-final-confirm::after {
  -webkit-mask: url("./assets/ui/final-confirm-deckle-mask-fluid-v165.svg")
    center / 100% 100% no-repeat !important;
  mask: url("./assets/ui/final-confirm-deckle-mask-fluid-v165.svg") center /
    100% 100% no-repeat !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-confirm-kicker {
  margin-bottom: 8px !important;
}

#app .character-gate-dialog.character-final-confirm h2 {
  max-width: 318px !important;
  font-size: clamp(25px, 6.35vw, 29px) !important;
  line-height: 1.16 !important;
}

#app .character-gate-dialog.character-final-confirm > p {
  margin-top: 12px !important;
  line-height: 1.45 !important;
}

#app .character-gate-dialog.character-final-confirm .character-gate-progress {
  margin-top: 13px !important;
}

#app .character-gate-dialog.character-final-confirm > small {
  margin-top: 12px !important;
  padding-top: 13px !important;
}

/* A padded inner footer keeps both actions away from the deckled paper edge. */
#app .character-gate-dialog.character-final-confirm .character-gate-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 10px 10px 11px !important;
  grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.42fr) !important;
  align-items: stretch !important;
  gap: 9px !important;
  overflow: hidden !important;
  background-color: rgba(255, 249, 232, 0.76) !important;
  background-image: url("./assets/illustrations/watercolor-paper-bg-v2.webp") !important;
  background-position: 50% 48% !important;
  background-size: 180% auto !important;
  border: 1px dashed rgba(178, 126, 79, 0.38) !important;
  border-radius: 15px 12px 16px 13px !important;
  box-shadow: inset 0 0 0 3px rgba(255, 253, 246, 0.36) !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-gate-actions
  button {
  min-height: 52px !important;
  padding: 9px 8px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  line-height: 1.12 !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-gate-actions
  button:first-child {
  padding: 9px 8px !important;
  color: #604737 !important;
  background-color: rgba(255, 253, 246, 0.76) !important;
  background-image: none !important;
  border: 1px solid rgba(181, 145, 106, 0.32) !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-gate-actions
  button:first-child::after {
  display: none !important;
  content: none !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-gate-actions
  button:last-child {
  min-height: 54px !important;
  padding: 9px 12px !important;
  background: url("./assets/ui/character-choice-coral-brush-v2.svg") center /
    calc(100% - 4px) calc(100% - 3px) no-repeat !important;
  border-radius: 12px !important;
  clip-path: none !important;
}

#app
  .character-gate-dialog.character-final-confirm
  .character-gate-actions
  button:last-child
  span {
  margin-left: 5px !important;
  font-size: 21px !important;
}

@media (max-width: 390px), (max-height: 760px) {
  #app .character-confirm-backdrop.character-gate-backdrop {
    padding-top: max(62px, env(safe-area-inset-top)) !important;
    padding-right: 10px !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
    padding-left: 10px !important;
  }

  #app .character-gate-dialog.character-final-confirm {
    width: min(calc(100% - 8px), 354px) !important;
    padding: 84px 20px 28px !important;
  }

  #app .character-gate-dialog .character-gate-avatar {
    top: -51px !important;
    width: 126px !important;
    height: 126px !important;
  }

  #app
    .character-gate-dialog
    .character-gate-avatar
    .character-confirm-maker-figure {
    width: 113px !important;
    height: 198px !important;
  }

  #app .character-gate-dialog.character-final-confirm h2 {
    font-size: 25px !important;
  }

  #app .character-gate-dialog.character-final-confirm > p {
    margin-top: 9px !important;
    font-size: 14px !important;
  }

  #app .character-gate-dialog.character-final-confirm .character-gate-progress {
    margin-top: 10px !important;
    padding: 9px 10px 10px !important;
  }

  #app .character-gate-dialog.character-final-confirm > small {
    margin-top: 9px !important;
    padding-top: 10px !important;
    font-size: 13px !important;
  }

  #app .character-gate-dialog.character-final-confirm .character-gate-actions {
    margin-top: 10px !important;
    padding: 8px !important;
    gap: 7px !important;
  }

  #app
    .character-gate-dialog.character-final-confirm
    .character-gate-actions
    button,
  #app
    .character-gate-dialog.character-final-confirm
    .character-gate-actions
    button:last-child {
    min-height: 48px !important;
    font-size: 14px !important;
  }
}

/* ===== welcome-launch-redesign-v166.css ===== */
/*
 * Welcome launch v166
 * A compact watercolor-paper entry screen built around the approved app icon.
 */

@font-face {
  font-family: "Bap Welcome Gaegu";
  src: url("./assets/fonts/Gaegu-Regular-subset.woff2?v=20260806-welcome-fast-v168") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "Bap Welcome Gaegu";
  src: url("./assets/fonts/Gaegu-Bold-subset.woff2?v=20260806-welcome-fast-v168") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: optional;
}

/*
 * The project body face is a large full Korean font. Keep the launch screen on
 * the tiny preloaded subset so text and controls never repaint a few moments
 * after the first frame.
 */
html body #app#app#app .table-welcome,
html body #app#app#app .table-welcome * {
  font-family: "Bap Welcome Gaegu", "Apple SD Gothic Neo", sans-serif !important;
  font-synthesis: none;
}

html body #app .table-welcome-shell {
  --welcome-ink: #3d2116;
  --welcome-coral: #ed6d58;
  --welcome-coral-deep: #d95442;
  --welcome-yellow: #f6cf67;
  --welcome-mint: #b8d5a7;
  --welcome-blue: #8ebed1;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden auto;
  padding:
    max(54px, calc(env(safe-area-inset-top) + 22px))
    18px
    max(22px, calc(env(safe-area-inset-bottom) + 16px));
  background-color: #fff9eb;
  background-image:
    radial-gradient(circle at 8% 14%, rgba(246, 207, 103, .34) 0 12%, transparent 29%),
    radial-gradient(circle at 96% 88%, rgba(142, 190, 209, .22) 0 11%, transparent 28%),
    url("./assets/illustrations/watercolor-paper-bg-v2.webp");
  background-position: center;
  background-size: auto, auto, cover;
  color: var(--welcome-ink);
}

html body #app .table-welcome-shell::before,
html body #app .table-welcome-shell::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(.2px);
}

html body #app .table-welcome-shell::before {
  top: max(74px, calc(env(safe-area-inset-top) + 42px));
  left: -48px;
  width: 128px;
  height: 128px;
  background: rgba(184, 213, 167, .42);
}

html body #app .table-welcome-shell::after {
  right: -34px;
  bottom: max(38px, calc(env(safe-area-inset-bottom) + 22px));
  width: 102px;
  height: 102px;
  background: rgba(237, 109, 88, .14);
}

html body #app .table-welcome {
  position: relative;
  width: min(100%, 430px);
  min-height: min(760px, calc(100dvh - max(98px, env(safe-area-inset-top))));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(26px, 4.6vh, 42px) 24px 24px;
  overflow: hidden;
  border: 1.5px dashed rgba(106, 72, 48, .24);
  border-radius: 34px;
  background: rgba(255, 252, 242, .78);
  box-shadow:
    0 18px 44px rgba(82, 55, 31, .09),
    inset 0 0 0 8px rgba(255, 255, 255, .24);
  text-align: center;
  backdrop-filter: blur(2px);
}

html body #app .table-welcome-header {
  width: 100%;
  display: grid;
  gap: 9px;
}

html body #app .table-welcome-kicker {
  color: var(--welcome-coral-deep);
  font-family: "Bap Welcome Gaegu", "Apple SD Gothic Neo", sans-serif !important;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .16em;
}

html body #app .table-welcome-rule {
  display: grid;
  grid-template-columns: 1fr 7px 1fr;
  align-items: center;
  gap: 8px;
}

html body #app .table-welcome-rule i {
  height: 1px;
  background: rgba(61, 33, 22, .2);
}

html body #app .table-welcome-rule span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--welcome-yellow);
}

html body #app .table-welcome-icon-wrap {
  position: relative;
  width: clamp(210px, 58vw, 252px);
  aspect-ratio: 1;
  margin: clamp(22px, 3.6vh, 34px) auto 18px;
}

html body #app .table-welcome-icon-wrap::before {
  content: "";
  position: absolute;
  inset: -11px;
  border: 2px solid rgba(237, 109, 88, .68);
  border-radius: 32%;
  transform: rotate(-2deg);
}

html body #app .table-welcome-icon-wrap::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 20% -14% -7% 32%;
  border-radius: 50%;
  background: rgba(246, 207, 103, .3);
  transform: rotate(-8deg);
}

html body #app .table-welcome-icon-wrap img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 29%;
  box-shadow: 0 12px 28px rgba(73, 46, 26, .14);
}

html body #app .table-welcome-sticker {
  position: absolute;
  z-index: 2;
  right: -20px;
  bottom: 10px;
  min-width: 74px;
  padding: 9px 10px 8px;
  border: 1px solid rgba(80, 53, 34, .2);
  border-radius: 50%;
  background: #f8dda0;
  box-shadow: 0 7px 15px rgba(70, 43, 25, .12);
  color: #5f3926;
  font-size: 13px;
  line-height: 1.05;
  transform: rotate(7deg);
}

html body #app .table-welcome-copy h1 {
  margin: 0;
  color: var(--welcome-ink);
  font-family: "Bap Welcome Gaegu", "Apple SD Gothic Neo", sans-serif !important;
  font-size: clamp(43px, 12vw, 56px);
  font-style: normal;
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.035em;
}

html body #app .table-welcome-copy h1 span,
html body #app .table-welcome-copy h1 strong {
  display: block;
  font: inherit;
}

html body #app .table-welcome-copy h1 strong {
  margin-top: 6px;
  color: var(--welcome-coral-deep);
}

html body #app .table-welcome-copy p {
  margin: 17px 0 0;
  color: #745848;
  font-size: 17px;
  line-height: 1.35;
}

html body #app .table-welcome-points {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

html body #app .table-welcome-points span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 7px;
  border: 1px dashed rgba(81, 53, 35, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .48);
  color: #5f4537;
  font-size: 13px;
  line-height: 1;
}

html body #app .table-welcome-points i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--welcome-mint);
}

html body #app .table-welcome-points span:nth-child(2) i {
  background: var(--welcome-coral);
}

html body #app .table-welcome-points span:nth-child(3) i {
  background: var(--welcome-blue);
}

html body #app .table-welcome-start {
  width: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(22px, 3.4vh, 32px);
  padding: 12px 17px 11px 20px;
  border: 0;
  border-radius: 22px;
  background: var(--welcome-coral);
  box-shadow:
    0 9px 0 rgba(190, 76, 59, .13),
    0 15px 24px rgba(165, 73, 55, .16);
  color: #fffdf5;
  text-align: left;
  transition: transform .18s ease, background-color .18s ease;
}

html body #app .table-welcome-start span {
  display: grid;
  gap: 3px;
  font-size: 21px;
  line-height: 1;
}

html body #app .table-welcome-start small {
  color: rgba(255, 255, 255, .74);
  font-family: "Bap Welcome Gaegu", "Apple SD Gothic Neo", sans-serif !important;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .12em;
}

html body #app .table-welcome-start b {
  width: 40px;
  height: 40px;
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  font-family: sans-serif !important;
  font-size: 23px;
  font-weight: 400;
}

html body #app .table-welcome-start:active {
  transform: translateY(3px) scale(.995);
}

html body #app .table-welcome-footer {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: rgba(85, 57, 40, .48);
}

html body #app .table-welcome-footer span {
  height: 1px;
  background: currentColor;
}

html body #app .table-welcome-footer p {
  margin: 0;
  font-family: "Bap Welcome Gaegu", "Apple SD Gothic Neo", sans-serif !important;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .1em;
}

html body #app .table-welcome-stitch {
  position: absolute;
  color: rgba(103, 159, 183, .56);
  font-family: sans-serif !important;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

html body #app .table-welcome-stitch-left {
  top: 22%;
  left: 15px;
  transform: rotate(-12deg);
}

html body #app .table-welcome-stitch-right {
  top: 11%;
  right: 18px;
  color: rgba(237, 109, 88, .42);
  transform: rotate(10deg);
}

@media (max-width: 560px) {
  html body #app .table-welcome-shell {
    display: block;
    padding-right: 14px;
    padding-left: 14px;
  }

  html body #app .table-welcome {
    width: 100%;
    min-height: calc(100dvh - max(76px, calc(env(safe-area-inset-top) + 34px)) - max(18px, env(safe-area-inset-bottom)));
  }
}

@media (max-height: 760px) {
  html body #app .table-welcome {
    justify-content: flex-start;
    min-height: auto;
    padding-top: 24px;
  }

  html body #app .table-welcome-icon-wrap {
    width: 184px;
    margin-top: 18px;
    margin-bottom: 14px;
  }

  html body #app .table-welcome-copy h1 {
    font-size: 40px;
  }

  html body #app .table-welcome-copy p {
    margin-top: 12px;
    font-size: 15px;
  }

  html body #app .table-welcome-points {
    margin-top: 14px;
  }

  html body #app .table-welcome-start {
    min-height: 64px;
    margin-top: 18px;
  }

  html body #app .table-welcome-footer {
    margin-top: 18px;
  }
}

@media (max-width: 360px) {
  html body #app .table-welcome {
    padding-right: 18px;
    padding-left: 18px;
  }

  html body #app .table-welcome-icon-wrap {
    width: 196px;
  }

  html body #app .table-welcome-sticker {
    right: -10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #app .table-welcome-start {
    transition: none;
  }
}

/* ===== ranking-winner-medal-spacing-v167.css ===== */
/* Separate the first-place medal tails from the rank numeral. */
#app
  .ranking-reference-v4
  .ranking-poster-first
  .ranking-winner-medal {
  top: -25px !important;
}

/* ===== home-character-progress-spacing-v169.css ===== */
/* Keep the mobile progress card clear of the character silhouette. */
@media (max-width: 410px) {
  #app .home-reference-v4 .home-ref-progress {
    right: 8px !important;
    width: 136px !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  #app .home-reference-v4 .home-ref-progress-line {
    width: 110px !important;
  }
}

/* ===== empty-community-layout-v180.css ===== */
/* Intentional empty states after the launch fixtures were removed. */

#app .feed-reference-v3 .feed-empty-community {
  position: relative;
  min-height: 248px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: 24px 28px 22px;
  border: 1.5px dashed rgba(198, 142, 113, .54);
  border-radius: 24px 19px 25px 21px;
  background:
    radial-gradient(circle at 9% 18%, rgba(143, 190, 209, .16) 0 5px, transparent 6px),
    radial-gradient(circle at 91% 82%, rgba(231, 111, 89, .15) 0 5px, transparent 6px),
    rgba(255, 251, 241, .94);
  box-shadow: 0 5px 16px rgba(91, 66, 38, .08);
  color: var(--feed-ink, #4d2d22);
}

#app .feed-reference-v3:has(.feed-empty-community) {
  min-height: calc(100dvh - 76px);
}

#app .feed-reference-v3 .feed-empty-place-setting {
  position: relative;
  width: 104px;
  height: 88px;
  margin-bottom: 12px;
}

#app .feed-reference-v3 .feed-empty-plate {
  position: absolute;
  top: 0;
  left: 50%;
  width: 82px;
  height: 82px;
  border: 1.5px solid rgba(210, 164, 111, .54);
  border-radius: 50%;
  background: rgba(255, 255, 251, .92);
  box-shadow:
    inset 0 0 0 9px rgba(247, 221, 160, .36),
    0 5px 12px rgba(83, 60, 36, .08);
  transform: translateX(-50%);
}

#app .feed-reference-v3 .feed-empty-place-setting > span {
  position: absolute;
  z-index: 2;
  top: 21px;
  left: 50%;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  background: #2f819f;
  color: #fffdf5;
  transform: translateX(-50%);
  box-shadow: 0 4px 0 rgba(47, 129, 159, .1);
}

#app .feed-reference-v3 :is(.feed-empty-spoon, .feed-empty-fork) {
  position: absolute;
  top: 14px;
  width: 3px;
  height: 60px;
  border-radius: 999px;
  background: rgba(121, 150, 141, .56);
  transform: rotate(5deg);
}

#app .feed-reference-v3 .feed-empty-spoon {
  left: 1px;
}

#app .feed-reference-v3 .feed-empty-spoon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 9px;
  height: 14px;
  border-radius: 50%;
  background: inherit;
}

#app .feed-reference-v3 .feed-empty-fork {
  right: 1px;
  transform: rotate(-5deg);
}

#app .feed-reference-v3 .feed-empty-fork::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  width: 11px;
  height: 12px;
  border-top: 5px double rgba(121, 150, 141, .66);
}

#app .feed-reference-v3 .feed-empty-community > strong {
  display: block;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
}

#app .feed-reference-v3 .feed-empty-community > p {
  margin: 8px 0 0;
  color: rgba(77, 45, 34, .72);
  font-size: 12px;
  line-height: 1.45;
}

#app .feed-reference-v3 .feed-empty-guide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  color: rgba(77, 45, 34, .7);
  font-size: 10px;
  font-weight: 700;
}

#app .feed-reference-v3 .feed-empty-guide span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px dashed rgba(198, 142, 113, .42);
  border-radius: 999px;
  background: rgba(255, 255, 255, .56);
}

#app .feed-reference-v3 .feed-empty-guide i {
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(231, 111, 89, .16);
  color: #d95d49;
  font-style: normal;
  line-height: 1;
}

#app .feed-reference-v3 .feed-empty-guide > b {
  width: 18px;
  border-top: 1px dashed rgba(198, 142, 113, .5);
}

#app .ranking-reference-v4 .ranking-poster-empty .ranking-watercolor-halo {
  opacity: .42;
  filter: saturate(.55);
}

#app .ranking-reference-v4 .ranking-podium-placeholder {
  position: absolute;
  z-index: 2;
  bottom: 103px;
  left: 50%;
  width: 58px;
  height: 86px;
  display: block;
  transform: translateX(-50%);
  opacity: .56;
}

#app .ranking-reference-v4 .ranking-podium-placeholder::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  border: 1.5px dashed rgba(126, 102, 77, .46);
  border-radius: 50%;
  background: rgba(255, 250, 240, .72);
  transform: translateX(-50%);
}

#app .ranking-reference-v4 .ranking-podium-placeholder::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 54px;
  height: 48px;
  border: 1.5px dashed rgba(126, 102, 77, .4);
  border-radius: 48% 48% 12px 12px;
  background: rgba(255, 250, 240, .65);
  transform: translateX(-50%);
}

#app .ranking-reference-v4 .ranking-podium-placeholder > i {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(126, 102, 77, .42);
  transform: translateX(-50%);
}

#app .ranking-reference-v4 .ranking-poster-empty .ranking-poster-podium {
  opacity: .82;
}

#app .ranking-reference-v4 .ranking-poster-empty .ranking-poster-podium > b {
  color: rgba(77, 45, 34, .68) !important;
  font-size: 14px !important;
}

#app .ranking-reference-v4 .ranking-poster-empty .ranking-poster-podium > small {
  color: rgba(77, 45, 34, .5) !important;
  font-size: 9px !important;
}

#app .ranking-reference-v4 .ranking-poster-lower {
  display: block !important;
}

#app .ranking-reference-v4 .ranking-poster-follower-empty {
  opacity: .62;
}

#app .ranking-reference-v4 .ranking-poster-follower-empty .ranking-follower-medallion {
  display: grid !important;
  place-items: center;
  border: 1px dashed rgba(126, 102, 77, .38);
  background: rgba(232, 226, 212, .42) !important;
}

#app .ranking-reference-v4 .ranking-poster-follower-empty .ranking-follower-medallion > i {
  width: 10px;
  height: 10px;
  display: block;
  border: 1px solid rgba(126, 102, 77, .34);
  border-radius: 50%;
}

#app .ranking-reference-v4 .ranking-poster-follower-empty > b {
  color: rgba(77, 45, 34, .58) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

#app .ranking-reference-v4 .ranking-poster-follower-empty > span {
  color: rgba(77, 45, 34, .42) !important;
  text-align: right;
}

@media (max-width: 360px) {
  #app .feed-reference-v3 .feed-empty-community {
    min-height: 232px;
    padding-right: 18px;
    padding-left: 18px;
  }

  #app .feed-reference-v3 .feed-empty-guide {
    gap: 5px;
  }

  #app .feed-reference-v3 .feed-empty-guide span {
    padding-right: 7px;
    padding-left: 7px;
  }
}

/* ===== social-safety-ranking-v182.css ===== */
/* Server-backed community, moderation, ranking, support and native bridge polish. */

.native-network-banner {
  position: fixed;
  top: max(8px, env(safe-area-inset-top));
  left: 50%;
  z-index: 1900;
  width: min(calc(100% - 28px), 520px);
  margin: 0;
  padding: 9px 14px;
  border: 1px solid rgba(177, 100, 76, .28);
  border-radius: 15px;
  background: rgba(255, 244, 226, .96);
  color: #8d493e;
  box-shadow: 0 8px 28px rgba(62, 47, 35, .16);
  transform: translateX(-50%);
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}

.feed-reference-controls {
  flex-wrap: wrap;
  gap: 8px;
}

.feed-safety-link,
.feed-my-profile-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px dashed rgba(226, 105, 84, .46);
  border-radius: 18px;
  background: rgba(255, 252, 244, .86);
  color: #633e31;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
}

.feed-safety-link svg,
.feed-my-profile-link svg {
  flex: 0 0 auto;
  color: #e46550;
}

.feed-server-notice {
  width: min(100%, 560px);
  margin: 0 auto 14px;
  padding: 10px 14px;
  border: 1px solid rgba(108, 154, 133, .24);
  border-radius: 14px;
  background: rgba(228, 242, 232, .88);
  color: #3f6f60;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.feed-server-state {
  width: min(100%, 560px);
  min-height: 220px;
  margin: 18px auto;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 30px;
  border: 1px dashed rgba(123, 148, 137, .5);
  border-radius: 26px;
  background: rgba(255, 253, 247, .74);
  color: #5a4438;
  text-align: center;
}

.feed-server-state p {
  margin: 0;
  color: #7e6c61;
  font-size: 13px;
}

.feed-server-state button,
.social-empty button {
  min-height: 40px;
  padding: 8px 18px;
  border: 1px dashed #ec8b78;
  border-radius: 16px;
  background: #fffaf0;
  color: #d65f4d;
  font: inherit;
  font-weight: 700;
}

.feed-post-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.feed-post-author .feed-author-link {
  min-width: 0;
  flex: 1 1 auto;
}

.feed-post-safety-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.feed-post-safety-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 241, .86);
  color: #82675b;
}

.feed-post-safety-actions button:active {
  transform: scale(.94);
}

.feed-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(50, 42, 36, .56);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.feed-dialog {
  width: min(100%, 500px);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border: 1px solid rgba(225, 198, 164, .8);
  border-radius: 27px;
  background: #fffaf0;
  color: #4e3429;
  box-shadow: 0 24px 70px rgba(48, 35, 27, .28);
}

.feed-dialog > header {
  margin: 0 0 16px;
  padding: 0 0 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px dashed rgba(211, 158, 126, .48);
}

.feed-dialog > header span,
.support-request-head span {
  display: block;
  margin-bottom: 4px;
  color: #e36955;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.feed-dialog > header h3,
.support-request-head h2 {
  margin: 0;
  color: #442a21;
  font-size: 23px;
  line-height: 1.25;
}

.feed-dialog > header > button,
.support-request-head > button {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f4eadb;
  color: #715d52;
  font: inherit;
  font-size: 25px;
}

.feed-moderation-intro,
.feed-confirm-dialog > p {
  margin: 0 0 18px;
  color: #746259;
  font-size: 14px;
  line-height: 1.65;
}

.feed-moderation-field,
.support-request-form label {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: #5b4338;
  font-size: 13px;
  font-weight: 700;
}

.feed-moderation-field small {
  color: #9b8c84;
  font-weight: 400;
}

.feed-moderation-field select,
.feed-moderation-field textarea,
.support-request-form input,
.support-request-form select,
.support-request-form textarea {
  width: 100%;
  border: 1px solid #ddd0c1;
  border-radius: 14px;
  background: #fffef9;
  color: #4e3429;
  font: inherit;
  font-weight: 400;
  outline: none;
}

.feed-moderation-field select,
.support-request-form input,
.support-request-form select {
  min-height: 45px;
  padding: 0 12px;
}

.feed-moderation-field textarea,
.support-request-form textarea {
  min-height: 110px;
  padding: 11px 12px;
  resize: vertical;
}

.feed-moderation-field select:focus,
.feed-moderation-field textarea:focus,
.support-request-form input:focus,
.support-request-form select:focus,
.support-request-form textarea:focus {
  border-color: #e48570;
  box-shadow: 0 0 0 3px rgba(228, 133, 112, .14);
}

.feed-dialog-error {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff0ec;
  color: #b34f44;
  font-size: 13px;
  font-weight: 700;
}

.feed-moderation-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.feed-moderation-actions button {
  min-height: 47px;
  border: 0;
  border-radius: 15px;
  background: #e96d58;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.feed-moderation-actions button.secondary {
  background: #eee5d8;
  color: #6e5a4e;
}

.feed-moderation-actions button:disabled,
.support-request-form button:disabled {
  opacity: .58;
}

.feed-blocked-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feed-blocked-list li {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(212, 196, 178, .78);
  border-radius: 17px;
  background: rgba(255, 255, 255, .56);
}

.feed-blocked-list li > span {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.feed-blocked-list .social-avatar {
  width: 42px;
  height: 42px;
}

.feed-blocked-list b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feed-blocked-list button {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px dashed #e48774;
  border-radius: 12px;
  background: transparent;
  color: #cc5f4d;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.feed-moderation-empty,
.feed-moderation-loading {
  padding: 28px 12px;
  color: #75675f;
  text-align: center;
}

.feed-moderation-empty p {
  margin: 6px 0 0;
  font-size: 13px;
}

.ranking-data-state {
  width: min(100%, 390px);
  margin: 12px auto 0;
  padding: 9px 13px;
  border: 1px dashed rgba(214, 148, 99, .42);
  border-radius: 14px;
  background: rgba(255, 252, 241, .82);
  color: #705b4d;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}

.ranking-data-state.is-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ad5145;
}

.ranking-data-state button {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px dashed currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.ranking-poster-lower-empty {
  opacity: .82;
}

.ranking-poster-follower-empty {
  opacity: .44;
  filter: saturate(.25);
}

#app .support-request-modal {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

#app .support-request-sheet {
  width: min(100%, 540px);
  max-height: min(760px, calc(100dvh - 32px));
  display: block;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 24px;
  border-radius: 27px;
  background: #fffaf0;
}

.support-request-head {
  margin: 0 0 16px;
  padding: 0 0 15px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px dashed rgba(211, 158, 126, .48);
}

.support-request-head p {
  margin: 6px 0 0;
  color: #78675d;
  font-size: 13px;
}

.support-request-form {
  display: grid;
  gap: 2px;
}

.support-request-privacy {
  margin: 13px 0 0;
  color: #8a7b72;
  font-size: 11px;
  line-height: 1.55;
}

.support-request-form > button,
.support-request-success button {
  min-height: 49px;
  margin-top: 18px;
  border: 0;
  border-radius: 16px;
  background: #e96d58;
  color: #fff;
  font: inherit;
  font-weight: 700;
}

.support-request-success {
  display: grid;
  place-items: center;
  padding: 34px 12px 14px;
  text-align: center;
}

.support-request-success > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #e4f1e7;
  color: #438065;
  font-size: 24px;
}

.support-request-success p {
  margin: 7px 0 0;
  color: #77685f;
  font-size: 13px;
}

.support-request-success button {
  width: min(100%, 260px);
}

.proof-native-photo-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.proof-native-photo-actions .proof-photo-button {
  width: 100%;
  min-width: 0;
}

.proof-native-photo-actions .proof-photo-button.secondary {
  background: #efe8d9;
  color: #6d594e;
}

.reward-share-warning {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(210, 104, 84, .28);
  border-radius: 13px;
  background: #fff1ec;
  color: #a44e43;
  font-size: 12px;
}

.reward-share-warning p {
  margin: 0;
}

.reward-share-warning button {
  flex: 0 0 auto;
  padding: 7px 9px;
  border: 1px dashed currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

.social-profile-actions {
  flex-wrap: wrap;
  gap: 8px;
}

.social-profile-actions > button {
  flex: 1 1 150px;
}

.profile-live-setting-list > button.danger:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

@media (max-width: 560px) {
  .feed-reference-controls {
    justify-content: center;
  }

  .feed-safety-link,
  .feed-my-profile-link {
    padding-inline: 10px;
    font-size: 12px;
  }

  .feed-dialog,
  #app .support-request-sheet {
    padding: 20px;
    border-radius: 23px;
  }

  .feed-post-safety-actions button {
    width: 31px;
    height: 31px;
  }

  .proof-native-photo-actions {
    grid-template-columns: 1fr;
  }

  .reward-share-warning {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-post-safety-actions button:active {
    transform: none;
  }
}

/* ===== ranking-empty-state-spacing-v183.css ===== */
/* Keep ranking loading, error, and empty-state copy below the scope tabs. */
#app .ranking-reference-v4 .ranking-poster-heading > .ranking-data-state {
  position: absolute;
  z-index: 45;
  top: 174px;
  right: 0;
  left: 0;
  box-sizing: border-box;
  width: min(100%, 390px);
  margin: 0 auto !important;
  padding: 9px 13px;
  border: 1px dashed rgba(214, 148, 99, .42);
  border-radius: 14px;
  background: rgba(255, 252, 241, .88);
  color: #705b4d;
  text-align: center;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

#app .ranking-reference-v4 .ranking-poster-heading > .ranking-data-state.is-error {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #ad5145;
}

#app .ranking-reference-v4 .ranking-data-state button {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px dashed currentColor;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
}

/* ===== feed-safety-icon-v184.css ===== */
/* Feed safety control: icon-only entry point with a contained detail dialog. */

#app .feed-frame-phone .feed-reference-v3 .feed-safety-link,
#app .feed-frame-phone .feed-reference-v3 .feed-safety-link:hover,
#app .feed-frame-phone .feed-reference-v3 .feed-safety-link:active {
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex: 0 0 44px !important;
  align-self: flex-end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 0 0 5px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #d95f4d !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transform: none !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
}

#app .feed-frame-phone .feed-reference-v3 .feed-safety-link svg {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin: 0 !important;
  color: currentColor !important;
  stroke-width: 1.8 !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-safety-link:focus-visible {
  outline: 2px dashed rgba(217, 95, 77, .72) !important;
  outline-offset: -4px !important;
}

@media (hover: hover) and (pointer: fine) {
  #app .feed-frame-phone .feed-reference-v3 .feed-safety-link:hover {
    background: rgba(255, 250, 240, .68) !important;
  }
}

#app .feed-dialog-layer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1600 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom)) !important;
  background: rgba(50, 42, 36, .56) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

#app .feed-dialog {
  box-sizing: border-box !important;
  width: min(100%, 440px) !important;
  max-height: min(760px, calc(100dvh - 36px)) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
  padding: 22px !important;
  border: 1px solid rgba(225, 198, 164, .8) !important;
  border-radius: 26px !important;
  background: #fffaf0 !important;
  color: #4e3429 !important;
  box-shadow: 0 24px 70px rgba(48, 35, 27, .28) !important;
}

#app .feed-dialog > header {
  margin: 0 0 16px !important;
  padding: 0 0 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  border-bottom: 1px dashed rgba(211, 158, 126, .48) !important;
}

#app .feed-dialog > header span {
  display: block !important;
  margin-bottom: 4px !important;
  color: #e36955 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
}

#app .feed-dialog > header h3 {
  margin: 0 !important;
  color: #442a21 !important;
  font-size: 23px !important;
  line-height: 1.25 !important;
}

#app .feed-dialog > header > button {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #f4eadb !important;
  color: #715d52 !important;
  box-shadow: none !important;
  font: inherit !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

#app .feed-moderation-intro,
#app .feed-confirm-dialog > p {
  margin: 0 0 18px !important;
  color: #746259 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#app .feed-dialog-error {
  margin: 14px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #fff0ec !important;
  color: #b34f44 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

#app .feed-blocked-list {
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#app .feed-blocked-list li {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border: 1px solid rgba(212, 196, 178, .78) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .56) !important;
}

#app .feed-blocked-list li > span {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

#app .feed-blocked-list .social-avatar {
  width: 42px !important;
  height: 42px !important;
}

#app .feed-blocked-list b {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#app .feed-blocked-list button {
  flex: 0 0 auto !important;
  padding: 7px 10px !important;
  border: 1px dashed #e48774 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #cc5f4d !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#app .feed-moderation-empty,
#app .feed-moderation-loading {
  padding: 28px 12px !important;
  color: #75675f !important;
  text-align: center !important;
}

#app .feed-moderation-empty strong {
  display: block !important;
  color: #4e3429 !important;
}

#app .feed-moderation-empty p {
  margin: 6px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 560px) {
  #app .feed-dialog {
    padding: 20px !important;
    border-radius: 23px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .feed-dialog-layer {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ===== profile-title-heading-line-remove-v186.css ===== */
/* Keep the title heading clean while preserving the card and medallion stitches. */

#app .profile-reference-v4 .profile-ref-titles > header h2::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* ===== profile-summary-box-parity-v187.css ===== */
/* Align the title and social cards with the inset cooking-stat rows. */

#app .profile-reference-v4 .profile-ref-summary {
  --profile-summary-row-inset: max(9px, calc(439px - 100vw));
}

#app .profile-reference-v4 .profile-ref-stats {
  padding-left: var(--profile-summary-row-inset) !important;
}

#app .profile-reference-v4 .profile-ref-current-title,
#app .profile-reference-v4 .profile-ref-social,
#app .profile-reference-v4 .profile-ref-social:hover,
#app .profile-reference-v4 .profile-ref-social:active {
  box-sizing: border-box !important;
  width: calc(100% - var(--profile-summary-row-inset)) !important;
  margin-left: var(--profile-summary-row-inset) !important;
}

@media (max-width: 390px) {
  #app .profile-reference-v4 .profile-ref-summary {
    --profile-summary-row-inset: calc(417px - 100vw);
  }
}

@media (max-width: 350px) {
  #app .profile-reference-v4 .profile-ref-summary {
    --profile-summary-row-inset: calc(370px - 100vw);
  }
}

/* ===== profile-sticker-view-all-parity-v188.css ===== */
/* Match the sticker archive button to the title collection archive button. */

#app .profile-reference-v4 .profile-ref-view-all,
#app .profile-reference-v4 .profile-ref-view-all:hover,
#app .profile-reference-v4 .profile-ref-view-all:active {
  box-sizing: border-box !important;
  min-width: 79px !important;
  width: auto !important;
  height: 25px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 9px 1px !important;
  border: 1px dashed rgba(231, 110, 83, .72) !important;
  border-radius: 999px !important;
  color: #df6049 !important;
  background-color: rgba(255, 249, 237, .94) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 72px 72px !important;
  box-shadow: 0 1px 2px rgba(113, 78, 42, .07) !important;
  font-family: "Bap Gaegu Full", "Bap Gaegu", "Gaegu", cursive !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -.025em !important;
  white-space: nowrap !important;
  transform: none !important;
}

#app .profile-reference-v4 .profile-ref-view-all span {
  margin-left: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* ===== profile-account-frame-complete-v189.css ===== */
/* Keep the account card's stitched frame visible on all four sides and corners. */

html body #app .profile-reference-v4 > .profile-live-account {
  overflow: hidden !important;
  border-radius: 22px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

html body #app .profile-reference-v4 > .profile-live-account::before {
  content: "" !important;
  position: absolute !important;
  z-index: 3 !important;
  inset: 7px 9px !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  border: 1px dashed rgba(174, 136, 91, .24) !important;
  border-radius: 18px !important;
  background: none !important;
  pointer-events: none !important;
}

/* ===== profile-card-radius-parity-v192.css ===== */
/* Keep the primary profile cards on one shared rounded-paper silhouette. */

#app .profile-reference-v4 {
  --profile-card-radius-parity: 22px;
}

#app .profile-reference-v4 .profile-ref-hero,
#app .profile-reference-v4 .profile-ref-titles,
#app .profile-reference-v4 .profile-ref-stickers {
  border-radius: var(--profile-card-radius-parity) !important;
}

#app .profile-reference-v4 .profile-ref-hero,
#app .profile-reference-v4 .profile-ref-stickers {
  overflow: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

/* ===== profile-allergy-custom-only-v193.css ===== */
/* Keep the custom-only allergy row compact after removing the fixed presets. */

#app .profile-reference-v4:has(.profile-ref-allergy-custom) {
  padding-top: 890px !important;
}

#app .profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom) {
  height: 76px !important;
}

#app .profile-reference-v4:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  padding-top: 940px !important;
}

#app .profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom):has(.profile-ref-allergy-editor) {
  height: 126px !important;
}

#app .profile-reference-v4 .profile-ref-allergies:has(.profile-ref-allergy-custom) .profile-ref-allergy-editor {
  top: 70px !important;
}

/* ===== allergy-scan-visual-parity-v194.css ===== */
/* Match the allergy result modal to the Home recipe CTA and one cream card tone. */

#app .mono-preview-page .allergy-scan-result,
#app .mono-preview-page .allergy-scan-result:nth-child(even) {
  background-color: #fff9ea !important;
}

#app .mono-preview-page .allergy-scan-result-art {
  overflow: visible !important;
}

#app .mono-preview-page .allergy-scan-result-art > i {
  z-index: 2 !important;
}

#app .mono-preview-page .allergy-scan-footer {
  display: flex !important;
  justify-content: center !important;
}

#app .mono-preview-page .allergy-scan-footer > .allergy-scan-primary,
#app .mono-preview-page .allergy-scan-footer > .allergy-scan-primary:hover,
#app .mono-preview-page .allergy-scan-footer > .allergy-scan-primary:active {
  box-sizing: border-box !important;
  width: min(100%, 168px) !important;
  min-width: 0 !important;
  height: 46px !important;
  min-height: 46px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 0 auto !important;
  padding: 0 14px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  box-shadow: none !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
  transform: none !important;
}

#app .mono-preview-page .allergy-scan-footer > .allergy-scan-primary > span {
  color: inherit !important;
  font-family: "Pretendard", "SUIT", sans-serif !important;
  font-size: 23px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#app .mono-preview-page .allergy-scan-footer > .allergy-scan-primary:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px rgba(70, 41, 28, .72) !important;
}

/* Keep a useful result viewport when the phone rotates to landscape. */
@media (max-height: 620px) {
  #app .mono-preview-page .allergy-scan-head {
    min-height: 70px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #app .mono-preview-page .allergy-scan-summary {
    padding: 8px 16px 7px !important;
  }

  #app .mono-preview-page .allergy-scan-summary > span {
    display: none !important;
  }

  #app .mono-preview-page .allergy-scan-summary h3 {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
  }

  #app .mono-preview-page .allergy-scan-summary p {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }

  #app .mono-preview-page .allergy-scan-safety {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin: 0 9px 6px !important;
    padding: 5px 8px !important;
  }

  #app .mono-preview-page .allergy-scan-safety b {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  #app .mono-preview-page .allergy-scan-safety p {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    line-height: 1.25 !important;
  }

  #app .mono-preview-page .allergy-scan-footer {
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
}

/* ===== profile-account-edit-v195.css ===== */
/* Account editor: extend the existing handmade Profile & Account paper system. */
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > .account-edit-entry,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > .account-edit-entry:hover,
html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > .account-edit-entry:active {
  background-color: #e3eef5 !important;
  transform: rotate(.22deg) !important;
}

html body #app .profile-reference-v4 > .profile-live-account .profile-live-setting-list > .account-edit-entry .profile-account-icon {
  color: #426b82 !important;
}

#app .account-edit-modal,
#app .mono-preview-page .account-edit-modal {
  --account-edit-safe-top: max(10px, env(safe-area-inset-top));
  --account-edit-safe-right: max(10px, env(safe-area-inset-right));
  --account-edit-safe-bottom: max(10px, env(safe-area-inset-bottom));
  --account-edit-safe-left: max(10px, env(safe-area-inset-left));
  z-index: 1100 !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  padding:
    var(--account-edit-safe-top)
    var(--account-edit-safe-right)
    var(--account-edit-safe-bottom)
    var(--account-edit-safe-left) !important;
  overflow: hidden !important;
  background: rgba(48, 31, 21, .46) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

#app .account-edit-modal > .account-edit-sheet,
#app .mono-preview-page .account-edit-modal > .account-edit-sheet {
  --account-edit-ink: #3b1d10;
  --account-edit-coral: #df654c;
  position: relative !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
  width: min(100%, 408px) !important;
  height: min(780px, calc(100dvh - var(--account-edit-safe-top) - var(--account-edit-safe-bottom))) !important;
  min-height: 0 !important;
  max-height: calc(100dvh - var(--account-edit-safe-top) - var(--account-edit-safe-bottom)) !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(151, 112, 68, .22) !important;
  border-radius: 26px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  color: var(--account-edit-ink) !important;
  background-color: #fff8e9 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(225, 198, 150, .035)),
    url("./assets/paper-grain.svg") !important;
  background-size: auto, 160px 160px !important;
  box-shadow: 0 15px 38px rgba(53, 34, 20, .25) !important;
}

#app .account-edit-sheet::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8px;
  border: 1px dashed rgba(174, 136, 91, .24);
  border-radius: 19px;
  pointer-events: none;
}

#app .account-edit-sheet > .account-edit-head {
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-height: 102px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 18px !important;
  padding: 22px 3px 15px !important;
  border-bottom: 1px dashed rgba(126, 91, 53, .25) !important;
}

#app .account-edit-head > div {
  min-width: 0;
}

#app .account-edit-head > div > span {
  display: block !important;
  margin: 0 0 5px !important;
  color: var(--account-edit-coral) !important;
  font-family: "Bap Gowun", "Pretendard", sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
}

#app .account-edit-head h2 {
  margin: 0 !important;
  color: var(--account-edit-ink) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

#app .account-edit-head p {
  margin: 7px 0 0 !important;
  color: rgba(59, 29, 16, .66) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  word-break: keep-all !important;
}

#app .account-edit-head > .icon,
#app .account-edit-head > .icon:hover,
#app .account-edit-head > .icon:active {
  box-sizing: border-box !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 0 3px !important;
  border: 2px solid rgba(255, 250, 237, .88) !important;
  border-radius: 50% !important;
  color: #fffaf0 !important;
  background: #e96f57 !important;
  box-shadow: 0 2px 0 rgba(121, 55, 37, .18) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 28px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  transform: rotate(-2deg) !important;
}

#app .account-edit-head > .icon:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px #46291c, 0 2px 0 rgba(121, 55, 37, .18) !important;
}

#app .account-edit-body {
  position: relative !important;
  z-index: 1 !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
  display: grid !important;
  align-content: start !important;
  gap: 13px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 16px 18px max(18px, env(safe-area-inset-bottom)) !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(111, 84, 55, .28) transparent !important;
}

#app .account-edit-body::-webkit-scrollbar {
  width: 4px;
}

#app .account-edit-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(111, 84, 55, .28);
}

#app .account-edit-form {
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}

#app .account-edit-section {
  box-sizing: border-box !important;
  display: grid !important;
  gap: 13px !important;
  margin: 0 !important;
  padding: 16px !important;
  border: 1px dashed rgba(155, 116, 72, .27) !important;
  border-radius: 19px !important;
  background-color: rgba(255, 251, 241, .86) !important;
  background-image: url("./assets/paper-grain.svg") !important;
  background-size: 130px 130px !important;
  box-shadow: 0 2px 6px rgba(81, 54, 29, .06) !important;
}

#app .account-edit-profile-section {
  background-color: rgba(232, 242, 227, .72) !important;
}

#app .account-edit-login-section {
  background-color: rgba(255, 240, 189, .5) !important;
}

#app .account-edit-password-section {
  background-color: rgba(228, 239, 247, .7) !important;
}

#app .account-edit-section > header {
  display: grid !important;
  gap: 3px !important;
  margin: 0 !important;
  padding: 0 0 10px !important;
  border-bottom: 1px dashed rgba(126, 91, 53, .2) !important;
}

#app .account-edit-section > header > span {
  color: var(--account-edit-coral) !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
}

#app .account-edit-section > header > h3 {
  margin: 0 !important;
  color: var(--account-edit-ink) !important;
  font-family: "Bap Jua", "Bap Gaegu Full", sans-serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -.035em !important;
}

#app .account-edit-field {
  min-width: 0 !important;
  display: grid !important;
  gap: 7px !important;
  color: var(--account-edit-ink) !important;
}

#app .account-edit-field > span:first-child,
#app .account-edit-field > label {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#app .account-edit-field > span:first-child > em,
#app .account-edit-field > label > em {
  color: rgba(59, 29, 16, .5) !important;
  font-size: 10px !important;
  font-style: normal !important;
  font-weight: 700 !important;
}

#app .account-edit-field > input,
#app .account-edit-password-control > input {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid rgba(92, 65, 39, .25) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  color: var(--account-edit-ink) !important;
  background: rgba(255, 253, 246, .92) !important;
  box-shadow: inset 0 1px 2px rgba(87, 60, 34, .04) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

#app .account-edit-field > input:focus,
#app .account-edit-password-control:focus-within > input {
  border-color: #df654c !important;
  box-shadow: 0 0 0 3px rgba(223, 101, 76, .14) !important;
}

#app .account-edit-field > input[aria-invalid="true"],
#app .account-edit-password-control > input[aria-invalid="true"] {
  border-color: #b84d3d !important;
}

#app .account-edit-field > small,
#app .account-edit-password-help,
#app .account-edit-readonly-note {
  margin: 0 !important;
  color: rgba(59, 29, 16, .62) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

#app .account-edit-readonly {
  display: grid !important;
  gap: 9px !important;
  margin: 0 !important;
}

#app .account-edit-readonly > div {
  box-sizing: border-box !important;
  min-height: 48px !important;
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(132, 98, 57, .17) !important;
  border-radius: 12px !important;
  background: rgba(255, 253, 246, .68) !important;
}

#app .account-edit-readonly dt {
  color: rgba(59, 29, 16, .58) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#app .account-edit-readonly dd {
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  overflow-wrap: anywhere !important;
  color: var(--account-edit-ink) !important;
  font-family: "Pretendard", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

#app .account-provider-mark {
  width: 9px !important;
  height: 9px !important;
  flex: 0 0 auto !important;
  border: 2px solid #fffaf0 !important;
  border-radius: 50% !important;
  background: #6f9b72 !important;
  box-shadow: 0 0 0 1px rgba(70, 77, 47, .24) !important;
}

#app .account-edit-password-control {
  position: relative !important;
  display: block !important;
}

#app .account-edit-password-control > input {
  padding-right: 49px !important;
}

#app .account-edit-password-control > button,
#app .account-edit-password-control > button:hover,
#app .account-edit-password-control > button:active {
  position: absolute !important;
  top: 3px !important;
  right: 3px !important;
  box-sizing: border-box !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: rgba(59, 29, 16, .64) !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

#app .account-edit-password-control > button:focus-visible {
  outline: 2px solid #df654c !important;
  outline-offset: -3px !important;
}

#app .account-edit-message {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 11px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

#app .account-edit-message.is-error {
  color: #9b3d31 !important;
  background: rgba(248, 219, 211, .78) !important;
}

#app .account-edit-message.is-success {
  color: #396442 !important;
  background: rgba(210, 232, 207, .8) !important;
}

#app .account-edit-primary,
#app .account-edit-primary:hover,
#app .account-edit-primary:active {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 1px 0 0 !important;
  padding: 0 19px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  -webkit-mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  mask-image: url("./assets/ui/home-start-deckle-mask-v12.svg") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  color: #fffaf0 !important;
  background-color: #e96f57 !important;
  background-image:
    url("./assets/ui/profile-screenprint-texture-v1.svg"),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(121, 43, 27, .025)) !important;
  background-size: 94px 94px, auto !important;
  box-shadow: none !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  transform: none !important;
}

#app .account-edit-secondary,
#app .account-edit-secondary:hover,
#app .account-edit-secondary:active {
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 1px 0 0 !important;
  padding: 0 16px !important;
  border: 1px dashed rgba(205, 85, 64, .6) !important;
  border-radius: 14px !important;
  color: #ad4938 !important;
  background: rgba(255, 250, 238, .8) url("./assets/paper-grain.svg") center / 100px 100px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  transform: none !important;
}

#app .account-edit-primary:focus-visible,
#app .account-edit-secondary:focus-visible {
  outline: 0 !important;
  box-shadow: inset 0 0 0 3px #46291c !important;
}

#app .account-edit-sheet button:disabled,
#app .account-edit-sheet input:disabled {
  cursor: wait !important;
  opacity: .58 !important;
}

@media (max-width: 360px) {
  #app .account-edit-modal,
  #app .mono-preview-page .account-edit-modal {
    --account-edit-safe-top: max(6px, env(safe-area-inset-top));
    --account-edit-safe-right: max(6px, env(safe-area-inset-right));
    --account-edit-safe-bottom: max(6px, env(safe-area-inset-bottom));
    --account-edit-safe-left: max(6px, env(safe-area-inset-left));
  }

  #app .account-edit-modal > .account-edit-sheet,
  #app .mono-preview-page .account-edit-modal > .account-edit-sheet {
    height: min(760px, calc(100dvh - var(--account-edit-safe-top) - var(--account-edit-safe-bottom))) !important;
    max-height: calc(100dvh - var(--account-edit-safe-top) - var(--account-edit-safe-bottom)) !important;
    border-radius: 21px !important;
  }

  #app .account-edit-sheet > .account-edit-head {
    min-height: 96px !important;
    margin-right: 14px !important;
    margin-left: 14px !important;
    padding-top: 18px !important;
  }

  #app .account-edit-head h2 {
    font-size: 25px !important;
  }

  #app .account-edit-head p {
    font-size: 11px !important;
  }

  #app .account-edit-body {
    gap: 11px !important;
    padding-right: 14px !important;
    padding-left: 14px !important;
  }

  #app .account-edit-section {
    gap: 12px !important;
    padding: 14px !important;
  }

  #app .account-edit-readonly > div {
    grid-template-columns: 70px minmax(0, 1fr) !important;
  }
}

@media (max-height: 620px) {
  #app .account-edit-sheet > .account-edit-head {
    min-height: 82px !important;
    padding-top: 13px !important;
    padding-bottom: 11px !important;
  }

  #app .account-edit-head > div > span {
    margin-bottom: 3px !important;
    font-size: 8px !important;
  }

  #app .account-edit-head h2 {
    font-size: 23px !important;
  }

  #app .account-edit-head p {
    margin-top: 4px !important;
    font-size: 10px !important;
  }

  #app .account-edit-head > .icon,
  #app .account-edit-head > .icon:hover,
  #app .account-edit-head > .icon:active {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
  }

  #app .account-edit-body {
    padding-top: 11px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .account-edit-modal,
  #app .account-edit-sheet {
    animation: none !important;
  }
}

/* ===== feed-engagement-profile-v202.css ===== */
/* Feed likes, contained card controls, and editable public profile photos. */

#app .feed-frame-phone .feed-reference-v3 .feed-post-author {
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 5px !important;
  padding-right: 7px !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link,
#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link:hover,
#app .feed-frame-phone .feed-reference-v3 .feed-post-author .feed-author-link:active {
  grid-column: auto !important;
  min-width: 0 !important;
  grid-template-columns: 59px minmax(0, 1fr) !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-safety-actions {
  min-width: 0;
  max-width: 96px;
  justify-self: end;
  gap: 1px;
  margin-right: 1px;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-safety-actions button {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  color: #684b3e;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-safety-actions button svg {
  width: 18px;
  height: 18px;
}

#app .feed-frame-phone .feed-reference-v3 .feed-post-actions {
  box-sizing: border-box;
  width: auto !important;
  min-height: 42px !important;
  margin: 0 94px 0 0 !important;
  padding: 7px 10px 0 !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-like-action,
#app .feed-frame-phone .feed-reference-v3 .feed-like-action:hover,
#app .feed-frame-phone .feed-reference-v3 .feed-like-action:active {
  min-height: 34px !important;
  color: #7d5c50 !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-like-action > span {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  overflow: visible;
  font-size: 12px !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-like-action b {
  color: inherit;
  font: inherit;
}

#app .feed-frame-phone .feed-reference-v3 .feed-like-action.liked,
#app .feed-frame-phone .feed-reference-v3 .feed-like-action[aria-pressed="true"] {
  color: var(--feed-coral-deep, #dc5e47) !important;
}

#app .feed-frame-phone .feed-reference-v3 .feed-like-action:disabled {
  opacity: .58;
}

#app .feed-frame-phone .feed-avatar-shell.feed-avatar-photo > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

#app .feed-frame-phone .social-avatar.social-avatar-photo > img {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: none !important;
}

#app .feed-frame-phone .social-profile-image-edit {
  box-sizing: border-box;
  position: absolute;
  z-index: 4;
  top: 87px;
  left: 25px;
  min-width: 76px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 5px 8px 6px;
  border: 1px solid rgba(204, 92, 70, .4);
  border-radius: 13px 10px 14px 9px;
  color: #bc4f3d;
  background: rgba(255, 250, 240, .96);
  box-shadow: 1px 2px 4px rgba(81, 54, 28, .14);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}

#app .feed-frame-phone .social-profile-image-edit input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(50%);
}

#app .feed-frame-phone .social-profile-image-edit:focus-visible,
#app .feed-frame-phone .social-profile-image-edit:has(input:focus-visible) {
  outline: 3px dashed var(--social-coral-deep, #dc5e47);
  outline-offset: 3px;
}

#app .feed-frame-phone .social-profile-image-feedback {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 11px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}

#app .feed-frame-phone .social-profile-image-feedback.is-success {
  color: #4e7043;
  background: rgba(219, 235, 205, .72);
}

#app .feed-frame-phone .social-profile-image-feedback.is-error {
  color: #a94739;
  background: rgba(247, 220, 211, .76);
}

@media (max-width: 370px) {
  #app .feed-frame-phone .social-profile-image-edit {
    top: 77px;
    left: 17px;
  }

  #app .feed-frame-phone .feed-reference-v3 .feed-post-author {
    padding-right: 3px !important;
  }

  #app .feed-frame-phone .feed-reference-v3 .feed-post-safety-actions button {
    width: 28px;
    min-width: 28px;
  }
}

/* ===== proof-feed-caption-v202.css ===== */
/* Public proof posts can carry an author-written feed caption. */

#app .mono-preview-page .recipe-sheet .proof-caption-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  margin: 3px 0 0;
  padding: 11px;
  border: 1px dashed rgba(217, 95, 77, .38);
  border-radius: 15px 11px 16px 12px;
  color: var(--recipe-ink, #3b2014);
  background: rgba(255, 250, 240, .82);
}

#app .mono-preview-page .recipe-sheet .proof-caption-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#app .mono-preview-page .recipe-sheet .proof-caption-field strong {
  color: var(--recipe-coral-deep, #d95740);
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: 14px;
  line-height: 1;
}

#app .mono-preview-page .recipe-sheet .proof-caption-field small {
  color: rgba(59, 32, 20, .54);
  font-family: "Pretendard", sans-serif;
  font-size: 9px;
  font-weight: 700;
}

#app .mono-preview-page .recipe-sheet .proof-caption-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 82px;
  resize: vertical;
  padding: 10px 11px;
  border: 1px solid rgba(132, 94, 61, .24);
  border-radius: 11px;
  outline: 0;
  color: #432d21;
  background: rgba(255, 253, 247, .95);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

#app .mono-preview-page .recipe-sheet .proof-caption-field textarea:focus {
  border-color: var(--recipe-coral, #ed7158);
  box-shadow: 0 0 0 3px rgba(237, 113, 88, .13);
}

#app .mono-preview-page .recipe-sheet .proof-caption-field textarea::placeholder {
  color: rgba(67, 45, 33, .44);
}

#app .mono-preview-page .recipe-sheet .proof-caption-field > em {
  color: rgba(59, 32, 20, .6);
  font-family: "Bap Gowun", "Pretendard", sans-serif;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

/* ===== app-update-prompt-v203.css ===== */
.app-update-layer {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background: rgba(45, 28, 42, .58);
  backdrop-filter: blur(5px);
}

.app-update-dialog {
  position: relative;
  width: min(100%, 370px);
  overflow: hidden;
  padding: 30px 24px 23px;
  border: 2px solid rgba(92, 61, 52, .22);
  border-radius: 30px 30px 18px 18px;
  outline: 0;
  background-color: #fff9e9;
  background-image:
    radial-gradient(circle at 16% 15%, rgba(255, 213, 70, .28) 0 18%, transparent 19%),
    radial-gradient(circle at 90% 87%, rgba(236, 111, 92, .18) 0 19%, transparent 20%);
  color: #3d2927;
  text-align: center;
  box-shadow: 0 28px 80px rgba(40, 22, 30, .34);
}

.app-update-dialog:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 28px 80px rgba(40, 22, 30, .34);
}

.app-update-kicker {
  display: block;
  color: #b77a16;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .16em;
}

.app-update-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 14px auto 12px;
  border-radius: 50%;
  background: #ffd74d;
  color: #a9630c;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px rgba(169, 99, 12, .16), 0 8px 18px rgba(169, 99, 12, .18);
}

.app-update-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.app-update-dialog h2 {
  margin: 0;
  font-family: "Bap Jua", "Pretendard", sans-serif;
  font-size: clamp(27px, 8vw, 34px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.03em;
}

.app-update-dialog p {
  margin: 14px 0 22px;
  color: #765f59;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.app-update-dialog p strong {
  color: #d7503e;
}

.app-update-primary,
.app-update-primary:hover,
.app-update-primary:active {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: #e85f4b;
  color: #fffdf7;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 0 #b83f32, 0 14px 25px rgba(184, 63, 50, .22);
}

.app-update-primary:focus-visible,
.app-update-later:focus-visible {
  outline: 3px solid #3d2927;
  outline-offset: 4px;
}

.app-update-later {
  min-height: 42px;
  margin-top: 14px;
  border: 0;
  background: transparent;
  color: #79635e;
  font-size: 13px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.app-update-dialog small {
  display: block;
  margin-top: 17px;
  color: #8c716b;
  font-size: 11px;
  font-weight: 750;
}

@media (max-height: 560px) {
  .app-update-dialog {
    padding-top: 22px;
  }

  .app-update-icon {
    width: 48px;
    height: 48px;
    margin: 9px auto;
  }

  .app-update-dialog p {
    margin: 10px 0 16px;
  }
}