/* サイト側に表示される接客パーツ（管理画面プレビューとサイト側デモで共通） */
.pw-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.pw-layer > * { pointer-events: auto; }
.pw { font-family: inherit; color: #1c2333; box-sizing: border-box; }
.pw * { box-sizing: border-box; }
.pw-x { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: 20px; line-height: 1; color: #8a91a3; cursor: pointer; padding: 4px; }
.pw-cta { border: 0; background: var(--pw); color: #fff; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.pw-cta:hover { filter: brightness(1.08); }

.pw-overlay { position: absolute; inset: 0; background: rgba(15, 20, 40, .45); display: flex; align-items: center; justify-content: center; padding: 16px; animation: pwFade .25s ease; }
.pw-popup { position: relative; width: min(340px, 100%); background: #fff; border-radius: 14px; padding: 26px 22px 22px; text-align: center; box-shadow: 0 20px 50px rgba(15, 20, 40, .3); overflow: hidden; animation: pwPop .3s ease; }
.pw-band { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--pw); }
.pw-title { display: block; font-size: 17px; line-height: 1.5; margin-bottom: 8px; }
.pw p { margin: 0 0 16px; font-size: 13.5px; line-height: 1.7; color: #4a5266; }

.pw-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; background: #fff; border-top: 3px solid var(--pw); padding: 12px 44px 12px 16px; box-shadow: 0 -6px 20px rgba(15, 20, 40, .12); animation: pwUp .3s ease; }
.pw-bar-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pw-bar-text b { font-size: 14px; }
.pw-bar-text span { font-size: 12.5px; color: #4a5266; line-height: 1.5; }
.pw-bar .pw-x { top: 50%; transform: translateY(-50%); }

.pw-slide { position: absolute; right: 14px; bottom: 14px; width: min(290px, calc(100% - 28px)); background: #fff; border-radius: 12px; border-left: 5px solid var(--pw); padding: 16px 18px; box-shadow: 0 12px 34px rgba(15, 20, 40, .22); animation: pwSlide .35s ease; }
.pw-slide .pw-title { font-size: 14.5px; padding-right: 18px; }
.pw-slide p { font-size: 12.5px; margin-bottom: 12px; }
.pw-slide .pw-cta { font-size: 13px; padding: 8px 14px; }

@keyframes pwFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwPop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pwUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pwSlide { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }