/* [애니팜] 쇼핑 스킨 2판 (2026-11-03): 요즘 쇼핑몰 꼴 — 테두리 없는 카드 · 연회색 사진 바탕 · 가로로 넘기는 줄 · 큰 순위 숫자.
   기본(shop.css) 위에 얹는다. 목록·장바구니·주문서는 색 변수만 바꿔도 애니팜 색이 된다 */
.shp { --shp-brand: #008cd6; --shp-brand-soft: rgba(0, 140, 214, .08); --shp-border: #eceef1; --shp-text: #191f28; --shp-sub: #8b95a1; --shp-bg: #f5f6f8; --shp-card: #fff;
	box-sizing: border-box; max-width: 1200px; padding: 28px 20px 0; }
.shp-top .shp-cart-link, .shp-home-nav { display: none; }

/* ---------- 메인 ---------- */
.ap-home { padding-top: 20px; }

/* 배너 */
.ap-hero { position: relative; border-radius: 20px; overflow: hidden; background: #eef6fc; aspect-ratio: 1200 / 530; }
.ap-hero:not(.is-img) { aspect-ratio: auto; min-height: 360px; }
.ap-slides, .ap-slide { position: absolute; inset: 0; }
.ap-slide { display: flex; align-items: center; padding: 0 56px; opacity: 0; visibility: hidden; transition: opacity .5s; background: linear-gradient(115deg, #0a8fd8 0%, #42b4ef 60%, #8fd3f6 100%); }
.ap-slide.is-on { opacity: 1; visibility: visible; }
.ap-slide.is-img { padding: 0; background: none; }
.ap-slide.is-img picture, .ap-slide.is-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ap-slide-copy { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; max-width: 58%; color: #fff; }
.ap-slide-copy strong { font-size: 38px; line-height: 1.22; font-weight: 800; }
.ap-slide-point { position: absolute; right: 40px; bottom: 0; width: 300px; max-width: 38%; }
.ap-count { position: absolute; right: 20px; bottom: 18px; z-index: 3; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .32); color: rgba(255, 255, 255, .85); font-size: 13px; letter-spacing: 0.04em; backdrop-filter: blur(4px); }
.ap-count b { color: #fff; font-weight: 700; }
.ap-arrow { position: absolute; top: 50%; z-index: 3; width: 48px; height: 48px; margin-top: -24px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #191f28; display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); opacity: 0; transition: opacity .2s; }
.ap-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-arrow-prev { left: 20px; }
.ap-arrow-next { right: 20px; }
.ap-hero:hover .ap-arrow, .ap-arrow:focus-visible { opacity: 1; }

/* 카테고리 (상자 없이 아이콘만) */
.ap-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: 22px 0; margin: 36px 0 0; padding: 0; }
.ap-cats a { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: #333d4b; text-align: center; }
.ap-cats-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 24px; background: #f5f6f8; transition: transform .15s, background .15s; }
.ap-cats-icon img { width: 54px; height: 54px; }
.ap-cats a:hover .ap-cats-icon { transform: translateY(-3px); background: #eaf5fd; }
.ap-cats a:hover { color: var(--shp-brand); }

/* 행사 · 애니페이 · 세트 카드 (파스텔) */
.ap-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.ap-promo { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 96px; padding: 0 20px 0 24px; border-radius: 18px; overflow: hidden; }
.ap-promo-text { display: flex; flex-direction: column; gap: 2px; }
.ap-promo-text em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .1em; opacity: .7; }
.ap-promo-text strong { font-size: 18px; font-weight: 800; color: #191f28; }
.ap-promo-text span { font-size: 13.5px; color: #4e5968; }
.ap-promo img { width: 72px; height: 72px; object-fit: contain; transition: transform .25s; }
.ap-promo:hover img { transform: translateY(-4px) rotate(-5deg); }
.ap-promo-event { background: #eaf4ff; color: #1b64da; }
.ap-promo-anipay { background: #e6f7ef; color: #0a8a5f; }
.ap-promo-set { background: #fff4e5; color: #c46a00; }
.ap-promo-set img { width: 64px; height: 64px; opacity: .9; }

/* 상품 줄 */
.ap-sec { margin-top: 64px; }
.ap-sec-head { margin-bottom: 18px; }
.ap-sec-head a { display: inline-flex; }
.ap-sec-head h2 { display: inline-flex; align-items: center; gap: 2px; margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; color: #191f28; }
.ap-sec-head h2 svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-sec-head a:hover h2 { color: var(--shp-brand); }
.ap-sec-head p { margin: 4px 0 0; font-size: 15px; color: #8b95a1; }
.ap-rail { position: relative; }
.ap-rail-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 18px) / 5); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.ap-rail-track::-webkit-scrollbar { display: none; }
.ap-rail-track > .ap-card { scroll-snap-align: start; }
.ap-rail-btn { position: absolute; top: calc(50% - 60px); z-index: 2; width: 52px; height: 52px; border: 1px solid #eceef1; border-radius: 999px; background: #fff; color: #191f28; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .08); }
.ap-rail-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ap-rail-btn.is-prev { left: -26px; }
.ap-rail-btn.is-next { right: -26px; }
.ap-rail-btn[hidden] { display: none; }
/* [11/10] 1100~1240px 폭에서 다음 버튼(-26px)이 본문 여백(20px)을 넘어 문서가 가로로 6px 넘쳤음 → 여백 안으로 */
@media (max-width: 1252px) and (min-width: 861px) { .ap-rail-btn.is-prev { left: -18px; } .ap-rail-btn.is-next { right: -18px; } }

/* 약국회원 안내 (베스트 다음) */
.ap-cta { display: flex; align-items: center; gap: 18px; margin-top: 56px; padding: 22px 28px; border-radius: 20px; background: linear-gradient(100deg, #eaf6fe 0%, #f3f9ff 100%); }
.ap-cta img { width: 64px; height: 64px; flex: none; }
.ap-cta span { display: flex; flex-direction: column; gap: 2px; font-size: 15px; color: #4e5968; }
.ap-cta strong { font-size: 19px; color: #0b3a5b; }
.ap-cta em { margin-left: auto; flex: none; padding: 12px 20px; border-radius: 12px; background: #008cd6; color: #fff; font-style: normal; font-weight: 700; font-size: 15px; }
.ap-cta:hover em { background: #0270b0; }
.ap-empty { text-align: center; color: var(--shp-sub); padding: 60px 0; }

/* ---------- 상품 카드 (테두리 없음) ---------- */
.ap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 18px; }
.ap-card { display: flex; flex-direction: column; min-width: 0; position: relative; }
.ap-card-thumb { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: #f5f6f8; }
.ap-card-thumb > img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .35s; }
.ap-card:hover .ap-card-thumb > img { transform: scale(1.05); }
.ap-card-noimg { display: grid; place-items: center; width: 100%; height: 100%; }
.ap-card-noimg img { width: 38%; opacity: .14; filter: grayscale(1); }
.ap-rank { position: absolute; left: 12px; bottom: 6px; font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: #191f28; letter-spacing: -0.04em; text-shadow: 0 0 1px #fff, 0 2px 10px rgba(255, 255, 255, .9); }
/* [11/10] 품절 = 어두운 덮개 + 흰 글자 (전엔 밝은 사진 위 연한 회색 글자라 안 읽혔다) */
.ap-soldout { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgba(25, 31, 40, .52); font-size: 17px; font-weight: 800; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
/* [11/5] 썸네일 뱃지 (기록부 · 반품X) — 오른쪽 위에 세로로, 안이 뚫린 원이라 사진을 가리지 않음 */
.ap-thumb-badges { position: absolute; top: 8px; right: 8px; z-index: 1; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.ap-thumb-badges img { display: block; width: 40px; height: 40px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15)); }
@media (min-width: 861px) {
	html[data-ap-cols-pc="6"] .ap-thumb-badges img { width: 34px; height: 34px; }
}
@media (max-width: 860px) {
	.ap-thumb-badges { top: 6px; right: 6px; gap: 3px; }
	.ap-thumb-badges img { width: 32px; height: 32px; }
	html[data-ap-cols-m="3"] .ap-thumb-badges img { width: 26px; height: 26px; }
}
/* [11/10] 담기 버튼은 카드 맨 밑 (_card.html) — 몸통이 남는 높이를 먹어서 한 줄의 버튼끼리 바닥에 맞고, 버튼 없는 카드와도 이름 · 가격 줄이 맞음 */
.ap-card-body { flex: 1 0 auto; }
.ap-card-add { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 40px; margin-top: 10px; border: 1px solid #e5e8eb; border-radius: 10px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #333d4b; cursor: pointer; }
.ap-card-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ap-card-add:hover { border-color: #008cd6; color: #008cd6; }
.ap-card-add:disabled { opacity: .5; cursor: wait; }
.ap-card-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 2px 0; }
.ap-card-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.ap-chip { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background: #eef7fd; color: #0270b0; }
.ap-chip-new { background: #fff0f1; color: #f04452; }
.ap-card-name { font-size: 15px; font-weight: 500; line-height: 1.45; color: #333d4b; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ap-card-sum { font-size: 13px; color: #8b95a1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* [11/4] 유효기간 + 포장 단위 — 고도몰 카드와 같은 모양 (custom.css .item_expiration · wg_custom.css .item_packaging) */
.ap-card-exp { align-self: flex-start; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; padding: 2px 8px; border-radius: 4px; background: #f3f4f6; color: #6b7280; font-size: 12px; letter-spacing: -0.01em; line-height: 1.5; }
.ap-card-exp em { padding: 1px 8px; border: 1px solid #d8dee8; border-radius: 10px; background: #f3f5f8; color: #4b5563; font-size: 11px; font-style: normal; font-weight: 600; line-height: 1.4; letter-spacing: -0.2px; }
.ap-card-was { margin-top: 4px; font-size: 13px; color: #b0b8c1; text-decoration: line-through; }
.ap-card-price { display: flex; align-items: baseline; gap: 6px; margin-top: 4px; }
.ap-card-was + .ap-card-price { margin-top: 0; }
.ap-card-price em { font-style: normal; font-weight: 800; color: #f04452; font-size: 17px; }
.ap-card-price strong { font-size: 17px; font-weight: 800; color: #191f28; }
.ap-card-review { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12px; color: #8b95a1; }
.ap-card-review svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.ap-locked { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 5px 9px; border-radius: 8px; background: #f2f4f6; color: #4e5968; font-size: 12.5px; font-weight: 700; }
.ap-locked svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; }

/* ---------- 목록 화면 ---------- */
.shp-grid.ap-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 18px; }
/* [11/5] 목록 한 줄 상품 수 — 손님이 고름 (PC 4 · 5 · 6, 모바일 2 · 3), list.html 이 html 에 data-ap-cols-pc / -m 을 붙임 */
.ap-cols { display: inline-flex; align-items: center; gap: 3px; margin-left: 10px; }
.ap-cols-label { margin-right: 3px; font-size: 13px; color: #8b95a1; white-space: nowrap; }
.ap-cols button { height: 30px; padding: 0 9px; border: 1px solid #e5e8eb; border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: #4e5968; cursor: pointer; white-space: nowrap; }
.ap-cols button[aria-pressed="true"] { border-color: #008cd6; background: #eef7fd; color: #008cd6; }
.ap-cols button:focus-visible { outline: 2px solid #008cd6; outline-offset: 2px; }
.ap-cols .ap-cols-m { display: none; }
@media (min-width: 861px) {
	html[data-ap-cols-pc="5"] .shp-grid.ap-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 36px 14px; }
	html[data-ap-cols-pc="6"] .shp-grid.ap-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 12px; }
	html[data-ap-cols-pc="6"] .shp-grid.ap-grid .ap-card-name { font-size: 14px; }
	html[data-ap-cols-pc="6"] .shp-grid.ap-grid .ap-card-add { height: 36px; font-size: 13px; }
}
.shp-cat, .shp-filter button { border-radius: 999px !important; }
.shp-title { font-size: 26px !important; }
/* [11/10] 목록 제목 옆 상품 수 · 찾기 0건 안내 (list.html) */
.shp-title .ap-list-count { margin-left: 4px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--shp-brand); vertical-align: middle; }
.ap-empty-search span { font-size: 14px; color: #6b7684; }
.ap-empty-btns { display: flex; gap: 8px; margin-top: 4px; }
.ap-empty-btns .shp-btn { flex: 0 0 auto; display: flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 12px !important; }

/* ---------- 상세: 약국회원 전용 ---------- */
.ap-buy-locked { margin: 14px 0 10px; padding: 18px 20px; border-radius: 16px; background: #f5f8fb; }
.ap-buy-locked-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 800; font-size: 17px; color: #0b3a5b; }
.ap-buy-locked-title svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.ap-buy-locked-text { margin: 0; font-size: 14px; color: #4e5968; }
.ap-buy-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.ap-btn-disabled { width: 100%; height: 56px; background: #e5e8eb !important; color: #6b7684 !important; border: 0 !important; font-size: 16px; font-weight: 700; cursor: not-allowed; border-radius: 14px !important; }
.ap-buy-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ap-buy-links .shp-btn { height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px !important; font-size: 15px; }
.ap-buy-note { margin: 0; font-size: 13px; color: var(--shp-sub); text-align: center; }
/* [11/10] 로그인한 일반 · 약사회원: 다음 단계 신청 버튼 · 신청 확인 중 (_buy.html) */
.ap-buy-apply { display: flex; align-items: center; justify-content: center; width: 100%; height: 56px; border-radius: 14px !important; font-size: 16px; font-weight: 700; }
.ap-buy-note.is-pending { padding: 14px; border-radius: 12px; background: #f2f4f6; color: #4e5968; font-size: 14px; font-weight: 600; }
/* [11/10] 못 사는 이유 + 상품 문의 (_buy.html) */
.ap-buy-out { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #fff4f4; }
.ap-buy-out-why { margin: 0; font-size: 15px; font-weight: 700; color: #c4252f; }
.ap-buy-out .shp-btn { display: flex; align-items: center; justify-content: center; height: 48px; border-radius: 12px !important; background: #fff; font-size: 15px; }
/* [11/10] 휴대폰 아래 구매 줄: 신청 버튼 한 칸 꽉 · 품절 줄은 [상품 문의] 옆 반 칸 (ap-item.css 는 회색 버튼을 늘 꽉 채움) */
.ap-buybar .ap-buybar-full { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; }
.ap-buybar .ap-btn-disabled.ap-btn-half { grid-column: auto; }
.ap-buybar a.shp-btn { display: flex; align-items: center; justify-content: center; }
/* [11/10] 애니페이 충전 상품: 배송 줄 대신 충전 안내 */
.ap-info-charge dd small.ap-info-note { display: block; margin-top: 2px; }
.shp-detail-price { color: #191f28; }
.shp-btn { border-radius: 12px; }

@media (max-width: 1080px) {
	.ap-rail-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; }
	.ap-rail-btn.is-prev { left: -10px; }
	.ap-rail-btn.is-next { right: -10px; }
}
@media (max-width: 860px) {
	.shp { padding: 0 16px; }
	.ap-home { padding-top: 0; }
	/* 배너는 화면 끝까지 */
	.ap-hero { margin: 0 -16px; border-radius: 0; aspect-ratio: 816 / 360; }
	.ap-hero:not(.is-img) { min-height: 220px; }
	.ap-slide { padding: 0 22px; }
	.ap-slide-copy strong { font-size: 23px; }
	.ap-slide-point { width: 150px; }
	.ap-arrow { display: none; }
	.ap-count { right: 12px; bottom: 10px; font-size: 11.5px; padding: 3px 10px; }
	.ap-cats { grid-template-columns: repeat(5, 1fr); gap: 16px 0; margin-top: 22px; }
	.ap-cats a { font-size: 12px; gap: 6px; }
	.ap-cats-icon { width: 54px; height: 54px; border-radius: 18px; }
	.ap-cats-icon img { width: 40px; height: 40px; }
	.ap-promos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; gap: 10px; margin: 28px -16px 0; padding: 0 16px; }
	.ap-promos::after { content: ''; flex: 0 0 6px; }
	.ap-promos::-webkit-scrollbar { display: none; }
	.ap-promo { flex: 0 0 72%; scroll-snap-align: start; min-height: 84px; }
	.ap-promo-text strong { font-size: 16px; }
	.ap-promo img { width: 60px; height: 60px; }
	.ap-sec { margin-top: 44px; }
	.ap-sec-head { margin-bottom: 14px; }
	.ap-sec-head h2 { font-size: 20px; }
	.ap-sec-head h2 svg { width: 20px; height: 20px; }
	.ap-sec-head p { font-size: 13px; }
	.ap-rail { margin: 0 -16px; }
	.ap-rail-track { grid-auto-columns: 40%; gap: 10px; padding: 0 16px; scroll-padding: 0 16px; }
	.ap-rail-btn { display: none !important; }
	.ap-rank { font-size: 30px; left: 8px; }
	.ap-card-add { height: 34px; font-size: 13px; }
	.ap-card-name { font-size: 14px; }
	.ap-card-exp { margin-top: 4px; padding: 2px 6px; font-size: 11px; }
	.ap-card-price strong, .ap-card-price em { font-size: 15px; }
	.ap-cta { flex-wrap: wrap; gap: 12px; padding: 18px; margin-top: 40px; }
	.ap-cta img { width: 48px; height: 48px; }
	.ap-cta span { flex: 1; min-width: 60%; font-size: 13px; }
	.ap-cta strong { font-size: 16px; }
	.ap-cta em { margin-left: 0; width: 100%; text-align: center; }
	.ap-grid, .shp-grid.ap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 10px; }
	.ap-cols .ap-cols-pc { display: none; }
	.ap-cols .ap-cols-m { display: inline-block; }
	html[data-ap-cols-m="3"] .shp-grid.ap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 8px; }
	html[data-ap-cols-m="3"] .shp-grid.ap-grid .ap-card-name { font-size: 12.5px; }
	html[data-ap-cols-m="3"] .shp-grid.ap-grid .ap-card-add { height: 30px; font-size: 12px; }
	html[data-ap-cols-m="3"] .shp-grid.ap-grid .ap-card-price strong, html[data-ap-cols-m="3"] .shp-grid.ap-grid .ap-card-price em { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.ap-slide, .ap-card-thumb > img, .ap-promo img, .ap-cats-icon { transition: none; }
}

/* ---------- 로그인: 배너 816 + 회원 칸 360 (지금 애니팜 로그인 화면과 같은 꼴, 11/3 사장님) ---------- */
.ap-hero-wrap.is-member { display: grid; grid-template-columns: minmax(0, 816fr) minmax(0, 360fr); gap: 24px; align-items: stretch; }
.ap-hero-wrap.is-member .ap-hero.is-img { aspect-ratio: 816 / 360; }
/* [11/10] 회원 칸이 배너보다 길면(일반회원 — '신청하기' 줄) 줄 높이에 맞춰 늘어난 배너가 비율 때문에 옆으로 넓어져 회원 칸을 덮었음 → 배너는 제 높이 그대로 */
.ap-hero-wrap.is-member > .ap-hero { align-self: start; }
.ap-me { display: flex; flex-direction: column; padding: 26px 24px 18px; border: 1px solid #eceef1; border-radius: 20px; background: #fff; }
.ap-me-hello { padding-bottom: 16px; border-bottom: 1px solid #eceef1; }
.ap-me-hello p { margin: 0; }
.ap-me-company { font-size: 18px; font-weight: 800; color: #0270b0; }
.ap-me-name { margin-top: 2px !important; font-size: 18px; color: #191f28; }
.ap-me-name strong { font-weight: 800; }
.ap-me-tier { margin-top: 6px !important; font-size: 13px; color: #8b95a1; }
.ap-me-tier b { color: #333d4b; }
.ap-me-quick { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-content: center; gap: 14px 4px; padding-top: 16px; }
.ap-me-quick a { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 13.5px; color: #333d4b; }
.ap-me-quick a:hover { color: #008cd6; }
.ap-me-ic { display: block; width: 52px; height: 52px; transition: transform .15s; }
.ap-me-quick a:hover .ap-me-ic { transform: translateY(-2px); }
@media (max-width: 1080px) {
	.ap-hero-wrap.is-member { grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; }
	.ap-me { padding: 18px 16px 12px; }
	.ap-me-quick { gap: 10px 2px; }
	.ap-me-ic { width: 44px; height: 44px; }
}
@media (max-width: 860px) {
	.ap-hero-wrap.is-member { display: block; }
	.ap-me { margin-top: 16px; padding: 18px 16px 14px; border-radius: 18px; }
	.ap-me-company, .ap-me-name { font-size: 16px; }
	.ap-me-quick { gap: 12px 0; }
	.ap-me-quick a { font-size: 12px; }
	.ap-me-ic { width: 48px; height: 48px; }
}
.ap-me-apply { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 12px; height: 42px; border-radius: 12px; background: #008cd6; color: #fff !important; font-size: 14.5px; font-weight: 700; }
.ap-me-apply span { font-size: 16px; }
.ap-me-apply:hover { background: #0270b0; }
.ap-me-apply.is-pending { background: #f2f4f6; color: #4e5968 !important; font-weight: 600; font-size: 13.5px; }
/* [11/3] 가격만(손님) — '로그인하고 담기' · '로그인하고 구매' */
.ap-card-add.is-login { background: #f2f4f6; color: #4e5968; }
.ap-card-add.is-login:hover { background: #e8ebee; color: #191f28; }
.ap-buy-note.is-login { padding: 12px 14px; border-radius: 12px; background: #f2f8fd; color: #0270b0; text-align: left; font-size: 13.5px; }

/* ---------- [11/3] 브랜드관: 메인 카드 · 목록 머리 (라이프펫 파랑 · 네오메디칼 남색) ---------- */
.ap-brand-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ap-brand-card { display: flex; align-items: center; gap: 20px; padding: 20px 24px; border-radius: 20px; background: #f3f6ff; transition: transform .15s, box-shadow .15s; }
.ap-brand-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16, 32, 90, .08); }
.ap-brand-card.is-neomedical { background: #f1f1f8; }
.ap-brand-logo { flex: 0 0 168px; display: grid; place-items: center; height: 96px; padding: 14px 18px; border-radius: 16px; background: #fff; box-sizing: border-box; }
.ap-brand-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 64px; object-fit: contain; } /* 칸(그리드) 안 % 높이는 안 먹어서 px 로 — 네오메디칼 CI 가 아래로 밀렸었음 */
.ap-brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ap-brand-text strong { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; color: #191f28; }
.ap-brand-text strong em { padding: 2px 8px; border-radius: 6px; background: #e5322d; color: #fff; font-style: normal; font-size: 12px; font-weight: 700; } /* 네오메디칼: 의약외품 = Red */
.ap-brand-text > span { font-size: 14px; color: #4e5968; }
.ap-brand-text small { margin-top: 4px; font-size: 13.5px; font-weight: 700; color: #0b30a6; }
.ap-brand-card.is-neomedical .ap-brand-text small { color: #e5322d; }

.ap-brand-head.shp-brand-head { margin: 0 0 28px; border-radius: 22px; background-color: #eef2ff; }
.ap-brand-head.is-neomedical { background-color: #eeeef7; }
.ap-brand-head .shp-brand-head-in { gap: 28px; padding: 32px 36px; background: none; }
.ap-brand-head .shp-brand-logo { flex: 0 0 auto; width: 220px; height: 110px; padding: 18px 22px; border-radius: 18px; background: #fff; object-fit: contain; box-sizing: border-box; }
.ap-brand-head small { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #0b30a6; }
.ap-brand-head.is-neomedical small { color: #e5322d; }
.ap-brand-head strong { font-size: 28px; letter-spacing: -0.03em; }
.ap-brand-head p { font-size: 15px; }
.ap-empty-brand { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 20px; border-radius: 18px; background: #f7f8fa; }
.ap-empty-brand p { margin: 0; font-size: 16px; font-weight: 700; color: #4e5968; }
.ap-empty-brand .shp-btn { flex: 0 0 auto; height: 46px; padding: 0 20px; border-radius: 12px !important; }
@media (max-width: 860px) {
	.ap-brand-cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ap-brand-card { gap: 14px; padding: 14px 16px; border-radius: 16px; }
	.ap-brand-logo { flex-basis: 120px; height: 72px; padding: 10px 12px; border-radius: 12px; }
	.ap-brand-logo img { max-height: 48px; }
	.ap-brand-text strong { font-size: 17px; }
	.ap-brand-head .shp-brand-head-in { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px 18px; }
	.ap-brand-head .shp-brand-logo { width: 160px; height: 80px; padding: 12px 14px; }
	.ap-brand-head strong { font-size: 22px; }
}
.ap-brand-head + .shp-top .shp-title-wrap { display: none; } /* 브랜드관 머리에 이름이 이미 있음 */

/* [애니팜 2026-11-05] 마이페이지 마일리지 — 내 적립률 한 줄 (models/Mileage.php) */
.ap-mileage-rate { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; background: #f3f8fd; color: #3b4a5a; font-size: 13px; line-height: 1.5; }
.ap-mileage-rate b { color: #0270b0; }

/* [애니팜 2026-11-10] 회원 등급 · 마일리지 (grades.html) — 휴대폰에서 제목이 머리 줄에 붙던 것 띄움 (.shp 의 휴대폰 위 여백이 0) */
.ap-grades .shp-summary-row { gap: 12px; align-items: baseline; }
.ap-grades .shp-summary-row small { font-size: 12px; color: #8b95a1; font-weight: 500; }
.ap-grades .shp-grade-next small { margin-left: 4px; font-size: 12px; color: #b0b8c1; }
.ap-grades .ap-me-apply { margin-top: 10px; }
.ap-grades-h { margin: 28px 0 10px; font-size: 17px; font-weight: 800; color: #191f28; }
.ap-grades .shp-grade-rules { margin-top: 16px; }
@media (max-width: 860px) {
	.ap-grades { padding-top: 22px; padding-bottom: 32px; }
	.ap-grades .shp-title { font-size: 22px !important; }
	.ap-grades .shp-summary-row { flex-wrap: wrap; }
}

/* [애니팜 2026-11-10] 휴대폰 상품 상세: 상담 고양이 = 아래 구매 줄 오른쪽 빈칸 안에 (장바구니 · 주문서와 같게 — ap-cart.css).
   전엔 줄 위 86px(ap-item.css)에 떠서 구매 칸 글 · 금액 오른쪽을 가렸다. ap-item.css 가 뒤에 읽혀서 선택자를 한 단계 세게 씀. 위젯이 뜬 때만 자리 비움 */
@media (max-width: 860px) {
	html body:has(.ap-item .ap-buybar) pq-chat-widget { --ap-cs-bottom: calc(11px + env(safe-area-inset-bottom)); }
	body:has(pq-chat-widget[data-icon-ready]) .ap-item .ap-buybar { padding-right: 76px; }
}

/* [11/11] 찜 (하트, 사장님 시안 B — https://claude.ai/artifact/1DCPcPaiTRhnNvR1C9GoSZ) — 상세 제목 오른쪽 · 카드 사진 오른쪽 위. 담기 · 빼기 = layouts/anipharm/js/layout.js [data-ap-wish] */
.ap-info-titlerow { display: flex; align-items: flex-start; gap: 16px; }
.ap-info-titlerow .ap-info-title { flex: 1; min-width: 0; }
.ap-wish-btn { flex: 0 0 auto; width: 64px; height: 64px; margin-top: -4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 1px solid #e5e8eb; border-radius: 16px; background: #fff; color: #4e5968; font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s; }
.ap-wish-btn svg { width: 28px; height: 28px; fill: none; stroke: #6b7684; stroke-width: 1.6; stroke-linejoin: round; transition: transform .15s; }
.ap-wish-btn.is-on { border-color: #ffc2c8; background: #fff0f1; color: #c4202f; }
.ap-wish-btn.is-on svg, .ap-card-wish.is-on svg { fill: #F04452; stroke: #D92B3A; }
.ap-wish-btn:active svg, .ap-card-wish:active svg { transform: scale(.88); }
.ap-wish-btn:focus-visible, .ap-card-wish:focus-visible { outline: 2px solid #008cd6; outline-offset: 2px; }
.ap-card { position: relative; }
.ap-card-wish { position: absolute; top: 8px; right: 8px; z-index: 3; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); cursor: pointer; }
.ap-card-wish svg { width: 22px; height: 22px; fill: none; stroke: #6b7684; stroke-width: 1.6; stroke-linejoin: round; transition: transform .15s; }
@media (max-width: 860px) {
	.ap-wish-btn { width: 52px; height: 52px; border-radius: 14px; font-size: 10.5px; }
	.ap-wish-btn svg { width: 24px; height: 24px; }
	.ap-card-wish { top: 6px; right: 6px; width: 34px; height: 34px; }
	.ap-card-wish svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { .ap-wish-btn svg, .ap-card-wish svg { transition: none; } }
/* [11/11] 찜 하트(사진 오른쪽 위)가 기록부 · 반품X 뱃지를 가렸음 → 뱃지는 하트 바로 아래로 */
.ap-card .ap-thumb-badges { top: 56px; }
@media (max-width: 860px) { .ap-card .ap-thumb-badges { top: 46px; } }