/* Final layout contract: these rules intentionally win over legacy prototype layers. */
.canvas-board { container-type: inline-size; }

/* The shell owns where the board sits; this seam owns what the board is. A
   landscape fallback keeps the first paint stable until renderStyles applies
   the explicit data-ratio contract. */
.canvas-board {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: var(--board-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgb(0 0 0 / .08), 0 2px 5px rgb(0 0 0 / .04);
}

.canvas-board::before {
  position: absolute;
  inset: 0;
  z-index: 12;
  border: 1px solid rgba(255, 255, 255, 0.35);
  content: "";
  pointer-events: none;
}

@media (max-width: 920px) {
  .canvas-board { box-shadow: 0 8px 24px rgb(0 0 0 / .08); }
}

/* Card copy belongs to the composed image, not the application shell. Keep
   the base contract here so cast, ratio, theme, and export-specific rules all
   refine one local layer. */
.board-title-block {
  display: flex;
  flex-direction: column;
}

.board-title-block > strong {
  overflow-wrap: anywhere;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 46px);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 0.88;
}

.caption-description {
  margin-top: 13px;
  color: #adb4ac;
  font-size: clamp(7px, 0.85vw, 11px);
  line-height: 1.4;
}

.board-editorial-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 8;
  display: flex;
  min-height: 19%;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 5% 5% 2%;
  color: inherit;
  background: transparent;
}

.board-editorial-header .board-title-block {
  min-width: 0;
  max-width: 64%;
}

.board-editorial-header .board-title-block > strong {
  display: block;
  overflow-wrap: anywhere;
  color: #fff;
  font-family: var(--display);
  font-size: clamp(22px, 3.7vw, 48px);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .9;
}

.board-editorial-header .caption-description {
  display: block;
  max-width: 280px;
  margin-top: 9px;
  overflow: hidden;
  color: rgb(255 255 255 / .7);
  font-family: var(--sans);
  font-size: clamp(8px, .8vw, 11px);
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.canvas-board[data-cast="1"] .board-editorial-header {
  padding-right: 4%;
  padding-left: 4%;
}

.canvas-board[data-cast="1"] .board-editorial-header .board-title-block {
  max-width: 44%;
}

.canvas-board[data-cast="1"][data-single-layout="info-right"] .board-editorial-header {
  justify-content: flex-end;
  text-align: right;
}

.canvas-board[data-cast="1"][data-single-layout="info-right"] .board-title-block {
  align-items: flex-end;
}

@media (max-width: 920px) {
  .board-editorial-header { padding: 5% 5% 2%; }
  .board-editorial-header .caption-description { display: none; }
}

@media (max-width: 560px) {
  .board-title-block > strong { font-size: clamp(18px, 7vw, 30px); }
  .board-editorial-header .board-title-block > strong { font-size: clamp(20px, 7vw, 32px); }
  .caption-description { display: none; }
  .portrait-wrap { right: 23%; }
}

/* Character framing is part of the card composition. Cast- and ratio-specific
   insets below refine this shared frame without leaking into app-shell CSS. */
.portrait-wrap {
  position: absolute;
  top: 4%;
  right: 18%;
  bottom: 0;
  left: 1%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: grab;
  touch-action: none;
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px));
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.character-figure {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 0;
  flex: 1 1 0;
  align-items: flex-end;
  justify-content: center;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.portrait-wrap .character-figure img {
  width: 118%;
  max-width: none;
}

.portrait-wrap:active,
.portrait-wrap.is-dragging {
  cursor: grabbing;
  transition: none;
}

.portrait-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  transform: scale(var(--portrait-scale, 1));
  transform-origin: center bottom;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.canvas-board[data-cutout="false"] .portrait-wrap img {
  object-fit: contain;
  object-position: center bottom;
}

/* Card-only internals belong to the composition seam. These base rules keep
   the markup usable before the ratio/cast-specific contracts below apply. */
.board-gear-list {
  display: grid;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid rgba(242, 244, 239, 0.18);
}

.board-gear-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid rgba(242, 244, 239, 0.12);
}

.board-gear-item span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: clamp(5px, 0.55vw, 7px);
}

.board-gear-item strong {
  overflow: hidden;
  font-family: var(--sans);
  font-size: clamp(6px, 0.65vw, 9px);
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-gear-list.board-gear-tiles {
  position: absolute;
  z-index: 9;
  display: grid !important;
  margin: 0 !important;
  padding: 0;
  border: 0;
  pointer-events: none;
}

.board-gear-tiles .board-gear-item {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .46);
  border-radius: 7px;
  background: rgb(16 21 23 / .7);
  box-shadow: 0 4px 12px rgb(0 0 0 / .13);
}

.gear-tile-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 6px 7px 7px;
  color: #fff;
}

.gear-tile-copy span {
  overflow: hidden;
  color: rgb(255 255 255 / .62);
  font-family: var(--sans);
  font-size: clamp(6px, .6vw, 8px);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-tile-copy strong {
  overflow: hidden;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(7px, .7vw, 10px);
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gear-tile-copy small {
  overflow: hidden;
  color: rgb(255 255 255 / .46);
  font-family: var(--mono);
  font-size: clamp(5px, .52vw, 7px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-info-layer {
  position: absolute;
  inset: 29% 2% 8%;
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(var(--info-count, 3), minmax(0, 1fr));
  align-items: center;
  pointer-events: none;
}

.canvas-board[data-cast="3"] .multi-info-layer { --info-count: 3; }
.canvas-board[data-cast="4"] .multi-info-layer { --info-count: 4; }
.canvas-board[data-cast="5"] .multi-info-layer { --info-count: 5; }
.multi-info-layer[hidden] { display: none; }

.scene-background {
  position: absolute;
  inset: 0;
  z-index: -4;
  background: var(--board-bg);
  transition: background 260ms ease;
}

.scene-texture {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.23;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.multi-info-column {
  display: grid;
  min-width: 0;
  gap: clamp(4px, .7vw, 9px);
  align-content: center;
  justify-items: center;
  padding: 12px 7%;
  border: 0;
  color: rgb(19 21 25 / .86);
  background: transparent;
  text-align: center;
  text-shadow: 0 1px 12px rgb(255 255 255 / .9);
  pointer-events: auto;
  cursor: pointer;
}

.multi-info-items { display: grid; min-width: 0; gap: clamp(3px, .45vw, 6px); font-family: var(--sans); font-size: clamp(7px, .82vw, 12px); font-weight: 650; line-height: 1.18; }
.multi-info-items > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.multi-info-items small { margin-top: 2px; font-family: var(--mono); font-size: .72em; letter-spacing: .05em; opacity: .58; }
.multi-info-column.is-selected { background: rgb(255 255 255 / .1); }

/* Decorative card pattern base. Final recipe-specific pattern rules below
   intentionally override these defaults without leaking into the app shell. */
.scene-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  color: rgb(255 255 255 / .42);
  pointer-events: none;
}

.scene-pattern {
  container-type: inline-size;
  opacity: var(--pattern-opacity, .38);
  color: var(--pattern-ink, #686879);
  mix-blend-mode: multiply;
  transition: opacity 180ms ease;
}

.canvas-board[data-background-tone="dark"] .scene-pattern {
  mix-blend-mode: screen;
}

.scene-pattern::before,
.scene-pattern::after {
  position: absolute;
  display: block;
  content: "";
  pointer-events: none;
}

.scene-pattern[data-pattern="none"] { display: none; }

.scene-pattern[data-pattern="halftone"]::before,
.scene-pattern[data-pattern="halftone"]::after {
  width: 48%;
  aspect-ratio: 1;
  background-image: radial-gradient(circle, currentColor 0 1.25px, transparent 1.55px);
  background-size: 9px 9px;
  mask-image: radial-gradient(circle at center, #000 0 22%, rgb(0 0 0 / .72) 42%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at center, #000 0 22%, rgb(0 0 0 / .72) 42%, transparent 72%);
}

.scene-pattern[data-pattern="halftone"]::before {
  top: 2%;
  left: -12%;
  transform: rotate(-7deg) scaleY(.72);
}

.scene-pattern[data-pattern="halftone"]::after {
  right: -10%;
  bottom: -15%;
  transform: rotate(11deg) scaleY(.78);
}

.scene-pattern[data-pattern="dots"]::before {
  inset: 0;
  background-image:
    radial-gradient(circle, currentColor 0 1.15px, transparent 1.55px),
    radial-gradient(circle, var(--pattern-light, #fff) 0 1px, transparent 1.4px);
  background-position: 0 0, 9px 9px;
  background-size: 18px 18px;
  mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / .38) 34%, rgb(0 0 0 / .12) 50%, rgb(0 0 0 / .38) 66%, #000);
  -webkit-mask-image: linear-gradient(90deg, #000, rgb(0 0 0 / .38) 34%, rgb(0 0 0 / .12) 50%, rgb(0 0 0 / .38) 66%, #000);
}

.scene-pattern[data-pattern="dots"]::after {
  display: none;
}

.pattern-motif {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: clamp(10px, var(--size), 76px);
  aspect-ratio: 1;
  color: currentColor;
  opacity: var(--motif-opacity, .8);
  transform: translate(-50%, -50%) rotate(var(--rotate));
}

.pattern-motif > span {
  position: absolute;
  inset: 0;
  display: block;
  background: currentColor;
}

.pattern-motif--light { color: var(--pattern-light, #fff); }

.pattern-motif--star > span {
  clip-path: polygon(50% 0, 61.8% 34.5%, 97.5% 34.5%, 68.5% 55.5%, 79.5% 90.5%, 50% 69%, 20.5% 90.5%, 31.5% 55.5%, 2.5% 34.5%, 38.2% 34.5%);
}

/* cardVisibility removes a hidden note from the DOM, so fixed legacy slots
   must follow the raw data index instead of the remaining child order. */
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="0"] { top: 18.5185%; left: 3.1481%; right: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="1"] { top: 30.3704%; right: 3.1481%; left: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="2"] { top: 43.7037%; left: 3.1481%; right: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="3"] { top: 58.5185%; right: 3.1481%; left: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="4"] { top: 73.3333%; left: 3.1481%; right: auto; }

.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="0"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="2"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="4"] { left: auto; right: 3.1481%; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="1"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="3"] { left: 3.1481%; right: auto; }

.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="0"] { top: 23.1111%; left: 2.3333%; right: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="1"] { top: 23.1111%; right: 2.3333%; left: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="2"] { top: 43.2593%; left: 2.3333%; right: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="3"] { top: 43.2593%; right: 2.3333%; left: auto; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"] #boardGearList .board-gear-item[data-gear-index="4"] { top: 63.4074%; left: 2.3333%; right: auto; }

.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="0"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="2"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="4"] { left: auto; right: 2.3333%; }
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="1"],
.canvas-board:not([data-composition-custom="true"])[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] #boardGearList .board-gear-item[data-gear-index="3"] { left: 2.3333%; right: auto; }

.canvas-board:not([data-composition-custom="true"])[data-cast="2"] #boardGearList .board-gear-rail .board-gear-item[data-gear-index="0"] { grid-row: 1 !important; }
.canvas-board:not([data-composition-custom="true"])[data-cast="2"] #boardGearList .board-gear-rail .board-gear-item[data-gear-index="1"] { grid-row: 2 !important; }
.canvas-board:not([data-composition-custom="true"])[data-cast="2"] #boardGearList .board-gear-rail .board-gear-item[data-gear-index="2"] { grid-row: 3 !important; }
.canvas-board:not([data-composition-custom="true"])[data-cast="2"] #boardGearList .board-gear-rail .board-gear-item[data-gear-index="3"] { grid-row: 4 !important; }
.canvas-board:not([data-composition-custom="true"])[data-cast="2"] #boardGearList .board-gear-rail .board-gear-item[data-gear-index="4"] { grid-row: 5 !important; }

/* Custom information plans are applied only when the saved composition or
   selected item count differs from the legacy five-note recipe. The app sets
   each planned button's percentage rectangle from CardComposition. */
.canvas-board[data-composition-custom="true"] #boardGearList {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
  isolation: isolate;
}

.canvas-board[data-composition-custom="true"][data-composition-layer="info-front"] #boardGearList {
  z-index: 15 !important;
}

.canvas-board[data-composition-custom="true"] #boardGearList .board-gear-item {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none;
  transform: none;
}

.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy {
  position: absolute;
  left: var(--plan-copy-left, 3%);
  top: var(--plan-copy-top, 3%);
  width: var(--plan-copy-width, 94%);
  height: var(--plan-copy-height, 94%);
  box-sizing: border-box;
  display: grid;
  align-content: start;
  justify-items: start;
  text-align: left;
  gap: calc(var(--plan-group-gap, 3) * var(--card-plan-unit-scale, 1));
  overflow: visible;
  padding: 0;
}

.canvas-board[data-ratio="portrait"] { --card-plan-unit-scale: calc(100cqw / 1080); }
.canvas-board[data-ratio="landscape"] { --card-plan-unit-scale: calc(100cqw / 1200); }

.canvas-board[data-composition-layer="person-front"] #boardGearList {
  z-index: 16 !important;
}

.canvas-board[data-composition-layer="person-front"] #boardGearList .board-gear-item {
  border-color: transparent !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.canvas-board[data-composition-layer="person-front"] #boardGearList .gear-note-surface,
.canvas-board[data-composition-layer="person-front"] #boardGearList .gear-tile-tape,
.canvas-board[data-composition-layer="person-front"] #boardGearList .gear-note-stamp {
  display: none !important;
}

.canvas-board[data-composition-layer="person-front"] #boardGearSurfaceLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 9 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

.canvas-board[data-composition-layer="person-front"] #boardGearSurfaceLayer .board-gear-surface-item {
  position: absolute !important;
  display: block !important;
  box-sizing: border-box;
  margin: 0 !important;
  pointer-events: none;
}

.canvas-board[data-composition-layer="person-front"] #boardGearSurfaceLayer .gear-note-surface,
.canvas-board[data-composition-layer="person-front"] #boardGearSurfaceLayer .gear-tile-tape,
.canvas-board[data-composition-layer="person-front"] #boardGearSurfaceLayer .gear-note-stamp {
  display: block !important;
}

.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > .gear-slot-label,
.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > strong,
.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > .gear-item-secondary {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > .gear-slot-label {
  font-size: calc(var(--plan-slot-size, 8) * var(--card-plan-unit-scale, 1));
  line-height: calc(var(--plan-slot-line-height, 9) * var(--card-plan-unit-scale, 1));
}

.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > strong {
  font-size: calc(var(--plan-primary-size, 12) * var(--card-plan-unit-scale, 1));
  line-height: calc(var(--plan-primary-line-height, 14) * var(--card-plan-unit-scale, 1));
}

.canvas-board[data-composition-custom="true"] #boardGearList .gear-tile-copy > .gear-item-secondary {
  font-size: calc(var(--plan-secondary-size, 9) * var(--card-plan-unit-scale, 1));
  line-height: calc(var(--plan-secondary-line-height, 10) * var(--card-plan-unit-scale, 1));
}

@media (prefers-reduced-motion: reduce) {
  .scene-pattern { transition: none; }
}

.canvas-board[data-cast="3"] .board-editorial-header,
.canvas-board[data-cast="4"] .board-editorial-header,
.canvas-board[data-cast="5"] .board-editorial-header {
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  padding: 4.5% 8% 1%;
  color: rgb(27 29 33 / .9);
  background: transparent;
  text-align: center;
}

.canvas-board[data-cast="3"] .board-editorial-header .board-title-block,
.canvas-board[data-cast="4"] .board-editorial-header .board-title-block,
.canvas-board[data-cast="5"] .board-editorial-header .board-title-block { max-width: 82%; }

.canvas-board[data-cast="3"] .board-editorial-header .board-title-block > strong,
.canvas-board[data-cast="4"] .board-editorial-header .board-title-block > strong,
.canvas-board[data-cast="5"] .board-editorial-header .board-title-block > strong {
  color: inherit;
  font-family: var(--card-title-font, var(--sans));
  font-size: clamp(22px, var(--card-title-font-size-scale-lineup, 4.5cqw), 54px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .95;
}

.canvas-board[data-cast="3"] .caption-description,
.canvas-board[data-cast="4"] .caption-description,
.canvas-board[data-cast="5"] .caption-description,
.canvas-board[data-cast="3"] .board-gear-list,
.canvas-board[data-cast="4"] .board-gear-list,
.canvas-board[data-cast="5"] .board-gear-list { display: none !important; }

.canvas-board[data-cast="3"] .portrait-wrap,
.canvas-board[data-cast="4"] .portrait-wrap,
.canvas-board[data-cast="5"] .portrait-wrap,
.canvas-board[data-cutout="false"][data-cast="3"] .portrait-wrap,
.canvas-board[data-cutout="false"][data-cast="4"] .portrait-wrap,
.canvas-board[data-cutout="false"][data-cast="5"] .portrait-wrap { inset: 21% 1% 3%; }

.canvas-board[data-info="true"][data-info-mode="fade"] .character-figure { opacity: .48; }
.canvas-board[data-info="true"][data-info-mode="fade"] .character-figure:hover,
.canvas-board[data-info="true"][data-info-mode="fade"] .character-figure.is-selected { opacity: .64; }
.canvas-board[data-info="true"][data-info-mode="clear"] .character-figure,
.canvas-board[data-info="true"][data-info-mode="silhouette"] .character-figure { opacity: 1; }
.canvas-board[data-info="true"][data-info-mode="silhouette"] .character-figure[data-cutout="true"] { opacity: .74; }

.card-compose-section { gap: 12px; }
.backdrop-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }

/* Solo portrait contract: editorial 4:5 card with staggered item notes. */
.canvas-board[data-ratio="portrait"] {
  width: min(100%, 680px);
  max-width: 680px;
  aspect-ratio: 4 / 5;
}

.canvas-board[data-ratio="landscape"] {
  aspect-ratio: 16 / 9;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-editorial-header {
  z-index: 11;
  min-height: 0;
  justify-content: center;
  padding: 6.5% 6% 2%;
  background: transparent;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-editorial-header .board-title-block {
  max-width: 100%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-editorial-header .board-title-block > strong {
  font-family: var(--card-title-font, var(--sans));
  font-size: clamp(28px, var(--card-title-font-size-scale, 7.2cqw), 58px);
  line-height: .93;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .caption-description {
  display: none;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .portrait-wrap {
  z-index: 10;
  inset: 12% 6% 1%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-cutout="false"] .portrait-wrap {
  z-index: 4;
  inset: 12% 5% 2%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-list {
  z-index: 9;
  inset: 0;
  display: block !important;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item {
  position: absolute;
  width: 34.2593%;
  height: 8.5926%;
  grid-template-rows: minmax(0, 1fr);
  border-color: rgb(255 255 255 / .5);
  background: rgb(15 18 21 / .72);
  box-shadow: 0 8px 22px rgb(28 31 38 / .14);
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(1) { top: 18.5185%; left: 3.1481%; }
.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(2) { top: 30.3704%; right: 3.1481%; }
.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(3) { top: 43.7037%; left: 3.1481%; }
.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(4) { top: 58.5185%; right: 3.1481%; }
.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(5) { top: 73.3333%; left: 3.1481%; }

/* Keep the solo landscape export on the same five fixed notes as the PNG
   renderer. Alternating sides gives the character a visual center instead of
   pushing every equipment note into one crowded rail. */
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-list {
  inset: 0 !important;
  display: block !important;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item {
  position: absolute;
  width: 25%;
  height: 13.6296%;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item:nth-child(1) { top: 23.1111%; left: 2.3333%; }
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item:nth-child(2) { top: 23.1111%; right: 2.3333%; }
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item:nth-child(3) { top: 43.2593%; left: 2.3333%; }
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item:nth-child(4) { top: 43.2593%; right: 2.3333%; }
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-item:nth-child(5) { top: 63.4074%; left: 2.3333%; }

.canvas-board[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(1),
.canvas-board[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(3),
.canvas-board[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(5) {
  right: 2.3333%;
  left: auto;
}

.canvas-board[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(2),
.canvas-board[data-ratio="landscape"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(4) {
  right: auto;
  left: 2.3333%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(1),
.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(3),
.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(5) {
  right: 3.1481%;
  left: auto;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(2),
.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(4) {
  right: auto;
  left: 3.1481%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item:nth-child(odd),
.canvas-board[data-ratio="portrait"][data-cast="1"][data-single-layout="info-right"] .board-gear-item:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) 34%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .gear-tile-copy {
  height: 100%;
  align-content: center;
  padding: 6% 7%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .gear-tile-copy span {
  font-size: clamp(7px, 1.25cqw, 10px);
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .gear-tile-copy strong {
  font-size: clamp(8px, 1.55cqw, 13px);
}

@media (max-width: 560px) {
  .canvas-board[data-ratio="portrait"][data-cast="1"] .portrait-wrap {
    inset: 13% 4% 1%;
  }

  .canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-item {
    width: 34.2593%;
  }
}

/* Inline card copy: one source of truth for title and description. */
#multiCardControls[hidden] {
  display: none !important;
}

.canvas-context {
  display: flex;
  align-items: center;
  min-height: 34px;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
}

.canvas-context span {
  padding-left: 10px;
  border-left: 2px solid var(--primary);
}

.board-title-block [contenteditable="true"] {
  cursor: text;
  outline: 0;
}

.board-title-block [contenteditable="true"]:hover {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 5px;
}

.board-title-block [contenteditable="true"]:focus {
  /* Direct editing stays on the continuous card surface. The readability
     layer supplies the selection outline; do not turn the text into a
     floating, shadowed input box. */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

/* The editor copy has a more specific outline reset above. Restore the
   shared keyboard focus treatment so forced-colors users do not depend on a
   box shadow that the browser may suppress. */
.board-title-block [contenteditable="true"]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 3px;
  border: 2px solid transparent !important;
}

@media (forced-colors: active) {
  .board-title-block [contenteditable="true"]:focus-visible {
    border-color: CanvasText !important;
  }
}

.board-editorial-header .caption-description[contenteditable="true"] {
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

.canvas-board[data-cast="3"] .caption-description,
.canvas-board[data-cast="4"] .caption-description,
.canvas-board[data-cast="5"] .caption-description {
  display: block !important;
  max-width: min(82cqw, 660px);
  margin: 10px auto 0;
  color: inherit;
  font-size: clamp(8px, 1.15cqw, 14px);
  line-height: 1.4;
  text-align: center;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .caption-description {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  font-size: clamp(8px, 1.5cqw, 12px);
  line-height: 1.35;
}

@media (max-width: 560px) {
  .canvas-context {
    min-height: 28px;
  }

  .canvas-board[data-cast="3"] .caption-description,
  .canvas-board[data-cast="4"] .caption-description,
  .canvas-board[data-cast="5"] .caption-description {
    max-width: 90cqw;
  }
}

.style-advanced-toggle {
  display: flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.style-advanced-toggle:hover { color: var(--foreground); }
.style-advanced-icon { font-size: 15px; font-weight: 400; line-height: 1; }
.style-advanced-controls { display: grid; gap: 10px; padding-top: 3px; }
#styleAdvancedControls[hidden] { display: none !important; }

/* Theme-aware title contrast without a full-width masthead. */
.canvas-board[data-style="quiet-paper"] .board-editorial-header,
.canvas-board[data-style="soft-pixel"] .board-editorial-header {
  color: #242a30;
}

.canvas-board[data-style="blue-bitmap"] .board-editorial-header {
  color: #214854;
}

.canvas-board[data-style="scrapbook-pop"] .board-editorial-header {
  color: #5a3034;
}

.canvas-board[data-cast="2"] .board-editorial-header { z-index: 11; }

.canvas-board[data-style="quiet-paper"] .board-editorial-header .caption-description,
.canvas-board[data-style="soft-pixel"] .board-editorial-header .caption-description,
.canvas-board[data-style="blue-bitmap"] .board-editorial-header .caption-description,
.canvas-board[data-style="scrapbook-pop"] .board-editorial-header .caption-description {
  color: currentColor;
  opacity: .68;
}

.canvas-board[data-style="quiet-paper"] .board-title-block > strong,
.canvas-board[data-style="soft-pixel"] .board-title-block > strong,
.canvas-board[data-style="blue-bitmap"] .board-title-block > strong,
.canvas-board[data-style="scrapbook-pop"] .board-title-block > strong {
  color: inherit;
}

.canvas-board[data-style="blue-bitmap"] .board-title-block {
  padding-left: 12px;
  border-left: 3px solid rgb(33 72 84 / .42);
}

.canvas-board[data-style="soft-pixel"] .board-title-block {
  padding: 5px 9px 7px;
  border-radius: 9px;
  background: rgb(255 255 255 / .34);
}

.canvas-board[data-style="scrapbook-pop"] .board-title-block {
  padding: 6px 11px 8px;
  background: #fff7ea;
  box-shadow: 3px 4px 0 rgb(90 48 52 / .13);
  transform: rotate(-.7deg);
}

.canvas-board[data-style="quiet-paper"] .scene-pattern { opacity: 0; }
.canvas-board[data-style="blue-bitmap"] .scene-pattern { opacity: .23; }
.canvas-board[data-style="soft-pixel"] .scene-pattern { opacity: .2; }
.canvas-board[data-style="scrapbook-pop"] .scene-pattern { opacity: .3; }

/* Portrait cards place the source image behind the editorial title layer. */
.canvas-board[data-ratio="portrait"][data-cast="1"] .portrait-wrap {
  inset: 18% 6% 1%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-cutout="true"] .portrait-wrap {
  inset: 16% 6% 1%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-cutout="false"] .portrait-wrap {
  inset: 19% 5% 2%;
}

/* Recipe-aware item notes: opaque copy keeps Korean item names legible while
   the character can still overlap the image half of a note. */
.canvas-board[data-style="quiet-paper"] .board-gear-tiles .board-gear-item,
.canvas-board[data-style="soft-pixel"] .board-gear-tiles .board-gear-item {
  border-color: rgb(36 42 48 / .16);
  background: rgb(250 248 244 / .94);
  box-shadow: 0 8px 20px rgb(36 42 48 / .1);
}

.canvas-board[data-style="quiet-paper"] .board-gear-tiles .gear-tile-copy,
.canvas-board[data-style="soft-pixel"] .board-gear-tiles .gear-tile-copy {
  color: #242a30;
}

.canvas-board[data-style="quiet-paper"] .board-gear-tiles .gear-tile-copy span,
.canvas-board[data-style="soft-pixel"] .board-gear-tiles .gear-tile-copy span {
  color: rgb(36 42 48 / .58);
}

.canvas-board[data-style="quiet-paper"] .board-gear-tiles .gear-tile-copy strong,
.canvas-board[data-style="soft-pixel"] .board-gear-tiles .gear-tile-copy strong {
  color: #242a30;
}

.canvas-board[data-style="blue-bitmap"] .board-gear-tiles .board-gear-item {
  border-color: rgb(33 72 84 / .26);
  background: rgb(235 247 248 / .94);
  box-shadow: 0 8px 20px rgb(33 72 84 / .12);
}

.canvas-board[data-style="blue-bitmap"] .board-gear-tiles .gear-tile-copy {
  color: #214854;
}

.canvas-board[data-style="blue-bitmap"] .board-gear-tiles .gear-tile-copy span {
  color: rgb(33 72 84 / .62);
}

.canvas-board[data-style="blue-bitmap"] .board-gear-tiles .gear-tile-copy strong {
  color: #214854;
}

.canvas-board[data-style="scrapbook-pop"] .board-gear-tiles .board-gear-item {
  border-color: rgb(90 48 52 / .2);
  border-radius: 3px;
  background: rgb(255 247 235 / .95);
  box-shadow: 3px 4px 0 rgb(90 48 52 / .13);
}

.canvas-board[data-style="scrapbook-pop"] .board-gear-tiles .gear-tile-copy {
  color: #5a3034;
}

.canvas-board[data-style="scrapbook-pop"] .board-gear-tiles .gear-tile-copy span {
  color: rgb(90 48 52 / .62);
}

.canvas-board[data-style="scrapbook-pop"] .board-gear-tiles .gear-tile-copy strong {
  color: #5a3034;
}

.canvas-board[data-ratio="portrait"][data-cast="1"][data-cutout="false"] .portrait-wrap img {
  object-position: center center;
}

/* Title typefaces: the selector is intentionally limited to the user-selected
   Noonnu/source families. UI copy stays Pretendard; these faces are only for the
   editable card title and its exported counterpart. */
@font-face {
  font-family: "YoonchoUsanChildrenS";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaDaeHan.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YunChorokwoosanEoriniMinguk";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaMinGuk.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "YoonChoWooSan";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408@1.0/YoonChildfundkoreaManSeh.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nelna_Yesam";
  src: url("https://cdn.jsdelivr.net/gh/fontbee/font@main/Nelna/Nelna_Yesam.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "NelnaLizzyChae";
  src: url("https://cdn.jsdelivr.net/gh/fontbee/font@main/Nelna/NelnaLizzyChae.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cafe24MoyaMoyaFace";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/Cafe24Moyamoya-Face-v1.0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GMarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "GMarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "GMarketSans";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Stella";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/2608201622@stellar-serif/stellar-serif/Stellar_Serif_Bold_Condensed.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafetyRoundedSmile";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafetyRoundedSmile";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "KerisKedyuche";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-3@1.0/KERISKEDU_R.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "KerisKedyuche";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2601-3@1.0/KERISKEDU_B.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "EutmanGungseo";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/OKGUNG.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff") format("woff");
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff") format("woff");
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff") format("woff");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff") format("woff");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Escoredream";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff") format("woff");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Ridibatang";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ZenSerif";
  src: url("/assets/fonts/ZEN-SERIF-TTF-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafeOuting";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimNadeuriTTF-L.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SchoolSafeOuting";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimNadeuriTTF-B.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Gunhamimalmunteuyeot";
  src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/2607131613@gfcgunhamitalks/gfcgunhamitalks/GFCGunhamiTalks.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "GoryeongStrawberry";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-01@1.0/GoryeongStrawberry.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cafe24ClassicType";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Cafe24ClassicType-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "SinchonRhapsody";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2503@1.0/SinchonRhapsody.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shouting";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2510-1@1.0/Callifont-Medium.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "KIMWILDgag-Bold";
  src: url("https://cdn.jsdelivr.net/gh/woffz/b3@main/KIMWILDgag-Bold/KIMWILDgag-Bold.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "x12y12pxMaruMinyaHangul";
  src: url("https://cdn.jsdelivr.net/gh/quiple/x12y12pxMaruMinyaHangul@main/fonts/x12y12pxMaruMinyaHangul.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DosHandwriting";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/DOSPilgiMedium.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

.board-title-block > strong,
.board-editorial-header .board-title-block > strong {
  font-family: var(--card-title-font, var(--sans));
  font-weight: var(--card-title-weight, 700) !important;
  font-synthesis: none;
}

.canvas-board .board-editorial-header .board-title-block > strong {
  font-weight: var(--card-title-weight, 700) !important;
}

.title-font-control {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.title-weight-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 6px;
  min-height: 18px;
}

.title-weight-row[hidden] { display: none; }
.title-weight-row label { color: var(--muted-foreground); font-size: 9px; }
.title-weight-row output {
  color: var(--muted-foreground);
  font-family: var(--mono);
  font-size: 9px;
  text-align: right;
}
.title-weight-row input[type="range"] {
  width: 100%;
  height: 16px;
  margin: 0;
  accent-color: var(--primary);
}

.canvas-board[data-style="blue-bitmap"] .scene-pattern::before {
  opacity: .72;
}

.canvas-board[data-style="blue-bitmap"] .scene-pattern::after {
  opacity: .84;
}

.canvas-board[data-style="soft-pixel"] .board-editorial-header::after,
.canvas-board[data-style="scrapbook-pop"] .board-editorial-header::after {
  position: absolute;
  right: 7%;
  bottom: 16%;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  opacity: .28;
  content: "";
  transform: rotate(45deg);
}

/* Text-first gear notes: the character remains the hero and item information
   stays crisp at every export size. Item artwork is intentionally omitted. */
.board-gear-list.board-gear-tiles {
  z-index: 14 !important;
  isolation: isolate;
}

.board-gear-tiles .board-gear-item,
.canvas-board[data-cast="1"] .board-gear-tiles .board-gear-item,
.canvas-board[data-cast="2"] .board-gear-tiles .board-gear-item,
.canvas-board[data-cast="3"] .board-gear-tiles .board-gear-item,
.canvas-board[data-cast="4"] .board-gear-tiles .board-gear-item,
.canvas-board[data-cast="5"] .board-gear-tiles .board-gear-item {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  align-items: stretch;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

.board-gear-tiles .board-gear-item:hover {
  transform: translateY(-1px);
}

.board-gear-tiles .board-gear-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.board-gear-tiles .gear-tile-copy,
.canvas-board[data-ratio="portrait"][data-cast="1"] .board-gear-tiles .gear-tile-copy {
  display: grid;
  grid-column: 1 !important;
  grid-row: 1 !important;
  align-content: center;
  width: 100%;
  height: 100%;
  gap: clamp(2px, .35cqw, 5px);
  padding: 7% 8%;
}

.board-gear-tiles .gear-slot-label::before {
  display: none;
  content: none;
}

/* Material skins use their note edge and tape as the visual anchor. */
.board-gear-tiles .gear-note-surface,
.board-gear-tiles .gear-tile-tape {
  display: none;
}

.board-gear-tiles .gear-item-secondary {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(6px, .95cqw, 9px);
  font-weight: 500;
  letter-spacing: .025em;
  line-height: 1.12;
}

.canvas-board[data-style="quiet-paper"] .board-gear-tiles .gear-item-secondary,
.canvas-board[data-style="soft-pixel"] .board-gear-tiles .gear-item-secondary {
  color: rgb(36 42 48 / .5);
}

.canvas-board[data-style="blue-bitmap"] .board-gear-tiles .gear-item-secondary {
  color: rgb(33 72 84 / .54);
}

.canvas-board[data-style="scrapbook-pop"] .board-gear-tiles .gear-item-secondary {
  color: rgb(90 48 52 / .54);
}

/* Landscape is a supported export, not the primary solo composition. Keep a
   full-frame source image contained in its half of the card and give the
   notes enough type scale to remain useful beside it. */
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-tile-copy {
  gap: clamp(3px, .45cqw, 6px);
  padding: 6px 9%;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-slot-label {
  font-size: clamp(8px, .95cqw, 12px);
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-tile-copy strong {
  font-size: clamp(10px, 1.25cqw, 16px);
  line-height: 1.15;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-item-secondary {
  font-size: clamp(7px, .82cqw, 10px);
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-tile-copy,
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-tile-copy strong,
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-slot-label {
  color: #242a30 !important;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-gear-tiles .gear-item-secondary {
  color: rgb(36 42 48 / .58) !important;
}

/* The note copy is a vertical stack, not a 2D layout. Flex keeps each line's
   intrinsic height stable when the card is resized or exported. */
.board-gear-tiles .gear-tile-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  text-align: start;
}

.board-gear-tiles .gear-tile-copy > * {
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  max-width: 100%;
}

/* Full-image mode must preserve the source frame and keep its free space
   balanced around the card center. Cropping is opt-in through the user's
   source image, never an implicit side effect of this mode. */
.canvas-board[data-cutout="false"] .portrait-wrap img {
  object-fit: contain;
  object-position: center center;
  transform-origin: center center;
}

.multi-info-items > .multi-info-item {
  display: grid;
  gap: 1px;
  overflow: visible;
  white-space: normal;
}

.multi-info-item > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-info-item > small {
  margin: 0;
  font-family: var(--sans);
  font-size: .68em;
  font-weight: 500;
  letter-spacing: .025em;
  opacity: .62;
}

/* Lineup cards become narrow before the editor itself reaches its mobile
   breakpoint. Keep the Korean primary name prominent, but retain the English
   locale line in the card so preview and export communicate the same item
   identity. The secondary line gets its own compact measure instead of being
   removed from the composition. */
@container (max-width: 540px) {
  .canvas-board[data-cast="3"] .multi-info-column,
  .canvas-board[data-cast="4"] .multi-info-column,
  .canvas-board[data-cast="5"] .multi-info-column {
    gap: clamp(3px, .7cqw, 7px);
    padding-inline: 2.5%;
  }

  .canvas-board[data-cast="3"] .multi-info-items,
  .canvas-board[data-cast="4"] .multi-info-items,
  .canvas-board[data-cast="5"] .multi-info-items {
    gap: clamp(3px, .55cqw, 5px);
    font-size: clamp(8px, .92cqw, 12px);
    font-weight: 700;
    line-height: 1.12;
  }

  .canvas-board[data-cast="3"] .multi-info-item > small,
  .canvas-board[data-cast="4"] .multi-info-item > small,
  .canvas-board[data-cast="5"] .multi-info-item > small {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(6px, .64cqw, 8px);
    line-height: 1.1;
    letter-spacing: .015em;
  }

}

.header-language-toggle {
  width: 106px;
  flex: 0 0 auto;
}

.header-language-toggle .language-button {
  min-height: 32px;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
}

.catalog-section {
  background: var(--background);
}

.catalog-section .catalog-results {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 560px) {
  .header-language-toggle {
    width: 88px;
  }

  .header-language-toggle .language-button {
    min-height: 30px;
    font-size: 8px;
  }
}

/* Continuous editorial surface: the title is a local graphic layer, never a
   full-width masthead. Contrast is handled by the optional glyph outline. */
.canvas-board .board-editorial-header {
  min-height: 0 !important;
  height: auto;
  padding: 4.5% 5% 0 !important;
  border: 0 !important;
  color: #242a30;
  background: transparent !important;
}

.canvas-board .board-editorial-header .board-title-block {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

.canvas-board .board-editorial-header .board-title-block::after {
  position: absolute;
  top: -12%;
  right: -5%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 12px 3px 0 -1px currentColor, 23px -4px 0 -2px currentColor;
  content: "";
  opacity: .24;
  pointer-events: none;
}

.canvas-board .board-editorial-header .board-title-block > strong { color: inherit; }

.canvas-board[data-style="blue-bitmap"] .board-editorial-header { color: #214854; }
.canvas-board[data-style="soft-pixel"] .board-editorial-header { color: #3d3b4c; }
.canvas-board[data-style="scrapbook-pop"] .board-editorial-header { color: #5a3034; }

.canvas-board[data-style="soft-pixel"] .board-editorial-header .board-title-block {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.canvas-board[data-style="soft-pixel"] .board-editorial-header::after,
.canvas-board[data-style="scrapbook-pop"] .board-editorial-header::after,
.canvas-board[data-style="scrapbook-pop"] .board-editorial-header::before {
  display: none;
}

.canvas-board[data-cast="3"] .board-editorial-header,
.canvas-board[data-cast="4"] .board-editorial-header,
.canvas-board[data-cast="5"] .board-editorial-header {
  min-height: 0 !important;
  padding: 3.5% 8% 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Two-person cards keep the information rails at the outer edges, so the
   editorial copy must use the full inner card width. Without this override
   the legacy 64% title block stays left-biased even when its text is set to
   center, making preview and export disagree with the card's visual center. */
.canvas-board[data-cast="2"] .board-editorial-header {
  justify-content: center;
  padding: 3.5% 5% 0 !important;
}

.canvas-board[data-cast="2"] .board-editorial-header .board-title-block {
  width: 100%;
  max-width: 100%;
}

.canvas-board[data-ratio="portrait"][data-cast="1"] .board-editorial-header {
  min-height: 0 !important;
  padding: 4.5% 6% 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Solo landscape copy belongs to the central editorial gap created by the
   split equipment notes. Keeping the box ratio-based prevents info-left and
   info-right from pulling the title/subtitle toward one outer edge. */
.canvas-board[data-ratio="landscape"][data-cast="1"] .board-editorial-header {
  justify-content: center;
  padding: 4.5% 5% 0 !important;
  text-align: center;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-editorial-header .board-title-block {
  width: 100%;
  max-width: 46%;
  align-items: stretch;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-editorial-header .board-title-block > strong {
  font-family: var(--card-title-font, var(--sans));
  font-size: clamp(24px, var(--card-title-font-size-scale, 6cqw), 54px);
  line-height: .93;
}

.canvas-board[data-ratio="landscape"][data-cast="1"] .board-editorial-header .caption-description {
  display: block;
  max-width: 100%;
  margin-top: 10px;
  font-size: clamp(8px, 1.15cqw, 14px);
  line-height: 1.35;
}

/* Full-frame source screenshots are a single visual field. Let their image
   boxes reach the card edges so the title does not sit above a second,
   unrelated horizontal surface. Text layers remain above the images. */
.canvas-board[data-cutout="false"][data-cast="3"] .portrait-wrap,
.canvas-board[data-cutout="false"][data-cast="4"] .portrait-wrap,
.canvas-board[data-cutout="false"][data-cast="5"] .portrait-wrap {
  inset: 0 !important;
}

/* Background contract: the board is always a solid surface. Pattern and
   paper grain are quiet overlay layers, never alternate background effects. */
.canvas-board[data-background-texture="none"] .scene-texture {
  opacity: .035;
}

.canvas-board[data-background-texture="grain"] .scene-texture {
  opacity: .17;
}

/* Material overlays stay on the texture axis so they can be combined with
   any solid, pattern, or image background. Every recipe uses one contrast-
   aware ink so texture reads as a material mark rather than a second palette. */
.canvas-board[data-background-texture="risograph"] .scene-texture {
  opacity: .15;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--texture-ink, #686879) 66%, transparent) 0 .9px, transparent 1.45px),
    radial-gradient(circle, color-mix(in srgb, var(--texture-ink, #686879) 38%, transparent) 0 .8px, transparent 1.35px);
  background-position: 0 0, 2px 1px;
  background-size: 7px 7px, 8px 8px;
  mix-blend-mode: multiply;
}

.canvas-board[data-background-texture="dust"] .scene-texture {
  opacity: .19;
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--texture-ink, #686879) 62%, transparent) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 27%, color-mix(in srgb, var(--texture-ink, #686879) 46%, transparent) 0 .75px, transparent 1.55px),
    radial-gradient(circle at 34% 71%, color-mix(in srgb, var(--texture-ink, #686879) 72%, transparent) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at 91% 84%, color-mix(in srgb, var(--texture-ink, #686879) 42%, transparent) 0 .7px, transparent 1.45px),
    radial-gradient(circle at 58% 48%, color-mix(in srgb, var(--texture-ink, #686879) 38%, transparent) 0 .65px, transparent 1.35px),
    radial-gradient(circle at 22% 91%, color-mix(in srgb, var(--texture-ink, #686879) 32%, transparent) 0 .7px, transparent 1.4px),
    radial-gradient(circle, color-mix(in srgb, var(--texture-ink, #686879) 58%, transparent) 0 .55px, transparent 1.15px),
    radial-gradient(circle, color-mix(in srgb, var(--texture-ink, #686879) 54%, transparent) 0 .45px, transparent 1px),
    repeating-linear-gradient(14deg, transparent 0 64px, color-mix(in srgb, var(--texture-ink, #686879) 42%, transparent) 64px 65px, transparent 65px 137px),
    repeating-linear-gradient(102deg, transparent 0 118px, color-mix(in srgb, var(--texture-ink, #686879) 48%, transparent) 118px 119px, transparent 119px 208px);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 9px 13px, 0 0, 0 0;
  background-size: auto, auto, auto, auto, auto, auto, 31px 43px, 47px 29px, auto, auto;
  mix-blend-mode: multiply;
}

.canvas-board[data-background-texture="fiber"] .scene-texture {
  opacity: .16;
  background-image:
    repeating-linear-gradient(92deg, color-mix(in srgb, var(--texture-ink, #686879) 52%, transparent) 0 .65px, transparent .65px 9px),
    repeating-linear-gradient(4deg, color-mix(in srgb, var(--texture-ink, #686879) 60%, transparent) 0 .55px, transparent .55px 12px),
    repeating-linear-gradient(17deg, transparent 0 21px, color-mix(in srgb, var(--texture-ink, #686879) 26%, transparent) 21px 21.5px, transparent 21.5px 46px),
    radial-gradient(circle at 24% 38%, color-mix(in srgb, var(--texture-ink, #686879) 40%, transparent) 0 .55px, transparent 1.2px);
  background-position: 0 0, 2px 1px, 0 0, 0 0;
  background-size: 11px 17px, 17px 11px, 41px 47px, 37px 41px;
  mix-blend-mode: multiply;
}

.canvas-board[data-background-texture="halftone"] .scene-texture {
  opacity: .15;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--texture-ink, #686879) 78%, transparent) 0 1.1px, transparent 1.7px);
  background-position: 1px 1px;
  background-size: 7px 7px;
  mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .2) 16%, #000 58%, rgb(0 0 0 / .78) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .2) 16%, #000 58%, rgb(0 0 0 / .78) 100%);
  mix-blend-mode: multiply;
}

.canvas-board[data-background-tone="dark"][data-background-texture="risograph"] .scene-texture,
.canvas-board[data-background-tone="dark"][data-background-texture="dust"] .scene-texture,
.canvas-board[data-background-tone="dark"][data-background-texture="fiber"] .scene-texture,
.canvas-board[data-background-tone="dark"][data-background-texture="halftone"] .scene-texture {
  mix-blend-mode: screen;
}

.canvas-board[data-style] .scene-pattern {
  opacity: var(--pattern-opacity, 0) !important;
}

/* Dark surfaces keep the pattern in the same tonal family as the solid base,
   but need a little more ink so small marks survive the screen blend. Light
   surfaces retain the quieter print strengths above. */
.canvas-board[data-background-tone="dark"] .scene-pattern[data-pattern="dots"] {
  opacity: .28 !important;
}

.canvas-board[data-background-tone="dark"] .scene-pattern[data-pattern="stars"] {
  opacity: .3 !important;
}

.canvas-board[data-background-tone="dark"] .scene-pattern[data-pattern="halftone"] {
  opacity: .3 !important;
}

.canvas-board[data-background-tone="dark"] .scene-pattern[data-pattern="bitmap"] {
  opacity: .32 !important;
}

.canvas-board .scene-pattern[data-pattern="none"],
.canvas-board .scene-pattern[data-pattern="gradient"],
.canvas-board .scene-pattern[data-pattern="grain"] {
  display: none !important;
}

.canvas-board .scene-pattern[data-pattern="stars"] {
  display: block;
}

.canvas-board .scene-pattern[data-pattern="stars"]::before,
.canvas-board .scene-pattern[data-pattern="stars"]::after {
  display: none;
}

/* Star fields borrow the reference mix of large solids, fine outlines,
   four-point sparkles, rings, and tiny dots. Keep the field dense at the
   edges while leaving each motif quiet beneath the subject and copy. */
.canvas-board .pattern-motif {
  width: clamp(8px, var(--size), 140px);
}

.canvas-board .pattern-motif--star > span:first-child,
.canvas-board .pattern-motif--outline > span:first-child {
  clip-path: polygon(50% 0, 61.8% 34.5%, 97.5% 34.5%, 68.5% 55.5%, 79.5% 90.5%, 50% 69%, 20.5% 90.5%, 31.5% 55.5%, 2.5% 34.5%, 38.2% 34.5%);
}

.canvas-board .pattern-motif--outline > .pattern-motif__inner {
  inset: 24%;
  background: var(--board-bg, #fff);
  clip-path: polygon(50% 0, 61.8% 34.5%, 97.5% 34.5%, 68.5% 55.5%, 79.5% 90.5%, 50% 69%, 20.5% 90.5%, 31.5% 55.5%, 2.5% 34.5%, 38.2% 34.5%);
}

.canvas-board .pattern-motif--sparkle > span {
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.canvas-board .pattern-motif--ring > span {
  inset: 15%;
  border: max(1px, .12em) solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.canvas-board .pattern-motif--dot > span {
  inset: 28%;
  border-radius: 50%;
}

/* The halftone control now uses the third reference's soft gingham check:
   two translucent woven bands overlap so their crossings read slightly
   darker, while the rest of the card keeps the selected solid surface. */
.canvas-board .scene-pattern[data-pattern="halftone"] {
  display: block;
  --gingham-cell: clamp(24px, 6.666cqw, 80px);
  --gingham-band: calc(var(--gingham-cell) * .38);
}

.canvas-board .scene-pattern[data-pattern="halftone"]::before,
.canvas-board .scene-pattern[data-pattern="halftone"]::after {
  inset: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  background-image: repeating-linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 52%, transparent) 0 var(--gingham-band),
    transparent var(--gingham-band) var(--gingham-cell)
  );
  background-size: var(--gingham-cell) var(--gingham-cell);
  mask-image: none;
  -webkit-mask-image: none;
  transform: none;
}

.canvas-board .scene-pattern[data-pattern="halftone"]::after {
  display: block;
  background-image: repeating-linear-gradient(
    0deg,
    color-mix(in srgb, currentColor 52%, transparent) 0 var(--gingham-band),
    transparent var(--gingham-band) var(--gingham-cell)
  );
}

/* The persisted `bitmap` key is intentionally presented as a visible
   checkerboard. Use roughly ten large squares across the card so the
   pattern has the open, poster-like rhythm of the supplied references. */
.canvas-board .scene-pattern[data-pattern="bitmap"] {
  display: block;
  --checker-square: clamp(32px, 10cqw, 132px);
}

.canvas-board .scene-pattern[data-pattern="bitmap"]::before {
  inset: 0;
  background-color: var(--pattern-light, #fff);
  background-image:
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%),
    linear-gradient(45deg, currentColor 25%, transparent 25%, transparent 75%, currentColor 75%);
  background-position: 0 0, var(--checker-square) var(--checker-square);
  background-size: calc(var(--checker-square) * 2) calc(var(--checker-square) * 2);
}

.canvas-board .scene-pattern[data-pattern="bitmap"]::after { display: none; }

/* Collage is a material layer, not a field of free-floating marks. The paper
   plate lives on .scene-background so the preview and PNG can share one
   raster asset; item notes supply the semantic paper scraps above it. */
.canvas-board .scene-pattern[data-pattern="collage"] {
  display: none !important;
}

.canvas-board .scene-pattern[data-pattern="scrapbook"] {
  display: none !important;
}

/* Reference star: filled, five-point, slightly narrow inner radius. */
.pattern-motif--star > span {
  clip-path: polygon(50% 0, 61.8% 34.5%, 97.5% 34.5%, 68.5% 55.5%, 79.5% 90.5%, 50% 69%, 20.5% 90.5%, 31.5% 55.5%, 2.5% 34.5%, 38.2% 34.5%);
}