/* 拼贴本（10·29）：配合 public/views/collage.js。本子、掀页、线圈、底纹照 Project「claude/拼贴本静态稿.html」第 6 版。 */
#xu-wall .xc-page{position:relative;padding-left:0;padding-right:12px;gap:10px}
#xu-wall .xc-page>.xw-crumb{margin-left:44px}
.xc-top{display:flex;align-items:center;justify-content:space-between;margin:2px 0 4px 44px}
.xc-ttl{position:relative;font-size:24px;line-height:1;padding:4px 2px 0}
.xc-ttape{position:absolute;left:-8px;top:-4px;width:58px;height:16px;transform:rotate(-8deg);opacity:.85;z-index:-1;background:#f6c3d2 repeating-linear-gradient(90deg,transparent 0 7px,rgba(255,255,255,.75) 7px 11px);
 clip-path:polygon(0 10%,4px 0,calc(100% - 4px) 0,100% 14%,calc(100% - 2px) 40%,100% 60%,calc(100% - 3px) 86%,calc(100% - 4px) 100%,3px 100%,0 86%,2px 60%,0 40%,3px 22%)}

/* 左边四个竖页签 */
.xc-tools{position:absolute;left:0;top:112px;display:flex;flex-direction:column;gap:8px;z-index:9}
.xc-tool{display:block;width:28px;padding:9px 0 10px!important;border:1.2px solid #3b2c24!important;border-left:0!important;border-radius:0 12px 12px 0;background:var(--c)!important;font-size:13.5px;line-height:1.2;writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.1em;text-align:center;box-shadow:2.5px 3px 0 var(--sh);height:calc(var(--n) * 1.25em + 20px);white-space:nowrap;color:#3b2c24}
.xc-tool:active{transform:translateX(2px)}

/* 本子 */
.xc-book{position:relative;margin:0 0 0 44px}
.xc-edges{position:absolute;inset:0;border-radius:6px 16px 16px 6px;border:1.2px solid #3b2c24;background:#fffdf9;
 box-shadow:1px 1px 0 #f1e7da,2px 2px 0 #3b2c24,3px 3px 0 #f6eee4,4px 4px 0 rgba(59,44,36,.55),5px 5px 0 #efe4d6,6px 6px 0 rgba(59,44,36,.35),6px 9px 10px -6px rgba(59,44,36,.35)}
.xc-sheets{position:relative;width:100%;aspect-ratio:105/148;border-radius:6px 16px 16px 6px;overflow:hidden;touch-action:pan-y;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.xc-book.editing .xc-sheets{cursor:default}
.xc-pg{position:absolute;inset:0;background-color:#fffdf9;border:1.2px solid #3b2c24;border-radius:6px 16px 16px 6px;overflow:hidden}
.xc-pg::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:var(--bgimg);background-size:var(--bgsize,18px 18px);background-position:var(--bgpos,0 0)}
.xc-pg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .17 0 0 0 0 .14 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E")}
.xc-pg.cur{z-index:3}.xc-pg.under{z-index:1}
.xc-holes{position:absolute;left:9px;top:18px;bottom:18px;display:flex;flex-direction:column;justify-content:space-between;z-index:2;pointer-events:none}
.xc-holes i{width:9px;height:6px;border-radius:2px;background:#e9dccb;border:1.1px solid #3b2c24;box-shadow:inset 1px 1px 0 rgba(59,44,36,.25)}
.xc-coil{position:absolute;left:-17px;top:10px;bottom:10px;width:34px;display:flex;flex-direction:column;justify-content:space-between;z-index:8;pointer-events:none}
.xc-coil svg{display:block;width:34px;height:22px;overflow:visible}
.xc-hint{position:absolute;left:34px;right:18px;top:44%;text-align:center;color:#85725f;font-size:14.5px;line-height:1.7;pointer-events:none}

/* 掀起来的那一片和两条折痕阴影 */
.xc-flapw{position:absolute;left:0;top:0;width:100%;aspect-ratio:105/148;pointer-events:none;clip-path:inset(-300px -300px -300px -2px);filter:drop-shadow(-4px 4px 6px rgba(59,44,36,.34));z-index:9}
.xc-flap{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;background-color:#fbf6ef;border:1.2px solid #3b2c24;border-radius:6px 16px 16px 6px;overflow:hidden}
.xc-flap::before{content:"";position:absolute;inset:0;background-image:var(--bgimg);background-size:var(--bgsize,18px 18px);opacity:.35}
.xc-flap::after{content:"";position:absolute;inset:0;background:rgba(59,44,36,.035)}
.xc-strip{position:absolute;height:34px;transform-origin:50% 50%;pointer-events:none}
.xc-flap .xc-strip{z-index:1;background:linear-gradient(to top,rgba(59,44,36,.24),rgba(59,44,36,.08) 18%,rgba(255,255,255,.5) 45%,rgba(255,255,255,0))}
.xc-pg.under .xc-strip{z-index:3;background:linear-gradient(to top,rgba(59,44,36,.32),rgba(59,44,36,.1) 35%,rgba(59,44,36,0))}

.xc-how{font-size:13px;color:#85725f;margin:8px 0 0 44px;line-height:1.6}
.xc-num{font-weight:400;color:#3b2c24;margin-right:8px;font-family:"LXGW WenKai Screen",sans-serif}

/* 页上的东西：贴纸、胶带沿用手账面那套（decor.css 的 .xd-it / .xd-tp）；这里是写的字和照片 */
.xc-c{z-index:2}
.xd-it.xc-text{transform-origin:50% 50%}
.xc-tx{white-space:pre-wrap;word-break:break-word;line-height:1.5;font-family:"Xu Hand","LXGW WenKai Screen","Kaiti SC",serif}
.xd-it.xc-photo{transform-origin:50% 50%}
.xc-po{background:#fff;border:1.2px solid #3b2c24;border-radius:5px;padding:calc(7px * var(--pk,1)) calc(7px * var(--pk,1)) calc(4px * var(--pk,1));box-shadow:2px 3px 0 #e6d6c2}
.xc-po img{display:block;width:100%;height:var(--ph);object-fit:cover;border-radius:2px;border:1px solid #3b2c24;pointer-events:none;-webkit-user-drag:none}
.xc-ghostbox{display:block;visibility:hidden}
.xc-edit{position:absolute;left:50%;bottom:-27px;margin-left:-22px;width:44px;height:22px;border-radius:999px;background:#fff2b8!important;border:1.2px solid #3b2c24!important;font-size:12px;line-height:1;padding:0!important;pointer-events:auto}
.xc-c.editing .xd-it:not(.sel):not(.on){animation:xdBreathe 2.4s ease-in-out infinite}

/* 左边抽屉（样子跟手账面的贴纸册一样，颜色跟着页签） */
.xc-drawer{position:fixed;left:0;top:10vh;z-index:40;width:min(250px,70vw);max-height:76vh;display:flex;flex-direction:column;background:var(--c);border:1.2px solid #3b2c24;border-left:0;border-radius:0 16px 16px 0;box-shadow:4px 5px 0 var(--sh);padding:10px 10px 12px 22px;animation:xdBook .32s cubic-bezier(.3,1.3,.5,1) both;color:#3b2c24}
.xc-close{position:absolute;left:100%;top:22px;margin-left:-1px;display:flex;flex-direction:column;align-items:center;gap:3px;width:26px;padding:9px 0!important;background:var(--c)!important;border:1.2px solid #3b2c24!important;border-left:0!important;border-radius:0 11px 11px 0;box-shadow:2px 2.5px 0 var(--sh);font-size:12.5px}
.xc-close span{writing-mode:vertical-rl;letter-spacing:1px;line-height:1}
.xc-close svg{width:9px;height:9px}
.xc-dh{margin:2px 0 8px;font-size:14.5px}
.xc-ta{width:100%;min-height:120px;resize:vertical;font:inherit;font-family:"Xu Hand","LXGW WenKai Screen",serif;font-size:18px;line-height:1.6;color:#3b2c24;background:#fffdf9;border:1.2px solid #3b2c24;border-radius:12px;padding:8px 10px;box-shadow:2px 2.5px 0 var(--sh)}
.xc-row{display:flex;align-items:center;gap:7px;margin-top:10px;flex-wrap:wrap}
.xc-row small{font-size:12.5px;color:#85725f;margin-right:2px}
.xc-ink{width:24px;height:24px;border-radius:50%;background:var(--c)!important;border:1.2px solid #3b2c24!important;padding:0!important}
.xc-ink[aria-pressed="true"]{box-shadow:0 0 0 2.5px #fffdf9,0 0 0 3.7px #3b2c24}
.xc-chip{padding:1px 12px!important;border:1.1px solid #3b2c24!important;border-radius:999px;background:#fffdf9!important;font-size:13.5px}
.xc-chip[aria-pressed="true"]{background:#ffb48a!important}
.xc-go{margin-top:14px;align-self:flex-start;padding:5px 16px!important;border:1.2px solid #3b2c24!important;border-radius:999px;background:#ffb48a!important;font-size:14.5px;box-shadow:2px 2.5px 0 #d9643a}
.xc-sws{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 4px;margin-bottom:10px}
.xc-sw{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0!important;font-size:12px;color:#3b2c24}
.xc-sw i{display:block;width:38px;height:38px;border-radius:9px;border:1.2px solid #3b2c24;box-shadow:1.5px 2px 0 var(--sh)}
.xc-sw[aria-pressed="true"] i{box-shadow:0 0 0 2.5px #fffdf9,0 0 0 3.7px #d5633e}
.xc-drawer .xd-pg{background:#fffaf2}

/* 三面翻页按钮：月份那一排放得下，字不折行 */
#xu-wall .xw-flip button{white-space:nowrap}
#xu-wall .xw-mh .xw-flip button{padding:2px 7px}
#xu-wall .xw-mh .xw-right{gap:6px}

/* 拍立得白边：能写一句，能换图案（10·29） */
.xc-cap{margin:0;min-height:calc(20px * var(--pk,1));padding:calc(3px * var(--pk,1)) calc(2px * var(--pk,1)) 0;font-family:"Xu Hand","LXGW WenKai Screen",serif;font-size:calc(14px * var(--pk,1));line-height:1.3;color:#3b2c24;text-align:center;word-break:break-word}
[data-fr="cream"]{background-color:#fff4e0!important}
[data-fr="gingham"]{background-color:#fff!important;background-image:linear-gradient(90deg,rgba(246,165,184,.42) 50%,transparent 50%),linear-gradient(rgba(246,165,184,.42) 50%,transparent 50%)!important;background-size:10px 10px!important}
[data-fr="dots"]{background-color:#f3f9ff!important;background-image:radial-gradient(rgba(108,160,220,.55) 1.8px,transparent 2.2px)!important;background-size:9px 9px!important}
[data-fr="flower"]{background-color:#fffaf6!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23f6a5b8'%3E%3Ccircle cx='6' cy='5' r='1.8'/%3E%3Ccircle cx='8.6' cy='7' r='1.8'/%3E%3Ccircle cx='7.6' cy='9.8' r='1.8'/%3E%3Ccircle cx='4.4' cy='9.8' r='1.8'/%3E%3Ccircle cx='3.4' cy='7' r='1.8'/%3E%3C/g%3E%3Ccircle cx='6' cy='7.6' r='1.2' fill='%23ffd35a'/%3E%3Ccircle cx='18' cy='18' r='1.5' fill='%239cc6f5'/%3E%3Cpath d='M16 6q2-2 4 0' stroke='%237c9a5b' fill='none'/%3E%3C/svg%3E")!important;background-size:24px 24px!important}
[data-fr="stripe"]{background-color:#fff!important;background-image:repeating-linear-gradient(90deg,rgba(150,210,180,.5) 0 5px,transparent 5px 10px)!important}
[data-fr="star"]{background-color:#f2eefb!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M6 2l1 2.2 2.4.3-1.8 1.6.5 2.4L6 7.3 3.9 8.5l.5-2.4L2.6 4.5 5 4.2z' fill='%23ffd35a' stroke='%23c98a2e' stroke-width='.5'/%3E%3Ccircle cx='16' cy='15' r='1.2' fill='%23f6a5b8'/%3E%3C/svg%3E")!important;background-size:22px 22px!important}
[data-fr="kraft"]{background-color:#e3cba8!important;background-image:radial-gradient(rgba(120,85,50,.12) 1px,transparent 1.4px)!important;background-size:5px 5px!important}
.xc-po[data-fr="kraft"] .xc-cap{color:#4a3424}
.xc-frsw{background:#fff}
.xc-capin{width:100%;font-family:"Xu Hand","LXGW WenKai Screen",serif;font-size:19px;color:#3b2c24;background:#fffdf9;border:1.2px solid #3b2c24;border-radius:12px;padding:7px 10px;box-shadow:2px 2.5px 0 var(--sh)}

/* 字的宽度圆钮（10·29）：虚线框右边中间，左右拉 */
.xc-ww{position:absolute;right:-16px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;background:#fffdf9;border:1.2px solid #3b2c24;display:grid;place-items:center;z-index:2;pointer-events:auto;touch-action:none}
.xc-ww svg{width:12px;height:12px}

/* 复制一份（10·29）：贴纸 / 字 / 照片在虚线框左下角；胶带在下边，图层钮右边 */
.xc-dup{position:absolute;left:-14px;bottom:-14px;width:22px;height:22px;border-radius:50%;background:#e3f2dc!important;border:1.2px solid #3b2c24!important;display:grid;place-items:center;padding:0!important;z-index:2;pointer-events:auto;touch-action:none}
.xc-dup svg{width:12px;height:12px}
.xd-tape .xc-dup{left:50%;bottom:-27px;margin-left:30px}

/* 裁剪（10·29）：裁出来的一块 = 一个遮罩框，里面是原来的胶带（不剪掉，「重裁」能拆回来） */
.xd-it.xc-cut{-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform-origin:50% 50%}
.xc-cutin{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0}
.xc-cutin .xd-it{pointer-events:none!important;animation:none!important}
.xc-dim{position:absolute;inset:0;z-index:4;pointer-events:none}
.xc-dim svg{display:block;width:100%;height:100%}
.xc-frame{position:absolute;z-index:5;pointer-events:auto;touch-action:none;cursor:move;transform-origin:50% 50%}
.xc-frame>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xc-fs,.xc-fw,.xc-fh{position:absolute;width:24px;height:24px;border-radius:50%;background:#e9e0fb;border:1.2px solid #3b2c24;display:grid;place-items:center;touch-action:none}
.xc-fs svg,.xc-fw svg,.xc-fh svg{width:12px;height:12px}
.xc-fs{right:-12px;bottom:-12px}
.xc-fw{right:-12px;top:50%;margin-top:-12px}
.xc-fh{left:50%;bottom:-12px;margin-left:-12px}
.xc-shp{display:block;width:42px;max-height:42px;background-size:auto 22px;background-repeat:repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
/* 长文（10·29）：一行一个块，nowrap，跟着排好的位置放；底纹是横线时线画在每行字下面 */
.xc-art{position:absolute;inset:0;pointer-events:none;z-index:0}
.xc-al{position:absolute;white-space:pre;box-sizing:border-box;font-family:"Xu Long","Xu Hand","LXGW WenKai Screen",serif;color:#3b2c24}
.xc-al.ln{background-image:linear-gradient(transparent calc(100% - var(--ul) - 1px),rgba(120,160,210,.45) calc(100% - var(--ul) - 1px) calc(100% - var(--ul)),transparent calc(100% - var(--ul)))}
.xc-longin{display:block;margin-top:12px;padding:0!important;background:none!important;border:0!important;font-size:13.5px;color:#85725f;text-decoration:underline;text-underline-offset:3px}
.xc-ta.xc-long{min-height:44vh;font-family:"Xu Long","Xu Hand","LXGW WenKai Screen",serif;font-size:17px;line-height:1.55}
.xc-longdel{display:block;margin-top:14px;padding:4px 12px!important;border:1.1px dashed #b98f78!important;border-radius:999px;background:none!important;font-size:13px;color:#a5502f}
.xc-longdel.sure{border-style:solid!important;background:#ffe3d6!important}
.xc-editbar .sure{background:#ffe3d6!important}
.xc-al.day{color:#85725f;letter-spacing:.04em}
.xc-al.title{font-weight:400;letter-spacing:.06em}
.xc-lrow{display:flex;gap:8px;margin-bottom:8px}.xc-lrow .xc-ltitle{flex:1;min-width:0;font-size:17px}
.xc-lday{flex:none;width:9.2em;font:inherit;font-size:14px;color:#3b2c24;background:#fffdf9;border:1.2px solid #3b2c24;border-radius:12px;padding:6px 8px}
/* 自由形状（11·02）：四个角的圆钮 + 四条边中点的小粉钮（拉了变弧线） */
.xc-free{transform:none!important}
.xc-fp{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fffdf9;border:1.4px solid #3b2c24;box-shadow:1px 1.5px 0 #c9b8ef;touch-action:none;cursor:grab;z-index:1}
.xc-fp::before{content:"";position:absolute;inset:-9px;border-radius:50%}
.xc-fp.mid{width:16px;height:16px;margin:-8px 0 0 -8px;background:#f6a5b8}
.xc-freeic{background:none!important;-webkit-mask-image:none!important;mask-image:none!important;border:0!important;box-shadow:none!important;width:42px!important;height:42px!important}
.xc-freeic svg{width:100%;height:100%}