/* ichie sheet / book */
:root {
  --display: "Kaisei Decol", "Hiragino Mincho ProN", serif;
  --hand: "Yomogi", "Hiragino Maru Gothic ProN", cursive;
  --ui: "Zen Maru Gothic", "Yu Gothic", sans-serif;
}
.sheet-toolbar { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; align-items:center; }
.sheet-wrap { margin: 0 auto 16px; }
.book-pages { display:grid; gap:12px; }
.book-empty { text-align:center; padding:40px 16px; color:#6d4d5c; }
.page-sheet[hidden] { display:none !important; }
.match-deck { display:grid; justify-items:center; gap:12px; }
.thumb { cursor:pointer; font:inherit; color:inherit; }
@media print {
  .topbar, .preview-bar, .share-panel, .sheet-toolbar, .binder, .nav, .flash, .errors, .panel.preview-bar { display:none !important; }
  .shell { width:100%; margin:0; padding:0; }
  .spread { display:grid !important; grid-template-columns:1fr 1fr !important; }
  .spread .leaf { display:block !important; break-inside:avoid; }
}
/* from styles.css L314-635 */
.spread {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.spread[data-face="omote"] .leaf.ura,
.spread[data-face="ura"] .leaf.omote { display: none; }

.spread[data-face="omote"],
.spread[data-face="ura"] { grid-template-columns: 1fr; }

.leaf {
  --sheet-bg: #fff6f4;
  --sheet-line: #efc3d0;
  --sheet-accent: #d36b8a;
  --sheet-tape: #f6b3c5;
  --rule: #f3d3dc;
  position: relative;
  width: 100%;
  aspect-ratio: 105 / 148;
  background: var(--sheet-bg);
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 16px 28px -22px #8d5a6a, 0 0 0 1px #ead0d6;
}

.leaf::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid var(--sheet-line);
  pointer-events: none;
}

.leaf[data-theme="sakura"] {
  --sheet-bg: #fff6f4;
  --sheet-line: #efc3d0;
  --sheet-accent: #d36b8a;
  --sheet-tape: #f6b3c5;
  --rule: #f3d3dc;
}

.leaf[data-theme="sky"] {
  --sheet-bg: #f4f8ff;
  --sheet-line: #c5d8f3;
  --sheet-accent: #5e8ec8;
  --sheet-tape: #9ec4ea;
  --rule: #d7e4f4;
}

.leaf[data-theme="lemon"] {
  --sheet-bg: #fff9e8;
  --sheet-line: #efd7a2;
  --sheet-accent: #d2a14a;
  --sheet-tape: #f0d27a;
  --rule: #f3e3b8;
}

.leaf[data-theme="grape"] {
  --sheet-bg: #f8f3ff;
  --sheet-line: #d8c7ef;
  --sheet-accent: #8d73b8;
  --sheet-tape: #cbb3ea;
  --rule: #e6dcf3;
}

.leaf[data-theme="mizu"] {
  --sheet-bg: #f3fbff;
  --sheet-line: #b7dceb;
  --sheet-accent: #4ea0b8;
  --sheet-tape: #9ad3e4;
  --rule: #cfe8f1;
}

.leaf[data-theme="mizu"] .grain {
  background-image: radial-gradient(#9ad3e4 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: 0.45;
}

.leaf[data-theme="check"] {
  --sheet-bg: #fff8f2;
  --sheet-line: #e2c4a8;
  --sheet-accent: #c47b4a;
  --sheet-tape: #e8b98a;
  --rule: #efd8c2;
}

.leaf[data-theme="check"] .grain {
  background-image:
    linear-gradient(rgba(196, 123, 74, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196, 123, 74, 0.08) 1px, transparent 1px);
  background-size: 12px 12px;
}

.leaf[data-theme="hoshi"] {
  --sheet-bg: #f4f2ff;
  --sheet-line: #c5c0e8;
  --sheet-accent: #6a63b5;
  --sheet-tape: #a8a1de;
  --rule: #ddd8f4;
}

.leaf[data-theme="hoshi"] .grain {
  background-image:
    radial-gradient(#6a63b5 0.8px, transparent 1px),
    radial-gradient(#a8a1de 0.7px, transparent 1px);
  background-size: 18px 18px, 28px 22px;
  background-position: 0 0, 10px 8px;
  opacity: 0.55;
}

.grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(160, 110, 130, 0.05) 0.55px, transparent 0.8px);
  background-size: 6px 7px;
  pointer-events: none;
}

.holes {
  position: absolute;
  top: 22px;
  bottom: 22px;
  width: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 2;
}

.leaf.omote .holes { left: 7px; }
.leaf.ura .holes { right: 7px; }

.holes span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #f3e4ea;
  box-shadow: inset 0 0 0 1.5px #e4c1cc;
}

.tape {
  position: absolute;
  width: 58px;
  height: 14px;
  background: var(--sheet-tape);
  opacity: 0.78;
  z-index: 2;
}

.tape.tl { top: 9px; left: 34px; transform: rotate(-8deg); }
.tape.tr { top: 11px; right: 16px; transform: rotate(8deg); }
.leaf.ura .tape.tl { left: auto; right: 34px; transform: rotate(8deg); }
.leaf.ura .tape.tr { right: auto; left: 16px; transform: rotate(-8deg); }

.leaf-inner {
  position: relative;
  height: 100%;
  padding: 12px 11px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.leaf.ura .leaf-inner { padding: 14px 26px 10px 12px; }

.face-label {
  position: absolute;
  top: 12px;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--sheet-accent);
}

.leaf.omote .face-label { right: 14px; }
.leaf.ura .face-label { left: 14px; }

.sheet-kicker {
  font-size: 8px;
  letter-spacing: 0.22em;
  color: var(--sheet-accent);
}

.sheet-title {
  font-family: var(--display);
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.08em;
}

.sheet-poem {
  font-size: 10px;
  color: #8a5d6d;
  margin: 0;
  line-height: 1.5;
}

.omote-top {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 8px;
  align-items: start;
}

.photo-frame {
  width: 78px;
  height: 96px;
  border: 1px solid var(--sheet-line);
  background: repeating-linear-gradient(135deg, #f7dde4 0px, #f7dde4 6px, #fff6f4 6px, #fff6f4 12px);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-frame .ph {
  font-size: 9px;
  color: #b08493;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.5;
}

.name-block .k {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: #9a6c7c;
}

.val {
  font-family: var(--hand);
  font-size: 13px;
  min-height: 18px;
  border-bottom: 1px dashed var(--sheet-line);
  line-height: 1.35;
  word-break: break-word;
}

.name-block .val.name {
  font-size: 20px;
  min-height: 26px;
}

.meta-row {
  display: grid;
  grid-template-columns: 1.2fr 0.7fr 0.9fr;
  gap: 6px;
}

.likes-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}

.ruled {
  border-bottom: 1px dashed var(--rule);
  min-height: 26px;
}

.item .k {
  font-size: 8px;
  letter-spacing: 0.08em;
  color: #9a6c7c;
}

.stamp {
  position: absolute;
  right: 18px;
  bottom: 46px;
  width: 54px;
  height: 54px;
  border: 2px solid #d36b8a;
  color: #d36b8a;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 11px;
  transform: rotate(-14deg);
  background: rgba(255, 255, 255, 0.42);
}

.stamp[hidden] {
  display: none;
}

.spread.is-export {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  max-width: none;
}

.spread.is-export .leaf {
  display: block !important;
}

.leaf.ura .stamp { right: 30px; }

.deco {
  position: absolute;
  pointer-events: none;
  color: var(--sheet-accent);
  opacity: 0.75;
}

.sheet-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #9a6c7c;
}

/* from styles.css L637-720 */
.book-stage {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
}

.binder {
  background: linear-gradient(180deg, #d98aa0, #c56d88);
  border-radius: 16px 8px 8px 16px;
  min-height: 420px;
  padding: 22px 14px;
  color: #fff;
  box-shadow: 10px 16px 30px -18px #8d4d63;
  position: relative;
}

.binder::before {
  content: "";
  position: absolute;
  inset: 14px 12px 14px auto;
  width: 10px;
  border-radius: 8px;
  background: repeating-linear-gradient(#ffffff 0px, #ffffff 8px, transparent 8px, transparent 26px);
}

.binder h3 {
  font-family: var(--display);
  margin: 0 0 8px;
  font-size: 22px;
}

.binder p { margin: 0; font-size: 12px; line-height: 1.7; opacity: 0.9; }

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

.thumb {
  text-align: left;
  width: 100%;
  background: rgba(255, 252, 249, 0.86);
  border: 1.5px solid #efd3dc;
  border-radius: 14px;
  padding: 10px 12px;
}

.thumb[data-active="true"] {
  border-color: #d36b8a;
  box-shadow: 0 0 0 2px #f8d5de;
}

.thumb strong { display: block; font-size: 14px; }
.thumb span { font-size: 11px; color: #8a6b7a; }

.empty-book { padding: 40px 18px; text-align: center; color: #6d4d5c; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: #4a3048;
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  z-index: 20;
}

.qr {
  width: 120px;
  height: 120px;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  display: block;
}

.qr-wrap {
  display: grid;
  gap: 6px;
  justify-items: start;
}

.qr-wrap .note {
  margin: 0;

/* from styles.css L776-933 */
}

.corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 1px solid var(--sheet-line);
  pointer-events: none;
}

.leaf.omote .corner.bl { left: 24px; bottom: 10px; border-right: 0; border-top: 0; }
.leaf.omote .corner.tr { right: 10px; top: 28px; border-left: 0; border-bottom: 0; }
.leaf.ura .corner.bl { right: 24px; bottom: 10px; border-left: 0; border-top: 0; }

@media (max-width: 960px) {
  .hero,
  .layout-split,
  .feature-grid,
  .book-stage,
  .field-pair { grid-template-columns: 1fr; }

  .preview-wrap { position: static; }

  .binder {
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
  }

  .binder::before {
    inset: 10px auto 10px 12px;
    width: 8px;
    background: repeating-linear-gradient(#ffffff 0px, #ffffff 6px, transparent 6px, transparent 20px);
  }

  .binder h3,
  .binder p {
    padding-left: 18px;
  }

  .book-stage > div > .layout-split,
  .book-pages {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .thumb-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    order: -1;
  }

  .thumb {
    flex: 0 0 auto;
    min-width: 132px;
    max-width: 180px;
  }

  .thumb-row {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .thumb-ops {
    display: flex;
    gap: 4px;
  }

  .invite-box .qr {
    width: 96px;
    height: 96px;
  }

  .invite-box .qr svg {
    width: 80px !important;
    height: 80px !important;
  }

  .face-hint { display: block; }

  .face-hint[hidden] { display: none !important; }

  .spread {
    grid-template-columns: 1fr;
    max-width: 360px;
    margin: 0 auto;
  }

  .spread[data-face="both"] {
    grid-template-columns: 1fr;
    max-width: 360px;
  }

  .spread[data-face="both"][data-flip="omote"] .leaf.ura,
  .spread[data-face="both"][data-flip="ura"] .leaf.omote {
    display: none;
  }

  .spread[data-face="both"] .leaf {
    cursor: pointer;
  }

  .spread.is-export,
  .spread.is-export[data-flip] {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }

  .spread.is-export .leaf {
    display: block !important;
  }
}

.face-hint { display: none; margin: 0 0 8px; }

.face-hint[hidden] { display: none !important; }

.face-hint [data-flip-badge] {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border: 1px solid #efc3cf;
  border-radius: 999px;
  background: #fff8fb;
  font-size: 11px;
  color: #c25778;
}

.stamp-row {
  position: absolute;
  left: 18px;
  bottom: 42px;
  display: flex;
  gap: 8px;
  z-index: 3;
  pointer-events: none;
}

.deco-stamp {
  border: 1.5px solid var(--sheet-accent);
  color: var(--sheet-accent);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-family: var(--display);
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(calc(-8deg + var(--i) * 10deg));
}

/* from styles.css L1020-1160 */

.match-stage {
  width: min(360px, 100%);
  transition: transform 0.18s ease, opacity 0.18s ease;
  touch-action: pan-y;
}

.match-stage.is-out-left {
  transform: translateX(-28%) rotate(-4deg);
  opacity: 0;
}

.match-stage.is-out-right {
  transform: translateX(28%) rotate(4deg);
  opacity: 0;
}

.match-stage.is-in-left { animation: match-in-left 0.22s ease; }
.match-stage.is-in-right { animation: match-in-right 0.22s ease; }

@keyframes match-in-left {
  from { transform: translateX(-18%) rotate(-3deg); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

@keyframes match-in-right {
  from { transform: translateX(18%) rotate(3deg); opacity: 0.2; }
  to { transform: none; opacity: 1; }
}

.match-card {
  --sheet-accent: #d36b8a;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: #fffaf8;
  border: 1.5px solid #efd3dc;
  box-shadow: 0 18px 34px -24px #8d5a6a;
  user-select: none;
}

.match-card[data-theme="sky"] { --sheet-accent: #5e8ec8; border-color: #c5d8f3; }
.match-card[data-theme="lemon"] { --sheet-accent: #d2a14a; border-color: #efd7a2; }
.match-card[data-theme="grape"] { --sheet-accent: #8d73b8; border-color: #d8c7ef; }
.match-card[data-theme="mizu"] { --sheet-accent: #4ea0b8; border-color: #b7dceb; }
.match-card[data-theme="check"] { --sheet-accent: #c47b4a; border-color: #e2c4a8; }
.match-card[data-theme="hoshi"] { --sheet-accent: #6a63b5; border-color: #c5c0e8; }

.match-media {
  position: relative;
  aspect-ratio: 3 / 3.6;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.55), transparent 40%),
    linear-gradient(160deg, #ffe4ee, #f7ebe3 55%, #e8f2ff);
}

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

.match-photo.is-empty {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 72px;
  color: var(--sheet-accent);
  letter-spacing: 0.08em;
}

.match-role {
  position: absolute;
  left: 12px;
  top: 12px;
  background: rgba(255, 252, 249, 0.9);
  border: 1px solid #efd3dc;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #6d4d5c;
}

.match-body {
  padding: 14px 16px 16px;
  display: grid;
  gap: 8px;
}

.match-name {
  margin: 0;
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.04em;
}

.match-nick {
  font-size: 14px;
  color: #8a6b7a;
  font-family: var(--ui);
  margin-left: 4px;
}

.match-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.match-chip {
  border: 1px solid #efc3cf;
  color: var(--sheet-accent);
  background: #fff;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
}

.match-blurb {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #6d4d5c;
  min-height: 2.8em;
}

.match-note {
  margin: 0;
  font-size: 12px;
  color: #9a6c7c;
  border-top: 1px dashed #efd3dc;
  padding-top: 8px;
}

.match-count {
  margin: 0;
  font-family: var(--display);
  letter-spacing: 0.12em;
  color: #8a6b7a;
}

.view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.view-toggle .chip[data-active="true"] {
  background: #d36b8a;
  color: #fff;
  border-color: #c25778;
}

.match-deck {
  display: grid;
  gap: 12px;
  justify-items: center;
  margin-bottom: 8px;
  outline: none;
}