/* 친구 찾기 부품(T0-D D-2·D-3·D-4, TICKET-625, PRD-047/AC-4) — doc/design/board/screens/p2-FriendRow-g6ic.html·T0D-친구찾기부품.html의
   스타일을 그대로 옮기고 값만 board-tokens.css 변수로 바꿨다. 클래스 접두사: friend-filter · purpose-chip · friend-grid · friend-tile.
   D-5 친구 카드(팝업)는 TICKET-626(AC-13)이 아래에 더했다. D-6 네임카드·D-7 목적 선택·F3 등록 화면은 TICKET-627(AC-5)이 맨 아래에 더했다. 뒤 티켓(AC-7)이 D-8을 더한다. */

/* D-2 칩 필터 5칸 — 한 줄 균등, 하나만 선택(링크라 주소가 상태다) */
.friend-filter { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--board-friend-filter-gap); flex-shrink: 0; }
.friend-filter__chip {
  box-sizing: border-box; /* 정본은 <button>(기본 border-box) — 링크로 바꿔도 높이 36이 그대로 */
  height: var(--board-friend-filter-h);
  border-radius: var(--board-friend-filter-radius);
  border: 1px solid var(--board-surface-border);
  background: transparent;
  color: var(--board-text-soft);
  font-family: 'Gothic A1', sans-serif;
  font-size: 12px;
  font-weight: 800;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--board-friend-chip-gap);
  white-space: nowrap;
  text-decoration: none;
}
.friend-filter__emoji { font-size: 12px; line-height: 1; }
.friend-filter__chip.is-on { border-color: var(--board-accent); background: var(--board-accent-tint); color: var(--board-accent); }
/* `body.board-body a`(링크색)보다 세게 */
body.board-body a.friend-filter__chip, body.board-body a.friend-filter__chip:hover { color: var(--board-text-soft); }
body.board-body a.friend-filter__chip.is-on, body.board-body a.friend-filter__chip.is-on:hover { color: var(--board-accent); }

/* D-3 목적 칩 — 작은 칩(타일용, 이모지 없음)·이모지 칩(카드용). 색은 목적별 토큰 */
.purpose-chip { font-weight: 800; white-space: nowrap; }
.purpose-chip--sm { font-size: 9px; border-radius: var(--board-friend-chip-radius); padding: var(--board-friend-chip-pad); line-height: 15px; }
.purpose-chip--emoji { font-size: 10px; border-radius: var(--board-friend-chip-emoji-radius); padding: var(--board-friend-chip-emoji-pad); }
.purpose-chip--gift { color: var(--board-purpose-gift); background: var(--board-purpose-gift-bg); }
.purpose-chip--raid { color: var(--board-purpose-raid); background: var(--board-purpose-raid-bg); }
.purpose-chip--trade { color: var(--board-purpose-trade); background: var(--board-purpose-trade-bg); }
.purpose-chip--friend { color: var(--board-purpose-friend); background: var(--board-purpose-friend-bg); }

/* D-4 친구 타일 — 2열 그리드, 타일 = 칩(최대 4) → 한마디(두 줄 말줄임) → 팀 색 점 + 이름 + 시각 */
.friend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: var(--board-friend-tile-h);
  gap: var(--board-friend-grid-gap);
  margin-top: var(--board-friend-grid-top);
}
.friend-tile {
  box-sizing: border-box;
  background: var(--board-surface);
  border: 1px solid var(--board-surface-border);
  border-radius: var(--board-friend-tile-radius);
  padding: var(--board-friend-tile-pad);
  min-width: 0;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  overflow: hidden;
}
.friend-tile__chips { display: flex; align-items: center; gap: var(--board-friend-chip-gap); overflow: hidden; }
.friend-tile__say {
  margin-top: var(--board-friend-tile-gap);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  height: var(--board-friend-say-h);
  color: var(--board-text-soft);
  word-break: keep-all;
}
.friend-tile__foot { margin-top: auto; display: flex; align-items: center; gap: var(--board-friend-foot-gap); }
.friend-tile__dot.board-team-dot { width: var(--board-friend-dot); height: var(--board-friend-dot); }
.friend-tile__name { flex: 1; min-width: 0; font-size: 11px; color: var(--board-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-tile__time { font-size: 11px; color: var(--board-footer-text); font-family: 'Chakra Petch', sans-serif; font-weight: 600; white-space: nowrap; }

/* 무한 스크롤 감시 요소 — 보이면 다음 장을 불러온다(forum-friends.js). 높이만 있고 눈에 보이지 않는다. */
.friend-sentinel { height: 1px; flex-shrink: 0; }

/* D-5 친구 카드(팝업) — 정본 p2-FriendRow-g6ic-7lsd-glow{,-mystic,-valor,-none}.html. 타일을 누르면 forum-friends.js가
   값을 채워 연다. 팀 변형은 `.friend-card--{yellow|blue|red|none}` 하나가 정한다(--friend-tone·반짝임 세기).
   a9ab(TICKET-630)부터 카드 모양은 SVG 외곽선 한 장이다(아래 .friend-card__shape). */
.friend-card-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--board-friend-card-z);
  background: var(--board-scrim);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-user-select: none;
  user-select: none;
}
.friend-card-overlay[hidden] { display: none; }
/* 위 여백 : 아래 여백 = 2 : 1 (정본 390×664에서 120 : 60) — 화면 높이가 달라도 같은 비율로 가운데 근처에 둔다 */
.friend-card-overlay::before { content: ""; flex: 2 1 0; }
.friend-card-overlay::after { content: ""; flex: 1 1 0; }
.friend-card-overlay__group { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: var(--board-friend-card-close-gap); }

.friend-card {
  --friend-tone: var(--board-team-none);
  --friend-glow-lo: var(--board-friend-glow-none-lo);
  --friend-glow-hi: var(--board-friend-glow-none-hi);
  --friend-glow-still: var(--board-friend-glow-none-still);
  position: relative;
  box-sizing: border-box;
  width: var(--board-friend-card-w);
  height: var(--board-friend-card-h);
  color: var(--board-text);
}
.friend-card--yellow, .friend-card--blue, .friend-card--red {
  --friend-glow-lo: var(--board-friend-glow-lo);
  --friend-glow-hi: var(--board-friend-glow-hi);
  --friend-glow-still: var(--board-friend-glow-still);
}
.friend-card--yellow { --friend-tone: var(--board-team-yellow); }
.friend-card--blue { --friend-tone: var(--board-team-blue); }
.friend-card--red { --friend-tone: var(--board-team-red); }
.friend-card--none { --friend-tone: var(--board-team-none); }

/* 카드 모양(계약 §37-7-1·D-5, TICKET-630) — 바탕·테두리는 골격 안 SVG의 외곽선(`#friend-card-outline`, 노치를 판 path 한 개)이 그리고,
   내용(.friend-card__body)은 같은 외곽선(`#friend-card-clip`)으로 자른다. 반짝임은 SVG에 건 `drop-shadow`라 노치 모양을 따라간다. */
.friend-card__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: friendCardGlow var(--board-friend-card-glow-ms) ease-in-out infinite;
}
.friend-card__shape-fill {
  fill: var(--board-sheet-inner);
  stroke: var(--board-surface-border);
  stroke-width: var(--board-friend-card-border-w);
}
.friend-card__body {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: var(--board-friend-card-pad);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  clip-path: url(#friend-card-clip);
}
@keyframes friendCardGlow {
  0%, 100% { filter: drop-shadow(0 0 var(--board-friend-card-glow-lo-r) color-mix(in srgb, var(--friend-tone) var(--friend-glow-lo), transparent)) drop-shadow(var(--board-friend-card-drop)); }
  50% { filter: drop-shadow(0 0 var(--board-friend-card-glow-hi-r) color-mix(in srgb, var(--friend-tone) var(--friend-glow-hi), transparent)) drop-shadow(var(--board-friend-card-drop)); }
}
@media (prefers-reduced-motion: reduce) {
  .friend-card__shape {
    animation: none;
    filter: drop-shadow(0 0 var(--board-friend-card-glow-still-r) color-mix(in srgb, var(--friend-tone) var(--friend-glow-still), transparent)) drop-shadow(var(--board-friend-card-drop));
  }
}
.friend-card:focus { outline: none; }

.friend-card__mark {
  position: absolute;
  right: var(--board-friend-card-mark-off);
  bottom: var(--board-friend-card-mark-off);
  width: var(--board-friend-card-mark-size);
  height: var(--board-friend-card-mark-size);
  opacity: var(--board-friend-card-mark-opacity);
  pointer-events: none;
}
.friend-card__mark-ring { fill: none; stroke: var(--board-text); }
.friend-card__mark-dot { fill: var(--board-text); }

.friend-card__chips { display: flex; align-items: center; gap: var(--board-friend-card-head-gap); }
.friend-card__head { position: relative; display: flex; align-items: center; gap: var(--board-friend-card-head-gap); height: var(--board-friend-card-head-h); }
.friend-card__time { display: block; margin-top: var(--board-friend-card-time-top); text-align: right; font-family: 'Chakra Petch', sans-serif; font-size: 11px; color: var(--board-footer-text); white-space: nowrap; }

.friend-card__who { position: relative; display: flex; align-items: center; gap: var(--board-friend-card-who-gap); margin-top: var(--board-friend-card-who-top); }
.friend-card__initial {
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--board-friend-card-initial-size);
  height: var(--board-friend-card-initial-size);
  border-radius: 50%;
  border: var(--board-friend-card-initial-ring) solid var(--friend-tone);
  background: var(--board-divider);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 28px; line-height: 1;
  color: var(--board-text);
  box-shadow: 0 0 0 var(--board-friend-card-initial-ring) color-mix(in srgb, var(--friend-tone) var(--board-friend-card-initial-ring-pct), transparent);
}
.friend-card__who-text { min-width: 0; display: flex; flex-direction: column; gap: var(--board-friend-card-name-gap); }
.friend-card__name { font-size: 19px; font-weight: 800; color: var(--board-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend-card__team { font-size: 11px; color: var(--board-text-dim); }

/* 점선은 노치 사이에만 — 카드 안쪽 패딩에서 양쪽 10씩 바깥까지(정본 margin: 18px -10px 0). 채운 반원은 없다(노치는 외곽선이 판다). */
.friend-card__rule {
  position: relative;
  margin: var(--board-friend-card-rule-top) calc(-1 * var(--board-friend-card-rule-bleed)) 0;
  height: 0;
  border-top: var(--board-friend-card-rule-w) dashed var(--board-surface-border);
}

.friend-card__say {
  position: relative;
  margin-top: var(--board-friend-card-say-top);
  flex: 1;
  min-height: 0;
  overflow: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--board-text-soft);
  word-break: keep-all;
}

/* 코드 상자 — 복사 동작·눌림 효과·토스트는 공통 `.board-copy-area`(board-common.js) 그대로 */
.friend-card__code {
  position: relative;
  margin-top: var(--board-friend-card-code-top);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  padding: var(--board-friend-card-code-pad);
  border-radius: var(--board-friend-card-code-radius);
  background: var(--board-bg);
  border: none;
  text-align: left;
  color: var(--board-text);
  font-family: 'Gothic A1', sans-serif;
}
.friend-card__code-text { display: flex; flex-direction: column; gap: var(--board-friend-card-code-gap); }
.friend-card__code-label { font-size: 10px; font-weight: 800; color: var(--board-text-faint); letter-spacing: .5px; }
.friend-card__code-value { font-family: 'Chakra Petch', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 1px; }
/* 공통 복사 아이콘(copy_icon) — 정본은 18 · 하늘색, 공통 부품 상자(36)는 줄 높이를 키우므로 아이콘 크기만 정본에 맞춘다 */
.friend-card__code .board-copy-icon { width: auto; height: auto; margin: 0; color: var(--board-accent); }
.friend-card__code .board-copy-icon svg { width: 18px; height: 18px; }

.friend-card__hint { position: relative; margin: var(--board-friend-card-hint-top) 0 0; flex-shrink: 0; text-align: center; font-size: 11px; color: var(--board-text-faint); }

.friend-card__close {
  width: var(--board-friend-card-close-size);
  height: var(--board-friend-card-close-size);
  box-sizing: border-box;
  border-radius: 50%;
  border: 1px solid var(--board-surface-border);
  background: var(--board-surface);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  cursor: pointer;
}
.friend-card__close svg { stroke: var(--board-text-dim); }


/* D-8 내 카드(F4, TICKET-631, PRD-047/AC-7) — 정본 p2-FriendMine.html. 같은 카드 골격을 위 80(남의 카드는 120)에 두고,
   카드 아래 바깥에 버튼 줄(폭 = 카드 폭 · 높이 44 · 모서리 12 · 두 칸 사이 8) → 닫기 동그라미(사이 12). 버튼 줄이 없으면(운영자 숨김 글) 닫기 간격은 남의 카드와 같다. */
.friend-card-overlay--mine::before { flex: 0 0 var(--board-friend-card-mine-top); }
.friend-card-overlay--mine::after { flex: 1 1 0; }
.friend-card-overlay--actions .friend-card-overlay__group { gap: var(--board-friend-actions-gap); }
.friend-card-actions { position: relative; /* 카드의 drop-shadow(필터 쌓임 맥락)가 버튼 위에 얹히지 않게 — 정본은 버튼이 평평한 색 */ display: flex; flex-direction: column; gap: var(--board-friend-actions-wait-gap); width: var(--board-friend-card-w); }
.friend-card-actions__row { display: flex; gap: var(--board-friend-actions-btn-gap); }
.friend-card-actions__wait { margin: 0 0 var(--board-friend-actions-wait-after); text-align: center; font-size: 11px; color: var(--board-text-faint); } /* 대기 안내(p2-FriendMineWait) — 버튼 줄 아래 8, 안내 아래 X까지 14(그룹 간격 12 + 2) */
.friend-card-actions__wait[hidden] { display: none; }
.friend-card-actions .btn:disabled { opacity: var(--board-friend-actions-disabled-opacity); } /* 대기 중 [끌어올리기] — 정본 .38 */
.friend-card-actions[hidden] { display: none; }
.friend-dialog-root .board-dialog-overlay { z-index: var(--board-friend-dialog-z); } /* 삭제 확인(AC-10) — 공통 다이얼로그를 내 카드 팝업(30) 위로. 모양은 공통 .board-dialog* 그대로 */
.friend-card-actions .btn { flex: 1; min-width: 0; width: auto; padding: 0; height: var(--board-friend-actions-h); border-radius: var(--board-friend-actions-radius); font-size: 14px; }
.friend-card-actions .btn.x { color: var(--board-rule); } /* [삭제] 코랄 글자 — .btn.x(0,2,0)보다 세게 */

/* F3 내 카드 등록(TICKET-627, PRD-047/AC-5) — doc/design/board/screens/p2-FriendWrite.html. 값은 board-tokens.css 토큰. */
.friend-write__title { margin-top: var(--board-friend-write-title-top); font-size: var(--board-friend-write-title-size); }

/* D-6 트레이너 네임카드(읽기 전용) — 이니셜 원 테두리 색은 팀 수식 클래스 하나가 정한다 */
.trainer-namecard {
  --friend-tone: var(--board-team-none);
  box-sizing: border-box;
  height: var(--board-friend-namecard-h);
  margin-top: var(--board-friend-write-card-top);
  border-radius: var(--board-friend-namecard-radius);
  background: var(--board-card-bg);
  border: 1px solid var(--board-surface-border);
  padding: var(--board-friend-namecard-pad);
  display: flex;
  align-items: center;
  gap: var(--board-friend-namecard-gap);
  flex-shrink: 0;
}
.trainer-namecard--yellow { --friend-tone: var(--board-team-yellow); }
.trainer-namecard--blue { --friend-tone: var(--board-team-blue); }
.trainer-namecard--red { --friend-tone: var(--board-team-red); }
.trainer-namecard__initial {
  flex-shrink: 0;
  box-sizing: content-box; /* 정본: 지름 56 + 테두리 3×2 = 62 */
  width: var(--board-friend-namecard-initial);
  height: var(--board-friend-namecard-initial);
  border-radius: 50%;
  border: var(--board-friend-namecard-ring) solid var(--friend-tone);
  background: var(--board-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--friend-tone);
}
.trainer-namecard__text { flex: 1; min-width: 0; }
.trainer-namecard__name { display: block; font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trainer-namecard__code { display: block; font-family: 'Chakra Petch', sans-serif; font-size: 16px; color: var(--board-text-soft); letter-spacing: 1px; margin-top: var(--board-friend-namecard-row-gap); min-height: 1em; }
.trainer-namecard__team { display: block; font-size: 12px; color: var(--board-text-faint); margin-top: var(--board-friend-namecard-row-gap); }
.trainer-namecard__edit { flex-shrink: 0; border: none; background: none; padding: 0; font-family: inherit; font-size: 13px; font-weight: 800; color: var(--board-accent); cursor: pointer; }

/* 목적 선택 제목 줄 */
.friend-write__section { margin-top: var(--board-friend-write-section-top); font-size: 14px; font-weight: 800; }
.friend-write__section-hint { font-size: 12px; font-weight: 600; color: var(--board-text-faint); }

/* D-7 목적 선택 2×2 — 안은 체크박스, 선택은 `.is-on`(forum-friend-write.js) */
.purpose-picker { display: grid; grid-template-columns: 1fr 1fr; gap: var(--board-friend-picker-gap); margin-top: var(--board-friend-write-picker-top); flex-shrink: 0; }
.purpose-picker__opt {
  display: block;
  border: 1px solid var(--board-surface-border);
  background: transparent;
  border-radius: var(--board-friend-picker-radius);
  padding: var(--board-friend-picker-pad);
  text-align: left;
  color: var(--board-text);
  cursor: pointer;
}
.purpose-picker__opt:focus-within { outline: 1px solid var(--board-accent); outline-offset: 1px; }
.purpose-picker__name { display: block; font-size: 14px; font-weight: 800; color: var(--board-text); }
.purpose-picker__desc { display: block; font-size: 11px; color: var(--board-text-faint); margin-top: var(--board-friend-picker-desc-top); }
.purpose-picker__opt.is-on { border-color: var(--board-accent); background: var(--board-accent-tint); }
.purpose-picker__opt.is-on .purpose-picker__name { color: var(--board-accent); }

/* 한마디 — 입력 칸은 G2의 `.field`를 그대로 쓰고, 라벨·글자 수 표시·정본 F3의 높이/모서리만 이 화면에서 더한다 */
.friend-write__say { margin-top: var(--board-friend-write-section-top); }
.friend-write__label { display: block; font-size: 12px; color: var(--board-text-faint); margin-bottom: var(--board-friend-write-label-gap); }
.friend-write__field { position: relative; }
.friend-write__input.field {
  margin-top: 0; /* board.css의 G2 제목 칸 위 여백 14px(.field.g2-title-field)을 이 화면에서는 걷는다 — 정본 F3은 라벨 바로 아래 */
  height: var(--board-friend-write-field-h);
  border-radius: var(--board-friend-write-field-radius);
  padding: 0 calc(var(--board-friend-write-field-pad) + var(--board-friend-write-count-room)) 0 var(--board-friend-write-field-pad); /* 오른쪽은 글자 수 표시(0/100) 자리 */
  font-size: 15px;
}
.friend-write__input.field::placeholder { color: var(--board-footer-text); }
.friend-write__count {
  position: absolute;
  top: 50%;
  right: var(--board-friend-write-count-right);
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--board-footer-text);
  font-family: 'Chakra Petch', sans-serif;
  pointer-events: none;
}
.friend-write__notice { font-size: 12px; color: var(--board-text-faint); text-align: center; margin-bottom: var(--board-friend-write-notice-gap); }
.friend-write__error { color: var(--board-error-text); text-align: center; padding: 0; }
.friend-write__error[hidden] { display: none; }
/* 하단 고지 — 정본 F3는 입력 칸 바로 아래에 흐름대로(위 18·아래 24) 놓인다. 공통 `.board-info-notice`의 "본문 맨 끝으로 밀기"를 이 화면에서만 푼다. */
.friend-write__say + .board-info-notice { margin-top: 0; padding: var(--board-friend-write-section-top) 0 var(--board-friend-write-foot-bottom); }