/* 이벤트 목록·상세 — 세 브랜드 공용 (renewal-v5 데이뷰 시안 대조 · 11-06 세 브랜드 통일). 값은 시안 계산값 그대로. 색은 브랜드 토큰(--accent 등).
   데이뷰만 시안 주황 값을 따로 쓰는 자리는 --event-* 토큰(daybeau/events.css 에서 정의, 없으면 브랜드 --accent). 본문 최대 폭은 브랜드마다 그대로 — 여기서 정하지 않는다.
   각 브랜드 site.css 뒤·ui.css 앞에 오므로 id 로 우선순위를 올린다. 시술전후(bna)는 daybeau/events.css. */

/* 알약 줄 — 이벤트 목록 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content .event-list-bar .ui-pill-tabs{gap:6px;margin:0;padding:16px 24px 4px;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-mask-image:none;mask-image:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-list-bar .ui-pill-tabs{padding-bottom:22px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content .event-list-bar .ui-pill{height:30px;padding:0 13px;border:1px solid #d9d9d9;border-radius:15px;background:#fff;color:#555;font-size:var(--fs-12-5);font-weight:400}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content .event-list-bar .ui-pill[aria-current=page]{border-color:var(--accent);background:var(--accent-soft,var(--accent-tint));color:var(--accent);font-weight:700}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content :is(.event-list-bar,.event-strip) .ui-pill-tabs.drag{cursor:grabbing}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content :is(.event-list-bar,.event-strip) .ui-pill{-webkit-user-drag:none;user-select:none}

/* 목록 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page{padding:0 0 48px;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page>h1{margin:0;padding:34px 20px 14px;font-size:var(--fs-28);font-weight:700;letter-spacing:-.02em;line-height:normal;color:#1a1a1a}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-list-bar{display:block;margin:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-count-row{display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 20px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-count{margin:0;color:#6b625c;font-size:var(--fs-13);line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-view-toggle{display:flex;gap:0;border:1px solid #ddd;border-radius:4px;overflow:hidden}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-view-toggle button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:0;background:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-view-toggle button[aria-pressed=true]{background:#1a1a1a;border-color:#1a1a1a}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-view-toggle .mi{width:14px;height:14px;stroke:#999;stroke-width:1.8}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-view-toggle button[aria-pressed=true] .mi{stroke:#fff}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 12px;padding:22px 20px 72px;align-items:start}
/* 세라미크·벨리셀은 본문이 넓어(1280) 두 칸이면 카드 하나가 600px 넘게 커진다 — PC 는 예전처럼 네 칸 */
@media(min-width:1024px){body:is([data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid:not([data-view=list]){grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .package-card{display:flex;flex-direction:column;min-width:0;border:0;background:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-image{aspect-ratio:1;padding:0;overflow:hidden;border-radius:0;background:#eee}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-image img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid>a:hover{text-decoration:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-info,body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-info>div{padding:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-info>div{display:flex;flex-direction:column}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-end{order:3;display:flex;align-items:center;gap:6px;min-height:0;margin:5px 0 0;color:#9a8f86;font-size:var(--fs-12);line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-dday{display:inline-flex;align-items:center;height:19px;padding:0 6px;border:1px solid var(--event-dday-line,var(--accent));border-radius:4px;background:#fff;color:var(--event-dday-ink,var(--accent));font-size:var(--fs-11);font-style:normal;font-weight:700;line-height:1}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-end time{color:inherit;font-size:inherit}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid .event-card-title{order:2;display:block;width:100%;margin:12px 0 0;min-height:0;overflow:hidden;color:#1a1a1a;font-size:var(--fs-15-5);font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap;-webkit-line-clamp:unset}
/* 목록형: 사진·종류를 숨기고 «제목 ··· 날짜 ›» 한 줄 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list]{display:block;align-items:normal;flex-direction:row;gap:normal;grid-template-columns:none;padding:8px 20px 72px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .event-image{display:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .event-card-info>div{display:flex;flex-direction:row;gap:10px;align-items:center;justify-content:space-between;padding:0;font-size:var(--fs-14)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .package-card{padding:18px 0;border-bottom:1px solid #f0ebe6}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .event-card-title{order:0;flex:0 1 auto;min-width:0;width:auto;margin:0;font-size:var(--fs-15);font-weight:600;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .event-card-end{order:1;flex:0 0 auto;margin:0 0 0 10px;font-size:var(--fs-12);white-space:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.events-page .event-grid[data-view=list] .event-card-end::after{content:"›";margin-left:2px;color:#c9bfb8}

/* 상세 — 값은 시안 계산값(html.d3) 그대로 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail{padding:0 0 30px;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-swap{transition:opacity .35s,transform .35s}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-swap.out{opacity:0;transform:translateY(8px);transition:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-back-bar{display:flex;align-items:center;gap:10px;box-sizing:border-box;width:100%;height:46px;margin:0;padding:0 20px;border:0;border-bottom:1px solid #ece6e1;background:none;color:#6b625c;font-size:var(--fs-14);font-weight:400;line-height:normal;text-align:center;text-overflow:clip}
/* 없는 이벤트 쪽: 본문 패딩이 0 이라 제목·안내가 화면 끝에 붙는다 — 뒤로 가기 줄과 같은 20px */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-back-bar~h1,body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-back-bar~.empty{padding-inline:20px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-back-title{flex:0 1 auto;overflow:visible;text-overflow:clip;min-width:auto;color:#1a1a1a;font-size:var(--fs-14);font-weight:600;white-space:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-back-bar .mi{display:block;flex:none;width:14px;height:14px;fill:none;stroke:#1a1a1a;stroke-width:2}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-swap:not(.detail-heading){position:relative;overflow:hidden;background:#eee;aspect-ratio:16/9}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-swap>.detail-image{display:block;box-sizing:border-box;width:100%;max-width:100%;height:100%;margin:0;border-radius:0;object-fit:cover}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-blank{position:relative;display:grid;align-content:end;box-sizing:border-box;margin:0;aspect-ratio:16/9;padding:16px 18px;overflow:hidden;border-radius:0;background:linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,.5)),#eee;color:#fff}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-blank b{font-size:var(--fs-19);letter-spacing:-.03em}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-blank span{margin-bottom:2px;font-size:var(--fs-12-5);opacity:.85}

/* 이벤트 탭 + ‘+’ */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip{display:flex;align-items:stretch;gap:0;box-sizing:border-box;height:46px;margin:0;overflow:hidden;border:0;border-bottom:1px solid #ece6e1;border-radius:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip>.ui-pill-tabs{flex:1;align-items:center;gap:16px;min-width:0;margin:0;padding:0 0 0 20px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;font-size:var(--fs-12-5);white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip>.ui-pill-tabs::after{content:"";flex:none;width:24px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip .ui-pill{position:relative;display:inline-flex;flex:none;height:46px;padding:0;overflow:visible;border:0;border-radius:0;background:none;color:#9a8f86;font-size:var(--fs-13-5);font-weight:400;line-height:normal;text-align:center;text-overflow:clip}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip .ui-pill[aria-current=page]{background:none;color:#1a1a1a;font-weight:700}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip .ui-pill[aria-current=page]::after{content:"";position:absolute;inset:44px 0 0;height:2px;background:var(--accent)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-open{flex:0 0 46px;align-self:stretch;width:46px;height:auto;padding:0;border:0;border-radius:0;background:var(--accent);color:#fff;font-size:var(--fs-22);font-weight:300;line-height:normal}


body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer{position:fixed;inset:64px 0 74px;z-index:36;box-sizing:border-box;width:auto;max-width:none;height:auto;max-height:none;margin:0;padding:0;overflow-y:auto;overscroll-behavior:contain;border:0;background:#fff}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;margin:0;padding:13px 18px;background:var(--accent);color:#fff}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer-head h2{margin:0;color:#fff;font-size:var(--fs-15);font-weight:700;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer-head button{width:auto;height:auto;padding:0;border:0;border-radius:0;background:none;color:#fff;font-size:var(--fs-20);font-weight:700;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer li{margin:0;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer li a{display:block;padding:13px 18px;border-bottom:1px solid #f1f1f1;color:var(--text);font-size:var(--fs-13-5)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-strip-layer li a[aria-current=page]{color:var(--accent);font-weight:700}

/* 이벤트명·기간·안내 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading{margin:0;padding:26px 20px 0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading::after{content:"";display:block;height:8px;margin:28px -20px 0;background:#f4f4f4}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading h1{margin:4px 0 0;color:#1a1a1a;font-size:var(--fs-20);font-weight:700;letter-spacing:-.02em;line-height:calc(var(--fs-20) + 8px)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading .event-period{display:flex;align-items:center;gap:8px;margin:6px 0 0;color:#9a8f86;font-size:var(--fs-13);font-weight:500;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-dday{display:inline-flex;align-items:center;height:19px;padding:0 6px;border:1px solid var(--event-dday-line,var(--accent));border-radius:4px;background:#fff;color:var(--event-dday-ink,var(--accent));font-size:var(--fs-11);font-style:normal;font-weight:700;letter-spacing:.01em;line-height:1}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices{margin:16px 0 0;padding:0;list-style:none;color:#6b6b6b;font-size:var(--fs-13);line-height:1.45}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading .event-notices li{position:relative;margin:0;padding:0 0 0 11px;border-radius:0;background:none;color:#6b625c;font-size:var(--fs-13-5);font-weight:500;line-height:1.7}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading .event-notices li+li{margin-top:8px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices li::before{content:"·";position:absolute;top:0;left:0;color:inherit}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .detail-heading .event-notices li :is(p,div,li,span){margin:0;font:inherit;line-height:inherit}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices .notice-red{color:#e5484d}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices .notice-blue{color:#2f6fd1}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices .notice-orange{color:#c4612f}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-notices .notice-green{color:#1f7a4d}

/* 시술 묶음 — 묶음 이름 띠 + 항목 상자들 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-tabs{margin:22px 20px 0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-groups{margin:24px 20px 0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-groups .detail-section{margin:0;padding:0;border:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-groups .detail-section+.detail-section{margin-top:28px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-label{margin:0 0 10px;padding:18px 20px;border-radius:0;background:var(--accent);color:#fff;font-size:var(--fs-17);font-weight:500}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-groups .event-group-label h2{margin:0;color:#fff;font-size:var(--fs-17);font-weight:500;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards{display:block;padding:0;border:0;border-radius:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .price-row{display:block;flex-direction:row;gap:normal;justify-content:normal;margin:0 0 12px;padding:20px 18px;border:1px solid #efefef;border-radius:4px;background:#fff}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .price-row h3{display:block;margin:0;overflow:visible;color:#1a1a1a;font-size:var(--fs-16);font-weight:600;line-height:1.45;white-space:normal;-webkit-line-clamp:unset}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards p:is(.event-product-highlight,.event-product-detail){margin:10px 0 0;white-space:normal;font-size:var(--fs-12);font-weight:500;line-height:calc(var(--fs-12) + 6px)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards p.event-product-highlight{color:var(--event-highlight-ink,var(--accent))}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards p.event-product-detail{color:#6b6b6b}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards p+p.event-product-detail{margin-top:12px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .event-product-price{display:flex;align-items:flex-end;justify-content:space-between;margin:20px 0 0;padding:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .event-product-price del{display:block;white-space:normal;color:#aaa;font-size:var(--fs-12);font-weight:500;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .event-product-price em{margin-right:6px;color:var(--accent);font-size:var(--fs-14);font-style:normal;font-weight:600;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .event-product-price strong{display:inline;white-space:normal;color:#1a1a1a;font-size:var(--fs-16);font-weight:700;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .event-product-price .add-treatment{line-height:normal;display:inline-flex;flex:0 1 auto;align-items:center;height:40px;margin:0;padding:0 18px;border:1px solid var(--accent);border-radius:999px;background:#fff;color:var(--accent);font-size:var(--fs-14);font-weight:500}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-group-cards .add-treatment:hover{background:#fff;text-decoration:none}

body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail>h1{padding:0 24px;text-align:center}

/* DIR-105 C안(세윤님 11-06) — PC(1280 이상) 이벤트 상세: 본문 720 + 오른쪽 이벤트 목록 280(사이 24 · 둘을 한 묶음으로 가운데) · 배너 밑 탭 줄 숨김 · 배너 좌우 화살표 44 · «n / N».
   세라미크·벨리셀 본문은 세윤님 «본문폭은 변경하지 말고»대로 880 을 지킨다 — 단 880+24+280=1184 를 가운데 두면 떠 있는 문의 박스(화면 오른끝에서 103 안쪽)와
   화면 1438 미만에서 24 보다 가까워져, 1280~1439 에서만 720 으로 줄이고 1440 이상은 880(1440 에서 목록 오른끝 1312 · 박스 1337 · 사이 25 — 1280·720 때와 같은 25).
   목록 맨 아래 «담은 시술 N개 · 합계» 줄은 clinic/cart.js 가 채운다(합계 칸을 쓸 때마다 찾음 — htmx 로 갈아 끼운 목록에도 같은 값).
   1279 이하는 목록·화살표·n/N 을 그리지 않는다 — 휴대폰·태블릿 화면 그대로. 끌기·← → 는 shared/events.js */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail :is(.event-banner-arrow,.event-banner-count),body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail>.event-side{display:none}
@media(min-width:1280px){
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) main#content.event-detail:has(>.event-side){display:grid;grid-template-columns:720px 280px;column-gap:24px;align-items:start;justify-content:center;box-sizing:border-box;width:100%;max-width:1024px;margin-inline:auto}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) main#content.event-detail>.event-main{min-width:0}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) main#content.event-detail:has(>.event-side) .event-strip{display:none}
/* 목록은 쪽과 함께 내려오다 머리글 아래에 붙는다(shared/detail.css 시술 목록과 같은 방식) · 화면보다 길면 목록 안에서만 굴러간다 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail>.event-side{position:sticky;top:calc(var(--gnb-height,0px) + 20px);display:flex;flex-direction:column;box-sizing:border-box;max-height:calc(100vh - var(--gnb-height,0px) - 40px);margin:20px 0 0;border:1px solid #ececec;border-radius:4px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.06);overflow:hidden}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side-head{display:flex;flex:none;align-items:center;justify-content:space-between;height:48px;margin:0;padding:0 16px;background:var(--accent);color:#fff;font-size:var(--fs-14);font-weight:700;line-height:1;letter-spacing:-.02em}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side-head small{font-size:var(--fs-12);font-weight:400;opacity:.9}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side ul{flex:1 1 auto;min-height:0;margin:0;padding:6px 0;list-style:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side li{margin:0;line-height:normal}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side a{display:block;padding:9px 16px 9px 14px;border-left:3px solid transparent;color:#444;font-size:var(--fs-13);line-height:1.4;text-decoration:none;overflow-wrap:anywhere}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side a:hover{color:var(--accent)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side a[aria-current=page]{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,#fff);color:var(--accent);font-weight:700}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side-cart{display:flex;flex:none;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:14px 16px;border-top:1px solid #ececec;color:#666;font-size:var(--fs-12);line-height:1.4}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side-cart b{color:#1a1a1a;font-weight:700}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-side-cart strong{color:#1a1a1a;font-size:var(--fs-14);font-weight:700;white-space:nowrap}
/* 배너: 끌면 따라오고(.drag) 60px 안이면 .event-swap 의 transform .35s 로 제자리 */
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner[data-event-banner]{position:relative;overflow:hidden;cursor:grab;outline:0;user-select:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner[data-event-banner].drag{cursor:grabbing}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner[data-event-banner]:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner[data-event-banner] img{-webkit-user-drag:none;user-select:none}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-arrow{position:absolute;top:50%;z-index:2;display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:44px;height:44px;margin-top:-22px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#1a1a1a;cursor:pointer}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-arrow[data-event-banner-go=prev]{left:16px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-arrow[data-event-banner-go=next]{right:16px}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-arrow .mi{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-arrow[aria-disabled=true]{opacity:.35;cursor:default}
body:is([data-theme=daybeau],[data-theme=ceramique],[data-theme=vellicell]) #content.event-detail .event-banner-count{position:absolute;display:block;right:16px;bottom:16px;z-index:2;padding:3px 11px;border-radius:999px;background:rgba(0,0,0,.45);color:#fff;font-size:var(--fs-13);font-weight:600;line-height:1.5;pointer-events:none}
}
@media(min-width:1440px){
body:is([data-theme=ceramique],[data-theme=vellicell]) main#content.event-detail:has(>.event-side){grid-template-columns:880px 280px;max-width:1184px}
}