/* (2026-10-16) 고객 화면 PC 틀 — 원격 안내(r.oarental.net)와 같은 모양
   넓은 화면(980px 이상)에서만: 위 로고·전화 / 왼쪽 설명 / 오른쪽 원래 칸 / 아래 4단계 그림 / 맨 아래 © 줄
   휴대폰·좁은 화면은 원래 화면 그대로(이 파일의 .pf-only 는 전부 숨김) */
.pf-only{display:none}
.pf-ring{position:relative;display:inline-flex}
.pf-ring::after{content:"";position:absolute;inset:-6px;border:3px solid #e03131;border-radius:10px;box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(224,49,49,.25);animation:pfrp 1.6s ease-in-out infinite;pointer-events:none}
@keyframes pfrp{0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(224,49,49,.3)}50%{box-shadow:0 0 0 2px #fff,0 0 0 11px rgba(224,49,49,0)}}
@media (prefers-reduced-motion:reduce){.pf-ring::after{animation:none}}
.pf-call{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:#e03131;color:#fff;font-size:12.5px;font-weight:800;padding:6px 11px 6px 6px;border-radius:999px;line-height:1;border:2px solid #fff;box-shadow:0 8px 18px -6px rgba(224,49,49,.6)}
.pf-call i{width:17px;height:17px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;font-style:normal}
.pf-call.up{left:50%;bottom:calc(100% + 12px);transform:translateX(-50%)}
.pf-call.dn{left:50%;top:calc(100% + 12px);transform:translateX(-50%)}
.pf-call.rt{left:calc(100% + 14px);top:50%;transform:translateY(-50%)}
.pf-call.lf{right:calc(100% + 14px);top:50%;transform:translateY(-50%)}

@media (min-width:980px){
  html{background:#fdf1e4}
  body.pf{background:linear-gradient(165deg,#fffaf4 0%,#fdf1e4 100%) !important;min-height:100vh;display:flex;flex-direction:column}
  /* (10/16) 내용이 짧은 화면도 위로 쏠리지 않게: 가운데 묶음(설명·칸·그림)을 위아래 가운데로, © 줄은 맨 아래 */
  body.pf > .pf-top, body.pf > .pf-main, body.pf > .pf-how, body.pf > .pf-foot{width:100%;box-sizing:border-box;flex:none}
  body.pf > .pf-main{margin-top:auto !important}
  body.pf > .pf-how{margin-bottom:auto !important}
  body.pf .pf-only{display:block}
  .pf-top{max-width:1180px;margin:0 auto;padding:22px 32px 0;display:flex !important;align-items:center;justify-content:space-between}
  .pf-top img{height:34px;width:auto;display:block}
  .pf-top a{color:#1b2432;text-decoration:none;font-weight:800;font-size:15px}
  .pf-main{max-width:1180px;margin:0 auto;padding:40px 32px 0;display:flex;gap:56px;align-items:flex-start}
  .pf-main > .wrap{flex:none;width:460px;max-width:none !important;margin:0 !important;padding:30px 0 0 !important}
  body.lg .pf-main > .wrap{padding-top:0 !important}   /* 사용량 조회는 칸 위에 원래 여백이 있어요 */
  /* 왼쪽이 긴 화면(설치: 설명 + 설치가 안 될 때)은 오른쪽 칸을 아래쪽(설치가 안 될 때 칸)에 맞춰요 */
  body.pf-mid .pf-main{align-items:flex-end}
  body.pf-mid .pf-main > .wrap{padding-top:0 !important}
  /* 칸 아래 「토너 잔량과 매수만 봐요」 줄은 칸 밖으로 빼서, 칸 아래 끝이 왼쪽 칸 아래 끝과 딱 맞게 */
  body.pf-mid .pf-main > .wrap{position:relative}
  body.pf-mid .pf-main > .wrap > .safe{position:absolute;left:0;right:0;top:100%;margin-top:14px}
  /* 왼쪽 설명이 오른쪽 칸보다 긴 화면(방문 일정 조회)은 칸을 설명의 가운데 높이에 */
  body.pf-ctr .pf-main{align-items:center}
  body.pf-ctr .pf-main > .wrap{padding-top:0 !important}
  body.pf-ctr .pf-main > .wrap{position:relative}
  body.pf-ctr .pf-main > .wrap > .foot{position:absolute;left:0;right:0;top:100%;margin-top:14px}
  .pf-main > .wrap .box{box-shadow:0 14px 40px rgba(224,128,26,.12);border-color:#f3e6d6}
  .pf-main > .wrap .box .logo, .pf-main > .wrap .lg-logo, .pf-main > .wrap .brand{display:none !important}
  .pf-hero{flex:1;min-width:0;padding-top:30px}
  .pf-hero .bd{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid #f1d9bd;color:#c96b12;font-weight:800;font-size:13px;padding:7px 14px;border-radius:999px}
  .pf-hero .bd i{width:8px;height:8px;border-radius:50%;background:#16a34a}
  .pf-hero h2{margin:22px 0 0;font-size:46px;line-height:1.25;letter-spacing:-1.5px;font-weight:900;color:#1b2432;word-break:keep-all}
  .pf-hero h2 em{font-style:normal;color:#e0801a}
  .pf-hero .ds{margin:18px 0 0;font-size:17px;line-height:1.7;color:#4b5563;word-break:keep-all}
  .pf-hero > ul{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px}
  .pf-hero > ul > li{font-size:14.5px;font-weight:700;color:#374151}
  .pf-hero > ul > li::before{content:"✓";color:#16a34a;font-weight:900;margin-right:6px}
  .pf-hero .pf-slot > *{margin-top:34px !important}
  .pf-how{max-width:1180px;margin:44px auto 0;padding:0 32px;display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .pf-how .c{background:#fff;border:1px solid #f1e3d1;border-radius:18px;padding:14px 14px 18px}
  .pf-how .pic{height:160px;border-radius:12px;background:#f8f5f1;display:flex;align-items:center;justify-content:center;padding:12px;position:relative}
  .pf-how .pic.tp{align-items:flex-start;padding-top:16px}
  .pf-how .hd{display:flex;align-items:center;gap:8px;margin:14px 2px 6px;font-weight:900;font-size:15.5px;color:#1b2432}
  .pf-how .hd i{font-style:normal;flex:none;width:26px;height:26px;border-radius:8px;background:#fff1df;color:#e0801a;display:flex;align-items:center;justify-content:center;font-size:13px}
  .pf-how .hd .imp{margin-left:auto;font-size:11px;font-weight:800;color:#fff;background:#16a34a;border-radius:999px;padding:3px 8px}
  .pf-how p{text-align:left;margin:0 2px;font-size:13.5px;line-height:1.65;color:#4b5563;word-break:keep-all}
  .pf-foot{max-width:1180px;margin:40px auto 0;padding:0 32px 34px}
  .pf-foot > div{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#7a8190;border-top:1px solid #eadfce;padding-top:20px}
  /* 그림 안 작은 화면 조각 */
  .pf-m{background:#fff;border:1px solid #e5e7eb;border-radius:10px;font-size:12.5px;color:#1b2432;box-shadow:0 4px 12px rgba(0,0,0,.05);text-align:left}
  .pf-m.in{padding:9px 10px;width:150px;color:#6b7483}
  .pf-b{white-space:nowrap;background:#2a5d9c;color:#fff;font-weight:800;font-size:12.5px;border-radius:9px;padding:9px 20px;display:inline-block}
  .pf-b.o{background:#fff;color:#2a5d9c;border:1.5px solid #2a5d9c}
  .pf-w{width:200px}
  .pf-w .tb{border-radius:10px 10px 0 0;background:#f3f4f6;font-size:10.5px;color:#6b7280;padding:5px 9px}
  .pf-w .bd2{padding:9px 10px}
  .pf-w small{display:block;color:#b4610f;font-weight:800;font-size:10.5px}
  .pf-w b{font-size:13.5px}
  .pf-chip{display:inline-flex;align-items:center;gap:4px;border:1.5px solid #e5e7eb;background:#fff;border-radius:10px;padding:7px 9px;font-size:12px;font-weight:700;color:#374151}
  .pf-chip.on{border-color:#2a5d9c;background:#eef4fb;color:#1f4f8a}
  .pf-ss{width:220px;background:#0b5cad;color:#fff;border-radius:8px;padding:10px 11px 12px;font-size:10.5px;line-height:1.45;text-align:left}
  .pf-ss .t{font-size:12.5px;font-weight:800;margin-bottom:3px}
  .pf-ss .u{text-decoration:underline;font-weight:700}
  .pf-ss .r{display:flex;justify-content:flex-end;gap:6px;margin-top:22px}
  .pf-ss .r .sb{background:#e6e6e6;color:#111;border-radius:3px;padding:3px 12px;font-size:11px;display:inline-block}
  .pf-st{display:flex;gap:4px;align-items:center;font-size:10.5px;color:#6b7483;margin-top:8px}
  .pf-st span{flex:1;text-align:center;border-top:3px solid #e5e7eb;padding-top:4px}
  .pf-st span.on{border-color:#2a5d9c;color:#1f4f8a;font-weight:800}
  /* 한 화면 다 쓰는 순간(사용량 결과 등)에는 설명·그림을 접어요 */
  body.pf.pf-full .pf-hero, body.pf.pf-full .pf-how{display:none !important}
  /* (10/16) 접은 화면은 아래 그림이 없어서 가운데 묶음이 바닥으로 내려가요 → 위아래 가운데, © 줄은 맨 아래 */
  body.pf.pf-full > .pf-main{margin-bottom:auto !important;padding-bottom:28px}
  body.pf.pf-full .pf-main > .wrap{width:auto;flex:1;max-width:760px !important;margin:0 auto !important}
}