/* QA #2857 · 원본 PC1440 / M390. 공통 셸·토큰은 변경하지 않습니다. */
.renew-main.figma-main { padding-top:calc(var(--overlay-menu-top) + var(--overlay-menu-height)); background:var(--bj-clean); --section-space:64px; }
.figma-main :where(h2,h3,p,figure,ul) { margin:0; }
.figma-main :where(a,button,p) { letter-spacing:var(--bj-type-body-tracking); }
.figma-main .figma-inner { width:min(var(--bj-content-max),calc(100% - 48px)); margin-inline:auto; }
.figma-main .figma-flow { display:flex; flex-direction:column; gap:var(--bj-space-4); padding-block:var(--bj-space-4); }
.figma-main .figma-section-head { position:relative; display:flex; justify-content:space-between; align-items:flex-start; gap:var(--bj-space-3); margin-bottom:var(--bj-space-3); }
.figma-main .figma-section-head h2,.figma-main .figma-service h2,.figma-main .figma-support h2 { font-size:var(--bj-type-section); font-weight:var(--bj-type-section-weight); line-height:var(--bj-type-section-line); letter-spacing:-.01em; }
.figma-main .figma-section-head p { margin-top:var(--bj-space-1); color:var(--bj-muted); font-family:var(--bj-font-family); }
.figma-main .figma-more { display:inline-flex; min-height:44px; flex-shrink:0; align-items:center; text-decoration:underline; text-underline-offset:3px; }
.figma-main .figma-button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--bj-control-height); padding:0 18px; border:1px solid var(--bj-line-strong); border-radius:var(--bj-control-radius); background:var(--bj-clean); font-size:var(--bj-type-action); font-weight:var(--bj-type-action-weight); line-height:var(--bj-type-action-line); }
.figma-main .figma-button--primary { border-color:var(--bj-charcoal); background:var(--bj-charcoal); color:var(--bj-paper); }
.figma-main .figma-actions { display:flex; flex-wrap:wrap; gap:var(--bj-space-1); }
.figma-main .renew-hero,.figma-main .renew-slide { height:448px; margin-top:0; }
.figma-main .renew-slide-media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:none!important; filter:none; }
.figma-main .renew-slide-media::before,.figma-main .renew-slide-media::after,.figma-main .renew-slide::before,.figma-main .renew-slide::after { content:none; }
.figma-main .renew-slide-inner { width:min(var(--bj-content-max),calc(100% - 48px)); }
.figma-main .renew-slide-copy { top:145px; height:auto; padding:0; justify-content:start; }
.figma-main .renew-slide-copy .renew-kicker { display:none; }
.figma-main .renew-slide--invitb .renew-slide-copy { color:var(--bj-ink); }
.figma-main .renew-slide--invitb .renew-slide-copy .desc { color:var(--bj-muted); }
.figma-main .renew-slide-copy :is(h1,h2) { letter-spacing:-.04em; }
.figma-main .renew-slide-meta { margin-top:var(--bj-space-2); }
.figma-main .renew-slide-link { margin-top:var(--bj-space-2); padding:0 18px; min-height:48px; border:0; border-radius:var(--bj-control-radius); background:var(--bj-charcoal); color:var(--bj-paper); font-weight:700; align-items:center; justify-content:center; }
.figma-main .renew-slider-ui { width:188px; height:44px; bottom:24px; gap:0; padding-inline:4px; }
.figma-main .renew-slider-ui.is-light { background:var(--bj-clean); color:var(--bj-ink); }
.figma-main .renew-slider-ui.is-light :is(.renew-slider-button,.renew-slider-pause) { color:var(--bj-ink); }
.figma-main .renew-slider-count { order:2; display:flex; justify-content:center; align-items:center; width:48px; min-width:48px; height:44px; font-size:var(--bj-type-control)!important; color:var(--bj-muted); }
.figma-main .renew-slider-count b { color:var(--bj-ink); }
.figma-main .renew-slider-progress { display:none; }
.figma-main .renew-slider-button { position:relative; width:44px; height:44px; flex:0 0 44px; border:0; border-radius:50%; font-size:var(--bj-type-control); }
.figma-main .renew-slider-button::before { content:''; position:absolute; inset:5px; border:1px solid var(--bj-line); border-radius:50%; }

.figma-main .renew-prev { order:1; }
.figma-main .renew-next { order:3; }
.figma-main .renew-slider-pause { order:4; width:44px; height:44px; border:0; }
.figma-main .renew-shortcuts { height:125.1875px; padding:28px 0 32px; }
.figma-main .renew-shortcut-icon,.figma-main .renew-shortcut-icon svg { width:24px; height:24px; }
.figma-main .renew-shortcut { font-size:var(--bj-type-control); }
.figma-main .figma-service { display:grid; grid-template-columns:560fr 392fr; gap:48px; align-items:center; }
.figma-main .figma-service--reverse { grid-template-columns:392fr 560fr; }
.figma-main .figma-service--reverse .figma-service-media { order:2; }
.figma-main .figma-service-media { display:block; width:100%; height:280px; overflow:hidden; }
.figma-main .figma-service-media img { display:block; width:100%; height:100%; object-fit:cover; }
.figma-main .figma-service-media video { display:block; width:100%; height:100%; object-fit:cover; }
.figma-main .figma-service-media.is-video-unavailable video { display:none!important; }
.figma-main .figma-service-media.is-video-unavailable .renew-video-fallback { display:block!important; }
.figma-main .figma-service--mobile .figma-service-media img { object-fit:contain; }
.figma-main .figma-service-copy { display:flex; flex-direction:column; gap:var(--bj-space-2); }
.figma-main .figma-service-copy > div:first-child { display:flex; flex-direction:column; gap:var(--bj-space-1); }
.figma-main .figma-service-copy p { color:var(--bj-muted); font-family:var(--bj-font-family); }
.figma-main .figma-service-copy h2 + p { margin-top:0; }
.figma-main .figma-catalog-band { display:flex; flex-direction:column; gap:var(--bj-space-4); padding:0; background:var(--bj-clean); }
.figma-main .figma-catalog--best { padding-block:var(--bj-space-4); background:var(--bj-soft-surface); }
.figma-main .figma-catalog-band > .figma-reviews { background:var(--bj-clean); }
.figma-main .figma-product-grid { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,420fr); gap:20px; align-items:start; }
.figma-main .figma-catalog--reverse .figma-product-grid { grid-template-columns:minmax(0,420fr) minmax(0,560fr); }
.figma-main .figma-catalog--reverse .figma-product--featured { order:2; }
.figma-main .figma-product-small-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:20px; row-gap:var(--bj-space-3); }
.figma-main .figma-product { min-width:0; }
.figma-main .figma-product-link { display:block; }
.figma-main .figma-product-media { position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--bj-soft-surface); }
.figma-main .figma-product-media img { position:absolute; width:83.15%; height:75.2%; left:8.425%; top:12.4%; object-fit:fill; }
.figma-main .figma-catalog--new .figma-product-media img { width:85.14%; height:77%; left:7.43%; top:11.5%; }
.figma-main .figma-product--featured .figma-product-media { aspect-ratio:560/644; background:var(--bj-template-media-surface); }
.figma-main .figma-product--featured .figma-product-media img { inset:0; width:100%; height:100%; object-fit:cover; }
.figma-main .figma-catalog--new .figma-product--featured .figma-product-media img { width:104.17%; height:108.7%; left:-2.085%; top:-4.35%; object-fit:fill; }
.figma-main .figma-product-info { display:flex; flex-direction:column; gap:4px; margin-top:var(--bj-space-2); }
.figma-main .figma-product-info h3 { min-height:26px; font-size:var(--bj-type-body); font-weight:600; line-height:var(--bj-type-body-line); letter-spacing:var(--bj-type-body-tracking); }
.figma-main .figma-product-info p { min-height:26px; font-size:var(--bj-type-body); line-height:var(--bj-type-body-line); color:var(--bj-muted); }
.figma-main .figma-section-head h2 { min-height:38px; }
.figma-main .figma-section-head p { min-height:26px; }
.figma-main .figma-sample { position:relative; display:flex; align-items:center; justify-content:flex-start; gap:var(--bj-space-1); width:auto; max-width:100%; min-height:40px; padding:0; border:0; border-radius:0; background:transparent; color:var(--bj-muted); font-size:var(--bj-catalog-cta-size); line-height:20px; font-weight:var(--bj-catalog-cta-weight); cursor:pointer; }
.figma-main .figma-sample::before { content:''; display:block; width:16px; height:20px; flex:0 0 16px; background:currentColor; mask:var(--bj-catalog-sample-plus-mask) center/16px no-repeat; }
.figma-main .figma-sample.on_add_sample::before { mask-image:var(--bj-catalog-sample-check-mask); }
.figma-main .figma-sample:disabled { cursor:wait; opacity:.65; }
.figma-main .figma-best-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 60px)/4); gap:20px; }
.figma-main :is(.figma-catalog--best,.figma-catalog--make) .figma-product-media { aspect-ratio:235/294.140625; }
.figma-main :is(.figma-catalog--best,.figma-catalog--make) .figma-product-media img { width:94.38%; height:85.23%; left:2.81%; top:7.385%; }
/* (2026-11-13) «직접 만들기» 줄 — 베스트 줄과 같은 칸·같은 그림 자리. 그림은 상품 사진이 아니라 그 목록 첫 디자인(세로 카드·가로 명함)이라 늘리지 않고 칸 안에 담는다. */
.figma-main .figma-catalog--make .figma-product-media img { object-fit:contain; }
.figma-main .figma-best-rail .bj-rail__controls { display:flex; }
/* (2026-11-14 #2992) 다 들어가 넘길 것이 없는 줄(data-rail-fits · PC «직접 만들기» 4칸)은 공통 규칙대로 조작부를 숨긴다 — 위·아래 display:flex 가 덮어 흐린 ← → 가 보였고, 눌러도 반응이 없었다. */
.figma-main .figma-best-rail.bj-rail[data-rail-fits] .bj-rail__controls { display:none; }
.figma-main #renew-catalog.figma-newyear-band { padding-block:var(--bj-space-4); background:var(--bj-soft-surface); }
.figma-main .figma-newyear-block + .figma-newyear-block { margin-top:var(--bj-space-4); }
.figma-main .figma-newyear-band .renew-product-media { aspect-ratio:235/294.140625; }
.figma-main .figma-reviews .figma-section-head { align-items:center; }
.figma-main .figma-review-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--bj-space-2); }
.figma-main .figma-review { display:flex; flex-direction:column; gap:var(--bj-space-2); padding:var(--bj-space-2); border:1px solid var(--bj-line); border-radius:var(--bj-control-radius); min-width:0; }
.figma-main .figma-review img { width:64px; height:76.8px; object-fit:contain; }
.figma-main .figma-review-copy { display:flex; flex-direction:column; gap:var(--bj-space-1); min-width:0; }
.figma-main .figma-review-meta { display:flex; gap:var(--bj-space-1); align-items:center; white-space:nowrap; min-width:0; }
.figma-main .figma-review-stars { display:inline-flex; gap:1px; flex:none; letter-spacing:0; white-space:nowrap; font-size:14px; }
.figma-main .figma-review-stars svg { display:block; width:14px; height:14px; fill:var(--bj-ink); }
.figma-main .figma-review-stars .off svg { fill:var(--bj-line); }
.figma-main .figma-review-writer { color:var(--bj-tertiary); font-size:var(--bj-type-caption); }
.figma-main .figma-review-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--bj-type-caption); color:var(--bj-tertiary); }
.figma-main .figma-review-excerpt { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:51.2px; }
.figma-main .figma-editor .figma-section-head { margin-bottom:var(--bj-space-3); }
.figma-main .figma-editor-video { display:block; width:100%; aspect-ratio:2/1; object-fit:contain; background:var(--bj-soft-surface); }
.figma-main .figma-editor-fallback img { display:block; width:100%; height:auto; aspect-ratio:2/1; object-fit:contain; }
.figma-main .figma-editor-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:24px; margin-top:var(--bj-space-3); border:0; box-shadow:inset 0 0 0 1px var(--bj-line); }
.figma-main .figma-editor-step { display:flex; flex-direction:column; gap:var(--bj-space-1); }
.figma-main .figma-editor-step > span { color:var(--bj-muted); font-size:var(--bj-type-caption); }
.figma-main .figma-editor-step > span + h3 { margin-top:4px; }
.figma-main .figma-editor-step h3 { font-size:var(--bj-type-subsection); line-height:var(--bj-type-subsection-line); font-weight:var(--bj-type-subsection-weight); }
.figma-main .figma-editor-step p { color:var(--bj-muted); }
.figma-main .figma-editor-step small { font-size:var(--bj-type-caption); color:var(--bj-muted); }
.figma-main .figma-editor-description--mobile,.figma-main .figma-title-mobile,.figma-main .figma-review-name--mobile { display:none; }
.figma-footer-reserve { display:none; }
.figma-main .figma-editor-step > p { min-height:26px; }
.figma-main .figma-editor-step:nth-child(2) > p:first-of-type { min-height:52px; }
.figma-main .figma-editor-step > span { min-height:21px; line-height:var(--bj-type-caption-line); }
.figma-main .renew-assistance { padding:0; background:var(--bj-clean); border-top:0; }
.figma-main .renew-assistance-head { display:block; padding:0; }
.figma-main .renew-assistance-tabs { display:flex; gap:var(--bj-space-1); margin:var(--bj-space-3) 0; padding:0; border:0; }
.figma-main .renew-assistance-tabs button { flex:0 0 auto; width:auto; min-height:44px; padding:0 16px; border:0; border-radius:var(--bj-control-radius); background:transparent; font-size:var(--bj-type-control); font-weight:500; }
.figma-main .renew-assistance-tabs button.is-active { color:var(--bj-clean); background:var(--bj-ink); }
.figma-main .renew-assistance-tabs button span { display:none; }
.figma-main .renew-assistance-panel-toolbar { display:none; }
.figma-main .renew-assistance-panel { padding:0; border:0; }
.figma-main .renew-assistance-panel.is-active { background:transparent; }
.figma-main .renew-event-grid { margin:0; padding:0; }
.figma-main .renew-event-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px)/3); gap:20px; }
.figma-main .renew-event { display:block; min-height:0; }
.figma-main .renew-event-image { display:block; width:100%; height:238px; aspect-ratio:auto; object-fit:cover; }
.figma-main .renew-event-copy { padding:0; margin-top:24px; }
.figma-main .renew-event-copy h3 { margin-top:8px; font-size:var(--bj-type-body); line-height:var(--bj-type-body-line); font-weight:600; }
.figma-main .figma-event-number { display:block; font-size:var(--bj-type-caption); line-height:var(--bj-type-caption-line); color:var(--bj-muted); }
.figma-main .renew-event-copy p { margin-top:var(--bj-space-1); }
.figma-main .renew-event-rail .bj-rail__controls { margin-top:var(--bj-space-2); }
.figma-main .figma-process-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px)/3); gap:20px; }
.figma-main .figma-process-card { min-width:0; }
.figma-main .figma-process-card img { display:block; width:100%; height:238px; object-fit:cover; }
.figma-main .figma-process-card figcaption { display:flex; flex-direction:column; gap:var(--bj-space-1); margin-top:var(--bj-space-2); }
.figma-main .figma-process-card span { min-height:21px; font-size:var(--bj-type-caption); line-height:var(--bj-type-caption-line); color:var(--bj-muted); }
.figma-main .figma-process-card figcaption p { min-height:26px; }
.figma-main .figma-process-card figcaption p { font-weight:600; }
.figma-main .figma-process-rail .bj-rail__controls { display:none; }
.figma-main .figma-process .figma-section-head > div > p:first-child,.figma-main #renew-assistance .figma-section-head > div > p:first-child { margin:0 0 var(--bj-space-1); min-height:21px; font-size:var(--bj-type-caption); line-height:var(--bj-type-caption-line); }
.figma-main .figma-process .figma-section-head .figma-more,.figma-main #renew-assistance .figma-section-head .figma-more { position:absolute; right:0; top:0; }
.figma-main .figma-process .figma-section-head > div,.figma-main #renew-assistance .figma-section-head > div { width:85%; }
.figma-main .figma-press { display:flex; justify-content:space-between; align-items:center; gap:var(--bj-space-3); border-block:1px solid var(--bj-line); padding-block:32px; }
.figma-main .figma-press h3 { font-size:var(--bj-type-subsection); font-weight:var(--bj-type-subsection-weight); line-height:var(--bj-type-subsection-line); }
.figma-main .figma-press p { margin-top:var(--bj-space-1); color:var(--bj-muted); }
.figma-main .figma-support { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.figma-main .figma-support h2 { margin-bottom:var(--bj-space-3); }
.figma-main .figma-support-contact { padding:32px; background:var(--bj-soft-surface); }
.figma-main .figma-support-phone { display:block; font-size:var(--bj-type-subsection); line-height:var(--bj-type-subsection-line); font-weight:600; }
.figma-main .figma-support-hours { margin-top:var(--bj-space-1); font-size:var(--bj-type-caption); }
.figma-main .figma-support-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--bj-space-1); margin-top:var(--bj-space-3); }
.figma-main .figma-support-links a { display:flex; gap:8px; min-width:0; min-height:44px; justify-content:center; align-items:center; padding-inline:8px; border:1px solid var(--bj-line-strong); border-radius:var(--bj-control-radius); font-size:var(--bj-type-control); }
.figma-main .figma-support-icon { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; }
.figma-main .figma-support-icon svg { display:block; width:20px; height:20px; }
.figma-main .figma-support-chat { fill:none; stroke:currentColor; stroke-width:1.55; stroke-linecap:round; stroke-linejoin:round; }
.figma-main .figma-notice-head { display:flex; justify-content:space-between; }
.figma-main .figma-notices a { display:flex; gap:var(--bj-space-2); min-width:0; height:64px; align-items:center; border-bottom:1px solid var(--bj-line); }
.figma-main .figma-notices a:last-child { border-bottom:0; }
.figma-main .figma-notices span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.figma-main .figma-notices a::after { content:'›'; flex:none; }
.figma-main :is(.figma-product-link,.figma-review):focus-visible { outline:2px solid var(--bj-ink); outline-offset:3px; }
@media (max-width:767px) {
  .figma-main .figma-inner { width:calc(100% - 32px); }
  .figma-main .figma-flow { gap:0; padding-block:0 48px; }
  .figma-main .figma-flow > :is(section,aside,div) { padding-top:48px; }
  .figma-main .figma-section-head { gap:16px; margin-bottom:24px; }
  .figma-main .figma-section-head h2 { min-height:33px; }
  .figma-main .figma-section-head .figma-more { position:absolute; right:0; top:-6px; }
  .figma-main .figma-section-head > div { width:100%; }
  .figma-main .figma-section-head h2 { padding-right:100px; }
  .figma-main .figma-catalog--selpick .figma-section-head h2 { padding-right:88px; }
  .figma-main #renew-selpick { padding-bottom:0; }
  .figma-main .figma-more { font-size:var(--bj-type-body); }
  .figma-main .renew-hero,.figma-main .renew-slide { height:398px; }
  .figma-main .renew-slide-media { top:-90px; bottom:28px; height:auto; }
  .figma-main .renew-slide-media img { width:333.333%; height:81.13%; left:-156.67%; top:-11.36%; object-fit:fill; }
  .figma-main .renew-slide::after { content:''; display:block; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(255,255,255,.18) 65%,rgba(255,255,255,.48)); pointer-events:none; }
  .figma-main .renew-slide::before { content:''; display:block; position:absolute; z-index:0; left:0; right:0; bottom:0; height:243px; background-image:var(--figma-hero-image); background-size:333.333% 500%; background-position:67.13% bottom; pointer-events:none; }
  /* #2945 후속 연하장 1장은 현행 전용 모바일 사진·상단 배치를 보존합니다. */
  .figma-main .renew-slide--newyear .renew-slide-media { top:0; bottom:auto; height:560px; }
  .figma-main .renew-slide--newyear .renew-slide-media img { position:static; width:100%; height:560px; object-fit:cover; transform:translateY(45px)!important; }
  .figma-main .renew-slide--newyear::before { content:none; }
  .figma-main .renew-slide-inner { width:calc(100% - 32px); }
  .figma-main .renew-slide-copy { top:auto; bottom:88px; left:0; width:100%; padding:0; }
  .figma-main .renew-slide-copy :is(h1,h2) { font-size:var(--bj-type-display); line-height:var(--bj-type-display-line); }
  .figma-main .renew-slide-meta { margin-top:8px; }
  .figma-main .renew-slide-copy .desc { max-width:none; font-size:var(--bj-type-body); }
  .figma-main .renew-slide-link { position:absolute; display:block; z-index:5; inset:-240px -16px -88px; margin:0; min-height:0; padding:0; border:0; border-radius:0; background:transparent; color:transparent; font-size:0; }
  .figma-main .renew-slide-link:focus-visible { outline-offset:-4px; outline-color:var(--bj-ink); }
  .figma-main .renew-slider-ui { bottom:28px; }
  .figma-main .renew-slider-count { font-size:var(--bj-type-control)!important; }
  .figma-main .renew-shortcuts { height:119px; padding:20px 0; }
  .figma-main .renew-shortcut-shell { width:calc(100% - 32px); }
  .figma-main .renew-shortcut-grid { grid-auto-columns:72px; column-gap:20px; }
  .figma-main .renew-shortcut-arrow,.figma-main .renew-shortcut-meter { display:none; }
  .figma-main .figma-service,.figma-main .figma-service--reverse { display:flex; flex-direction:column; align-items:stretch; gap:24px; }
  .figma-main .figma-service--reverse .figma-service-media { order:0; }
  .figma-main .figma-service-media { height:200px; }
  .figma-main .figma-service-copy { gap:24px; }
  .figma-main .figma-service h2 { min-height:65px; }
  .figma-main .figma-service-copy p { min-height:26px; }
  .figma-main .figma-service-copy p:has(br) { min-height:52px; }
  .figma-main .figma-actions { flex-wrap:nowrap; }
  .figma-main .figma-actions .figma-button { flex:1; min-width:0; padding-inline:8px; font-size:var(--bj-type-action); }
  .figma-main .figma-catalog-band { display:contents; }
  .figma-main .figma-catalog-band > :is(section,div) { padding-top:48px; }
  .figma-main .figma-catalog-band > .figma-catalog--best { border-top:48px solid var(--bj-clean); padding-bottom:48px; background:var(--bj-soft-surface); }
  .figma-main .figma-product-grid,.figma-main .figma-catalog--reverse .figma-product-grid { display:flex; flex-direction:column; gap:24px; }
  .figma-main .figma-product--featured,.figma-main .figma-product-small-grid { width:100%; }
  .figma-main .figma-catalog--reverse .figma-product--featured { order:0; }
  .figma-main .figma-product-small-grid { gap:16px; }
  .figma-main .figma-product-small-grid > :nth-child(n+3) { display:none; }
  .figma-main .figma-product-info { margin-top:12px; }
  .figma-main .figma-product-info h3 { min-height:26px; }
  .figma-main .figma-product-info p { min-height:26px; }
  .figma-main .figma-product-media img,.figma-main .figma-catalog--new .figma-product-media img { width:94%; height:85.01%; left:3%; top:7.5%; }
  .figma-main .figma-product--featured .figma-product-media { aspect-ratio:5/4; }
  .figma-main .figma-product--featured .figma-product-media img,.figma-main .figma-catalog--new .figma-product--featured .figma-product-media img { width:100%; height:150%; left:0; top:-18.44%; object-fit:fill; }
  .figma-main .figma-catalog--new .figma-product--featured .figma-product-media img { top:-20.01%; }
  .figma-main .figma-catalog--photo .figma-product--featured .figma-product-media img { top:-12.67%; }
  .figma-main .figma-catalog--oanna .figma-product--featured .figma-product-media img { top:-13.2%; }
  .figma-main .figma-sample { min-height:44px; }
  .figma-main .figma-best-track { grid-auto-columns:203px; gap:16px; }
  .figma-main :is(.figma-catalog--best,.figma-catalog--make) .figma-product-media { aspect-ratio:4/5; }
  .figma-main .figma-best-rail .bj-rail__controls { display:flex; margin-top:10px; }
  .figma-main :is(.figma-best-rail,.renew-event-rail,.figma-process-rail) .bj-rail__controls { height:1px; min-height:1px; padding:0; }
  .figma-main :is(.figma-best-rail,.renew-event-rail,.figma-process-rail) .bj-rail__button { display:none; }
  .figma-main :is(.figma-best-rail,.renew-event-rail,.figma-process-rail) .bj-rail__progress { width:100%; height:1px; margin:0; }
  .figma-main .figma-best-rail .bj-rail__controls { height:auto; min-height:44px; }
  .figma-main .figma-best-rail .bj-rail__button { display:inline-flex; }
  .figma-main .figma-review-grid { display:flex; flex-direction:column; gap:0; }
  .figma-main .figma-review { flex-direction:row; gap:16px; padding:16px 0; border:0; border-bottom:1px solid var(--bj-line); border-radius:0; }
  .figma-main .figma-review:nth-child(n+3) { display:none; }
  .figma-main .figma-review > img { width:88px; height:88px; background:var(--bj-product-stage); }
  .figma-main .figma-review-copy { flex:1; height:83.6px; }
  .figma-main .figma-review-excerpt { -webkit-line-clamp:1; min-height:25.6px; }
  .figma-main .figma-review-writer { display:inline; }
  .figma-main .figma-review-meta { order:2; justify-content:space-between; }
  .figma-main .figma-review-meta .figma-review-name { display:none; }
  .figma-main .figma-review-name--mobile { display:block; order:3; }
  .figma-main .figma-review-excerpt { order:1; }
  .figma-main .figma-editor-video { aspect-ratio:4/3; }
  .figma-main .figma-editor .figma-section-head h2,.figma-main .figma-process .figma-section-head h2 { min-height:65px; }
  .figma-main .figma-editor-fallback img { aspect-ratio:4/3; }
  .figma-main .figma-editor-description--pc,.figma-main .figma-title-pc { display:none; }
  .figma-main .figma-editor-description--mobile,.figma-main .figma-title-mobile { display:block; }
  .figma-main .figma-editor-steps { display:flex; flex-direction:column; gap:24px; padding:16px; margin-top:24px; }
  .figma-main .figma-editor-step { position:relative; display:flex; flex-direction:column; gap:8px; padding-left:36px; }
  .figma-main .figma-editor-step > span + h3 { margin-top:0; }
  .figma-main .figma-editor-step > span { position:absolute; top:0; left:0; width:24px; padding-top:4px; }
  .figma-main .renew-assistance-tabs { margin:24px 0; gap:8px; overflow-x:auto; }
  .figma-main .renew-assistance-tabs button { white-space:nowrap; font-size:var(--bj-type-control); padding-inline:12px; }
  .figma-main .renew-event-grid { grid-auto-columns:min(320px,100%); gap:16px; }
  .figma-main .renew-event-image { height:200px; }
  .figma-main .renew-event { min-height:0; }
  .figma-main .renew-event-copy { min-height:0; padding:0; margin-top:16px; }
  .figma-main .figma-process { padding-top:48px; }
  .figma-main .figma-process-surface { padding-block:48px; background:var(--bj-soft-surface); }
  .figma-main .figma-process-track { grid-auto-columns:min(320px,100%); gap:16px; }
  .figma-main .figma-process-card img { height:240px; }
  .figma-main .figma-process-rail .bj-rail__controls { margin-top:10px; }
  .figma-main .figma-process-rail .bj-rail__controls { display:none; }
  .figma-main .figma-process .figma-section-head > div,.figma-main #renew-assistance .figma-section-head > div { width:100%; }
  .figma-main .figma-process .figma-section-head > div > p:first-child,.figma-main #renew-assistance .figma-section-head > div > p:first-child { display:none; }
  .figma-main .figma-process .figma-section-head .figma-more,.figma-main #renew-assistance .figma-section-head .figma-more { top:0; }
  .figma-main .renew-event-rail .bj-rail__controls { display:flex; height:auto; min-height:44px; margin-top:10px; }
  .figma-main .figma-press { flex-direction:column; align-items:flex-start; gap:24px; padding-block:32px; }
  .figma-main .figma-press .figma-button { width:100%; }
  .figma-main .figma-support { display:flex; flex-direction:column; gap:48px; }
  .figma-main .figma-support h2 { margin-bottom:24px; }
  .figma-main .figma-support-contact { padding:24px; }
  .figma-main .figma-support-links { margin-top:24px; }
  .figma-main .figma-support-links a { font-size:var(--bj-type-control); }
  .figma-main .figma-support-hours { font-size:var(--bj-type-body); line-height:var(--bj-type-body-line); }
  .figma-main [data-figma-section="support"] { padding-bottom:29px; }
  .figma-footer-reserve.is-active { display:block; height:8px; min-height:8px; flex:0 0 8px; }
}

/* QA2857 APPROVED HERO 20261110: locked12 scenes; photo-only, existing shell untouched. */

/* Approval source: pc1-pc5-final-canvas.css; SHA256 ea6efaf445d7933ac74b36de965daab3f70ac60ef1fb8f3d1b0d6186411c735e */
/* LOCAL single final composition for PC1 and PC5.
   Existing3840x1080 photos retain their aspect ratio; only empty source texture fills canvas safety area. */
@media(min-width:1200px) {
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) {
  --pc15-h:calc(var(--bj-space-4)*7.5);
  --pc15-w:calc(var(--pc15-h)*32/9);
  --pc15-left:calc((100% - var(--bj-space-4)*30)/2);
 }
 .figma-main .renew-slide--newyear {
  --pc15-texture:url('/card/img/main-renewal/hero-review-20261014/06-newyear-pc-20261110.webp');
  --pc15-texture-x:0px;
  --pc15-right-width:calc(100% - var(--pc15-left) - var(--pc15-w) + var(--bj-space-4));
 }
 .figma-main .renew-slide--review:not(.renew-slide--newyear) {
  --pc15-texture:url('/card/img/main-renewal/hero-review-20261014/04-pc.webp');
  --pc15-texture-x:-1500px;
  --pc15-right-width:calc(100% - var(--pc15-left) - var(--pc15-h)*3500/1080 + var(--bj-space-4));
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media {inset:0;height:100%;}
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media img {
  position:absolute;inset:auto;left:var(--pc15-left);top:calc((100% - var(--pc15-h))/2);
  width:var(--pc15-w);height:var(--pc15-h);margin:0;padding:0;
  object-fit:contain;object-position:center;transform:none!important;
  filter:none;mask-image:none;-webkit-mask-image:none;
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::before {content:none;}
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::after {
  content:'';position:absolute;inset:0 0 0 auto;z-index:1;
  width:max(0px,var(--pc15-right-width));height:100%;pointer-events:none;
  background-image:var(--pc15-texture);background-size:3840px 1080px;
  background-position:var(--pc15-texture-x) center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
  mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
 }
}
@media(min-width:1921px) {
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::before {
  content:'';position:absolute;inset:0 auto 0 0;z-index:1;
  width:calc(var(--pc15-left) + var(--bj-space-4));height:100%;pointer-events:none;
  background-image:var(--pc15-texture);background-size:3840px 1080px;
  background-position:var(--pc15-texture-x) center;background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - var(--bj-space-4)),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - var(--bj-space-4)),transparent);
 }
}


/* QA2857: preserve the approved photo composition across desktop widths. */
/* Approval restoration:1920px reference photo boxes stay aligned to content1000.
   Viewport width changes only the surrounding canvas, never subject scale. */
@media(min-width:1200px) {
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) {
  --pc234-width:calc(var(--bj-space-4)*30);
  --pc234-left:calc((100% - var(--pc234-width))/2);
  --pc234-shift:0px;
  --pc234-y:70%;
 }
 .figma-main .renew-slide--sample {--pc234-source:url('/card/img/main-renewal/hero-review-20261014/01-pc.webp');}
 .figma-main .renew-slide--mobile {--pc234-source:url('/card/img/main-renewal/hero-review-20261014/03-pc-quality-20261015.webp');}
 .figma-main .renew-slide--selpick {
  --pc234-source:url('/card/img/main-renewal/hero-review-20261014/02-pc.webp');
  --pc234-shift:calc(var(--bj-space-4)*-2.5);
  --pc234-y:50%;
 }
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) .renew-slide-media {
  inset:0;height:100%;
  background-image:var(--pc234-source);background-size:var(--pc234-width) auto;
  background-position:left var(--pc234-y);background-repeat:no-repeat;
 }
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) .renew-slide-media img {
  position:absolute;inset:auto;left:calc(var(--pc234-left) + var(--pc234-shift));top:0;
  width:var(--pc234-width);height:100%;margin:0;padding:0;
  object-fit:cover;object-position:center var(--pc234-y);transform:none!important;
  filter:none;mask-image:none;-webkit-mask-image:none;
 }
 /* Same right224px texture strip as the approved1920 PC3 frame.
    For PC2/4 this overlays identical original pixels inside the reference photo. */
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) .renew-slide-media::after {
  content:'';position:absolute;inset:0 auto 0 calc(var(--pc234-left) + var(--pc234-width) - var(--bj-space-4)*3.5);
  width:calc(var(--bj-space-4)*3.5);height:100%;z-index:1;pointer-events:none;
  background-image:var(--pc234-source);background-size:var(--pc234-width) auto;
  background-position:right var(--pc234-y);background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
  mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
 }
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) .renew-slide-media::before {content:none;}
}
@media(min-width:1921px) {
 /* Only source-empty edges blend into the outer original-texture canvas. */
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick,.renew-slide--mobile) .renew-slide-media img {
  -webkit-mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
  mask-image:linear-gradient(to right,transparent,#000 var(--bj-space-4));
 }
 .figma-main .renew-slide--mobile .renew-slide-media::before {
  content:'';position:absolute;inset:0 0 0 calc(var(--pc234-left) + var(--pc234-width));
  width:auto;height:100%;z-index:2;pointer-events:none;
  background-image:var(--pc234-source);background-size:var(--pc234-width) auto;
  background-position:right var(--pc234-y);background-repeat:no-repeat;
  /* Reflect only the original empty right-edge texture: continuous edge colors,
     no product pixels, no stretch, and no repeated hard join. */
  transform:scaleX(-1);mask-image:none;-webkit-mask-image:none;
 }
}
/* Extend only the right empty field using the original left empty texture.
   Match the foreground scale and vertical crop, including PC2's wall/floor line.
   The blend starts outside content1000; no source product pixels are exposed. */
@media(min-width:1921px) {
 .figma-main :is(.renew-slide--sample,.renew-slide--selpick) .renew-slide-media::before {
  content:'';position:absolute;inset:0 0 0 calc(var(--pc234-left) + var(--pc234-width) - var(--bj-space-4)*6);
  width:auto;height:100%;z-index:2;pointer-events:none;transform:none;
  background-image:var(--pc234-source);background-repeat:no-repeat;
  background-size:var(--pc234-width) auto;background-position:left var(--pc234-y);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 calc(var(--bj-space-4)*6));
  mask-image:linear-gradient(to right,transparent,#000 calc(var(--bj-space-4)*6));
 }
}

/* Approval source: invitb-controls-background-only.css; SHA256 084bc3f8d2fde34d46db9d65988f26b48c02bc620c0395f81ee87ef6355a5b66 */
.figma-main .renew-slider-ui.is-light { background:transparent; }


/* Approval source: m1-m5-one-scale-candidate.css; SHA256 13ae2557d3c169c9d42940c134e94dfdff1260e5eb8588374f678997c06dd2ec */
/* LOCAL one per-scene scale correction; original ratios and hand shapes retained. No added gradient or alpha mask. */
@media (max-width:767px) {
 .figma-main .renew-slide--newyear { --photo-w:300px; --photo-h:400px; --photo-top:calc(25.5% - 400px * 850 / 2400); background:#e6e6e8; --photo-source:url('/card/img/main-renewal/hero-review-20261014/06-newyear-mobile.webp'); }
 .figma-main .renew-slide--review:not(.renew-slide--newyear) { --photo-w:342px; --photo-h:456px; --photo-top:calc(25.5% - 456px * 800 / 2400); --photo-source:url('/card/img/main-renewal/hero-review-20261014/04-mobile.webp'); }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media { inset:0; height:100%; }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review)::before,
 .figma-main :is(.renew-slide--newyear,.renew-slide--review)::after { content:none; background-image:none; }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media img {
  position:absolute; inset:auto; left:50%; top:var(--photo-top); width:var(--photo-w); height:var(--photo-h); margin:0; padding:0;
  object-fit:contain; object-position:center; transform:translateX(-50%)!important; mask-image:none; -webkit-mask-image:none;
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--photo-source); background-size:var(--photo-w) var(--photo-h); background-position:center var(--photo-top); background-repeat:repeat-x;
 }
}


/* Approval source: m1-m5-empty-texture-seam-repair.css; SHA256 2d4c13d51a3b441988b1c36e883944870c989b6c0ffe46b2d30dca6193219f96 */
/* LOCAL repair of the existing one-scale candidate only.
   Products, hands, and image geometry stay untouched. Every fade is confined to empty background. */
@media(max-width:767px) {
 .figma-main .renew-slide--newyear {--photo-bg-top:calc(398px * .255 - 400px * 850 / 2400);}
 .figma-main .renew-slide--review:not(.renew-slide--newyear) {--photo-bg-top:calc(398px * .255 - 456px * 800 / 2400);}
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media {
  background:var(--photo-source) center bottom / 390px 520px no-repeat;
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media img {
  z-index:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 24px),transparent);
 }
 /* M5's image bottom is already outside the398px hero. No image mask is needed. */
 .figma-main .renew-slide--review:not(.renew-slide--newyear) .renew-slide-media img {
  z-index:auto;-webkit-mask-image:none;mask-image:none;
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::before,
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::after {
  content:'';position:absolute;inset:0 auto 0 0;z-index:2;height:100%;
  width:calc((100% - var(--photo-w)) / 2 + 15px);pointer-events:none;
  background-image:var(--photo-source);background-size:var(--photo-w) var(--photo-h);
  background-position:left var(--photo-bg-top);background-repeat:repeat-y;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 15px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 15px),transparent);
 }
 .figma-main :is(.renew-slide--newyear,.renew-slide--review) .renew-slide-media::after {
  inset:0 0 0 auto;background-position:right var(--photo-bg-top);
  -webkit-mask-image:linear-gradient(to left,#000 calc(100% - 15px),transparent);
  mask-image:linear-gradient(to left,#000 calc(100% - 15px),transparent);
 }
}


/* Approval source: m2-m4-final-photo.css; SHA256 56e74c36d63cf11be351830079753dfb244d3e07b1d409189cbf23fae552259b */
/* Existing accepted-looking M2/M4 composition isolated from unrelated old trials. No new layout. */
@media(max-width:767px) {
 .figma-main :is(.renew-slide--sample,.renew-slide--mobile) .renew-slide-media {inset:0;height:100%;}
 .figma-main :is(.renew-slide--sample,.renew-slide--mobile)::before,
 .figma-main :is(.renew-slide--sample,.renew-slide--mobile)::after {content:none;background-image:none;}
 .figma-main :is(.renew-slide--sample,.renew-slide--mobile) .renew-slide-media img {
  position:absolute;inset:auto;left:0;top:var(--photo-top);width:100%;height:520px;
  margin:0;padding:0;object-fit:cover;object-position:center;transform:none!important;
 }
 .figma-main .renew-slide--sample {--photo-top:calc(25.5% - 520px*1775/4800);}
 .figma-main .renew-slide--mobile {--photo-top:calc(25.5% - 520px*880/2400);}
}


/* Approved visual source: m3-approved-visual-extraction.css; SHA256 08ee452ce74f94306f4314f28a80661a1ed2c26d460a13f1e291dc21230d9161 */
/* Correct M3-only extraction from the actual accepted v2 photo rules.
   Both legacy before and after washes were disabled in the approved screenshot. */
@media(max-width:767px) {
 .figma-main .renew-slide--selpick .renew-slide-media {inset:0;height:100%;}
 .figma-main .renew-slide--selpick::before,
 .figma-main .renew-slide--selpick::after {content:none;background-image:none;}
 .figma-main .renew-slide--selpick .renew-slide-media img {
  position:absolute;inset:auto;left:0;top:calc(25.5% - 520px*1505/4800);width:100%;height:520px;
  margin:0;padding:0;object-fit:cover;object-position:center;transform:none!important;
 }
}


/* Approval source: invitb-production-gradient-current.css; SHA256 cd2f842378a973dcc41d2b57f29de06a55f826e84ec73d623a33b13dca6215ff */
/* LOCAL M6: reuse production photo-to-solid wash; adapt only its paint range to current398px text start. No640 layout rules. */
.figma-main .renew-slider-ui.is-light { background:transparent; }
@media (max-width:767px) {
 .figma-main .renew-slide--invitb { --hero-wash:#f5ede5; background:var(--hero-wash); }
 .figma-main .renew-slide--invitb .renew-slide-media { inset:0; height:100%; }
 .figma-main .renew-slide--invitb .renew-slide-media img {
   position:absolute; inset:auto; left:0; top:calc(25.5% - 520px * 705 / 2400); width:100%; height:520px;
   margin:0; padding:0; object-fit:cover; object-position:center; transform:none!important; mask-image:none; -webkit-mask-image:none;
 }
 .figma-main .renew-slide--invitb::before { content:none; background-image:none; }
 .figma-main .renew-slide--invitb::after {
   content:''; position:absolute; z-index:1; inset:0; width:100%; height:100%; pointer-events:none;
   background:linear-gradient(180deg,transparent 0%,transparent calc(49% * .65),var(--hero-wash) calc(78% * .65),var(--hero-wash) 100%);
 }
}


/* (2026-11-10 대표님 42718·42719·42722·42723 «폰 첫 화면 그림이 작고 눌리고 카드가 잘림 · 3·4번은 메뉴 밑 여백 없음 · 그림을 끝까지 채우고
   메뉴를 투명하게» · 같은 날 «메뉴 들어가는 부분 투명도를 확 높여 나눠지지 않게 · 연하장 손 들어가는 것도») 폰 첫 화면 히어로. PC·태블릿(768 이상)은 그대로.
   ① 메뉴 뒤 흰 막(common/bojagi-header-overlay.css 폰 78% 흰색 + 흐림)을 걷고 히어로를 맨 위(메뉴 뒤)부터 깐다 — 메뉴와 첫 화면이 한 장으로 이어진다.
      이 파일은 홈에만 실리므로 다른 화면의 머리말은 그대로다.
   ② 여섯 장 모두 사진을 폭 가득(3:4 그대로 · 눌림 없음) 깐다. 크기·자리는 화면 폭에 비례 — 종전엔 사진 칸 높이가 px 로 고정(520)이라
      넓은 폰(412·430)일수록 사진 위가 더 잘려 3·4번 장 카드가 메뉴 밑에 붙거나 잘렸고, 1·5번 장은 작은 칸(300·342)에 담겨 양옆을 무늬로 메웠다.
   ③ (11-11 대표님 42904 «좋아지긴 했는데 크기 위치를 다시 검토 · 살짝 위로 떠 보이지 않아») 11-10 판은 물건 윗변을 메뉴 아래 space-2 에 붙여
      물건 아래~제목 사이가 넓게 비었다(390 에서 43~59 · 430 에서 47~85 — 넓은 폰일수록 더 떠 보임). 이제 메뉴 아래~제목 위를 «띠»로 보고
      물건을 띠 가운데에 놓으며, 물건 높이를 띠의 --hero-fill(.75)로 맞춘다(사진은 폭 가득보다 작아지지 않고, 양옆은 space-2 안에서만 커진다).
      사진 실측(1800x2400): --pt 물건 윗변 · --pb 물건 아랫변(사진 높이 분의) · --px 물건이 사진 가운데 세로선에서 가장 먼 쪽까지(사진 폭 분의).
      띠 아래 끝 = 제목 윗변 = 히어로 아래 − 글 자리 88(.renew-slide-copy bottom) − 제목 두 줄 − 줄 사이 space-1 − 설명 한 줄.
      사진 위가 히어로 위보다 내려오는 장은 장 바탕을 사진 맨 위 색으로 칠하고 사진 위 끝을 space-4 만큼 옅게 해 이음을 숨긴다.
      INVIT.B(6번)는 물건이 아니라 장면 사진이라 맨 위부터 그대로 깐다. 바탕색·글·단추 자리(아래 88)는 종전 그대로.
   ④ 1번 장(연하장) 폰 사진은 대표님이 고르신 같은 촬영 사진의 PC 판에서 카드·손·팔을 그대로 잘라 새로 만든 것(06-newyear-mobile-20261110) —
      종전 폰 사진은 손목에서 끊겨 손만 떠 보였다. 팔은 아래로 이어지다 제목 뒤에서 옅어진다.
   시험: card/tools/home_hero_phone_fill_browser_test.py(폭 360·390·412·420·430 · 여섯 장 · 물건이 띠 가운데·띠의 .7 이상·양옆 여백 안 ·
         PC 1280 그대로 · --tamper 로 되돌리면 실패). */
@media (max-width:767px) {
  html body.renewal-header-overlay::before { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .renew-main.figma-main { padding-top:0; }
  .figma-main .renew-hero {
    --hero-menu:calc(var(--overlay-menu-top) + var(--overlay-menu-height) - var(--hero-banner-shift, 0px));
    --hero-fill:.75;
    --hero-copy-top:calc(var(--hero-h) - 88px - 2 * var(--bj-type-display) * var(--bj-type-display-line) - var(--bj-space-1) - var(--bj-type-body) * var(--bj-type-body-line));
    --hero-band:calc(var(--hero-copy-top) - var(--hero-menu));
    --hero-h:calc(var(--hero-menu) + 100vw * 1.1 + var(--bj-space-1));
  }
  .figma-main .renew-hero,
  .figma-main .renew-hero .renew-slide { height:var(--hero-h); }
  .figma-main .renew-hero .renew-slide {
    --img-w:max(100vw, min(var(--hero-fill) * var(--hero-band) * 3 / 4 / (var(--pb) - var(--pt)), (50vw - var(--bj-space-2)) / var(--px)));
    --img-top:calc(var(--hero-menu) + var(--hero-band) / 2 - (var(--pt) + var(--pb)) / 2 * var(--img-w) * 4 / 3);
  }
  .figma-main .renew-hero .renew-slide .renew-slide-media { inset:0; height:100%; background:none; }
  .figma-main .renew-hero .renew-slide::before,
  .figma-main .renew-hero .renew-slide .renew-slide-media::before,
  .figma-main .renew-hero .renew-slide .renew-slide-media::after { content:none; background:none; }
  .figma-main .renew-hero .renew-slide.renew-slide .renew-slide-media img {
    position:absolute; inset:auto; left:calc((100vw - var(--img-w)) / 2); top:var(--img-top); z-index:auto;
    width:var(--img-w); max-width:none; height:max(calc(var(--img-w) * 4 / 3), calc(var(--hero-h) - var(--img-top)));
    margin:0; padding:0; object-fit:cover; object-position:center top; transform:none!important; filter:none;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--bj-space-4));
    mask-image:linear-gradient(to bottom, transparent 0, #000 var(--bj-space-4));
  }
  .figma-main .renew-hero .renew-slide--newyear { --pt:.215; --pb:.552; --px:.27; background:#eaeaec; }
  .figma-main .renew-hero .renew-slide--sample { --pt:.217; --pb:.523; --px:.287; background:#d6d4d0; }
  .figma-main .renew-hero .renew-slide--selpick { --pt:.14; --pb:.483; --px:.369; background:#e5dace; }
  .figma-main .renew-hero .renew-slide--mobile { --pt:.207; --pb:.527; --px:.242; background:#ede5da; }
  .figma-main .renew-hero .renew-slide--review:not(.renew-slide--newyear) { --pt:.14; --pb:.527; --px:.3; background:#eae0d6; }
  .figma-main .renew-hero .renew-slide--invitb { --img-w:100vw; --img-top:0px; background:#e5ddd3; }
  .figma-main .renew-hero .renew-slide--invitb::after { background:linear-gradient(180deg,transparent 0%,transparent 42%,var(--hero-wash) 58%,var(--hero-wash) 100%); }
}

/* (2026-11-11 대표님 42957 «메인 페이지 위를 완전 투명으로 해버렸잖아 · 그 머리 부분을 PC 도 같이 맞춰줘야 되지 않냐») PC·태블릿(768 이상) 첫 화면 머리.
   ① 폰(위 묶음)처럼 머리 뒤 흰 막(common/bojagi-header-overlay.css body::before · 86% 흰색 + 흐림)을 걷고 히어로를 맨 위(머리 뒤)부터 깐다.
      이 파일은 홈에만 실리므로 다른 화면의 머리는 그대로다.
   ② 승인된 PC 사진 구도(QA2857 · 448 높이 상자 · 장마다 사진 자리)는 손대지 않는다 — 사진 상자와 글 자리를 머리 높이(--hero-menu)만큼 내리고
      히어로를 그만큼 키워, 머리 아래로 보이는 것은 종전과 한 점도 다르지 않다(히어로 아래 칸들의 자리도 그대로).
   ③ 사진들은 위로 더 이어진 원본이 없다(1·5번은 사진 전체가 이미 보이고 2·3·4·6번도 46~72 뿐) — 머리 뒤는 장마다 사진 윗변 색
      (--hero-top-l·c·r = 왼·가운데·오른 · 1440 실측 · 768~1920 다른 폭과 차이 16 이하)으로 잇고, 사진 윗변을 space-4 만큼 그 색으로 옅게 한다.
      여섯 장 모두 윗변이 밝아 어두운 머리 글자·메뉴 밑줄·장바구니 숫자가 그대로 읽힌다.
   ④ 첫 화면 머리는 붙지 않고 페이지와 함께 올라간다(종전 그대로 · card/main-renewal.php 가 renewal-menu-pinned 를 지운다) — 그 아래 칸들은 흰 바탕 그대로.
   ⑤ 띠 배너가 있으면 흐름 전체가 배너만큼 내려간다(헤더 CSS 의 body padding-top 40·80) — 머리 높이에서 그만큼 빼 머리~사진 사이를 같게 둔다(폰 묶음도 같은 값).
   시험: card/tools/home_hero_phone_fill_browser_test.py ⑦~⑩(768·1024·1280·1440·1920 × 여섯 장 · --tamper pcbox·padding·backdrop 로 되돌리면 실패). */
@media (min-width:768px) {
  html body.renewal-header-overlay::before { background:transparent; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .renew-main.figma-main { padding-top:0; }
  .figma-main .renew-hero { --hero-menu:calc(var(--overlay-menu-top) + var(--overlay-menu-height) - var(--hero-banner-shift, 0px)); }
  .figma-main .renew-hero,
  .figma-main .renew-hero .renew-slide { height:calc(448px + var(--hero-menu)); }
  .figma-main .renew-hero .renew-slide {
    background-color:var(--hero-top-c, transparent);
    background-image:linear-gradient(to right, var(--hero-top-l, transparent), var(--hero-top-c, transparent), var(--hero-top-r, transparent));
  }
  .figma-main .renew-hero .renew-slide .renew-slide-media {
    inset:auto 0; top:var(--hero-menu); bottom:auto; height:448px;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--bj-space-4));
    mask-image:linear-gradient(to bottom, transparent 0, #000 var(--bj-space-4));
  }
  .figma-main .renew-hero .renew-slide-inner { position:relative; top:var(--hero-menu); height:448px; }
  .figma-main .renew-hero .renew-slide--newyear { --hero-top-l:#eaeaec; --hero-top-c:#e9e9eb; --hero-top-r:#e8e7ea; }
  .figma-main .renew-hero .renew-slide--sample { --hero-top-l:#dfdedb; --hero-top-c:#d3d1cd; --hero-top-r:#dbdbd6; }
  .figma-main .renew-hero .renew-slide--selpick { --hero-top-l:#f2e9e0; --hero-top-c:#e1d4c7; --hero-top-r:#dccfc1; }
  .figma-main .renew-hero .renew-slide--mobile { --hero-top-l:#f4ebdf; --hero-top-c:#f6efe3; --hero-top-r:#f4ede2; }
  .figma-main .renew-hero .renew-slide--review:not(.renew-slide--newyear) { --hero-top-l:#eee6dc; --hero-top-c:#ede5da; --hero-top-r:#e6ddd3; }
  .figma-main .renew-hero .renew-slide--invitb { --hero-top-l:#f3ebe1; --hero-top-c:#dfd7ca; --hero-top-r:#e8e2db; }
}
body.has-header-top-banner .figma-main .renew-hero,
body.has-partner-banner .figma-main .renew-hero { --hero-banner-shift:40px; }
body.has-header-top-banner.has-partner-banner .figma-main .renew-hero { --hero-banner-shift:80px; }

/* (2026-11-13 대표님 49631 · 11-08 설계) 히어로 «셀프 청첩장» 칸 — 승인된 «샘플후기» 장면(PC5·M5)과 같은 벽·빛·구도에서 가운데 상품만
   셀프 목록 첫 디자인으로 바꾼 사진(07-self-pc·07-self-mobile). 칸 자리·크기·색은 그 장면 규칙(.renew-slide--review)을 그대로 쓰고,
   사진을 화면 가장자리로 이어 붙이는 바깥 결만 이 사진으로 돌린다(그대로 두면 파우치 사진이 가장자리에 비친다). */
@media(min-width:1200px) {
 .figma-main .renew-slide--review.renew-slide--self { --pc15-texture:url('/card/img/main-renewal/hero-review-20261014/07-self-pc.webp'); }
}
@media(max-width:767px) {
 .figma-main .renew-slide--review.renew-slide--self { --photo-source:url('/card/img/main-renewal/hero-review-20261014/07-self-mobile.webp'); }
}