/**
 * assets/css/pages/profile-card.css
 * 공개 프로필 명함 액션 — 연락처 + 공유/복사/vCard/QR.
 * profile-single.css 토큰을 재사용한다.
 */

.profile-card-actions {
  margin-top: 18px;
}

.profile-card-actions__wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: var(--profile-surface, #fff);
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  border-radius: 18px;
}

/* ── Contact 리스트 ──────────────────────────────────────────────── */

.profile-card-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profile-card-contact__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.profile-card-contact__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary, #1a5fb4);
}

.profile-card-contact__heading {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
}

.profile-card-contact__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-card-contact__item {
  margin: 0;
}

.profile-card-contact__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--profile-surface-soft, #f5f9ff);
  border: 1px solid transparent;
  color: #0f172a;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

a.profile-card-contact__link:hover {
  background: #eef4ff;
  border-color: var(--profile-border-strong, #d5e2f3);
}

.profile-card-contact__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  position: relative;
  display: inline-block;
}

.profile-card-contact__icon::before {
  content: "";
  position: absolute;
  inset: 6px;
  background-color: var(--primary, #1a5fb4);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

.profile-card-contact__icon[data-icon="phone"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z'/></svg>");
}
.profile-card-contact__icon[data-icon="mail"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'/><polyline points='22,6 12,13 2,6'/></svg>");
}
.profile-card-contact__icon[data-icon="kakao"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.48 3 2 6.58 2 11c0 2.86 1.9 5.36 4.74 6.78-.21.74-.76 2.7-.87 3.13 0 0-.02.15.08.21.1.06.22.01.22.01.3-.04 3.49-2.3 4.04-2.69.59.08 1.18.13 1.79.13 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 3C6.48 3 2 6.58 2 11c0 2.86 1.9 5.36 4.74 6.78-.21.74-.76 2.7-.87 3.13 0 0-.02.15.08.21.1.06.22.01.22.01.3-.04 3.49-2.3 4.04-2.69.59.08 1.18.13 1.79.13 5.52 0 10-3.58 10-8s-4.48-8-10-8z'/></svg>");
}
.profile-card-contact__icon[data-icon="calendar"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}
.profile-card-contact__icon[data-icon="globe"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
}
.profile-card-contact__icon[data-icon="youtube"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M23 7s-.2-1.6-.8-2.3c-.8-.9-1.7-.9-2.1-1C16.7 3.5 12 3.5 12 3.5s-4.7 0-8.1.2c-.4.1-1.3.1-2.1 1C1.2 5.4 1 7 1 7S.8 8.9.8 10.7v1.6C.8 14.1 1 16 1 16s.2 1.6.8 2.3c.8.9 1.9.9 2.4 1 1.7.1 8.1.2 8.1.2s4.7 0 8.1-.2c.4-.1 1.3-.1 2.1-1 .6-.7.8-2.3.8-2.3s.2-1.9.2-3.7v-1.6C23.2 8.9 23 7 23 7zM9.7 14.5V8l6.3 3.3-6.3 3.2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M23 7s-.2-1.6-.8-2.3c-.8-.9-1.7-.9-2.1-1C16.7 3.5 12 3.5 12 3.5s-4.7 0-8.1.2c-.4.1-1.3.1-2.1 1C1.2 5.4 1 7 1 7S.8 8.9.8 10.7v1.6C.8 14.1 1 16 1 16s.2 1.6.8 2.3c.8.9 1.9.9 2.4 1 1.7.1 8.1.2 8.1.2s4.7 0 8.1-.2c.4-.1 1.3-.1 2.1-1 .6-.7.8-2.3.8-2.3s.2-1.9.2-3.7v-1.6C23.2 8.9 23 7 23 7zM9.7 14.5V8l6.3 3.3-6.3 3.2z'/></svg>");
}
.profile-card-contact__icon[data-icon="instagram"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='2' width='20' height='20' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' y1='6.5' x2='17.51' y2='6.5'/></svg>");
}
.profile-card-contact__icon[data-icon="linkedin"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z'/></svg>");
}
.profile-card-contact__icon[data-icon="rss"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11a9 9 0 0 1 9 9'/><path d='M4 4a16 16 0 0 1 16 16'/><circle cx='5' cy='19' r='1'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 11a9 9 0 0 1 9 9'/><path d='M4 4a16 16 0 0 1 16 16'/><circle cx='5' cy='19' r='1'/></svg>");
}

.profile-card-contact__item--kakao .profile-card-contact__icon::before {
  background-color: #3c1e1e;
}
.profile-card-contact__item--kakao .profile-card-contact__icon {
  background: #fee500;
  border-color: #fee500;
}

.profile-card-contact__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.profile-card-contact__label {
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.04em;
}

.profile-card-contact__value {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 액션 바 ─────────────────────────────────────────────────────── */

.profile-card-actions__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px dashed var(--profile-border-strong, #d5e2f3);
}

.profile-card-actions__wrap > .profile-card-actions__bar:first-child {
  border-top: 0;
  padding-top: 0;
}

.profile-card-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  color: #0f172a;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.profile-card-action:hover {
  background: var(--profile-surface-soft, #f5f9ff);
  border-color: var(--primary, #1a5fb4);
  color: var(--primary, #1a5fb4);
  transform: translateY(-1px);
}

.profile-card-action:focus-visible {
  outline: 2px solid var(--primary, #1a5fb4);
  outline-offset: 2px;
}

.profile-card-action--primary {
  background: var(--primary, #1a5fb4);
  border-color: var(--primary, #1a5fb4);
  color: #fff;
}

.profile-card-action--primary:hover {
  background: #1647a0;
  border-color: #1647a0;
  color: #fff;
}

.profile-card-action.is-active {
  background: var(--primary, #1a5fb4);
  border-color: var(--primary, #1a5fb4);
  color: #fff;
}

/* ── QR 패널 ─────────────────────────────────────────────────────── */

.profile-card-qr {
  margin-top: 4px;
  padding: 16px;
  background: var(--profile-surface-soft, #f5f9ff);
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  border-radius: 14px;
}

.profile-card-qr[hidden] {
  display: none !important;
}

.profile-card-qr__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.profile-card-qr__canvas {
  flex: 0 0 168px;
  width: 168px;
  height: 168px;
  background: #fff;
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-card-qr__canvas svg,
.profile-card-qr__canvas canvas,
.profile-card-qr__canvas img {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-card-qr__canvas.is-loading::before {
  content: "QR 생성 중";
  font-size: 12px;
  color: #64748b;
}

.profile-card-qr__canvas.is-error::before {
  content: "QR 생성 실패";
  font-size: 12px;
  color: #b91c1c;
}

.profile-card-qr__caption {
  flex: 1 1 220px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.profile-card-qr__title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #0f172a;
}

.profile-card-qr__desc {
  margin: 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.55;
}

.profile-card-qr__url {
  margin-top: 4px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--profile-border-strong, #d5e2f3);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #1f2937;
  word-break: break-all;
}

/* ── 모바일 ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .profile-card-actions__wrap {
    padding: 14px 14px;
    border-radius: 14px;
  }
  .profile-card-contact__list {
    grid-template-columns: 1fr;
  }
  .profile-card-action {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
  .profile-card-action--primary {
    flex: 1 1 100%;
    order: -1;
  }
  .profile-card-qr__canvas {
    flex: 0 0 144px;
    width: 144px;
    height: 144px;
  }
}