/* 추가 · 2차 시안 업종변경 영수증 (6無 → 아끼는 돈 → 사장님이 준비하실 것) */
.s18b {
  --s18b-paper: #f5efda;
  --s18b-slip: #fffdf6;
  --s18b-green: #005633;
  --s18b-gray: #6f736b;
  --s18b-seal: #b3261e;
  --s18b-dash: #c2baa4;
  background: var(--s18b-paper) url(../assets/s19/paper.jpg) center top / 460px auto repeat;
  color: var(--c-ink);
  padding: 90px 0 100px;
}
.s18b-in { display: flex; flex-direction: column; align-items: center; }
.s18b-title { font-size: clamp(28px, 4.2vw, 52px); text-align: center; color: #000; letter-spacing: -0.05em; }
.s18b-title em { font-style: normal; color: var(--s18b-green); }

.s18b-rc {
  --zz: radial-gradient(circle at 7px 0, transparent 7px, var(--s18b-slip) 7.5px);
  position: relative; width: min(100%, 480px); margin-top: 44px; padding: 26px 26px 22px;
  background: var(--s18b-slip); box-shadow: 0 10px 28px rgba(80, 60, 20, .16);
  font-variant-numeric: tabular-nums;
}
.s18b-rc::before, .s18b-rc::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: var(--zz); background-size: 14px 12px; }
.s18b-rc::before { top: -11px; transform: rotate(180deg); }
.s18b-rc::after { bottom: -11px; }
.s18b-rt { display: grid; gap: 2px; text-align: center; }
.s18b-rt b { font: 900 24px/1.3 var(--f-display); letter-spacing: -0.03em; }
.s18b-rt small { font-size: 14px; color: var(--s18b-gray); }
.s18b-rc hr { border: 0; border-top: 1.5px dashed var(--s18b-dash); margin: 14px 0; }
.s18b-sec { font-size: 14px; font-weight: 700; color: var(--s18b-green); margin-bottom: 4px; }
.s18b-it { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 3px 0; font-size: 16px; }
.s18b-it s { color: var(--s18b-gray); font-size: 14.5px; }
.s18b-z { min-width: 3.6em; text-align: right; font-weight: 900; color: var(--s18b-green); }
.s18b-z.s18b-k { color: var(--c-ink); }
.s18b-d { grid-column: 1 / -1; margin-top: -3px; font-size: 14px; color: var(--s18b-gray); }
.s18b-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; }
.s18b-sum span { font-size: 15px; font-weight: 700; }
.s18b-sum b { font-size: 22px; font-weight: 900; }
.s18b-sum b s { color: var(--s18b-gray); font-size: 15px; font-weight: 500; }
.s18b-big b { font-size: 26px; color: var(--s18b-green); }
.s18b-bar { height: 40px; margin-top: 16px; background: repeating-linear-gradient(90deg, #1a1a17 0 2px, transparent 2px 4px, #1a1a17 4px 5px, transparent 5px 8px, #1a1a17 8px 11px, transparent 11px 13px); }
.s18b-stamp {
  position: absolute; right: 14px; top: 12px; width: 66px; height: 66px; display: grid; place-items: center;
  border: 3px solid var(--s18b-seal); border-radius: 50%; color: var(--s18b-seal);
  font: 900 19px/1 var(--f-display); transform: rotate(-14deg); opacity: .85;
}
/* 영수증이 출력되듯 내려오고, 도장이 쾅 찍힌다 */
.js .s18b-rc.in { animation: s18b-print .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes s18b-print { from { transform: translateY(-26px); } to { transform: none; } }
.js .s18b-rc.in .s18b-stamp { animation: s18b-stamp .5s cubic-bezier(.3,1.6,.5,1) .8s both; }
@keyframes s18b-stamp { 0% { transform: rotate(-14deg) scale(1.9); } 100% { transform: rotate(-14deg) scale(1); } }
.s18b-foot { width: min(100%, 680px); margin-top: 30px; font-size: 14px; line-height: 1.6; color: var(--s18b-gray); text-align: center; }

@media (max-width: 768px) {
  .s18b { padding: 60px 0 70px; }
  .s18b-rc { margin-top: 34px; padding: 22px 16px 18px; }
  .s18b-rt b { font-size: 20px; }
  .s18b-it { font-size: 15px; gap: 8px; }
  .s18b-it s { font-size: 14px; }
  .s18b-stamp { width: 54px; height: 54px; font-size: 16px; right: 8px; top: 8px; }
  .s18b-big b { font-size: 20px; }
  .s18b-sum b { font-size: 19px; }
}