/* ========================================================= 상품구매 (Views/Point/MallList.cshtml, Views/Point/CashProduct.cshtml) 배치만 둡니다. 카드 자체는 components.css 의 .pd-product 입니다. 클래스 이름에 pd- 를 쓰지 않습니다. pd- 는 시스템 것입니다. .page-point 목록 · .page-product 상세 ========================================================= */ .page-point { display: flex; flex-direction: column; gap: var(--pd-space-10); padding-block: var(--pd-space-6) var(--pd-space-12); } /* 묶음을
으로 쓰면 style.css 3줄의 `section { padding: 80px 0 }` 이 들어옵니다(랜딩 페이지 단락 여백인데 요소 선택자라 화면 안까지 닿습니다). 위 gap 에 80px 이 더해져 묶음 사이가 200px 넘게 벌어졌습니다. 여백은 gap 하나가 정하도록 여기서 0 으로 되돌립니다. components.css 의 .pd-card 가 `padding: 0` 을 적어 둔 것과 같은 이유입니다. */ .page-point__section { padding-block: 0; } /* --- 묶음 머리 --- */ /* 제목과 설명을 한 줄에 둡니다. 설명이 한 낱말짜리 꼬리표가 아니라 문장이라 좁은 화면에서는 아래로 떨어뜨립니다. */ .page-point__head { display: flex; align-items: baseline; gap: var(--pd-space-2) var(--pd-space-3); flex-wrap: wrap; margin-bottom: var(--pd-space-5); } .page-point__desc { font-size: 14px; color: var(--pd-text-secondary); } /* --- 상품 격자 --- */ /* 칸 수를 폭에 맡기지 않고 못박습니다. 처음에는 `auto-fill, minmax(200px, 1fr)` 이었습니다. 본문이 1400px 라 넓은 화면에서 여섯 칸이 나왔고, 상품이 열한 개뿐인 목록이 잡화점 진열대처럼 보였습니다. 사진이 220px 로 작아져 무엇을 파는지도 잘 안 보였습니다. 칸 수를 적어 두면 폭마다 카드 크기가 얼마인지 미리 압니다. 끊는 자리는 시스템 브레이크포인트를 씁니다(RENEWAL_PLAN 3단계 — 640/768/1024/1280). 1024 이상 넉 칸 · 640 이상 석 칸 · 그 아래 두 칸입니다. 넉 칸으로 넘어가는 자리는 1280 이 아니라 **1024** 입니다. 1280 으로 두면 1279px 에서 석 칸 402px 짜리 카드가 나오는데, 창을 1280 으로 놓고 세로 스크롤바가 잡히면 뷰포트가 1263~1265 라 흔한 노트북이 그대로 이 구간에 떨어집니다. 같은 화면이 스크롤바 유무로 석 칸과 넉 칸을 오갑니다. 1024 로 내리면 1024 이상이 전부 넉 칸이고 카드는 234~338px 안에서만 움직입니다. */ .page-point__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pd-space-4); } @media (min-width: 640px) { .page-point__products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .page-point__products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* 카드가
  • 안에서 세로로 늘어나야 한 줄의 카드 높이가 같아집니다. .pd-product 는 flex column 이지만 높이를 스스로 정하지는 않습니다. */ .page-point__products > li { display: flex; } .page-point__products > li > .pd-product { width: 100%; } /* ========================================================= 상품 상세 (CashProduct) ========================================================= */ .page-product { display: flex; flex-direction: column; gap: var(--pd-space-8); padding-block: var(--pd-space-6) var(--pd-space-12); } /* 화면의 덩어리(상세 · 상세정보 · 제품 정보 · FAQ · 목록으로)는 전부 구매 폼 **안에** 있습니다. 위 .page-product 의 gap 은 자기 자식(숨은 입력 셋과 이 폼)에만 걸리므로 폼 안쪽 덩어리 사이는 0 이었고, 카드 넷이 서로 붙어 한 덩어리로 보였습니다. 폼도 같은 세로 흐름으로 만듭니다. */ .page-product__form { display: flex; flex-direction: column; gap: var(--pd-space-8); } /* 그림과 사는 칸을 나란히. 그림은 늘어나지 않게 폭을 잡아 두고 남는 쪽을 구매 칸이 가져갑니다 — 옵션 줄이 여섯이라 좁으면 라벨이 두 줄로 접힙니다. */ .page-product__detail { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: var(--pd-space-8); align-items: start; } .page-product__media { background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: var(--pd-radius-lg); padding: var(--pd-space-5); } /* 상품 사진은 비율이 제각각입니다. 칸 안에 통째로 넣고(contain) 넘치지 않게만 합니다 — 잘라 내면 무엇을 파는지 못 알아봅니다. */ .page-product__media img { display: block; width: 100%; height: auto; max-height: 480px; object-fit: contain; margin-inline: auto; } .page-product__buy { display: flex; flex-direction: column; gap: var(--pd-space-5); } .page-product__name { word-break: keep-all; } .page-product__rows, .page-product__total { display: flex; flex-direction: column; gap: var(--pd-space-4); } /* 총액은 위와 선으로 끊습니다. 옛 화면의 border-top: 2px 자리입니다. */ .page-product__total { padding-top: var(--pd-space-5); border-top: 1px solid var(--pd-border-strong); } /* 라벨을 왼쪽에 두는 줄. 회원가입 폼(page-account.css)과 같은 방식입니다 — .pd-field 를 격자로 만들고 라벨을 1열에 세웁니다. 값이 짧은 줄이 여섯이라 라벨을 위에 두면 세로로 두 배가 됩니다. */ .page-product__row.pd-field { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: var(--pd-space-4); row-gap: var(--pd-space-1); align-items: start; } /* 라벨은 값 칸의 **첫 줄**에 맞춥니다. 가운데(align-self: center)로 두면 안내 문구가 여럿 붙는 줄에서 라벨이 아래로 내려갑니다 — 마일리지 사용은 입력칸 + 보유액 + 안내 둘이라 네 줄이고, 라벨이 입력칸이 아니라 보유액 옆에 서 있었습니다. 줄 높이를 입력칸 높이로 맞추면 40px 안에서 가운데에 서므로 입력칸과도, 금액 한 줄과도 어긋나지 않습니다. */ .page-product__row.pd-field > .pd-field__label { grid-column: 1; align-self: start; line-height: var(--pd-control-h); /* 라벨이 길어도 값 칸을 밀지 않고 그 안에서 접힙니다. */ word-break: keep-all; } .page-product__row.pd-field > *:not(.pd-field__label) { grid-column: 2; } /* 값이 안내 문구뿐인 줄(유의사항)에는 40px 를 잡을 입력칸이 없습니다. 그대로 두면 라벨만 10px 내려가 문구와 어긋납니다. */ .page-product__row.pd-field:has(> .page-product__control > .desc-txt:first-child) > .pd-field__label { line-height: 1.6; padding-top: 2px; } .page-product__control { display: flex; flex-direction: column; gap: var(--pd-space-1); } .page-product__control > .pd-input, .page-product__control > .pd-select { max-width: 320px; } /* --- 금액 --- */ /* 금액 한 줄도 입력칸과 같은 40px 를 차지하게 둡니다. 그래야 값이 글자인 줄과 입력칸인 줄에서 라벨이 같은 자리에 섭니다. 숫자와 단위는 baseline 으로 맞추고(align-items), 그 한 줄을 40px 안에서 가운데로 내립니다(align-content — flex 에서 align-content 가 먹으려면 wrap 이 있어야 합니다). */ .page-product__price { display: flex; flex-wrap: wrap; align-items: baseline; align-content: center; min-height: var(--pd-control-h); gap: 2px; font-size: 18px; font-weight: var(--pd-weight-bold); color: var(--pd-text); } .page-product__price .t-unit { font-size: 13px; color: var(--pd-text-secondary); } .page-product__price--total { font-size: 28px; color: var(--pd-accent-on-subtle); } .page-product__price--total .t-unit { font-size: 16px; } /* 총액이 어떻게 나왔는지 적는 줄(단가 + 배송비 - 마일리지). */ .page-product__calc { font-size: 13px; color: var(--pd-text-muted); } /* 보유 마일리지. 마일리지는 금색으로 표시합니다(.pd-product__currency 와 같은 갈래). 글자에 쓰므로 대비가 나오는 gold-700 을 씁니다 — gold-500 은 바탕색용입니다. */ .page-product__own { font-size: 13px; color: var(--pd-gold-700); } .page-product__mileage { max-width: 320px; } /* --- 수량 --- */ /* 빼기 · 칸 · 더하기를 한 줄로 붙입니다. 옛 화면은 material-icons 글리프를 입력 위에 겹쳐 놨는데, 누를 자리가 24px 라 손가락으로는 잘 안 눌렸습니다. */ .page-product__count { display: flex; align-items: center; gap: var(--pd-space-2); } .page-product__count > .pd-input { width: 88px; text-align: center; } /* --- 안내 문구 --- */ /* .desc-txt 는 스크립트가 잡는 훅이라 이름을 그대로 둡니다(뷰 주석 참고). common.css 가 13px 회색을 주는데 토큰 색으로 맞춥니다. */ .page-product .desc-txt { font-size: 13px; line-height: 1.6; color: var(--pd-text-muted); } /* validatePurchase 가 어긴 조건의 문구 하나에만 붙입니다. */ .page-product .desc-txt.desc-highlight { color: var(--pd-danger); font-weight: var(--pd-weight-semibold); } /* 같은 검증이 마일리지 입력에 붙이는 클래스. 이름이 시스템의 .pd-input--error 가 아니라 input-error 인 것은 스크립트가 그렇게 씁니다. */ .page-product .pd-input.input-error { border-color: var(--pd-danger); box-shadow: 0 0 0 1px var(--pd-danger); } .page-product__actions { margin-top: var(--pd-space-2); } .page-product__actions > .pd-btn { max-width: 320px; } /* 살 수 없는 상품의 안내. 구매하기 단추가 서던 자리라 단추만큼 눈에 띄어야 합니다. 회색 안내(.pd-note 기본)로 두었더니 유의사항 문구와 구분이 안 돼 왜 못 사는지 모르고 지나쳤습니다. 폭은 단추(320px)보다 넓게 둡니다 — "BIZPHARM, WITHPHARM 회원 전용" 처럼 이름이 길면 두 줄로 접힙니다. */ .page-product__blocked { width: 100%; max-width: 480px; } .page-product__foot { justify-content: flex-start; } /* --- 제품 정보 표 --- */ /* 여백은 .pd-card__body 가 갖습니다(뷰 참고). 처음에는 표에 직접 좌우 여백을 줬는데, 위쪽이 비지 않아 표 첫 줄이 카드 머리 선에 그대로 붙었습니다. .pd-table-wrap 은 좁은 화면에서 표만 가로로 스크롤시키려고 남깁니다. 다만 그 테두리·반경은 뗍니다 — 여백이 생긴 카드 바디 안에서 표가 다시 테두리를 두르면 상자 안의 상자가 됩니다. 경계는 카드 하나면 됩니다. */ .page-product__spec { border: 0; border-radius: 0; background: transparent; } /* 행 hover 를 뗍니다. .pd-table 의 hover 는 줄이 여럿이라 눈으로 좇아야 하는 목록에서 지금 보는 줄을 짚어 주는 장치입니다. 이 표는 두 줄짜리 제원표라 좇을 것이 없고, 바탕이 바뀌면 누를 수 있는 줄로 읽힙니다. (제원표가 다른 화면에도 나오면 그때 시스템 변형으로 올립니다.) */ .page-product__spec .pd-table tbody tr:hover > td, .page-product__spec .pd-table tbody tr:hover > th { background: transparent; } /* --- 옛 모양으로 남겨 둔 두 곳 --- */ /* 상품상세태그(.product-more)와 FAQ(ul.faq)는 DB 가 주는 HTML 이고 style.css 의 규칙에 기대어 짜여 있습니다. 뷰 주석에 이유를 적었습니다. 여기서는 **바깥 여백과 색만** 새 카드에 맞춥니다. 안쪽 구조를 건드리면 DB 글이 무너집니다. */ .page-product__more-card { padding: var(--pd-space-6); } .page-product__more-card .product-more { background: transparent; } /* 상세정보 안의 큰 그림을 누르면 :target 으로 열리는 겹창(style.css .lightbox). 가운데 정렬을 `display: table-cell` + `text-align: center` 로 하는데, text-align 은 **인라인** 내용만 가운데로 보냅니다. base.css 가 .pd-root 안의 img 를 display: block 으로 바꾸는 바람에(68줄) 그림이 왼쪽으로 붙었습니다 — 1440 폭에서 178px 왼쪽. 이관으로 .pd-root 가 이 화면에 처음 들어오면서 생긴 일입니다. block 인 채로 좌우 auto 여백을 줘서 되돌립니다. */ .page-product .lightbox img { margin-inline: auto; } /* 카드 안의 목록. 구분선은 카드 폭을 꽉 채우고(목록이니까), 글자는 카드 머리(.pd-card__head 의 24px)와 같은 자리에서 시작하게 합니다. 예전에는