/* * 렌탈마켓 공개 제휴카드 — .pcd-* 전용 * * 설계 정본 PUBLIC-UI-005-AFFILIATE-CARD-DESIGN-v0.1.2.md * * 정의 범위 .pub-root 하위의 .pcd-* 만 * 금지 :root 에서 --pub-* 재정의 · !important * .hd* / .ft* / .pd-* / .dt-* / .hm-* / .pc-* / .pdt-* / .sh-* 재정의 * * 카드 이미지는 DB 에 intrinsic 크기가 없다(rm_affiliate_cards 에 width/height 컬럼 없음). * 그래서 aspect-ratio 로 영역을 먼저 잡아 CLS 를 막는다. * object-fit:contain 이라 카드 도안이 잘리지 않는다. * * 색 규칙 마젠타는 돈과 행동에만. 브랜드 · 프로모션 월 · 조건은 잉크와 중립만 쓴다. */ /* ── breadcrumb ─────────────────────────────────────────── */ .pub-root .pcd-crumb{margin-bottom:var(--s3);} .pub-root .pcd-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2); margin:0;padding:0;list-style:none; font-size:var(--fs-caption);color:var(--pub-ink-3);} .pub-root .pcd-crumb li + li::before{content:"›";margin-right:var(--s2);color:var(--pub-ink-4);} .pub-root .pcd-crumb a{color:var(--pub-ink-3);} .pub-root .pcd-crumb a:hover{color:var(--pub-ink);} .pub-root .pcd-lead{margin-top:var(--s3);} /* ── 목록 (PUBLIC-FINAL-BUNDLE-001) ───────────────────── * 넥센타이어 렌탈 제휴카드 페이지 레이아웃을 옮긴다. * PC 이미지 왼쪽(세로 중앙) + 오른쪽 본문 * 모바일 이미지 위 / 본문 아래 세로형 * * 넥센은 이미지 210px 고정폭을 쓴다. 같은 값을 쓴다. * 카드 도안 비율이 대체로 1.6:1 이라 이 폭에서 잘리지 않는다. */ .pub-root .pcd-list{display:grid;gap:var(--s4);margin:0;padding:0;list-style:none;} .pub-root .pcd-card{ border:1px solid var(--pub-line);border-radius:var(--r2); background:var(--pub-bg);} .pub-root .pcd-card__inner{display:flex;flex-direction:column;gap:var(--s5); padding:var(--s5);} @media (min-width:768px){ .pub-root .pcd-card__inner{flex-direction:row;align-items:center; gap:var(--s8);padding:var(--s6);} } /* ── 이미지 ───────────────────────────────────────────── * DB 에 intrinsic 크기가 없어 비율로 영역을 먼저 잡는다. * object-fit:contain 이라 카드 도안이 잘리지 않는다. */ /* * 카드 이미지 슬롯 (PATCH-009 · P1-2). * * 정사각형으로 통일한다. * 이전에는 aspect-ratio:8/5 였다. 가로형 카드에는 맞지만 * 세로형 원본은 높이에 갇혀 실제보다 훨씬 작게 보였다. * 카드마다 이미지 점유율이 달라 목록이 들쭉날쭉했다. * * 정사각형이면 가로형·세로형이 같은 슬롯을 쓴다. * 가로형은 좌우를 꽉 채우고 위아래가 남는다. * 세로형은 위아래를 꽉 채우고 좌우가 남는다. * 둘 다 슬롯 한 변에 닿으므로 크기가 비슷하게 보인다. * * 배경을 투명하게 둔다. * 카드 이미지는 대부분 배경이 없는 PNG 다. * 회색 판을 깔면 카드 자체 색과 겹쳐 지저분해진다. * * 테두리도 뺀다. 슬롯 경계를 그리면 이미지가 액자에 갇혀 보인다. */ .pub-root .pcd-card__media{display:grid;place-items:center; aspect-ratio:1 / 1; width:100%;max-width:200px;margin:0 auto; padding:var(--s2); background:transparent;overflow:hidden;} /* * grid 아이템의 기본 min-height 는 auto 라 내용 크기보다 작아지지 않는다. * 그래서 세로형 이미지에 max-height:100% 를 줘도 슬롯을 넘었다(실측 260 vs 180). * 0 으로 두면 그때부터 max-height 가 실제로 걸린다. */ .pub-root .pcd-card__media > *{min-width:0;min-height:0;} /* * 슬롯 안에 비율 그대로 맞춘다. * * width/height:100% 를 쓰지 않는다. * 그러면 img box 가 슬롯과 같은 정사각형이 되고, * object-fit 은 그 안에서 그려지는 그림만 줄인다. * 세로형은 box 가 슬롯을 넘어(실측 164x260 vs 180x180) * overflow:hidden 에 잘렸다. * * max-width/max-height 로 두면 box 자체가 원본 비율을 지키면서 * 슬롯 한 변에 닿을 때까지만 커진다. * 가로형은 좌우가 닿고 위아래가 남는다. * 세로형은 위아래가 닿고 좌우가 남는다. * 둘 다 한 변을 채우므로 크기가 비슷하게 보인다. */ .pub-root .pcd-card__media img{max-width:100%;max-height:100%; width:auto;height:auto; object-fit:contain;object-position:center;} .pub-root .pcd-card__noimg{font-size:var(--fs-caption);color:var(--pub-ink-4);} @media (min-width:768px){ .pub-root .pcd-card__media{flex:0 0 180px;width:180px;margin:0;} } .pub-root .pcd-card__body{flex:1 1 auto;min-width:0;} /* ── 본문 머리 — 카드명 · 신청 전화 ─────────────────────── */ .pub-root .pcd-card__head{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:var(--s3); padding-bottom:var(--s4);border-bottom:1px solid var(--pub-line);} .pub-root .pcd-card__brand{font-size:var(--fs-caption);font-weight:var(--fw-sb); color:var(--pub-ink-3);} .pub-root .pcd-card__name{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2); margin-top:2px; font-size:var(--fs-subtitle);font-weight:var(--fw-b);color:var(--pub-ink); word-break:keep-all;} .pub-root .pcd-card__company{font-size:var(--fs-caption);font-weight:var(--fw-sb); color:var(--pub-ink-2);} /* 전화 배지는 tel: 링크다. 시각 32px 을 유지하되 터치 44px 를 확보한다. 배지를 키우면 카드 머리가 뚱뚱해진다. */ .pub-root .pcd-card__tel{position:relative;flex:0 0 auto;display:inline-flex;align-items:center; min-height:32px;padding:0 var(--s3);border-radius:var(--r-pill); background:var(--pub-bg-3); font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-ink-2); white-space:nowrap;font-variant-numeric:tabular-nums;} .pub-root .pcd-card__tel::after{content:"";position:absolute; left:0;right:0;top:50%;height:44px;transform:translateY(-50%);} .pub-root .pcd-card__tel:hover{text-decoration:none;color:var(--pub-ink);} /* 프로모션 월. 카드 좌상단에 둔다. 카드 하나 전체에 걸리는 정보라 본문 안이 아니라 카드 머리에 붙인다. 표시 전용 메타이며 상태 배지가 아니다. */ .pub-root .pcd-card__month{display:inline-flex; margin:var(--s5) 0 0 var(--s5); padding:3px var(--s3);border-radius:var(--r-pill); background:var(--pub-benefit);color:var(--pub-on-accent); font-size:var(--fs-caption);font-weight:var(--fw-sb);} @media (min-width:768px){ .pub-root .pcd-card__month{margin:var(--s6) 0 calc(var(--s4) * -1) var(--s6);} } /* ── 실적구간 ─────────────────────────────────────────── * 표를 쓰지 않는다. 조건 ↔ 금액 한 줄씩 두면 모바일에서도 그대로 읽힌다. */ .pub-root .pcd-tiers{margin:0;padding:0;list-style:none;} /* * 구간 사이 세로 여백을 벌린다 (AFFILIATE-CARD-PUBLIC-UX-001). * * 추가 문구가 있는 구간만 118px, 나머지는 58px 이라 * 좁은 화면에서 어디까지가 한 구간인지 읽히지 않았다(실측). * gap 을 세로에도 줘 두 줄로 접힐 때 조건과 금액이 붙지 않게 한다. */ .pub-root .pcd-tiers li{display:flex;flex-wrap:wrap;align-items:baseline; justify-content:space-between;gap:var(--s2) var(--s3); padding:var(--s4) 0;border-bottom:1px solid var(--pub-line);} .pub-root .pcd-tiers li:last-child{border-bottom:0;} .pub-root .pcd-tiers__cond{flex:0 0 auto; font-size:var(--fs-label);font-weight:var(--fw-sb);color:var(--pub-ink-2);} .pub-root .pcd-tiers__amt{text-align:right;font-size:var(--fs-label);} /* 숫자 정렬. 모달과 같은 규칙이다(AFFILIATE-CARD-PUBLIC-UX-001). */ .pub-root .pcd-tiers__amt b{font-weight:var(--fw-b);color:var(--pub-ink); font-variant-numeric:tabular-nums;white-space:nowrap;} .pub-root .pcd-tiers__amt em{display:block;margin-top:2px;font-style:normal; font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-accent);} .pub-root .pcd-card__notier{padding:var(--s4) 0;} /* ── 하단 메타 ────────────────────────────────────────── * 요금 정보와 시각적으로 끊어 준다. */ .pub-root .pcd-card__meta{margin-top:0;padding-top:var(--s4); border-top:1px solid var(--pub-line);} .pub-root .pcd-card__notes{margin:var(--s4) 0 0;padding:0;list-style:none;} .pub-root .pcd-card__notes li{position:relative;padding-left:12px; font-size:var(--fs-caption);color:var(--pub-ink-3);line-height:1.65; word-break:keep-all;} .pub-root .pcd-card__notes li::before{content:"\00b7";position:absolute;left:2px;top:-1px;} /* * 연회비 (D-AFFILIATE-CARD-PUBLIC-UX-02). * * 카드명 바로 아래 왼쪽에 붙인다. * before text-align:right — 오른쪽 끝에 혼자 떠 있어 * 어느 항목에 속한 값인지 읽히지 않았다. * after 카드사 · 카드명과 같은 왼쪽 선에 선다. * * 모달(.pcm-card__fee)이 이미 왼쪽이다. 두 화면을 맞춘다. * 색도 ink-4 에서 ink-3 으로 올린다. * ink-4 는 토큰 주석에 "선·아이콘 전용. 텍스트 금지" 라고 적혀 있다. */ .pub-root .pcd-card__fee{margin-top:var(--s2);text-align:left; font-size:var(--fs-caption);color:var(--pub-ink-3);} /* 신청 버튼. 카드당 하나뿐인 전환 지점이라 accent 를 쓴다. */ .pub-root .pcd-card__apply{display:flex;align-items:center;justify-content:center;gap:6px; min-height:50px;margin-top:var(--s4); border-radius:var(--r1); background:var(--pub-accent);color:var(--pub-on-accent); font-size:var(--fs-label);font-weight:var(--fw-b);} /* hover 색은 .btn--primary 와 같은 --pub-accent-press 를 쓴다. filter 로 임의 보정하면 버튼마다 눌린 색이 달라진다. */ .pub-root .pcd-card__apply:hover{background:var(--pub-accent-press);text-decoration:none;} /* ── 브랜드 탭 (PUBLIC-FINAL-BUNDLE-001) ───────────────── * 카드가 있는 브랜드만 탭으로 만든다. * 필터는 li 를 숨겼다 보이는 방식이라 서버 왕복이 없다. * * 선택 탭은 잉크 배경으로 반전한다. * accent(마젠타)는 신청 버튼 전용이라 탭에 쓰지 않는다. * 페이지에서 마젠타가 여러 곳이면 어디를 눌러야 할지 흐려진다. * * 브랜드가 늘어날 수 있으므로 가로 스크롤을 허용한다. * 줄바꿈으로 두면 8개 이상에서 탭 줄이 화면을 차지한다. */ .pub-root .pcd-tabs{display:flex;gap:var(--s2); margin:0 calc(var(--gutter) * -1) var(--s6); padding:0 var(--gutter) var(--s2); overflow-x:auto;scrollbar-width:none;} .pub-root .pcd-tabs::-webkit-scrollbar{display:none;} .pub-root .pcd-tabs__btn{flex:0 0 auto; min-height:44px;padding:0 var(--s4); border:0;border-radius:var(--r-pill); box-shadow:inset 0 0 0 1px var(--pub-line-2); background:var(--pub-bg);cursor:pointer;white-space:nowrap; font-size:var(--fs-label);font-weight:var(--fw-m);color:var(--pub-ink-2); transition:background .15s ease,color .15s ease,box-shadow .15s ease;} .pub-root .pcd-tabs__btn:hover{color:var(--pub-ink);box-shadow:inset 0 0 0 1px var(--pub-ink-3);} .pub-root .pcd-tabs__btn.is-on{background:var(--pub-ink);color:var(--pub-on-accent); font-weight:var(--fw-sb);box-shadow:none;} .pub-root .pcd-tabs__n{margin-left:4px;font-size:var(--fs-caption);opacity:.7; font-variant-numeric:tabular-nums;} /* JS 가 없으면 탭을 숨기고 전체 카드를 그대로 보여 준다. */ .pub-root .pcd-tabs:not([data-ready]){display:none;} .pub-root .pcd-card[hidden]{display:none;} .pub-root .pcd-noresult{padding:var(--s14) 0;text-align:center; font-size:var(--fs-label);color:var(--pub-ink-3);} /* * 좁은 폭에서 두 줄로 접힐 때 (목록 · AFFILIATE-CARD-PUBLIC-UX-001). * * 한 줄일 때는 조건 왼쪽 · 금액 오른쪽이 읽기 좋다. * 두 줄이 되면 금액만 오른쪽에 떠 조건과 선이 어긋난다. * 접힌 줄에서는 금액도 왼쪽에 맞춘다. * * 480px 은 조건과 금액이 한 줄에 들어가지 못하기 시작하는 폭이다. */ @media (max-width:479px){ .pub-root .pcd-tiers__cond, .pub-root .pcd-tiers__amt{flex:1 1 100%;text-align:left;} .pub-root .pcd-tiers__amt em{text-align:left;} } /* ──────────────────────────────────────────────────────────── * 카드 비율 (PUBLIC-CARD-PROPORTION · RC78) * 카드 상자 폭은 그대로 둔다(기존 레이아웃 유지). * 안쪽 카드 이미지 칸만 키워 카드가 제대로 보이게 한다. * 1024 이하는 지금 그대로다(모바일 영향 0). * ──────────────────────────────────────────────────────────── */ @media (min-width:768px){ .pub-root .pcd-card__media{flex:0 0 clamp(220px, 22vw, 340px); width:clamp(220px, 22vw, 340px); max-width:none;} }