/* 컨테이너 폭 축소 */
.pick-wrap{max-width:1120px;margin:0 auto;padding:12px 16px}
.pick-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0 14px}

/* 6열 기본 + 반응형(갭 축소) */
.grid{
  display:grid;gap:12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
@media (max-width:1200px){ .grid{grid-template-columns: repeat(5, 1fr);} }
@media (max-width:1024px){ .grid{grid-template-columns: repeat(4, 1fr);} }
@media (max-width:860px){  .grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width:640px){  .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width:420px){  .grid{grid-template-columns: 1fr;} }

/* 카드/썸네일: 과하지 않게 정사각형 */
.card{
  border:1px solid #eee;border-radius:12px;overflow:hidden;background:#fff;
  transition:transform .15s ease, box-shadow .15s ease;cursor:pointer;
}
.card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.thumb{
  position:relative;width:100%;aspect-ratio:1/1; /* 정사각형로 고정 */
  background:#f3f6fb;display:flex;align-items:center;justify-content:center
}
.thumb img{width:100%;height:100%;object-fit:cover}
.meta{padding:10px 12px 12px}
.name{font-weight:700}
.name small{font-weight:500;color:#666;margin-left:.25rem}
.status{margin-top:6px}
.chip{display:inline-block;padding:.22rem .5rem;border-radius:999px;font-size:.8rem;line-height:1;border:1px solid rgba(0,0,0,.08)}
.-open{background:#f6ffed;border-color:#b7eb8f;color:#237804}
.-full{background:#fffbe6;border-color:#ffe58f;color:#ad8b00}
.-closed{background:#fff1f0;border-color:#ffa39e;color:#a8071a}


/* === Booth Pick: 카드/썸네일 공통 === */
.pick-wrap .grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.pick-wrap .card{
  border: 1px solid #e7e7e7;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .15s ease, transform .05s ease;
}
.pick-wrap .card:focus,
.pick-wrap .card:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 핵심: 썸네일 박스의 가로폭(부모 카드의 가로)을 기준으로 높이를 비율로 고정 */
.pick-wrap .card .thumb{
  /* 원하는 비율: 가로 리사이징 중심. 16:9가 무난 */
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #f6f6f8;
  display: flex;
  align-items: center;  /* 세로 가운데 정렬 */
  justify-content: center; /* 가로 가운데 정렬 */
  overflow: hidden;
}

/* 핵심: 이미지가 박스 안에서 가로를 맞추고 비율 유지를 하도록 */
.pick-wrap .card .thumb img{
  width: 100%;     /* 가로 꽉 채우기 */
  height: 100%;    /* 부모 높이에 맞추되 */
  object-fit: contain; /* 비율 유지 + 잘림 방지(여백 허용) */
  image-rendering: auto;
  display: block;
}

/* 텍스트 영역 */
.pick-wrap .card .meta{
  padding: 12px 14px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.pick-wrap .card .name{
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  color: #222;
  min-height: 1.4em;
  word-break: keep-all;
}

/* 상태칩 예시(기존 클래스 유지) */
.pick-wrap .chip{
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}
.pick-wrap .chip.-open{   background:#e9f7ef; color:#198754; }
.pick-wrap .chip.-full{   background:#fff3cd; color:#b58100; }
.pick-wrap .chip.-closed{ background:#f8d7da; color:#b02a37; }

/* 반응형 약간 보강 */
@media (max-width: 420px){
  .pick-wrap .grid{ gap: 12px; }
  .pick-wrap .card .meta{ padding: 10px 12px 12px; }
  .pick-wrap .card .name{ font-size: 14px; }
}
/* 로고 영역 배경 흰색으로 */
.pick-wrap .card .thumb{
  background: #fff !important;
}
.pick-wrap .card,
.jf-apply-boothlist .card{
  border-color: #eee;
}

:root { --hongik-blue:#004EA2; }
.pick-wrap .card{position:relative}
.badge-hongdaesenbae{
  position:absolute; top:.5rem; right:.5rem; z-index:2;
  background:var(--hongik-blue); color:#fff;
  border-radius:999px; padding:.25rem .6rem;
  font-size:.72rem; font-weight:800; letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
  display:flex; align-items:center; gap:.35rem;
}
/*.badge-hongdaesenbae .dot{width:.5rem;height:.5rem;border-radius:50%;background:#fff;opacity:.9}*/


/* 메타를 2열로: 왼쪽 이름 / 오른쪽 배지, 다음 줄에 상태칩 */
.pick-wrap .card .meta{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-auto-rows: min-content;
  column-gap: 8px;
  row-gap: 6px;
  padding: 10px 12px 12px;
  align-items: center;
}
.pick-wrap .card .name{ grid-column:1/2; font-weight:700; }
.pick-wrap .card .status{ grid-column:1/-1; }

/* ✅ 배지: 흐름에 포함(이미지 절대 비가림) */
:root{ --hongik-blue:#004EA2; }
.badge-hongdaesenbae{
  position: static !important;
  right:auto !important; top:auto !important; transform:none !important;

  grid-column:2/3; justify-self:end;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.42rem .8rem;
  border-radius:.65rem;
  background:var(--hongik-blue);
  color:#fff; font-weight:800; font-size:.95rem; letter-spacing:.01em;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  white-space:nowrap;
}
.badge-hongdaesenbae .dot{
  width:.72rem; height:.72rem; border-radius:50%;
  background:#fff; opacity:.95; flex:0 0 auto;
}

/* 좁은 화면에서 살짝 축소 */
@media (max-width:380px){
  .badge-hongdaesenbae{ padding:.35rem .6rem; font-size:.9rem; }
  .badge-hongdaesenbae .dot{ width:.62rem; height:.62rem; }
}

/* Grid */
.pick-wrap .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.pick-wrap .loading,
.pick-wrap .error,
.pick-wrap .empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: #666;
  font-size: 0.95rem;
}

/* Card */
.pick-card {
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .06s ease;
  outline: none;
}
.pick-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); }
.pick-card:focus { box-shadow: 0 0 0 3px rgba(33,150,243,.25); }
.pick-card[aria-disabled="true"] { opacity:.7; cursor:not-allowed; }

/* Thumbnail: 이미지 비율/크기 변경 금지 */
.pick-card .thumb {
  background: #f6f8fb;
  display: grid;
  place-items: center;
}
.pick-card .thumb img {
  width: 100%;
  height: auto;        /* ← 세로 비율 유지 */
  object-fit: contain; /* 로고 왜곡 방지, 크기 변경 없음 */
}

/* 상태는 이미지 아래, 제목과 분리된 한 줄 */
.pick-card .status-row {
  padding: 8px 12px 0;
}

/* Chip */
.chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid transparent;
}
.chip.-open   { background:#e9f7ee; color:#15803d; border-color:#bbf7d0; }
.chip.-full   { background:#fde8e8; color:#b91c1c; border-color:#fecaca; }
.chip.-closed { background:#eef2f7; color:#64748b; border-color:#e2e8f0; }

/* Meta / Title */
.pick-card .meta { padding: 10px 12px 14px; }
.pick-card .name{
  font-size: 15px;
  font-weight: 700;
  color:#111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;          /* 2줄 높이 확보 → 카드 높이 균일 */
  word-break: keep-all;       /* 한국어 어색한 줄바꿈 방지 */
}
.pick-card .sub .type-badge{
  display:inline-block;
  margin-top:6px;
  font-size:12px;
  color:#475569;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:3px 8px;
}


/* 카드 배경을 확실히 흰색으로 */
.booth-card,
.pick-card {
  background: #fff;           /* 카드 배경 흰색 */
  border: 1px solid #e9edf2;
  border-radius: 12px;
}

/* 로고 영역: 일정 높이로 세로 맞춤(로고 비율 유지) */
.booth-card .thumb,
.pick-card .thumb {
  background: #fff;           /* 로고 배경도 흰색 */
  height: 140px;              /* ★ 세로 고정: 로고가 들쭉날쭉하지 않게 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;              /* 로고가 가장자리 붙지 않게 여백 */
  border-bottom: 1px solid #f1f5f9;  /* 로고 영역과 본문 구분선 */
  box-sizing: border-box;
}

/* 로고 이미지: 비율 유지 + 컨테이너 안에서만 최대화 (흰 배경 위에서 경계 보이도록 옅은 테두리) */
.booth-card .thumb img,
.pick-card .thumb img {
  max-width: 92%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;        /* 왜곡/크롭 없음 */
  background: #fff;           /* 이미지 자체 배경도 흰색 */
  border: 1px solid #EEF2F7;  /* 흰배경 위에서 로고 경계가 보이도록 아주 옅게 */
  border-radius: 8px;
}

/* 상태 행(이미지 아래), 제목과는 분리 */
.booth-card .status-row,
.pick-card .status-row {
  padding: 10px 12px 0;
}

/* 제목은 최대 2줄 말줄임 */
.booth-card .meta,
.pick-card .meta {
  padding: 10px 12px 14px;
}
.booth-card .name,
.pick-card .name {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;      /* 최대 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;          /* 두 줄 높이 확보 → 카드 높이 균일 */
  word-break: keep-all;       /* 한국어 어색한 줄바꿈 방지 */
}

/* 칩 컬러 (그대로 유지) */
.chip.-open   { background:#e9f7ee; color:#15803d; border-color:#bbf7d0; }
.chip.-full   { background:#fde8e8; color:#b91c1c; border-color:#fecaca; }
.chip.-closed { background:#eef2f7; color:#64748b; border-color:#e2e8f0; }

/* 반응형: 모바일에서 로고 영역 살짝 낮춤 */
@media (max-width: 480px) {
  .booth-card .thumb,
  .pick-card .thumb {
    height: 120px;            /* 모바일에서 약간 더 낮게 */
  }
}


/* --- 카드: 모서리 둥글게는 유지하되, 내부 클리핑은 금지 --- */
.booth-card,
.pick-card {
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 12px;
  /* overflow: hidden;  ← 이거 제거! */
  overflow: visible; /* 로고 모서리 잘림 방지 */
}

/* --- 로고 컨테이너: 정사각 & 여백 최소화 --- */
.booth-card .thumb,
.pick-card .thumb {
  background: #fff;
  /* 높이 고정 대신 정사각 비율로 꽉 채우기 */
  aspect-ratio: 1 / 1;
  /* 여백 최소화 (필요 시 4~8px로만 조정) */
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 구분선이 거슬리면 제거 가능 */
  border-bottom: 1px solid #f1f5f9;
  box-sizing: border-box;
}

/* --- 로고 이미지: 왜곡 없이 최대 채우기 + 모서리/테두리 없음 --- */
.booth-card .thumb img,
.pick-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* 크롭 없이 컨테이너 최대 채움 */
  display: block;
  /* 모서리/테두리로 로고가 가려지는 문제 제거 */
  border: 0;
  border-radius: 0;
  background: transparent;
  /* 과거에 넣었던 옅은 테두리/그림자 등 제거 */
  box-shadow: none;
}

/* --- 상태 줄: 이미지 아래(제목과 분리) 그대로 유지 --- */
.booth-card .status-row,
.pick-card .status-row {
  padding: 8px 12px 0;
}

/* --- 제목: 최대 2줄 말줄임 유지 --- */
.booth-card .meta, .pick-card .meta { padding: 10px 12px 14px; }
.booth-card .name, .pick-card .name {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  word-break: keep-all;
}

/* 모바일에서 로고 컨테이너 여백 더 줄이고 싶으면 */
@media (max-width: 480px) {
  .booth-card .thumb,
  .pick-card .thumb {
    padding: 4px; /* 더 타이트하게 */
  }
}


/* --- FIX: Pick 페이지 카드 상단 좌/우 라운드 복구 --- */
.pick-wrap .grid > .card,
.pick-wrap .grid > .pick-card {
  border-radius: 12px !important;
  overflow: hidden !important;   /* 둥근 모서리대로 내부를 잘라줌 */
  background: #fff;
  border: 1px solid #e9edf2;
  position: relative;
}

/* 썸네일 상단과 라운드 자연스럽게 이어지게 */
.pick-wrap .grid > .card .thumb,
.pick-wrap .grid > .pick-card .thumb {
  background: #fff;
  /* 원하는 비율 유지: 16:9 그대로 쓰시거나 1/1 사용 중이면 그 값 유지 */
  aspect-ratio: 16 / 9;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;                 /* 이미지가 모서리에 닿지 않게 최소 패딩 */
  box-sizing: border-box;
}

/* 로고 이미지는 왜곡 없이 꽉 차게(모서리 가림 없음) */
.pick-wrap .grid > .card .thumb img,
.pick-wrap .grid > .pick-card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
}