/* ppb-picker — 주문 폼 선택창. 모바일 우선으로 짰다. */

.ppb-pk{position:relative;width:100%;
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,
  'Apple SD Gothic Neo','Segoe UI','Noto Sans KR',system-ui,sans-serif}

/* 원래 select 는 화면에서만 감춘다. 폼 전송·검증은 그대로 이 값을 쓴다.
 * panelhelper 가 #ph-smm-service{width:100%} 처럼 ID 로 폭을 주기 때문에
 * !important 없이 두면 폭이 안 줄고, 절대배치라 화면 밖으로 삐져나가
 * 모바일에서 가로 스크롤이 생긴다. 전부 !important 로 못박는다. */
select.ppb-pk-native{position:absolute!important;width:1px!important;height:1px!important;
  min-width:0!important;max-width:1px!important;padding:0!important;margin:-1px!important;
  border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;white-space:nowrap!important;opacity:0!important;
  pointer-events:none!important;left:0!important;top:0!important}

/* ── 여는 버튼 ─────────────────────────────────────────── */
.ppb-pk-btn{display:flex;align-items:center;gap:10px;width:100%;
  background:#fff;border:1.5px solid #e4e0ee;border-radius:13px;
  padding:14px 15px;cursor:pointer;text-align:left;
  font-size:15px;font-weight:600;color:#8b849c;line-height:1.4;
  transition:border-color .15s,box-shadow .15s}
.ppb-pk-btn:hover{border-color:#c9c2db}
.ppb-pk-btn:focus-visible{outline:none;border-color:#7c5cd6;box-shadow:0 0 0 3px rgba(124,92,214,.16)}
.ppb-pk-btn.is-picked{color:#2f2942;font-weight:700}
.ppb-pk-btntext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ppb-pk-caret{flex:none;width:9px;height:9px;border-right:2px solid #a79ec2;border-bottom:2px solid #a79ec2;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
.ppb-pk.is-open .ppb-pk-caret{transform:rotate(-135deg) translate(-3px,-3px)}

/* ── 목록 ──────────────────────────────────────────────── */
.ppb-pk-back{display:none}
.ppb-pk-sheet{display:none;position:absolute;z-index:60;left:0;right:0;top:calc(100% + 7px);
  background:#fff;border:1px solid #e4e0ee;border-radius:16px;
  box-shadow:0 20px 48px rgba(47,41,66,.20);overflow:hidden}
.ppb-pk.is-open .ppb-pk-sheet{display:flex;flex-direction:column;max-height:min(60vh,460px)}

.ppb-pk-head{display:flex;align-items:center;gap:9px;padding:11px 12px;
  border-bottom:1px solid #f1eff7;background:#fbfafd;flex:none}
.ppb-pk-q{flex:1;min-width:0;border:1.5px solid #e4e0ee;border-radius:10px;
  padding:10px 12px;font-size:16px;color:#2f2942;background:#fff;font-family:inherit}
.ppb-pk-q:focus{outline:none;border-color:#7c5cd6}
.ppb-pk-title{flex:1;font-size:14px;font-weight:800;color:#2f2942}
.ppb-pk-x{flex:none;width:34px;height:34px;border:0;border-radius:9px;background:#f1eff7;
  color:#6d6091;font-size:15px;cursor:pointer;line-height:1}
.ppb-pk-x:hover{background:#e4e0ee}

.ppb-pk-list{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:6px}

.ppb-pk-item{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  padding:12px 12px;border-radius:12px;font-family:inherit}
.ppb-pk-item+.ppb-pk-item{border-top:1px solid #f5f3fa}
.ppb-pk-item:hover,.ppb-pk-item:focus-visible{background:#f8f7fb;outline:none}
.ppb-pk-item.is-on{background:#ede9fe}

.ppb-pk-top{display:flex;align-items:baseline;gap:7px}
.ppb-pk-flag{flex:none;font-size:15px;line-height:1}
.ppb-pk-name{font-size:14.6px;font-weight:700;color:#2f2942;line-height:1.45;
  word-break:break-word}
.ppb-pk-cat{font-size:14.6px;font-weight:600;color:#2f2942}

.ppb-pk-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ppb-pk-chip{font-size:11.2px;font-weight:700;line-height:1.5;padding:2px 8px;border-radius:999px;
  background:#f1eff7;color:#6d6091;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* 특징 배지는 한 가지 색으로 통일한다 (2026-08-18).
 * 리필·최대·시작·속도를 각각 다른 색으로 두니 화면이 어지러웠다.
 * 구분은 앞에 붙는 말(리필/최대/…)이 해주므로 색까지 나눌 필요가 없다.
 * 다시 색을 나누고 싶으면 아래 c-* 규칙에 색만 넣으면 된다. */
.ppb-pk-chip.c-refill,
.ppb-pk-chip.c-max,
.ppb-pk-chip.c-start,
.ppb-pk-chip.c-speed{background:#f1eff7;color:#6d6091}
.ppb-pk-chip.c-more{background:transparent;color:#a79ec2;border:1px dashed #d8d2e6}

.ppb-pk-price{display:flex;align-items:baseline;gap:5px;margin-top:8px}
.ppb-pk-price b{font-size:14px;font-weight:800;color:#7c5cd6;font-variant-numeric:tabular-nums}
.ppb-pk-price i{font-style:normal;font-size:11.2px;color:#a79ec2;font-weight:600}

.ppb-pk-none{padding:28px 16px;text-align:center;font-size:13.4px;color:#8b849c;margin:0}

/* ── 모바일: 아래에서 올라오는 시트 ───────────────────────
 * 목록이 화면 절반을 덮으면 손가락으로 훑기 쉽고, 글자를 키워도 답답하지 않다.
 */
@media (max-width:640px){
  .ppb-pk-btn{padding:15px 16px;border-radius:14px}

  .ppb-pk.is-open .ppb-pk-back{display:block;position:fixed;inset:0;z-index:9998;
    background:rgba(23,16,43,.45);backdrop-filter:blur(2px)}

  .ppb-pk.is-open .ppb-pk-sheet{position:fixed;z-index:9999;left:0;right:0;bottom:0;top:auto;
    max-height:82vh;border-radius:20px 20px 0 0;border:0;
    box-shadow:0 -12px 40px rgba(47,41,66,.28);
    animation:ppb-pk-up .22s cubic-bezier(.22,.9,.3,1)}
  @keyframes ppb-pk-up{from{transform:translateY(14%);opacity:.6}to{transform:none;opacity:1}}

  /* 시트 위쪽 손잡이 */
  .ppb-pk.is-open .ppb-pk-sheet::before{content:"";display:block;width:38px;height:4px;border-radius:99px;
    background:#e4e0ee;margin:9px auto 2px;flex:none}

  .ppb-pk-head{padding:10px 14px 12px}
  .ppb-pk-q{padding:12px 14px;font-size:16px;border-radius:12px}
  .ppb-pk-x{width:38px;height:38px}

  .ppb-pk-list{padding:6px 8px calc(14px + env(safe-area-inset-bottom))}
  .ppb-pk-item{padding:14px 12px;border-radius:14px}
  .ppb-pk-name{font-size:15px}
  .ppb-pk-cat{font-size:15px}
  .ppb-pk-chip{font-size:11.6px;padding:3px 9px}
  .ppb-pk-price b{font-size:15px}
}

/* 시트가 떠 있는 동안 뒤 화면이 같이 스크롤되지 않게 */
body.ppb-pk-lock{overflow:hidden;touch-action:none}

@media (prefers-reduced-motion:reduce){
  .ppb-pk.is-open .ppb-pk-sheet{animation:none}
  .ppb-pk-caret{transition:none}
}

/* ── 주문 내역의 서비스명 ─────────────────────────────────
 * API 원문 대신 제목 + 배지로 보여준다. 선택창과 같은 색 규칙.
 */
.ppb-svc{display:block;line-height:1.5}
.ppb-svc-name{display:block;font-size:15px;font-weight:700;color:#2f2942;
  letter-spacing:-.01em;word-break:break-word}
.ppb-svc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.ppb-svc-chip{font-size:11.4px;font-weight:700;line-height:1.5;padding:3px 9px;border-radius:999px;
  background:#f1eff7;color:#6d6091;white-space:nowrap}
.ppb-svc-chip.c-refill,
.ppb-svc-chip.c-max,
.ppb-svc-chip.c-start,
.ppb-svc-chip.c-speed{background:#f1eff7;color:#6d6091}
.ppb-svc-id{display:block;margin-top:7px;font-size:11.4px;color:#a79ec2;font-weight:600}

/* 주문 상세 표를 조금 정돈 */
.woocommerce table.order_details td,
.woocommerce table.order_details th{vertical-align:top}
.woocommerce .wc-item-meta{list-style:none;margin:8px 0 0;padding:0;font-size:13.4px}
.woocommerce .wc-item-meta li{margin:0 0 9px;padding:0}
.woocommerce .wc-item-meta li:last-child{margin-bottom:0}
.woocommerce .wc-item-meta strong.wc-item-meta-label{display:block;font-size:11.6px;font-weight:700;
  color:#8b849c;margin-bottom:3px}
.woocommerce .wc-item-meta p{margin:0;word-break:break-word;text-transform:none}
/* 테마가 capitalize 를 걸어 링크가 Https://Www.Instagram.Com 처럼 깨져 보였다 */
.woocommerce .wc-item-meta a,
.woocommerce .wc-item-meta p a{text-transform:none!important;word-break:break-all}

@media(max-width:640px){
  .ppb-svc-name{font-size:14.6px}
}

/* ══════════════════════════════════════════════════════════════
 * 주문 폼 다듬기 (모바일 우선)
 *
 * 고친 것
 *  · 카테고리·서비스 선택 버튼이 붙어 있어 한 덩어리로 보였다 → 간격
 *  · 글자 크기가 라벨 13 / 입력 14 / 선택 15~16 으로 제각각이었다 → 하나로
 *  · '결제 금액' 이 라벨+입력칸으로 세로로 늘어졌다 → 한 줄 요약 (좌 이름 · 우 값)
 *  · 주문하기 버튼이 테마 기본 파랑에 덮여 있었다 → 사이트 분홍
 *  · 카드가 얇아 가벼워 보였다 → 테두리·모서리·그림자를 또렷하게
 *
 * panelhelper 의 CSS 가 !important 로 박혀 있어 여기서도 같은 무기를 쓴다.
 * ══════════════════════════════════════════════════════════════ */

.ppb-of{ --of-text:#2f2942; --of-mut:#8b849c; --of-line:#e7e2f0; --of-pink:#f0569b; }

/* ── 카드: 얇던 테두리를 또렷하게 ── */
.ph-smm-form-col{
  border:1px solid #e7e2f0!important;border-radius:16px!important;
  padding:22px 20px 24px!important;
  box-shadow:0 10px 34px rgba(47,41,66,.08)!important}
.ph-smm-info-card{border-radius:16px!important}

/* ── 글자 크기 통일 ──
 * 본문과 같은 눈높이로 맞춘다. 입력칸 16px 은 iOS 가 화면을 확대하지 않는 최소값이기도 하다. */
.ppb-of label,
.ph-smm-form label{font-size:14px!important;font-weight:700!important;
  color:var(--of-text)!important;margin:18px 0 7px!important;line-height:1.45!important}
.ppb-of input[type=text],
.ppb-of input[type=number],
.ph-smm-form input[type=text],
.ph-smm-form input[type=number]{
  font-size:16px!important;padding:13px 14px!important;border-radius:11px!important;
  border:1px solid var(--of-line)!important;color:var(--of-text)!important}
#ph-smm-quantity,#ph-smm-runs,#ph-smm-interval{font-size:16px!important;padding:13px 14px!important}
#ph-smm-search{font-size:16px!important;padding:13px 14px!important;border-radius:11px!important;
  margin-bottom:14px!important}

/*
 * 선택 버튼·목록은 본문(14px)에 맞춘다. 전에는 16px 굵게라 혼자 커 보였다.
 *
 * 다만 입력칸은 16px 로 둔다 — iOS 사파리는 16px 미만 입력칸을 누르면
 * 화면을 확대해버린다. 확대되면 주문 도중 화면이 튀어서 훨씬 나쁘다.
 * 그래서 '읽는 글자 14~15 / 누르는 칸 16' 한 눈금으로 정리했다.
 */
.ppb-pk-btn{font-size:15px!important;font-weight:600!important;
  padding:14px 15px!important;border-radius:12px}
.ppb-pk-btn.is-picked{font-weight:700!important}
.ppb-pk-name,.ppb-pk-cat{font-size:15px}
.ppb-pk-title{font-size:15px}

/* ── 간격 ──
 * 카테고리와 서비스가 붙어 있어 하나로 보였다. 둘 사이를 벌린다. */
.ppb-pk{margin:0 0 12px}
.ppb-of .ppb-pk + .ppb-pk{margin-top:2px}
.ph-smm-minmax{margin:7px 0 2px!important;font-size:13px!important;color:var(--of-mut)!important;
  text-align:right}
.ph-smm-checkbox{display:flex!important;align-items:center;gap:9px;margin:20px 0 4px!important;
  font-size:14.5px!important;font-weight:600!important}
.ph-smm-checkbox input{width:auto!important;margin:0!important;flex:none}
.ph-smm-dripfeed-panel{border:1px solid var(--of-line);border-radius:12px;padding:14px 14px 4px;
  margin-top:10px;background:#fbfafd}
.ph-smm-dripfeed-grid{gap:12px!important}
.ph-smm-dripfeed-panel label:first-child{margin-top:0!important}

/* ── 한 줄 요약: 왼쪽 이름 · 오른쪽 값 ── */
.ppb-of-row{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:14px 0 0;padding:13px 15px;border:1px solid var(--of-line);border-radius:12px;
  background:#fbfafd}
.ppb-of-name{display:flex;align-items:center;gap:7px;min-width:0}
.ppb-of-row label{margin:0!important;font-size:14px!important;font-weight:700!important;
  color:var(--of-mut)!important;white-space:nowrap}
/*
 * panelhelper 가 .ph-smm-form input[readonly] 로 회색 배경을, #ph-smm-charge 로 글자색을
 * 못박아 둔다. 둘 다 우리보다 선택자가 무거워서 클래스만으로는 안 밀린다 —
 * ID 로 같은 무게를 맞춰야 한 덩어리로 보인다.
 */
.ppb-of .ppb-of-row input,
.ppb-of-row input[readonly],
#ph-smm-charge,
#ph-smm-total-qty{
  width:auto!important;flex:1;min-width:0;text-align:right!important;
  border:0!important;background:transparent!important;padding:0!important;
  font-size:16px!important;font-weight:800!important;color:var(--of-text)!important;
  box-shadow:none!important;height:auto!important;line-height:1.3!important}

/* 결제 금액은 한 단계 더 또렷하게 — 마지막으로 확인하는 숫자다 */
.ppb-of-total{margin-top:20px;border:1.5px solid #f6d9e8;background:#fff7fb}
.ppb-of-total label{color:#a3557e!important}
.ppb-of-total input,
#ph-smm-charge{font-size:20px!important;color:#e0408f!important;
  font-variant-numeric:tabular-nums}

/* ── 주문하기 ──
 * 테마가 button[type=submit] 을 자기 파란색으로 잡는다. 사이트 분홍으로 되돌린다. */
.ph-smm-submit,
.ph-smm-form button[type=submit],
.ph-smm-form .ph-smm-submit{
  width:100%!important;margin-top:16px!important;padding:16px!important;
  background:linear-gradient(135deg,#ff5ca8,#f0338a)!important;color:#fff!important;
  border:0!important;border-radius:12px!important;
  font-size:16px!important;font-weight:800!important;letter-spacing:.01em;
  box-shadow:0 10px 26px rgba(255,92,168,.38)!important;
  transition:filter .15s,transform .15s}
.ph-smm-submit:hover{filter:brightness(1.06);transform:translateY(-1px)}
.ph-smm-submit:disabled{background:#d8d2e6!important;box-shadow:none!important;
  transform:none!important;filter:none!important;cursor:not-allowed}

@media(max-width:640px){
  .ph-smm-form-col{padding:18px 15px 20px!important;border-radius:15px!important}
  .ppb-of-row{padding:12px 13px}
  .ppb-of-total input,#ph-smm-charge{font-size:19px!important}
  /* 좁은 화면에서 이름이 길면 값이 밀리지 않게 */
  .ppb-of-row label{font-size:13.5px!important}
}