/* ───────── 案例區模組 cases.css（相簿 / 輪播 / 術前後拖拉 三模式 + 後台面板）───────── */

/* 輪播 carousel */
.cs-carousel{position:relative;max-width:760px;margin:0 auto}
.cs-viewport{overflow:hidden;border-radius:1rem}
.cs-track{display:flex;transition:transform .5s cubic-bezier(.4,.0,.2,1)}
.cs-slide{flex:0 0 100%}
.cs-slide img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.cs-slide figcaption{margin-top:.75rem;color:#4a5a6a;font-size:.95rem}
.cs-arrow{position:absolute;top:38%;transform:translateY(-50%);width:46px;height:46px;border-radius:99px;background:#fff;border:1px solid #e7ddc9;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.12);color:#A6883E;font-size:20px;z-index:5}
.cs-arrow:hover{background:#A6883E;color:#fff}
.cs-prev{left:-10px}.cs-next{right:-10px}
.cs-dots{display:flex;gap:8px;justify-content:center;margin-top:18px}
.cs-dot{width:9px;height:9px;border-radius:99px;background:#d8ccb4;cursor:pointer;border:0;padding:0}
.cs-dot.on{background:#A6883E;width:24px}

/* 滿版大尺寸精選對比 */
.cs-featured{max-width:1000px;margin:0 auto 2.75rem}
.ba-lg{aspect-ratio:16/9}
@media(max-width:640px){.ba-lg{aspect-ratio:3/4}}
.ba-lg .knob{width:56px;height:56px;font-size:22px}
.ba-lg .lbl{font-size:14px;padding:6px 14px}
/* 後台精選框 */
.cs-feat-box{border:1px solid #e0d5bd;background:#FBF7EE;border-radius:12px;padding:12px;margin-bottom:16px}
.cs-feat-box label{display:flex;gap:8px;align-items:center;font:600 13px system-ui;color:#5a4a25;margin-bottom:8px;cursor:pointer}
.cs-feat-box .thumbs{display:flex;gap:8px}
.cs-feat-box>input{width:100%;margin-top:8px;padding:8px 10px;border:1px solid #e0d5bd;border-radius:8px;font:14px system-ui;box-sizing:border-box}

/* 術前後拖拉（.ba 樣式沿用 index.html；這裡加標籤） */
.cs-ba-grid{display:grid;grid-template-columns:1fr;gap:2rem;max-width:760px;margin:0 auto}
@media(min-width:768px){.cs-ba-grid{grid-template-columns:1fr 1fr;max-width:none}}
.cs-ba .lbl{position:absolute;bottom:10px;z-index:3;background:rgba(26,26,26,.7);color:#fff;font-size:12px;padding:4px 10px;border-radius:99px;pointer-events:none}
.cs-ba .lbl-b{left:10px}.cs-ba .lbl-a{right:10px}

/* ───────── 後台面板（編輯模式才出現）───────── */
#cs-fab{position:fixed;right:20px;bottom:20px;z-index:9990;background:#A6883E;color:#fff;border:0;border-radius:99px;padding:13px 20px;font:600 14px system-ui;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.3)}
#cs-panel{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:92vw;z-index:9991;background:#fff;box-shadow:-8px 0 30px rgba(0,0,0,.2);transform:translateX(100%);transition:transform .3s;display:flex;flex-direction:column;font-family:system-ui}
#cs-panel.open{transform:none}
#cs-panel header{background:#1A1A1A;color:#fff;padding:16px 20px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
#cs-panel header button{background:none;border:0;color:#fff;font-size:22px;cursor:pointer}
.cs-body{padding:18px 20px;overflow:auto;flex:1}
.cs-modes{display:flex;gap:8px;margin-bottom:18px}
.cs-modes button{flex:1;padding:10px;border:1.5px solid #e0d5bd;background:#fff;border-radius:10px;cursor:pointer;font:600 13px system-ui;color:#5a5a5a}
.cs-modes button.on{background:#A6883E;color:#fff;border-color:#A6883E}
.cs-help{font-size:13px;color:#8a7a55;background:#FBF7EE;border:1px solid #ecdfc4;border-radius:10px;padding:10px 12px;margin-bottom:16px;line-height:1.6}
.cs-item{border:1px solid #eee;border-radius:12px;padding:12px;margin-bottom:12px}
.cs-item .thumbs{display:flex;gap:8px}
.cs-thumb{flex:1;text-align:center}
.cs-thumb img{width:100%;height:84px;object-fit:cover;border-radius:8px;background:#f0ece3;cursor:pointer;border:1px dashed #d8ccb4}
.cs-thumb span{display:block;font-size:11px;color:#999;margin-top:3px}
.cs-item input{width:100%;margin-top:8px;padding:8px 10px;border:1px solid #e0d5bd;border-radius:8px;font:14px system-ui}
.cs-item .del{margin-top:8px;background:none;border:0;color:#c0392b;font-size:13px;cursor:pointer}
.cs-add{width:100%;padding:11px;border:1.5px dashed #A6883E;background:#fff;color:#A6883E;border-radius:10px;cursor:pointer;font:600 14px system-ui}
.cs-foot{padding:14px 20px;border-top:1px solid #eee;display:flex;gap:10px}
.cs-foot button{flex:1;padding:12px;border:0;border-radius:99px;font:600 14px system-ui;cursor:pointer}
.cs-foot .save{background:#1A1A1A;color:#fff}
.cs-foot .reset{background:#f0ece3;color:#1A1A1A}