/*
 * 제휴카드 상세 모달 (PATCH-009 · P1-3).
 *
 * 상품 상세에서만 쓴다. 목록·HOME 에는 없다.
 *
 * z-index
 *   --z-modal(400) 을 쓴다.
 *   상담 모달(.counsel_win)은 2147483000 이라 언제나 이 위에 뜬다.
 *   상담 창이 이 모달에 가리면 신청 자체가 막힌다.
 */

.pub-root .cardlist__more{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;margin-top:var(--s3);padding:0 var(--s4);
  border:0;border-radius:var(--r1);cursor:pointer;
  background:var(--pub-bg-2);box-shadow:inset 0 0 0 1px var(--pub-line-2);
  font-family:inherit;font-size:var(--fs-label);font-weight:var(--fw-sb);
  color:var(--pub-ink);}
.pub-root .cardlist__more:hover{background:var(--pub-bg-3);}

.pub-root .pcm{position:fixed;inset:0;z-index:var(--z-modal);
  display:flex;align-items:center;justify-content:center;padding:var(--gutter);}
.pub-root .pcm[hidden]{display:none;}
.pub-root .pcm__dim{position:absolute;inset:0;background:rgba(30,23,35,.45);}

/*
 * 상자.
 *
 * 높이를 화면에 맞춰 제한한다. 카드가 많으면 안에서 스크롤한다.
 * 제한이 없으면 상자가 화면 밖으로 자라 닫기 버튼에 닿을 수 없다.
 */
.pub-root .pcm__box{position:relative;display:flex;flex-direction:column;
  width:100%;max-width:560px;max-height:calc(100vh - var(--gutter) * 2);
  border-radius:var(--r2);background:var(--pub-bg);overflow:hidden;
  box-shadow:0 18px 48px rgba(30,23,35,.24);}

/* 머리는 고정한다. 스크롤해도 닫기 버튼이 늘 보인다. */
.pub-root .pcm__head{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--pub-line);}
.pub-root .pcm__t{margin:0;font-size:var(--fs-subtitle);font-weight:var(--fw-b);
  color:var(--pub-ink);}

.pub-root .pcm__x{position:relative;flex:0 0 auto;width:44px;height:44px;
  padding:0;border:0;border-radius:var(--r-pill);
  background:transparent;cursor:pointer;}
.pub-root .pcm__x:hover{background:var(--pub-bg-3);}
.pub-root .pcm__x::before,
.pub-root .pcm__x::after{content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;background:var(--pub-ink-2);border-radius:2px;
  transform:translate(-50%,-50%) rotate(45deg);}
.pub-root .pcm__x::after{transform:translate(-50%,-50%) rotate(-45deg);}

.pub-root .pcm__body{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:var(--s5);display:grid;gap:var(--s5);}

/* ── 카드 한 장 ─────────────────────────────────────── */

.pub-root .pcm-card{display:grid;gap:var(--s3);
  padding-bottom:var(--s5);border-bottom:1px solid var(--pub-line);}
.pub-root .pcm-card:last-of-type{padding-bottom:0;border-bottom:0;}

.pub-root .pcm-card__head{display:flex;align-items:center;gap:var(--s4);}

/*
 * 카드 이미지도 정사각형 슬롯을 쓴다 (P1-2 와 같은 규칙).
 * 가로형·세로형이 섞여 있어도 크기가 비슷하게 보인다.
 */
.pub-root .pcm-card__media{flex:0 0 auto;display:grid;place-items:center;
  width:72px;aspect-ratio:1 / 1;overflow:hidden;}
.pub-root .pcm-card__media > *{min-width:0;min-height:0;}
.pub-root .pcm-card__media img{max-width:100%;max-height:100%;
  width:auto;height:auto;object-fit:contain;}

.pub-root .pcm-card__ti{min-width:0;display:grid;gap:2px;}
.pub-root .pcm-card__co{font-size:var(--fs-caption);color:var(--pub-ink-3);}
.pub-root .pcm-card__nm{margin:0;font-size:var(--fs-label);font-weight:var(--fw-sb);
  color:var(--pub-ink);}
.pub-root .pcm-card__fee{font-size:var(--fs-caption);color:var(--pub-ink-3);}

/*
 * 실적구간.
 *
 * 좌우 2열로 둔다. "얼마 쓰면" 과 "얼마 할인" 이 나란히 읽혀야
 * 구간을 눈으로 비교할 수 있다.
 */
/*
 * 실적 구간 묶음 (AFFILIATE-CARD-PUBLIC-UX-001).
 *
 * gap 2px 이라 구간끼리 붙어 보였다.
 *   추가 문구가 있는 구간만 높이가 78px, 나머지는 25px 이라
 *   어디까지가 한 구간인지 읽히지 않았다(실측).
 *
 * 구간 사이를 벌리고 얇은 선으로 나눈다.
 * 선은 배경(--pub-bg-2) 위에 흰 선으로 둬 회색 상자 안에서 구분된다.
 */
.pub-root .pcm-tier{margin:0;display:grid;gap:0;
  padding:var(--s2) var(--s4);border-radius:var(--r1);background:var(--pub-bg-2);}
.pub-root .pcm-tier__row + .pcm-tier__row{
  margin-top:var(--s2);padding-top:var(--s2);
  border-top:1px solid var(--pub-bg);}
/*
 * 실적 구간 행 (AFFILIATE-CARD-PUBLIC-UX-001).
 *
 * 목록 페이지(.pcd-tiers li)와 같은 규칙을 쓴다.
 * 두 화면이 같은 데이터를 다른 색으로 보여주고 있었다.
 *
 *   before   목록: 금액=먹색 · 추가문구=accent
 *            모달: 금액=accent · 추가문구=회색     ← 역할이 뒤바뀜
 *
 *   after    금액=먹색 (가장 굵고 진하게)
 *            추가문구=accent (혜택이라 눈에 띄어야 한다)
 *            실적조건=ink-2
 *
 * 글자 크기는 건드리지 않는다. 색·정렬·줄바꿈만 맞춘다.
 */
.pub-root .pcm-tier__row{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:var(--s2) var(--s3);
  padding-block:var(--s2);}
/* 구간별 추가 프로모션. 할인액 아래 한 줄로 붙는다. */
.pub-root .pcm-tier__promo{display:block;margin-top:2px;
  font-size:var(--fs-caption);font-weight:var(--fw-sb);
  color:var(--pub-accent);white-space:normal;text-align:right;}
.pub-root .pcm-tier dt{flex:0 0 auto;
  font-size:var(--fs-caption);font-weight:var(--fw-sb);color:var(--pub-ink-2);}
.pub-root .pcm-tier dd{margin:0;font-size:var(--fs-label);font-weight:var(--fw-b);
  color:var(--pub-ink);font-variant-numeric:tabular-nums;white-space:nowrap;
  text-align:right;}

.pub-root .pcm-card__cond{margin:0;font-size:var(--fs-caption);
  color:var(--pub-ink-2);line-height:1.7;}

.pub-root .pcm-card__scope{margin:0;padding-left:var(--s4);
  font-size:var(--fs-caption);color:var(--pub-ink-3);line-height:1.7;}

.pub-root .pcm-card__note{margin:0;font-size:var(--fs-caption);
  color:var(--pub-ink-4);line-height:1.7;}

/*
 * 카드 신청 CTA (AFFILIATE-CARD-PUBLIC-UX-001).
 *
 * 목록 페이지(.pcd-card__apply)와 색 · 라운드 · 무게를 맞춘다.
 *   before  .btn--sm 기본형 — 흰 배경 · 테두리만
 *   after   accent 배경 · 흰 글자
 *
 * 같은 행동인데 한쪽은 눈에 띄고 한쪽은 묻혀 있었다.
 *
 * 높이는 목록(50px)보다 낮게 둔다.
 * 모달에는 카드가 여러 장 이어지므로 같은 높이면 화면을 다 먹는다.
 * --h-md 를 쓰면 체계 안에 있으면서 목록보다 한 단계 작다.
 * 글자 크기는 .btn--sm 이 정한 값을 그대로 둔다.
 */
.pub-root .pcm-card__cta{justify-self:start;
  height:var(--h-md);padding:0 var(--s5);
  background:var(--pub-accent);color:var(--pub-on-accent);
  box-shadow:none;font-weight:var(--fw-b);}
.pub-root .pcm-card__cta:hover{background:var(--pub-accent-press);
  color:var(--pub-on-accent);text-decoration:none;}

.pub-root .pcm__note{margin:0;padding-top:var(--s4);
  border-top:1px solid var(--pub-line);color:var(--pub-ink-4);line-height:1.7;}

/* 좁은 화면에서는 상자를 아래에서 올린다. 한 손으로 닫기 쉽다. */
@media (max-width:479px){
  .pub-root .pcm{align-items:flex-end;padding:0;}
  .pub-root .pcm__box{max-width:none;max-height:88vh;
    border-radius:var(--r2) var(--r2) 0 0;}
  .pub-root .pcm__body{padding:var(--s4);}
}

/*
 * 좁은 폭에서 두 줄로 접힐 때 (모달 · AFFILIATE-CARD-PUBLIC-UX-001).
 *
 * 한 줄일 때는 조건 왼쪽 · 금액 오른쪽이 읽기 좋다.
 * 두 줄이 되면 금액만 오른쪽에 떠 조건과 선이 어긋난다.
 * 접힌 줄에서는 금액도 왼쪽에 맞춘다.
 *
 * 480px 은 조건과 금액이 한 줄에 들어가지 못하기 시작하는 폭이다.
 */
@media (max-width:479px){
  .pub-root .pcm-tier dt,
  .pub-root .pcm-tier dd{flex:1 1 100%;text-align:left;}
  .pub-root .pcm-tier__promo{text-align:left;}
}