/* 폰 미리보기(L6, 설계 §10.1·§12). 우리 디자인: 기기 상표 모양 없는 둥근 상자, app.css 변수 색만 쓴다. */
.pv,.pv *,.pv *::before,.pv *::after{box-sizing:border-box}
.pv{display:flex;justify-content:center;align-items:flex-start;padding:16px;min-width:0}
.pv-phone{width:360px;max-width:100%;height:720px;max-height:calc(100vh - 32px);display:flex;flex-direction:column;
  border:2px solid var(--line,#2b2b2b);border-radius:28px;background:#fff;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.12)}
.pv-bar{flex:none;padding:10px 12px 8px;background:var(--soft,#f3f3f1);border-bottom:1px solid #d9d9d6}
.pv-who{display:block;font-size:12px;line-height:1.4;color:var(--sub,#4a4a4a);margin-bottom:6px;text-align:center}
.pv-urlrow{display:flex;align-items:center;gap:6px;min-width:0}
.pv-url{flex:1;min-width:0;padding:6px 10px;border:1px solid #cfcfcb;border-radius:999px;background:#fff;
  font-size:13px;line-height:1.4;color:var(--ink,#161616);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:all}
.pv-url:empty::before{content:"주소 없음";color:var(--sub,#4a4a4a)}
.pv-btn{flex:none;min-height:40px;min-width:40px;padding:0 10px;border:1px solid var(--line,#2b2b2b);border-radius:8px;
  background:#fff;color:var(--ink,#161616);font:inherit;font-size:14px;cursor:pointer}
.pv-btn:hover{background:#ecece9}
.pv-btn:focus-visible,.pv-submit:focus-visible,.pv-again:focus-visible,.pv-form input:focus-visible,
.pv-form textarea:focus-visible,.pv-form select:focus-visible{outline:2px solid var(--acc,#0b4f8a);outline-offset:2px}
.pv-screen{flex:1;min-height:0;position:relative;background:#fff}
.pv-framewrap,.pv-form,.pv-msg{position:absolute;inset:0}
.pv-framewrap iframe{display:block;width:100%;height:100%;border:0;background:#fff}
.pv-msg{padding:32px 20px;overflow:auto;text-align:center}
.pv-msg-title{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--ink,#161616)}
.pv-msg-text{margin:0;font-size:15px;color:var(--sub,#4a4a4a)}
.pv [hidden]{display:none!important}

/* 자체 폼 보기 */
.pv-form{overflow:auto;padding:12px;background:var(--soft,#f3f3f1);font-size:16px;line-height:1.5;color:var(--ink,#161616)}
.pv-fcard,.pv-q{margin:0 0 10px;padding:14px 14px 12px;border:1px solid #d9d9d6;border-radius:10px;background:#fff;min-width:0}
.pv-fcard{border-top:6px solid var(--acc,#0b4f8a)}
.pv-ftitle{margin:0 0 6px;font-size:22px;line-height:1.3}
.pv-fdesc{margin:0;color:var(--sub,#4a4a4a);white-space:pre-wrap}
.pv-q legend{float:left;width:100%;padding:0}
.pv-q legend+*{clear:left}
.pv-qt{display:block;margin:0 0 8px;font-weight:700}
.pv-req{color:#a4262c}
.pv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pv-help{margin:-4px 0 8px;font-size:14px;color:var(--sub,#4a4a4a)}
.pv-form input[type=text],.pv-form input[type=email],.pv-form textarea,.pv-form select{display:block;width:100%;min-height:40px;
  padding:8px 10px;border:1px solid #9a9a96;border-radius:6px;background:#fff;color:inherit;font:inherit;font-size:16px}
.pv-form textarea{resize:vertical}
.pv-opts{display:flex;flex-direction:column;gap:2px}
.pv-opt{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.pv-opt input,.pv-tick input{width:22px;height:22px;margin:0;accent-color:var(--acc,#0b4f8a);flex:none}
.pv-scale{display:flex;align-items:flex-end;justify-content:space-between;gap:4px;flex-wrap:wrap}
.pv-tick{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:40px;min-height:40px;cursor:pointer;font-size:14px}
.pv-end{flex-basis:100%;font-size:13px;color:var(--sub,#4a4a4a)}
.pv-end:last-child{text-align:right}
.pv-err{margin:8px 0 0;font-size:14px;color:#a4262c}
.pv-q[aria-invalid=true]{border-color:#a4262c;background:var(--bad,#fbe9e7)}
.pv-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 16px}
.pv-submit,.pv-again{min-height:44px;padding:0 20px;border:0;border-radius:8px;background:var(--acc,#0b4f8a);color:#fff;
  font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.pv-again{margin-top:12px;background:#fff;color:var(--acc,#0b4f8a);border:1px solid var(--acc,#0b4f8a)}
.pv-submit:disabled{opacity:.55;cursor:default}
.pv-status{margin:0;font-size:14px;color:var(--sub,#4a4a4a)}
.pv-done{margin:8px 0 0;padding:10px 12px;border-radius:8px;background:var(--ok,#e6f3e6);font-weight:700}
.pv-note{margin:0;padding:12px;border-radius:8px;background:#fff;border:1px solid #d9d9d6}

/* 좁은 화면: 폰 틀을 화면 전체로(§12.2) */
@media (max-width:600px){
  .pv{padding:0}
  .pv-phone{width:100%;height:calc(100vh - 120px);min-height:480px;max-height:none;border:0;border-radius:0;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){.pv *{transition:none!important;animation:none!important}}
@media print{.pv-btn{display:none}}