@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400&display=swap");
/* beautyz 明洞 중문판 커스텀 페이지 (이벤트·공지·문의) — 사이트 톤(레드 포인트) 유지 */
:root { --bo-red: #7C6D54; --bo-dark: #1a1a1a; --bo-line: #e8e8ec; --bo-muted: #8a8a92; }

.bo-page { max-width: 1200px; margin: 0 auto; padding: 140px 20px 90px; }
@media (max-width: 1199px) { .bo-page { padding-top: 90px; } }

.bo-page-head { text-align: center; margin-bottom: 46px; }
.bo-page-head h2 { font-size: 32px; font-weight: 700; letter-spacing: 0.02em; }
.bo-page-head p { margin-top: 10px; color: var(--bo-muted); font-size: 15px; }

/* 이벤트 카드 그리드 */
.bo-event-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 22px; }
@media (max-width: 1023px) { .bo-event-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; } }
@media (max-width: 559px)  { .bo-event-grid { grid-template-columns: 1fr; } }
.bo-event-grid.small { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767px) { .bo-event-grid.small { grid-template-columns: repeat(2, 1fr); } }

.bo-event-card a { display: block; text-decoration: none; color: inherit; }
.bo-card-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 12px; background: #f4f4f6; }
.bo-card-thumb img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease; }
.bo-event-card a:hover .bo-card-thumb img { transform: scale(1.05); }
.bo-thumb-empty { display: flex; align-items: center; justify-content: center;
  height: 100%; color: #ccc; font-weight: 700; letter-spacing: .1em; }
.bo-tag { position: absolute; top: 10px; left: 10px; background: var(--bo-red);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.bo-tag.inline { position: static; display: inline-block; margin-bottom: 12px; }

.bo-card-body { padding: 14px 4px 0; }
.bo-card-title { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.45;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bo-card-sub { margin-top: 6px; color: var(--bo-muted); font-size: 13.5px; line-height: 1.5;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.bo-price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bo-sale-pct { color: #d62c2c; font-weight: 800; font-size: 18px; }
.bo-price-origin { color: #b5b5bc; text-decoration: line-through; font-size: 14px; }
.bo-price-sale { font-weight: 800; font-size: 18px; }
.bo-price.big .bo-sale-pct, .bo-price.big .bo-price-sale { font-size: 26px; }

.bo-empty { grid-column: 1 / -1; text-align: center; color: var(--bo-muted); padding: 80px 0; }

/* 상세 */
.bo-detail { max-width: 860px; }
.bo-detail-head { text-align: center; margin-bottom: 30px; }
.bo-detail-head h2 { font-size: 27px; font-weight: 700; line-height: 1.4; }
.bo-detail-head .bo-price { justify-content: center; margin-top: 14px; }
.bo-detail-hero { width: 100%; border-radius: 14px; margin-bottom: 26px; }
.bo-detail-body { font-size: 15.5px; line-height: 1.8; color: #333; }
.bo-detail-body img { max-width: 100%; display: block; margin: 14px auto; border-radius: 10px; }
.bo-detail-cta { text-align: center; margin-top: 44px; padding-top: 30px;
  border-top: 1px solid var(--bo-line); }
.bo-detail-cta p { color: var(--bo-muted); font-size: 13px; margin-bottom: 16px; }
.bo-btn { display: inline-block; background: var(--bo-red); color: #fff; font-weight: 700;
  padding: 13px 34px; border-radius: 30px; text-decoration: none; margin: 0 5px; }
.bo-btn.ghost { background: #fff; color: var(--bo-dark); border: 1px solid #d5d5da; }
.bo-others { margin-top: 60px; }
.bo-others h3 { font-size: 19px; margin-bottom: 18px; }

/* 이벤트 v2: 탭 필터 + 이미지 카드 + 가격 펼침 (블리비 패턴, 자체 구현) */
.bo-ev-page { max-width: 1200px; }
.bo-ev-search { max-width: 480px; margin: 0 auto 26px; }
.bo-ev-search input { width: 100%; padding: 12px 20px; border: 1px solid #d5d5da;
  border-radius: 6px; font-size: 14.5px; outline: none; }
.bo-ev-search input:focus { border-color: var(--bo-red); }

/* 탭: 격자형 세그먼트 바 (아이콘+라벨, 활성 = 하단 언더라인) */
.bo-ev-tabs { display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--bo-line); border-right: 0; margin-bottom: 40px; background: #fff; }
@media (max-width: 1023px) { .bo-ev-tabs { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 599px)  { .bo-ev-tabs { grid-template-columns: repeat(4, 1fr); } }
.bo-ev-tabs button { display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 6px 16px; border: 0; border-right: 1px solid var(--bo-line);
  border-bottom: 3px solid transparent; background: #fff; cursor: pointer;
  font-size: 14px; color: #555; }
.bo-ev-tabs button i { font-style: normal; font-size: 24px; line-height: 1;
  filter: grayscale(35%); }
.bo-ev-tabs button span { white-space: nowrap; }
.bo-ev-tabs button:hover { color: var(--bo-red); }
.bo-ev-tabs button.on { color: var(--bo-red); font-weight: 700;
  border-bottom-color: var(--bo-red); }
.bo-ev-tabs button.on i { filter: none; }

.bo-ev-grid { list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 34px; align-items: start; }
@media (max-width: 1023px) { .bo-ev-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 20px; } }
@media (max-width: 599px)  { .bo-ev-grid { grid-template-columns: 1fr; } }
.bo-ev-card { background: #fff; }
.bo-ev-thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f4f6; }
.bo-ev-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bo-ev-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 클릭 재생 카드의 재생 버튼 — 원본 .video-play-btn 방식 (Icon_videoPlay.svg) */
.bo-ev-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 96px; height: 96px; border: 0; padding: 0; cursor: pointer;
  background: url(/static/resources/images/common/Icon_videoPlay.svg) no-repeat center center;
  background-size: cover; transition: opacity .25s, transform .2s; }
@media (max-width: 767px) { .bo-ev-play { width: 72px; height: 72px; } }
.bo-ev-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.bo-ev-play.playing { opacity: 0; pointer-events: none; }
.bo-ev-thumb:hover .bo-ev-play.playing { opacity: .85; pointer-events: auto; }
.bo-ev-badge { position: absolute; bottom: 10px; right: 10px; background: var(--bo-red);
  color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; opacity: .92; }
.bo-ev-body { padding: 16px 2px 0; }
.bo-ev-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bo-ev-meta .chip { border: 1px solid #c9c9cf; color: #666; font-size: 12px; padding: 3px 10px; }
.bo-ev-meta .until { color: #999; font-size: 12.5px; }
.bo-ev-title { font-size: 19px; font-weight: 700; color: var(--bo-red); line-height: 1.4; }
.bo-ev-desc { margin-top: 6px; color: #777; font-size: 13.5px; line-height: 1.55;
  padding-bottom: 14px; border-bottom: 1px solid var(--bo-line); }
.bo-ev-rep { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bo-line); }
.bo-ev-rep-name { font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.bo-ev-rep-price { margin-top: 4px; display: flex; align-items: baseline; gap: 7px; }
.bo-ev-rep-price .pct { color: #d62c2c; font-weight: 800; font-size: 19px; }
.bo-ev-rep-price .sale { font-weight: 800; font-size: 18px; }
.bo-ev-rep-price .origin { color: #b5b5bc; text-decoration: line-through; font-size: 13px; }
.bo-ev-more { display: block; width: 100%; margin-top: 12px; padding: 11px;
  border: 1px solid #d5d5da; background: #fff; border-radius: 8px; font-size: 13.5px;
  cursor: pointer; color: var(--bo-dark); }
.bo-ev-more .arr { display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-right: 2px solid #999; border-bottom: 2px solid #999;
  transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.bo-ev-card.open .bo-ev-more .arr { transform: rotate(-135deg) translateY(-2px); }
.bo-ev-options { display: none; margin-top: 10px; max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--bo-line); }
.bo-ev-card.open .bo-ev-options { display: block; }
.bo-ev-options ul { list-style: none; margin: 0; padding: 0; }
/* 옵션 행 = 세로 스택 (원장 지시 2026-08-26, 한일영 사이트와 동일 배치):
   1행 시술명(전폭) · 2행 부제 · 3행 [할인율 현재가 정가] + 우측 끝 详情. */
.bo-ev-options li { display: block; padding: 13px 10px; border-bottom: 1px solid #f1f1f4; }
.bo-ev-options li:nth-child(even) { background: #fafafa; }
.bo-ev-options li > .opt-text { display: block; }
.bo-ev-options .opt-text span { font-size: 14.5px; font-weight: 600; line-height: 1.5; display: block; }
.bo-ev-options .opt-link { text-decoration: none; color: inherit; }
.bo-ev-options .opt-link:hover span { color: var(--bo-red); }
.bo-ev-options .opt-link em { font-style: normal; color: var(--bo-red); font-size: 11.5px; font-weight: 700; }
/* 옵션 행 클릭 (전 카테고리): ① 행 전체 클릭 ② 详情 pill 버튼 ③ 호버/터치 피드백 */
.bo-ev-options li.linked { padding: 0; }
.bo-ev-options .opt-row { display: block; width: 100%; padding: 13px 10px;
  text-decoration: none; color: inherit; cursor: pointer; border-radius: 8px;
  transition: background .15s; }
.bo-ev-options .opt-row:hover, .bo-ev-options .opt-row:active { background: rgba(110, 0, 148, .06); }
.bo-ev-options .opt-row:hover .opt-text span { color: var(--bo-red); }
.bo-ev-options .opt-row .opt-text { display: block; }
.bo-ev-options .opt-pill { flex: 0 0 auto; border: 1.5px solid var(--bo-red); color: var(--bo-red);
  border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: nowrap; transition: background .15s, color .15s; }
.bo-ev-options .opt-row:hover .opt-pill, .bo-ev-options .opt-row:active .opt-pill {
  background: var(--bo-red); color: #fff; }
/* 시술 상세: 좌 설명 + 우 가격 패널 (원본 레이아웃, 체크박스 없는 열람 전용) */
/* 가격 패널 유무에 따라 컬럼 자동 조정 (원장 지시: 들어온 시술 가격만 → 패널 없을 땐 본문 전폭) */
.bo-proc-layout:not(:has(.bo-proc-prices)) { display: block; }
.bo-proc-layout:not(:has(.bo-proc-prices)) .bo-proc-main { max-width: 900px; margin: 0 auto; }
/* 단일 가격 카드 */
.bo-proc-price-single .pi-single { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.bo-proc-price-single .pi-text span { font-size: 14.5px; font-weight: 700; display: block; line-height: 1.4; }
.bo-proc-price-single .pi-text small { color: #8a8a92; font-size: 12px; display: block; margin-top: 3px; }
.bo-proc-price-single .pi-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 6px; }
.bo-proc-price-single .pi-price em { font-style: normal; color: #d62c2c; font-weight: 700; font-size: 14px; }
.bo-proc-price-single .pi-price del { color: #b5b5bc; font-size: 12px; }
.bo-proc-price-single .pi-price b { font-size: 18px; color: #7C6D54; }
.bo-proc-layout { display: grid; grid-template-columns: 1fr 380px; gap: 34px;
  max-width: 1280px; margin: 0 auto; padding: 0 20px; align-items: start; }
@media (max-width: 1023px) { .bo-proc-layout { grid-template-columns: 1fr; } }
.bo-proc-main { min-width: 0; }
.bo-proc-prices { position: sticky; top: 90px; border: 1px solid #e8e8ec;
  border-radius: 14px; background: #fff; padding: 20px 18px;
  max-height: calc(100vh - 120px); overflow-y: auto; }
@media (max-width: 1023px) { .bo-proc-prices { position: static; max-height: none; } }
.bo-proc-prices h4 { font-size: 16px; font-weight: 800; margin: 0 0 12px;
  padding-bottom: 10px; border-bottom: 2px solid #1a1a1a; }
.bo-proc-prices h4 small { color: #8a8a92; font-weight: 400; font-size: 12px; }
.bo-proc-prices ul { list-style: none; margin: 0; padding: 0; }
.bo-proc-prices li { display: flex; justify-content: space-between; gap: 10px;
  align-items: center; padding: 10px 6px; border-bottom: 1px solid #f1f1f4; }
.bo-proc-prices li.cur { background: rgba(110, 0, 148, 0.06);
  border-left: 3px solid #7C6D54; border-radius: 4px; }
.bo-proc-prices .pi-text span { font-size: 13px; font-weight: 500; line-height: 1.45; display: block; }
.bo-proc-prices .pi-text small { color: #8a8a92; font-size: 11.5px; display: block; margin-top: 2px; }
.bo-proc-prices .pi-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 5px; }
.bo-proc-prices .pi-price em { font-style: normal; color: #d62c2c; font-weight: 700; font-size: 13px; }
.bo-proc-prices .pi-price del { color: #b5b5bc; font-size: 11.5px; }
.bo-proc-prices .pi-price b { font-size: 14px; }
.bo-proc-prices .pi-price .ask { color: #8a8a92; font-size: 12.5px; }
.bo-proc-prices .pi-note { margin-top: 12px; font-size: 12px; color: #8a8a92; text-align: center; }
.bo-proc-prices .pi-note a { color: #7C6D54; font-weight: 700; text-decoration: none; }

/* 시술 상세 페이지 (원본 priceDetail.css 골격 위에 여백만 보정) */
.bo-proc-wrap { padding-top: 130px; }
@media (max-width: 1199px) { .bo-proc-wrap { padding-top: 80px; } }
.bo-proc-wrap video { max-width: 100%; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: #000; display: block; }
.bo-vid-wrap { position: relative; display: block; }
.bo-proc-wrap img { max-width: 100%; height: auto; }
.bo-proc-wrap .bo-detail-cta { max-width: 900px; margin: 40px auto 80px; text-align: center;
  padding-top: 30px; border-top: 1px solid #e8e8ec; }
.bo-ev-options .opt-text small { color: var(--bo-muted); font-size: 11.5px; line-height: 1.4; display: block; margin-top: 2px; }
.bo-ev-options .opt-priceline { display: flex; align-items: baseline; gap: 8px;
  margin-top: 7px; width: 100%; flex-wrap: nowrap; }
.bo-ev-options .pct { color: #d62c2c; font-weight: 800; font-size: 16px; }
.bo-ev-options .sale { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.bo-ev-options .origin { color: #b5b5bc; text-decoration: line-through; font-size: 13px; }
.bo-ev-options .ask { color: var(--bo-muted); font-size: 14px; }
.bo-ev-options .opt-priceline .opt-pill { margin-left: auto; align-self: center; }
/* 모바일: 우측 고정 CTA(.bo-float)가 详情 버튼을 덮어 안 눌리던 문제 (한일영 사이트 실측) */
@media (max-width: 1023px) {
  .bo-ev-options li, .bo-ev-options li.linked { padding-right: 34px; }
  .bo-ev-options .opt-row { padding-right: 4px; }
  .bo-ev-options .sale { font-size: 18px; }
  .bo-ev-options .pct { font-size: 15px; }
}

/* 이벤트: 카테고리 탭 + 가격 리스트 */
.bo-event-page { max-width: 1000px; }
.bo-cat-tabs { position: sticky; top: 0; z-index: 20; background: #fff;
  display: flex; gap: 6px; overflow-x: auto; padding: 12px 4px;
  border-bottom: 1px solid var(--bo-line); -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
.bo-cat-tabs::-webkit-scrollbar { display: none; }
.bo-cat-tabs a { flex: 0 0 auto; padding: 8px 16px; border-radius: 30px;
  border: 1px solid var(--bo-line); font-size: 13.5px; text-decoration: none;
  color: var(--bo-dark); white-space: nowrap; }
.bo-cat-tabs a.on, .bo-cat-tabs a:hover { background: var(--bo-red);
  border-color: var(--bo-red); color: #fff; }
.bo-cat-section { margin-top: 46px; scroll-margin-top: 90px; }
.bo-cat-title { font-size: 20px; font-weight: 700; padding-bottom: 12px;
  border-bottom: 2px solid var(--bo-dark); }
.bo-price-list { list-style: none; margin: 0; padding: 0; }
.bo-price-list > li { border-bottom: 1px solid var(--bo-line); }
.bo-row { display: flex; justify-content: space-between; align-items: center;
  gap: 18px; padding: 15px 6px; text-decoration: none; color: inherit; }
a.bo-row:hover strong { color: var(--bo-red); }
.bo-row-text strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
.bo-row-text p { margin-top: 4px; color: var(--bo-muted); font-size: 12.5px; line-height: 1.55; }
.bo-row-price { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; text-align: right; }
.bo-row-price .bo-sale-pct { font-size: 15px; }
.bo-row-price .bo-price-origin { font-size: 12.5px; }
.bo-row-price .bo-price-sale { font-size: 16px; }
.bo-price-ask { color: var(--bo-muted); font-size: 13.5px; }
@media (max-width: 559px) {
  .bo-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bo-row-price { align-self: flex-end; }
}

/* 검색 */
.bo-search-form { display: flex; gap: 10px; max-width: 560px; margin: 0 auto; }
.bo-search-form input { flex: 1; padding: 13px 18px; border: 2px solid var(--bo-red);
  border-radius: 30px; font-size: 15px; outline: none; }
.bo-search-form .bo-btn { margin: 0; }

/* 공지 */
.bo-notice-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px;
  border-top: 2px solid var(--bo-dark); }
.bo-notice-list li a { display: flex; justify-content: space-between; gap: 16px;
  padding: 18px 8px; border-bottom: 1px solid var(--bo-line); text-decoration: none; color: inherit; }
.bo-notice-list li a:hover .bo-notice-title { color: var(--bo-red); }
.bo-notice-title { font-size: 15.5px; font-weight: 600; }
.bo-notice-date { color: var(--bo-muted); font-size: 13.5px; white-space: nowrap; }

/* 문의 */
.bo-contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 900px; margin: 0 auto; }
@media (max-width: 767px) { .bo-contact-grid { grid-template-columns: 1fr; } }
.bo-contact-card { border: 1px solid var(--bo-line); border-radius: 16px; padding: 34px 28px; text-align: center; }
.bo-contact-card h3 { font-size: 18px; margin-bottom: 18px; color: var(--bo-red); }
.bo-contact-card p { font-size: 14.5px; line-height: 1.7; margin: 6px 0; }
.bo-qr { width: 180px; height: 180px; object-fit: contain; border-radius: 10px;
  border: 1px solid var(--bo-line); margin-bottom: 12px; }
.bo-tel a { font-size: 24px; font-weight: 800; color: var(--bo-dark); text-decoration: none; }
.bo-hours { margin: 14px auto 4px; border-collapse: collapse; font-size: 14px; }
.bo-hours td { padding: 6px 14px; border-bottom: 1px solid var(--bo-line); }
.bo-hours td:first-child { color: var(--bo-muted); }
.bo-muted { color: var(--bo-muted); font-size: 13px; }

/* 검색 결과 행 링크화 (QA 2026-08-12): 행 전체 클릭 + pill + 호버 */
.bo-row-link { text-decoration: none; color: inherit; cursor: pointer;
  border-radius: 8px; transition: background .15s; }
.bo-row-link:hover { background: rgba(110, 0, 148, .06); }
.bo-row-link:hover .bo-row-text strong { color: #7C6D54; }
.bo-row-link .opt-pill { margin-left: 10px; }

/* 이벤트 옵션 행 배지 칩 (관리자 배지 토글과 연동, 2026-08-12) */
.bo-ev-options .opt-tag { font-style: normal; display: inline-block; border: 1px solid #7C6D54;
  color: #7C6D54; font-size: 10.5px; font-weight: 700; border-radius: 10px; padding: 1px 7px;
  margin-right: 6px; vertical-align: 1px; white-space: nowrap; }

/* ── 메인 검색창 아래 롤링 이미지 띠 (원장 요청 2026-08-26) ──
   항목이 적으면 2벌 복제만으로는 화면 끝에 빈 구간이 생긴다. 그래서 칸 크기를 CSS로 고정하고
   (이미지 로딩을 기다리지 않고 폭을 계산할 수 있게) site-extra.js 가 화면 폭을 채울 때까지
   한 벌을 반복해 만든 뒤 그 한 벌을 정확히 두 번 이어 붙인다 → -50% 이동이 항상 seamless.
   ⚠️ 이동량 보정은 `-50% - (gap / 2)` 다. gap 을 바꾸면 키프레임도 같이 바꿔야 이음매가 어긋나지 않는다.
   타일 크기는 리진의원 레퍼런스 실측(가로 = 화면의 52%, 비율 1.8:1)을 기준으로 잡았다. */
.bo-strip-wrap { --tile-w: min(52vw, 900px); --tile-h: calc(min(52vw, 900px) / 1.8);
  --tile-gap: 22px; background: #fff; padding: 104px 0 108px; overflow: hidden; }
.bo-strip-head { text-align: center; padding: 0 20px; margin-bottom: 54px; }
.bo-strip-head h2 { font-family: "Cormorant Garamond", "Nanum Myeongjo", Georgia, serif;
  font-weight: 300; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.16;
  letter-spacing: 0.01em; color: var(--bo-dark); }
.bo-strip-head p { margin-top: 20px; font-size: 15.5px; line-height: 1.95;
  color: #6f6f78; letter-spacing: -0.01em;
  /* 한국어는 기본 줄바꿈이 글자 단위라 '공간입니 / 다.' 처럼 낱글자가 떨어진다 → 어절 단위로. */
  word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; }
.bo-strip { overflow: hidden; width: 100%; -webkit-mask-image:
  linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.bo-strip-track { display: flex; align-items: center; gap: var(--tile-gap); width: max-content;
  margin: 0; padding: 0; list-style: none; }
.bo-strip-track.is-rolling { animation: bo-strip-scroll linear infinite; }
/* 호버 일시정지는 뺐다 — 띠가 화면 절반을 차지해 커서가 얹히기만 해도 멈춘 것처럼 보인다.
   띠 안에 누를 것도 없어서 멈출 이유가 없다 (원장 지적 2026-08-26). */
.bo-strip-track li { flex: 0 0 auto; margin: 0; width: var(--tile-w); }
.bo-strip-track img { display: block; width: var(--tile-w); height: var(--tile-h);
  max-width: none; border-radius: 14px; object-fit: cover; background: #f4f3f1; }
@keyframes bo-strip-scroll { from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - 11px), 0, 0); } }
@media (max-width: 1023px) {
  .bo-strip-wrap { --tile-w: min(78vw, 430px); --tile-h: calc(min(78vw, 430px) / 1.55);
    --tile-gap: 12px; padding: 62px 0 66px; }
  /* 좌우 56px: 우측 고정 CTA(.bo-float)가 가운데정렬 소제목을 덮던 문제 (N10과 같은 유형).
     가운데정렬이라 한쪽만 비울 수 없어 대칭으로 준다 — 실측 텍스트 우측 끝 332px < 플로팅 334px. */
  /* 우측 62px: 고정 CTA(.bo-float)가 가운데정렬 소제목을 덮던 문제 (N10과 같은 유형).
     좌우를 똑같이 비우면 소제목이 5줄로 흩어져서, 오른쪽만 더 비우고 왼쪽은 24px로 둔다
     (실측 390·430px 폭에서 3줄 유지 + 플로팅과 겹침 0). */
  .bo-strip-head { margin-bottom: 32px; padding: 0 62px 0 24px; }
  .bo-strip-head p { margin-top: 14px; font-size: 13.5px; line-height: 1.85; }
  .bo-strip-track img { border-radius: 10px; }
  @keyframes bo-strip-scroll { from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(calc(-50% - 6px), 0, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .bo-strip-track.is-rolling { animation: none; }
  .bo-strip { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}