/* Main Collage v261007 — two composed, content-replaceable editions. */
.mc-root {
  --mc-ink: #282c30;
  --mc-muted: #646965;
  --mc-shadow: 0 3px 6px #33332720,0 18px 30px -19px #20221960;
  box-sizing: border-box;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: var(--mc-ink);
  font: 14px/1.5 var(--content-font-family,'Arial',sans-serif);
  isolation: isolate;
  overflow-x: clip
}

.mc-root *, .mc-editor * {
  box-sizing: border-box
}

.mc-root [hidden],.mc-editor [hidden] {
  display: none!important
}

.mc-root :where(h1,h2,p,figure,dl,dd,ul) {
  margin: 0;
  padding: 0
}

/* Homepage CSS often colours bare tags (h2, small, p…); inside the collage they follow the skin's ink.
   One class of weight beats those tag rules while every skin rule still wins. */
.mc-root :where(h1,h2,h3,h4,p,small,strong,em,time,li,figcaption,dt,dd) {
  color: inherit
}

.mc-root a {
  color: inherit;
  text-decoration: none
}

.mc-root a:hover {
  text-decoration: underline;
  text-underline-offset: 4px
}

.mc-root :is(a,button):focus-visible,.mc-editor :is(button,input,textarea,select):focus-visible {
  outline: 3px solid var(--mc-accent,#698d9d);
  outline-offset: 3px
}

.mc-canvas {
  container-type: inline-size;
  position: relative;
  width: 65vw;
  height: 80svh;
  min-height: 0;
  margin: 10svh auto;
  isolation: isolate
}

/* Paper and envelope surfaces can be see-through (editor "투명도"); lines and ink keep the solid colour. */
.mc-root {
  --mc-paper-s: color-mix(in srgb,var(--mc-paper,#fffefa) calc(var(--mc-paper-a,1) * 100%),transparent);
  --mc-folder-s: color-mix(in srgb,var(--mc-folder,#e7d4a9) calc(var(--mc-folder-a,1) * 100%),transparent);
  --mc-nb-paper-s: color-mix(in srgb,var(--mc-nb-paper,#1b2427) calc(var(--mc-nb-paper-a,1) * 100%),transparent);
  --mc-dr-paper-s: color-mix(in srgb,var(--mc-dr-paper,#111716) calc(var(--mc-dr-paper-a,1) * 100%),transparent);
}

.mc-paper,.mc-underpaper {
  position: absolute;
  inset: 1% 1.5%;
  background: var(--mc-paper-s);
  box-shadow: var(--mc-shadow);
  z-index: -2;
  pointer-events: none
}

.mc-paper {
  transform: rotate(-.6deg);
  background-image: radial-gradient(#88836f21 .65px,transparent .8px);
  background-size: 5px 5px
}

.mc-underpaper {
  inset: 3% 0 1% 3%;
  transform: rotate(1.6deg);
  background: #d9dfdc
}

.mc-paper:after {
  content: '';
  position: absolute;
  left: 1.3%;
  top: 3%;
  bottom: 3%;
  width: 16px;
  background: radial-gradient(circle at 50% 50%,#d7d7cf 6px,transparent 7px) 0 0/16px 42px repeat-y
}

.mc-masthead {
  position: absolute;
  left: 6%;
  top: 63%;
  width: 56%;
  height: 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 4
}

.mc-issue {
  font-size: clamp(10px,.8cqw,14px);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4
}

.mc-masthead h1 {
  font: 900 clamp(35px,6.4cqw,110px)/.98 Georgia,'Times New Roman',serif;
  letter-spacing: -.07em;
  overflow-wrap: anywhere;
  max-height: 2.1em;
  margin: .08em 0!important
}

.mc-masthead h1::first-letter {
  color: var(--mc-accent)
}

.mc-subtitle {
  font-size: clamp(12px,1cqw,17px);
  letter-spacing: .1em
}

.mc-scrap-photos {
  position: absolute;
  left: 6%;
  top: 5%;
  width: 53%;
  height: 57%
}

.mc-photo {
  margin: 0;
  background: #fffdfa;
  box-shadow: var(--mc-shadow);
  padding: 2.5%;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  position: relative
}

.mc-photo-window {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #e2e4df
}

.mc-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.mc-photo figcaption {
  font: italic clamp(12px,1.1cqw,20px)/1.35 Georgia,serif;
  min-height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .45em .3em 0;
  overflow-wrap: anywhere
}

.mc-main-photo {
  position: absolute;
  inset: 7% 3% 0 0;
  transform: rotate(-3deg);
  z-index: 2;
  padding: 2.8% 2.8% 0
}

.mc-back-photo {
  position: absolute;
  inset: 0 0 7% 8%;
  transform: rotate(5deg);
  opacity: .9
}

.mc-paperclip {
  position: absolute;
  top: 3%;
  left: 6%;
  width: 22px;
  height: 86px;
  border: 2px solid #737b78;
  border-radius: 16px;
  transform: rotate(24deg);
  z-index: 5;
  box-shadow: 1px 1px 2px #0003
}

.mc-paperclip:after {
  content: '';
  position: absolute;
  inset: 10px 4px -7px;
  border: 2px solid #a4a49b;
  border-radius: 10px
}

.mc-note {
  position: absolute;
  right: 5%;
  top: 6%;
  width: 30%;
  min-height: 15%;
  padding: 2% 2.2%;
  background: #f8f5e9;
  box-shadow: var(--mc-shadow);
  transform: rotate(2deg);
  z-index: 3;
  overflow-wrap: anywhere
}

.mc-note p {
  font-size: clamp(12px,1.2cqw,19px);
  line-height: 1.65;
  white-space: normal
}

.mc-script {
  display: block;
  font: italic clamp(21px,2.5cqw,42px)/1.15 'Snell Roundhand','Brush Script MT',Georgia,serif;
  color: var(--mc-accent);
  margin-top: .25em;
  overflow-wrap: anywhere
}

.mc-tape {
  position: absolute;
  top: -12px;
  left: 38%;
  width: 27%;
  height: 27px;
  transform: rotate(-4deg);
  background: repeating-linear-gradient(45deg,color-mix(in srgb,var(--mc-highlight,#edcf87) 65%,transparent) 0 8px,color-mix(in srgb,var(--mc-highlight,#edcf87) 45%,transparent) 8px 14px);
  clip-path: polygon(2% 0,98% 4%,100% 20%,97% 35%,100% 56%,97% 70%,99% 100%,0 96%,3% 72%,0 48%,3% 26%);
  pointer-events: none
}

.mc-calendar {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 10%;
  top: 28%;
  width: 23%;
  height: 26%;
  padding: 1.6% 2%;
  background: #fffef9;
  box-shadow: var(--mc-shadow);
  transform: rotate(3deg);
  z-index: 2
}

.mc-calendar header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-shrink: 0;
  font-size: clamp(10px,.75cqw,13px)
}

.mc-calendar header strong {
  letter-spacing: .13em;
  font-size: clamp(14px,1.2cqw,20px)
}

.mc-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  grid-auto-rows: minmax(0,1fr);
  flex: 1;
  min-height: 0;
  gap: 2px;
  text-align: center;
  font-size: clamp(10px,.85cqw,14px)
}

.mc-calendar-grid>* {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.mc-weekday {
  font-size: .75em;
  color: var(--mc-muted)
}

.mc-today {
  border-radius: 50%;
  background: var(--mc-accent);
  color: white!important
}

.mc-event:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor
}

.mc-film {
  position: absolute;
  right: 3%;
  top: 58%;
  width: 35%;
  height: 16%;
  display: flex;
  gap: 4px;
  padding: 11px 5px;
  background: #262c2e;
  transform: rotate(-3deg);
  box-shadow: var(--mc-shadow);
  z-index: 3
}

.mc-film:before,.mc-film:after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  height: 5px;
  background: repeating-linear-gradient(90deg,#f1eee4 0 6px,transparent 6px 14px)
}

.mc-film:before {
  top: 3px
}

.mc-film:after {
  bottom: 3px
}

.mc-film .mc-photo {
  flex: 1;
  padding: 0;
  box-shadow: none
}

.mc-film .mc-photo:nth-child(1) img {
  object-position: 15% 50%
}

.mc-film .mc-photo:nth-child(3) img {
  object-position: 85% 50%
}

.mc-stamp {
  position: absolute;
  left: 56%;
  top: 54%;
  width: 8.5cqw;
  height: 8.5cqw;
  border: 3px double var(--mc-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transform: rotate(-17deg);
  z-index: 5;
  pointer-events: none;
  padding: 1.2%;
  color: var(--mc-accent);
  font-size: clamp(10px,1cqw,16px);
  font-weight: 900;
  line-height: 1.1;
  opacity: .85;
  overflow-wrap: anywhere
}

.mc-stamp:before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px dashed currentColor;
  border-radius: 50%
}

.mc-sticker {
  position: absolute;
  top: 55%;
  left: 46%;
  width: 13%;
  height: 16%;
  z-index: 6;
  transform: rotate(6deg);
  pointer-events: none;
  filter: drop-shadow(0 2px 1px #0003)
}

.mc-sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.mc-widgets {
  position: absolute;
  left: 6%;
  right: 5%;
  top: 78%;
  bottom: 4%;
  display: flex;
  gap: 3%;
  z-index: 4
}

.mc-widgets>section {
  flex: 1;
  min-width: 0
}

.mc-widgets h2 {
  font-size: clamp(12px,1cqw,16px);
  line-height: 1.4;
  font-weight: 700;
  display: flex;
  gap: 10px;
  align-items: baseline;
  border-bottom: 1px solid #282c3070;
  padding-bottom: 6px;
  margin-bottom: 4px
}

.mc-widgets h2>span {
  color: var(--mc-accent);
  font: italic 1.1em Georgia,serif
}

.mc-widgets h2 small {
  margin-left: auto;
  font-size: 10px;
  font-weight: 400;
  white-space: nowrap
}

.mc-widgets ul {
  list-style: none
}

.mc-widgets li a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: clamp(11px,.85cqw,14px);
  line-height: 1.3
}

.mc-widgets li a>span {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis
}

.mc-widgets time,.mc-widgets li small {
  flex-shrink: 0;
  color: var(--mc-muted);
  font-size: 10px;
  max-width: 30%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.mc-empty {
  color: var(--mc-muted);
  font-size: 12px;
  padding: 12px 0!important
}

.mc-banner-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 4px;
  margin-top: 8px
}

.mc-banner-list img {
  width: 100%;
  height: 24px;
  object-fit: contain;
  display: block
}

.mc-footer {
  position: absolute;
  left: 6%;
  right: 5%;
  bottom: 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(10px,.75cqw,12px);
  letter-spacing: .06em;
  gap: 12px
}

.mc-barcode {
  width: 100px;
  height: 20px;
  display: block;
  background: repeating-linear-gradient(90deg,#262b30 0 1px,transparent 1px 3px,#262b30 3px 5px,transparent 5px 8px,#262b30 8px 9px,transparent 9px 12px);
  opacity: .4;
  flex-shrink: 0
}

.mc-dossier-photos,.mc-clip {
  display: none
}

/* Clipboard: double portrait, ruled form, metal clip, red registration stamp. */
.mc-dossier-photos .mc-photo {
  position: absolute;
  width: 52%;
  height: 94%;
  padding: 3% 3% 0
}

.mc-dossier-a {
  left: 0;
  top: -3%;
  transform: rotate(7deg)
}

.mc-dossier-b {
  right: 0;
  bottom: -1%;
  transform: rotate(-4deg)
}

.mc-dossier-photos .mc-photo:before {
  content: '';
  width: 9px;
  height: 46px;
  border: 2px solid #535a60;
  position: absolute;
  top: -18px;
  left: 14%;
  border-radius: 8px;
  z-index: 4
}

.mc-root[data-decorations=off] :is(.mc-stamp,.mc-sticker,.mc-tape,.mc-paperclip,.mc-clip,.mc-underpaper,.mc-footer .mc-barcode) {
  display: none
}

/* Tablet keeps the composition; narrow and short screens get a readable vertical edition. */
@media(min-width:901px) and (max-width:1250px) {
  .mc-widgets h2 {
    gap: 5px
  }

  .mc-widgets h2 small {
    display: none
  }

}

@media(max-width:900px),(max-height:650px) {
  .mc-root {
    display: block;
    padding: 24px 0;
    min-height: 100svh
  }

  .mc-canvas {
    width: 90%;
    height: auto!important;
    min-height: 0;
    max-height: none;
    margin: 12px auto;
    display: flex;
    flex-direction: column;
    padding: 25px 6% 22px;
    gap: 24px
  }

  .mc-paper {
    inset: 0;
    transform: rotate(-.3deg)
  }

  .mc-underpaper {
    inset: 8px -5px;
    transform: rotate(1deg)
  }

  .mc-paper:after {
    display: none
  }

  .mc-masthead,.mc-root[data-preset] .mc-masthead {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    order: 0;
    min-height: 0;
    border: 0
  }

  .mc-masthead h1,.mc-root[data-preset] .mc-masthead h1 {
    font-size: clamp(30px,9cqw,70px);
    max-height: none;
    line-height: 1;
    letter-spacing: -.06em
  }

  .mc-issue {
    font-size: 10px
  }

  .mc-subtitle {
    font-size: 12px
  }

  .mc-scrap-photos {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    order: 1;
    margin: 3px 0 10px
  }

  .mc-main-photo figcaption {
    font-size: 14px;
    min-height: 3em
  }

  .mc-root[data-preset] .mc-note {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    order: 2;
    padding: 18px 20px;
    transform: rotate(1deg)
  }

  .mc-note p,.mc-root[data-preset] .mc-note p {
    font-size: 14px;
    line-height: 1.6
  }

  .mc-script,.mc-root[data-preset] .mc-script {
    font-size: 25px
  }

  .mc-root[data-preset] .mc-calendar {
    display: flex;
    flex-direction: column;
    position: relative;
    inset: auto;
    width: 83%;
    align-self: center;
    height: 245px;
    order: 3;
    padding: 24px;
    transform: rotate(-2deg)
  }

  .mc-calendar header strong {
    font-size: 17px
  }

  .mc-calendar-grid {
    font-size: 13px
  }

  .mc-root[data-preset] .mc-film {
    position: relative;
    inset: auto;
    width: 100%;
    height: 115px;
    order: 4;
    transform: rotate(2deg)
  }

  .mc-stamp,.mc-root[data-preset] .mc-stamp {
    display: none
  }

  .mc-root[data-preset] .mc-sticker {
    position: absolute;
    top: 32%;
    left: 69%;
    width: 25%;
    height: 100px
  }

  .mc-widgets {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    order: 5;
    gap: 24px
  }

  .mc-widgets h2 {
    font-size: 15px
  }

  .mc-widgets li a {
    font-size: 13px;
    padding: 7px 0
  }

  .mc-banner-list {
    grid-template-columns: repeat(3,minmax(0,1fr))
  }

  .mc-banner-list img {
    height: 36px
  }

  .mc-footer {
    position: relative;
    inset: auto;
    order: 6;
    font-size: 10px;
    line-height: 1.5
  }

  .mc-footer .mc-barcode {
    width: 50px
  }

  .mc-dossier-photos .mc-photo {
    width: 56%;
    height: 88%;
    padding: 8px 8px 0
  }

  .mc-dossier-a {
    top: 0
  }

  .mc-dossier-b {
    bottom: 0
  }

  .mc-dossier-photos .mc-photo figcaption {
    font-size: 15px
  }

  }

/* Editor UI follows the homepage theme (card, form, buttons); the old colours stay as fallbacks. */
.mc-editor,.mc-edit-actions,.mc-piece-frame {
  --mc-ui-bg: var(--card-bg-color,#fbfaf6);
  --mc-ui-field: var(--container-bg-color,#fff);
  --mc-ui-text: var(--content-font-color,#252a2d);
  --mc-ui-muted: color-mix(in srgb,var(--mc-ui-text) 62%,transparent);
  --mc-ui-line: var(--card-border-color,#d6d6cf);
  --mc-ui-field-line: var(--form-border-color,var(--mc-ui-line));
  --mc-ui-soft: color-mix(in srgb,var(--mc-ui-text) 7%,transparent);
  --mc-ui-soft-line: color-mix(in srgb,var(--mc-ui-text) 10%,transparent);
  --mc-ui-accent: var(--accent-color,#557a8d);
  --mc-ui-accent-soft: color-mix(in srgb,var(--mc-ui-accent) 10%,transparent);
  --mc-ui-accent-bg: var(--btn-accent-bg,var(--mc-ui-accent));
  --mc-ui-accent-text: var(--btn-accent-text,#fff);
  --mc-ui-primary-bg: var(--btn-primary-bg,#2f454e);
  --mc-ui-primary-text: var(--btn-primary-text,#fff);
  --mc-ui-secondary-bg: var(--btn-secondary-bg,var(--mc-ui-field));
  --mc-ui-secondary-text: var(--btn-secondary-text,var(--mc-ui-text));
}
/* Themes often use see-through cards; blur what is behind so the settings stay readable. */
.mc-editor,.mc-edit-actions {
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
}

/* Admin editor is separate from the finished composition. */
.mc-editor {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px,100vw);
  z-index: 10001;
  overflow: auto;
  background: var(--mc-ui-bg);
  box-shadow: -8px 0 30px #0002;
  font: 13px/1.5 Arial,sans-serif;
  color: var(--mc-ui-text);
  --mc-accent: var(--accent-color,#698d9d)
}

.mc-editor[hidden] {
  display: none
}

.mc-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--mc-ui-bg);
  z-index: 5;
  border-bottom: 1px solid var(--mc-ui-line);
  padding: 17px 20px
}

.mc-editor-head h2 {
  font-size: 17px;
  margin: 0
}

.mc-editor button {
  cursor: pointer;
  font: inherit;
  color: inherit
}

.mc-editor-head button {
  background: none;
  border: 0;
  padding: 8px
}

.mc-editor-head-actions {
  display: flex;
  flex-shrink: 0;
  gap: 2px
}

.mc-editor[data-folded=on] form {
  display: none
}

.mc-editor-head .mc-icon-button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px
}

.mc-editor-head .mc-icon-button:hover {
  background: var(--mc-ui-soft)
}

/* The arrow points down while folded (open it) and up while open (fold it). */
.mc-editor-head [data-mc-fold] svg {
  transition: transform .15s
}

.mc-editor:not([data-folded=on]) [data-mc-fold] svg {
  transform: rotate(180deg)
}

.mc-editor[data-folded=on] .mc-editor-head {
  border-bottom: 0
}

.mc-editor form {
  padding: 18px 20px 110px
}

.mc-editor fieldset {
  margin: 0 0 22px;
  padding: 0;
  border: 0;
  min-width: 0
}

.mc-editor legend {
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 15px
}

.mc-editor label {
  display: block;
  margin: 12px 0 5px;
  font-weight: 600
}

.mc-editor :is(input[type=text],input[type=url],input[type=number],textarea,select) {
  width: 100%;
  background: var(--mc-ui-field);
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 3px;
  color: var(--mc-ui-text);
  padding: 9px;
  font: inherit
}

.mc-editor textarea {
  resize: vertical;
  min-height: 72px
}

.mc-editor input[type=range] {
  width: 100%;
  accent-color: var(--mc-ui-accent)
}

.mc-editor input[type=file] {
  width: 100%;
  font-size: 11px
}

.mc-editor details {
  border-top: 1px solid var(--mc-ui-line);
  padding: 12px 0
}

.mc-editor summary {
  cursor: pointer;
  font-weight: 700
}

.mc-editor small {
  display: block;
  color: var(--mc-ui-muted);
  font-size: 11px;
  line-height: 1.5;
  margin: 5px 0
}

.mc-editor .mc-check {
  display: flex;
  gap: 8px;
  align-items: center;
  font-weight: 400
}

.mc-editor input[type=checkbox] {
  accent-color: var(--mc-ui-accent)
}

.mc-editor .mc-colors {
  display: flex;
  gap: 10px
}

.mc-editor .mc-colors>label {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.mc-editor .mc-colors input[type=color] {
  width: 100%;
  max-width: 100%
}

.mc-editor input[type=color] {
  width: 70px;
  height: 32px;
  display: block;
  margin-top: 5px
}

.mc-editor .mc-savebar {
  position: fixed;
  bottom: 0;
  right: 0;
  width: min(420px,100vw);
  padding: 14px 20px;
  background: var(--mc-ui-bg);
  border-top: 1px solid var(--mc-ui-line)
}

.mc-savebar button {
  width: 100%;
  padding: 12px;
  background: var(--mc-ui-primary-bg);
  color: var(--mc-ui-primary-text);
  border: 0;
  border-radius: 3px
}

.mc-savebar button:disabled {
  opacity: .5;
  cursor: wait
}

.mc-editor-status {
  margin: 0 0 7px;
  line-height: 1.4
}

.mc-editor .mc-asset-preview {
  width: 100%;
  max-height: 100px;
  object-fit: contain;
  background: var(--mc-ui-soft);
  margin: 8px 0
}

.mc-editor .mc-choice {
  display: block;
  border: 1px solid var(--mc-ui-field-line);
  padding: 11px;
  margin: 7px 0;
  cursor: pointer
}

.mc-choice:has(input:checked) {
  border-color: var(--mc-ui-accent);
  background: var(--mc-ui-accent-soft)
}

.mc-choice input {
  margin-right: 8px
}

.mc-editor .mc-reset-image {
  padding: 5px 9px;
  margin-top: 6px;
  background: var(--mc-ui-field);
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 3px
}

.mc-editor .mc-inline {
  display: flex;
  gap: 10px
}

.mc-editor .mc-inline>div {
  flex: 1;
  min-width: 0
}

@media(prefers-reduced-motion:reduce) {
  .mc-root *,.mc-editor * {
    scroll-behavior: auto!important;
    transition: none!important;
    animation: none!important
  }

}

@media(min-width:901px) and (min-height:651px) {
  .mc-widgets {
    bottom: 3%
  }

  .mc-widgets li a {
    padding: 1px 0;
    line-height: 1.3;
    font-size: clamp(11px,.8cqw,13px)
  }

  .mc-footer {
    bottom: .6%
  }

  .mc-note .mc-script {
    font-size: clamp(18px,2cqw,32px);
    line-height: 1.1;
    max-height: 2.3em;
    overflow: hidden
  }

}

/* Polaroid edition: artwork, paper edges and print typography form one composition. */
.mc-scrap-only {
  display: none
}

.mc-root[data-preset=scrapbook] {
  --mc-ink: #252727;
  --mc-muted: #767976;
  --mc-accent: var(--mc-mark,var(--accent-color,#698d9d))
}

.mc-root[data-preset=scrapbook] .mc-canvas {
  background: var(--mc-paper-s);
  box-shadow: 0 6px 32px #4263720b
}

.mc-root[data-preset=scrapbook] .mc-scrap-only {
  display: block
}

.mc-root[data-preset=scrapbook] :is(.mc-paper,.mc-underpaper,.mc-back-photo,.mc-stamp) {
  display: none
}

.mc-root[data-preset=scrapbook] .mc-scene {
  position: absolute;
  inset: 0 0 27% 12%;
  z-index: -2;
  overflow: hidden;
  mask-image: linear-gradient(#000 0 76%,transparent 100%)
}

.mc-scene .mc-photo {
  width: 100%;
  height: 100%;
  padding: 0;
  box-shadow: none;
  background: none
}

.mc-scene img {
  opacity: .85
}

.mc-grid-paper {
  position: absolute;
  left: 3%;
  top: 15%;
  width: 56%;
  height: 58%;
  transform: rotate(3deg);
  z-index: -1;
  background-color: #f7f8f6;
  background-image: linear-gradient(#74818430 1px,transparent 1px),linear-gradient(90deg,#74818430 1px,transparent 1px);
  background-size: 18px 18px;
  clip-path: polygon(0 0,100% 0,100% 97%,96% 100%,92% 98%,86% 100%,81% 98%,75% 100%,69% 98%,64% 100%,59% 98%,52% 100%,44% 98%,38% 100%,31% 98%,23% 100%,14% 98%,7% 100%,0 98%)
}

.mc-yellow-paper {
  position: absolute;
  left: 0;
  top: 49%;
  width: 64%;
  height: 22%;
  z-index: -1;
  transform: rotate(-5deg);
  background: color-mix(in srgb,var(--mc-highlight,#edcf87) 70%,white);
  clip-path: polygon(0 10%,8% 13%,13% 8%,24% 12%,33% 7%,44% 10%,53% 6%,63% 10%,72% 5%,81% 8%,91% 2%,100% 7%,100% 95%,90% 92%,80% 99%,70% 94%,60% 98%,50% 93%,40% 99%,30% 95%,20% 100%,10% 95%,0 100%)
}

.mc-side-paper {
  position: absolute;
  left: 1%;
  top: 19%;
  width: 9%;
  height: 40%;
  background: #fff;
  transform: rotate(-9deg);
  z-index: 0;
  filter: drop-shadow(0 2px 2px #0001);
  mask: radial-gradient(circle at 10px 15px,transparent 5px,#000 6px) 0 0/100% 32px
}

.mc-publisher {
  position: absolute;
  left: 3%;
  top: 1.5%;
  font: 700 clamp(9px,.85cqw,13px)/1.1 Georgia,serif;
  z-index: 5
}

.mc-publisher b {
  font-size: 2.7em;
  float: left;
  margin-right: 12px
}

.mc-publisher > span {
  display: block;
  border-left: 1px solid;
  padding-left: 12px;
  margin-left: 45px;
  margin-top: 5px
}

.mc-publisher small {
  font-size: .56em;
  letter-spacing: .08em
}

.mc-root[data-preset=scrapbook] .mc-scrap-photos {
  left: 6%;
  top: 9%;
  width: 49%;
  height: 62%;
  z-index: 2
}

.mc-root[data-preset=scrapbook] .mc-main-photo {
  inset: 3% 0 0 0;
  transform: rotate(-1.3deg);
  padding: 3% 3% 0;
  background: #fff;
  box-shadow: 1px 4px 8px #142c332b
}

.mc-root[data-preset=scrapbook] .mc-main-photo figcaption {
  min-height: 14%;
  font: italic clamp(14px,1.7cqw,27px)/1.2 'Snell Roundhand',Georgia,serif;
  color: #6d6a59;
  letter-spacing: .02em
}

.mc-empty-frame {
  position: absolute;
  inset: -5% 8% 7% -2%;
  border: 1.5cqw solid #fff;
  transform: rotate(-5deg);
  box-shadow: 0 2px 5px #293a4433
}

.mc-empty-frame:after {
  content: '';
  position: absolute;
  inset: 7% -20% -12% 15%;
  border: 1.4cqw solid #fff;
  transform: rotate(12deg);
  box-shadow: 0 2px 4px #293a4425
}

.mc-root[data-preset=scrapbook] .mc-paperclip {
  top: -1%;
  left: 3%;
  height: 14%;
  width: 2.2%;
  min-width: 15px;
  transform: rotate(20deg)
}

.mc-root[data-preset=scrapbook] .mc-note {
  right: 3%;
  top: 3%;
  width: 32%;
  height: auto;
  min-height: 0;
  padding: 1.7% 2.7% 2%;
  background: #fff;
  transform: rotate(1deg);
  filter: drop-shadow(0 2px 1px #30303020);
  box-shadow: none;
  clip-path: polygon(0 0,100% 0,100% 92%,94% 95%,89% 91%,82% 98%,74% 94%,67% 99%,59% 94%,52% 97%,44% 92%,36% 97%,29% 94%,22% 100%,13% 95%,7% 97%,0 94%)
}

.mc-root[data-preset=scrapbook] .mc-note p {
  font: 400 clamp(12px,1.05cqw,17px)/1.6 Georgia,serif
}

.mc-root[data-preset=scrapbook] .mc-note .mc-script {
  display: none
}

.mc-root[data-preset=scrapbook] .mc-tape {
  background: color-mix(in srgb,var(--mc-highlight,#edcf87) 60%,transparent);
  height: 25px;
  width: 24%;
  left: 40%;
  top: -10px;
  transform: rotate(2deg)
}

.mc-root[data-preset=scrapbook] .mc-calendar {
  right: 8%;
  top: 20%;
  width: 22%;
  height: 25%;
  padding: 2% 2.6%;
  transform: rotate(3deg);
  background: #fff;
  box-shadow: 0 3px 9px #18313a20
}

.mc-root[data-preset=scrapbook] .mc-calendar:after {
  content: attr(data-calendar-mark);
  position: absolute;
  right: 8%;
  top: -8%;
  color: var(--mc-highlight,#edcf87);
  font-size: 3.5cqw;
  transform: rotate(10deg);
  line-height: 1
}

.mc-root[data-preset=scrapbook] .mc-calendar header {
  margin-bottom: 14px
}

.mc-root[data-preset=scrapbook] .mc-calendar header strong {
  font-size: clamp(12px,1.05cqw,18px);
  font-style: italic;
  letter-spacing: .12em
}

.mc-root[data-preset=scrapbook] .mc-film {
  right: 0;
  top: 49%;
  width: 41%;
  height: 16%;
  transform: rotate(.8deg);
  padding: 10px 4px;
  background: #24292b;
  box-shadow: 0 2px 4px #0003
}

.mc-root[data-preset=scrapbook] .mc-sticker {
  top: 58%;
  left: auto;
  right: 1%;
  width: 22%;
  height: 18%;
  transform: rotate(-12deg);
  z-index: 6;
  filter: drop-shadow(0 2px 1px #0002)
}

.mc-root[data-preset=scrapbook] .mc-masthead {
  left: 3%;
  top: 77%;
  width: 62%;
  height: 13%;
  justify-content: flex-start;
  z-index: 5
}

.mc-root[data-preset=scrapbook] .mc-issue {
  font: 600 clamp(8px,.7cqw,12px)/1.4 Georgia,serif;
  letter-spacing: .25em;
  border-bottom: 2px dotted #828884;
  padding-bottom: 8px;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden
}

.mc-root[data-preset=scrapbook] .mc-masthead h1 {
  font: 900 7.4cqw/.95 'Bodoni 72','Didot',Georgia,serif;
  letter-spacing: -.065em;
  max-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  overflow-wrap: normal;
  color: #171c1e;
  margin: 0!important
}

.mc-root[data-preset=scrapbook] .mc-masthead h1::first-letter {
  color: var(--mc-highlight,#edcf87)
}

.mc-root[data-preset=scrapbook] .mc-subtitle {
  font-size: clamp(10px,.8cqw,13px);
  letter-spacing: .19em;
  margin-top: 8px
}

.mc-root[data-preset=scrapbook] .mc-dates {
  position: absolute;
  left: 3%;
  bottom: 1.8%;
  width: 57%;
  display: flex;
  align-items: center;
  gap: 5%;
  line-height: 1
}

.mc-dates>div {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7%;
  padding-bottom: 7px;
  border-bottom: 3px solid #242728
}

.mc-dates small {
  font-size: clamp(7px,.65cqw,11px);
  font-weight: 800;
  max-width: 4.8em;
  line-height: 1.25
}

.mc-dates strong {
  font: 900 italic clamp(20px,3.6cqw,58px)/.85 Arial,sans-serif;
  letter-spacing: -.07em;
  white-space: nowrap
}

.mc-dates>span {
  font-size: 2.8cqw
}

.mc-root[data-preset=scrapbook] .mc-widgets {
  left: 69%;
  right: 1%;
  top: 76%;
  bottom: 4.5%;
  display: flex;
  gap: 18px;
  flex-direction: column;
  overflow-y: auto;
  padding: 0 3% 0 0
}

.mc-root[data-preset=scrapbook] .mc-widgets>section {
  flex: none
}

.mc-root[data-preset=scrapbook] .mc-widgets h2 {
  font-size: clamp(12px,.95cqw,16px);
  border-bottom: 1px solid #9aa4a6;
  letter-spacing: .01em
}

.mc-root[data-preset=scrapbook] .mc-widgets li a {
  padding: 4px 0;
  font-size: clamp(11px,.85cqw,14px)
}

.mc-root[data-preset=scrapbook] .mc-footer {
  left: 69%;
  right: 4%;
  bottom: 1.2%;
  font-size: clamp(8px,.6cqw,11px);
  letter-spacing: 0
}

.mc-root[data-preset=scrapbook] .mc-footer .mc-barcode {
  display: none
}

.mc-root[data-preset=scrapbook][data-decorations=off] .mc-decor {
  display: none
}

@media(max-width:900px),(max-height:650px) {
  .mc-root[data-preset=scrapbook] {
    padding: 10px 0 20px
  }

  .mc-root[data-preset=scrapbook] .mc-canvas {
    width: 90%;
    margin: 10px auto;
    padding: 0;
    display: block;
    height: auto;
    min-height: 0
  }

  .mc-root[data-preset=scrapbook] .mc-canvas:before {
    content: '';
    display: block;
    height: 129cqw
  }

  .mc-root[data-preset=scrapbook] .mc-scene {
    inset: 0 0 auto 9%;
    height: 98cqw
  }

  .mc-root[data-preset=scrapbook] .mc-grid-paper {
    left: 3%;
    top: 16cqw;
    width: 65%;
    height: 76cqw;
    background-size: 9px 9px
  }

  .mc-root[data-preset=scrapbook] .mc-yellow-paper {
    top: 73cqw;
    height: 19cqw
  }

  .mc-root[data-preset=scrapbook] .mc-side-paper {
    top: 28cqw;
    height: 46cqw
  }

  .mc-root[data-preset=scrapbook] .mc-publisher {
    top: 2cqw;
    left: 2%;
    font-size: 6px
  }

  .mc-publisher > span {
    margin-left: 23px;
    padding-left: 5px
  }

  .mc-publisher b {
    margin-right: 5px
  }

  .mc-root[data-preset=scrapbook] .mc-scrap-photos {
    position: absolute;
    inset: 16cqw auto auto 8%;
    width: 58%;
    height: 76cqw;
    margin: 0;
    aspect-ratio: auto
  }

  .mc-root[data-preset=scrapbook] .mc-main-photo figcaption {
    font-size: clamp(9px,2.8cqw,18px);
    min-height: 15%;
    padding: 0
  }

  .mc-root[data-preset=scrapbook] .mc-note {
    position: absolute;
    inset: 4cqw 1% auto auto;
    width: 39%;
    padding: 3%;
    transform: rotate(1deg)
  }

  .mc-root[data-preset=scrapbook] .mc-note p {
    font-size: clamp(7px,2cqw,12px);
    line-height: 1.45
  }

  .mc-root[data-preset=scrapbook] .mc-calendar {
    position: absolute;
    inset: 26cqw 1% auto auto;
    width: 29%;
    height: 35cqw;
    padding: 4% 3%;
    transform: rotate(3deg)
  }

  .mc-root[data-preset=scrapbook] .mc-calendar header {
    gap: 3px;
    margin-bottom: 6px;
    font-size: 6px
  }

  .mc-root[data-preset=scrapbook] .mc-calendar header strong {
    font-size: 2.4cqw;
    letter-spacing: .06em
  }

  .mc-root[data-preset=scrapbook] .mc-calendar-grid {
    font-size: 2cqw;
    gap: 1px
  }

  .mc-root[data-preset=scrapbook] .mc-calendar:after {
    font-size: 7cqw
  }

  .mc-root[data-preset=scrapbook] .mc-film {
    position: absolute;
    inset: 68cqw 0 auto auto;
    width: 37%;
    height: 19cqw;
    padding: 6px 2px;
    gap: 2px
  }

  .mc-root[data-preset=scrapbook] .mc-film:before,.mc-root[data-preset=scrapbook] .mc-film:after {
    height: 2px;
    background-size: auto
  }

  .mc-root[data-preset=scrapbook] .mc-sticker {
    position: absolute;
    inset: 80cqw -2% auto auto;
    width: 31%;
    height: 23cqw
  }

  .mc-root[data-preset=scrapbook] .mc-masthead {
    position: absolute;
    inset: 100cqw auto auto 3%;
    width: 94%;
    height: auto;
    gap: 0
  }

  .mc-root[data-preset=scrapbook] .mc-issue {
    font-size: 1.8cqw;
    padding-bottom: 5px;
    margin-bottom: 5px;
    letter-spacing: .12em
  }

  .mc-root[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 11.5cqw;
    max-height: 1em;
    line-height: .98
  }

  .mc-root[data-preset=scrapbook] .mc-subtitle {
    font-size: 2.3cqw;
    margin-top: 3px;
    letter-spacing: .06em
  }

  .mc-root[data-preset=scrapbook] .mc-dates {
    inset: 121cqw auto auto 3%;
    width: 94%;
    gap: 4%
  }

  .mc-root[data-preset=scrapbook] .mc-dates strong {
    font-size: 6cqw
  }

  .mc-root[data-preset=scrapbook] .mc-dates small {
    font-size: 1.8cqw
  }

  .mc-dates>div {
    border-bottom-width: 2px;
    padding-bottom: 5px
  }

  .mc-root[data-preset=scrapbook] .mc-widgets {
    position: relative;
    inset: auto;
    margin: 22px 6% 16px;
    padding: 0;
    overflow: visible;
    gap: 22px
  }

  .mc-root[data-preset=scrapbook] .mc-widgets h2 {
    font-size: 14px
  }

  .mc-root[data-preset=scrapbook] .mc-widgets li a {
    font-size: 12px;
    padding: 6px 0
  }

  .mc-root[data-preset=scrapbook] .mc-footer {
    position: relative;
    inset: auto;
    padding: 0 6% 20px;
    font-size: 9px
  }

}

.mc-root[data-preset=scrapbook] .mc-masthead h1 {
  line-height: 1.08;
  max-height: none;
  overflow: visible;
  font-size: 6.5cqw
}

.mc-root[data-preset=scrapbook] .mc-masthead {
  top: 76%;
  height: auto
}

.mc-photo-sticker {
  display: none
}

.mc-root[data-preset=scrapbook] .mc-photo-sticker {
  display: block;
  position: absolute;
  left: 1%;
  bottom: 9%;
  width: 20%;
  height: 23%;
  z-index: 5;
  transform: rotate(12deg);
  filter: drop-shadow(0 1px 1px #0002)
}

.mc-photo-sticker img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset=scrapbook] .mc-scrap-photos {
    left: 7%;
    width: 44%;
    height: 65%
  }

  .mc-root[data-preset=scrapbook] .mc-grid-paper {
    width: 52%;
    height: 62%
  }

}

@media(max-width:900px),(max-height:650px) {
  .mc-root[data-preset=scrapbook] .mc-masthead {
    top: 100cqw
  }

  .mc-root[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 11.5cqw;
    line-height: 1.08
  }

  .mc-root[data-preset=scrapbook] .mc-photo-sticker {
    width: 28%;
    bottom: 10%;
    height: 24%
  }

}

@media(max-width:900px),(max-height:650px) {
  .mc-root[data-preset=scrapbook] .mc-dates {
    top: 126cqw
  }

  .mc-root[data-preset=scrapbook] .mc-canvas:before {
    height: 137cqw
  }

}

.mc-root[data-preset=scrapbook] .mc-masthead h1 {
  white-space: nowrap!important;
  overflow: hidden;
  text-overflow: ellipsis
}

.mc-dates strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis
}

/* Optional content keeps the same paper composition. */
.mc-photo-sticker img {
  transform: scale(var(--mc-sticker-photo-scale,1));
  transform-origin: center
}

.mc-sticker img {
  transform: scale(var(--mc-sticker-film-scale,1));
  transform-origin: center
}

.mc-root[data-sticker-photo-scale="0"] .mc-photo-sticker,.mc-root[data-sticker-film-scale="0"] .mc-sticker {
  visibility: hidden
}

.mc-editor output {
  float: right;
  color: var(--mc-ui-accent);
  font-variant-numeric: tabular-nums
}

.mc-editor .mc-shuffle-film {
  margin: 9px 0 0;
  padding: 7px 11px;
  background: var(--mc-ui-field);
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 3px
}

.mc-todos {
  position: absolute;
  right: 24%;
  top: 22%;
  width: 21%;
  height: 23%;
  padding: 1.5% 1.8%;
  background: #fffef7;
  box-shadow: var(--mc-shadow);
  transform: rotate(-2deg);
  z-index: 3;
  display: flex;
  flex-direction: column
}

.mc-todos h2 {
  font: italic 1.7cqw/1.1 Georgia,serif;
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline
}

.mc-todos h2 small {
  font: 600 .6cqw/1.2 Arial,sans-serif;
  letter-spacing: .1em
}

.mc-todos ul {
  list-style: none;
  flex: 1;
  min-height: 0;
  overflow: auto
}

.mc-todos li {
  display: flex;
  gap: 8px;
  font-size: clamp(11px,.85cqw,14px);
  padding: 5px 0;
  border-bottom: 1px solid #c6c4b64a;
  line-height: 1.5
}

.mc-todos li>span:first-child {
  color: var(--mc-accent);
  flex-shrink: 0
}

.mc-todos li>span:last-child {
  overflow-wrap: anywhere;
  min-width: 0
}

.mc-todos li.is-complete>span:last-child {
  text-decoration: line-through;
  color: #8b8b82
}

.mc-todo-hint {
  font-size: clamp(8px,.6cqw,10px);
  color: var(--mc-muted);
  margin-top: 9px!important
}

.mc-todo-empty {
  font-size: clamp(11px,.85cqw,14px);
  line-height: 1.7;
  color: var(--mc-muted)
}

.mc-root[data-preset=scrapbook][data-calendar-mode=todo] .mc-calendar {
  right: 1%;
  width: 21%
}

.mc-root[data-preset=scrapbook] .mc-bottom {
  position: absolute;
  left: 3%;
  bottom: 1.5%;
  width: 57%;
  height: 6.3%;
  z-index: 4;
  border-top: 1px solid #323a3c;
  padding-top: .7%
}

.mc-bottom>div {
  height: 100%;
  display: none;
  align-items: center;
  gap: 5%;
  min-width: 0
}

.mc-bottom-label {
  display: block;
  font-size: clamp(7px,.55cqw,10px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.1;
  margin-bottom: 4px
}

.mc-bottom-pair>div {
  flex: 1;
  min-width: 0
}

.mc-bottom-pair strong {
  font: 700 clamp(16px,2.1cqw,34px)/1.15 Georgia,serif;
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-bottom-pair strong span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0
}

.mc-bottom-pair i {
  font-weight: 400;
  color: var(--mc-accent);
  flex-shrink: 0
}

.mc-bottom-pair>p {
  font-size: clamp(10px,.85cqw,14px);
  text-align: right;
  max-width: 45%;
  max-height: 3em;
  overflow: auto;
  overflow-wrap: anywhere
}

.mc-bottom-quote>span {
  font: italic 4cqw/.9 Georgia,serif;
  color: var(--mc-accent)
}

.mc-bottom-quote p {
  font: italic clamp(12px,1.2cqw,20px)/1.5 Georgia,serif;
  max-height: 3em;
  overflow: auto;
  overflow-wrap: anywhere
}

.mc-bottom-status strong {
  display: block;
  font-size: clamp(9px,.75cqw,13px);
  letter-spacing: .12em;
  line-height: 1.2
}

.mc-bottom-status p {
  font-size: clamp(10px,1cqw,16px);
  line-height: 1.6;
  max-height: 3.2em;
  overflow: auto;
  overflow-wrap: anywhere
}

.mc-status-dot {
  width: .7cqw;
  height: .7cqw;
  border-radius: 50%;
  background: var(--mc-accent);
  flex-shrink: 0
}

.mc-bottom-status>div {
  min-width: 0
}

.mc-root[data-bottom-mode=pair] .mc-bottom-pair,.mc-root[data-bottom-mode=quote] .mc-bottom-quote,.mc-root[data-bottom-mode=status] .mc-bottom-status {
  display: flex
}

.mc-root[data-preset=scrapbook]:not([data-bottom-mode=dates]) .mc-dates,.mc-root[data-preset=scrapbook]:is([data-bottom-mode=dates],[data-bottom-mode=none]) .mc-bottom {
  display: none
}

@media(max-width:900px),(max-height:650px) {
  .mc-root[data-preset] .mc-todos {
    position: relative;
    inset: auto;
    width: 88%;
    height: auto;
    min-height: 135px;
    margin: 22px auto;
    padding: 18px 20px;
    transform: rotate(-1deg);
    order: 4
  }

  .mc-root[data-preset] .mc-todos h2 {
    font-size: 22px;
    margin-bottom: 12px
  }

  .mc-todos h2 small {
    font-size: 9px
  }

  .mc-todos li {
    font-size: 12px
  }

  .mc-todo-empty {
    font-size: 12px
  }

  .mc-todo-hint {
    font-size: 9px
  }

  .mc-todos ul {
    max-height: none;
    overflow: visible
  }

  .mc-root[data-preset=scrapbook][data-calendar-mode=todo] .mc-calendar {
    width: 29%;
    right: 1%
  }

  .mc-root[data-preset=scrapbook] .mc-bottom {
    inset: 126cqw auto auto 3%;
    width: 94%;
    height: 12cqw;
    padding-top: 2%
  }

  .mc-bottom-label {
    font-size: 1.65cqw;
    margin-bottom: 3px
  }

  .mc-bottom-pair strong {
    font-size: 5cqw;
    gap: 4px
  }

  .mc-bottom-pair>p {
    font-size: 2.3cqw;
    max-width: 44%
  }

  .mc-bottom-quote>span {
    font-size: 10cqw
  }

  .mc-bottom-quote p {
    font-size: 3cqw
  }

  .mc-bottom-status strong {
    font-size: 2.2cqw
  }

  .mc-bottom-status p {
    font-size: 2.7cqw
  }

  .mc-status-dot {
    width: 2cqw;
    height: 2cqw
  }

  }

@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset=scrapbook] .mc-masthead {
    top: 75%
  }

}

.mc-editor .mc-delete-hero {
  margin: 6px 0 0 6px;
  padding: 5px 9px;
  background: var(--mc-ui-field);
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 3px;
  color: #a13832
}

.mc-editor .mc-delete-hero[aria-pressed=true] {
  background: #fff0ed
}

.mc-editor .mc-delete-hint {
  color: #a13832
}

/* The pencil belongs to the collage; visitors see the same decorative mark. */
.mc-pencil {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  z-index: 20;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--mc-ink);
  font: 26px/1 Georgia,serif;
  opacity: .7;
}

button.mc-pencil {
  cursor: pointer
}

button.mc-pencil:hover,button.mc-pencil[aria-pressed=true] {
  opacity: 1;
  background: #fffdf1;
  box-shadow: 0 2px 8px #0002
}

.mc-edit-actions {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--mc-ui-bg);
  color: var(--mc-ui-text);
  border: 1px solid var(--mc-ui-line);
  box-shadow: 0 3px 18px #0002;
  border-radius: 8px;
  padding: 10px 14px;
  font: 12px/1.4 Arial,sans-serif;
  max-width: calc(100vw - 24px);
  width: max-content
}

.mc-edit-actions[hidden] {
  display: none!important
}

.mc-edit-actions p {
  margin: 0 0 8px
}

.mc-edit-actions>div {
  display: flex;
  gap: 7px
}

.mc-edit-actions button {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 4px;
  background: var(--mc-ui-secondary-bg);
  color: var(--mc-ui-secondary-text);
  padding: 8px 12px
}

.mc-edit-actions [data-mc-save] {
  background: var(--mc-ui-primary-bg);
  color: var(--mc-ui-primary-text);
  border-color: var(--mc-ui-primary-bg)
}

.mc-edit-actions button:disabled {
  opacity: .5;
  cursor: wait
}

.mc-root[data-editing=on] [data-mc-text] {
  cursor: text;
  outline: 1px dashed #567d8d70;
  outline-offset: 3px;
  min-width: 1ch;
  min-height: 1em
}

.mc-root[data-editing=on] [data-mc-text]:focus {
  outline: 2px solid #567d8d;
  background: #fffef9e6;
  color: #252a2d;
  position: relative;
  z-index: 30
}

.mc-root[data-editing=on] [data-mc-text]:empty:before {
  content: '문구 입력';
  opacity: .5;
  font: 12px/1.4 sans-serif
}

.mc-root[data-editing=on] :is(.mc-photo-window,[data-mc-sticker],.mc-calendar,.mc-widgets>section) {
  cursor: pointer;
  outline: 1px dashed #567d8d70;
  outline-offset: 3px
}

.mc-root[data-editing=on] :is(.mc-photo-window,[data-mc-sticker],.mc-calendar,.mc-widgets>section):hover {
  outline: 2px solid #567d8d
}

.mc-root[data-editing=on] :is(.mc-photo-sticker,.mc-sticker,.mc-stamp) {
  pointer-events: auto
}

.mc-root[data-editing=on] .mc-scene {
  z-index: 0
}

.mc-editor[data-context=image] fieldset:not([data-image-settings]),.mc-editor[data-context=image] .mc-image-editor:not(.mc-active-slot) {
  display: none!important
}

.mc-editor[data-context=image][data-film-context=off] [data-film-settings] {
  display: none!important
}

@media(max-width:600px) {
  .mc-edit-actions {
    bottom: 8px
  }

  .mc-edit-actions button {
    padding: 8px
  }

  .mc-pencil {
    width: 30px;
    height: 30px;
    font-size: 22px
  }

}

.mc-editor[data-context=settings] :is([data-image-settings],[data-copy-settings]) {
  display: none!important
}

/* Movable, non-modal inspector; the collage stays available behind it. */
.mc-editor {
  inset: 80px auto auto calc(50% - 210px);
  width: min(420px,calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  height: min(720px,calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--mc-ui-line);
  border-radius: 9px;
  box-shadow: 0 12px 48px #1b2b3438
}

.mc-editor-head {
  position: static;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  padding: 12px 16px
}

.mc-editor-head.is-dragging {
  cursor: grabbing
}

.mc-editor-head:focus-visible {
  outline: 2px solid var(--mc-ui-accent);
  outline-offset: -3px
}

.mc-editor-head h2 {
  font-size: 15px
}

.mc-editor-head h2:before {
  content: '⠿';
  margin-right: 9px;
  opacity: .5
}

.mc-editor form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden
}

.mc-editor-fields {
  overflow: auto;
  min-height: 0;
  flex: 1;
  padding: 16px 20px
}

.mc-editor .mc-savebar {
  position: static;
  width: auto;
  flex-shrink: 0;
  padding: 12px 16px
}

.mc-editor-status {
  font-size: 12px
}

/* Keep imagery in the upper edition and reserve a full-width band for live content. */
.mc-artwork {
  display: contents
}

@media(min-width:901px) and (min-height:651px) {
  .mc-artwork {
    display: block;
    position: absolute;
    inset: 0;
    transform: none;
    pointer-events: none
  }

  .mc-artwork>* {
    pointer-events: auto
  }

  .mc-root[data-preset=scrapbook] .mc-scrap-photos {
    top: 6%;
    height: 61%
  }

  .mc-root[data-preset=scrapbook] .mc-sticker {
    top: 48%;
    height: 15%
  }

  .mc-root[data-preset=scrapbook] .mc-masthead {
    left: 4%;
    top: 58%;
    width: 62%;
    height: 13%;
    justify-content: flex-start
  }

  .mc-root[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 5.4cqw;
    line-height: 1
  }

  .mc-root[data-preset=scrapbook] .mc-subtitle {
    margin-top: 5px
  }

  .mc-root[data-preset=scrapbook] .mc-calendar {
    right: 7%;
    top: 15%;
    width: 23%;
    height: 21%
  }

  .mc-root[data-preset=scrapbook][data-calendar-mode=todo] .mc-calendar {
    right: 4%;
    width: 20%
  }

  .mc-root[data-preset=scrapbook] .mc-todos {
    right: 27%;
    top: 15%;
    width: 21%;
    height: 21%;
    padding: 1.2% 1.4%
  }

  .mc-root[data-preset=scrapbook] :is(.mc-bottom,.mc-dates) {
    left: auto;
    right: 4%;
    top: 60%;
    bottom: auto;
    width: 27%;
    height: 10%;
    padding-top: 1%;
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair {
    flex-wrap: wrap;
    gap: 6px
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair>div {
    flex-basis: 100%
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair>p {
    max-width: 100%;
    text-align: left
  }

  .mc-root[data-preset=scrapbook] .mc-dates {
    gap: 4%;
    height: 9%
  }

  .mc-root[data-preset=scrapbook] .mc-dates strong {
    font-size: 2cqw
  }

  .mc-root[data-preset=scrapbook] .mc-dates small {
    font-size: .6cqw
  }

  .mc-root[data-preset] .mc-widgets {
    left: 4%;
    right: 4%;
    top: 75%;
    bottom: 6%;
    display: flex;
    flex-direction: row;
    gap: 3%;
    padding: 0;
    overflow: visible
  }

  .mc-root[data-preset] .mc-widgets>section {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column
  }

  .mc-root[data-preset] .mc-widgets h2 {
    flex-shrink: 0;
    margin-bottom: 7px;
    font-size: clamp(12px,1cqw,16px)
  }

  .mc-root[data-preset] .mc-widgets ul,.mc-root[data-preset] .mc-banner-list {
    overflow: auto;
    min-height: 0
  }

  .mc-root[data-preset] .mc-widgets li a {
    font-size: clamp(11px,.85cqw,14px);
    padding: 3px 0;
    line-height: 1.4
  }

  .mc-root[data-preset] .mc-footer {
    left: 4%;
    right: 4%;
    bottom: 2%;
    font-size: clamp(9px,.7cqw,12px)
  }

}

.mc-root .mc-pencil {
  width: 20px;
  height: 20px;
  font-size: 15px;
  opacity: .3;
  box-shadow: none;
  background: transparent
}

.mc-root button.mc-pencil:hover,.mc-root button.mc-pencil:focus-visible,.mc-root button.mc-pencil[aria-pressed=true] {
  opacity: .9;
  background: transparent;
  box-shadow: none
}

.mc-root[data-preset=scrapbook] .mc-note {
  clip-path: none;
  background: transparent;
  isolation: isolate;
  filter: drop-shadow(0 2px 1px #30303020)
}

.mc-root[data-preset=scrapbook] .mc-note:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #fff;
  clip-path: polygon(0 0,100% 0,100% 92%,94% 95%,89% 91%,82% 98%,74% 94%,67% 99%,59% 94%,52% 97%,44% 92%,36% 97%,29% 94%,22% 100%,13% 95%,7% 97%,0 94%)
}

.mc-note .mc-tape {
  z-index: 2
}

.mc-calendar[data-calendar-mark=""]:after {
  display: none
}

.mc-root,.mc-root * {
  font-family: var(--mc-body-font,var(--content-font-family,sans-serif))!important
}

.mc-root .mc-masthead h1 {
  font-family: var(--mc-title-font,var(--title-font-family,var(--content-font-family,sans-serif)))!important
}

.mc-root :is(.mc-script,.mc-photo figcaption,.mc-issue,.mc-publisher,.mc-bottom-label,.mc-bottom-quote p,.mc-bottom-pair strong,.mc-stamp) {
  font-family: var(--mc-label-font,var(--content-font-family,sans-serif))!important
}

.mc-editor,.mc-editor *,.mc-edit-actions,.mc-edit-actions * {
  font-family: var(--content-font-family,sans-serif)!important
}

@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset=scrapbook] .mc-masthead {
    top: 55%;
    height: 12%
  }

  .mc-root[data-preset=scrapbook] :is(.mc-bottom,.mc-dates) {
    left: 4%;
    right: auto;
    top: 68%;
    width: 62%;
    height: 6%;
    padding-top: .5%
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair {
    flex-wrap: nowrap;
    gap: 5%
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair>div {
    flex-basis: auto
  }

  .mc-root[data-preset=scrapbook] .mc-bottom-pair>p {
    max-width: 45%;
    text-align: right
  }

  .mc-root[data-preset] .mc-widgets {
    top: 77%;
    bottom: 5%
  }

  .mc-root[data-preset=scrapbook][data-calendar-mode=todo] .mc-calendar {
    right: 27%;
    width: 21%
  }

  .mc-root[data-preset=scrapbook] .mc-todos {
    right: 4%;
    width: 20%
  }

}

@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset] .mc-widgets {
    top: 76%;
    bottom: 4%
  }

  .mc-root[data-preset] .mc-footer {
    bottom: 1.2%
  }

  .mc-root[data-preset=scrapbook] .mc-calendar {
    padding: 1.2% 1.5%
  }

  .mc-todos li {
    padding: 3px 0;
    line-height: 1.4
  }

}

/* Layout dimensions are independent: shorten the artwork vertically, retain its full width. */
@media(min-width:901px) and (min-height:651px) {
  .mc-artwork {
    transform: none;
    inset: 0;
    isolation: auto
  }

  .mc-root[data-preset=scrapbook] .mc-scene {
    inset: 0 0 auto 0;
    width: 100%;
    height: 65%;
    mask-image: linear-gradient(#000 0 80%,transparent 100%)
  }

  .mc-root[data-preset=scrapbook] .mc-scrap-photos {
    left: 6%;
    top: 8%;
    width: 45%;
    height: 46%
  }

  .mc-root[data-preset=scrapbook] .mc-grid-paper {
    left: 3%;
    top: 11%;
    width: 52%;
    height: 45%
  }

  .mc-root[data-preset=scrapbook] .mc-yellow-paper {
    left: 1%;
    top: 41%;
    width: 59%;
    height: 16%
  }

  .mc-root[data-preset=scrapbook] .mc-side-paper {
    left: 2%;
    top: 16%;
    width: 8%;
    height: 32%
  }

  .mc-root[data-preset=scrapbook] .mc-note {
    right: 4%;
    top: 3%;
    width: 38%;
    padding: 1.1% 2%;
    min-height: 0
  }

  .mc-root[data-preset=scrapbook] .mc-calendar {
    right: 11%;
    top: 18%;
    width: 28%;
    height: 23%;
    padding: 1.2% 1.5%
  }

  .mc-root[data-preset=scrapbook][data-calendar-mode=todo] .mc-calendar {
    right: 26%;
    width: 20%
  }

  .mc-root[data-preset=scrapbook] .mc-todos {
    right: 4%;
    top: 18%;
    width: 20%;
    height: 23%
  }

  .mc-root[data-preset=scrapbook] .mc-film {
    right: 4%;
    top: 45%;
    width: 39%;
    height: 12.5%
  }

  .mc-root[data-preset=scrapbook] .mc-sticker {
    right: 3%;
    top: 49%;
    width: 17%;
    height: 14%
  }

  .mc-root[data-preset=scrapbook] .mc-masthead {
    left: 4%;
    top: 60%;
    width: 92%;
    height: 10%
  }

  .mc-root[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 5cqw
  }

  .mc-root[data-preset=scrapbook] :is(.mc-bottom,.mc-dates) {
    left: 4%;
    top: 71%;
    width: 92%;
    height: 5%;
    padding-top: .4%
  }

  .mc-root[data-preset] .mc-widgets {
    top: 77%;
    bottom: 4%
  }

  }

.mc-root[data-preset] [data-mc-text],.mc-root[data-preset] [data-mc-font-area],.mc-root[data-preset] [data-mc-font-area] * {
  font-family: var(--mc-element-font,var(--mc-body-font,var(--content-font-family,sans-serif)))!important
}

.mc-editor {
  height: auto;
  max-height: calc(100dvh - 24px);
  width: min(360px,calc(100vw - 24px))
}

.mc-editor[data-context=font] {
  width: min(290px,calc(100vw - 24px))
}

.mc-editor form {
  flex: 0 1 auto
}

.mc-editor-fields {
  flex: 0 1 auto;
  max-height: calc(100dvh - 210px)
}

.mc-editor fieldset:not(.mc-context-active),.mc-inline-copy-fields {
  display: none!important
}

.mc-editor[data-context=font] .mc-savebar {
  display: none
}

.mc-editor fieldset {
  margin-bottom: 16px
}

.mc-editor fieldset:last-child {
  margin-bottom: 0
}

.mc-root[data-editing=on] :is(.mc-todos,.mc-widgets>section) {
  cursor: pointer;
  outline: 1px dashed var(--mc-accent);
  outline-offset: 3px
}

.mc-root[data-editing=on] .mc-widgets>section[hidden] {
  display: flex!important;
  opacity: .5
}

.mc-root[data-editing=on] .mc-widgets>section[hidden]:after {
  content: '표시 안 함 · 클릭하여 설정';
  font-size: 11px;
  padding: 8px 0
}

.mc-root[data-editing=on] :is(.mc-photo-sticker,.mc-sticker) {
  visibility: visible
}

.mc-root[data-editing=on] :is(.mc-photo-sticker,.mc-sticker) {
  cursor: pointer;
  pointer-events: auto;
  outline: 1px dashed #567d8d70;
  outline-offset: 3px
}

.mc-root[data-editing=on] :is(.mc-photo-sticker,.mc-sticker):hover {
  outline: 2px solid #567d8d
}

.mc-root[data-editing=on] .mc-empty-sticker {
  background: #e2e4df80
}

.mc-root[data-editing=on] .mc-empty-sticker:after {
  content: '스티커 추가';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #47677a;
  font: 600 11px/1.2 var(--mc-body-font);
  text-align: center
}

.mc-root[data-editing=on][data-sticker-photo-scale="0"] .mc-photo-sticker img,.mc-root[data-editing=on][data-sticker-film-scale="0"] .mc-sticker img {
  transform: scale(.6);
  opacity: .35
}

.mc-root[data-preset] [data-mc-font-target],.mc-root[data-preset] [data-mc-font-target] * {
  font-family: var(--mc-element-font,var(--mc-body-font))!important
}

.mc-root[data-editing=on] [data-mc-font-target] {
  cursor: pointer;
  outline: 1px dashed var(--mc-accent);
  outline-offset: 3px
}

.mc-root[data-preset] .mc-photo-sticker {
  transform: rotate(var(--mc-sticker-photo-angle,12deg))
}

.mc-root[data-preset] .mc-sticker {
  transform: rotate(var(--mc-sticker-film-angle,-12deg))
}

.mc-range-row {
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-editor .mc-range-row input[type=range] {
  flex: 1;
  min-width: 0;
  width: auto
}

.mc-editor .mc-range-reset {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 4px;
  background: transparent;
  color: var(--mc-ui-muted)
}

.mc-editor .mc-range-reset:hover {
  background: var(--mc-ui-field);
  color: var(--mc-accent);
  border-color: var(--mc-accent)
}

/* Approved collage layout, 2026-09-29. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-canvas {
  padding: 7px 30px 22px;
  display: grid;
  grid-template-rows: minmax(0,1fr) 82px 165px 14px;
  gap: 12px;
  height: 80svh;
  min-height: 0;
  overflow: visible
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-canvas:before {
  display: none
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-publisher {
  position: relative;
  inset: auto;
  top: 10px;
  grid-area: 1 / 1;
  align-self: start;
  justify-self: start;
  font-size: 9px;
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px
}

.mc-composed .mc-publisher b {
  font-size: 25px;
  margin: 0
}

.mc-composed .mc-publisher > span {
  margin: 0;
  padding-left: 8px
}

.mc-composed .mc-publisher small {
  font-size: 6px
}

.mc-layout-composition {
  position: relative;
  display: grid;
  grid-area: 1 / 1;
  padding-top: 20px;
  grid-template-columns: 1.2fr 1fr;
  gap: 42px;
  min-height: 0;
  isolation: isolate
}

.mc-layout-hero {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 38px 7px 8px 12px
}

.mc-layout-support {
  display: grid;
  grid-template-rows: max-content max-content max-content;
  gap: 15px;
  align-content: safe center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  width: 100%;
  max-width: 35vw;
  justify-self: end;
  container-type: inline-size
}

.mc-layout-day {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  min-height: clamp(178px,30cqw,220px);
  max-height: 220px
}

.mc-layout-day:has(.mc-todos[hidden]) {
  grid-template-columns: 1fr
}

.mc-layout-film {
  position: relative;
  min-height: clamp(98px,18cqw,130px);
  max-height: 130px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-scene {
  inset: -7px -36px -16px;
  width: auto;
  height: auto;
  mask-image: linear-gradient(#000 0 68%,transparent 100%);
  z-index: -3
}

.mc-composed .mc-scene img {
  opacity: .72
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-scrap-photos {
  inset: 0;
  width: 100%;
  height: 100%
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-main-photo {
  inset: 0;
  transform: rotate(-1.3deg);
  padding: 14px 14px 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-main-photo figcaption {
  min-height: 46px;
  font-size: 19px;
  padding: 3px 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-photo-sticker {
  width: 25%;
  height: 28.75%
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-grid-paper {
  left: -12px;
  top: 9%;
  width: 106%;
  height: 90%
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-yellow-paper {
  left: -48px;
  top: 68%;
  width: 111%;
  height: 30%
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-side-paper {
  left: -29px;
  top: 18%;
  width: 15%;
  height: 66%
}

.mc-composed .mc-empty-frame {
  inset: -10px 34px 25px -5px;
  border-width: 12px
}

.mc-composed .mc-empty-frame:after {
  border-width: 12px;
  inset: 7% -11% -10% 15%
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-note {
  position: relative;
  inset: auto;
  width: calc(100% - 14px);
  height: auto;
  margin: 0 7px;
  padding: max(10px,1cqw) 20px;
  min-height: 0;
  transform: rotate(1deg)
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-note p {
  font-size: clamp(12px,1.05cqw,15px);
  line-height: 1.6
}

.mc-root.mc-composed[data-preset=scrapbook] :is(.mc-calendar,.mc-todos) {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
  transform: rotate(1.5deg)
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-todos {
  height: 82%;
  align-self: center;
  transform: rotate(-1.5deg)
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar header {
  margin-bottom: 9px;
  font-size: 10px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar header strong {
  font-size: clamp(11px,1.05cqw,14px);
  letter-spacing: .07em
}

.mc-composed .mc-calendar-grid {
  font-size: 12px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar:after {
  font-size: 38px;
  top: -16px;
  right: 12px
}

.mc-composed .mc-todos h2 {
  font-size: 23px;
  margin: 0 0 12px
}

.mc-composed .mc-todos h2 small {
  font-size: 8px
}

.mc-composed .mc-todos li {
  font-size: 13px;
  padding: 4px 0;
  line-height: 1.4
}

.mc-composed .mc-todo-hint {
  font-size: 9px
}

.mc-composed .mc-todos ul {
  overflow: auto
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-film {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(.7deg)
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-sticker {
  top: auto;
  bottom: -62px;
  right: -20px;
  left: auto;
  width: 144px;
  height: 119px
}

.mc-layout-identity {
  display: grid;
  grid-area: 2 / 1;
  grid-template-columns: 1fr 300px;
  gap: 28px;
  align-items: center;
  border: 0;
  position: relative;
  z-index: 5
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-masthead {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  min-width: 0;
  display: block
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-issue {
  font-size: 10px;
  padding-bottom: 5px;
  border-bottom: 0;
  margin-bottom: 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-masthead h1 {
  font-size: 64px;
  line-height: 1;
  letter-spacing: -.055em
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-bottom {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  border-top: 0;
  border-left: 1px solid #a3aaa4;
  padding: 2px 0 2px 25px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-bottom-pair {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px
}

.mc-composed .mc-bottom-label {
  font-size: 9px;
  letter-spacing: .06em;
  margin-bottom: 5px
}

.mc-composed .mc-bottom-pair strong {
  font-size: 25px;
  line-height: 1.2
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-bottom-pair>p {
  max-width: 100%;
  font-size: 13px;
  text-align: left
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
  position: relative;
  inset: auto;
  display: grid;
  grid-area: 3 / 1;
  grid-template-columns: repeat(var(--widget-count,3),minmax(0,1fr));
  gap: 28px;
  padding: 0;
  min-height: 0;
  overflow: visible
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets>section {
  display: flex;
  min-height: 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets h2 {
  font-size: 15px;
  padding-bottom: 7px;
  margin-bottom: 6px;
  line-height: 1.4
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets h2 small {
  font-size: 11px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets ul {
  overflow: visible
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets li a {
  font-size: 14px;
  line-height: 22px;
  padding: 0
}

.mc-composed .mc-widgets time,.mc-composed .mc-widgets li small {
  font-size: 11px
}

.mc-composed .mc-banner-list {
  margin-top: 3px;
  align-content: start;
  gap: 8px
}

.mc-composed .mc-banner-list img {
  height: 40px;
  object-fit: cover
}

.mc-banner-list a {
  position: relative;
  display: block;
}

.mc-banner-tooltip {
  position: fixed;
  z-index: 10000;
  width: max-content;
  max-width: min(220px,calc(100vw - 16px));
  padding: 5px 9px;
  border-radius: 3px;
  background: var(--mc-ink,#282c30);
  color: var(--mc-paper,#fffefa);
  box-shadow: 2px 2px 1px #0006;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
  pointer-events: none;
}

.mc-banner-tooltip:after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(var(--mc-tooltip-arrow-x,50%) - 5px);
  border: 5px solid transparent;
  border-top-color: var(--mc-ink,#282c30);
}

.mc-banner-tooltip.mc-tooltip-below:after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--mc-ink,#282c30);
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-footer {
  position: relative;
  inset: auto;
  grid-area: 4 / 1;
  padding: 0;
  font-size: 10px;
  line-height: 14px
}

.mc-composed .mc-artwork {
  display: contents
}

@media(max-width:1200px) {
  .mc-root.mc-composed {
    min-height: 0
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-canvas {
    width: calc(100% - 48px);
    height: auto;
    margin: 20px auto;
    padding: 26px;
    grid-template-rows: auto auto auto 14px;
    gap: 24px
  }

  .mc-layout-composition {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    min-height: 420px
  }

  .mc-layout-support {
    max-width: none;
  }

  .mc-layout-identity {
    grid-template-columns: 1fr 240px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 48px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-scene {
    inset: -26px -26px -16px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-photo-sticker {
    width: 27.5%;
    height: 31.25%;
    bottom: 9%
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
    gap: 22px
  }

}

@media(max-width:760px) {
  .mc-root.mc-composed[data-preset=scrapbook] .mc-canvas {
    width: calc(100% - 32px);
    padding: 20px;
    margin: 8px auto;
    grid-template-rows: auto auto auto auto;
    gap: 26px
  }

  .mc-layout-composition {
    grid-template-columns: 1fr;
    gap: 32px
  }

  .mc-layout-hero {
    height: 380px;
    margin: 38px 6px 12px
  }

  .mc-layout-day {
    grid-template-columns: 1fr;
    gap: 28px;
    max-height: none
  }

  .mc-layout-film {
    min-height: max(98px,25cqw);
    max-height: none
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-calendar {
    height: 252px;
    transform: rotate(1deg)
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-todos {
    height: 190px
  }

  .mc-composed .mc-calendar-grid {
    font-size: 14px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-scene {
    inset: -20px -20px auto;
    height: 470px
  }

  .mc-layout-identity {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-bottom: 16px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 42px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-bottom {
    border-left: 0;
    padding: 0
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-bottom-pair {
    flex-direction: row;
    align-items: center
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-bottom-pair>p {
    max-width: 45%;
    font-size: 12px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
    grid-template-columns: 1fr;
    gap: 25px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-widgets li a {
    line-height: 28px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-footer {
    font-size: 9px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-note p {
    font-size: 13px
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-main-photo figcaption {
    font-size: 16px
  }

}

.mc-root.mc-composed[data-preset=scrapbook] :is(.mc-publisher,.mc-masthead,.mc-note,.mc-calendar,.mc-todos,.mc-film,.mc-widgets,.mc-footer) {
  order: 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
  width: 100%;
  height: 100%;
  margin: 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets>section {
  flex-direction: column
}

@media(max-width:760px) {
  .mc-layout-support {
    min-height: min-content
  }

  .mc-layout-day {
    min-height: min-content
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
    height: auto
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-masthead h1 {
    font-size: 34px
  }

}

/* Keep the calendar readable at intermediate desktop widths. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar-grid {
  grid-auto-rows: minmax(18px,1fr)
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar header {
  gap: 5px
}

/* Review refinements: breathing room, inset lists and larger decorative stickers. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets :is(ul,.mc-banner-list) {
  padding-left: 12px;
  padding-right: 12px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar-grid .mc-day {
  font-size: 10px
}

/* Optional panels reflow; all footer choices keep their existing controls. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets {
  --widget-count: 1
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets:is([data-feed=on],[data-banners=on]) {
  --widget-count: 2
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets[data-feed=on][data-banners=on] {
  --widget-count: 3
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets :is(ul,.mc-banner-list) {
  overflow: auto
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-bottom>div {
  display: none
}

.mc-root.mc-composed[data-preset=scrapbook][data-bottom-mode=pair] .mc-bottom-pair, .mc-root.mc-composed[data-preset=scrapbook][data-bottom-mode=quote] .mc-bottom-quote, .mc-root.mc-composed[data-preset=scrapbook][data-bottom-mode=status] .mc-bottom-status {
  display: flex
}

.mc-root.mc-composed[data-preset=scrapbook][data-bottom-mode=none] .mc-layout-identity {
  grid-template-columns: 1fr
}

.mc-root.mc-composed[data-preset=scrapbook][data-bottom-mode=dates] .mc-dates {
  position: relative;
  inset: auto;
  width: 100%;
  height: auto;
  padding: 0
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-dates strong {
  font-size: 22px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-dates small {
  font-size: 9px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-publisher {
  z-index: 15
}

.mc-root[data-editing=on] [data-mc-publisher-mark] {
  cursor: pointer;
  outline: 1px dashed var(--mc-accent);
  outline-offset: 3px
}

.mc-root.mc-composed[data-preset=scrapbook] .mc-calendar {
  min-height: 178px
}

/* Scale the supporting collage with its column, independent of viewport height. */
@media(min-width:1201px) {
  .mc-layout-day {
    min-height: clamp(178px,30cqw,300px);
    max-height: none
  }

  .mc-layout-film {
    min-height: 98px;
    max-height: none;
    aspect-ratio: 5.3 / 1
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-note p {
    font-size: clamp(12px,2.3cqw,18px)
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-calendar header strong {
    font-size: clamp(11px,2.1cqw,18px)
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-calendar-grid .mc-day {
    font-size: clamp(10px,1.9cqw,16px)
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-sticker {
    --mc-sticker-base-size: clamp(144px,27cqw,260px);
    width: var(--mc-sticker-base-size);
    height: calc(var(--mc-sticker-base-size) * 119 / 144)
  }
}

/* Long editable copy keeps the two existing editions legible. */
@media(max-width:760px) {
  .mc-root.mc-composed[data-preset=scrapbook] .mc-masthead h1 {
    white-space: normal!important;
    overflow: visible;
    word-break: keep-all;
    overflow-wrap: anywhere;
    max-height: none;
    font-size: clamp(24px,7vw,30px);
    line-height: 1.1;
  }

  .mc-root.mc-composed[data-preset=scrapbook] .mc-sticker {
    bottom: -16px;
  }
}

/* Dossier: the header follows its copy and the right cards follow one another. */
/* Dark collage editions: night scrapbook (nightbook) and darkroom.
   Both draw on a 936x760 board; --u is one board pixel, so the composition scales as one piece. */
.mc-dk {
  display: none
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) {
  --mc-ink: #eceee6;
  --mc-muted: #a3aeb0;
  --mc-dk-line: #3a4a50;
  color: var(--mc-ink);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-canvas {
  --u: calc(100cqw / 936);
  --mc-accent: var(--mc-archive-accent,#c5d692);
  display: block;
  width: min(65vw,calc(max(80svh,760px) * 936 / 760));
  height: auto;
  min-height: 0;
  aspect-ratio: 936 / 760;
  margin: max(16px,calc((100svh - min(65vw,calc(max(80svh,760px) * 936 / 760)) * 760 / 936) / 2)) auto;
  padding: 0;
  color: var(--mc-ink);
  overflow: visible;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-canvas::before,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-canvas::after,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-film::before,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-film::after,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-paper,.mc-underpaper,.mc-clip,.mc-scene,.mc-publisher,.mc-grid-paper,.mc-yellow-paper,.mc-side-paper,.mc-empty-frame,.mc-photo-sticker,.mc-paperclip,.mc-dossier-photos,.mc-sticker,.mc-footer .mc-barcode,.mc-calendar::after) {
  display: none
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-artwork,.mc-scrap-photos) {
  display: contents
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-masthead,.mc-note,.mc-main-photo,.mc-back-photo,.mc-film,.mc-calendar,.mc-todos,.mc-bottom,.mc-dates,.mc-widgets,.mc-footer,.mc-stamp) {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  transform: none;
  filter: none;
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-photo .mc-photo-window {
  flex: none;
  position: relative;
  overflow: hidden;
  background: #223035;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-photo .mc-photo-window img {
  position: absolute;
  inset: 0;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-photo .mc-photo-window:has(>img[hidden]) {
  background-color: #1f2b2f;
  background-image: radial-gradient(#3a4a50 .8px,transparent 1.2px),repeating-linear-gradient(135deg,transparent 0 11px,#26353a 11px 12px);
  background-size: 12px 12px,auto;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-masthead h1 {
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: break-word;
  max-height: none;
  overflow: visible;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-note p {
  max-height: none;
  overflow: visible;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-note .mc-script {
  display: block;
  max-height: none;
  overflow: visible;
}
/* Relationship line: one of the existing bottom modes, shown as a stacked label. */
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-bottom,.mc-dates) {
  display: block;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-bottom>div {
  display: none;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom])[data-bottom-mode=pair] .mc-bottom-pair,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom])[data-bottom-mode=quote] .mc-bottom-quote {
  display: block;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom])[data-bottom-mode=status] .mc-bottom-status {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]):not([data-bottom-mode=dates]) .mc-dates,
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]):is([data-bottom-mode=dates],[data-bottom-mode=none]) .mc-bottom {
  display: none;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-bottom-label {
  display: block;
  font-size: max(9px,calc(9.5 * var(--u)));
  letter-spacing: .14em;
  color: var(--mc-muted);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-bottom-pair strong {
  display: block;
  font-size: max(16px,calc(25 * var(--u)));
  line-height: 1.25;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-bottom-pair i {
  font-style: normal;
  color: var(--mc-accent);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-bottom-pair>p,.mc-bottom-quote p,.mc-bottom-status p) {
  max-width: none;
  max-height: none;
  margin-top: 2px;
  font-size: max(10px,calc(12 * var(--u)));
  line-height: 1.55;
  text-align: left;
  color: var(--mc-muted);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-bottom-quote>span {
  display: none;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dates {
  font-size: max(10px,calc(12 * var(--u)));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dates>div {
  display: inline-block;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dates small {
  display: block;
  font-size: max(9px,calc(9 * var(--u)));
  letter-spacing: .14em;
  color: var(--mc-muted);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dates strong {
  font-size: max(15px,calc(21 * var(--u)));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dates>span {
  margin: 0 8px;
  color: var(--mc-accent);
}
/* Calendar, to-do and the three live lists share their inner rhythm. */
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar {
  display: flex;
  flex-direction: column;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(8 * var(--u));
  font-size: max(9px,calc(10 * var(--u)));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar header strong {
  font-size: max(11px,calc(14 * var(--u)));
  letter-spacing: .12em;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar-grid {
  flex: none;
  font-size: max(10px,calc(12 * var(--u)));
  row-gap: calc(5 * var(--u));
  text-align: center;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar-grid>* {
  display: grid;
  place-items: center;
  min-height: calc(20 * var(--u));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar .mc-weekday {
  font-size: max(9px,calc(9 * var(--u)));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-today {
  justify-self: center;
  width: calc(23 * var(--u));
  height: calc(23 * var(--u));
  border: 2px solid currentColor;
  border-radius: 52% 46% 55% 44%;
  font-weight: 700;
  background: none;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-todos {
  display: flex;
  flex-direction: column;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-todos ul {
  flex: none;
  max-height: none;
  overflow: visible;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-todos li {
  font-size: max(11px,calc(12.5 * var(--u)));
  line-height: 1.4;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-todo-hint {
  margin-top: auto!important;
  padding-top: 6px;
  font-size: 9px;
  opacity: .75;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets {
  display: flex;
  gap: calc(26 * var(--u));
  padding-top: calc(12 * var(--u));
  z-index: 4;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets>section {
  flex: 1;
  min-width: 0;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets h2 {
  font-size: max(11px,calc(13 * var(--u)));
  padding-bottom: calc(6 * var(--u));
  margin-bottom: calc(6 * var(--u));
  color: var(--mc-ink);
  border-bottom: 1px solid var(--mc-dk-line);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets :is(h2 small,time,li small,.mc-empty) {
  color: var(--mc-muted);
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets :is(ul,.mc-banner-list) {
  overflow: hidden;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets li a {
  padding: 1px 0;
  font-size: max(10.5px,calc(12 * var(--u)));
  line-height: 1.38;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-banner-list img {
  height: calc(24 * var(--u));
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-footer {
  font-size: max(9.5px,calc(10.5 * var(--u)));
  letter-spacing: .05em;
  color: var(--mc-muted);
  z-index: 4;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dk-pick {
  font-family: 'Caveat','Segoe Print','Bradley Hand',cursive!important;
}
.mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-dk-tray span {
  font-family: ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace!important;
}
.mc-root[data-decorations=off] :is(.mc-dk,.mc-cs).mc-decor {
  display: none!important;
}

/* ---------- A. 밤의 스크랩북: dark paper, a taped polaroid, torn notebook page, lime sticky note ---------- */
.mc-root[data-preset=nightbook] .mc-canvas {
  --mc-dk-line: color-mix(in srgb,var(--mc-nb-paper,#1b2427) 70%,#9fb3b8);
  background: radial-gradient(#ffffff08 1px,transparent 1.5px) 0 0/5px 5px,linear-gradient(160deg,color-mix(in srgb,var(--mc-nb-paper-s) 99%,#fff),color-mix(in srgb,var(--mc-nb-paper-s) 80%,#000));
  border: 1px solid #2a383d;
  box-shadow: 14px 16px 0 -2px #2b2722,0 30px 60px -28px #000c;
}
.mc-root[data-preset=nightbook] .mc-dk-nb {
  display: block;
  position: absolute;
  pointer-events: none;
}
.mc-root[data-preset=nightbook] .mc-masthead {
  left: calc(40 * var(--u));
  top: calc(38 * var(--u));
  width: calc(290 * var(--u));
  z-index: 3;
}
.mc-root[data-preset=nightbook] .mc-issue {
  font-size: max(9px,calc(10 * var(--u)));
  letter-spacing: .2em;
  color: var(--mc-muted);
}
.mc-root[data-preset=nightbook] .mc-masthead h1 {
  margin-top: calc(8 * var(--u));
  font-size: max(24px,calc(48 * var(--u)));
  line-height: .98;
  letter-spacing: -.02em;
  color: #f1f2ea;
}
.mc-root[data-preset=nightbook] .mc-masthead h1::first-letter {
  color: var(--mc-accent);
}
.mc-root[data-preset=nightbook] .mc-note {
  left: calc(36 * var(--u));
  top: calc(178 * var(--u));
  width: calc(278 * var(--u));
  padding: calc(20 * var(--u)) calc(22 * var(--u)) calc(26 * var(--u)) calc(34 * var(--u));
  background: repeating-linear-gradient(#0000 0 calc(23 * var(--u)),#ffffff14 calc(23 * var(--u)) calc(24 * var(--u))),color-mix(in srgb,var(--mc-nb-paper-s) 96.5%,#fff);
  transform: rotate(-2deg);
  clip-path: polygon(0 0,100% 0,100% 92%,94% 96%,88% 92%,80% 97%,71% 93%,62% 98%,52% 93%,42% 97%,33% 92%,24% 97%,14% 93%,6% 97%,0 93%);
  box-shadow: 0 8px 18px #0007;
  z-index: 3;
}
.mc-root[data-preset=nightbook] .mc-note::before {
  content: '';
  position: absolute;
  left: calc(18 * var(--u));
  top: 0;
  bottom: 0;
  border-left: 1px solid #d9827466;
}
.mc-root[data-preset=nightbook] .mc-note .mc-tape {
  display: none;
}
.mc-root[data-preset=nightbook] .mc-note p {
  font-size: max(11px,calc(13 * var(--u)));
  line-height: calc(24 * var(--u));
  color: #d3d8d2;
}
.mc-root[data-preset=nightbook] .mc-note .mc-script {
  margin-top: calc(6 * var(--u));
  font-size: max(16px,calc(24 * var(--u)));
  line-height: 1.15;
  font-style: italic;
  color: var(--mc-accent);
}
.mc-root[data-preset=nightbook] :is(.mc-bottom,.mc-dates) {
  left: calc(44 * var(--u));
  top: calc(352 * var(--u));
  width: calc(250 * var(--u));
  z-index: 3;
}
.mc-root[data-preset=nightbook] .mc-back-photo {
  display: block;
  left: calc(372 * var(--u));
  top: calc(44 * var(--u));
  width: calc(290 * var(--u));
  height: calc(210 * var(--u));
  padding: calc(9 * var(--u));
  background: #d9d6cc;
  transform: rotate(7deg);
  box-shadow: 0 10px 24px #0009;
  filter: brightness(.72) saturate(.7);
  z-index: 1;
}
.mc-root[data-preset=nightbook] .mc-back-photo .mc-photo-window {
  height: 100%;
}
.mc-root[data-preset=nightbook]:not([data-editing=on]) .mc-back-photo:has(img[hidden]) {
  display: none;
}
.mc-root[data-preset=nightbook] .mc-main-photo {
  left: calc(330 * var(--u));
  top: calc(70 * var(--u));
  width: calc(322 * var(--u));
  padding: calc(12 * var(--u)) calc(12 * var(--u)) 0;
  background: #ecebe4;
  transform: rotate(-3deg);
  box-shadow: 0 18px 34px -8px #000d;
  z-index: 2;
}
.mc-root[data-preset=nightbook] .mc-main-photo .mc-photo-window {
  height: calc(300 * var(--u));
}
.mc-root[data-preset=nightbook] .mc-main-photo figcaption {
  position: static;
  min-height: calc(52 * var(--u));
  justify-content: center;
  font-size: max(12px,calc(19 * var(--u)));
  font-style: italic;
  color: #2e3639;
  text-align: center;
}
.mc-root[data-preset=nightbook] .mc-dk-tape {
  width: calc(92 * var(--u));
  height: calc(26 * var(--u));
  background: linear-gradient(90deg,#0000 0 4%,color-mix(in srgb,var(--mc-accent) 55%,transparent) 4% 96%,#0000 96%),repeating-linear-gradient(90deg,#fff2 0 3px,#0000 3px 7px);
  clip-path: polygon(3% 0,97% 4%,100% 50%,96% 100%,4% 96%,0 50%);
  z-index: 3;
}
.mc-root[data-preset=nightbook] .mc-dk-tape1 {
  left: calc(300 * var(--u));
  top: calc(58 * var(--u));
  transform: rotate(-34deg);
}
.mc-root[data-preset=nightbook] .mc-dk-tape2 {
  left: calc(578 * var(--u));
  top: calc(52 * var(--u));
  transform: rotate(22deg);
}
.mc-root[data-preset=nightbook] .mc-calendar {
  left: calc(692 * var(--u));
  top: calc(46 * var(--u));
  width: calc(206 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  background: #e9e7de;
  color: #232a2c;
  transform: rotate(1.6deg);
  box-shadow: 0 10px 22px #0009;
  z-index: 2;
}
.mc-root[data-preset=nightbook] .mc-calendar .mc-tape {
  display: block;
  position: absolute;
  left: 38%;
  top: calc(-12 * var(--u));
  width: calc(80 * var(--u));
  height: calc(24 * var(--u));
  background: color-mix(in srgb,var(--mc-accent) 55%,transparent);
  transform: rotate(-4deg);
}
.mc-root[data-preset=nightbook] .mc-calendar header {
  color: #6c7372;
}
.mc-root[data-preset=nightbook] .mc-calendar header strong {
  color: #232a2c;
}
.mc-root[data-preset=nightbook] .mc-calendar .mc-weekday {
  color: #8a908d;
}
.mc-root[data-preset=nightbook] .mc-today {
  color: color-mix(in srgb,var(--mc-accent) 45%,#1e2620)!important;
}
.mc-root[data-preset=nightbook] .mc-todos {
  left: calc(704 * var(--u));
  top: calc(282 * var(--u));
  width: calc(190 * var(--u));
  min-height: calc(180 * var(--u));
  padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(#0000000d 0 calc(16 * var(--u)),#0000 0),var(--mc-accent);
  color: #1e2620;
  transform: rotate(3.5deg);
  box-shadow: 0 12px 20px -6px #000c;
  z-index: 3;
}
.mc-root[data-preset=nightbook] .mc-todos h2 {
  margin-bottom: calc(6 * var(--u));
  font-size: max(16px,calc(22 * var(--u)));
  font-style: italic;
}
.mc-root[data-preset=nightbook] .mc-todos li {
  padding: calc(4 * var(--u)) 0;
  border-bottom: 1px solid #1e262024;
}
.mc-root[data-preset=nightbook] .mc-todos li>span:first-child {
  color: inherit;
}
.mc-root[data-preset=nightbook] .mc-todo-hint {
  color: #1e2620;
  opacity: .7;
}
.mc-root[data-preset=nightbook] .mc-film {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: calc(10 * var(--u));
  left: calc(52 * var(--u));
  top: calc(448 * var(--u));
  width: calc(606 * var(--u));
  height: calc(108 * var(--u));
  padding: calc(16 * var(--u)) calc(10 * var(--u));
  background: radial-gradient(circle,#2a3134 calc(2.5 * var(--u)),#0000 calc(3 * var(--u))) 0 calc(3 * var(--u))/calc(14 * var(--u)) calc(10 * var(--u)) repeat-x,radial-gradient(circle,#2a3134 calc(2.5 * var(--u)),#0000 calc(3 * var(--u))) 0 calc(100% - 3 * var(--u))/calc(14 * var(--u)) calc(10 * var(--u)) repeat-x,#0b0e0f;
  transform: rotate(-1.6deg);
  box-shadow: 0 12px 24px #000a;
  z-index: 2;
}
.mc-root[data-preset=nightbook] .mc-film .mc-photo {
  position: relative;
  inset: auto;
  width: auto;
  height: 100%;
  padding: 0;
  margin: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.mc-root[data-preset=nightbook] .mc-film .mc-photo-window {
  height: 100%;
}
.mc-root[data-preset=nightbook] .mc-stamp {
  display: grid;
  place-items: center;
  left: calc(616 * var(--u));
  top: calc(388 * var(--u));
  width: calc(86 * var(--u));
  height: calc(86 * var(--u));
  border: 3px double var(--mc-accent);
  border-radius: 50%;
  color: var(--mc-accent);
  text-align: center;
  transform: rotate(-14deg);
  opacity: .9;
  z-index: 4;
}
.mc-root[data-preset=nightbook] .mc-stamp::before {
  display: none;
}
.mc-root[data-preset=nightbook] .mc-stamp>span {
  font-size: max(8px,calc(10 * var(--u)));
  letter-spacing: .1em;
}
.mc-root[data-preset=nightbook] .mc-widgets {
  left: calc(40 * var(--u));
  right: calc(40 * var(--u));
  top: calc(586 * var(--u));
  border-top: 1px dashed #4a5a60;
}
.mc-root[data-preset=nightbook] .mc-widgets h2>span {
  font-style: italic;
  color: var(--mc-accent);
}
.mc-root[data-preset=nightbook] .mc-footer {
  left: calc(40 * var(--u));
  bottom: calc(12 * var(--u));
}

/* ---------- B. 암실 인화: prints hung on a line, the main print in a developing tray ---------- */
.mc-root[data-preset=darkroom] .mc-canvas {
  --mc-dk-line: color-mix(in srgb,var(--mc-dr-paper,#111716) 72%,#9fb3b0);
  --mc-dk-amber: var(--mc-label,#d9a441);
  background: radial-gradient(55% 45% at 10% 4%,#7a2a1e30,#0000 70%),radial-gradient(#ffffff06 1px,#0000 1.4px) 0 0/4px 4px,var(--mc-dr-paper-s);
  border: 1px solid #263130;
  box-shadow: 0 30px 60px -28px #000d;
}
.mc-root[data-preset=darkroom] .mc-dk-dr {
  display: block;
  position: absolute;
  pointer-events: none;
}
.mc-root[data-preset=darkroom] .mc-dk-line {
  left: calc(-14 * var(--u));
  right: calc(-14 * var(--u));
  top: calc(20 * var(--u));
  height: calc(40 * var(--u));
  z-index: 1;
}
.mc-root[data-preset=darkroom] .mc-dk-line svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mc-root[data-preset=darkroom] .mc-dk-line path {
  fill: none;
  stroke: #7d8682;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.mc-root[data-preset=darkroom] .mc-dk-pin {
  width: calc(16 * var(--u));
  height: calc(30 * var(--u));
  background: linear-gradient(90deg,#8b6a43,#b48b5c 45%,#7a5a36);
  border-radius: 3px 3px 2px 2px;
  box-shadow: 0 2px 3px #0009;
  z-index: 6;
}
.mc-root[data-preset=darkroom] .mc-dk-pin::after {
  content: '';
  position: absolute;
  left: 37%;
  top: 27%;
  width: 25%;
  height: 40%;
  background: #6a6f72;
  border-radius: 2px;
}
.mc-root[data-preset=darkroom] .mc-dk-pin1 { left: calc(124 * var(--u)); top: calc(30 * var(--u)); transform: rotate(-5deg); }
.mc-root[data-preset=darkroom] .mc-dk-pin2 { left: calc(300 * var(--u)); top: calc(38 * var(--u)); transform: rotate(4deg); }
.mc-root[data-preset=darkroom] .mc-dk-pin3 { left: calc(478 * var(--u)); top: calc(42 * var(--u)); transform: rotate(-3deg); }
.mc-root[data-preset=darkroom] .mc-dk-pin4 { left: calc(778 * var(--u)); top: calc(40 * var(--u)); transform: rotate(6deg); }
.mc-root[data-preset=darkroom] .mc-film {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
  z-index: 2;
}
.mc-root[data-preset=darkroom] .mc-film .mc-photo {
  position: absolute;
  width: calc(150 * var(--u));
  height: calc(196 * var(--u));
  margin: 0;
  padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(26 * var(--u));
  background: #efece3;
  box-shadow: 0 14px 22px -8px #000d;
  pointer-events: auto;
}
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(1) { left: calc(56 * var(--u)); top: calc(44 * var(--u)); transform: rotate(-3deg); }
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(2) { left: calc(236 * var(--u)); top: calc(52 * var(--u)); transform: rotate(2.4deg); }
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(3) { left: calc(414 * var(--u)); top: calc(54 * var(--u)); transform: rotate(-1.6deg); }
.mc-root[data-preset=darkroom] .mc-film .mc-photo::after {
  position: absolute;
  left: calc(8 * var(--u));
  bottom: calc(6 * var(--u));
  font: 500 max(9px,calc(10 * var(--u))) ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  letter-spacing: .06em;
  color: #7c3a2c;
}
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(1)::after { content: 'No. 22'; }
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(2)::after { content: 'No. 23A'; }
.mc-root[data-preset=darkroom] .mc-film .mc-photo:nth-child(3)::after { content: 'No. 24'; }
.mc-root[data-preset=darkroom] .mc-film .mc-photo-window {
  height: 100%;
  filter: sepia(.18) saturate(.85);
}
.mc-root[data-preset=darkroom] .mc-dk-grease {
  left: calc(222 * var(--u));
  top: calc(36 * var(--u));
  width: calc(184 * var(--u));
  height: calc(232 * var(--u));
  border: 3px solid var(--mc-accent);
  border-radius: 46% 54% 50% 50%/52% 48% 52% 48%;
  transform: rotate(4deg);
  opacity: .85;
  z-index: 4;
}
.mc-root[data-preset=darkroom] .mc-dk-pick {
  left: calc(300 * var(--u));
  top: calc(268 * var(--u));
  font-size: max(18px,calc(27 * var(--u)));
  font-weight: 700;
  line-height: 1;
  color: var(--mc-accent);
  transform: rotate(-8deg);
  z-index: 4;
}
.mc-root[data-preset=darkroom] .mc-calendar {
  left: calc(688 * var(--u));
  top: calc(52 * var(--u));
  width: calc(212 * var(--u));
  padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  background: color-mix(in srgb,var(--mc-dr-paper-s) 96%,#fff);
  border: 1px solid var(--mc-dk-line);
  box-shadow: 0 14px 26px #000b;
  transform: rotate(2deg);
  z-index: 3;
}
.mc-root[data-preset=darkroom] .mc-calendar::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px dashed var(--mc-dk-line);
  pointer-events: none;
}
.mc-root[data-preset=darkroom] .mc-calendar .mc-tape {
  display: none;
}
.mc-root[data-preset=darkroom] .mc-calendar header {
  color: var(--mc-dk-amber);
}
.mc-root[data-preset=darkroom] .mc-calendar header strong {
  color: var(--mc-ink);
  letter-spacing: .18em;
}
.mc-root[data-preset=darkroom] .mc-calendar .mc-weekday {
  color: var(--mc-muted);
}
.mc-root[data-preset=darkroom] .mc-today {
  color: var(--mc-accent)!important;
  transform: rotate(-8deg);
}
.mc-root[data-preset=darkroom] .mc-dk-tray {
  left: calc(30 * var(--u));
  top: calc(292 * var(--u));
  width: calc(462 * var(--u));
  height: calc(282 * var(--u));
  border-radius: calc(12 * var(--u));
  background: linear-gradient(160deg,color-mix(in srgb,var(--mc-dr-paper-s) 92%,#fff),color-mix(in srgb,var(--mc-dr-paper-s) 98%,#fff) 60%);
  box-shadow: inset 0 0 0 calc(7 * var(--u)) color-mix(in srgb,var(--mc-dr-paper-s) 89%,#fff),inset 0 0 0 calc(8 * var(--u)) #0006,inset 0 calc(16 * var(--u)) calc(34 * var(--u)) #000a,0 18px 30px -12px #000c;
  z-index: 1;
}
.mc-root[data-preset=darkroom] .mc-dk-tray::after {
  content: '';
  position: absolute;
  inset: calc(14 * var(--u));
  border-radius: calc(6 * var(--u));
  background: linear-gradient(115deg,#ffffff00 30%,#ffffff12 42%,#ffffff00 52%),#3a1a1222;
  mix-blend-mode: screen;
}
.mc-root[data-preset=darkroom] .mc-dk-tray span {
  position: absolute;
  left: calc(16 * var(--u));
  bottom: calc(-6 * var(--u));
  padding: 2px 8px;
  font-size: max(9px,calc(9.5 * var(--u)));
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--mc-dk-amber);
  background: color-mix(in srgb,var(--mc-dr-paper-s) 98%,#fff);
  z-index: 4;
}
.mc-root[data-preset=darkroom] .mc-main-photo {
  left: calc(58 * var(--u));
  top: calc(316 * var(--u));
  width: calc(406 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  background: #efece3;
  transform: rotate(-1.4deg);
  box-shadow: 0 6px 12px #0008;
  z-index: 2;
}
.mc-root[data-preset=darkroom] .mc-main-photo .mc-photo-window {
  height: calc(196 * var(--u));
  filter: sepia(.1) contrast(1.04);
}
.mc-root[data-preset=darkroom] .mc-main-photo figcaption {
  position: static;
  min-height: calc(30 * var(--u));
  font-size: max(10px,calc(11 * var(--u)));
  letter-spacing: .04em;
  color: #4b4f4c;
}
.mc-root[data-preset=darkroom] .mc-main-photo figcaption::before {
  content: 'No. 24A — ';
  color: #9a3a2a;
  white-space: pre;
}
.mc-root[data-preset=darkroom] .mc-masthead {
  left: calc(520 * var(--u));
  top: calc(292 * var(--u));
  width: calc(236 * var(--u));
  z-index: 3;
}
.mc-root[data-preset=darkroom] .mc-issue {
  display: inline-block;
  padding: 3px 7px;
  font-size: max(9px,calc(9.5 * var(--u)));
  letter-spacing: .16em;
  color: var(--mc-dk-amber);
  border: 1px solid color-mix(in srgb,var(--mc-dk-amber) 40%,transparent);
}
.mc-root[data-preset=darkroom] .mc-masthead h1 {
  width: fit-content;
  max-width: 100%;
  margin-top: calc(10 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u)) calc(7 * var(--u));
  font-size: max(18px,calc(26 * var(--u)));
  line-height: 1.15;
  letter-spacing: .05em;
  color: #f4f2ea;
  background: linear-gradient(#0000 0 46%,#ffffff10 46% 54%,#0000 54%),#1d2121;
  border-radius: 3px;
  box-shadow: inset 0 1px #fff2,inset 0 -2px #0007,0 4px 8px #0008;
  text-shadow: 0 1px 0 #000,0 -1px 0 #ffffff30;
  transform: rotate(-1.6deg);
}
.mc-root[data-preset=darkroom] .mc-masthead h1::first-letter {
  color: var(--mc-accent);
}
.mc-root[data-preset=darkroom] .mc-note {
  left: calc(516 * var(--u));
  top: calc(410 * var(--u));
  width: calc(236 * var(--u));
  padding: calc(14 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u));
  background: #c9b48c;
  color: #2b2419;
  border-radius: 4px calc(20 * var(--u)) calc(20 * var(--u)) 4px;
  transform: rotate(3deg);
  box-shadow: 0 10px 20px #000a;
  z-index: 3;
}
.mc-root[data-preset=darkroom] .mc-note::before {
  content: '';
  position: absolute;
  left: calc(12 * var(--u));
  top: 50%;
  width: calc(13 * var(--u));
  height: calc(13 * var(--u));
  margin-top: calc(-6 * var(--u));
  border-radius: 50%;
  background: var(--mc-dr-paper-s);
  box-shadow: inset 0 0 0 3px #a8916a;
}
.mc-root[data-preset=darkroom] .mc-note .mc-tape {
  display: none;
}
.mc-root[data-preset=darkroom] .mc-note p {
  font-size: max(10.5px,calc(12 * var(--u)));
  line-height: 1.65;
  color: #2b2419;
}
.mc-root[data-preset=darkroom] .mc-note .mc-script {
  margin-top: calc(4 * var(--u));
  font-size: max(15px,calc(21 * var(--u)));
  line-height: 1.1;
  font-style: italic;
  color: color-mix(in srgb,var(--mc-accent) 30%,#26300c);
}
.mc-root[data-preset=darkroom] :is(.mc-bottom,.mc-dates) {
  left: calc(524 * var(--u));
  top: calc(526 * var(--u));
  width: calc(230 * var(--u));
  z-index: 3;
}
.mc-root[data-preset=darkroom] .mc-bottom-label {
  color: var(--mc-dk-amber);
}
.mc-root[data-preset=darkroom] .mc-bottom-pair strong {
  font-size: max(15px,calc(21 * var(--u)));
}
.mc-root[data-preset=darkroom] .mc-todos {
  left: calc(770 * var(--u));
  top: calc(300 * var(--u));
  width: calc(134 * var(--u));
  padding: calc(14 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background: color-mix(in srgb,var(--mc-dr-paper-s) 98%,#fff);
  border: 1px solid var(--mc-dk-line);
  box-shadow: 0 10px 20px #0009;
  transform: rotate(-1.6deg);
  z-index: 3;
}
.mc-root[data-preset=darkroom] .mc-todos h2 {
  margin-bottom: calc(6 * var(--u));
  font-size: max(10px,calc(11 * var(--u)));
  letter-spacing: .14em;
  color: var(--mc-dk-amber);
}
.mc-root[data-preset=darkroom] .mc-todos h2 small {
  display: none;
}
.mc-root[data-preset=darkroom] .mc-todos li {
  margin: calc(6 * var(--u)) 0;
  padding: calc(4 * var(--u)) calc(7 * var(--u));
  font-size: max(10.5px,calc(11.5 * var(--u)));
  color: #2a2a24;
  background: #e8e1cf;
  border: 0;
  clip-path: polygon(1% 4%,99% 0,100% 96%,0 100%);
  transform: rotate(var(--mc-dk-r,0deg));
}
.mc-root[data-preset=darkroom] .mc-todos li:nth-child(2) { --mc-dk-r: -1.4deg; }
.mc-root[data-preset=darkroom] .mc-todos li:nth-child(3) { --mc-dk-r: 1deg; }
.mc-root[data-preset=darkroom] .mc-todos li:nth-child(4) { --mc-dk-r: -.8deg; }
.mc-root[data-preset=darkroom] .mc-todos li>span:first-child {
  display: none;
}
.mc-root[data-preset=darkroom] .mc-todos li.is-complete>span:last-child {
  text-decoration: line-through;
  text-decoration-color: #9a3a2a;
  text-decoration-thickness: 2px;
}
.mc-root[data-preset=darkroom] .mc-todo-hint {
  color: var(--mc-muted);
}
.mc-root[data-preset=darkroom] .mc-stamp {
  display: none;
}
.mc-root[data-preset=darkroom] .mc-widgets {
  left: calc(36 * var(--u));
  right: calc(38 * var(--u));
  top: calc(588 * var(--u));
  border-top: 1px solid var(--mc-dk-line);
}
.mc-root[data-preset=darkroom] .mc-widgets h2>span {
  color: var(--mc-dk-amber);
}
.mc-root[data-preset=darkroom] .mc-footer {
  left: calc(36 * var(--u));
  bottom: calc(10 * var(--u));
  letter-spacing: .08em;
}

/* Narrow desktops keep the board but use the full width. */
@media(min-width:901px) and (max-width:1200px) {
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-canvas {
    width: calc(100% - 64px);
    margin: 32px auto;
  }
}
/* Phones: the same pieces in one column; the board decorations step back. */
@media(max-width:900px) {
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-canvas {
    --u: 1px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: calc(100% - 24px);
    aspect-ratio: auto;
    margin: 12px auto;
    padding: 26px 20px 30px;
  }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-masthead,.mc-note,.mc-main-photo,.mc-film,.mc-calendar,.mc-todos,.mc-bottom,.mc-dates,.mc-widgets,.mc-footer) {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: auto;
  }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-dk,.mc-back-photo,.mc-stamp) {
    display: none!important;
  }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-masthead { order: 1; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-note { order: 2; margin: 0 6px; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) :is(.mc-bottom,.mc-dates) { order: 3; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-main-photo { order: 4; margin: 0 10px; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-main-photo .mc-photo-window { height: auto; aspect-ratio: 1.05; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-film { order: 5; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; height: auto; pointer-events: auto; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-film .mc-photo:nth-child(n) { position: relative; left: auto; top: auto; width: auto; height: auto; aspect-ratio: .9; transform: none; }
  .mc-root[data-preset=nightbook] .mc-film { padding: 14px 8px; transform: none; }
  .mc-root[data-preset=darkroom] .mc-film .mc-photo { padding: 5px 5px 18px; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-calendar { order: 6; margin: 0 8px; align-self: stretch; max-width: none; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-todos { order: 7; margin: 0 14px; width: auto; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets { order: 8; flex-direction: column; gap: 22px; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets li a { padding: 5px 0; font-size: 13px; }
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-footer { order: 9; }
  .mc-root[data-preset=nightbook] .mc-canvas { box-shadow: 8px 10px 0 -2px #2b2722; }
  .mc-root[data-preset=darkroom] .mc-masthead h1 { transform: none; }
}

/* Review fixes, 2026-10-02 ------------------------------------------------- */

/* Short desktop screens: the composed papers need about 760px; trim the outer margin before squeezing the content. */
@media(min-width:1201px) and (min-height:651px) {
  .mc-root.mc-composed[data-preset=scrapbook] .mc-canvas {
    height: max(80svh,760px);
    margin-block: max(12px,calc((100svh - max(80svh,760px)) / 2))
  }
}
/* The stamp breaks between words only. */
.mc-stamp>span {
  font-size: clamp(8px,.95cqw,13px);
  line-height: 1.1;
  word-break: keep-all;
  overflow-wrap: break-word
}

/* Readable floor for the small print. */
.mc-root .mc-calendar .mc-weekday {
  font-size: max(9px,.75em)
}
.mc-root .mc-todos h2 small,.mc-root.mc-composed .mc-todos h2 small {
  font-size: 9px
}
.mc-root .mc-todo-hint,.mc-root.mc-composed .mc-todo-hint {
  font-size: max(9px,min(.6cqw,10px))
}
.mc-root.mc-composed .mc-publisher small {
  font-size: 7.5px
}
/* Broken neighbour banners are hidden by script.js; the list never scrolls internally. */
.mc-root .mc-banner-list a[hidden] {
  display: none!important
}
.mc-root[data-preset] .mc-widgets .mc-banner-list,.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets .mc-banner-list {
  overflow: hidden
}
.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets .mc-banner-list {
  gap: 5px
}
.mc-root.mc-composed[data-preset=scrapbook] .mc-banner-list img {
  height: 36px
}

/* ToDoUp sends at most four items: the polaroid note grows to show all of them instead of scrolling. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-todos {
  height: auto;
  min-height: 82%
}
.mc-root.mc-composed[data-preset=scrapbook] .mc-todos h2 {
  margin-bottom: 6px
}
.mc-root.mc-composed[data-preset=scrapbook] .mc-todos li {
  padding: 3px 0
}
.mc-root.mc-composed[data-preset=scrapbook] .mc-todos ul {
  overflow: visible
}
.mc-root .mc-widgets h2 small:has(>.mc-banner-more) {
  display: inline
}
.mc-banner-more {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px
}

/* Empty photo slots: a quiet paper pattern for visitors, an upload prompt only while editing. */
.mc-root .mc-photo-window:has(>img[hidden]) {
  position: relative;
  background-color: color-mix(in srgb,var(--mc-highlight,#edcf87) 16%,var(--mc-paper,#fffefa));
  background-image: radial-gradient(color-mix(in srgb,var(--mc-highlight,#edcf87) 70%,#8a8070) .8px,transparent 1.2px),repeating-linear-gradient(135deg,transparent 0 11px,color-mix(in srgb,var(--mc-highlight,#edcf87) 26%,transparent) 11px 12px);
  background-size: 12px 12px,auto
}
.mc-root[data-editing=on] .mc-photo-window:has(>img[hidden])::after {
  content: '사진을 넣어 주세요';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  font: 600 12px/1.3 var(--mc-body-font,sans-serif);
  color: #3d4549;
  background: #fffefaee;
  box-shadow: 0 1px 4px #0002;
  pointer-events: none
}

/* Case-log edition (internal preset id: dossier): an open case-file folder behind one ruled report sheet.
   Same 936x760 board as the dark editions; --u is one board pixel. */
.mc-cs {
  display: none
}
.mc-root[data-preset=dossier] .mc-canvas {
  --u: calc(100cqw / 936);
  --mc-cs-line: #2b3033;
  display: block;
  width: min(65vw,calc(max(80svh,760px) * 936 / 760));
  height: auto;
  min-height: 0;
  aspect-ratio: 936 / 760;
  margin: max(16px,calc((100svh - min(65vw,calc(max(80svh,760px) * 936 / 760)) * 760 / 936) / 2)) auto;
  padding: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.mc-root[data-preset=dossier] .mc-canvas::before,
.mc-root[data-preset=dossier] .mc-canvas::after,
.mc-root[data-preset=dossier] :is(.mc-underpaper,.mc-clip,.mc-scene,.mc-publisher,.mc-grid-paper,.mc-yellow-paper,.mc-side-paper,.mc-empty-frame,.mc-photo-sticker,.mc-paperclip,.mc-scrap-photos,.mc-film,.mc-sticker,.mc-bottom,.mc-dates,.mc-tape,.mc-footer .mc-barcode,.mc-calendar::after) {
  display: none
}
.mc-root[data-preset=dossier] :is(.mc-artwork,.mc-dossier-photos) {
  display: contents
}
.mc-root[data-preset=dossier] .mc-cs {
  display: block;
  position: absolute;
  pointer-events: none;
}
.mc-root[data-preset=dossier] :is(.mc-paper,.mc-masthead,.mc-dossier-a,.mc-dossier-b,.mc-note,.mc-stamp,.mc-calendar,.mc-todos,.mc-widgets,.mc-footer) {
  position: absolute;
  inset: auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  transform: none;
  filter: none;
  clip-path: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}

/* Back layer: the open case file. */
.mc-root[data-preset=dossier] .mc-cs-folder {
  left: calc(-12 * var(--u));
  top: calc(30 * var(--u));
  width: calc(836 * var(--u));
  height: calc(688 * var(--u));
  transform: rotate(-3deg);
  border-radius: 3px calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background: radial-gradient(#0000000a 1px,#0000 1.4px) 0 0/5px 5px,linear-gradient(90deg,var(--mc-folder-s) 0 49.4%,color-mix(in srgb,var(--mc-folder-s) 82%,#5a4318) 49.4% 50%,color-mix(in srgb,var(--mc-folder-s) 96%,#5a4318) 50% 50.6%,color-mix(in srgb,var(--mc-folder-s) 94%,#fff) 50.6%);
  box-shadow: 0 2px 0 color-mix(in srgb,var(--mc-folder,#e7d4a9) 80%,#5a4318),0 30px 50px -24px #0009;
  z-index: -3;
}
.mc-root[data-preset=dossier] .mc-cs-tab {
  position: absolute;
  left: 0;
  top: calc(-27 * var(--u));
  width: calc(250 * var(--u));
  height: calc(28 * var(--u));
  background: var(--mc-folder-s);
  border-radius: calc(10 * var(--u)) calc(10 * var(--u)) 0 0;
  clip-path: polygon(0 100%,4% 0,92% 0,100% 100%);
}
.mc-root[data-preset=dossier] .mc-cs-tab span {
  position: absolute;
  left: calc(22 * var(--u));
  top: 50%;
  transform: translateY(-45%);
  font: 600 max(9px,calc(11 * var(--u))) ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace!important;
  letter-spacing: .14em;
  color: color-mix(in srgb,var(--mc-folder,#e7d4a9) 35%,#2a1e0a);
}

/* Front layer: the report sheet and its ruled cells. */
.mc-root[data-preset=dossier] .mc-paper {
  display: block;
  left: calc(46 * var(--u));
  top: calc(66 * var(--u));
  width: calc(844 * var(--u));
  height: calc(662 * var(--u));
  background: var(--mc-paper-s);
  box-shadow: 0 1px 2px #0002,-6px 16px 28px -10px #0008;
  z-index: -2;
}
.mc-root[data-preset=dossier] .mc-paper::after {
  display: none;
}
.mc-root[data-preset=dossier] .mc-cs-frame {
  left: calc(62 * var(--u));
  top: calc(82 * var(--u));
  width: calc(812 * var(--u));
  height: calc(630 * var(--u));
  border: 2px solid var(--mc-cs-line);
  z-index: -1;
}
.mc-root[data-preset=dossier] .mc-cs-rule {
  background: var(--mc-cs-line);
  z-index: -1;
}
.mc-root[data-preset=dossier] .mc-cs-r1 { left: calc(62 * var(--u)); width: calc(812 * var(--u)); top: calc(162 * var(--u)); height: 2px; }
.mc-root[data-preset=dossier] .mc-cs-r2 { left: calc(62 * var(--u)); width: calc(812 * var(--u)); top: calc(504 * var(--u)); height: 2px; }
.mc-root[data-preset=dossier] .mc-cs-r3 { left: calc(470 * var(--u)); top: calc(162 * var(--u)); width: 1px; height: calc(342 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-r4 { left: calc(680 * var(--u)); top: calc(162 * var(--u)); width: 1px; height: calc(204 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-r5 { left: calc(470 * var(--u)); width: calc(404 * var(--u)); top: calc(366 * var(--u)); height: 1px; }
.mc-root[data-preset=dossier] .mc-cs-r6 { left: calc(664 * var(--u)); top: calc(82 * var(--u)); width: 2px; height: calc(80 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-head {
  left: calc(666 * var(--u));
  top: calc(82 * var(--u));
  width: calc(208 * var(--u));
  height: calc(80 * var(--u));
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.mc-root[data-preset=dossier] .mc-cs-head>span {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  padding: 0 calc(14 * var(--u));
}
.mc-root[data-preset=dossier] .mc-cs-head>span+span {
  border-top: 1px solid var(--mc-cs-line);
}
.mc-root[data-preset=dossier] :is(.mc-cs-head,.mc-cs-head *,.mc-cs-label) {
  font-family: ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace!important;
}
.mc-root[data-preset=dossier] .mc-cs-head>span {
  font-size: max(9px,calc(10 * var(--u)));
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-cs-head b {
  font-size: max(11px,calc(15 * var(--u)));
  letter-spacing: .06em;
  color: var(--mc-ink);
}
.mc-root[data-preset=dossier] .mc-cs-head>span:first-child b {
  color: var(--mc-mark,var(--mc-accent));
}
.mc-root[data-preset=dossier] .mc-cs-label {
  font-size: max(9px,calc(9.5 * var(--u)));
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-cs-l1 { left: calc(80 * var(--u)); top: calc(174 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-l2 { left: calc(486 * var(--u)); top: calc(174 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-l3 { left: calc(696 * var(--u)); top: calc(174 * var(--u)); }
.mc-root[data-preset=dossier] .mc-cs-l4 { left: calc(486 * var(--u)); top: calc(376 * var(--u)); }

/* Header cell. */
.mc-root[data-preset=dossier] .mc-masthead {
  left: calc(80 * var(--u));
  top: calc(94 * var(--u));
  width: calc(570 * var(--u));
}
.mc-root[data-preset=dossier] .mc-issue {
  font-size: max(9px,calc(10 * var(--u)));
  letter-spacing: .18em;
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-masthead h1 {
  width: fit-content;
  max-width: 100%;
  margin-top: calc(4 * var(--u));
  font-size: max(22px,calc(36 * var(--u)));
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: -.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  background: linear-gradient(transparent 60%,var(--mc-highlight,#edcf87) 60% 94%,transparent 94%);
}
.mc-root[data-preset=dossier] .mc-masthead h1::first-letter {
  color: inherit;
}

/* Subject cell: two prints slipped under paper clips. */
.mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b) {
  display: flex;
  flex-direction: column;
  width: calc(170 * var(--u));
  padding: calc(8 * var(--u)) calc(8 * var(--u)) 0;
  background: #fffefa;
  box-shadow: 0 1px 2px #0003,0 12px 18px -8px #0007;
}
.mc-root[data-preset=dossier] .mc-dossier-a { left: calc(84 * var(--u)); top: calc(198 * var(--u)); transform: rotate(-2.5deg); z-index: 2; }
.mc-root[data-preset=dossier] .mc-dossier-b { left: calc(270 * var(--u)); top: calc(206 * var(--u)); transform: rotate(2.2deg); z-index: 3; }
.mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b) .mc-photo-window {
  flex: none;
  position: relative;
  height: calc(186 * var(--u));
  overflow: hidden;
}
.mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b) .mc-photo-window img {
  position: absolute;
  inset: 0;
}
.mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b) figcaption {
  position: static;
  display: block;
  min-height: 0;
  padding: calc(6 * var(--u)) calc(2 * var(--u)) calc(10 * var(--u));
  font-size: max(14px,calc(19 * var(--u)));
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  text-align: left;
  color: var(--mc-ink);
  background: none;
  transform: none;
}
.mc-root[data-preset=dossier] .mc-dossier-a figcaption::before,
.mc-root[data-preset=dossier] .mc-dossier-b figcaption::before {
  display: block;
  margin-bottom: 2px;
  font: 600 max(8.5px,calc(9 * var(--u)))/1.2 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  letter-spacing: .16em;
  color: var(--mc-muted);
}
/* The prints hang from the board's own clips, not the old per-photo clip. */
.mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b)::before { display: none; }
.mc-root[data-preset=dossier] .mc-dossier-a figcaption::before { content: 'SUBJECT A'; }
.mc-root[data-preset=dossier] .mc-dossier-b figcaption::before { content: 'SUBJECT B'; }
.mc-root[data-preset=dossier] .mc-cs-clip {
  width: calc(16 * var(--u));
  height: calc(54 * var(--u));
  border: max(2px,calc(3 * var(--u))) solid #8b9396;
  border-radius: calc(10 * var(--u));
  z-index: 5;
}
.mc-root[data-preset=dossier] .mc-cs-clip::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: 22%;
  bottom: -8%;
  border: max(2px,calc(3 * var(--u))) solid #8b9396;
  border-top: 0;
  border-radius: 0 0 calc(8 * var(--u)) calc(8 * var(--u));
}
.mc-root[data-preset=dossier] .mc-cs-clip1 { left: calc(200 * var(--u)); top: calc(180 * var(--u)); transform: rotate(-8deg); }
.mc-root[data-preset=dossier] .mc-cs-clip2 { left: calc(390 * var(--u)); top: calc(188 * var(--u)); transform: rotate(6deg); }
/* Without a to-do list the note and date cells run down to the table. */
.mc-root[data-preset=dossier]:not([data-calendar-mode=todo]) :is(.mc-cs-r5,.mc-cs-l4) { display: none; }
.mc-root[data-preset=dossier]:not([data-calendar-mode=todo]) .mc-cs-r4 { height: calc(342 * var(--u)); }
.mc-root[data-preset=dossier] .mc-stamp {
  display: grid;
  place-items: center;
  left: calc(352 * var(--u));
  top: calc(392 * var(--u));
  width: calc(104 * var(--u));
  height: calc(104 * var(--u));
  border: max(3px,calc(4 * var(--u))) double var(--mc-mark,var(--mc-accent));
  border-radius: 50%;
  color: var(--mc-mark,var(--mc-accent));
  text-align: center;
  transform: rotate(-14deg);
  opacity: .82;
  mix-blend-mode: multiply;
  z-index: 4;
}
.mc-root[data-preset=dossier] .mc-stamp::before {
  display: none;
}
.mc-root[data-preset=dossier] .mc-stamp>span {
  font-size: max(9px,calc(12 * var(--u)));
  font-weight: 700;
  letter-spacing: .12em;
}

/* Note cell. */
.mc-root[data-preset=dossier] .mc-note {
  left: calc(486 * var(--u));
  top: calc(196 * var(--u));
  width: calc(180 * var(--u));
  z-index: 2;
}
.mc-root[data-preset=dossier] .mc-note p {
  max-height: none;
  overflow: visible;
  font-size: max(10.5px,calc(12.5 * var(--u)));
  line-height: calc(24 * var(--u));
  background: repeating-linear-gradient(#0000 0 calc(23 * var(--u)),#0002 calc(23 * var(--u)) calc(24 * var(--u)));
}
.mc-root[data-preset=dossier] .mc-note .mc-script {
  display: block;
  max-height: none;
  overflow: visible;
  margin-top: calc(6 * var(--u));
  font-size: max(15px,calc(20 * var(--u)));
  line-height: 1.25;
  font-style: italic;
  color: var(--mc-mark,var(--mc-accent));
}

/* Date cell. */
.mc-root[data-preset=dossier][data-calendar-mode] .mc-calendar {
  display: flex;
  flex-direction: column;
  right: auto;
  bottom: auto;
  height: auto;
  min-height: 0;
  left: calc(694 * var(--u));
  top: calc(194 * var(--u));
  width: calc(166 * var(--u));
  z-index: 2;
}
.mc-root[data-preset=dossier] .mc-calendar header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: calc(6 * var(--u));
  font-size: max(9px,calc(10 * var(--u)));
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-calendar header strong {
  font-size: max(10px,calc(12 * var(--u)));
  letter-spacing: .16em;
  color: var(--mc-ink);
}
.mc-root[data-preset=dossier] .mc-calendar-grid {
  flex: none;
  font-size: max(9.5px,calc(11 * var(--u)));
  row-gap: calc(3 * var(--u));
  text-align: center;
}
.mc-root[data-preset=dossier] .mc-calendar-grid>* {
  display: grid;
  place-items: center;
  min-height: calc(18 * var(--u));
}
.mc-root[data-preset=dossier] .mc-today {
  justify-self: center;
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  border: 0;
  border-radius: 50%;
  font-weight: 700;
  color: var(--mc-ink)!important;
  background: radial-gradient(closest-side,var(--mc-highlight,#edcf87) 92%,#0000 96%);
}

/* Check-list cell: numbered rows in two columns. */
.mc-root[data-preset=dossier] .mc-todos {
  display: block;
  left: calc(486 * var(--u));
  top: calc(390 * var(--u));
  width: calc(372 * var(--u));
  z-index: 2;
}
.mc-root[data-preset=dossier] .mc-todos h2 {
  display: none;
}
.mc-root[data-preset=dossier] .mc-todos ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: calc(24 * var(--u));
  max-height: none;
  overflow: visible;
  counter-reset: mc-cs-todo;
}
.mc-root[data-preset=dossier] .mc-todos li {
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(30 * var(--u));
  padding: 0;
  font-size: max(10.5px,calc(12.5 * var(--u)));
  border-bottom: 1px solid #0002;
}
.mc-root[data-preset=dossier] .mc-todos li::before {
  content: counter(mc-cs-todo,decimal-leading-zero);
  counter-increment: mc-cs-todo;
  font: 600 max(8.5px,calc(9.5 * var(--u))) ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-todos li>span:first-child {
  display: inline-grid;
  place-items: center;
  width: calc(14 * var(--u));
  height: calc(14 * var(--u));
  border: 1.5px solid var(--mc-cs-line);
  font-size: 0;
  color: var(--mc-mark,var(--mc-accent));
}
.mc-root[data-preset=dossier] .mc-todos li.is-complete>span:first-child::after {
  content: '✓';
  font-size: max(9px,calc(10 * var(--u)));
  font-weight: 700;
}
.mc-root[data-preset=dossier] .mc-todos li.is-complete>span:last-child {
  text-decoration: line-through;
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] :is(.mc-todo-hint,.mc-todo-empty) {
  margin-top: calc(8 * var(--u))!important;
  font-size: 9.5px;
  color: var(--mc-muted);
}

/* Bottom table: three columns under a dark header row. */
.mc-root[data-preset=dossier] .mc-widgets {
  display: flex;
  left: calc(64 * var(--u));
  width: calc(808 * var(--u));
  top: calc(506 * var(--u));
  height: calc(184 * var(--u));
  gap: 0;
  z-index: 2;
}
.mc-root[data-preset=dossier] .mc-widgets>section {
  flex: 1;
  min-width: 0;
  padding: 0 calc(16 * var(--u));
}
.mc-root[data-preset=dossier] .mc-widgets>section:not([hidden])~section:not([hidden]) {
  border-left: 1px solid var(--mc-cs-line);
}
.mc-root[data-preset=dossier] .mc-widgets h2 {
  display: flex;
  align-items: baseline;
  gap: calc(8 * var(--u));
  margin: 0 calc(-16 * var(--u)) calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u));
  font-size: max(11px,calc(12.5 * var(--u)));
  color: #f3efe4;
  background: #2b3033;
  border: 0;
}
.mc-root[data-preset=dossier] .mc-widgets h2>span {
  font-style: normal;
  color: var(--mc-highlight,#edcf87);
}
.mc-root[data-preset=dossier] .mc-widgets h2 small {
  display: inline;
  margin-left: auto;
  font-size: max(9px,calc(10 * var(--u)));
  color: #c9ccc7;
}
.mc-root[data-preset=dossier] .mc-widgets :is(time,li small,.mc-empty) {
  color: var(--mc-muted);
}
.mc-root[data-preset=dossier] .mc-widgets :is(ul,.mc-banner-list) {
  overflow: hidden;
}
@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset=dossier] .mc-widgets .mc-banner-list {
    gap: 3px;
  }
}
.mc-root[data-preset=dossier] .mc-widgets li {
  border-bottom: 1px dashed #0002;
}
.mc-root[data-preset=dossier] .mc-widgets li a {
  padding: calc(3 * var(--u)) 0;
  font-size: max(10.5px,calc(12 * var(--u)));
  line-height: 1.38;
}
.mc-root[data-preset=dossier] .mc-banner-list img {
  height: calc(24 * var(--u));
}
.mc-root[data-preset=dossier] .mc-footer {
  left: calc(80 * var(--u));
  top: calc(690 * var(--u));
  font-size: max(9.5px,calc(10.5 * var(--u)));
  letter-spacing: .06em;
  color: var(--mc-muted);
  z-index: 2;
}

@media(min-width:901px) and (max-width:1200px) {
  .mc-root[data-preset=dossier] .mc-canvas {
    width: calc(100% - 64px);
    margin: 32px auto;
  }
}
/* Phones: the folder and sheet stay, the ruled cells give way to one column. */
@media(max-width:900px) {
  .mc-root[data-preset=dossier] .mc-canvas {
    --u: 1px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: calc(100% - 24px);
    aspect-ratio: auto;
    margin: 12px auto;
    padding: 64px 30px 34px;
  }
  .mc-root[data-preset=dossier] :is(.mc-cs-frame,.mc-cs-rule,.mc-cs-head,.mc-cs-label,.mc-cs-clip,.mc-stamp) {
    display: none!important;
  }
  .mc-root[data-preset=dossier] .mc-paper {
    left: 12px;
    top: 46px;
    width: calc(100% - 18px);
    height: calc(100% - 58px);
  }
  .mc-root[data-preset=dossier] .mc-cs-folder {
    left: -6px;
    top: 26px;
    width: calc(100% - 4px);
    height: calc(100% - 30px);
    transform: rotate(-1.4deg);
  }
  .mc-root[data-preset=dossier] :is(.mc-masthead,.mc-dossier-a,.mc-dossier-b,.mc-note,.mc-calendar,.mc-todos,.mc-widgets,.mc-footer) {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    transform: none;
  }
  .mc-root[data-preset=dossier] .mc-masthead { order: 1; }
  .mc-root[data-preset=dossier] .mc-dossier-photos { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 12px; order: 2; position: relative; z-index: 3; inset: auto; width: auto; height: auto!important; min-height: 0!important; margin: 0; }
  .mc-root[data-preset=dossier] .mc-dossier-a { transform: rotate(-1.5deg); }
  .mc-root[data-preset=dossier] .mc-dossier-b { transform: rotate(1.5deg); }
  .mc-root[data-preset=dossier] :is(.mc-dossier-a,.mc-dossier-b) .mc-photo-window { height: auto; aspect-ratio: .82; }
  .mc-root[data-preset=dossier] .mc-note { order: 3; }
  .mc-root[data-preset=dossier][data-calendar-mode] .mc-calendar { order: 4; align-self: stretch; position: relative; left: auto; top: auto; width: auto; height: auto!important; min-height: 0!important; }
  .mc-root[data-preset=dossier] .mc-canvas :is(.mc-dossier-a,.mc-dossier-b) { align-self: start; height: auto!important; min-height: 0!important; }
  .mc-root[data-preset=dossier] .mc-todos { order: 5; }
  .mc-root[data-preset=dossier] .mc-todos ul { grid-template-columns: 1fr; }
  .mc-root[data-preset=dossier] .mc-widgets { order: 6; flex-direction: column; gap: 22px; }
  .mc-root[data-preset=dossier] .mc-widgets>section~section { border-left: 0!important; }
  .mc-root[data-preset=dossier] .mc-widgets li a { padding: 5px 0; font-size: 13px; }
  .mc-root[data-preset=dossier] .mc-footer { order: 7; }
  .mc-root[data-preset=dossier] .mc-masthead h1 { white-space: normal; }
}

/* Dark editions on a light paper: dark ink, and cards step darker instead of lighter. */
.mc-root:is([data-preset=nightbook],[data-preset=darkroom])[data-paper-tone=light] {
  --mc-ink: #24292b;
  --mc-muted: #5b6467;
}
.mc-root[data-preset=nightbook][data-paper-tone=light] .mc-canvas {
  --mc-dk-line: color-mix(in srgb,var(--mc-nb-paper) 62%,#2f3a3e);
}
.mc-root[data-preset=nightbook][data-paper-tone=light] .mc-masthead h1 {
  color: var(--mc-ink);
}
.mc-root[data-preset=nightbook][data-paper-tone=light] .mc-note {
  background: repeating-linear-gradient(#0000 0 calc(23 * var(--u)),#0000001a calc(23 * var(--u)) calc(24 * var(--u))),color-mix(in srgb,var(--mc-nb-paper-s) 93%,#000);
}
.mc-root[data-preset=nightbook][data-paper-tone=light] .mc-note p {
  color: var(--mc-ink);
}
.mc-root[data-preset=nightbook][data-paper-tone=light] .mc-widgets {
  border-top-color: color-mix(in srgb,var(--mc-nb-paper) 55%,#2f3a3e);
}
.mc-root[data-preset=darkroom][data-paper-tone=light] .mc-canvas {
  --mc-dk-line: color-mix(in srgb,var(--mc-dr-paper) 62%,#2f3a3e);
}
.mc-root[data-preset=darkroom][data-paper-tone=light] :is(.mc-calendar,.mc-todos) {
  background: color-mix(in srgb,var(--mc-dr-paper-s) 94%,#000);
}
.mc-root[data-preset=darkroom][data-paper-tone=light] .mc-dk-tray {
  background: linear-gradient(160deg,color-mix(in srgb,var(--mc-dr-paper-s) 84%,#000),color-mix(in srgb,var(--mc-dr-paper-s) 92%,#000) 60%);
  box-shadow: inset 0 0 0 calc(7 * var(--u)) color-mix(in srgb,var(--mc-dr-paper-s) 78%,#000),inset 0 0 0 calc(8 * var(--u)) #0003,inset 0 calc(16 * var(--u)) calc(34 * var(--u)) #0003,0 18px 30px -12px #0006;
}
.mc-root[data-preset=darkroom][data-paper-tone=light] .mc-dk-tray span {
  background: color-mix(in srgb,var(--mc-dr-paper-s) 92%,#000);
}
.mc-root[data-preset=darkroom][data-paper-tone=light] .mc-note::before {
  background: var(--mc-dr-paper-s);
}
/* A dark accent turns the scrapbook sticky note's writing light. */
.mc-root[data-preset=nightbook][data-accent-tone=dark] .mc-todos,
.mc-root[data-preset=nightbook][data-accent-tone=dark] .mc-todo-hint {
  color: #f6f3ec;
}
.mc-root[data-preset=nightbook][data-accent-tone=dark] .mc-todos li {
  border-bottom-color: #ffffff2e;
}

/* Light editions on a dark paper: writing on the paper turns light; white cards keep dark ink. */
.mc-root:is([data-preset=scrapbook],[data-preset=dossier])[data-paper-tone=dark] .mc-canvas {
  --mc-ink: #eceee6;
  --mc-muted: #a9b1b3;
  color: var(--mc-ink);
}
.mc-root[data-preset=scrapbook][data-paper-tone=dark] .mc-canvas :is(.mc-publisher,.mc-layout-composition) {
  --mc-ink: #252727;
  --mc-muted: #767976;
  color: var(--mc-ink);
}
.mc-root[data-preset=scrapbook][data-paper-tone=dark] .mc-widgets h2 {
  border-bottom-color: color-mix(in srgb,var(--mc-ink) 35%,transparent);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas {
  --mc-cs-line: color-mix(in srgb,var(--mc-paper) 45%,#eceee6);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas :is(.mc-dossier-a,.mc-dossier-b) {
  --mc-ink: #282c30;
  --mc-muted: #6a7174;
  color: var(--mc-ink);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas .mc-widgets section h2 {
  background: color-mix(in srgb,var(--mc-paper) 12%,#eceee6);
  color: var(--mc-paper);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas .mc-widgets section h2 small {
  color: color-mix(in srgb,var(--mc-paper) 70%,#eceee6);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas .mc-widgets section h2>span {
  color: color-mix(in srgb,var(--mc-highlight,#edcf87) 40%,var(--mc-paper));
}
/* The polaroid title had a fixed near-black. */
.mc-root.mc-composed[data-preset=scrapbook][data-paper-tone=dark] .mc-masthead h1 {
  color: var(--mc-ink);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas :is(.mc-todos li,.mc-widgets li) {
  border-bottom-color: color-mix(in srgb,#eceee6 22%,transparent);
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas .mc-note p {
  background: repeating-linear-gradient(#0000 0 calc(23 * var(--u)),color-mix(in srgb,#eceee6 18%,transparent) calc(23 * var(--u)) calc(24 * var(--u)));
}
.mc-root[data-preset=dossier][data-paper-tone=dark] .mc-canvas .mc-stamp {
  mix-blend-mode: normal;
}

/* An empty background-art slot is plain paper for visitors; the pattern only marks it while editing. */
.mc-root:not([data-editing=on]) .mc-scene .mc-photo-window:has(>img[hidden]) {
  background: none
}
/* Without background art the publisher line sits on the paper itself. */
.mc-root.mc-composed[data-preset=scrapbook][data-paper-tone=dark] .mc-canvas:has(.mc-scene img[hidden]) .mc-publisher {
  --mc-ink: #eceee6;
  color: var(--mc-ink)
}

/* Wide screens: the right column holds its share instead of growing to its widest card,
   so the note, calendar, to-do and film keep the paper's margin. */
@media(min-width:1201px) {
  .mc-root.mc-composed[data-preset=scrapbook] .mc-layout-support {
    grid-template-columns: minmax(0,1fr)
  }
  .mc-root.mc-composed[data-preset=scrapbook] .mc-layout-day {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr)
  }
  .mc-root.mc-composed[data-preset=scrapbook] .mc-layout-film {
    min-height: 0;
    width: 100%
  }
}

/* Owner adjustments: move, scale and turn pieces on top of their designed placement.
   Values are board pixels/degrees; non-inheriting so a nested piece never moves twice. */
@property --mc-tx { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mc-ty { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mc-s { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --mc-r { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mc-unit { syntax: '<length>'; inherits: true; initial-value: 1px; }
/* Idle motion is added on top of the owner's placement, so moving or turning a piece never fights the animation. */
@property --mc-ax { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mc-ay { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --mc-ar { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --mc-as { syntax: '<number>'; inherits: false; initial-value: 1; }
.mc-root .mc-canvas > * {
  --mc-unit: calc(100cqw / 936);
}
@media(min-width:901px) {
  .mc-root [data-mc-piece] {
    translate: calc(var(--mc-tx) * var(--mc-unit) + var(--mc-ax)) calc(var(--mc-ty) * var(--mc-unit) + var(--mc-ay));
    rotate: calc((var(--mc-r) + var(--mc-ar)) * 1deg);
    scale: calc(var(--mc-s) * var(--mc-as));
  }
  .mc-root[data-editing=on] [data-mc-piece-on] {
    cursor: move;
  }
}
/* Each piece moves a little; neighbours get different motions, speeds and start points.
   The owner can switch a piece off from its selection frame (data-mc-still). */
@keyframes mc-float { 0%,100% { --mc-ay: 0px; } 50% { --mc-ay: -5px; } }
@keyframes mc-sway { 0%,100% { --mc-ar: 0; } 30% { --mc-ar: -0.9; } 70% { --mc-ar: 0.9; } }
@keyframes mc-flutter { 0%,100% { --mc-ay: 0px; --mc-ar: 0; } 20% { --mc-ay: -2.5px; --mc-ar: -0.5; } 45% { --mc-ay: 1px; --mc-ar: 0.35; } 70% { --mc-ay: -1px; --mc-ar: -0.2; } }
@keyframes mc-wiggle { 0%,70%,100% { --mc-ar: 0; } 74% { --mc-ar: -1.4; } 78% { --mc-ar: 1.2; } 82% { --mc-ar: -0.7; } 86% { --mc-ar: 0.3; } }
@keyframes mc-breathe { 0%,100% { --mc-as: 1; } 50% { --mc-as: 1.015; } }
@keyframes mc-drift { 0%,100% { --mc-ax: 0px; --mc-ay: 0px; } 33% { --mc-ax: 3px; --mc-ay: -2px; } 66% { --mc-ax: -2px; --mc-ay: 1px; } }
@media(min-width:901px) and (prefers-reduced-motion:no-preference) {
  .mc-root [data-mc-piece] { --mc-motion: none; animation: var(--mc-motion); }
  .mc-root[data-preset=scrapbook] [data-mc-piece=hero] { --mc-motion: mc-float 6.4s ease-in-out -0.4s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=note] { --mc-motion: mc-flutter 6.5s ease-in-out -2.1s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=calendar] { --mc-motion: mc-sway 9.4s ease-in-out -3.8s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=todos] { --mc-motion: mc-wiggle 9.2s ease-in-out -5.5s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=film] { --mc-motion: mc-drift 9.7s ease-in-out -7.2s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=masthead] { --mc-motion: mc-breathe 8.0s ease-in-out -8.9s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=bottom] { --mc-motion: mc-sway 7.6s ease-in-out -10.6s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=sticker] { --mc-motion: mc-wiggle 10.1s ease-in-out -2.6s infinite; }
  .mc-root[data-preset=scrapbook] [data-mc-piece=sticker_film] { --mc-motion: mc-flutter 6.1s ease-in-out -4.3s infinite; }
  .mc-root[data-preset=dossier] [data-mc-piece=subject_a] { --mc-motion: mc-sway 7.6s ease-in-out -0.4s infinite; }
  .mc-root[data-preset=dossier] [data-mc-piece=subject_b] { --mc-motion: mc-float 7.3s ease-in-out -2.1s infinite; }
  .mc-root[data-preset=dossier] [data-mc-piece=stamp] { --mc-motion: mc-wiggle 11.0s ease-in-out -3.8s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=masthead] { --mc-motion: mc-breathe 6.2s ease-in-out -0.4s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=note] { --mc-motion: mc-flutter 6.5s ease-in-out -2.1s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=bottom] { --mc-motion: mc-drift 10.6s ease-in-out -3.8s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=back] { --mc-motion: mc-sway 7.6s ease-in-out -5.5s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=hero] { --mc-motion: mc-float 7.3s ease-in-out -7.2s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=calendar] { --mc-motion: mc-wiggle 11.0s ease-in-out -8.9s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=todos] { --mc-motion: mc-flutter 5.6s ease-in-out -10.6s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=film] { --mc-motion: mc-breathe 7.1s ease-in-out -12.3s infinite; }
  .mc-root[data-preset=nightbook] [data-mc-piece=stamp] { --mc-motion: mc-sway 9.4s ease-in-out -14.0s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=film1] { --mc-motion: mc-float 6.4s ease-in-out -0.4s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=film2] { --mc-motion: mc-sway 8.5s ease-in-out -2.1s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=film3] { --mc-motion: mc-flutter 7.4s ease-in-out -3.8s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=calendar] { --mc-motion: mc-wiggle 9.2s ease-in-out -5.5s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=hero] { --mc-motion: mc-breathe 7.1s ease-in-out -7.2s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=masthead] { --mc-motion: mc-drift 10.6s ease-in-out -8.9s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=note] { --mc-motion: mc-float 6.4s ease-in-out -10.6s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=bottom] { --mc-motion: mc-sway 8.5s ease-in-out -12.3s infinite; }
  .mc-root[data-preset=darkroom] [data-mc-piece=todos] { --mc-motion: mc-flutter 7.4s ease-in-out -14.0s infinite; }
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:hero"] [data-mc-piece=hero],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:note"] [data-mc-piece=note],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:calendar"] [data-mc-piece=calendar],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:todos"] [data-mc-piece=todos],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:film"] [data-mc-piece=film],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:masthead"] [data-mc-piece=masthead],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:bottom"] [data-mc-piece=bottom],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:sticker"] [data-mc-piece=sticker],
  .mc-root[data-preset=scrapbook][data-mc-still~="scrapbook:sticker_film"] [data-mc-piece=sticker_film],
  .mc-root[data-preset=dossier][data-mc-still~="dossier:subject_a"] [data-mc-piece=subject_a],
  .mc-root[data-preset=dossier][data-mc-still~="dossier:subject_b"] [data-mc-piece=subject_b],
  .mc-root[data-preset=dossier][data-mc-still~="dossier:stamp"] [data-mc-piece=stamp],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:masthead"] [data-mc-piece=masthead],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:note"] [data-mc-piece=note],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:bottom"] [data-mc-piece=bottom],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:back"] [data-mc-piece=back],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:hero"] [data-mc-piece=hero],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:calendar"] [data-mc-piece=calendar],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:todos"] [data-mc-piece=todos],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:film"] [data-mc-piece=film],
  .mc-root[data-preset=nightbook][data-mc-still~="nightbook:stamp"] [data-mc-piece=stamp],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:film1"] [data-mc-piece=film1],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:film2"] [data-mc-piece=film2],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:film3"] [data-mc-piece=film3],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:calendar"] [data-mc-piece=calendar],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:hero"] [data-mc-piece=hero],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:masthead"] [data-mc-piece=masthead],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:note"] [data-mc-piece=note],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:bottom"] [data-mc-piece=bottom],
  .mc-root[data-preset=darkroom][data-mc-still~="darkroom:todos"] [data-mc-piece=todos],
  .mc-root[data-editing=on] [data-mc-piece].is-mc-selected { --mc-motion: none; }
}

.mc-piece-frame {
  position: fixed;
  z-index: 9998;
  border: 1.5px solid var(--mc-ui-accent);
  border-radius: 2px;
  box-shadow: 0 0 0 1px #fff8;
  pointer-events: none;
}
.mc-piece-frame[hidden] {
  display: none;
}
.mc-piece-frame :is(.mc-piece-handle,.mc-piece-rotate,.mc-piece-tools) {
  position: absolute;
  pointer-events: auto;
}
.mc-piece-handle {
  width: 12px;
  height: 12px;
  margin: -6px;
  background: var(--mc-ui-field);
  border: 1.5px solid var(--mc-ui-accent);
  border-radius: 2px;
  touch-action: none;
}
.mc-piece-rotate {
  width: 26px;
  height: 26px;
  margin: -13px;
  border-radius: 50%;
  touch-action: none;
  cursor: grab;
}
/* One turn knob above the top centre, joined to the frame by a short stem. */
.mc-piece-frame .mc-piece-rotate[data-corner=n] {
  left: 50%;
  top: -30px;
  width: 22px;
  height: 22px;
  margin: 0 0 0 -11px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M19 12a7 7 0 1 1-2.05-4.95' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M19 12a7 7 0 1 1-2.05-4.95' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M17.5 3.5v4.2h-4.2' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.5 3.5v4.2h-4.2' fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 12 12, grab;
}
.mc-piece-frame.is-busy .mc-piece-rotate[data-corner=n] {
  cursor: grabbing;
}
.mc-piece-rotate::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1.5px;
  height: 8px;
  margin-left: -.75px;
  background: var(--mc-ui-accent);
}
.mc-piece-rotate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--mc-ui-accent);
  background: var(--mc-ui-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M19 12a7 7 0 1 1-2.05-4.95M17.5 3.5v4.2h-4.2' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
  transition: transform .15s;
}
.mc-piece-rotate:hover::after {
  transform: scale(1.12);
}
.mc-piece-frame [data-corner=nw] { left: 0; top: 0; cursor: nwse-resize; }
.mc-piece-frame [data-corner=ne] { left: 100%; top: 0; cursor: nesw-resize; }
.mc-piece-frame [data-corner=se] { left: 100%; top: 100%; cursor: nwse-resize; }
.mc-piece-frame [data-corner=sw] { left: 0; top: 100%; cursor: nesw-resize; }
.mc-piece-tools {
  left: 50%;
  top: calc(100% + 10px);
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.mc-piece-tools button {
  padding: 3px 10px;
  border: 0;
  border-radius: 999px;
  font: 600 11px/1.4 var(--content-font-family,sans-serif);
  color: var(--mc-ui-accent-text);
  background: var(--mc-ui-accent-bg);
  white-space: nowrap;
  cursor: pointer;
}
.mc-piece-tools button[hidden] {
  display: none;
}
.mc-piece-motion[aria-pressed=false] {
  color: var(--mc-ui-secondary-text);
  background: var(--mc-ui-secondary-bg);
  box-shadow: inset 0 0 0 1px var(--mc-ui-field-line);
}
.mc-piece-frame.is-busy .mc-piece-tools {
  display: none;
}

/* Saved mains: one row per main, the main in use and the one being edited are marked. */
/* The list folds away so a long list of mains does not push the other settings down. */
.mc-editor .mc-main-fold {
  margin: 8px 0;
  padding: 0;
  border: 1px solid var(--mc-ui-soft-line);
  border-radius: 6px;
}
.mc-editor .mc-main-fold summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  font-size: 12.5px;
  list-style: none;
}
.mc-editor .mc-main-fold summary::-webkit-details-marker {
  display: none;
}
.mc-editor .mc-main-fold summary::after {
  content: "";
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin: 0 3px 3px auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .55;
  transform: rotate(45deg);
}
.mc-editor .mc-main-fold[open] summary::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
.mc-editor .mc-main-fold[open] summary {
  border-bottom: 1px solid var(--mc-ui-soft-line);
}
.mc-editor .mc-main-fold summary span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
  color: var(--mc-ui-muted);
}
.mc-editor .mc-main-fold .mc-main-list {
  margin: 0;
  max-height: 260px;
  overflow-y: auto;
  border-top: 0;
}
.mc-editor .mc-main-fold .mc-main-list li:last-child {
  border-bottom: 0;
}
.mc-editor .mc-main-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
  border-top: 1px solid var(--mc-ui-soft-line);
}
.mc-editor .mc-main-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 4px;
  border-bottom: 1px solid var(--mc-ui-soft-line);
}
.mc-editor .mc-main-list li.is-current {
  background: var(--mc-ui-accent-soft);
}
.mc-editor .mc-main-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.mc-editor .mc-main-label em {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  font: 600 10.5px/1.5 inherit;
  font-style: normal;
  color: #fff;
  background: #2f8a56;
}
.mc-editor .mc-main-label em.is-editing {
  background: var(--mc-ui-accent);
}
.mc-editor .mc-main-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.mc-editor .mc-main-actions :is(a,button),.mc-editor .mc-main-new {
  padding: 3px 8px;
  border: 1px solid var(--mc-ui-field-line);
  border-radius: 6px;
  font-size: 12px;
  color: var(--mc-ui-secondary-text);
  background: var(--mc-ui-secondary-bg);
  text-decoration: none;
  cursor: pointer;
}
.mc-editor .mc-main-actions [data-mc-main-action=delete] {
  color: #b23a2e;
}
.mc-editor .mc-main-new {
  width: 100%;
  padding: 7px;
}
.mc-editor .mc-main-new:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.mc-edit-actions .mc-main-note {
  margin: 0 0 6px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #7a4a00;
  background: #fff3d6;
}

/* Bottom cells that show a board: a live board view or a square-thumbnail gallery that fills the cell. */
.mc-root .mc-widgets>section:is(.is-frame,.is-gallery) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mc-root .mc-widgets>section:is(.is-frame,.is-gallery) h2 {
  flex-shrink: 0;
}
.mc-frame {
  flex: 1;
  min-height: 0;
}
.mc-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}
.mc-gallery {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 4px;
  align-content: start;
  overflow: auto;
}
.mc-gallery a {
  display: block;
  min-width: 0;
}
.mc-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
/* The to-do spot beside the calendar can hold a board too ('calendar + board'). */
.mc-root .mc-todos:is(.is-frame,.is-gallery) {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mc-root .mc-todos:is(.is-frame,.is-gallery) h2 {
  flex-shrink: 0;
}
.mc-root .mc-todos h2 a {
  color: inherit;
}
.mc-root .mc-todos .mc-frame {
  min-height: 160px;
}
.mc-root .mc-todos .mc-gallery {
  grid-template-columns: repeat(2,minmax(0,1fr));
}
/* 'Board only': the calendar spot holds the board instead of the month grid. */
.mc-root .mc-calendar.is-board {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mc-root .mc-calendar.is-board header {
  flex-shrink: 0;
}
.mc-root .mc-calendar.is-board header a {
  color: inherit;
}
.mc-root .mc-calendar.is-board .mc-frame {
  min-height: 190px;
}
/* Board only: the board also takes the room the hidden to-do list leaves (darkroom keeps the calendar size: its title sign sits right below). */
.mc-root.mc-composed[data-preset=scrapbook] .mc-layout-day:has(.mc-calendar.is-board) {
  grid-template-columns: minmax(0,1fr);
}
/* Notes grow only where their paper has room; past that they are cut inside the paper instead of covering other pieces.
   The dossier note may run down to the table when no to-do list sits below it. */
@media(min-width:901px) and (min-height:651px) {
  .mc-root[data-preset=dossier][data-calendar-mode] .mc-calendar.is-board {
    height: calc(298 * var(--u));
  }
  .mc-root[data-preset=nightbook] .mc-calendar.is-board {
    height: calc(490 * var(--u));
  }
  .mc-root[data-preset] .mc-note p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mc-root.mc-composed[data-preset=scrapbook] .mc-note p { -webkit-line-clamp: 5; }
  .mc-root[data-preset=dossier] .mc-note p { -webkit-line-clamp: 5; }
  .mc-root[data-preset=dossier]:not([data-calendar-mode=todo]) .mc-note p { -webkit-line-clamp: 10; }
  .mc-root[data-preset=nightbook] .mc-note p { -webkit-line-clamp: 4; }
  .mc-root[data-preset=darkroom] .mc-note p { -webkit-line-clamp: 2; }
}
/* Scrapbook lists are inset 12px; keep the board views in line with them. */
.mc-root.mc-composed[data-preset=scrapbook] .mc-widgets :is(.mc-frame,.mc-gallery) {
  margin: 0 12px;
}
/* While editing, the frame must not swallow the click that opens the cell's settings. */
.mc-root[data-editing=on] .mc-frame iframe {
  pointer-events: none;
}
/* The night editions size the cell row to its content; a board view needs a fixed box above the footer. */
@media(min-width:901px) and (min-height:651px) {
  .mc-root:is([data-preset=nightbook],[data-preset=darkroom]) .mc-widgets:has(.is-frame,.is-gallery) {
    bottom: calc(34 * var(--u));
  }
}
@media(max-width:900px),(max-height:650px) {
  .mc-root .mc-frame {
    flex: none;
    height: 360px;
  }
  .mc-root .mc-gallery {
    flex: none;
    overflow: visible;
  }
}

/* Photos filled from a board: a link laid over the photo as a sibling, so the photo window keeps its structure. */
.mc-photo-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}
.mc-photo-link:focus-visible {
  outline: 2px solid var(--mc-accent);
  outline-offset: -3px;
}
.mc-root[data-editing=on] .mc-photo-link {
  pointer-events: none;
}