.sp-wrap{max-width:640px;margin:0 auto;padding:24px 16px 64px;font-family:'Noto Sans JP',sans-serif;color:#3a2820}
.sp-wrap svg{width:16px;height:16px;flex:0 0 auto;display:block}
.sp-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#8a7060;text-decoration:none;margin-bottom:20px}
.sp-back:hover{color:#3a2820}
.sp-back svg{width:15px;height:15px}
.sp-head{margin-bottom:22px}
.sp-head h1{font-size:19px;font-weight:600;margin:0 0 4px;letter-spacing:.02em}
.sp-head p{font-size:13px;color:#8a7060;margin:0}

.sp-group{margin-top:26px}
.sp-group:first-child{margin-top:0}
.sp-group-head{display:flex;align-items:center;gap:7px;margin:0 0 10px;padding:0 2px}
.sp-group-head h2{font-size:13.5px;font-weight:600;margin:0;letter-spacing:.03em;color:#5a4a3a}
.sp-group-head .sp-count{font-size:12px;color:#8a7060;font-weight:400}
.sp-group-note{font-size:12px;color:#8a7060;margin:-4px 2px 10px;line-height:1.6}

.sp-hero{background:#fff;border:1px solid #e5ddd6;border-radius:14px;padding:18px;margin-bottom:10px}
.sp-hero-label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8a7060;margin-bottom:8px}
.sp-hero-label svg{width:15px;height:15px;stroke:#a08a76}
.sp-hero-date{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:25px;font-weight:600;line-height:1.25;letter-spacing:.01em}
.sp-hero-date .sp-sub{font-size:13px;font-weight:400;color:#8a7060}
.sp-hero-body{display:flex;gap:12px;align-items:center;margin-top:13px}
.sp-thumb{width:54px;height:54px;border-radius:10px;background:#faf8f4;flex:0 0 auto;object-fit:cover;border:1px solid #eee8e2}
.sp-hero-info{min-width:0;flex:1}
.sp-hero-title{font-size:13.5px;line-height:1.5;font-weight:500;margin:0 0 3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sp-hero-meta{font-size:12px;color:#8a7060;margin:0}
.sp-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.sp-btn{appearance:none;border:1px solid #d8cec4;background:#fff;color:#3a2820;border-radius:10px;padding:11px 6px;font-size:13px;font-weight:500;font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s;text-decoration:none}
.sp-btn svg{width:15px;height:15px;stroke:#5a4a3a}
.sp-btn:hover{background:#faf8f4;border-color:#c9a87c}
.sp-btn:active{transform:scale(.985)}
.sp-btn-resume{border-color:#c9a87c;color:#5a4a3a;background:#fdfaf5}
.sp-btn-resume:hover{background:#faf3e8}
.sp-btn-primary{background:#5a4a3a;border-color:#5a4a3a;color:#fff}
.sp-btn-primary svg{stroke:#fff}
.sp-btn-primary:hover{background:#4a3c2e;border-color:#4a3c2e}
.sp-detail-link{display:block;text-align:center;margin-top:11px;font-size:13px;color:#8a7060;text-decoration:none;padding:4px}
.sp-detail-link:hover{color:#3a2820;text-decoration:underline}

.sp-card{background:#fff;border:1px solid #e5ddd6;border-radius:14px;padding:13px 14px;display:flex;gap:12px;align-items:center;margin-bottom:9px;text-decoration:none;color:inherit}
.sp-card:hover{border-color:#c9a87c}
.sp-card .sp-thumb{width:46px;height:46px}
.sp-card-info{flex:1;min-width:0}
.sp-card-title{font-size:13px;line-height:1.5;font-weight:500;margin:0 0 2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sp-card-meta{font-size:12px;color:#8a7060;margin:0}
.sp-chev{width:16px;height:16px;flex:0 0 auto;color:#c4b8ac}

.sp-pcard{background:#fff;border:1px solid #e5ddd6;border-radius:14px;padding:13px 14px;margin-bottom:9px}
.sp-pcard-top{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;width:100%;background:none;border:0;padding:0;font-family:inherit;text-align:left;cursor:pointer}
.sp-pcard .sp-thumb{width:46px;height:46px}
.sp-pcard-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.sp-pcard-foot .sp-btn{padding:9px 6px;font-size:12.5px}

.sp-ended .sp-card{background:#fbfaf8;border-color:#ece6df;opacity:.92}
.sp-ended .sp-card-title{font-weight:400;color:#6b584b}

.sp-more{width:100%;background:none;border:1px dashed #d8cec4;border-radius:10px;padding:11px;font-size:12.5px;color:#8a7060;font-family:inherit;cursor:pointer;margin-top:2px}
.sp-more:hover{background:#faf8f4;color:#3a2820}

.sp-fold{margin-top:26px;border-top:1px solid #e5ddd6;padding-top:2px}
.sp-fold summary{list-style:none;cursor:pointer}
.sp-fold summary::-webkit-details-marker{display:none}
.sp-fold-btn{width:100%;padding:14px 2px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#8a7060}
.sp-fold-btn svg{width:17px;height:17px;transition:transform .2s}
.sp-fold[open] .sp-fold-btn svg{transform:rotate(180deg)}
.sp-fold-body{padding-top:2px}

.sp-addnew{margin-top:30px;padding-top:22px;border-top:1px solid #e5ddd6}
.sp-addnew-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e5ddd6;border-radius:14px;padding:15px;text-decoration:none;color:inherit;transition:border-color .15s,background .15s}
.sp-addnew-card:hover{border-color:#c9a87c;background:#fdfbf8}
.sp-addnew-icon{width:40px;height:40px;border-radius:50%;background:#faf3e8;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.sp-addnew-icon svg{width:19px;height:19px;stroke:#b08d52}
.sp-addnew-info{flex:1;min-width:0}
.sp-addnew-title{font-size:13.5px;font-weight:600;margin:0 0 3px;color:#3a2820}
.sp-addnew-sub{font-size:12px;color:#8a7060;margin:0;line-height:1.6}

.sp-empty{text-align:center;padding:34px 20px;color:#8a7060;font-size:13.5px;line-height:1.9}
.sp-empty a{color:#3a2820;font-weight:500}
.sp-empty-sm{background:#fff;border:1px dashed #e0d8d0;border-radius:14px;padding:22px 16px;text-align:center;color:#8a7060;font-size:13px;line-height:1.8}
.sp-error{background:#fdf6f4;border:1px solid #e8d0c8;border-radius:12px;padding:16px;font-size:13.5px;line-height:1.7;color:#8a5a48}
.sp-error a{color:#8a5a48;font-weight:500}

.sp-skel{background:#fff;border:1px solid #e5ddd6;border-radius:14px;padding:20px 18px;margin-bottom:12px}
.sp-skel-line{height:12px;border-radius:6px;background:linear-gradient(90deg,#f2ede7 25%,#e8e1d9 50%,#f2ede7 75%);background-size:200% 100%;animation:sp-sh 1.4s infinite;margin-bottom:10px}
@keyframes sp-sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sp-hidden{display:none!important}

.sp-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;background:rgba(42,31,24,0);transition:background .22s ease;font-family:'Noto Sans JP',sans-serif;color:#3a2820}
.sp-ov.is-open{background:rgba(42,31,24,.42)}
.sp-sheet{background:#fdfcfa;width:100%;max-width:560px;max-height:86vh;border-radius:18px 18px 0 0;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);padding-bottom:env(safe-area-inset-bottom,0)}
.sp-ov.is-open .sp-sheet{transform:translateY(0)}
.sp-sheet svg{width:16px;height:16px;flex:0 0 auto;display:block}
.sp-sheet-head{position:sticky;top:0;background:#fdfcfa;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid #eee8e2;z-index:2}
.sp-sheet-head h3{font-size:15px;font-weight:600;margin:0;letter-spacing:.02em}
.sp-x{appearance:none;background:none;border:0;padding:6px;margin:-6px;cursor:pointer;color:#8a7060;border-radius:8px}
.sp-x:hover{background:#f2ede7;color:#3a2820}
.sp-x svg{width:20px;height:20px}
.sp-sheet-body{padding:16px 18px 22px}
.sp-sheet-status{display:inline-flex;align-items:center;gap:5px;font-size:12px;padding:5px 11px;border-radius:20px;background:#f2ede7;color:#7a6656;margin-bottom:14px}
.sp-sheet-status svg{width:13px;height:13px}
.sp-item{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid #f0eae4}
.sp-item:last-of-type{border-bottom:0}
.sp-item .sp-thumb{width:48px;height:48px}
.sp-item-info{flex:1;min-width:0}
.sp-item-title{font-size:13px;line-height:1.5;font-weight:500;margin:0 0 2px}
.sp-item-meta{font-size:12px;color:#8a7060;margin:0}
.sp-facts{background:#fff;border:1px solid #eee8e2;border-radius:12px;padding:4px 14px;margin:16px 0 0}
.sp-fact{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid #f4efe9;font-size:13px}
.sp-fact:last-child{border-bottom:0}
.sp-fact dt{color:#8a7060;margin:0;flex:0 0 auto}
.sp-fact dd{margin:0;text-align:right;font-weight:500}
.sp-sheet-actions{margin-top:18px;display:flex;flex-direction:column;gap:9px}
.sp-sheet-actions .sp-btn{padding:13px 8px;font-size:13.5px}
.sp-sheet-note{font-size:12px;color:#8a7060;line-height:1.7;margin:12px 2px 0;text-align:center}

@media(max-width:400px){.sp-hero-date{font-size:22px}.sp-btn{font-size:12.5px;padding:11px 4px}}
@media(min-width:641px){.sp-ov{align-items:center}.sp-sheet{border-radius:18px;max-height:82vh;transform:translateY(16px) scale(.98);opacity:0;transition:transform .22s ease,opacity .22s ease}.sp-ov.is-open .sp-sheet{transform:translateY(0) scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.sp-sheet,.sp-ov{transition:none}}