/* ===== 상품상세 전용 디자인 — 시안(Details 화면) =====
   2026-09-10. 컨텐츠와 기능은 product.php 가 그리는 그대로 두고 모양만 바꾼다.

   시안에서 가져온 것
     · 사진은 흰 바탕 위에 통째로 담는다(잘라내지 않는다). 점(dots)은 사진 아래로.
     · 상품명은 크게, 브랜드·별점은 한 줄로 작게.
     · 수량 조절은 동그란 테두리 버튼 두 개.
     · 옵션 고르는 칸은 큼직한 둥근 사각.
     · 맨 아래 구매 버튼은 알약 한 줄.

   싣는 자리: product.php 의 m_head($p['name'], $pseo) — $pseo['css'] = ['product2'].
   이 화면에서만 실리므로 다른 화면에 닿지 않는다.

   주의 — 굵기(specificity)
     product.php 는 본문 안에서 <style> 을 여러 번 낸다. 그쪽이 문서상 더 뒤라
     같은 굵기로 적으면 이 파일이 진다. 그래서 선택자 앞에 .app 을 붙여 한 단계 굵게 적는다. */

/* ─────────────────────────────────────────────
   1. 사진 — 흰 바탕에 통째로, 점은 사진 아래
   지금은 정사각으로 잘라(cover) 사료 봉지의 위아래가 잘렸다.
   시안처럼 담아서(contain) 보여 주면 무엇을 파는지가 한눈에 들어온다.
   ───────────────────────────────────────────── */
/* 사진 칸 높이는 첫 장의 비율을 따라간다(아래 product.php 스크립트가 실측해 넣는다).
   예전엔 칸이 정사각이라 가로 사진이 들어오면 위아래에 흰 띠가 남았다 — 상단바 바로 아래가
   비어 보이던 원인. 스크립트가 돌기 전 기본값은 예전과 같은 정사각(min(100vw,--max))이다. */
.app .pdt-carousel{background:linear-gradient(180deg,#fff6fa 0%,#fdeff5 56%,#fff 100%);padding:0;
  border-radius:0 0 26px 26px;overflow:hidden}
/* 배경 발바닥 — 아주 옅게 깔아 판이 빈 흰 칸으로 보이지 않게 한다(장식이라 클릭을 먹지 않는다) */
.app .pdt-carousel::before{content:"\eff9";font-family:"tabler-icons";position:absolute;right:-24px;top:14px;
  font-size:148px;line-height:1;color:rgba(250,90,128,.07);pointer-events:none;z-index:0}
.app .pdt-track{height:min(100vw,var(--max));position:relative;z-index:1}
.app .pdt-slide{background:transparent;aspect-ratio:auto;height:100%}
/* 사진은 판 위에 떠 있는 물건처럼 — 배경을 비우고 옅은 그림자만 준다 */
/* 여백 없이 화면 끝까지 — 높이를 사진 비율대로 잡기 때문에(product.php 의 fitH) 사진이 판을 가득 채운다.
   여백을 다시 두려면 fitH 의 뺄는 값도 함께 고쳤어야 한다. 아래 모서리는 판이 둥글게 깎아 준다. */
.app .pdt-slide img{object-fit:contain;padding:0;background:transparent}
/* 원형 썸네일 — 점 대신. 지금 보는 장은 핑크 테두리로 표시하고, 누르면 그 장으로 넘어간다 */
.app .pdt-thumbs{position:relative;z-index:1;display:flex;gap:8px;justify-content:center;
  overflow-x:auto;scrollbar-width:none;padding:2px 14px 12px}
.app .pdt-thumbs::-webkit-scrollbar{display:none}
.app .pdt-thumbs button{flex:0 0 auto;width:46px;height:46px;border:0;padding:0;border-radius:50%;background:#fff;
  overflow:hidden;cursor:pointer;box-shadow:0 2px 8px rgba(32,53,75,.13);transition:box-shadow .16s,transform .14s}
.app .pdt-thumbs button img{width:100%;height:100%;object-fit:cover;display:block}
.app .pdt-thumbs button.on{box-shadow:0 0 0 2px var(--pri),0 3px 10px rgba(250,90,128,.34)}
.app .pdt-thumbs button:active{transform:scale(.93)}
/* 점은 사진 위에 얹지 않고 아래 줄로 내린다 — 흰 바탕 위의 흰 점은 보이지 않는다 */
.app .pdt-nav{background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(32,53,75,.12);top:calc(50% - 12px)}

/* ─────────────────────────────────────────────
   2. 이름·브랜드·별점 — 시안의 위계
   ───────────────────────────────────────────── */
.app .detail-body{padding:16px 16px 108px}
.app .detail-body h1{font-size:19px;font-weight:800;line-height:1.32;letter-spacing:-.035em;margin:4px 0 6px}
.app .detail-body .brand-row{margin-bottom:2px}
.app .detail-body .brand .bnm{font-weight:700}
.app .detail-body .p-share{width:36px;height:36px;border-radius:50%;background:#f6f3f5;
  display:inline-flex;align-items:center;justify-content:center}
.app .detail-body .p-share .fi{font-size:19px;color:var(--txt)}

/* ─────────────────────────────────────────────
   3. 가격 — 판매가를 시안만큼 키운다
   ───────────────────────────────────────────── */
.app .fp-now{font-size:26px;letter-spacing:-.04em}
.app .fp-now .r{font-size:23px}
.app .fp-disc .o{font-size:14px}

/* ─────────────────────────────────────────────
   4. 옵션·수량 — 큼직한 둥근 칸과 동그란 조절 버튼
   ───────────────────────────────────────────── */
.app .opt-box-lb{font-size:14px;font-weight:800;color:var(--txt);margin-bottom:9px}
.app .opt-sel{padding:16px 15px;border:1.5px solid var(--line);border-radius:16px;background:#fff;font-size:15px;font-weight:600}
.app .opt-sel:focus{border-color:var(--pri);outline:none}
.app .opt-line{border-radius:16px;padding:13px 15px;background:#faf8f9}
/* 수량 조절 — 시안의 동그란 테두리 버튼 두 개. 가운데 숫자는 굵게 */
.app .qty{border:0;border-radius:0;gap:10px;overflow:visible}
.app .qty button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--pri-tint);
  background:#fff;color:var(--pri);font-size:19px;font-weight:700;line-height:1;
  display:inline-flex;align-items:center;justify-content:center}
.app .qty button:active{background:var(--pri-light)}
.app .qty span{width:26px;font-size:16px;font-weight:800;color:var(--txt)}

/* ─────────────────────────────────────────────
   5. 맨 아래 구매 줄 — 알약 한 줄, 바로구매를 가장 크게
   ───────────────────────────────────────────── */
.app .buybar{padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-radius:26px 26px 0 0;
  box-shadow:0 -4px 24px rgba(32,53,75,.10);gap:9px}
.app .buybar .btn{padding:16px 0;font-size:15px;font-weight:800;border-radius:999px}
.app .buybar .btn-pri{box-shadow:0 8px 20px rgba(250,90,128,.26)}