/*
 * 상품(쇼핑몰) 스킨 "vifit" 전용 스타일 (public/skins/product/vifit/style.css)
 * 상품 목록(.vl-) · 상품 상세(.vi-) · 장바구니(.vc-) · 쿠폰/후기 보조(.cp-) · 주문 상세(.ov-) 규칙입니다.
 * 이 스킨을 쓰는 쇼핑몰 화면에 자동으로 붙습니다. 머리말·바닥글·주문서 등 공용 규칙은 public/vfit/vfit.css 에 있습니다.
 */

.vl-main { max-width: 1100px; margin: 0 auto; padding: 84px 24px 120px; box-sizing: border-box; min-height: 560px; }
.vl-title { margin: 0; font-size: 28px; font-weight: 500; letter-spacing: -.02em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vl-title i { font-style: normal; color: var(--vf-sub); font-weight: 300; }
.vl-title b { font-weight: 700; }
.vl-tabs { display: flex; gap: 30px; margin-top: 40px; border-bottom: 1px solid #e4e1ee; font-size: 14.5px; overflow-x: auto; }
.vl-tabs a { padding: 0 0 14px; color: var(--vf-sub); white-space: nowrap; margin-bottom: -1px; border-bottom: 2px solid transparent; }
.vl-tabs a.on { color: var(--vf-ink); font-weight: 800; border-bottom-color: var(--vf-pt); }
.vl-bar { display: flex; justify-content: space-between; align-items: center; margin-top: 30px; font-size: 13px; color: var(--vf-sub); }
.vl-sort select { border: 0; background: none; color: #4a4560; font: inherit; font-size: 13px; cursor: pointer; padding: 4px 2px; }
.vl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 44px; }
.vl-card__img { display: block; background: #ececee; aspect-ratio: 1 / 1; overflow: hidden; }
.vl-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vl-card h2 { margin: 16px 0 0; font-size: 15px; font-weight: 700; }
.vl-card p { margin: 6px 0 0; font-size: 12.5px; color: var(--vf-sub); }
.vl-card del { display: block; margin-top: 16px; font-size: 12px; color: #aaa6ba; }
.vl-card__price { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.vl-card__price b { font-size: 19px; font-weight: 800; }
.vl-card__price span { background: var(--vf-lav); color: var(--vf-pt); font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; }
.vl-empty { margin: 80px 0; text-align: center; color: var(--vf-sub); }
.vl-pager { margin-top: 88px; }
.vl-pager .kc-pager { display: flex; justify-content: center; }
.vl-pager .board-nav { display: flex; justify-content: center; align-items: center; gap: 22px; font-size: 14px; color: var(--vf-sub); }
.vl-pager a { color: inherit; padding: 6px 10px; }
.vl-pager .active, .vl-pager [aria-current] { color: #3b1fa8; font-weight: 700; border-bottom: 2px solid #3b1fa8; }
@media (max-width: 767.98px) {
  .vl-main { padding: 48px 20px 80px; }
  .vl-title { font-size: 22px; }
  .vl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.vl-pager__one { display: flex; justify-content: center; align-items: center; gap: 30px; font-size: 14px; color: var(--vf-sub); }
.vl-pager__one b { color: #3b1fa8; font-weight: 700; border-bottom: 2px solid #3b1fa8; padding: 6px 14px; }
.vi-wrap { max-width: 1200px; margin: 0 auto; padding: 56px 0 100px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 40px; align-items: start; }
.vi-left { min-width: 0; width: 100%; max-width: 760px; }
@media (max-width: 1248px) {
  .vi-wrap { padding-left: 24px; padding-right: 24px; }
}
.vi-gallery { position: relative; }
.vi-timer { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; background: #e9e1fb; color: #3b1fa8; font-size: 12.5px; font-weight: 700; border-radius: 12px 12px 0 0; }
.vi-timer b { display: inline-block; min-width: 26px; text-align: center; background: #fff; color: #2a1560; border-radius: 4px; padding: 2px 4px; font-variant-numeric: tabular-nums; }
.vi-main { position: relative; height: 780px; background: #ececee; overflow: hidden; }
.vi-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.vi-main img.on { opacity: 1; }
.vi-noimg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; color: #c9c5d8; }
.vi-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #141226; font-size: 20px; cursor: pointer; }
.vi-nav--prev { left: 12px; }
.vi-nav--next { right: 12px; }
.vi-count { position: absolute; right: 12px; bottom: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(20, 18, 38, .6); color: #fff; font-size: 11px; }
.vi-tabs { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 40px; background: #fff; border-bottom: 1px solid #e4e1ee; }
.vi-tabs a { text-align: center; padding: 16px 0; font-size: 13.5px; color: var(--vf-sub); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vi-tabs a b { font-weight: 700; color: inherit; }
.vi-tabs a.on { color: var(--vf-ink); font-weight: 700; border-bottom-color: #3b1fa8; }
.vi-sec { padding-top: 36px; scroll-margin-top: 64px; }
.vi-sech { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.vi-sech h2 { margin: 0; font-size: 17px; font-weight: 800; padding-left: 12px; border-left: 3px solid var(--vf-ink); line-height: 1.1; }
.vi-sech h2 small { font-weight: 400; color: var(--vf-sub); font-size: 12px; }
.vi-empty { padding: 36px 0; text-align: center; color: var(--vf-sub); font-size: 13px; }
.vi-detail { max-height: 700px; overflow: hidden; position: relative; font-size: 15px; line-height: 1.8; }
.vi-detail img { max-width: 100%; height: auto; }
.vi-detail:not(.is-open)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.vi-detail.is-open { max-height: none; }
.vi-more { display: block; width: 100%; margin-top: 20px; padding: 14px; border: 1px solid #d9d6e6; background: #fff; border-radius: 4px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--vf-ink); }
.vi-rvsum { display: grid; grid-template-columns: 1fr 1fr; background: #f6f6f8; border-radius: 4px; }
.vi-rvsum__l { padding: 30px 20px; text-align: center; border-right: 1px solid #ebe9f2; }
.vi-rvsum__n { font-family: 'Jost', sans-serif; font-size: 40px; font-weight: 500; line-height: 1; }
.vi-stars { margin-top: 8px; color: #3b1fa8; letter-spacing: 3px; font-size: 14px; }
.vi-rvsum__l p { margin: 8px 0 18px; font-size: 12px; color: var(--vf-sub); }
.vi-rvsum__l p b { color: #3b1fa8; }
.vi-rvsum__r { padding: 30px 28px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.vi-bar { display: grid; grid-template-columns: 78px 1fr 36px; align-items: center; gap: 10px; font-size: 11px; color: var(--vf-sub); }
.vi-bar i { display: block; height: 4px; background: #e4e1ee; border-radius: 2px; overflow: hidden; }
.vi-bar u { display: block; height: 4px; background: #3b1fa8; }
.vi-bar em { font-style: normal; text-align: right; }
.vi-sub { margin: 36px 0 8px; padding-bottom: 10px; border-bottom: 1px solid #e4e1ee; font-size: 12.5px; }
.vi-rvlist { list-style: none; margin: 0; padding: 0; }
.vi-rvlist li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; padding: 26px 0; border-bottom: 1px solid #ececf3; }
.vi-rv__stars { font-size: 12px; color: #3b1fa8; }
.vi-rv__stars em { font-style: normal; color: var(--vf-ink); margin-left: 6px; }
.vi-rvlist h3 { margin: 10px 0 6px; font-size: 14px; font-weight: 700; }
.vi-rvlist p { margin: 0; font-size: 13px; line-height: 1.7; color: #4a4560; }
.vi-rv__who { font-size: 11.5px; color: var(--vf-sub); border-left: 1px solid #ececf3; padding-left: 20px; }
.vi-rv__who small { color: #aaa6ba; }
.vi-qa { border-top: 1px solid #ececf3; font-size: 12.5px; }
.vi-qa__head, .vi-qa__row > summary { display: grid; grid-template-columns: 56px minmax(0, 1fr) 90px 90px 70px; gap: 8px; padding: 14px 8px; align-items: center; text-align: center; list-style: none; }
.vi-qa__head { background: #f6f6f8; font-weight: 600; color: #4a4560; }
.vi-qa__row { border-bottom: 1px solid #ececf3; }
.vi-qa__row > summary { cursor: pointer; }
.vi-qa__row > summary::-webkit-details-marker { display: none; }
.vi-qa__row .t { text-align: left; }
.vi-qa__row em { font-style: normal; font-size: 11px; color: var(--vf-sub); }
.vi-qa__row em.ok { color: #3b1fa8; font-weight: 700; }
.vi-qa__body { padding: 8px 24px 24px 72px; font-size: 13px; line-height: 1.7; color: #4a4560; }
.vi-qa__ans { margin-top: 14px; padding: 14px; background: #f6f6f8; border-radius: 6px; }
.vi-form { margin-top: 24px; border: 1px solid #e4e1ee; border-radius: 6px; }
.vi-form > summary { padding: 14px 16px; font-weight: 700; font-size: 13px; cursor: pointer; }
.vi-form form { padding: 0 16px 16px; }
.vi-form input[type=text], .vi-form select, .vi-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d9d6e6; border-radius: 4px; font: inherit; font-size: 13px; margin-bottom: 8px; background: #fff; color: var(--vf-ink); }
.vi-form__row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
.vi-form__act { display: flex; gap: 14px; align-items: center; justify-content: flex-end; font-size: 12px; }
.vi-guide h3 { margin: 28px 0 10px; font-size: 14px; font-weight: 700; }
.vi-guide h3:first-child { margin-top: 0; }
.vi-guide p, .vi-guide li { font-size: 12.5px; line-height: 1.85; color: #4a4560; margin: 0; }
.vi-guide ul { margin: 0; padding: 0; list-style: none; }
.vi-right { position: sticky; top: 24px; }
.vi-buy h1 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.45; }
.vi-sum { margin: 8px 0 0; font-size: 12.5px; color: var(--vf-sub); line-height: 1.6; }
.vi-price { margin: 18px 0 0; border-top: 1px solid #e4e1ee; }
.vi-price > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; padding: 9px 0; border-bottom: 1px solid #f0eef6; font-size: 12px; }
.vi-price dt { color: var(--vf-sub); }
.vi-price dd { margin: 0; }
.vi-price del { color: #aaa6ba; }
.vi-price__now b { font-size: 18px; font-weight: 800; }
.vi-price__now span { margin-left: 8px; background: var(--vf-lav); color: var(--vf-pt); font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.vi-price .pt { color: #3b1fa8; font-size: 15px; }
.vi-price small { color: var(--vf-sub); font-size: 11px; }
.vi-coupons { margin-top: 14px; padding: 12px; background: #f6f6f8; border-radius: 6px; font-size: 12px; }
.vi-coupons > b { display: block; margin-bottom: 6px; }
.vi-coupon { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.vi-coupon small { color: var(--vf-sub); }
.vi-info { margin: 14px 0 0; font-size: 12px; }
.vi-info > div { display: grid; grid-template-columns: 64px 1fr; padding: 6px 0; }
.vi-info dt { color: var(--vf-sub); }
.vi-info dd { margin: 0; }
.vi-alert { margin-top: 18px; padding: 14px; background: #f1eff6; border-radius: 6px; font-size: 13px; text-align: center; }
.vi-alert--ok { background: #e9f6ee; text-align: left; font-size: 12px; margin: 12px 0; }
.vi-opts { margin: 18px 0 0; padding: 0; border: 1px solid #e4e1ee; border-radius: 4px; }
.vi-opts legend { float: left; width: 100%; padding: 12px 14px; font-size: 12px; font-weight: 700; border-bottom: 1px solid #e4e1ee; box-sizing: border-box; }
.vi-opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; font-size: 12.5px; border-bottom: 1px solid #f0eef6; cursor: pointer; clear: both; }
.vi-opt:last-child { border-bottom: 0; }
.vi-opt.is-off { opacity: .5; cursor: default; }
.vi-opt input { accent-color: #3b1fa8; }
.vi-opt__p { font-weight: 700; }
.vi-opt em { font-style: normal; color: #c0392b; margin-left: 6px; font-size: 11px; }
.vi-qty { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 12.5px; font-weight: 600; }
.vi-qty__ctl { display: inline-flex; border: 1px solid #d9d6e6; border-radius: 4px; overflow: hidden; }
.vi-qty__ctl button { width: 34px; height: 34px; border: 0; background: #fff; font-size: 16px; cursor: pointer; }
.vi-qty__ctl input { width: 54px; height: 34px; border: 0; border-left: 1px solid #d9d6e6; border-right: 1px solid #d9d6e6; text-align: center; font: inherit; font-size: 13px; -moz-appearance: textfield; }
.vi-free { margin-top: 18px; text-align: center; font-size: 11.5px; color: #4a4560; }
.vi-free p { margin: 0 0 6px; }
.vi-free b { color: #3b1fa8; }
.vi-free i { display: block; height: 4px; background: #e4e1ee; border-radius: 2px; overflow: hidden; }
.vi-free u { display: block; height: 4px; width: 0; background: #3b1fa8; transition: width .2s; }
.vi-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-top: 16px; border-top: 1px solid #e4e1ee; font-size: 12.5px; font-weight: 700; }
.vi-total b { font-size: 20px; font-weight: 800; color: #3b1fa8; }
.vi-actions { display: grid; grid-template-columns: 44px 1fr 1.6fr; gap: 6px; margin-top: 16px; }
.vi-actions:not(:has(.vi-wish)) { grid-template-columns: 1fr 1.6fr; }
.vi-wish { height: 48px; border: 1px solid #d9d6e6; background: #fff; border-radius: 4px; font-size: 18px; cursor: pointer; color: #4a4560; }
.vi-wish.active { color: #c0392b; border-color: #c0392b; }
.vi-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 16px; height: 40px; border: 1px solid #d9d6e6; background: #fff; color: var(--vf-ink); border-radius: 4px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none; }
.vi-btn:hover { opacity: .85; }
.vi-btn--lg { height: 48px; font-size: 13.5px; }
.vi-btn--sm { height: 30px; font-size: 11.5px; padding: 0 12px; white-space: nowrap; }
.vi-btn--dark { background: #1d1247; border-color: #1d1247; color: #fff !important; }
.vi-btn.is-off { opacity: .55; cursor: default; }
.vi-note { font-size: 12px; color: var(--vf-sub); }
.vi-ship { display: flex; gap: 12px; align-items: center; margin-top: 14px; padding: 14px; background: #f6f6f8; border-radius: 4px; font-size: 12px; line-height: 1.5; }
.vi-ship i { font-style: normal; font-size: 20px; }
.vi-ship small { color: var(--vf-sub); }
.vi-demo { display: flex; gap: 8px; margin-top: 14px; }
.vi-related { max-width: 1100px; margin: 0 auto; padding: 0 24px 100px; box-sizing: border-box; }
.vi-related > h2 { margin: 0 0 24px; font-size: 18px; font-weight: 800; }
@media (max-width: 991.98px) {
  .vi-wrap { grid-template-columns: 1fr; gap: 32px; padding: 0 0 60px; }
  .vi-left { order: 2; padding: 0 20px; }
  .vi-right { order: 1; position: static; padding: 0 20px; }
  .vi-gallery { margin: 0 -20px; }
  .vi-main { height: auto; aspect-ratio: 5 / 6; }
  .vi-tabs { top: 0; }
  .vi-rvsum { grid-template-columns: 1fr; }
  .vi-rvsum__l { border-right: 0; border-bottom: 1px solid #ebe9f2; }
  .vi-rvlist li { grid-template-columns: 1fr; gap: 10px; }
  .vi-rv__who { border-left: 0; padding-left: 0; }
  .vi-qa__head, .vi-qa__row > summary { grid-template-columns: 36px minmax(0, 1fr) 70px; }
  .vi-qa__head span:nth-child(n+4), .vi-qa__row > summary span:nth-child(n+4) { display: none; }
  .vi-qa__body { padding-left: 16px; padding-right: 16px; }
}
.vc-main { max-width: 1240px; margin: 0 auto; padding: 56px 24px 110px; box-sizing: border-box; min-height: 560px; }
.vc-title { margin: 0; text-align: center; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.vc-empty { text-align: center; padding: 110px 0 70px; color: var(--vf-sub); }
.vc-empty p { margin: 0 0 22px; font-size: 15px; }
.vc-tabs { display: flex; justify-content: center; margin-top: 52px; border-bottom: 1px solid #e4e1ee; }
.vc-tabs button { padding: 16px 38px; border: 0; background: none; font: inherit; font-size: 14px; color: #6b6780; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.vc-tabs button.on { color: var(--vf-ink); font-weight: 700; border-bottom-color: #1d1247; }
.vc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; margin-top: 36px; }
.vc-grouph, .vc-groupf { background: #f6f6f8; padding: 13px 16px; font-size: 13px; font-weight: 500; }
.vc-groupf { margin-top: 28px; border-bottom: 1px solid #e4e1ee; background: #f6f6f8; }
.vc-none { margin: 0; padding: 70px 0; text-align: center; color: var(--vf-sub); font-size: 13px; }
.vc-item { position: relative; display: grid; grid-template-columns: 26px 84px minmax(0, 1fr) auto; gap: 14px; padding: 26px 16px 28px; border-bottom: 1px solid #f0eef6; }
.vc-item.is-off { opacity: .6; }
.vc-item__chk { padding-top: 34px; }
.vc-item__chk input { width: 16px; height: 16px; accent-color: #1d1247; }
.vc-item__img { display: block; width: 84px; height: 84px; background: #ececee; overflow: hidden; }
.vc-item__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc-item__body h2 { margin: 0; font-size: 15px; font-weight: 700; }
.vc-item__body p { margin: 6px 0 0; font-size: 12.5px; color: #4a4560; }
.vc-item__price { font-size: 13px !important; color: var(--vf-ink) !important; }
.vc-item__ship { color: var(--vf-sub) !important; font-size: 12px !important; }
.vc-item__opt { margin-top: 18px !important; font-size: 12px !important; }
.vc-item__warn { color: #c0392b !important; }
.vc-item__sum { margin-top: 16px !important; font-size: 13px !important; }
.vc-item__sum b { font-size: 16px; font-weight: 800; margin-left: 4px; }
.vc-qty { display: inline-flex; align-items: stretch; margin-top: 14px; }
.vc-qty button, .vc-qty input { height: 32px; border: 1px solid #d9d6e6; background: #fff; font: inherit; font-size: 13px; }
.vc-qty > button { width: 32px; cursor: pointer; }
.vc-qty input { width: 56px; text-align: center; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.vc-qty .vc-qty__apply { width: auto; padding: 0 14px; margin-left: 8px; font-size: 12px; }
.vc-item__act { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-height: 120px; }
.vc-x { border: 0; background: none; font-size: 28px; line-height: 1; color: #4a4560; cursor: pointer; padding: 0 4px; }
.vc-item__btns { display: flex; gap: 8px; }
.vc-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 18px; border: 1px solid #d9d6e6; background: #fff; color: var(--vf-ink); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; border-radius: 0; }
.vc-btn:hover { background: #f6f6f8; opacity: 1; }
.vc-btn--dark { background: #1d1247; border-color: #1d1247; color: #fff !important; }
.vc-btn--dark:hover { background: #2b1b5c; }
.vc-tools { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; }
.vc-tools > div { display: flex; gap: 8px; }
.vc-side { position: sticky; top: 24px; }
.vc-sum { margin: 0; padding: 22px 20px; background: #f6f6f8; }
.vc-sum > div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 12.5px; }
.vc-sum dt { color: #4a4560; }
.vc-sum dd { margin: 0; }
.vc-sum b { font-size: 16px; font-weight: 800; }
.vc-sum__total { margin-top: 12px; padding-top: 18px !important; border-top: 1px solid #e0dded; }
.vc-sum__total dt { font-weight: 800; color: var(--vf-ink); font-size: 13px; }
.vc-sum__total b { font-size: 18px; }
.vc-order { display: block; width: 100%; height: 48px; margin-top: 12px; border: 1px solid #d9d6e6; background: #fff; color: var(--vf-ink); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 0; }
.vc-order--dark { margin-top: 20px; background: linear-gradient(90deg, #1b1040, #2b1b5c); border-color: #1d1247; color: #fff; }
.vc-order:hover { opacity: .9; }
.vc-note { display: flex; gap: 8px; margin: 18px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--vf-sub); }
.vc-note i { flex: none; width: 14px; height: 14px; border: 1px solid #4a4560; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; color: #4a4560; margin-top: 2px; }
.vc-guide { margin-top: 72px; border: 1px solid #e4e1ee; }
.vc-guide h2 { margin: 0; padding: 18px 20px; font-size: 13.5px; font-weight: 800; border-bottom: 1px solid #ececf3; }
.vc-guide > div { padding: 22px 20px 26px; }
.vc-guide h3 { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; }
.vc-guide ul { margin: 0; padding: 0; list-style: none; }
.vc-guide li { position: relative; padding-left: 12px; font-size: 12px; line-height: 2; color: #4a4560; }
.vc-guide li::before { content: ""; position: absolute; left: 0; top: 14px; width: 3px; height: 3px; border-radius: 50%; background: #8a869c; }
@media (max-width: 991.98px) {
  .vc-grid { grid-template-columns: 1fr; gap: 28px; }
  .vc-side { position: static; }
}
@media (max-width: 575.98px) {
  .vc-main { padding: 36px 16px 80px; }
  .vc-title { font-size: 22px; }
  .vc-tabs button { padding: 14px 18px; }
  .vc-item { grid-template-columns: 22px 64px minmax(0, 1fr); padding: 20px 8px; }
  .vc-item__img { width: 64px; height: 64px; }
  .vc-item__act { grid-column: 1 / -1; flex-direction: row-reverse; min-height: 0; align-items: center; }
  .vc-tools { flex-direction: column; }
}
.cp-reg { display: flex; align-items: center; gap: 22px; padding: 20px 26px; border-left: 6px solid #2a1a5c; }
.cp-reg__t { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.cp-reg__t b { font-size: 13.5px; }
.cp-reg__t small { font-size: 11px; color: #aaa6ba; }
.cp-reg input { flex: 1; min-width: 0; height: 40px; border: 1px solid #e0dde8; border-radius: 8px; background: #f7f7f9; padding: 0 14px; font-size: 14px; }
.cp-reg button { height: 40px; padding: 0 24px; border: 0; border-radius: 8px; background: linear-gradient(90deg, #2a1a5c, #1b1040); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.cp-box { min-height: 220px; }
.cp-empty { padding: 70px 0 76px; }
.cp-h { margin: 0; padding: 20px 24px 10px; font-size: 14px; font-weight: 800; }
.cp-h small { font-size: 12px; font-weight: 400; color: #8a869c; margin-left: 6px; }
.cp-list { list-style: none; margin: 0; padding: 0 12px 10px; }
.cp-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 120px; gap: 16px; align-items: center; padding: 16px 12px; border-top: 1px solid #f0eef6; font-size: 13px; }
.cp-main b { display: block; font-weight: 700; }
.cp-main span { font-size: 11.5px; color: #8a869c; }
.cp-ben { color: #5b3fc4; font-size: 15px; }
.cp-date { text-align: right; font-size: 12px; color: #8a869c; }
.cp-get { height: 32px; padding: 0 18px; border: 1px solid #2a1a5c; border-radius: 6px; background: #fff; color: #2a1a5c; font-size: 12px; font-weight: 700; cursor: pointer; }
.cp-list.is-past { opacity: .6; }
@media (max-width: 640px) {
  .cp-reg { flex-wrap: wrap; }
  .cp-reg input { flex-basis: 100%; order: 3; }
  .cp-list li { grid-template-columns: 1fr auto; }
  .cp-date { grid-column: 1 / -1; text-align: left; }
}
.vi-timer em { font-style: normal; color: #3b1fa8; }
.vi-price__cp dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vi-price__cp b { font-size: 16px; font-weight: 800; }
.vi-price__cp dt i { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 2px; border: 1px solid #aaa6ba; border-radius: 50%; font-size: 9px; font-style: normal; color: #8a869c; cursor: help; }
.vi-cpbtn { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border: 0; border-radius: 999px; background: #1d1247; color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: none; }
.vi-cpbtn.is-off { background: #d9d6e6; color: #6c6880; cursor: default; }
.vi-price form { margin: 0; }
details.vi-coupons > summary { cursor: pointer; font-weight: 700; list-style: none; }
details.vi-coupons > summary::-webkit-details-marker { display: none; }
details.vi-coupons[open] > summary { margin-bottom: 6px; }
.vi-eta { display: grid; grid-template-columns: 64px 1fr; gap: 6px; margin-top: 18px; padding: 0 2px; font-size: 12.5px; }
.vi-eta > span { color: #8a869c; font-size: 12px; }
.vi-eta b { font-weight: 800; }
.vi-eta small { display: block; margin-top: 6px; font-size: 11.5px; color: #6c6880; }
.vi-optbox { margin-top: 18px; border: 1px solid #d9d6e6; border-radius: 8px; overflow: hidden; background: #fff; }
.vi-optbox > summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.vi-optbox > summary::-webkit-details-marker { display: none; }
.vi-optbox > summary::after { content: ''; width: 7px; height: 7px; border: solid #4a4560; border-width: 1.5px 0 0 1.5px; transform: rotate(45deg); margin-top: 3px; transition: transform .15s; }
.vi-optbox:not([open]) > summary::after { transform: rotate(225deg); margin-top: -2px; }
.vi-optbox .vi-opts { margin: 0; border: 0; border-top: 1px solid #ecebf2; border-radius: 0; }
.vi-optbox .vi-opts legend { float: none; display: block; width: auto; padding: 10px 16px 0; border: 0; font-size: 11px; font-weight: 400; color: #8a869c; }
.vi-optbox .vi-opt { position: relative; display: block; padding: 14px 16px; border-bottom: 1px solid #ecebf2; font-size: 12.5px; }
.vi-optbox .vi-opt input { position: absolute; opacity: 0; pointer-events: none; }
.vi-optbox .vi-opt:has(input:checked) { background: #faf8ff; box-shadow: inset 3px 0 0 #3b1fa8; }
.vi-optbox .vi-opt__t { display: block; font-size: 13px; }
.vi-optbox .vi-opt__p { display: block; margin-top: 4px; font-size: 14px; font-weight: 800; }
.vi-optbox .vi-opt__p small { font-size: 11px; font-weight: 400; color: #5b3fc4; }
.vi-free p { font-size: 12.5px; }
.vi-free__l { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: #8a869c; }
.vi-free__l em { font-style: normal; }
.vi-total b small { font-size: 11px; font-weight: 400; color: #8a869c; }
.vi-ship { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 16px; border-radius: 6px; background: #f4f4f6; }
.vi-ship__i { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; background: #1d1247; color: #fff; }
.vi-ship b { display: block; font-size: 13px; font-weight: 800; }
.vi-ship span:not(.vi-ship__i) { display: block; margin-top: 4px; font-size: 11.5px; color: #6c6880; }
.vi-ship em { font-style: normal; font-weight: 700; color: #3b1fa8; font-variant-numeric: tabular-nums; }
.vi-kakao { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 13px 16px; border-radius: 4px; background: #fee500; color: #191919; font-size: 12.5px; text-decoration: none; }
.vi-kakao i { font-style: normal; font-size: 18px; }
html.vf-head-fixed .vi-tabs { top: 70px; }
.ov-note { padding: 16px 20px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; border: 1px solid #e6e4ee; background: #fff; }
.ov-note b { font-weight: 800; }
.ov-note.is-info { background: #f1f6ff; border-color: #cfe0ff; color: #1f3a6b; }
.ov-note.is-warn { background: #fff8e6; border-color: #ffe2a3; color: #6b4a00; }
.ov-note.is-ok { background: #effaf2; border-color: #c4ead0; color: #1f5a33; }
.ov-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 14px; margin-left: 8px; border: 1px solid #c9c6d6; border-radius: 6px; background: #fff; color: #141226; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; text-decoration: none; line-height: 1; white-space: nowrap; }
.ov-btn--dark { background: #2f2c28; border-color: #2f2c28; color: #fff; }
.ov-btn--line { margin: 8px 0 0; border-color: #c92a4a; color: #c92a4a; }
.ov-mute { color: #8a869c; font-size: 12px; }
.ov-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid #f0eef6; }
.ov-line:first-child { border-top: 0; padding-top: 0; }
.ov-line__t { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12.5px; color: #6c6880; }
.ov-line__t b { font-size: 14px; color: #141226; }
.ov-line__t a { text-decoration: none; }
.ov-line__p { font-weight: 800; font-size: 14px; text-align: right; }
.ov-line__a { min-width: 84px; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.ov-kv { margin: 0; display: grid; gap: 12px; }
.ov-kv > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: 13.5px; }
.ov-kv dt { color: #8a869c; font-weight: 400; }
.ov-kv dd { margin: 0; }
.ov-track { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ov-track li { display: grid; grid-template-columns: 130px 90px minmax(0, 1fr); gap: 10px; font-size: 12.5px; }
.ov-track span { color: #8a869c; }
.ov-track em { font-style: normal; color: #4a4560; }
.ov-pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; background: #ebe5fb; color: #4a2fb0; font-size: 11.5px; font-weight: 700; }
.ov-pill.is-ok { background: #e3f6ea; color: #1f7a3f; }
.ov-pill.is-wait { background: #fff1d6; color: #8a5a00; }
.ov-pill.is-off { background: #eceaf1; color: #6c6880; }
.ov-rt { padding: 14px 0; border-top: 1px solid #f0eef6; }
.ov-rt:first-child { border-top: 0; padding-top: 0; }
.ov-rt__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.ov-rt__b { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.7; color: #4a4560; }
.ov-seller { color: #2f6bff; }
.ov-rt form { margin: 0; }
.ov-rt .ov-btn { margin-left: 0; }
.ov-rt__f { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ov-rt__f select, .ov-rt__f input { height: 36px; border: 1px solid #c9c6d6; border-radius: 4px; padding: 0 10px; font: inherit; font-size: 13px; background: #fff; }
.ov-form .od-f select, .ov-form .od-f input, .ov-form .od-f textarea { width: 100%; box-sizing: border-box; }
.ov-qty { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; font-size: 13.5px; }
.ov-qty input { width: 80px; height: 36px; border: 1px solid #c9c6d6; border-radius: 4px; padding: 0 8px; font: inherit; }
.ov-sum2 { margin: 0; padding: 0 22px 14px; display: grid; gap: 10px; }
.ov-sum2 > div { display: flex; justify-content: space-between; font-size: 13px; }
.ov-sum2 dd { margin: 0; }
.ov-rw { margin: -8px 22px 6px; text-align: right; }
.ov-pay { display: flex; align-items: center; justify-content: center; text-decoration: none; margin-top: 6px; }
.ov-confirm p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; }
.ov-confirm .ov-btn { margin-left: 0; font-size: 13.5px; font-weight: 700; }
.ov-confirm .ov-btn--dark:hover { background: #1b1916; }
.ov-cancel { margin: 0; text-align: center; }
.ov-cancel button { border: 0; background: none; padding: 14px 0 20px; font-size: 12px; color: #c92a4a; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) {
  .ov-line { grid-template-columns: 1fr auto; }
  .ov-line__a { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
  .ov-kv > div { grid-template-columns: 1fr; gap: 2px; }
  .ov-track li { grid-template-columns: 1fr; }
}
.ov-pay { gap: 8px; width: calc(100% - 44px); height: 48px; box-sizing: border-box; margin: 6px 22px 22px; border: 0; border-radius: 6px; background: #2f2c28; cursor: pointer; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; text-decoration: none; transition: background .15s, transform .15s; }
.ov-pay:hover, .ov-pay:focus-visible { color: #fff; background: #1b1916; transform: translateY(-1px); }
.ov-pay i { font-size: 13px; }
.ov-cancel { margin: -10px 22px 18px; }
.ov-cancel button { display: block; width: 100%; height: 42px; padding: 0; border: 1px solid #e8c7cf; border-radius: 6px; background: #fff; color: #c92a4a; font-size: 13px; font-weight: 700; text-decoration: none; }
.ov-cancel button:hover { background: #fff5f7; border-color: #c92a4a; }
.od-side a.od-pay.ov-pay { display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: calc(100% - 44px); height: 48px; margin: 6px 22px 22px; padding: 0; border-radius: 6px; line-height: 1; text-align: center; white-space: nowrap; text-decoration: none; }
.od-side a.ov-pay, .od-side a.ov-pay:link, .od-side a.ov-pay:visited, .od-side a.ov-pay:hover, .od-side a.ov-pay i { color: #fff !important; }

/* ==== BEGIN dark (tools/gen_vfit_dark.py) ==== */
html[data-bs-theme="dark"] .vl-tabs { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vl-sort select { color: #c9c6d6; }
html[data-bs-theme="dark"] .vl-card__img { background: #2a2735; }
html[data-bs-theme="dark"] .vl-pager .active,
html[data-bs-theme="dark"] .vl-pager [aria-current] { color: #a99bff; }
html[data-bs-theme="dark"] .vl-pager__one b { color: #a99bff; }
html[data-bs-theme="dark"] .vi-timer { background: #2a2145; color: #a99bff; }
html[data-bs-theme="dark"] .vi-timer b { background: #17151f; color: #d9d2ff; }
html[data-bs-theme="dark"] .vi-main { background: #2a2735; }
html[data-bs-theme="dark"] .vi-nav { color: #ecebf5; }
html[data-bs-theme="dark"] .vi-tabs { background: #17151f; border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-detail:not(.is-open)::after { background: linear-gradient(rgba(255, 255, 255, 0), #17151f); }
html[data-bs-theme="dark"] .vi-more { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vi-rvsum { background: #201d2a; }
html[data-bs-theme="dark"] .vi-stars { color: #a99bff; }
html[data-bs-theme="dark"] .vi-rvsum__l p b { color: #a99bff; }
html[data-bs-theme="dark"] .vi-bar i { background: #2e2b39; }
html[data-bs-theme="dark"] .vi-sub { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-rvlist li { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-rv__stars { color: #a99bff; }
html[data-bs-theme="dark"] .vi-rvlist p { color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-rv__who { border-left: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-qa { border-top: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-qa__head { background: #201d2a; color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-qa__row { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-qa__row em.ok { color: #a99bff; }
html[data-bs-theme="dark"] .vi-qa__body { color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-qa__ans { background: #201d2a; }
html[data-bs-theme="dark"] .vi-form { border: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-form input[type=text],
html[data-bs-theme="dark"] .vi-form select,
html[data-bs-theme="dark"] .vi-form textarea { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vi-guide p,
html[data-bs-theme="dark"] .vi-guide li { color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-price { border-top: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-price > div { border-bottom: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .vi-price .pt { color: #a99bff; }
html[data-bs-theme="dark"] .vi-coupons { background: #201d2a; }
html[data-bs-theme="dark"] .vi-alert { background: #25222f; }
html[data-bs-theme="dark"] .vi-opts { border: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-opts legend { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-opt { border-bottom: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .vi-opt em { color: #ff7a7a; }
html[data-bs-theme="dark"] .vi-qty__ctl { border: 1px solid #3d3a4a; }
html[data-bs-theme="dark"] .vi-qty__ctl button { background: #17151f; }
html[data-bs-theme="dark"] .vi-qty__ctl input { border-left: 1px solid #3d3a4a; border-right: 1px solid #3d3a4a; }
html[data-bs-theme="dark"] .vi-free { color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-free b { color: #a99bff; }
html[data-bs-theme="dark"] .vi-free i { background: #2e2b39; }
html[data-bs-theme="dark"] .vi-total { border-top: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-total b { color: #a99bff; }
html[data-bs-theme="dark"] .vi-wish { border: 1px solid #3d3a4a; background: #17151f; color: #c9c6d6; }
html[data-bs-theme="dark"] .vi-wish.active { color: #ff7a7a; }
html[data-bs-theme="dark"] .vi-btn { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vi-ship { background: #201d2a; }
html[data-bs-theme="dark"] .vc-tabs { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vc-tabs button { color: #a9a5ba; }
html[data-bs-theme="dark"] .vc-grouph,
html[data-bs-theme="dark"] .vc-groupf { background: #201d2a; }
html[data-bs-theme="dark"] .vc-groupf { border-bottom: 1px solid #34313f; background: #201d2a; }
html[data-bs-theme="dark"] .vc-item { border-bottom: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .vc-item__img { background: #2a2735; }
html[data-bs-theme="dark"] .vc-item__body p { color: #c9c6d6; }
html[data-bs-theme="dark"] .vc-item__warn { color: #ff7a7a !important; }
html[data-bs-theme="dark"] .vc-qty button,
html[data-bs-theme="dark"] .vc-qty input { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vc-x { color: #c9c6d6; }
html[data-bs-theme="dark"] .vc-btn { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vc-btn:hover { background: #201d2a; }
html[data-bs-theme="dark"] .vc-sum { background: #201d2a; }
html[data-bs-theme="dark"] .vc-sum dt { color: #c9c6d6; }
html[data-bs-theme="dark"] .vc-sum__total { border-top: 1px solid #34313f; }
html[data-bs-theme="dark"] .vc-order { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vc-note i { color: #c9c6d6; }
html[data-bs-theme="dark"] .vc-guide { border: 1px solid #34313f; }
html[data-bs-theme="dark"] .vc-guide h2 { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vc-guide li { color: #c9c6d6; }
html[data-bs-theme="dark"] .cp-reg input { border: 1px solid #34313f; background: #201d2a; }
html[data-bs-theme="dark"] .cp-list li { border-top: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .cp-ben { color: #9a85ff; }
html[data-bs-theme="dark"] .cp-get { background: #17151f; color: #d9d2ff; }
html[data-bs-theme="dark"] .vi-timer em { color: #a99bff; }
html[data-bs-theme="dark"] .vi-cpbtn.is-off { background: #3a3747; color: #a9a5ba; }
html[data-bs-theme="dark"] .vi-eta small { color: #a9a5ba; }
html[data-bs-theme="dark"] .vi-optbox { border: 1px solid #3d3a4a; background: #17151f; }
html[data-bs-theme="dark"] .vi-optbox .vi-opts { border-top: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-optbox .vi-opt { border-bottom: 1px solid #34313f; }
html[data-bs-theme="dark"] .vi-optbox .vi-opt__p small { color: #9a85ff; }
html[data-bs-theme="dark"] .vi-ship span:not(.vi-ship__i) { color: #a9a5ba; }
html[data-bs-theme="dark"] .vi-ship em { color: #a99bff; }
html[data-bs-theme="dark"] .ov-note { border: 1px solid #34313f; background: #17151f; }
html[data-bs-theme="dark"] .ov-btn { border: 1px solid #4a4658; background: #17151f; color: #ecebf5; }
html[data-bs-theme="dark"] .ov-btn--line { color: #ff7a93; }
html[data-bs-theme="dark"] .ov-line { border-top: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .ov-line__t { color: #a9a5ba; }
html[data-bs-theme="dark"] .ov-line__t b { color: #ecebf5; }
html[data-bs-theme="dark"] .ov-track em { color: #c9c6d6; }
html[data-bs-theme="dark"] .ov-pill { background: #2a2145; }
html[data-bs-theme="dark"] .ov-pill.is-off { color: #a9a5ba; }
html[data-bs-theme="dark"] .ov-rt { border-top: 1px solid #2e2b39; }
html[data-bs-theme="dark"] .ov-rt__b { color: #c9c6d6; }
html[data-bs-theme="dark"] .ov-seller { color: #7da3ff; }
html[data-bs-theme="dark"] .ov-rt__f select,
html[data-bs-theme="dark"] .ov-rt__f input { border: 1px solid #4a4658; background: #17151f; }
html[data-bs-theme="dark"] .ov-qty input { border: 1px solid #4a4658; }
html[data-bs-theme="dark"] .ov-cancel button { color: #ff7a93; }
html[data-bs-theme="dark"] .ov-cancel button { background: #17151f; color: #ff7a93; }
/* ==== END dark ==== */