/* らくがき（public/doodle.js）。「らくがきにする」ボタン・作っている間のクレヨン・「もとの写真」切り替え */
.dd-make{display:inline-flex;align-items:center;gap:4px;border-radius:14px;background:var(--y);color:var(--ink);border:2px solid var(--ink);font-weight:900;font-size:11px;line-height:1;padding:5px 9px 5px 7px;box-shadow:0 2px 6px #0002;cursor:pointer}
.dd-make svg{width:14px;height:14px;flex:none}
.dd-make:disabled{opacity:1;cursor:progress}
.dd-make:active{transform:scale(.96)}
/* 場所カード：左下（「アルバムに入れる」は左上） */
.sc-shot .dd-make{position:absolute;left:6px;bottom:28px;z-index:2}
/* ふたりログのプリント：写真の下に小さく */
.day-prints .print-w .dd-make{position:relative;margin:8px 0 0 2px;z-index:2}
.day-prints .print-w:nth-child(even) .dd-make{margin-top:8px}

/* もとの写真 ⇄ らくがき */
.dd-toggle{position:absolute;right:8px;bottom:30px;z-index:3;border-radius:12px;background:#fffffff0;color:var(--ink);font-weight:800;font-size:11px;line-height:1;padding:6px 10px;box-shadow:0 2px 8px #0003;cursor:pointer}
.dd-toggle.on{background:var(--y)}
.sc-shot .dd-toggle{top:48px;bottom:auto;right:6px}
.al-big{position:relative}
.al-big .dd-toggle{bottom:10px}
.dp-seg .dd-toggle{top:calc(36px + var(--safe-t));bottom:auto;left:12px;right:auto}

/* 作っている間（約7秒）：白い紙にクレヨンがくるくる */
.dd-busy{pointer-events:none}
.dd-busy .dd-make{pointer-events:none}
.dd-veil{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;background:#fffdf5e6;border-radius:inherit;overflow:hidden}
.sc-shot .dd-veil{bottom:22px;border-radius:18px}
.dd-veil svg{width:62%;max-width:150px}
.dd-scribble{stroke:#ff8a3d;stroke-dasharray:260;stroke-dashoffset:260;animation:ddDraw 1.6s ease-in-out infinite}
.dd-veil i{position:absolute;width:9px;height:9px;border-radius:50%;background:#45b0ff;animation:ddDot 1.6s ease-in-out infinite}
.dd-veil i:nth-of-type(1){left:22%;top:26%}
.dd-veil i:nth-of-type(2){right:20%;top:30%;background:#ff5d8f;animation-delay:.3s}
.dd-veil i:nth-of-type(3){left:46%;bottom:22%;background:#58c96b;animation-delay:.6s}
@keyframes ddDraw{0%{stroke-dashoffset:260;stroke:#ff8a3d}50%{stroke-dashoffset:0;stroke:#ff8a3d}51%{stroke:#45b0ff}100%{stroke-dashoffset:-260;stroke:#45b0ff}}
@keyframes ddDot{0%,100%{transform:scale(.4);opacity:.3}50%{transform:scale(1.2);opacity:1}}
.dd-busy .dd-make span{animation:ddWiggle .5s ease-in-out infinite alternate;display:inline-block}
@keyframes ddWiggle{to{transform:rotate(-3deg) translateY(-1px)}}
@media (prefers-reduced-motion:reduce){.dd-scribble{stroke-dashoffset:0}}