에서 로 바뀌었다(안에 폼이 들어가야 해서).
그래서 예전에 .product-card 가 anchor 로서 갖던 성질을 여기서 되살린다.
-------------------------------------------------------------------------- */
.product-card {
display: flex;
flex-direction: column;
}
/* 사진 + 본문이 통째로 링크다. 누를 수 있는 면적을 예전만큼 넓게 유지한다. */
.product-card__link {
display: flex;
flex: 1 1 auto;
flex-direction: column;
color: inherit;
text-decoration: none;
}
.product-card__link:hover .product-card__name,
.product-card__link:focus-visible .product-card__name {
text-decoration: underline;
}
.product-card__buy {
margin-top: auto;
padding: var(--space-3);
padding-top: 0;
}
/* 손가락이 굵어도 빗나가지 않는 높이 */
.product-card__buy .btn {
min-height: 48px;
font-size: var(--font-size-md);
}
/* --------------------------------------------------------------------------
3. 모바일 하단 고정 구매 바
★ 상세 화면은 길다. 고시 표·배송 안내·후기까지 내려가면 구매 버튼은 화면 밖으로
한참 올라가 있고, 어르신은 "사려면 어디로 가야 하는지" 를 잃어버린다.
★ 폼을 복제하지 않는다 — 버튼이 form="productBuyForm" 으로 위의 폼을 그대로 제출한다.
복제하면 수량 칸이 둘이 되어 위에서 3개로 고치고 아래를 누르면 1개가 담긴다.
-------------------------------------------------------------------------- */
.buy-bar {
position: fixed;
left: 0;
right: 0;
bottom: 0;
/* 상담 독(50)보다 위. 아래에 두면 '바로 구매' 를 독이 덮어 눌리지 않는다. */
z-index: var(--z-buybar);
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3);
/* 아이폰 홈 인디케이터에 버튼이 가리지 않게 한다 */
padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
background: var(--color-surface);
border-top: 1px solid var(--color-border);
box-shadow: 0 -2px 12px rgba(0, 0, 0, .08);
}
.buy-bar__price {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
line-height: 1.3;
}
.buy-bar__name {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.buy-bar__price > strong {
font-size: var(--font-size-md);
color: var(--color-accent);
}
.buy-bar .btn {
flex: 0 0 auto;
min-height: 48px;
padding: 0 var(--space-4);
font-size: var(--font-size-md);
font-weight: 700;
}
/* 바가 페이지 마지막 내용을 덮지 않게 자리를 비워 둔다.
비워 두지 않으면 푸터의 사업자정보 마지막 줄이 영영 가려진다(법적으로 보여야 하는 값이다). */
@media (max-width: 1023px) {
body:has(.buy-bar) {
/*
★ 76px 고정이었다. 바의 실제 높이는 padding 12 + 버튼 48 + padding 12 + 안전영역 이라,
홈 인디케이터가 있는 아이폰(안전영역 약 34px)에서 바는 106px 인데 자리는 76px 이었다.
바로 위 주석이 가려지면 안 된다고 못박아 둔 사업자정보 마지막 줄이 30px 가려져 있었다.
★★ 그래서 숫자를 적지 않고 바를 이루는 값 그대로 계산한다. 버튼 높이를 바꾸면 따라온다.
*/
padding-bottom: calc(var(--space-3) * 2 + var(--tap-min) + var(--space-2)
+ env(safe-area-inset-bottom, 0px));
}
}
/* 데스크톱에서는 감춘다 — 구매 영역이 이미 화면 안에 있다. */
@media (min-width: 1024px) {
.buy-bar {
display: none;
}
}
/* ============================================================ 규격 고르기 (옵션)
★ 라디오를 <카드처럼> 만든다. 어르신 손가락이 닿는 면이 동그라미 하나가 아니라 줄 전체여야 한다
— 프로젝트의 48px 터치타깃 기준을 여기서도 지킨다.
★★ 품절 규격은 지우지 않고 흐리게만 둔다. 사라지면 "사던 게 없어졌다" 로 읽히는데,
실제로는 그 규격만 다 나간 것이다. */
.product-options {
margin: var(--space-5) 0 0;
padding: 0;
border: 0;
}
.product-options__legend {
padding: 0;
margin-bottom: var(--space-2);
font-weight: 700;
font-size: var(--font-size-md);
}
.product-options__list {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.product-option {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2) var(--space-3);
/* 줄 전체가 누르는 자리다. 48px 은 이 프로젝트의 최소 터치타깃이다. */
min-height: 48px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--radius);
background: var(--color-surface);
cursor: pointer;
}
.product-option:hover { border-color: var(--color-border-strong); }
/* 고른 줄을 테두리로 알린다. :has 를 못 읽는 브라우저에서는 라디오 점으로만 보이는데,
그래도 <고를 수 있다>는 사실은 그대로라 기능이 깨지지 않는다. */
.product-option:has(input:checked) {
border-color: var(--color-primary-dark);
border-width: 2px;
padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px);
}
.product-option:has(input:focus-visible) {
outline: 3px solid var(--color-focus, #1F5FA9);
outline-offset: 2px;
}
.product-option__name { flex: 1 1 auto; font-weight: 600; }
.product-option__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.product-option__note { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.product-option--out {
background: var(--color-tint);
color: var(--color-text-muted);
cursor: not-allowed;
}
.product-option--out .product-option__price { text-decoration: line-through; }
/* 값 범위 한 줄. 대표값만 찍으면 19,000원을 보고 들어온 손님이 아래에서 45,000원을 만난다. */
.product-detail__range {
margin: var(--space-2) 0 0;
color: var(--color-text-muted);
font-size: var(--font-size-md);
}
/* ==========================================================================
상품 — 목업 테마 (2026-09-24)
목업 165~187 · 1100~1138 행의 카드: 정사각 사진, 산지직송 딱지, 둥근 흰 카드, 빨강 값.
분류 탭과 정렬은 원래 알약 모양이라 토큰(빨강)만으로 목업과 같아졌다.
========================================================================== */
/* 이 화면의 검색칸은 휴대폰에서도 보인다(머리의 검색칸은 1024px 미만에서 숨는다). */
.header-search--page {
display: flex;
max-width: 36rem;
margin-bottom: var(--space-5);
}
.product-list__query {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
margin: 0 0 var(--space-4);
font-size: var(--font-size-base);
}
.product-list__query strong {
color: var(--color-primary-dark);
}
.product-list__query a {
/* 누르는 자리 29px → 45px. 음수 여백으로 줄 높이는 그대로 둔다. */
padding-block: 8px;
margin-block: -8px;
margin-left: var(--space-2);
color: var(--color-text-muted);
text-decoration: underline;
}
.product-grid .product-card {
position: relative;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
}
.product-grid .product-card:hover {
box-shadow: var(--shadow);
}
.product-grid .product-card__media {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3f4f6;
}
.product-grid .product-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .3s ease;
}
.product-grid .product-card:hover .product-card__media img {
transform: scale(1.04);
}
.product-card__origin {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--color-primary);
color: #fff;
font-size: var(--font-size-xs);
font-weight: 700;
box-shadow: var(--shadow-sm);
}
.product-grid .product-card__sale-price {
color: var(--color-primary);
}
.product-card__preorder {
border-radius: var(--radius-pill);
}
@media (prefers-reduced-motion: reduce) {
.product-grid .product-card__media img {
transition: none;
}
.product-grid .product-card:hover .product-card__media img {
transform: none;
}
}
/* 1024px 이상에서는 머리의 검색칸이 보이므로 이 화면의 검색칸은 한 번만 보이게 감춘다. */
@media (min-width: 1024px) {
.header-search--page {
display: none;
}
}
/* ==========================================================================
상품 상세 — 목업 테마 (2026-09-24)
목업에는 상세 화면이 없다. 목업 카드와 같은 말투로 맞춘다: 둥근 사진, 빨강 값, 흰 카드 구매칸, 고르는 카드 규격.
========================================================================== */
.product-detail__media,
.product-detail__media img {
border-radius: var(--radius-lg);
}
.product-detail__media {
overflow: hidden;
box-shadow: var(--shadow);
}
.product-detail__thumb {
border-radius: var(--radius);
}
.product-detail__category {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--color-primary-light);
color: var(--color-primary-dark);
font-weight: 700;
}
.product-detail__name {
font-weight: 800;
letter-spacing: -0.03em;
}
.product-detail__price {
color: var(--color-primary);
}
/* 규격 값은 본문 크기라 큰 글자 기준(3:1)을 못 쓴다. 고른 줄의 옅은 빨강 바탕 위에서 주색은 4.41 — AA 에 못 미쳤다.
한 단계 진한 빨강(흰 바탕 6.47)으로 둔다. */
.product-option__price {
color: var(--color-primary-dark);
}
.product-buy {
padding: var(--space-5);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
}
.product-option {
border-radius: var(--radius);
}
.product-option:has(input:checked) {
background: var(--color-primary-light);
border-color: var(--color-primary);
}
/* 아래 정보 탭: 알약 */
.product-tabs2__link {
border-radius: var(--radius-pill);
}
.product-panel {
border-radius: var(--radius-lg);
}
@media (min-width: 1024px) {
.product-grid {
gap: 28px;
}
.product-detail {
column-gap: clamp(32px, 3vw, 56px);
}
}