/* [애니팜] 상품 상세 2판 (2026-11-03): 회색 바탕 사진 · 오른쪽 구매 칸 · 붙어 다니는 탭 · 휴대폰 아래 구매 줄.
   shop.css · anipharm.css 위에 얹는다. 머리 높이는 레이아웃이 --ap-sticky-top 으로 알려 준다 */
.ap-item { padding-top: 20px; }
.ap-item .shp-breadcrumb { margin-bottom: 18px; font-size: 13px; }
.ap-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 위: 사진 + 구매 칸 ---------- */
.ap-item-top { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 56px; align-items: start; }

.ap-gal { position: relative; min-width: 0; }
.ap-gal-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; aspect-ratio: 1 / 1; border-radius: 22px; background: #f5f6f8; }
.ap-gal-track::-webkit-scrollbar { display: none; }
.ap-gal-slide { flex: 0 0 100%; display: grid; place-items: center; scroll-snap-align: start; padding: 7%; box-sizing: border-box; }
.ap-gal-slide img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ap-gal-slide.is-noimg img { width: 34%; height: auto; opacity: .14; filter: grayscale(1); mix-blend-mode: normal; }
.ap-gal-count { position: absolute; right: 16px; top: 16px; padding: 4px 11px; border-radius: 999px; background: rgba(25, 31, 40, .45); color: rgba(255, 255, 255, .85); font-size: 12.5px; letter-spacing: .04em; pointer-events: none; }
.ap-gal-count b { color: #fff; font-weight: 700; }
/* [11/5] 상세 큰 사진의 뱃지 — 오른쪽 위 (사진 수는 그때 왼쪽 위로) */
.ap-gal-badges { position: absolute; top: 16px; right: 16px; z-index: 2; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.ap-gal-badges img { display: block; width: 64px; height: 64px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .15)); }
.ap-gal.has-badges .ap-gal-count { right: auto; left: 16px; }
@media (max-width: 860px) {
	.ap-gal-badges { top: 12px; right: 12px; gap: 4px; }
	.ap-gal-badges img { width: 48px; height: 48px; }
	.ap-gal.has-badges .ap-gal-count { left: auto; right: 14px; }
}
.ap-gal-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.ap-gal-thumb { width: 68px; height: 68px; padding: 6px; border: 2px solid transparent; border-radius: 12px; background: #f5f6f8; cursor: pointer; box-sizing: border-box; }
.ap-gal-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.ap-gal-thumb.is-on { border-color: #191f28; }

.ap-item-info { min-width: 0; padding-top: 4px; }
.ap-info-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.ap-item .ap-info-cat { font-size: 14px; font-weight: 700; color: var(--shp-brand); }
.ap-item .ap-info-cat:hover { text-decoration: underline; }
.ap-item .ap-info-cat.is-brand { color: #4e5968; }
.ap-info-head .ap-chip { font-size: 11.5px; }
.ap-info-title { margin: 0; font-size: 27px; line-height: 1.35; font-weight: 700; letter-spacing: -0.035em; color: #191f28; word-break: keep-all; }
.ap-info-sum { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: #6b7684; }

.ap-price { margin: 22px 0 0; }
.ap-price-tag { display: inline-block; margin-bottom: 6px; padding: 4px 9px; border-radius: 8px; background: var(--shp-brand-soft); color: #0270b0; font-size: 12.5px; font-weight: 700; }
.ap-price-now { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; }
.ap-price-now strong { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; color: #191f28; }
.ap-price-now s { font-size: 17px; color: #b0b8c1; }
.ap-price-off { font-style: normal; font-size: 32px; font-weight: 800; color: #f04452; }
.ap-price-grade { font-style: normal; padding: 3px 8px; border-radius: 6px; background: #f2f4f6; color: #4e5968; font-size: 12px; font-weight: 700; }
.ap-price-retail { margin: 6px 0 0; font-size: 14px; color: #8b95a1; }
.ap-price-retail b { font-weight: 600; color: #4e5968; }
.ap-item .shp-stock-notice, .ap-item .shp-timesale { margin-top: 12px; }

.ap-info-rows { margin: 24px 0 18px; padding: 18px 0 2px; border-top: 1px solid #eceef1; }
.ap-info-rows > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 14.5px; }
.ap-info-rows dt { color: #8b95a1; }
.ap-info-rows dd { margin: 0; color: #333d4b; }
.ap-info-rows small { color: #8b95a1; font-size: 13px; }
/* [11/5] 정보 줄 = 고도몰 상세 순서 — 판매가도 줄 안에 (소비자가 · 정가 · 할인금액 · 판매가 · 구매혜택 · 배송비 · …) */
.ap-info-rows em { font-style: normal; }
.ap-info-rows > div.ap-info-price { align-items: center; padding: 8px 0; }
.ap-info-price dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ap-info-price .ap-price-now strong { font-size: 28px; }
.ap-info-price .ap-price-tag { margin: 0; }
.ap-info-retail b { font-weight: 500; color: #8b95a1; }
.ap-info-retail em { margin-left: 2px; font-size: 13px; color: #8b95a1; }
.ap-info-fixed s { color: #8b95a1; }
.ap-info-discount b { font-weight: 700; color: #191f28; }
.ap-info-discount em { margin-left: 2px; font-size: 13.5px; font-weight: 600; color: #f04452; }
.ap-info-benefit b { font-weight: 700; color: #191f28; }
.ap-info-alert { font-weight: 700; color: #d60000; }
.ap-info-alert + small { margin-left: 4px; }
.ap-info-note { display: block; margin-top: 3px; color: #0270b0 !important; font-weight: 600; }

/* 옵션 · 수량 · 합계 */
.ap-item .shp-row label { font-size: 13.5px; color: #4e5968; }
.ap-item .shp-row select { height: 50px; padding: 0 14px; border: 1px solid #e5e8eb; border-radius: 12px; background-color: #fff; font-size: 15px; }
.ap-item .shp-select-box { margin: 0 0 16px; padding: 16px 18px; border: 0; border-radius: 16px; background: #f7f8fa; }
.ap-item .shp-select-row + .shp-select-row { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eceef1; }
.ap-item .shp-select-name { font-size: 14.5px; font-weight: 600; color: #333d4b; }
.ap-item .shp-stepper { border-color: #e5e8eb; border-radius: 10px; }
.ap-item .shp-stepper .shp-step { width: 38px; }
.ap-item .shp-select-price { font-size: 15.5px; color: #191f28; }
.ap-item .shp-total-row { margin-top: 14px; padding-top: 14px; border-top-color: #e5e8eb; font-size: 14.5px; color: #4e5968; }
.ap-item .shp-total-row strong { font-size: 24px; color: #191f28; }
.ap-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; margin-top: 0 !important; }
.ap-actions .shp-btn, .ap-buybar .shp-btn, .ap-item-tabs-buy .shp-btn { height: 56px; padding: 0 16px; border-radius: 14px !important; font-size: 16px; }
.ap-actions .shp-btn-ghost, .ap-buybar .shp-btn-ghost { border-color: #d1d6db; }

/* ---------- 탭 (머리 아래에 붙어 다님) ---------- */
.ap-item-tabs { position: sticky; top: var(--ap-sticky-top, 0px); z-index: 30; margin-top: 72px; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #e5e8eb; }
.ap-item-tabs-in { display: flex; align-items: center; }
.ap-item-tabs-in > a { flex: 0 0 150px; display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; font-size: 16px; font-weight: 600; color: #8b95a1; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ap-item-tabs-in > a small { font-size: 13px; font-weight: 600; color: inherit; opacity: .8; }
.ap-item-tabs-in > a:hover { color: #333d4b; }
.ap-item-tabs-in > a.is-on { color: #191f28; border-bottom-color: #191f28; font-weight: 700; }
.ap-item-tabs-buy { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.ap-item-tabs-buy[hidden] { display: none; }
.ap-item-tabs-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: #4e5968; margin-right: 6px; }
.ap-item-tabs-buy .shp-btn { flex: 0 0 auto; height: 42px; padding: 0 18px; border-radius: 11px !important; font-size: 14.5px; }

/* ---------- 본문 ---------- */
.ap-item-sec, .ap-item .shp-section { scroll-margin-top: calc(var(--ap-sticky-top, 0px) + 64px); }
.ap-item-sec { padding: 56px 0; }
.ap-item-sec + .ap-item-sec, .ap-item .shp-section { border-top: 1px solid #eceef1; }
.ap-item-sec > h2, .ap-item .shp-section > h2 { margin: 0 0 20px; font-size: 22px; font-weight: 800; letter-spacing: -0.03em; color: #191f28; }
.ap-item-content { max-width: 860px; margin: 0 auto; padding: 0; border: 0; color: #333d4b; }
.ap-item-content img { display: block; margin: 0 auto; height: auto; }
.ap-item-nodesc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 56px 20px; border-radius: 20px; background: #f7f8fa; text-align: center; }
.ap-item-nodesc img { width: 56px; opacity: .22; filter: grayscale(1); margin-bottom: 6px; }
.ap-item-nodesc p { margin: 0; font-size: 16px; font-weight: 700; color: #4e5968; }
.ap-item-nodesc span { font-size: 14px; color: #8b95a1; }
.ap-item-nodesc a { color: var(--shp-brand); font-weight: 600; }
.ap-guide + .ap-guide { margin-top: 24px; }
.ap-guide h3 { margin: 0 0 8px; font-size: 16px; font-weight: 700; color: #333d4b; }
.ap-guide-body { font-size: 14.5px; line-height: 1.75; color: #4e5968; }

.ap-item .shp-section { margin: 0; padding: 56px 0; }
.ap-item .shp-section > h2 small { color: var(--shp-brand); }
.ap-item .shp-empty { padding: 40px 0; border-radius: 16px; background: #f7f8fa; font-size: 14.5px; }
.ap-item .shp-qna-list > li { padding: 18px 2px; border-bottom-color: #f2f4f6; }
.ap-item .shp-qna-body { font-size: 15px; line-height: 1.65; color: #333d4b; }
.ap-item .shp-qna-reply { border-radius: 12px; background: #f7f8fa; padding: 14px 16px; }
.ap-item .shp-qna-note { margin-top: 14px; font-size: 13.5px; }
.ap-item .shp-qna-form textarea { padding: 14px; border: 1px solid #e5e8eb; border-radius: 12px; font: inherit; font-size: 15px; }
.ap-item .shp-btn-sm { height: 40px; border-radius: 10px !important; flex: 0 0 auto; }
.ap-item-body .shp-section .shp-btn-ghost.shp-btn-sm { margin-top: 14px; }

.ap-item-related { margin-top: 24px; padding-top: 56px; border-top: 1px solid #eceef1; }
.ap-item-related .ap-sec-head h2 { font-size: 22px; }

/* 휴대폰 아래 구매 줄: PC 에선 안 보임 */
.ap-buybar { display: none; }

@media (max-width: 1080px) {
	.ap-item-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
	.ap-item-tabs-in > a { flex-basis: 120px; }
	.ap-item-tabs-name { display: none; }
}

@media (max-width: 860px) {
	.ap-item { padding-top: 0; }
	.ap-item .shp-breadcrumb { display: none; }
	.ap-item-top { display: block; }
	.ap-gal { margin: 0 -16px; }
	.ap-gal-track { border-radius: 0; }
	.ap-gal-count { top: auto; bottom: 14px; right: 14px; }
	.ap-gal-thumbs { display: none; }
	.ap-item-info { padding-top: 20px; }
	.ap-info-title { font-size: 21px; }
	.ap-info-sum { font-size: 14px; }
	.ap-price { margin-top: 16px; }
	.ap-price-now strong, .ap-price-off { font-size: 26px; }
	.ap-info-rows { margin: 18px 0 14px; padding-top: 14px; }
	.ap-info-rows > div { grid-template-columns: 72px minmax(0, 1fr); font-size: 14px; }
	.ap-actions { display: none !important; }
	.ap-item .shp-select-box { margin-bottom: 0; }
	.ap-item .shp-select-row { row-gap: 10px; }
	.ap-item .shp-select-name { flex-basis: 100%; }

	.ap-item-tabs { margin: 40px -16px 0; }
	.ap-item-tabs-in > a { flex: 1 1 0; height: 50px; font-size: 15px; }
	.ap-item-tabs-buy { display: none !important; }
	.ap-item-sec, .ap-item .shp-section { padding: 36px 0; }
	.ap-item-sec > h2, .ap-item .shp-section > h2 { font-size: 19px; margin-bottom: 14px; }
	.ap-item-nodesc { padding: 40px 16px; }
	.ap-item-related { padding-top: 36px; }
	.ap-item-related .ap-sec-head h2 { font-size: 19px; }

	.ap-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .98); border-top: 1px solid #eceef1; box-shadow: 0 -6px 20px rgba(0, 0, 0, .05); }
	.ap-buybar .shp-btn { height: 52px; font-size: 16px; }
	.ap-buybar .ap-btn-disabled { grid-column: 1 / -1; height: 52px; }
	/* 상세에선 아래 탭 대신 구매 줄 */
	body:has(.ap-item) .ap-tabbar { display: none !important; }
	body:has(.ap-item) pq-chat-widget { --ap-cs-bottom: calc(86px + env(safe-area-inset-bottom)); }
	body:has(.ap-item) .ap-toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

/* [11/3] ERP 미리 보기 띠 */
.ap-item .ap-preview-bar { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #1f2a44; color: #fff; font-size: 13px; line-height: 1.5; }
.ap-item .ap-preview-bar b { color: #ffd166; }
/* [애니팜 2026-11-06] 리뷰 '구매 확인' · 비회원 문의 (이름 · 비밀번호 · 비밀번호로 보기 · 지우기) */
.ap-item .ap-rv-bought, .ap-item .ap-iq-guest { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #eef7ff; color: #0a5c8f; font-size: 11.5px; font-weight: 700; }
.ap-item .ap-iq-guest { background: #f2f4f6; color: #6b7684; }
.ap-item .ap-iq-answered { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: #008cd6; }
.ap-item .ap-iq-guest-tools { margin-top: 8px; font-size: 13px; }
.ap-item .ap-iq-guest-tools summary { color: #8b95a1; cursor: pointer; }
.ap-item .ap-iq-pw { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ap-item .ap-iq-pw input[type="password"], .ap-item .ap-iq-guest-row input { flex: 1 1 180px; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid #e5e8eb; border-radius: 10px; font: inherit; font-size: 14px; }
.ap-item .ap-iq-guest-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.ap-item .ap-iq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }