/* 견적서 개인정보 가리기(찍기·올리기 / 카메라 / 가린 미리보기) — 토큰만 사용, 모바일 좌우 16px */
.content--rd { padding: 0 var(--s-4); }
#app[data-screen="photo"] .bottom-bar, #app[data-screen="camera"] .bottom-bar, #app[data-screen="redact"] .bottom-bar { padding-left: var(--s-4); padding-right: var(--s-4); }
.rd-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* 찍기·올리기 */
.rd-pick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-6); }
.rd-pick__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-height: 148px; padding: var(--s-5) var(--s-3); border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-align: center; cursor: pointer; font: inherit; }
.rd-pick__btn:active { transform: scale(.98); background: var(--bg-sunken); }
.rd-pick__btn:focus-within, .rd-pick__btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.rd-pick__btn b { margin-top: var(--s-2); font: var(--t-h3); }
.rd-pick__btn small { font: var(--t-caption); color: var(--ink-3); }
.rd-steps { margin: var(--s-5) 0 0; padding: var(--s-4) var(--s-4) var(--s-4) 34px; border-radius: var(--r-md); background: var(--bg-sunken); font: var(--t-body-s); color: var(--ink-2); }
.rd-steps li + li { margin-top: var(--s-2); }

/* 카메라 */
.rd-cam { position: relative; margin-top: var(--s-3); border-radius: var(--r-lg); overflow: hidden; background: var(--ink); aspect-ratio: 3 / 4; max-height: 64vh; }
.rd-cam__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-cam__guide { position: absolute; left: 50%; top: 50%; width: 82%; aspect-ratio: 1 / 1.414; max-height: 92%; transform: translate(-50%, -50%); border: 2px solid var(--surface); border-radius: var(--r-sm); box-shadow: 0 0 0 999px rgba(27,35,64,.45); display: flex; align-items: flex-start; justify-content: center; }
.rd-cam__guide span { margin-top: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-pill); background: rgba(27,35,64,.6); color: var(--surface); font: var(--t-caption); }
.rd-cam__fallback { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font: var(--t-body-s); color: var(--ink-2); }
.rd-cam__fallback p { margin: 0 0 var(--s-3); }
.rd-full { width: 100%; position: relative; }
.rd-hint { margin: var(--s-3) 0 0; font: var(--t-caption); color: var(--ink-3); }

/* 가린 미리보기 */
.rd-summary { margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font: var(--t-body-s); }
.rd-method { display: inline-block; margin-left: var(--s-1); font: var(--t-caption); color: var(--ink-3); }
.rd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-2); }
.rd-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 var(--s-2); border-radius: var(--r-pill); background: var(--bg-sunken); font: var(--t-caption); color: var(--ink-2); }
.rd-tools { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-4) 0 var(--s-2); }
.rd-tool { display: inline-flex; align-items: center; gap: var(--s-1); min-height: var(--tap-min); padding: 0 var(--s-3); border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); font: 700 14px/1 var(--font); color: var(--ink); }
.rd-tool.is-on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-strong); }
.rd-tools__hint { font: var(--t-caption); color: var(--ink-3); }
.rd-stage { position: relative; width: 100%; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--surface); user-select: none; -webkit-user-select: none; }
.rd-stage + .rd-stage, .rd-pageno + .rd-stage { margin-top: var(--s-3); }
.rd-stage.is-draw { touch-action: none; cursor: crosshair; outline: 2px dashed var(--primary); outline-offset: -2px; }
.rd-canvas { display: block; width: 100%; height: 100%; }
.rd-box { position: absolute; background: #000; cursor: pointer; }
.rd-box.is-sel { outline: 2px solid var(--primary); outline-offset: 1px; }
.rd-box--ghost { background: rgba(0,0,0,.6); outline: 1.5px dashed var(--surface); pointer-events: none; }
.rd-stage.is-draw .rd-box { pointer-events: none; }
.rd-box__del { position: absolute; right: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--primary); color: var(--surface); font: 700 18px/28px var(--font); box-shadow: var(--sh-2); }
.rd-box__del::before { content: ""; position: absolute; inset: -8px; } /* 터치 영역 44px */
.rd-pageno { margin: var(--s-1) 0 0; text-align: right; font: var(--t-caption); color: var(--ink-3); }
.rd-warn { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); background: var(--warn-soft); color: var(--warn-text); font: var(--t-caption); }
.rd-sec { margin-top: var(--s-6); }
.rd-sec__t { margin: 0 0 var(--s-2); font: var(--t-h3); }
.rd-sec__s { margin-left: var(--s-1); font: var(--t-caption); color: var(--ink-3); }
.rd-fields { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.rd-field { display: flex; align-items: center; gap: var(--s-2); min-height: 52px; padding: var(--s-2) var(--s-3); }
.rd-field + .rd-field { border-top: 1px solid var(--line); }
.rd-field input[type="checkbox"], .rd-confirm input { width: 20px; height: 20px; accent-color: var(--primary); flex: 0 0 auto; }
.rd-field__l { flex: 1; min-width: 0; font: var(--t-body-s); color: var(--ink); }
.rd-field__v { width: 104px; height: 40px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); font: 600 16px/1 var(--font); text-align: right; color: var(--ink); }
.rd-field__v--m { width: 148px; text-align: left; }
.rd-field__u { width: 30px; font: var(--t-caption); color: var(--ink-3); }
.rd-extra { display: flex; flex-direction: column; gap: var(--s-2); }
.rd-extra label { display: flex; flex-direction: column; gap: 4px; font: var(--t-caption); color: var(--ink-2); }
.rd-extra input, .rd-extra select, .rd-extra textarea { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); font: 600 16px/1.4 var(--font); color: var(--ink); }
.rd-extra textarea { min-height: 72px; resize: vertical; }
.rd-extra__row { flex-direction: row; align-items: center; }
.rd-extra__row input { width: 140px; text-align: right; }
.rd-empty, .rd-note { margin: var(--s-2) 0 0; font: var(--t-caption); color: var(--ink-3); }
.rd-confirm { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 var(--s-2); padding: var(--s-4); border-radius: var(--r-md); border: 1.5px solid var(--primary-tint); background: var(--primary-soft); font: 700 15px/1.4 var(--font); color: var(--ink); cursor: pointer; }
.rd-row { display: flex; gap: var(--s-2); }
.rd-row .cta-line { flex: 1; height: 48px; }
#app[data-screen="redact"] .cta:disabled, #app[data-screen="redact"] .cta-line:disabled, #app[data-screen="camera"] .cta:disabled { opacity: .45; pointer-events: none; }
.rd-link { display: block; width: 100%; min-height: var(--tap-min); border: 0; background: none; font: var(--t-body-s); color: var(--ink-3); text-decoration: underline; }

/* 처리 중 */
.rd-busy { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--s-4); background: rgba(27,35,64,.5); }
.rd-busy__card { width: min(320px, 100%); padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--surface); text-align: center; box-shadow: var(--sh-3); }
.rd-busy__t { margin: var(--s-3) 0 0; font: var(--t-h3); }
.rd-busy__s { margin: var(--s-1) 0 var(--s-4); font: var(--t-caption); color: var(--ink-3); }
.rd-bar { height: 6px; border-radius: var(--r-pill); background: var(--bg-sunken); overflow: hidden; }
.rd-bar i { display: block; height: 100%; width: 0; background: var(--primary); transition: width var(--dur) var(--ease); }
.rd-spin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--primary-tint); border-top-color: var(--primary); animation: rd-spin 0.9s linear infinite; }
@keyframes rd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rd-spin { animation: none; } }