/* static/tools/perprice/css/perprice.css */
.pp-wrap{max-width:820px;margin:0 auto;padding:16px 16px 64px;
  color:#1f2937;font-size:15px;line-height:1.6}

/* hero */
.pp-crumb{font-size:13px;color:#6b7280;margin-bottom:10px}
.pp-crumb a{color:#2563eb;text-decoration:none}
.pp-crumb span{margin:0 6px;color:#cbd5e1}
.pp-hero{margin:8px 0 24px}
.pp-h1{font-size:27px;font-weight:800;margin:0 0 8px;letter-spacing:-.02em}
.pp-sub{color:#4b5563;margin:0}

/* section titles */
.pp-sec-title{font-size:18px;font-weight:700;margin:0 0 6px;letter-spacing:-.01em}
.pp-sec-desc{color:#6b7280;font-size:13.5px;margin:0 0 14px}

/* fields */
.pp-row{display:flex;gap:12px;flex-wrap:wrap}
.pp-field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:140px}
.pp-label{font-size:13px;font-weight:600;color:#374151}
.pp-field input{appearance:none;width:100%;padding:13px 14px;font-size:16px;
  border:1.5px solid #d1d5db;border-radius:12px;background:#fff;
  transition:border-color .15s,box-shadow .15s}
.pp-field input:focus{outline:none;border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}

/* main calc */
.pp-calc{background:#f9fafb;border:1px solid #eef0f3;border-radius:18px;
  padding:20px;margin-bottom:26px}
.pp-result{margin-top:18px;padding:18px;border-radius:14px;
  background:linear-gradient(135deg,#ecfdf5,#f0fdf4);border:1px solid #bbf7d0}
.pp-result-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pp-result-per{font-size:14px;font-weight:700;color:#15803d}
.pp-result-value{font-size:30px;font-weight:800;color:#065f46;letter-spacing:-.02em}
.pp-result-rev{margin-top:8px;font-size:13.5px;color:#3f6212}
.pp-hint{margin:14px 2px 0;font-size:13px;color:#9ca3af}

/* compare */
.pp-compare{margin-bottom:30px}
.pp-compare-grid{display:flex;gap:12px;flex-wrap:wrap}
.pp-side{flex:1;min-width:150px;border:1px solid #e5e7eb;border-radius:16px;
  padding:16px;position:relative;background:#fff}
.pp-side-tag{position:absolute;top:-10px;left:14px;width:26px;height:26px;
  border-radius:50%;background:#2563eb;color:#fff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.pp-side .pp-field{margin-top:10px}
.pp-side-per{margin-top:12px;font-size:14px;font-weight:700;color:#1d4ed8;min-height:20px}
.pp-verdict{margin-top:14px;padding:14px 16px;border-radius:12px;font-size:15px}
.pp-verdict.pp-win{background:#eff6ff;border:1px solid #bfdbfe;color:#1e3a8a}
.pp-verdict.pp-tie{background:#f3f4f6;border:1px solid #e5e7eb;color:#374151}
.pp-save{color:#2563eb;font-weight:700}

/* table */
.pp-table{width:100%;border-collapse:collapse;font-size:14px}
.pp-table th,.pp-table td{padding:10px 12px;text-align:left;border-bottom:1px solid #eef0f3}
.pp-table th{background:#f9fafb;font-weight:600;color:#374151;font-size:13px}
.pp-table td b{color:#065f46}
.pp-example{margin-bottom:30px}

/* faq */
.pp-faq{margin-bottom:30px}
.pp-faq-item{border:1px solid #e5e7eb;border-radius:12px;padding:0 16px;
  margin-bottom:10px;background:#fff}
.pp-faq-item summary{padding:14px 0;font-weight:600;cursor:pointer;
  list-style:none;font-size:14.5px}
.pp-faq-item summary::-webkit-details-marker{display:none}
.pp-faq-item summary::after{content:"+";float:right;color:#9ca3af;font-weight:700}
.pp-faq-item[open] summary::after{content:"–"}
.pp-faq-item p{margin:0 0 14px;color:#4b5563;font-size:14px}

/* ===== 단위 카드 (개선) ===== */
.pp-group{margin-bottom:22px}
.pp-group-title{font-size:14px;font-weight:700;color:#6b7280;margin:0 0 10px;
  padding-bottom:6px;border-bottom:1px solid #f1f5f9}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}

.pp-card{display:flex;align-items:center;gap:12px;padding:15px 16px;
  border:1px solid #e8ebef;border-left:4px solid var(--c,#22c55e);border-radius:14px;
  text-decoration:none;background:#fff;
  transition:border-color .15s,transform .12s,box-shadow .18s}
.pp-card:hover{transform:translateY(-2px);
  box-shadow:0 6px 18px var(--cs,rgba(34,197,94,.16));border-color:var(--c,#22c55e)}
.pp-badge{flex:0 0 auto;width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:-.02em;
  background:var(--cb,#ecfdf5);color:var(--c,#16a34a)}
.pp-card-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.pp-card-per{font-size:16px;font-weight:800;color:#111827;letter-spacing:-.02em}
.pp-card-name{font-size:12px;color:#6b7280;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.pp-card-sm{padding:13px 14px}
.pp-card-sm .pp-badge{width:38px;height:38px;font-size:12px}

/* 카테고리 색 */
.pp-card[data-cat="weight"]{--c:#16a34a;--cb:#ecfdf5;--cs:rgba(22,163,74,.18)}
.pp-card[data-cat="volume"]{--c:#2563eb;--cb:#eff6ff;--cs:rgba(37,99,235,.18)}
.pp-card[data-cat="count"]{--c:#7c3aed;--cb:#f5f3ff;--cs:rgba(124,58,237,.18)}
.pp-card[data-cat="etc"]{--c:#ea580c;--cb:#fff7ed;--cs:rgba(234,88,12,.18)}

/* related / about / doc */
.pp-related{margin:30px 0 24px}
.pp-allbtn{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;
  color:#2563eb;text-decoration:none}
.pp-doc{margin:30px 0}
.pp-p{margin:0 0 12px;color:#374151;font-size:14.5px}
.pp-conv{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.pp-conv li{padding:11px 14px;background:#f9fafb;border:1px solid #eef0f3;
  border-radius:10px;font-size:14px;font-weight:600;color:#1f2937}
.pp-bullets{margin:0;padding-left:18px;color:#374151;font-size:14px}
.pp-bullets li{margin-bottom:7px}
.pp-two{display:flex;gap:24px;flex-wrap:wrap}
.pp-half{flex:1;min-width:240px}

/* ===== 댓글 ===== */
.pp-comments{margin:34px 0 8px;padding-top:26px;border-top:1px solid #f1f5f9}
.pp-cnt{display:inline-block;min-width:22px;padding:1px 8px;margin-left:4px;
  font-size:13px;border-radius:11px;background:#eef2ff;color:#4338ca;
  font-weight:700;vertical-align:middle}
.pp-flash{padding:10px 14px;border-radius:10px;font-size:14px;margin-bottom:12px}
.pp-flash.pp-ok{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46}
.pp-flash.pp-warn{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412}
.pp-cform{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.pp-cnick{width:220px;max-width:100%;padding:10px 12px;font-size:14px;
  border:1.5px solid #d1d5db;border-radius:10px}
.pp-cbody{width:100%;padding:12px 14px;font-size:15px;border:1.5px solid #d1d5db;
  border-radius:12px;resize:vertical;font-family:inherit}
.pp-cnick:focus,.pp-cbody:focus{outline:none;border-color:#22c55e;
  box-shadow:0 0 0 3px rgba(34,197,94,.15)}
.pp-csubmit{align-self:flex-start;padding:11px 22px;font-size:14px;font-weight:700;
  color:#fff;background:#22c55e;border:none;border-radius:11px;cursor:pointer;
  transition:background .15s}
.pp-csubmit:hover{background:#16a34a}
.pp-clist{list-style:none;padding:0;margin:0}
.pp-citem{padding:14px 0;border-bottom:1px solid #f1f5f9}
.pp-chead{display:flex;align-items:baseline;gap:10px;margin-bottom:5px}
.pp-cname{font-weight:700;font-size:14px;color:#1f2937}
.pp-cdate{font-size:12px;color:#9ca3af}
.pp-ctext{margin:0;font-size:14.5px;color:#374151;word-break:break-word;white-space:pre-wrap}
.pp-cempty{padding:20px 0;color:#9ca3af;font-size:14px;text-align:center}

/* ===== 반응형 ===== */
@media (max-width:520px){
  .pp-wrap{padding:14px 14px 56px}
  .pp-h1{font-size:23px}
  .pp-result-value{font-size:26px}
  .pp-grid{grid-template-columns:1fr 1fr;gap:10px}
  .pp-conv{grid-template-columns:1fr}
  .pp-two{gap:18px}
  .pp-csubmit{align-self:stretch;text-align:center}
  .pp-cnick{width:100%}
}
@media (max-width:360px){
  .pp-grid{grid-template-columns:1fr}
}

/* ===== v4: 섹션 카드 박스화 ===== */
.pp-box{background:#fff;border:1px solid #e8ebef;border-radius:16px;
  padding:20px 22px;margin:0 0 14px;box-shadow:0 1px 2px rgba(16,24,40,.03)}
.pp-box>.pp-sec-title{margin-top:0}
.pp-box>.pp-sec-title:not(:first-child){margin-top:18px}
.pp-box .pp-p:last-child,.pp-box .pp-bullets:last-child,
.pp-box .pp-conv:last-child,.pp-box .pp-table:last-child{margin-bottom:0}

/* 단위 그룹도 박스로 (연한 배경) */
.pp-group.pp-box{background:#fbfcfd;padding:16px 18px}
.pp-group.pp-box .pp-group-title{border-bottom:none;margin-bottom:12px;
  color:#374151;font-size:13px;text-transform:none;display:flex;align-items:center;gap:7px}
.pp-group-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.pp-group-dot[data-cat="weight"]{background:#16a34a}
.pp-group-dot[data-cat="volume"]{background:#2563eb}
.pp-group-dot[data-cat="count"]{background:#7c3aed}
.pp-group-dot[data-cat="etc"]{background:#ea580c}

/* 박스 안 FAQ: 개별 보더 제거하고 divider 로 */
.pp-box .pp-faq-item{border:none;border-radius:0;padding:0;margin:0;
  border-bottom:1px solid #f1f5f9;background:transparent}
.pp-box .pp-faq-item:last-child{border-bottom:none}
.pp-box .pp-faq-item summary{padding:13px 0}
.pp-box .pp-faq-item p{padding-bottom:0}

/* 박스 안 댓글: 상단 보더 제거 (박스 자체가 구분) */
.pp-box.pp-comments{margin-top:14px;padding-top:20px;border-top:1px solid #e8ebef}

/* 계산 섹션 박스 헤더 */
.pp-calc-title{font-size:13px;font-weight:700;color:#16a34a;margin:0 0 14px}

/* ===== 면책 ===== */
.pp-disclaimer{margin:0 0 14px;padding:12px 16px;font-size:12.5px;color:#94a3b8;
  background:#fafbfc;border:1px solid #f1f5f9;border-radius:12px;line-height:1.55}
.pp-disclaimer::before{content:"ⓘ ";color:#cbd5e1;font-weight:700}