/* TC-GIFTSHEET 共有スタイル：シートの見た目（index.html と s.html が共用） */
.px-sheet{width:440px;height:624px;position:relative;border-radius:6px;overflow:hidden;box-shadow:0 14px 44px rgba(59,30,12,.22);transition:background .4s}
.px-motif{position:absolute;inset:0;opacity:.5;transition:.4s;pointer-events:none}
.px-mono{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%);width:240px;max-width:60%;opacity:.05;pointer-events:none;filter:grayscale(1)}
.px-frame{position:absolute;inset:10px;border:2px solid #C29A45;border-radius:4px;pointer-events:none}
.px-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(216,192,148,.7);border-radius:2px}
.px-inner{position:absolute;inset:10px;display:flex;flex-direction:column;padding:16px 18px}
/* 中央上部にワードマーク1か所（文字だけのロゴ） */
.px-top{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:9px;border-bottom:1.5px solid rgba(58,42,30,.55)}
.px-wordmark{font-family:"Fraunces",serif;font-weight:600;font-size:1.18rem;letter-spacing:.14em;color:#2E2114;line-height:1}
.px-svc{display:block;font-family:"Fraunces",serif;font-weight:500;letter-spacing:.28em;text-transform:uppercase;font-size:.5rem;color:#A6792B;margin-top:5px}
.px-meta{font-size:.6rem;color:#6E5C4C;letter-spacing:.06em;margin-top:7px}
.px-meta b{font-family:"Shippori Mincho",serif;font-weight:700;color:#2E2114}

.px-body{flex:1;display:flex;flex-direction:column;gap:9px;margin-top:10px;position:relative;z-index:1;min-height:0}
.px-seclab{font-family:"Fraunces",serif;font-size:.48rem;letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.px-seclab.gold{color:#A6792B}.px-seclab.ocean{color:#0A6E7A}
.px-seclab::after{content:"";flex:1;height:1px}
.px-seclab.gold::after{background:rgba(166,121,43,.32)}.px-seclab.ocean::after{background:rgba(10,110,122,.3)}
.px-slots{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px;grid-auto-rows:minmax(0,1fr);min-height:0}
.px-empty{grid-column:1/3;align-self:center;text-align:center;color:#A99B82;font-size:.78rem;line-height:1.8}

.px-msgwrap{flex:none}
.px-msg{background:rgba(10,110,122,.055);border:1px solid rgba(10,110,122,.26);border-radius:9px;padding:9px 12px;display:flex;gap:10px;align-items:center;min-height:64px;margin-top:6px}
.px-msg .mc{flex:1}
.px-msg .px-msg-text{font-family:"Shippori Mincho",serif;font-size:.74rem;color:#1F2B2C;line-height:1.6;white-space:pre-wrap}
.px-msg .mqr{width:40px;height:40px;border-radius:5px;flex:none;background:linear-gradient(90deg,#0A6E7A 0 22%,transparent 0 42%,#0A6E7A 0 60%,transparent 0 78%,#0A6E7A 0 100%),linear-gradient(0deg,#0A6E7A 0 22%,transparent 0 45%,#0A6E7A 0 66%,transparent 0 82%,#0A6E7A 0 100%);background-blend-mode:multiply;opacity:.55}
.px-msg-right{flex:none;display:flex;align-items:center;justify-content:center;min-width:40px}
.px-msg-emoji{font-size:1.9rem;line-height:1}
.px-msg-img{width:48px;height:48px;object-fit:cover;border-radius:7px}

.px-foot{display:flex;justify-content:space-between;align-items:center;margin-top:9px;padding-top:8px;border-top:1px solid rgba(58,42,30,.25);font-size:.54rem;color:#8A7A66;letter-spacing:.06em;position:relative;z-index:1}
.px-chokon{flex:none;text-align:center;font-family:"Fraunces",serif;font-size:.52rem;letter-spacing:.12em;color:#A6792B;margin-top:5px;position:relative;z-index:1}

.cb{border:1px solid rgba(58,42,30,.15);border-left:3px solid var(--ac);border-radius:7px;background:rgba(255,255,255,.85);padding:8px 10px;display:flex;flex-direction:column;justify-content:center;gap:4px;overflow:hidden}
.cb.draggable{cursor:grab;touch-action:none;user-select:none}
.cb.ghost{position:fixed;z-index:9999;pointer-events:none;box-shadow:0 14px 34px rgba(59,30,12,.3);opacity:.97;transform:rotate(-1.5deg) scale(1.03)}
.cb.drop{outline:2px dashed #0A6E7A;outline-offset:2px}
.cb-h{display:flex;justify-content:space-between;align-items:center;gap:6px}
.cb-code{font-family:"Fraunces",serif;font-size:.46rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ac);font-weight:600;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex:0 0 auto}
.cb-ic{font-size:.78rem}
.cb-org{font-family:"Zen Kaku Gothic New",sans-serif;font-size:.52rem;color:#6E5C4C;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;flex:0 1 auto;min-width:0}
.cb-org .od{width:8px;height:8px;border-radius:50%;flex:none}
.cb-ob{display:flex;align-items:center;gap:6px}
.cb-sw{width:24px;height:24px;border-radius:50%;color:#fff;font-family:"Fraunces",serif;font-size:.5rem;display:flex;align-items:center;justify-content:center;flex:none}
.cb-ob b{font-family:"Shippori Mincho",serif;font-size:.82rem;color:#2E2114}
.cb-ob i{font-family:"Fraunces",serif;font-style:normal;font-size:.54rem;color:#8A7A66}
.cb-ti{font-family:"Shippori Mincho",serif;font-weight:700;font-size:.76rem;color:#2E2114;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.cb-dots{font-size:.52rem;letter-spacing:1px}
.cb-fl{font-size:.6rem;color:#6E5C4C;line-height:1.5}
/* カード地プリセット（.px-sheet に cbg-* を付与） */
.cbg-cream .cb{background:#FBF3E7}
.cbg-kraft .cb{background:#EAD9BC}
.cbg-frost .cb{background:rgba(255,255,255,.5)}
.cbg-line .cb{background:transparent}

.sc-gift{background:radial-gradient(120% 90% at 80% 0,#F7EEDD,#EFE3CB)}
.sc-gift .px-motif{background:radial-gradient(circle at 20% 22%,rgba(194,154,69,.16) 0 9px,transparent 10px),radial-gradient(circle at 74% 60%,rgba(194,154,69,.12) 0 13px,transparent 14px),radial-gradient(circle at 44% 90%,rgba(162,59,71,.08) 0 11px,transparent 12px)}
.sc-bday{background:radial-gradient(120% 90% at 20% 0,#F8ECEC,#EFD9DA)}
.sc-bday .px-motif{background:radial-gradient(circle at 26% 20%,rgba(162,59,71,.16) 0 8px,transparent 9px),radial-gradient(circle at 76% 68%,rgba(194,154,69,.14) 0 12px,transparent 13px),radial-gradient(circle at 50% 92%,rgba(162,59,71,.1) 0 10px,transparent 11px)}
.sc-travel{background:radial-gradient(120% 90% at 80% 0,#E9F0EB,#D7E5DC)}
.sc-travel .px-motif{background:radial-gradient(circle at 24% 28%,rgba(79,114,100,.18) 0 10px,transparent 11px),radial-gradient(circle at 72% 58%,rgba(10,110,122,.12) 0 14px,transparent 15px),radial-gradient(circle at 46% 90%,rgba(79,114,100,.1) 0 11px,transparent 12px)}
.sc-self{background:radial-gradient(120% 90% at 50% 0,#F2EADF,#E6D9C6)}
.sc-self .px-motif{background:radial-gradient(circle at 28% 24%,rgba(59,30,12,.1) 0 9px,transparent 10px),radial-gradient(circle at 74% 66%,rgba(166,121,43,.12) 0 13px,transparent 14px)}