/* 상품 안내 모달 껍데기 — 청첩장 상세 «가공 방법 ›»·«제작 일정 자세히 ›»가 여는 그 모달(.pdp-product-guide-dialog)과 같은 값.
   (2026-10-27 대표님 «종이·후가공 고르기는 청첩장 상세 모달 그대로») 상세 쪽 규칙은 body.pdp-modern-page 아래에서만 걸려
   다른 화면이 그 CSS 를 실을 수 없다 — 껍데기(가림막·판·머리·닫기·몸통·폰 아래 시트)만 값 그대로 여기에 두고, 모달 위에 .bj-guide-dialog 를 붙인 화면이 쓴다.
   값 원천: card/css/product-detail-modern.css «Product guide dialog» 절(5218~5860)과 토큰(--pdp-* 796~900 · 폰 8835~8837).
   같은지는 결 시험(card/tools/design_grain/newyear_self_request.json «모달 제목» 짝 ↔ 상세 «제작·배송 일정» 모달 제목)이 지킨다. */
.bj-guide-dialog {
    --pdp-ink: #181817;
    --pdp-subtle: #726e69;
    --pdp-line: var(--bj-line, #ece9e6);
    --pdp-color-control: var(--bj-line-strong, #938d86);
    --pdp-color-control-hover: #726e69;
    --pdp-color-panel: #f5f5f3;
    --pdp-type-subsection-size: 18px;
    --pdp-type-subsection-line: var(--bj-type-subsection-line);
}
body.bj-guide-open { overflow: hidden !important; }
.bj-guide-dialog.pdp-product-guide-dialog[hidden] { display: none !important; }
.bj-guide-dialog.pdp-product-guide-dialog { position: fixed; z-index: 13000; inset: 0; display: grid; place-items: center; padding: 32px; font-family: var(--bj-font-family, Pretendard, sans-serif); }
.bj-guide-dialog .pdp-product-guide-dialog__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(18, 28, 38, .46); cursor: default; }
.bj-guide-dialog .pdp-product-guide-dialog__panel { position: relative; display: flex; width: min(760px, calc(100vw - 64px)); max-height: min(82vh, 760px); flex-direction: column; overflow: hidden;
    margin: 0; padding: 0; border: 1px solid rgba(18, 28, 38, .08); border-radius: 18px; background: #fff; box-shadow: 0 28px 80px rgba(18, 28, 38, .22); }   /* 바깥·안쪽 여백 0 — 옛 공통 CSS 의 section 위아래 여백(50px)을 막음(10-27 폰 실측) */
.bj-guide-dialog .pdp-product-guide-dialog__header { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid var(--pdp-line); box-sizing: border-box; }
.bj-guide-dialog .pdp-product-guide-dialog__header > div { min-width: 0; flex: 1 1 auto; margin: 0; text-align: left; }
.bj-guide-dialog .pdp-product-guide-dialog__header h2 { margin: 0; color: var(--pdp-ink); font-size: var(--pdp-type-subsection-size); font-weight: 700; letter-spacing: -.02em; line-height: var(--pdp-type-subsection-line); }
.bj-guide-dialog .pdp-product-guide-dialog__close { display: inline-grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid var(--pdp-color-control); border-radius: 50%; background: #fff; color: var(--pdp-ink); cursor: pointer; }
.bj-guide-dialog .pdp-product-guide-dialog__close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.5; }
.bj-guide-dialog .pdp-product-guide-dialog__close:hover { border-color: var(--pdp-color-control-hover); background: var(--pdp-color-panel); }
.bj-guide-dialog .pdp-product-guide-dialog__close:focus-visible { outline: 2px solid rgba(18, 28, 38, .18); outline-offset: 2px; }
.bj-guide-dialog .pdp-product-guide-dialog__body { min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 767px) {
    .bj-guide-dialog { --pdp-type-subsection-size: 20px; }
    .bj-guide-dialog.pdp-product-guide-dialog { place-items: end stretch; padding: 0; }
    .bj-guide-dialog .pdp-product-guide-dialog__panel { width: 100%; max-height: min(84vh, 720px); max-height: min(84dvh, 720px); border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -18px 54px rgba(18, 28, 38, .2); }
    .bj-guide-dialog .pdp-product-guide-dialog__header { min-height: 70px; padding: 15px 20px; }
    .bj-guide-dialog .pdp-product-guide-dialog__close { width: 44px; height: 44px; }
    .bj-guide-dialog .pdp-product-guide-dialog__body { padding: 20px 20px calc(24px + env(safe-area-inset-bottom)); }
}