/* 셀프 청첩장 목록·상세 — 풀세트 목록·상세와 같은 틀 (2026-11-09 대표님 · 설명 card/includes/self_catalog.php)
   글씨·색·간격·둥근 정도는 사이트 토큰(--bj-*, common/bojagi-design-system.css). 토큰이 없는 자리값은 줄마다 까닭을 적었다.
   사이트 머리말의 옛 공용 규칙을 걷는 것은 card/css/design-gallery.css 의 .dgal 이 맡는다. */
.dgal--selflist, .dgal--selfdetail {
	--slf-card-shadow: 2px 3px 8px rgba(0, 0, 0, .16), 8px 12px 24px rgba(0, 0, 0, .16);   /* 풀세트 목록 합성 사진의 카드 그림자와 맞춘 값(토큰 없음) */
	max-width: 1032px;   /* 풀세트 목록·상세 본문 폭 1000 + 양쪽 여백 16 */
	margin: 0 auto;
	padding: var(--bj-space-3) var(--bj-space-2) var(--bj-space-4);
}
.slf-title { margin: 0; font-size: var(--bj-type-page); font-weight: var(--bj-type-page-weight); line-height: var(--bj-type-page-line); letter-spacing: var(--bj-type-page-tracking); }
.slf-lead { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); color: var(--bj-muted); }
.dgal--selflist .slf-rail { margin-top: var(--bj-space-3); }
.slf-tools { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bj-space-1) var(--bj-space-2); margin: var(--bj-space-2) 0; }
.slf-count { margin: 0 0 0 auto; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.slf-count b { font-weight: 700; color: var(--bj-ink); }
.slf-entry[hidden] { display: none; }
.slf-row--shape[hidden] { display: none; }

/* 필터 — 풀세트 목록의 «필터»와 같은 항목·자리·모양. 자리값은 그 화면 실측(card/doc/product/wedding_catalog_refined.css.php #pl_sort_row · 폰 m/wedding_catalog_modern.css.php).
   .dgal 공용 여백 걷기보다 앞서도록 .dgal--selflist 를 붙인다. */
.slf-filter-btn { display: inline-flex; align-items: center; gap: var(--bj-space-1); height: 40px; margin: 0; padding: 0 14px; border: 1px solid #b8c0c3; border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-nav-indicator); cursor: pointer; }
.slf-filter-btn[aria-expanded="true"] { border-color: #aaa49b; }
.slf-filter-btn__ico { display: block; width: 18px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16'%3E%3Cpath d='M2 4h14M2 12h14' fill='none' stroke='%2353646b' stroke-width='1.25' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='4' r='1.65' fill='%23fff' stroke='%2353646b' stroke-width='1.25'/%3E%3Ccircle cx='12' cy='12' r='1.65' fill='%23fff' stroke='%2353646b' stroke-width='1.25'/%3E%3C/svg%3E") center / 18px 16px no-repeat; }
.slf-filter-btn__label { font-family: Pretendard; font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -.15px; }
.slf-filter-btn__n { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--bj-nav-indicator); color: #fff; font-size: 14px; font-weight: 600; line-height: 18px; text-align: center; }
.slf-filter-btn__n[hidden], .slf-filter-panel[hidden], .slf-filter-more[hidden], .slf-filter-fold__summary[hidden], .slf-filter-dim[hidden], .slf-applied[hidden] { display: none; }
.dgal--selflist .slf-filter-panel { position: relative; margin: 0 0 var(--bj-space-3); padding: 0; border-top: 1px solid #e8e4df; background: #fff; }
.dgal--selflist .slf-filter-panel__close { position: absolute; top: 16px; right: 0; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0; border: 0; background: none; color: #586267; font-size: 16px; font-weight: 500; line-height: 20px; cursor: pointer; }
.slf-filter-panel__chev { display: block; width: 12px; height: 8px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.slf-filter-panel__x { display: none; }
.dgal--selflist .slf-filter-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 10px 0 8px; border-bottom: 1px solid #e8e4df; }
.dgal--selflist .slf-filter-group { grid-column: 1 / -1; min-width: 0; margin: 0; padding: 0; }
.dgal--selflist .slf-filter-group--half { grid-column: auto; }
.dgal--selflist .slf-filter-group__title { margin: 0 0 8px; color: var(--bj-nav-indicator); font-size: 16px; font-weight: 700; line-height: 24px; }
.slf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slf-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; margin: 0; padding: 0 12px; border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-ink); font-size: 15px; font-weight: 500; line-height: 18px; letter-spacing: -.225px; cursor: pointer; }
.slf-chip svg { display: block; width: 26px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.slf-chip[aria-pressed="true"] { padding: 0 11px; border: 2px solid var(--bj-nav-indicator); background: var(--bj-information-surface); }
.slf-swatch { display: block; width: 18px; height: 18px; border: 1px solid var(--bj-line-strong); border-radius: 50%; }
.slf-swatch--1 { background: #fff; } .slf-swatch--2 { background: #ffc7e0; } .slf-swatch--3 { background: #e5ceff; } .slf-swatch--4 { background: #cee0ff; }
.slf-swatch--5 { background: #b7e5c6; } .slf-swatch--6 { background: #ffe6ab; } .slf-swatch--7 { background: #d9c5b4; } .slf-swatch--8 { background: #8e8e92; }
.pdl-sw--black { background: #3a3a3c; } /* 명함 목록 색상 «블랙·그레이»(11-11 대표님 42941) — 나머지 색은 위 견본 번호를 그대로 쓴다 */
.dgal--selflist .slf-filter-fold-head { margin: 0; font: inherit; }
.dgal--selflist .slf-filter-fold { display: inline-flex; align-items: center; gap: 16px; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; color: var(--bj-nav-indicator); font-size: 16px; font-weight: 700; line-height: 24px; cursor: pointer; }
.slf-filter-fold__toggle { color: var(--bj-ink); font-size: 15px; font-weight: 500; line-height: 22.5px; }
.dgal--selflist .slf-filter-fold__summary { margin: 0; color: var(--bj-muted); font-size: 15px; line-height: 18px; }
.slf-filter-more { display: flex; align-items: center; gap: var(--bj-space-1); }
.slf-filter-more__label { color: var(--bj-muted); font-size: 15px; }
.dgal--selflist .slf-filter-panel__foot { display: flex; justify-content: flex-end; margin: 0; padding: 10px 0 18px; }
.dgal--selflist .slf-filter-panel__go { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 220px; height: 48px; margin: 0; padding: 0 10px; border: 0; border-radius: 5px; background: var(--bj-nav-indicator); color: #fff; font-size: 16px; font-weight: 700; line-height: 20px; cursor: pointer; }
.dgal--selflist .slf-filter-panel__go span, .dgal--selflist .slf-filter-panel__go b { color: #fff; font-weight: inherit; }   /* 폰 공용 글자색이 단추 안 글자를 덮는다 */
.slf-filter-panel__go svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.dgal--selflist .slf-applied { display: flex; align-items: center; flex-wrap: wrap; gap: var(--bj-space-1); margin: -4px 0 24px; padding: 14px 0 0; border-top: 1px solid #e8e4df; }
.slf-applied__label { margin-right: 3px; color: #667078; font-size: 15px; font-weight: 500; }
.dgal--selflist .slf-applied__list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }   /* 사이트 공용 div 가운데 맞춤을 걷는다 */
.slf-applied__chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; margin: 0; padding: 0 12px; border: 1px solid var(--bj-line-strong); border-radius: 999px; background: #fff; color: var(--bj-ink); font-size: 15px; font-weight: 500; line-height: 24px; cursor: pointer; }
.slf-applied__reset { margin: 0; padding: 0; border: 0; background: none; color: #586267; font-size: 15px; font-weight: 500; cursor: pointer; }
@media (max-width: 767px) {
	/* 폰은 풀세트 목록처럼 아래에서 올라오는 시트 — 자리값은 그 화면 실측(시트 위 72 · 둥근 16 · 안쪽 20) */
	/* (2026-11-10 대표님 40627 «박스 뺄까» → 김 부장 «뺌») 폰 필터 = 상자 없이 그림만 — 청첩장·연하장 목록 폰 필터와 같은 모양(그림 너비 18 · 누름 칸 44 ·
	   그림 왼쪽 끝 = 목록 끝선 · 고른 수는 그림 오른쪽 위) · 이름 «필터»는 화면 읽기로만 */
	.slf-filter-btn { --bj-filter-icon-w: 18px; position: relative; justify-content: center; width: 44px; min-width: 44px; height: 44px; margin-left: calc((var(--bj-filter-icon-w) - 44px) / 2); padding: 0; gap: 0; border: 0; border-radius: 0; background: transparent; color: #333; }
	.slf-filter-btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
	.slf-filter-btn__ico { width: var(--bj-filter-icon-w); height: calc(var(--bj-filter-icon-w) * 25 / 38); background: url('/card/img/product_list_icon_filter.png') center / contain no-repeat; }
	.slf-filter-btn__n { position: absolute; top: calc(50% - var(--bj-filter-icon-w) * 25 / 76 - 12px); right: auto; left: calc((44px + var(--bj-filter-icon-w)) / 2 - 8px); }
	.slf-filter-dim { position: fixed; inset: 0; z-index: 100000; background: rgba(20, 31, 38, .46); }
	.dgal--selflist .slf-filter-panel { position: fixed; top: 72px; right: 0; bottom: 0; left: 0; z-index: 100001; margin: 0; border: 0; border-radius: 16px 16px 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.dgal--selflist .slf-filter-panel__close { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 44px; padding: 0 16px; background: #fff; }
	.slf-filter-panel__close-text, .slf-filter-panel__chev { display: none; }
	.slf-filter-panel__x { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
	.dgal--selflist .slf-filter-groups { display: block; padding: 10px 20px 0; border: 0; }
	.dgal--selflist .slf-filter-group { padding: 24px 0 16px; border-top: 1px solid #ece9e6; }
	.dgal--selflist .slf-filter-group:first-child { padding-top: 4px; border-top: 0; }
	.dgal--selflist .slf-filter-group__title { font-size: 18px; line-height: 27px; }
	.slf-chip { flex: 0 0 auto; height: 44px; font-size: 16px; line-height: 24px; letter-spacing: normal; }
	.slf-filter-group--shape .slf-chips, .slf-filter-group--four .slf-chips { display: grid; gap: 6px; }
	.slf-filter-group--shape .slf-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.slf-filter-group--four .slf-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.slf-filter-group--four .slf-chip { padding: 0 2px; }
	.slf-chip--shape { flex-direction: column; gap: 2px; height: 62px; padding: 4px 2px 0; }
	.slf-chip--shape svg { height: 24px; }
	.slf-chip[aria-pressed="true"] { padding: 0 11px; }
	.slf-filter-group--four .slf-chip[aria-pressed="true"] { padding: 0 1px; }
	.slf-chip--shape[aria-pressed="true"] { padding: 3px 1px 0; }
	.dgal--selflist .slf-filter-fold { display: flex; justify-content: space-between; width: 100%; font-size: 18px; line-height: 27px; }
	.slf-filter-fold__toggle { font-size: 16px; line-height: 24px; }
	.dgal--selflist .slf-filter-panel__foot { position: sticky; bottom: 0; padding: 10px 20px; background: #fff; }
	.dgal--selflist .slf-filter-panel__go { width: 100%; height: 44px; border-radius: 6px; }
	html.slf-filter-open, html.slf-filter-open body { overflow: hidden; }
}
@media (min-width: 768px) {
	/* 풀세트 목록과 제목·줄·필터 자리를 맞춘다(실측 · .weddingCatalogIdentity--pc 위 여백 · .weddingCatalogContextNav--pc 위아래 여백 · #pl_sort_row 위 여백) */
	.dgal--selflist { padding-top: 48px; }
	.dgal--selflist .slf-rail { margin-top: 0; padding-top: 28px; padding-bottom: 6px; }
	.dgal--selflist .slf-tools { margin-top: 20px; }
}

/* 목록 칸 */
.slf-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-3) 20px; /* 풀세트 목록 칸 사이(실측) */ margin: 0; padding: 0; list-style: none; }
.slf-item { position: relative; min-width: 0; margin: 0; padding: 0; list-style: none; }
/* 찜 하트 — 풀세트 목록·상세와 같은 부품(card/mod_zzim.php)·같은 자리(실측) */
.slf-item > .zzim_btn { top: 4px; right: 4px; bottom: auto; z-index: 3; width: 40px; height: 40px; background-position: center; background-size: 24px; }
.slf-gallery > .zzim_btn { top: 10px; right: 10px; bottom: auto; width: 30px; height: 30px; background-position: 70% 40%; background-size: cover; }
.slf-media { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 235 / 275; /* 풀세트 목록 칸과 같은 비율(실측) */ margin: 0; padding: 0; overflow: hidden; border: 0; border-radius: var(--bj-catalog-media-radius); background: var(--bj-template-media-surface); color: inherit; text-decoration: none; }
.slf-media img { display: block; width: auto; height: 69%; max-width: none; background: #fff; box-shadow: var(--slf-card-shadow); }   /* 카드 크기 = 풀세트 목록 카드 실측(칸 높이의 약 69%) */
.slf-media--landscape img { width: 70%; height: auto; }   /* 풀세트 목록 가로 카드 실측 */
.slf-media--square img { width: 56%; height: auto; }   /* 풀세트 목록 정사각 카드 실측 */
.slf-media--stage img { width: 91.5%; height: 93.3%; object-fit: contain; background: none; box-shadow: none; }   /* 연하장 목록 사진(460×520 투명 판 · 카드와 그림자가 구워져 있음) = 연하장 일반 목록·초대장·감사장과 같은 무대 여백(common/companion-catalog.css «연하장 낱장 판») · 흰 바탕을 깔지 않는다(대표님 40478) */
.slf-media--start { flex-direction: column; gap: var(--bj-space-1); padding: var(--bj-space-2); cursor: pointer; text-align: center; }
.slf-start__ico { display: flex; color: var(--bj-ink); }
.slf-start__ico svg { width: var(--bj-space-3); height: var(--bj-space-3); }
.slf-start__title { font-size: var(--bj-type-body); font-weight: 700; line-height: var(--bj-type-subsection-line); color: var(--bj-ink); }
.slf-start__hint { font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); }
.slf-name { display: block; width: 100%; margin: var(--bj-space-1) 0 0; padding: 0; overflow: hidden; border: 0; background: none; color: var(--bj-catalog-title-color); text-align: left; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; font-size: var(--bj-catalog-title-size); font-weight: 400; line-height: 20px; /* 풀세트 목록 이름과 같은 굵기·줄 높이(실측) */ cursor: pointer; }
.slf-price-row { display: flex; align-items: center; gap: var(--bj-space-1); margin: 4px 0 0; /* 풀세트 목록의 이름·값 사이(실측) */ }
.slf-qty select { appearance: none; -webkit-appearance: none; min-height: 28px; /* 풀세트 목록 수량 칸 높이(실측) */ padding: 0 18px 0 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23556168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; color: var(--bj-catalog-quantity-color); font-size: var(--bj-catalog-quantity-size); line-height: var(--bj-catalog-quantity-line); }
.slf-price { font-size: var(--bj-catalog-price-size); font-weight: var(--bj-catalog-price-weight); line-height: var(--bj-catalog-price-line); color: var(--bj-catalog-supporting-color); }
.slf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0 4px; margin: 2px 0 0; color: var(--bj-catalog-supporting-color); font-size: var(--bj-catalog-supporting-size); line-height: var(--bj-catalog-supporting-line); }
.slf-edit { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0; border: 0; background: none; color: #667078; /* 풀세트 목록 «샘플 담기»와 같은 색(common/catalog-controls.css --catalog-control-muted) */ font-size: inherit; font-weight: 400; line-height: inherit; cursor: pointer; }
.slf-edit::before { --slf-edit-pencil-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20l1.2-4.4L16.4 4.4a2 2 0 0 1 2.8 0l.4.4a2 2 0 0 1 0 2.8L8.4 18.8 4 20z'/%3E%3Cpath d='M14.5 6.3l3.2 3.2'/%3E%3C/svg%3E"); content: ""; width: 16px; height: 16px; /* 풀세트 목록 «샘플 담기» 앞 화살표와 같은 크기 */ background: currentColor; -webkit-mask: var(--slf-edit-pencil-mask) center / contain no-repeat; mask: var(--slf-edit-pencil-mask) center / contain no-repeat; }   /* 편집은 연필(샘플 담기 화살표와 구분 · 대표님 카드 3064) */
.slf-edit.is-opening { opacity: .55; }
.slf-actions .slf-tag::before { content: "·"; margin-right: 4px; color: var(--bj-catalog-supporting-color); }
.slf-tag { font-size: inherit; font-weight: 400; color: var(--bj-muted); }
.slf-tag--pill { display: inline-block; margin-left: 4px; padding: 0 var(--bj-space-1); border-radius: var(--bj-control-radius); background: var(--bj-information-surface); font-size: var(--bj-type-caption); color: var(--bj-muted); }

/* 디자인 의뢰 띠배너 */
.slf-band { grid-column: 1 / -1; margin: 0; list-style: none; }
.slf-band__link { display: flex; align-items: center; justify-content: space-between; gap: var(--bj-space-2); padding: var(--bj-space-2) var(--bj-space-3); border-radius: var(--bj-order-panel-radius); background: var(--bj-information-surface); color: var(--bj-ink); text-decoration: none; }
.slf-band__text { display: block; min-width: 0; }
.slf-band__title { display: block; font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
.slf-band__sub { display: block; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); }
.slf-band__thumbs { display: flex; flex: none; align-items: center; gap: var(--bj-space-1); }
.slf-band__thumbs img { display: block; width: auto; height: var(--bj-space-4); background: #fff; box-shadow: var(--slf-card-shadow); }
.slf-band__thumbs--stage img { background: none; box-shadow: none; }   /* 연하장 목록 사진(투명 판)은 흰 틀 없이 — 카드·그림자가 그림에 있음(대표님 40478) */

/* 첫 칸 형태 묻기 */
.slf-sheet { position: fixed; z-index: 2147483000; /* 사이트 머리말·떠 있는 단추 위 */ inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--bj-space-2); background: rgba(0, 0, 0, .45); }
.slf-sheet__box { position: relative; width: 100%; max-width: 420px; /* 편집기 형태 창과 같은 폭 */ padding: var(--bj-space-3); border-radius: var(--bj-order-panel-radius); background: #fff; }
.slf-sheet__box:focus { outline: 0; }   /* 마우스로 열 때 창 자체에 주는 초점 — 표시하지 않는다 */
.slf-sheet__title { display: block; margin: 0 0 var(--bj-space-2); padding-right: var(--bj-space-4); /* 닫기 X 자리 */ font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
.slf-sheet__list { display: grid; gap: var(--bj-space-1); }
.slf-sheet__close { position: absolute; top: var(--bj-space-1); right: var(--bj-space-1); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* 손가락 크기 */ padding: 0; border: 0; background: none; color: var(--bj-muted); cursor: pointer; }
.slf-sheet__close svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.slf-sheet__close:hover { color: var(--bj-ink, #1f1f1d); }

/* 상세 위쪽 */
.slf-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 34px; margin: 0 0 8px; color: var(--bj-ink); font-size: var(--bj-type-subsection); text-decoration: none; }   /* 풀세트 상세 ← 와 같은 자리(card/css/product-detail-modern.css .pdp-product-back-link 36×34 · 아래 8 · 대표님 45952) */
.dgal--selfdetail { padding-top: 16px; }
.dgal--selfdetail.nd-pdp { padding-top: 0; }   /* 명함 디자인 상세는 바깥 .dgal--nc 가 이미 위 16 — 두 번 띄우지 않게(11-12 대표님 46126 «청첩장처럼» · ← 132 · 그림 178 같은 자리) */
.dgal--selfdetail > .slf-back { margin-bottom: 12px; }   /* 풀세트 상세 ← 아래 큰 그림까지 12px(11-12 실측 ← 132~166 · 그림 178) */
.slf-gallery > .slf-stage { border-radius: 0; }   /* 풀세트 상세 큰 그림은 둥근 모서리 없음(11-12 실측) — 아래 구성 그림(.slf-stage)은 그대로 */   /* 풀세트 상세 머리 위 여백(.pdp-product-shell--with-back padding-top 16 · 대표님 45952 «머리 여백이 너무 많아») */
.slf-hero { display: grid; grid-template-columns: minmax(0, 520fr) minmax(0, 432fr); /* 풀세트 상세의 사진·주문 칸 폭(실측) */ gap: 48px; /* 풀세트 상세 칸 사이(실측) */ align-items: start; }
.slf-gallery { position: relative; min-width: 0; }
.slf-stage { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 520 / 624; /* 풀세트 상세 큰 사진 비율(실측) */ overflow: hidden; border-radius: var(--bj-catalog-media-radius); background: var(--bj-template-media-surface); }
.slf-card { display: block; flex: none; max-width: none; background: #fff; box-shadow: var(--slf-card-shadow); }
.slf-card--crop { position: relative; overflow: hidden; }
.slf-card--fold { overflow: hidden; }
.slf-stage > .slf-card--fold, .slf-thumb__box > .slf-card--fold { position: relative; }
.slf-card--fold img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
/* (2026-11-10 대표님 40433) 둥근 모서리 펼친 판 — 접는 선 양 끝이 파인 칼 모양(self-catalog.js foldCut 가림)을 안 칸에 씌우고, 그림자는 바깥 칸이 그 모양대로 그린다 */
.slf-card--cut { background: none; box-shadow: none; filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, .16)) drop-shadow(8px 12px 12px rgba(0, 0, 0, .16)); }
.slf-card__cut { position: absolute; inset: 0; display: block; background: #fff; }
.slf-card--half img { left: 50%; width: 50%; }   /* 엽서를 2단판 오른쪽 면에 — 왼쪽은 빈 면 */
.slf-card__half { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; overflow: hidden; }   /* 재단선으로 자른 엽서 면이 들어가는 오른쪽 판 */
.slf-card--half .slf-card__half img { inset: auto; }
.slf-foldline { position: absolute; display: block; pointer-events: none; }
/* 접는 선 — 실제 오시선처럼 살짝 눌린 자국(대표님 39957). 우리 펼침 사진(pb176·pb133·pb150·pb181 _e_ 펼침 컷)을 재서 맞췄다: 가운데 가는 어두운 줄, 옆에 옅은 줄과 밝은 결. 크기는 카드 폭에 비례 · 아주 작은 그림에서도 보이게 최소 3px */
.slf-foldline--x { top: 0; bottom: 0; width: 1.6%; min-width: 3px; transform: translateX(-58%); background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.5) 10%, rgba(0,0,0,.02) 20%, rgba(0,0,0,.03) 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.03) 50%, rgba(0,0,0,.085) 58%, rgba(0,0,0,.03) 66%, rgba(255,255,255,.35) 76%, rgba(255,255,255,0) 100%); }
.slf-foldline--y { left: 0; right: 0; height: 1.6%; min-height: 3px; transform: translateY(-58%); background: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.5) 10%, rgba(0,0,0,.02) 20%, rgba(0,0,0,.03) 30%, rgba(0,0,0,0) 40%, rgba(0,0,0,.03) 50%, rgba(0,0,0,.085) 58%, rgba(0,0,0,.03) 66%, rgba(255,255,255,.35) 76%, rgba(255,255,255,0) 100%); }
/* 펼친 안쪽 면의 약도 자리(김 부장 11-09 · 예시 약도 원본이 오기 전까지) — 편집기가 손님 약도를 넣는 그 자리에 점선 칸과 글 한 줄. 칸이 좁으면(가장 긴 낱말 «들어가요»와 안쪽 여백이 못 들어가는 폭) 글은 숨긴다 */
.slf-mapslot { position: absolute; display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; padding: var(--bj-space-1); border: 1px dashed var(--bj-line-strong); pointer-events: none; container-type: inline-size; }
.slf-mapslot__say { color: var(--bj-muted); font-size: var(--bj-type-caption); font-weight: var(--bj-type-caption-weight); line-height: var(--bj-type-caption-line); text-align: center; word-break: keep-all; }
@container (max-width: 5.2em) { .slf-mapslot__say { display: none; } }
.slf-mapslot--map { align-items: center; padding: 0; border: 0; background: none; }   /* 실제 약도 — 점선 없이 자리 안에 비율 그대로 */
.slf-mapslot--map img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

.slf-card--crop img { position: absolute; display: block; max-width: none; }
.slf-card--crop.is-rot { transform: rotate(180deg); box-shadow: -2px -3px 8px rgba(0, 0, 0, .16), -8px -12px 24px rgba(0, 0, 0, .16); }   /* 뒤집어 앉힌 면 — 그림자 방향은 다른 면과 같게 */
.slf-plate, .slf-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.slf-stage > .slf-card { width: auto; height: 74%; }
.slf-stage > .slf-card--wide { width: 80%; height: auto; }
.slf-stage > .slf-card--square { width: 64%; height: auto; }   /* 접힌 정사각 카드 */
/* 구성 컷 — 실제 면 그림을 겹쳐 놓는다(자리는 칸 크기에 대한 비율) */
.slf-scene { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slf-scene .slf-card { position: absolute; height: auto; }
.slf-scene--pair .slf-scene__b { left: 50%; top: 24%; width: 42%; }
.slf-scene--pair .slf-scene__a { left: 8%; top: 24%; width: 42%; }   /* 앞뒤를 나란히 — 기울이지 않는다 */
.slf-scene--pair.slf-scene--wide .slf-scene__b { left: 18%; top: 52%; width: 64%; }
.slf-scene--pair.slf-scene--wide .slf-scene__a { left: 18%; top: 14%; width: 64%; }
.slf-scene--open .slf-scene__b { left: 20%; top: 40%; width: 72%; }
.slf-scene--open .slf-scene__a { left: 9%; top: 11%; width: 36%; }
.slf-scene--open.slf-scene--tall .slf-scene__b { left: 42%; top: 13%; width: 50%; }
.slf-scene--open.slf-scene--tall .slf-scene__a { left: 8%; top: 52%; width: 52%; }
.slf-scene--env .slf-env { position: absolute; left: 3.8%; top: -19.3%; width: 115%; height: auto; max-width: none; }   /* 실제 봉투 사진 — 사진 바탕이 칸 바탕(#f1f1f1)과 같아 이어진다 · 돌리거나 다시 그리지 않는다 */
.slf-scene--env .slf-scene__a { left: 8%; top: 27%; width: 48.5%; }
.slf-scene--env.slf-scene--wide .slf-scene__a { left: 8%; top: 46%; width: 64%; }
.slf-scene--env.slf-scene--square .slf-scene__a { left: 8%; top: 38%; width: 54%; }
.slf-mobile { position: relative; flex: none; height: 100%; aspect-ratio: 520 / 624; /* 휴대폰 틀 그림 비율 — 폰의 낮은 칸에서도 틀이 잘리지 않게 */ }
.slf-mobile__skin { position: absolute; left: 50%; top: 46.5%; width: 43%; height: auto; max-width: none; border-radius: 11% / 6.2%; transform: translate(-50%, -50%); }   /* 풀세트 상세와 같은 자리 — 틀의 화면 구멍에 맞음 */
.slf-mobile__frame { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; max-width: none; }
.slf-mobile__open { position: absolute; left: 50%; bottom: 10.9%; display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(23, 24, 25, .16); border-radius: 6px; background: #fff; box-shadow: 0 5px 18px rgba(23, 24, 25, .08); color: var(--bj-ink); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transform: translateX(-50%); }
.slf-stage--small { aspect-ratio: 4 / 3; }
/* 작은 그림 줄 — 풀세트 상세(.pdp-thumbnail-rail · card/css/product-detail-modern.css)와 같은 값 · 넘치면 옆으로 밀어서 본다 */
/* 큰 그림 아래 이름 한 줄(대표님 40429) — 지금 보는 면이 무엇인지 · 펼친 겉면은 어느 쪽이 앞표지인지 */
.slf-stage-cap { margin: var(--bj-space-1) 0 0; color: var(--bj-muted); font-size: var(--bj-type-caption); font-weight: var(--bj-type-caption-weight); line-height: var(--bj-type-caption-line); text-align: center; }
.slf-stage-cap:empty { display: none; }
.slf-thumbs { position: relative; display: flex; gap: 12px; /* 풀세트 상세 작은 그림 사이(실측) */ margin: var(--bj-space-2) 0 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-inline: contain; cursor: grab; }
.slf-thumbs.is-dragging { cursor: grabbing; user-select: none; }
.slf-thumbs.has-tail::after { content: ""; flex: 0 0 var(--slf-thumbs-tail, 0); }   /* 끝 칸도 가운데로 올 수 있게(풀세트 getPdpGalleryTailOffset 과 같은 계산) */
.slf-thumbs::-webkit-scrollbar { display: none; }
.slf-thumb { flex: 0 0 112px; width: 112px; height: 132px; /* 풀세트 상세 작은 그림(실측) */ margin: 0; padding: 0; border: 0; background: none; color: var(--bj-muted); font-size: var(--bj-type-caption); text-align: center; cursor: pointer; }
.slf-thumb__box { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; border-radius: var(--bj-control-radius); background: var(--bj-template-media-surface); }
.slf-thumb.is-on .slf-thumb__box::after { content: ""; position: absolute; z-index: 1; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1.5px #514e4a; /* 풀세트 상세 작은 그림 선택 테두리(실측) */ pointer-events: none; }   /* 그림 위에 그린다 — 칸을 채우는 봉투 사진이 선을 가리지 않게 */
.slf-thumb__box > .slf-card { width: auto; height: 90%; }   /* 칸을 거의 채운다 — 풀세트 상세 작은 사진처럼(대표님 39442 «조그맣게») */
.slf-thumb__box > .slf-card--wide { width: 90%; height: auto; }
.slf-thumb__box > .slf-card--square { width: 84%; height: auto; }
/* 작은 그림 줄이 넘칠 때 — 풀세트 상세 .pdp-thumbnail-rail__tools 와 같은 진행 막대·이전·다음 */
.slf-thumbs-tools { display: flex; align-items: center; gap: var(--bj-space-2); min-height: 40px; margin-top: 12px; /* 풀세트 상세(실측) */ }
.slf-thumbs-tools[hidden] { display: none; }
.slf-thumbs-tools__progress { position: relative; flex: 1 1 auto; height: 1px; overflow: hidden; background: var(--bj-line); }
.slf-thumbs-tools__progress span { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--bj-ink); transition: left 160ms ease, width 160ms ease; }
.slf-thumbs-tools__buttons { display: flex; flex: 0 0 auto; gap: var(--bj-space-1); }
.slf-thumbs-tools__btn { position: relative; width: 36px; height: 36px; /* 풀세트 상세(실측) */ padding: 0; border: 1px solid var(--bj-line-strong); border-radius: 50%; background: #fff; color: var(--bj-ink); cursor: pointer; }
.slf-thumbs-tools__btn::before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; }
.slf-thumbs-tools__btn--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.slf-thumbs-tools__btn--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.slf-thumbs-tools__btn:disabled { color: var(--bj-muted); cursor: default; opacity: .38; }
@media (min-width: 768px) and (max-width: 1023px) {
	.slf-thumb { flex-basis: 92px; width: 92px; height: 108px; /* 풀세트 태블릿 상세(실측) */ }
}
.slf-mobile-thumb { display: block; width: 44%; height: auto; max-height: calc(100% - 20px); border: 2px solid var(--bj-ink); border-radius: 10px; background: #fff; object-fit: contain; }   /* 풀세트 상세 작은 그림과 같은 휴대폰 모양 */
.slf-buy { min-width: 0; }
.slf-buy__name { margin: 0; }
.slf-buy__lead { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-body); color: var(--bj-muted); }
.slf-buy__code { margin: var(--bj-space-1) 0 var(--bj-space-2); font-size: var(--bj-type-caption); color: var(--bj-muted); }
.slf-row { display: flex; align-items: center; min-height: 52px; /* 풀세트 상세 옵션 줄 높이(실측) */ margin: 0; }
.slf-row[hidden] { display: none; }
.slf-row--shape { align-items: flex-start; padding: var(--bj-space-1) 0; }
.slf-row__label { flex: none; width: 128px; /* 풀세트 상세 옵션 이름 폭(실측) */ color: var(--bj-muted); font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); }
.slf-row--shape .slf-row__label { padding-top: 10px; }
.slf-select { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--bj-space-3) 0 var(--bj-space-1); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); font-weight: 500; appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23181817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--bj-ink); font-size: var(--bj-type-control); }
.slf-pick { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 var(--bj-space-3) 0 var(--bj-space-1); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23181817' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 500; text-align: left; cursor: pointer; }
.slf-pick span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slf-pick--env { display: flex; align-items: center; gap: var(--bj-space-1); }
.slf-pick--env [data-slf-pick-text] { flex: 1 1 auto; min-width: 0; }
.slf-pick .slf-pick__photo { flex: none; display: block; width: 40px; height: 28px; border-radius: 4px; background: var(--bj-template-media-surface) center / 62px auto no-repeat; }   /* 고른 봉투의 실제 사진 — 사진 여백을 잘라 봉투만 보이게 */
.slf-pick .slf-pick__photo[hidden] { display: none; }
.slf-shapes { display: flex; flex: 1 1 auto; gap: var(--bj-space-1); min-width: 0; }
.slf-shape { flex: 1 1 0; min-width: 0; min-height: 56px; padding: var(--bj-space-1); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-ink); font-size: var(--bj-type-control); text-align: center; cursor: pointer; }
.slf-shape[aria-pressed="true"] { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); }
.slf-shape b { display: block; font-weight: 500; }
/* (11-11 대표님 44165) 크기 단추의 «추천» — 칸 안 글줄은 형태 단추와 같게 두고(이름 한 줄 · 값 한 줄) 표는 위 테두리에 얹는다 */
.slf-shape { position: relative; }
.slf-shape__badge { position: absolute; top: 0; right: var(--bj-space-1); margin: 0; transform: translateY(-50%); font-size: var(--bj-catalog-detail-size); line-height: var(--bj-catalog-detail-line); white-space: nowrap; }
.slf-row--size { margin-top: var(--bj-space-1); }   /* 위 테두리 표가 형태 줄 단추에 닿지 않게 */
/* 형태 줄 끝 모서리 한 칸 — 누를 때마다 직각 ↔ 둥글게(대표님 40705 «안 A» · 높이는 옆 형태 단추와 같다) */
.slf-shape--corner { flex: 0 0 auto; width: min-content; min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--bj-space-1) / 2); }   /* (11-11 대표님 44165) 칸 높이 = 옆 형태·크기 단추(이름 한 줄 + 값 한 줄) */
.slf-shape--corner small { word-break: keep-all; }   /* «둥글게»와 «+5,000» 사이에서만 줄을 나눈다 — 단추 폭은 누를 때 바뀌지 않는다 */
.slf-corner-ico { display: block; width: 1em; height: 1em; border-top: 2px solid var(--bj-ink); border-right: 2px solid var(--bj-ink); }   /* 모서리 하나만 그린다 — 직각은 ㄱ자 */
.slf-corner-ico.is-round { border-top-right-radius: .8em; }   /* 둥글게 — 같은 모서리를 둥글게 */
.slf-shape[aria-pressed="true"] b { font-weight: 700; }
.slf-shape small { display: block; color: var(--bj-muted); font-size: var(--bj-catalog-detail-size); line-height: var(--bj-catalog-detail-line); word-break: keep-all; overflow-wrap: anywhere; }   /* «10부»와 «8,290원» 사이에서만 줄을 나눈다 */
.slf-fact { display: flex; align-items: center; justify-content: space-between; gap: var(--bj-space-1); min-height: 54px; border-top: 1px solid var(--bj-line); font-size: var(--bj-type-control); color: var(--bj-muted); }
.slf-fact:first-of-type { margin-top: var(--bj-space-1); }
.slf-fact b { color: var(--bj-ink); font-weight: 700; }
.slf-fact small { font-size: var(--bj-type-caption); }
/* (2026-11-11 대표님 43195 → 43473) «셀프에도 이건 돼요» 한 줄 — 산 칸(값·단추) 아래 · 상세/후기 탭 위 · PC 넷 한 줄 · 폰 둘씩 두 줄 · 이 화면 글자·선 토큰만 */
/* (2026-11-11 대표님 44159 «아이콘 높이 제각각 · 여백 부족 · 뜻이 안 전해짐») 숨 쉬게 — 위아래 space-3 · 항목 사이 space-3(폰 줄 사이 space-2).
   항목 = 아이콘 칸 + 제목 줄 + 풀이 줄(--sub) · 아이콘은 제목 줄 가운데 · 제목은 모두 같은 높이에서 시작(풀이가 길어도 줄이 어긋나지 않게).
   폰은 한 줄에 하나(풀이가 두 칸 폭에 들어가지 않음). 글자는 제목·풀이 모두 컨트롤 단계(PC 15 · 폰 16) — 풀이는 보통 굵기 · 설명 글 색. */
.slf-perkline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-2) var(--bj-space-3); margin: var(--bj-space-3) 0 0; padding: var(--bj-space-3) 0; border-top: 1px solid var(--bj-line); border-bottom: 1px solid var(--bj-line); list-style: none; }
.slf-perkline li { display: grid; grid-template-columns: auto minmax(0, max-content); align-items: center; align-content: start; justify-content: center; column-gap: var(--bj-space-1); min-width: 0; font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); font-weight: 700; color: var(--bj-ink); word-break: keep-all; }
.slf-perkline svg { grid-column: 1; grid-row: 1; }
.slf-perkline li > span { grid-column: 2; grid-row: 1; }
.slf-perkline li > .slf-perkline__sub { grid-row: 2; font-weight: 400; color: var(--bj-muted); }
@media (max-width: 767px) { .slf-perkline { grid-template-columns: minmax(0, 1fr); row-gap: var(--bj-space-2); } .slf-perkline li { justify-content: start; } }
.slf-bill { padding: var(--bj-space-2) 0 0; border-top: 1px solid var(--bj-line); transition: opacity .12s; }
.slf-bill.is-pending { opacity: .5; }
.slf-bill__line { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--bj-type-caption); color: var(--bj-muted); }
.slf-bill__total { display: flex; align-items: baseline; justify-content: space-between; margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-control); color: var(--bj-muted); }
.slf-bill__total strong { color: var(--bj-ink); font-weight: 800; }
.slf-bill__total b { font-size: var(--bj-type-section); font-weight: 800; }
.slf-bill__total small { margin-left: 2px; font-size: var(--bj-type-body); font-weight: 600; }
.slf-cta { display: block; width: 100%; min-height: 54px; /* 풀세트 상세 큰 단추 높이(실측) */ margin: var(--bj-space-2) 0 0; border: 0; border-radius: var(--bj-control-radius); background: var(--bj-ink); color: #fff; font-size: var(--bj-type-body); font-weight: 700; cursor: pointer; }
/* (11-11 대표님 43026 «N개 디자인 보기 단추 글이 틀어졌고») 단추가 <a> 일 때 글이 왼쪽 위에 붙었다(<button> 만 글을 가운데로 둔다) — 링크 단추도 가로·세로 가운데 */
a.slf-cta { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }

/* 상세 아래쪽 */
/* 걸리는 줄 — 풀세트 상세와 같은 부품(card/product_detail_unified_section_nav.php: ← 뒤로 + 상세·후기·제작·배송 · ← 는 걸렸을 때만 card/css/product-detail-section-nav.css)
   사이트 대메뉴는 걸지 않는다(main data-catalog-header-owner) — 대표님 40472·40473. 화면 끝까지 · 메뉴 글씨 토큰 · 켠 칸 짧은 밑줄 = 풀세트 상세 */
.dgal--selfdetail .pdp-section-nav { position: sticky; top: 0; z-index: 5; /* 아래 구역의 그림 위 */ width: 100vw; margin: var(--bj-space-4) 0 var(--bj-space-3) calc(50% - 50vw); border-bottom: 1px solid var(--bj-line); background: #fff; --pdp-mobile-section-nav-height: var(--bj-control-height); }
.dgal--selfdetail .pdp-section-nav__inner { display: flex; width: min(100%, 1000px); /* 본문 폭(.dgal--selfdetail 1032 − 양쪽 16) = 풀세트 상세 레일 */ margin: 0 auto; }
.dgal--selfdetail .pdp-section-nav a { position: relative; display: flex; flex: 1 1 0; min-width: 0; min-height: var(--bj-control-height); align-items: center; justify-content: center; padding: 0 var(--bj-space-1); color: var(--bj-muted); font-size: var(--bj-type-nav); font-weight: var(--bj-type-nav-weight); line-height: var(--bj-type-nav-line); text-align: center; text-decoration: none; white-space: nowrap; }
.dgal--selfdetail .pdp-section-nav a.is-active { color: var(--bj-ink); }
.dgal--selfdetail .pdp-section-nav a.is-active::after { content: ""; position: absolute; bottom: -1px; left: 50%; width: var(--bj-space-3); height: 2px; border-radius: 999px; background: var(--bj-ink); transform: translateX(-50%); }
.slf-sec { margin: 0 0 var(--bj-space-4); scroll-margin-top: calc(var(--bj-control-height) + var(--bj-space-2)); /* 걸리는 줄 아래로 */ }
/* 상품 상세 이야기 — 풀세트 상세와 같은 본문 폭 800 */
.slf-story { max-width: 800px; margin-left: auto; margin-right: auto; }
.slf-story__title { margin: var(--bj-space-3) 0 var(--bj-space-2); padding: 0 0 var(--bj-space-3); border-bottom: 1px solid var(--bj-line); font-size: var(--bj-type-section); font-weight: 700; line-height: var(--bj-type-section-line); color: var(--bj-ink); }
.slf-note-row { display: grid; grid-template-columns: 184px minmax(0, 1fr); /* 풀세트 상세 노트 이름 폭(실측) */ gap: 0; margin: 0 0 var(--bj-space-2); }
.slf-note-row h3 { margin: 0; font-size: var(--bj-type-subsection); font-weight: 600; line-height: 1.5; letter-spacing: .08em; color: var(--bj-muted); }
.slf-note-row__meta img { display: block; width: auto; max-width: 120px; margin: var(--bj-space-1) 0 0; }
.slf-note-row p { word-break: keep-all; margin: 0; font-size: var(--bj-type-control); line-height: 1.7; color: var(--bj-ink); }
.slf-story__hero { position: relative; margin: 0 0 var(--bj-space-4); }
.slf-story__hero > img:first-child { display: block; width: 100%; height: auto; }
.slf-story__scene { position: relative; aspect-ratio: 5 / 6; /* 풀세트 연출 사진 비율(1000×1200) */ overflow: hidden; margin: 0 0 var(--bj-space-4); background: #e8e1d7; /* 풀세트 연출 사진의 종이 바탕 톤 */ }
.slf-story__scene[hidden] { display: none; }
.slf-story__scene::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(118deg, rgba(255, 255, 255, .6) 0 14%, transparent 14% 24%, rgba(255, 255, 255, .42) 24% 38%, transparent 38% 47%, rgba(255, 255, 255, .3) 47% 58%, transparent 58%); filter: blur(28px); }   /* 창으로 드는 빛 */
.slf-story__scene .slf-scene { position: absolute; inset: 0; }
.slf-story__scene > .slf-plate { position: absolute; inset: 0; }
.slf-story__cap { margin: calc(var(--bj-space-1) - var(--bj-space-4)) 0 var(--bj-space-4); font-size: var(--bj-type-caption); color: var(--bj-muted); text-align: right; }
.slf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-1); margin: 0; }
.slf-tiles--mood { margin-top: var(--bj-space-1); }
.slf-tiles:empty { display: none; }
.slf-tile { position: relative; aspect-ratio: 5 / 6; margin: 0; overflow: hidden; }
.slf-tile .slf-scene { position: absolute; inset: 0; width: auto; height: auto; }
.slf-tile figcaption { position: absolute; left: 4%; top: 3.5%; font-size: var(--bj-type-caption); font-weight: 600; color: var(--bj-muted); }
.slf-tile__flat { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.slf-tile__flat .slf-card { position: relative; width: 80%; height: auto; }
.slf-tile__flat .slf-card:not(.slf-card--wide) { width: 58%; }
.dgal--selfdetail .slf-story__lead { margin: var(--bj-space-2) 0; }   /* 사이트 공용 p 여백을 걷는 .dgal 규칙보다 앞서게 */
.slf-papers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bj-space-2); margin: var(--bj-space-3) 0 0; padding: 0; list-style: none; }
.slf-papers li { margin: 0; list-style: none; }
.slf-papers b { display: block; font-size: var(--bj-type-control); font-weight: 700; color: var(--bj-ink); }
.slf-papers span { display: block; margin: 2px 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); word-break: keep-all; }
.slf-reel__pic { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--bj-control-radius); overflow: hidden; background: #111; cursor: pointer; }
span.slf-reel__pic { cursor: default; }
.slf-reel__pic img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.slf-reel__pic i { position: absolute; left: 50%; top: 50%; width: var(--bj-space-4); height: var(--bj-space-4); margin: calc(var(--bj-space-4) / -2) 0 0 calc(var(--bj-space-4) / -2); border-radius: 50%; background: rgba(0, 0, 0, .45); }
.slf-reel__pic i::after { content: ''; position: absolute; left: 50%; top: 50%; margin: calc(var(--bj-space-2) / -2) 0 0 calc(var(--bj-space-1) / -2); border-style: solid; border-width: calc(var(--bj-space-2) / 2) 0 calc(var(--bj-space-2) / 2) var(--bj-space-2); border-color: transparent transparent transparent #fff; }
.slf-reel b { display: block; margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-control); font-weight: 700; color: var(--bj-ink); word-break: keep-all; }
.slf-reel em { display: inline-block; margin: 0 0 0 var(--bj-space-1); color: var(--bj-muted); font-size: var(--bj-type-caption); font-style: normal; font-weight: 400; }
.slf-modal__box.slf-modal__box--video { max-width: calc(74vh * 9 / 16); /* 세로 영상 폭만큼 — 양옆 검은 띠 없이 */ }
.slf-modal__box--video .slf-modal__body { padding: 0; background: #000; }
.slf-modal__box--video video { display: block; width: 100%; max-height: 74vh; aspect-ratio: 9 / 16; background: #000; }
.slf-step__art { position: relative; margin: 0 0 var(--bj-space-2); }
.slf-steps .slf-step__pill { position: absolute; left: 50%; bottom: 14%; display: inline-block; margin: 0; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--bj-ink); color: #fff; font-size: var(--bj-type-caption); font-weight: 600; white-space: nowrap; }   /* .slf-steps span 의 글자색·여백을 이긴다 */
.slf-scene--solo .slf-scene__a { left: 50%; top: 50%; width: 54%; transform: translate(-50%, -50%); }
.slf-scene--solo .slf-card--wide.slf-scene__a { width: 72%; }
.slf-scene--solo .slf-card--square.slf-scene__a { width: 62%; }
.slf-story__mark { position: absolute; left: 7%; top: 6%; width: 43%; height: auto; }   /* 풀세트 상세 글씨 자리(실측) */
.slf-story__sub { margin: 0; padding: 0 0 var(--bj-space-2); border-bottom: 1px solid var(--bj-line); font-size: var(--bj-type-body); font-weight: 700; color: var(--bj-ink); }
.slf-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-3) var(--bj-space-2); margin: var(--bj-space-3) 0 var(--bj-space-4); }
.slf-specs[hidden] { display: none; }
.slf-specs > div { width: auto; margin: 0; text-align: left; }   /* 사이트 공용 div 가운데 맞춤을 걷는다 */
.slf-specs dt { margin: 0 0 4px; font-size: var(--bj-type-control); color: var(--bj-muted); }
.slf-specs dd { margin: 0; font-size: var(--bj-type-control); font-weight: 700; color: var(--bj-ink); }
.slf-specs small { display: block; margin: 2px 0 0; font-size: var(--bj-type-caption); font-weight: 400; color: var(--bj-muted); }
.slf-story__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-1); }
.slf-story__more img { display: block; width: 100%; height: auto; }
.slf-story__more img:first-child { grid-column: 1 / -1; }
.slf-story__more--2 img:first-child { grid-column: auto; }
.slf-h2 { margin: 0; font-size: var(--bj-type-subsection); font-weight: var(--bj-type-subsection-weight); line-height: var(--bj-type-subsection-line); }
.slf-sub { margin: 4px 0 0; font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); color: var(--bj-muted); }
.slf-big { display: flex; justify-content: center; /* 그림이 한 장일 때 가운데 */ gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; }
.slf-big__item { flex: 0 1 calc(50% - var(--bj-space-1)); /* 그림이 하나여도 한 칸 크기 */ min-width: 0; margin: 0; }
.slf-big__item figcaption { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-caption); color: var(--bj-muted); text-align: center; }
.slf-note { display: flex; flex-wrap: wrap; gap: var(--bj-space-1); margin: var(--bj-space-2) 0 0; padding: var(--bj-space-2); border-radius: var(--bj-order-panel-radius); background: var(--bj-information-surface); }
.slf-note span { font-size: var(--bj-type-control); font-weight: 500; }
.slf-note span + span::before { content: "·"; margin-right: var(--bj-space-1); color: var(--bj-muted); }
.slf-steps { display: flex; gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
.slf-steps li { flex: 1 1 0; min-width: 0; margin: 0; padding: var(--bj-space-2); border-radius: var(--bj-order-panel-radius); background: var(--bj-information-surface); list-style: none; }
.slf-steps b { display: block; font-size: var(--bj-type-body); font-weight: 700; }
.slf-steps span { display: block; margin: 4px 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); }
.slf-table { width: 100%; margin: var(--bj-space-2) 0 0; border-collapse: collapse; }
.slf-table th, .slf-table td { padding: var(--bj-space-1) 4px; border-bottom: 1px solid var(--bj-line); font-size: var(--bj-type-control); text-align: right; }
.slf-table th:first-child, .slf-table td:first-child { color: var(--bj-muted); text-align: left; }
.slf-table th { font-weight: 700; }
.slf-table th small { display: block; color: var(--bj-muted); font-size: var(--bj-type-caption); font-weight: 400; }
.slf-spec[hidden], .slf-envs[hidden], .slf-sec[hidden] { display: none; }
.slf-spec { display: grid; grid-template-columns: 128px minmax(0, 1fr); /* 위 옵션 이름 폭과 같게 */ margin: var(--bj-space-2) 0 0; border-top: 1px solid var(--bj-line); }
.slf-spec dt, .slf-spec dd { margin: 0; padding: var(--bj-space-1) 0; border-bottom: 1px solid var(--bj-line); font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); }
.slf-spec dt { color: var(--bj-muted); }
.slf-scroller { display: flex; gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; padding: 0 0 var(--bj-space-1); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.slf-scroller > li { flex: none; margin: 0; list-style: none; scroll-snap-align: start; }
.slf-envs > li { width: calc((100% - var(--bj-space-2) * 3) / 4); }   /* 한 화면에 넷 — 나머지는 좌우로 */
.slf-envs li { margin: 0; list-style: none; text-align: center; }
.slf-envs i { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--bj-control-radius); background: var(--bj-template-media-surface); }
.slf-envs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.slf-envs span { display: block; overflow: hidden; margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-ink); text-overflow: ellipsis; white-space: nowrap; }
.slf-how img { display: block; width: 100%; height: auto; border: 1px solid var(--bj-line); border-radius: var(--bj-control-radius); }
.slf-how b { display: flex; align-items: center; gap: var(--bj-space-1); margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-control); font-weight: 700; }
.slf-how i { flex: none; width: var(--bj-space-3); height: var(--bj-space-3); border-radius: 50%; background: var(--bj-ink); color: #fff; font-size: var(--bj-type-caption); font-style: normal; line-height: var(--bj-space-3); text-align: center; }
.slf-how span { display: block; margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); word-break: keep-all; }
.slf-helps { display: flex; gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; }
.slf-helps button { font: inherit; text-align: left; background: none; cursor: pointer; }
.slf-helps a, .slf-helps button { flex: 1 1 0; min-width: 0; padding: var(--bj-space-2); border: 1px solid var(--bj-line); border-radius: var(--bj-order-panel-radius); color: var(--bj-ink); text-decoration: none; }
.slf-helps b { display: block; font-size: var(--bj-type-body); font-weight: 700; }
.slf-helps span { display: block; margin: 4px 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); }
.slf-more { display: inline-block; margin: var(--bj-space-1) 0 0; color: var(--bj-ink); font-size: var(--bj-type-control); }
.slf-grid--similar { margin-top: var(--bj-space-2); }
.slf-policies { margin: 0; }   /* 위 표의 아랫줄이 곧 첫 구분선 — 줄이 둘 서지 않게 */
.slf-policy { border-bottom: 1px solid var(--bj-line); }
.slf-policy summary { display: flex; align-items: center; justify-content: space-between; padding: var(--bj-space-2) 0; font-size: var(--bj-type-control); font-weight: 700; cursor: pointer; list-style: none; }
.slf-policy summary::-webkit-details-marker { display: none; }
.slf-policy summary::after { content: ""; flex: none; width: var(--bj-space-1); height: var(--bj-space-1); border-right: 2px solid var(--bj-muted); border-bottom: 2px solid var(--bj-muted); transform: rotate(45deg); }
.slf-policy[open] summary::after { transform: rotate(225deg); }
.slf-policy ul { margin: 0 0 var(--bj-space-2); padding: 0 0 0 var(--bj-space-2); font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); color: var(--bj-muted); }
/* (2026-11-11 대표님 42954 «코딱지 글씨» · 명함 점검 #8) 배송·교환 안내 줄은 ul 크기(입력칸 글 크기)를 따른다 — 옛 /card/css/css.css 의
   전체 선택자(*) 12px 규칙 가 li·b·strong 에 바로 걸려 이 안내가 12px 로 보였다(명함·인쇄·셀프 상세 공용). */
.slf-policy li, .slf-policy li :where(b, strong, em, span) { font-size: inherit; }
.slf-buybar { display: none; }
/* 고르기 창 — 편집기 주문 칸의 창과 같은 모양 */
html.slf-modal-open { overflow: hidden; }
.slf-modal, .slf-modal * { box-sizing: border-box; }
.slf-modal { position: fixed; z-index: 2147483000; /* 사이트 머리말·떠 있는 단추 위 */ inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--bj-space-2); background: rgba(0, 0, 0, .45); }
.slf-modal__box { display: flex; flex-direction: column; width: 100%; max-width: 680px; /* 편집기 제작 사양 창 폭(실측) */ max-height: 86vh; overflow: hidden; border-radius: var(--bj-order-panel-radius); background: #fff; }
.slf-modal__box--env, .slf-modal__box--wax { max-width: 864px; /* 편집기 추가 옵션 창 폭(실측) */ }
.slf-modal__box--silver { max-width: 480px; }
.slf-modal__head { display: flex; flex: none; align-items: center; justify-content: space-between; width: 100%; /* 사이트 공용 div 폭·가운데 맞춤을 걷는다 */ margin: 0; text-align: left; padding: var(--bj-space-2) var(--bj-space-3); border-bottom: 1px solid var(--bj-line); }
.slf-modal__head strong { font-size: var(--bj-type-subsection); font-weight: 700; color: var(--bj-ink); }
.slf-modal__close { width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--bj-ink); font-size: 24px; line-height: 1; cursor: pointer; }
.slf-modal__body { flex: 1 1 auto; width: 100%; margin: 0; min-height: 0; padding: var(--bj-space-3); overflow-y: auto; }
.slf-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-1); }
.slf-opts--paper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slf-opts--ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slf-opts--silver { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slf-opt { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: var(--bj-space-2); border: 1px solid var(--bj-line); border-radius: var(--bj-order-panel-radius); background: #fff; color: var(--bj-ink); text-align: center; cursor: pointer; }
.slf-opt.is-on { border-color: var(--bj-ink); box-shadow: inset 0 0 0 1px var(--bj-ink); }
.slf-opt--none { justify-content: center; }
.slf-opt__img { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--bj-control-radius); background: var(--bj-template-media-surface); }
.slf-opt__img img { display: block; max-width: 100%; max-height: 100%; }
.slf-opts--env .slf-opt__img img { width: 100%; height: 100%; object-fit: cover; }   /* 실제 봉투 사진 — 사진 바탕이 칸 바탕과 같아 칸을 꽉 채운다 */
.slf-opt__text { display: block; min-width: 0; margin: var(--bj-space-1) 0 0; }
.slf-opt__text b { display: block; font-size: var(--bj-type-control); font-weight: 700; }
.slf-opt__text small { display: block; margin: 2px 0 0; font-size: var(--bj-type-caption); line-height: var(--bj-type-caption-line); color: var(--bj-muted); }
.slf-opt__text em { display: block; margin: 2px 0 0; font-size: var(--bj-type-caption); font-style: normal; color: var(--bj-muted); }
.slf-opts--paper .slf-opt { flex-direction: row; gap: var(--bj-space-2); text-align: left; }
.slf-opts--paper .slf-opt__img { flex: none; width: 56px; }
.slf-opts--paper .slf-opt__text { flex: 1 1 auto; margin: 0; }
.slf-opts--paper .slf-opt__text em { color: var(--bj-ink); }
/* 공용 후기 영역 — 이 화면의 본문 폭에 맞춘다(풀세트 상세 틀의 안쪽 여백·칸 테두리를 쓰지 않는다) */
.dgal--selfdetail .pdp-review-surface { padding-left: 0; padding-right: 0; }
.dgal--selfdetail .pdp-review-overview__actions { padding: 0; border: 0; background: none; }

@media (max-width: 767px) {
	.dgal--selflist, .dgal--selfdetail { padding: var(--bj-space-2) var(--bj-space-2) var(--bj-space-4); }
	/* bj-40703 (2026-11-10 대표님 40703 «셀프 청첩장 표시 부분은 없어져야 · 모바일에서 청첩장 전체나 디자인 청첩장하고 똑같이 · 셀프 청첩장 클릭하면 옆으로 메뉴가 슬라이드로») 
	   폰 셀프 목록 = 풀세트 폰 목록처럼 머리 글 덩어리(제목·안내) 없이 머리말 바로 밑에 화면 끝에서 끝까지 탭 줄(바깥 여백만큼 밖으로 · 새 숫자 없음).
	   셀프 감사·초대장·셀프 연하장도 같은 틀 — 그 목록들의 다른 탭(감사장·연하장 목록)에도 폰 머리 글이 없다. PC·태블릿은 그대로. */
	.dgal--selflist { padding-top: 0; }
	.dgal--selflist .slf-head { display: none; }
	.dgal--selflist .slf-rail.weddingCatalogContextNav--mobile { width: calc(100% + var(--bj-space-2) * 2); margin: 0 calc(var(--bj-space-2) * -1); }   /* 폰 탭 줄 공용 규칙(width 100%)보다 앞서게 클래스 둘 */
	/* bj-40703-end */
	.slf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bj-space-3) 12px; /* 풀세트 폰 목록 칸 사이(실측) */ }
	.slf-edit { font-size: var(--bj-type-caption); }   /* 풀세트 폰 목록 «샘플 담기» 크기(실측) */
	.slf-band__link { padding: var(--bj-space-2); }
	.slf-band__title { font-size: var(--bj-type-body); line-height: var(--bj-type-body-line); }
	.slf-band__thumbs img { height: calc(var(--bj-space-4) - var(--bj-space-1)); }
	.slf-hero { grid-template-columns: minmax(0, 1fr); gap: var(--bj-space-2); }
	/* (11-12 대표님 45952 «풀세트와 동일하게 상세 머리 · 머리 여백이 너무 많아») 폰 상세 머리 = 풀세트 폰 상세(11-12 운영 실측):
	   머리말 바로 밑 · 화면 끝에서 끝까지 큰 그림 390×468(520:624) · 둥근 모서리 없음 · 그 아래 16px 띄워 작은 그림 줄(왼쪽 끝부터).
	   ← 는 머리말(상품 상세 머리)에 있으니 화면 안 ← 줄은 감춘다. */
	.dgal--selfdetail { padding-top: 0; }
	.dgal--selfdetail > .slf-back { display: none; }
	.dgal--selfdetail .slf-gallery { margin-left: calc(var(--bj-space-2) * -1); margin-right: calc(var(--bj-space-2) * -1); }
	.dgal--selfdetail .slf-stage { aspect-ratio: 520 / 624; border-radius: 0; }
	.slf-thumbs { margin-right: 0; }
	.slf-thumb { flex-basis: 88px; width: 88px; height: 104px; /* 풀세트 폰 상세 작은 그림(실측) */ }
	.slf-thumb__box { border-radius: 6px; /* 풀세트 폰 상세(실측) */ }
	.slf-thumbs-tools { display: none !important; }   /* 풀세트 폰 상세처럼 도구 없이 손가락으로 민다 */
	.slf-mobile__open { bottom: 8%; min-height: 32px; padding: 0 12px; font-size: 13px; }   /* 폰의 낮은 칸에서 휴대폰 화면을 덮지 않게 */
	.slf-mobile__open::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; bottom: -6px; }   /* 누르는 자리는 44px */
	.slf-note-row { grid-template-columns: minmax(0, 1fr); gap: var(--bj-space-1); }
	.slf-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slf-modal { align-items: flex-end; padding: 0; }
	.slf-modal__box, .slf-modal__box--env, .slf-modal__box--wax, .slf-modal__box--silver { max-width: none; max-height: 88vh; border-radius: var(--bj-order-panel-radius) var(--bj-order-panel-radius) 0 0; }
	.slf-modal__head { padding: var(--bj-space-2); }
	.slf-modal__body { padding: var(--bj-space-2); }
	.slf-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.slf-opts--paper { grid-template-columns: minmax(0, 1fr); }
	.slf-opt { padding: var(--bj-space-1); }
	.slf-buybar { position: fixed; z-index: 900; /* 사이트 하단 칸 자리 */ left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--bj-space-2); padding: var(--bj-space-1) var(--bj-space-2) calc(var(--bj-space-1) + env(safe-area-inset-bottom)); border-top: 1px solid var(--bj-line); background: #fff; }
	.slf-buybar__sum { min-width: 0; }
	.slf-buybar__sum span { display: block; overflow: hidden; font-size: var(--bj-type-caption); color: var(--bj-muted); text-overflow: ellipsis; white-space: nowrap; }
	.slf-buybar__sum strong { font-size: var(--bj-type-body); font-weight: 800; }
	.slf-buybar__go { flex: none; min-height: 48px; padding: 0 var(--bj-space-3); border: 0; border-radius: var(--bj-control-radius); background: var(--bj-ink); color: #fff; font-size: var(--bj-type-control); font-weight: 700; }
	body.slf-has-buybar .fixedBottomMenuWrapper { display: none; }   /* 풀세트 폰 상세처럼 주문 줄이 하단 메뉴 자리를 쓴다 */
	.dgal--selfdetail { padding-bottom: 96px; /* 주문 줄에 가리지 않게 */ }
	.slf-row__label { width: 96px; /* 폰 옵션 이름 폭 */ }
	.slf-shape:not(.slf-shape--corner) { padding-left: calc(var(--bj-space-1) / 2); padding-right: calc(var(--bj-space-1) / 2); }   /* 폰은 값이 한 줄에 들어가게 좌우 여백만 줄인다 */
	.slf-big, .slf-steps, .slf-helps { flex-direction: column; }
	.slf-big__item { flex: 1 1 auto; }
	.slf-spec { grid-template-columns: 96px minmax(0, 1fr); }
	.slf-envs > li { width: 40%; }
	.slf-papers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slf-envs span { white-space: normal; overflow-wrap: anywhere; }   /* 폰에서는 이름이 잘리지 않게 두 줄로 */
	.slf-sec { scroll-margin-top: calc(var(--bj-control-height) + var(--bj-space-2)); }
}

/* (2026-11-10 대표님 «배치 정렬을 포토 청첩장하고 똑같이») 풀케어 상세(card/doc/product/product_detail.php)와 같은 배치:
   상품 상세(800) — 기본 사양 아래는 «상품설명 더보기»로 접고, 후기·제작·배송 안내는 넓은 칸(1000). 제작 과정·만드는 법은 옆으로 넘기지 않고 칸으로 놓는다. */
.slf-wide { max-width: 1000px; margin-left: auto; margin-right: auto; }
.slf-more-body[hidden] { display: none; }
.slf-more-part { margin: var(--bj-space-4) 0 0; }
.slf-more-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px; margin: var(--bj-space-3) 0 0; padding: 0 16px; border: 1px solid #26323c; border-radius: 10px; background: #fff; color: var(--bj-ink); font: inherit; font-size: 15px; cursor: pointer; }   /* 풀케어 상세 «상품설명 더보기» 단추와 같은 값(product-detail-intro-boundary.css) */
.slf-more-toggle::after { content: ''; width: 8px; height: 8px; margin: -4px 0 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.slf-more-toggle[aria-expanded='true']::after { margin-top: 4px; transform: rotate(225deg); }
#pdp-production .slf-prod__sub { display: flex; align-items: baseline; gap: var(--bj-space-1); margin: var(--bj-space-4) 0 0; padding: 0 0 var(--bj-space-2); border-bottom: 1px solid var(--bj-line); font-size: var(--bj-type-body); font-weight: 700; }
#pdp-production .slf-prod__lead { margin: var(--bj-space-2) 0 0; font-size: var(--bj-type-control); color: var(--bj-muted); }
.slf-reel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bj-space-3) var(--bj-space-2); margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
.slf-reel > li { margin: 0; list-style: none; }
.slf-reel .slf-reel__pic img { aspect-ratio: 4 / 5; }   /* 풀케어 상세 제작 과정 칸과 같은 비율 — 세로 영상의 가운데 */
.slf-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
.slf-how > li { margin: 0; list-style: none; }
.slf-mcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--bj-space-2); margin: var(--bj-space-2) 0 0; padding: var(--bj-space-4) var(--bj-space-3); border-radius: var(--bj-order-panel-radius); background: linear-gradient(135deg, #f4f1ec, #e9e4dc); overflow: hidden; }
.slf-mcard__eyebrow { display: block; font-size: var(--bj-type-caption); letter-spacing: .14em; color: var(--bj-muted); }
.slf-mcard__h { margin: var(--bj-space-1) 0 0; font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--bj-ink); }   /* 칸 안 큰 글 — 사이트 섹션 제목보다 한 단계 큼(토큰 없음) */
.slf-mcard__sub { margin: var(--bj-space-1) 0 0; font-size: var(--bj-type-control); line-height: var(--bj-type-control-line); color: var(--bj-muted); }
.slf-mcard__list { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--bj-space-2) 0 0; padding: 0; list-style: none; }
.slf-mcard__list li { margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .8); font-size: var(--bj-type-caption); color: var(--bj-ink); list-style: none; }
.slf-mcard__go { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: var(--bj-space-3) 0 0; padding: 0 18px; border: 0; border-radius: 6px; background: var(--bj-ink); color: #fff; font: inherit; font-size: var(--bj-type-control); cursor: pointer; }
.slf-mcard__art { display: block; width: 112%; max-width: none; height: auto; margin: 0 -8% 0 -4%; }   /* 눕힌 휴대폰 두 대 — 오른쪽 끝으로 조금 나가 입체감(글은 덮지 않게) */
@media (max-width: 767px) {
	.slf-reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slf-how { grid-template-columns: minmax(0, 1fr); gap: var(--bj-space-3); }
	.slf-mcard { grid-template-columns: minmax(0, 1fr); padding: var(--bj-space-3) var(--bj-space-2) var(--bj-space-2); }
	.slf-mcard__h { font-size: 22px; }
	.slf-mcard__art { width: 110%; margin: 0 -5%; }
}
#pdp-production .slf-reel + .slf-policies { margin-top: var(--bj-space-4); }
.slf-ways { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--bj-space-1); margin-top: var(--bj-space-1); }   /* 인쇄·홍보물 상세(card/print_detail.php .pdd-ways)와 같은 두 칸 */
/* (11-11 한누리 님 1:1 241) 리플릿 상세 접는 방식 단추 위 그림 창(card/js/print-designs.js) — 흰 바탕 · 연회색 테두리 · 둥근 모서리 · 옅은 그림자 · 글 없음 */
.pdd-fold-row { position: relative; }
/*   (11-11 한누리 님 1:1 253) 두 단추 바로 아래 · 두 단추 합친 폭(자리·폭은 스크립트) · 위 꼬리(▲) = 마우스 올린 단추 가운데(--pdd-tail-x) · 그림은 원래 크기(폰은 폭에 맞춰 줄임) */
.pdd-fold-tip { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: space-evenly; gap: var(--bj-space-1); box-sizing: border-box; padding: var(--bj-space-3) var(--bj-space-2); background: #fff; border: 1px solid var(--bj-line); border-radius: var(--bj-control-radius); box-shadow: var(--bj-order-panel-shadow); pointer-events: none; }
.pdd-fold-tip::before { content: ""; position: absolute; top: 0; left: var(--pdd-tail-x, 50%); width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--bj-line); border-left: 1px solid var(--bj-line); transform: translate(-50%, -50%) rotate(45deg); }
.pdd-fold-tip[hidden] { display: none; }
.pdd-fold-tip img { display: block; flex: 0 1 auto; min-width: 0; width: auto; height: auto; }
.pdd-fold-tip span { flex: none; color: var(--bj-muted); }
/* slf-filter-table (2026-11-10 대표님 42708·42709 «청첩장 참조해서 청첩장처럼 제대로» · 42210③ 모든 목록 필터 = 청첩장 필터 부품)
   셀프 목록 필터(셀프 청첩장·셀프 연하장·셀프 감사·초대장 · #slfFilterPanel)도 청첩장 필터 표와 같은 값 — 종전엔 묶음 제목 위 + 테두리 칩(청첩장의 옛 모양).
   PC(768 이상) = card/doc/product/wedding_catalog_refined.css.php «PC 필터 표»: 줄마다 왼쪽 항목 이름(칸 112 · 13 회색) + 오른쪽 글자 선택(14 · 사이 22 · 높이 28) ·
   줄 위아래 13 · 줄 사이 가는 선 · 테두리·카드 형태 그림 없음 · 고르면 남색 굵게 + 밑줄 · 색은 점(12) + 이름 · «분위기 더보기 +»는 같은 표 줄(요약 줄 없음) · 닫기 13 회색.
   폰(767 이하) = m/wedding_catalog_modern.css.php bj-wfilter-table: 왼쪽 칸 96 · 사이 12 · 누름 44 · 글자 사이 18 · 시트 좌우 20 · 닫기 가는 ×(18).
   공용 목록 필터(common/catalog-controls.css bj-cc-filter · bj-cc-filter-pc)와 같은 결. 대조 시험 card/tools/design_grain/self_filter_table.json. */
@media (min-width: 768px) {
	.dgal--selflist .slf-filter-panel .slf-filter-panel__close { gap: 8px; color: var(--bj-text-muted); font-size: 13px; font-weight: 500; }
	.dgal--selflist .slf-filter-panel .slf-filter-groups { display: block; padding: 0; border-bottom: 0; }
	.dgal--selflist .slf-filter-panel .slf-filter-group,
	.dgal--selflist .slf-filter-panel .slf-filter-group--half {
		display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: baseline; grid-column: auto;
		min-width: 0; margin: 0; padding: 13px 0; border: 0; border-bottom: 1px solid var(--wedding-catalog-line, #f0ede8);
	}
	.dgal--selflist .slf-filter-panel .slf-filter-group:first-child .slf-chips { padding-right: 96px; }   /* 오른쪽 위 «필터 닫기» 자리 */
	/* (2026-11-11 대표님 42954 «코딱지 글씨») PC 필터 항목 이름·접는 줄 = 본문 글자(16px) · 고르는 글자 = 컨트롤 글자(15px) — 종전 13·14px · 이름이 한 단계 위(대표님 38244). 청첩장 목록 필터(wedding_catalog_refined.css.php)와 같이 */
	.dgal--selflist .slf-filter-panel .slf-filter-group__title { margin: 0; color: var(--bj-text-muted); font-size: var(--bj-type-body, 16px); font-weight: 500; line-height: 28px; }
	/* 글자 줄은 오른쪽 칸을 꽉 채우고 왼쪽부터 — 종전 칸 안에서 제 폭만큼 줄어 가운데로 갔다(청첩장 .weddingFilterChipLine 처럼 칸 폭) */
	.dgal--selflist .slf-filter-panel .slf-chips { display: flex; flex-wrap: wrap; gap: 2px 22px; justify-self: stretch; width: auto; max-width: none; margin: 0; }
	.dgal--selflist .slf-filter-panel .slf-chip,
	.dgal--selflist .slf-filter-panel .slf-chip--shape,
	.dgal--selflist .slf-filter-panel .slf-chip[aria-pressed="true"] {
		display: inline-flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px;
		width: auto; height: 28px; min-height: 28px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
		color: #3a3f45; font-size: var(--bj-type-control, 15px); font-weight: 400; line-height: 28px; letter-spacing: normal; text-decoration: none;
	}
	.dgal--selflist .slf-filter-panel .slf-chip svg { display: none; }
	.dgal--selflist .slf-filter-panel .slf-chip:hover { color: var(--bj-brand-navy); }
	.dgal--selflist .slf-filter-panel .slf-chip[aria-pressed="true"] { color: var(--bj-brand-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
	.dgal--selflist .slf-filter-panel .slf-swatch { flex: none; width: 12px; height: 12px; }
	.dgal--selflist .slf-filter-panel .slf-filter-group--fold { display: block; border-bottom: 0; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold {
		display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: baseline;
		width: 100%; min-height: 28px; padding: 0; text-align: left; color: var(--bj-text-muted); font-size: var(--bj-type-body, 16px); font-weight: 500; line-height: 28px;
	}
	.dgal--selflist .slf-filter-panel .slf-filter-fold__name { color: var(--bj-text-muted); font-size: var(--bj-type-body, 16px); font-weight: 500; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold__toggle { justify-self: start; color: #3a3f45; font-size: var(--bj-type-control, 15px); font-weight: 400; line-height: 28px; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold__summary { display: none; }
	.dgal--selflist .slf-filter-panel .slf-filter-more { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; align-items: baseline; padding: 13px 0 0; }
	.dgal--selflist .slf-filter-panel .slf-filter-more[hidden] { display: none; }
	.dgal--selflist .slf-filter-panel .slf-filter-more__label { color: var(--bj-text-muted); font-size: var(--bj-type-body, 16px); font-weight: 500; line-height: 28px; }
	.dgal--selflist .slf-filter-panel .slf-filter-panel__foot { border-top: 1px solid #eeeae5; }
}
@media (max-width: 767px) {
	/* 시트는 청첩장 폰 시트처럼 아래에서 내용 높이만큼 — 종전 위 72 에 붙은 전체 높이라 묶음이 적은 셀프 연하장은 흰 칸이 컸다(위 한도 72 는 그대로) */
	.dgal--selflist .slf-filter-panel { top: auto; max-height: calc(100dvh - 72px); }
	.dgal--selflist .slf-filter-panel .slf-filter-groups { padding: 0 20px; }
	.dgal--selflist .slf-filter-panel .slf-filter-group,
	.dgal--selflist .slf-filter-panel .slf-filter-group:first-child {
		display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: baseline;
		margin: 0; padding: var(--bj-space-1) 0; border: 0; border-bottom: 1px solid var(--bj-line);
	}
	.dgal--selflist .slf-filter-panel .slf-filter-group__title { margin: 0; color: var(--bj-text-muted); font-size: var(--bj-type-caption); font-weight: 500; line-height: 44px; }
	.dgal--selflist .slf-filter-panel .slf-chips,
	.dgal--selflist .slf-filter-panel .slf-filter-group--shape .slf-chips,
	.dgal--selflist .slf-filter-panel .slf-filter-group--four .slf-chips { display: flex; flex-wrap: wrap; gap: 0 18px; grid-template-columns: none; justify-self: stretch; width: auto; max-width: none; margin: 0; }
	.dgal--selflist .slf-filter-panel .slf-chip,
	.dgal--selflist .slf-filter-panel .slf-chip--shape,
	.dgal--selflist .slf-filter-panel .slf-filter-group--four .slf-chip,
	.dgal--selflist .slf-filter-panel .slf-chip[aria-pressed="true"],
	.dgal--selflist .slf-filter-panel .slf-filter-group--four .slf-chip[aria-pressed="true"],
	.dgal--selflist .slf-filter-panel .slf-chip--shape[aria-pressed="true"] {
		flex: 0 0 auto; display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
		width: auto; height: auto; min-height: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
		color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 400; line-height: var(--bj-type-caption-line); letter-spacing: normal; text-decoration: none;
	}
	.dgal--selflist .slf-filter-panel .slf-chip svg { display: none; }
	.dgal--selflist .slf-filter-panel .slf-chip[aria-pressed="true"],
	.dgal--selflist .slf-filter-panel .slf-filter-group--four .slf-chip[aria-pressed="true"],
	.dgal--selflist .slf-filter-panel .slf-chip--shape[aria-pressed="true"] { color: var(--bj-brand-navy); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
	.dgal--selflist .slf-filter-panel .slf-swatch { flex: none; width: 12px; height: 12px; }
	.dgal--selflist .slf-filter-panel .slf-filter-group--fold { display: block; border-bottom: 0; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold {
		display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: baseline;
		width: 100%; min-height: 44px; padding: 0; text-align: left; color: var(--bj-text-muted); font-size: var(--bj-type-caption); font-weight: 500; line-height: 44px;
	}
	.dgal--selflist .slf-filter-panel .slf-filter-fold__name { color: var(--bj-text-muted); font-size: var(--bj-type-caption); font-weight: 500; line-height: 44px; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold__toggle { justify-self: start; color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 400; line-height: 44px; }
	.dgal--selflist .slf-filter-panel .slf-filter-fold__summary { display: none; }
	.dgal--selflist .slf-filter-panel .slf-filter-more { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; align-items: baseline; }
	.dgal--selflist .slf-filter-panel .slf-filter-more[hidden] { display: none; }
	.dgal--selflist .slf-filter-panel .slf-filter-more__label { color: var(--bj-text-muted); font-size: var(--bj-type-caption); font-weight: 500; line-height: 44px; }
	.dgal--selflist .slf-filter-panel .slf-filter-panel__x { width: 18px; height: 18px; stroke-width: 1; }
}
/* 보기 단추 돋보기 — 청첩장 .ProdViewBtn .iconSearch 와 같은 14 · 흰색(폰 공용 글자색이 그림 색을 흐리게 덮었다) */
.dgal--selflist .slf-filter-panel .slf-filter-panel__go svg { width: 14px; height: 14px; color: #fff; stroke: #fff; }
/* slf-filter-table-end */
/* (2026-11-12 대표님 47514 «포스터는 왜 상세페이지 하다 말았어?») 포스터 상세 장면 — 그 디자인 그림으로만 그린다(지어낸 사진 없음 · card/js/print-designs.js sceneHtml).
   벽에 붙인 모습 · 크기 비교(규격 mm 비율 = --pdd-r). 큰 그림 칸·작은 그림 칸·아래 상세가 같은 장면을 쓴다. */
[data-pdd-stage] { position: relative; }
.pdd-scene { position: absolute; inset: 0; display: block; overflow: hidden; }
.pdd-scene img { display: block; max-width: none; }
.pdd-scene--wall { background: linear-gradient(180deg, #ece7df 0 80%, #d8cfc2 80% 81%, #e4ddd2 81% 100%); /* 벽 · 걸레받이 · 바닥 */ }
.pdd-scene--wall .pdd-scene__poster { position: absolute; left: 50%; top: 13%; height: 60%; width: auto; transform: translateX(-50%); box-shadow: 0 1.2em 2.4em rgba(40, 30, 20, .22), 0 .15em .4em rgba(40, 30, 20, .18); }
.pdd-scene--size { display: flex; align-items: flex-end; justify-content: center; gap: 8%; padding: 0 6% 9%; box-sizing: border-box; background: var(--bj-template-media-surface); }
.pdd-scene__one { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 78%; }
.pdd-scene__one img { height: calc(var(--pdd-r, 1) * 82%); width: auto; box-shadow: 0 .6em 1.4em rgba(40, 30, 20, .18); }
.pdd-scene__one b { margin: var(--bj-space-1) 0 0; color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 700; line-height: 1.3; }
.pdd-scene__one small { color: var(--bj-muted); font-size: var(--bj-type-control); line-height: 1.3; }
.slf-thumb__box .pdd-scene__one b, .slf-thumb__box .pdd-scene__one small { display: none; }   /* 작은 그림 칸엔 글자 없이 */
.slf-thumb__box .pdd-scene__one img { height: calc(var(--pdd-r, 1) * 100%); }
.pdd-story-scene .pdd-scene--wall .pdd-scene__poster { height: 64%; }
.pdd-size-scene { position: relative; aspect-ratio: 16 / 9; overflow: hidden; margin: var(--bj-space-2) 0 0; border-radius: var(--bj-catalog-media-radius); }
.pdd-size-scene[hidden] { display: none; }
.pdd-size-list span { font-size: var(--bj-type-control); }
/* (2026-11-12 대표님 47763) 리플릿 상세 «형태 안내» 접는 순서 그림 — 상세 접는 방식 단추 창(.pdd-fold-tip)과 같은 그림·같은 화살표 */
.pdd-fold-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: var(--bj-space-3); margin: var(--bj-space-3) 0 0; }
.pdd-fold-guide figure { margin: 0; padding: var(--bj-space-3); border-radius: var(--bj-catalog-media-radius); background: var(--bj-template-media-surface); }
.pdd-fold-guide figcaption { margin: 0 0 var(--bj-space-2); color: var(--bj-ink); font-size: var(--bj-type-control); font-weight: 700; }
.pdd-fold-guide__pics { display: flex; align-items: center; justify-content: space-evenly; gap: var(--bj-space-1); }
.pdd-fold-guide__pics img { display: block; flex: 0 1 auto; min-width: 0; height: auto; max-width: 30%; }
.pdd-fold-guide__pics span { flex: none; color: var(--bj-muted); }
/* (2026-11-12 대표님 48559) 카드·엽서 상세 — 이 디자인이 없는 형태 칸(누르면 안내) · 같은 형태 칸 모양에 흐린 글자만 */
.pdd-shape--na { background: var(--bj-template-media-surface); }   /* 없는 형태 = 회색 바탕(그림 칸과 같은 회색 토큰) · 누를 수는 있다 */
.pdd-shape--na b, .pdd-shape--na small { color: var(--bj-muted); }
.pdd-shape-note { margin: var(--bj-space-1) 0 0; color: var(--bj-muted); font-size: var(--bj-type-control); line-height: 1.5; }
.pdd-shape-note a { color: var(--bj-ink); text-decoration: underline; }
/*   형태 칸이 셋을 넘으면(카드·엽서 — 없는 형태 칸까지) 한 줄에 셋씩 감싼다 — 한 줄에 다섯이 들어가 글자가 세로로 쪼개지던 것 */
[data-pdd-page] .slf-shapes:has(> .slf-shape:nth-child(4)) { flex-wrap: wrap; }
[data-pdd-page] .slf-shapes:has(> .slf-shape:nth-child(4)) > .slf-shape { flex: 0 0 calc((100% - 2 * var(--bj-space-1)) / 3); }
/* (2026-11-12 대표님 48559 ②) 카드·엽서 상세 «후가공» — 접혀 있다가 펼치면 «넣을 후가공» 줄(공용 common/postproc-lines.css) + 고를 판 칸 */
.pdd-pp { display: block; }
.pdd-pp__sum { display: flex; align-items: center; min-height: 52px; cursor: pointer; list-style: none; }   /* 다른 옵션 줄(.slf-row)과 같은 칸 — 이름 칸 뒤 바로 값 칸 */
.pdd-pp__sum::-webkit-details-marker { display: none; }
.pdd-pp__now { flex: 1 1 auto; min-width: 0; padding: var(--bj-space-1) var(--bj-space-2); border: 1px solid var(--bj-line-strong); border-radius: var(--bj-control-radius); color: var(--bj-ink); font-size: var(--bj-type-control); }
.pdd-pp__now::after { content: " ›"; color: var(--bj-muted); }
.pdd-pp[open] .pdd-pp__now::after { content: " ⌃"; }
.pdd-pp__body { margin: var(--bj-space-2) 0 0; }
.pdd-pp__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bj-space-1); margin: var(--bj-space-2) 0 0; }
.pdd-pp__tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; padding: var(--bj-space-1); border: 1px solid var(--bj-line); border-radius: var(--bj-control-radius); background: #fff; color: var(--bj-ink); font-size: var(--bj-type-control); text-align: left; cursor: pointer; }
.pdd-pp__tile[aria-pressed="true"] { border-color: var(--bj-ink); }
.pdd-pp__tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bj-control-radius); }
.pdd-pp__tile small { color: var(--bj-muted); font-size: var(--bj-type-control); }