/* クラフト（工作）型紙：/<slug>/craft/（作り方・3D見本）と /<slug>/craft/print.html（A4 型紙） */
:root {
  --kraft: #c79f72;
  --kraft-in: #e9a85a;
}

/* ---------- 印刷ページ ---------- */
.cp-body {
  --paper: var(--kraft);
  margin: 0;
  background: #4a423b;
  font-family: 'Zen Kaku Gothic New', sans-serif;
  color: #1d150f;
  padding: 64px 12px 40px;
}
.cp-body.cp-white {
  --paper: #fff;
}
.pp {
  fill: var(--paper, #fff);
}
.ps {
  stroke: var(--paper, #fff);
}
.cp-tool {
  position: fixed;
  inset: 0 0 auto;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  background: #1d150f;
  color: #fff;
  font-size: 14px;
}
.cp-tool a {
  color: #ffd27a;
}
.cp-tool span {
  font-weight: 700;
  flex: 1 1 auto;
}
.cp-tool button {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 6px 16px;
  background: #ff8a1f;
  color: #1d150f;
  cursor: pointer;
}
.cp-tool label {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  cursor: pointer;
}
.cp-note {
  max-width: 210mm;
  margin: 0 auto 14px;
  color: #f3e6d6;
  font-size: 14px;
}
.cp {
  position: relative;
  width: min(210mm, 100%);
  aspect-ratio: 210 / 297;
  margin: 0 auto 24px;
  background: var(--paper);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
/* クラフト紙の繊維（画面だけ） */
.cp::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .18' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E");
}
.cp-white .cp::after {
  display: none;
}
.cp-svg {
  display: block;
  width: 100%;
  height: 100%;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  .cp-body {
    --paper: #fff;
    background: none;
    padding: 0;
  }
  .cp-tool,
  .cp-note {
    display: none;
  }
  .cp {
    width: 210mm;
    height: 297mm;
    aspect-ratio: auto;
    margin: 0;
    box-shadow: none;
    background: none;
    break-after: page;
  }
  .cp:last-of-type {
    break-after: auto;
  }
  .cp::after {
    display: none;
  }
}

/* ---------- 作り方のページ ---------- */
.cr-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
@media (max-width: 760px) {
  .cr-row {
    grid-template-columns: 1fr;
  }
}
.cr-stage {
  position: relative;
  border: var(--bw, 3px) solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #3b2a5c 0%, #1c1430 60%, #0e0a18 100%);
  box-shadow: 6px 6px 0 var(--ink);
}
.cr-stage-l {
  position: absolute;
  left: 10px;
  bottom: 8px;
  font-size: 11px;
  color: #d9cbe8;
  opacity: 0.8;
}
.cr-3d {
  --kraft: #c79f72;
  height: 340px;
  display: grid;
  place-items: center;
  perspective: 900px;
}
.cr-3d .pp,
.cr-3d .pp-bg {
  fill: var(--kraft);
}
.cr-3d .ps {
  stroke: var(--kraft);
}
.cr-spin {
  position: relative;
  transform-style: preserve-3d;
  animation: cr-spin 16s linear infinite;
}
.cr-stage:hover .cr-spin {
  animation-play-state: paused;
}
@keyframes cr-spin {
  from {
    transform: rotateX(-12deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-12deg) rotateY(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-spin {
    animation: none;
    transform: rotateX(-12deg) rotateY(-30deg);
  }
}

/* ランタン */
.cr-lan .cr-spin {
  width: 120px;
  height: 248px;
}
.cr-face {
  position: absolute;
  inset: 0;
  transform: rotateY(calc(var(--i) * 90deg)) translateZ(60px);
  transform-style: preserve-3d;
}
.cr-face svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.cr-face svg.bk {
  transform: rotateY(180deg);
}
.cr-3d .pp-bk {
  fill: var(--kraft-in);
}
.cr-glow,
.cr-glow::after {
  position: absolute;
  left: 50%;
  top: 58%;
  width: 150px;
  height: 190px;
  margin: -95px 0 0 -75px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff6c8 0%, #ffb340 35%, rgba(255, 120, 20, 0.45) 65%, rgba(255, 100, 0, 0) 100%);
  animation: cr-flicker 2.4s ease-in-out infinite alternate;
}
.cr-glow::after {
  content: '';
  left: 0;
  top: 0;
  margin: 0;
  transform: rotateY(90deg);
}
@keyframes cr-flicker {
  0% {
    opacity: 0.85;
  }
  45% {
    opacity: 1;
  }
  60% {
    opacity: 0.78;
  }
  100% {
    opacity: 0.95;
  }
}

/* おばけ屋敷 */
.cr-house {
  --k: 1.9px;
}
.cr-house .cr-spin {
  width: 0;
  height: 0;
  margin-top: 40px;
}
.cr-hf {
  position: absolute;
  backface-visibility: hidden;
}
.cr-hf svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hf-front,
.hf-back {
  width: calc(var(--w) * var(--k));
  height: calc((var(--h) + var(--g)) * var(--k));
  left: calc(var(--w) * var(--k) / -2);
  top: calc((var(--h) + var(--g)) * var(--k) / -2);
}
.hf-front {
  transform: translate3d(0, calc(var(--g) * var(--k) / -2), calc(var(--d) * var(--k) / 2));
}
.hf-back {
  transform: translate3d(0, calc(var(--g) * var(--k) / -2), calc(var(--d) * var(--k) / -2)) rotateY(180deg);
}
.hf-right,
.hf-left {
  width: calc(var(--d) * var(--k));
  height: calc(var(--h) * var(--k));
  left: calc(var(--d) * var(--k) / -2);
  top: calc(var(--h) * var(--k) / -2);
}
.hf-right {
  transform: translate3d(calc(var(--w) * var(--k) / 2), 0, 0) rotateY(90deg);
}
.hf-left {
  transform: translate3d(calc(var(--w) * var(--k) / -2), 0, 0) rotateY(-90deg);
}
.hf-roof1,
.hf-roof2 {
  width: calc(var(--d) * var(--k));
  height: calc(var(--s) * var(--k));
  left: calc(var(--d) * var(--k) / -2);
  top: calc(var(--s) * var(--k) / -2);
  filter: brightness(0.92);
}
.hf-roof1 {
  transform: translate3d(calc(var(--w) * var(--k) / 4), calc((var(--h) + var(--g)) * var(--k) / -2), 0) rotateY(90deg) rotateX(var(--pitch));
}
.hf-roof2 {
  transform: translate3d(calc(var(--w) * var(--k) / -4), calc((var(--h) + var(--g)) * var(--k) / -2), 0) rotateY(-90deg) rotateX(var(--pitch));
}
.hf-right,
.hf-left {
  filter: brightness(0.86);
}

/* ガーランド */
.cr-gar {
  perspective: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 0 12px;
}
.cr-rope {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols, 9), minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  padding-top: 4px;
}
.cr-rope > svg {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 22px;
  overflow: visible;
}
.cr-flag {
  transform-origin: 50% 0;
  translate: 0 var(--y, 0);
  animation: cr-swing 3.2s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.37s);
}
.cr-flag svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
@keyframes cr-swing {
  from {
    rotate: -5deg;
  }
  to {
    rotate: 5deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-flag {
    animation: none;
  }
}

.cr-catch {
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 12px;
}
.cr-spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}
.cr-spec div {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 6px 10px;
  background: var(--card, #fff);
}
.cr-spec dt {
  font-size: 11px;
  color: var(--ink3);
}
.cr-spec dd {
  margin: 0;
  font-weight: 700;
}
.cr-lv {
  color: #ff8a1f;
  letter-spacing: 2px;
}
.cr-lv i {
  font-style: normal;
  color: var(--ink3);
  opacity: 0.4;
}
.cr-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.cr-more {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 14px;
  background: var(--card, #fff);
}
.cr-more summary {
  cursor: pointer;
  font-weight: 700;
}
.cr-tools {
  margin: 10px 0;
  padding-left: 1.2em;
}
.cr-steps {
  margin: 0;
  padding-left: 1.4em;
}
.cr-steps li,
.cr-ph li {
  margin: 0 0 8px;
}
.cr-steps p,
.cr-ph p {
  margin: 0;
}
.cr-steps .en-t,
.cr-ph .en-t {
  font-weight: 700;
}
.cr-steps .ja-t,
.cr-ph .ja-t {
  font-size: 14px;
  color: var(--ink2);
}
.cr-steps.hide-ja .ja-t,
.cr-ph.hide-ja .ja-t {
  display: none;
}
.cr-tip {
  font-size: 14px;
  margin: 10px 0 4px;
}
.cr-ph {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 8px;
}
.cr-ph li {
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0;
  background: var(--card, #fff);
}
.cr-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(46%, 150px), 1fr));
  gap: 12px;
}
.cr-thumbs a {
  display: block;
  text-decoration: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.cr-thumbs img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--kraft);
  margin-bottom: 4px;
}
.cr-thumbs a.noimg::before {
  content: '✂️';
  display: grid;
  place-items: center;
  aspect-ratio: 210 / 297;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--kraft);
  font-size: 32px;
  margin-bottom: 4px;
}
.cr-thumbs a.noimg img {
  display: none;
}
.cr-tips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 12px;
}
.cr-tips > div {
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--card, #fff);
}
.cr-tips p {
  margin: 6px 0 0;
  font-size: 14px;
}

/* 行事ごとの見本の背景 */
.cr-th-christmas .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #1f5c47 0%, #0f3428 60%, #071a12 100%);
}
.cr-th-valentine .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #6a2141 0%, #3d0f24 60%, #1f0613 100%);
}
.cr-th-easter .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #3c6a8a 0%, #234560 60%, #13283a 100%);
}
.cr-th-thanksgiving .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #6b3a1a 0%, #3e200d 60%, #1e0f05 100%);
}

/* ぽち袋・紅包（表と裏がくるっと返る） */
.cr-pouch {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  perspective: 900px;
}
.cr-card {
  position: relative;
  width: 118px;
  height: 200px;
  transform-style: preserve-3d;
  animation: cr-flip 7s ease-in-out infinite;
  animation-delay: calc(var(--i) * -3.5s);
}
.cr-card svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.35));
}
.cr-card svg.bk {
  transform: rotateY(180deg);
}
@keyframes cr-flip {
  0%, 38% {
    transform: rotateY(-14deg);
  }
  50%, 88% {
    transform: rotateY(166deg);
  }
  100% {
    transform: rotateY(346deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cr-card {
    animation: none;
  }
}
/* 短冊 */
.cr-tz .cr-rope {
  max-width: 300px;
  margin: 0 auto;
  gap: 10px;
}
.cr-th-lunar .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #7a1a14 0%, #4a0d0a 60%, #220504 100%);
}
.cr-th-tanabata .cr-stage,
.cr-th-tsukimi .cr-stage {
  background: radial-gradient(120% 90% at 50% 30%, #23336b 0%, #131d45 60%, #080c22 100%);
}