/* ============================================================
   디지털 명함 레이아웃
   색·크기·간격은 전부 tokens.css 변수만 쓴다. 수치 하드코딩 금지.

   기기 폭 기준
     344px  갤럭시 Z 폴드 외부 화면 — 가장 좁다. 여기서 안 깨지면 다 된다
     360px  갤럭시 S/A 다수
     375px  아이폰 SE·13 mini
     393px  아이폰 15·16
     412px  갤럭시 S24 울트라
     430px  아이폰 15·16 프로 맥스
   폭을 고정한 값은 쓰지 않는다. 전부 비율·유동 단위로 짠다.

   모서리를 둥근 pill 로 만들지 않는 이유: 홈페이지 디자인 규칙이
   "각진 형태 = 물류·해운의 신뢰감, pill(999px) 금지" 이기 때문이다.
   예외는 아이콘 하나만 들어가는 원형 버튼뿐이다.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  /* 삼성 인터넷·크롬 안드로이드의 강제 다크 모드가 브랜드 색을 뒤집지 않게 한다.
     HTML 의 <meta name="color-scheme"> 와 짝이다. */
  color-scheme: only light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* iOS 사파리에서 링크를 누를 때 뜨는 회색 사각형을 없앤다.
     이 페이지는 :active 로 직접 눌림 표시를 준다. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--color-bg-subtle);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-value);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  padding-bottom: calc(var(--tap-min) + var(--space-4) + env(safe-area-inset-bottom, 0px));
}

:where(a) { color: var(--color-link); }

:where(a, button):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.icon { width: 20px; height: 20px; flex: 0 0 auto; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.card {
  /* 폰에서는 화면 끝까지 채운다. --card-max(420px)를 여기서 걸면
     430px 인 아이폰 프로 맥스에서 양옆에 5px 짜리 배경 띠가 남아
     실수처럼 보인다. 폭 제한은 460px 이상에서만 건다. */
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg);
  min-height: 100vh;
  /* 100vh 는 iOS 주소창이 접힐 때 흔들린다. dvh 를 아는 브라우저는
     그쪽을 쓰고, 모르는 브라우저는 위 줄을 그대로 쓴다. */
  min-height: 100dvh;
}

@media (min-width: 460px) {
  .card {
    max-width: var(--card-max);
    min-height: 0;
    margin-block: var(--space-4);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-overlay);
  }
}

/* ------------------------------------------------------------
   헤더 — 네이비 띠. 프로필 원이 이 띠의 아래 경계에 걸친다.
   ------------------------------------------------------------ */
.card-head {
  /* 아래 ::after 물결을 이 띠의 바닥에 붙이기 위한 기준점.
     프로필 원은 자기 쪽에서 z-index 를 올려 두었으므로 이 position 이
     원을 다시 가리지 않는다. */
  position: relative;
  background: var(--color-bg-dark);
  background-image: var(--overlay-hero);
  padding: var(--space-3) var(--card-pad) var(--space-4);
  /* 홈 화면 앱으로 열면 상태 표시줄이 투명해져 헤더가 그 밑까지 올라간다.
     아이폰 노치·다이내믹 아일랜드 높이만큼 위 여백을 더해 로고가 가리지
     않게 한다. 브라우저에서는 이 값이 0 이라 아무 변화가 없다. */
  padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
}

/* 실물 명함 앞면의 물결 경계를 옮겨 왔다. 네이비 띠의 바닥을 흰 물결로
   파내 카드 본문과 이어지게 한다. 색은 실물의 하늘색이 아니라 홈페이지
   토큰(네이비)을 따른다 — 온라인에서는 홈페이지와 한 브랜드로 보여야 한다.
   fill 에 # 을 쓰면 data URI 가 깨지므로 색 이름(white)으로 적는다. */
.card-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 30' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C70 34 140 30 210 18 C280 6 340 4 400 12 L400 30 L0 30 Z' fill='white'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.card-head__bar {
  display: flex;
  /* 폰 글씨 크기를 크게 해 둔 사용자(삼성은 시스템 글씨 크기를 브라우저가
     따른다)는 회사명과 언어 버튼이 한 줄에 안 들어간다. 그때는 버튼이
     아랫줄로 내려가게 한다. 평소 크기에서는 한 줄 그대로다. */
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* 로고 락업 PNG 는 흰 바탕이 깔려 있어 네이비 띠 위에 얹을 수 없다.
   (invert 필터를 씌우면 흰 바탕이 검은 상자가 된다.)
   그래서 어두운 배경용으로 만들어진 흰 심볼 + 흰 글자 조합을 쓴다. */
.card-head__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  /* 줄바꿈을 허용한 줄에서는 브라우저가 글자를 줄여 보기 전에 옆 버튼부터
     아랫줄로 내린다. 그래서 320px 폰에서는 보통 글씨인데도 언어 버튼이
     떨어졌다. 기준 폭을 rem 으로 주면, 평소에는 회사명이 먼저 두 줄로 접히고
     글씨를 크게 키워 이 폭(10글자 남짓)조차 안 나올 때만 버튼이 내려간다. */
  flex: 1 1 10rem;
}

.card-head__symbol {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  object-fit: contain;
}

.card-head__org {
  margin: 0;
  min-width: 0;
  /* 글씨가 크면 "㈜아이픽코 / 리아" 처럼 회사명이 글자 중간에서 끊겼다.
     한글은 띄어쓰기 단위로만 줄을 바꾼다. */
  word-break: keep-all;
  font-size: var(--fs-company);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  letter-spacing: var(--ls-heading-ko);
  color: var(--color-text-invert);
}

.card-head__org-en {
  display: block;
  margin-top: 2px;
  font-family: var(--font-latin);
  font-size: var(--fs-badge);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  color: var(--teal-300);
}

/* 아이콘 하나만 들어가는 버튼이라 원형이다. 사각형이면 아이콘이
   상자에 갇힌 것처럼 보인다. */
.lang-toggle {
  display: inline-flex;
  /* 줄이 넘쳐 아랫줄로 내려가도 오른쪽에 붙어 있게 한다. */
  margin-left: auto;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 우리가 정한 최소 터치 크기(--tap-min 44px)를 헤더 버튼도 지킨다. */
  min-height: var(--tap-min);
  padding: 0 16px;
  border: var(--border-w) solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-invert);
  font-family: var(--font-latin);
  font-size: var(--fs-badge);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: var(--transition);
}

.lang-toggle:hover,
.lang-toggle:active { background: rgba(255, 255, 255, 0.2); }

.lang-toggle .icon { width: 16px; height: 16px; filter: invert(1); }

.card-head__tagline {
  margin: var(--space-3) 0 0;
  max-width: 30ch;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: rgba(255, 255, 255, 0.8);
  word-break: keep-all;
}

/* ------------------------------------------------------------
   프로필 — 사진 자리가 네이비 띠에 반쯤 걸친다
   ------------------------------------------------------------ */
/* 사진도 원형 자리도 두지 않는다. 네이비 띠(물결)가 끝나면 바로 이름이
   시작한다. 원을 비워 두면 오히려 "사진이 빠졌다"처럼 보이고, 로고를 넣으면
   헤더의 로고와 두 번 나온다. */
.profile {
  padding: var(--space-3) var(--card-pad);
}

.profile__id {
  min-width: 0;
}

.profile__name {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading-ko);
  /* 로고 워드마크가 네이비가 아니라 먹색이라 이름도 먹색으로 맞춘다. */
  color: var(--black-900);
  word-break: keep-all;
}

.profile__title {
  margin: 6px 0 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.profile__org {
  margin: 2px 0 0;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--color-heading);
  word-break: keep-all;
}

/* ------------------------------------------------------------
   빠른 실행 — 전화 / 문자 / 이메일 / 홈페이지
   ------------------------------------------------------------ */
.quick {
  display: grid;
  /* 칸의 최소 폭을 rem 으로 준다. 평소에는 가장 좁은 320px 폰에서도 4칸이고,
     폰 글씨를 크게 키우면 칸 수가 줄어 "홈페이 / 지" 처럼 라벨이 끊기지 않는다. */
  grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
  gap: 4px;
  padding: 0 var(--card-pad) var(--space-3);
  margin: 0;
  list-style: none;
}

.quick__link {
  word-break: keep-all;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: var(--space-1) 2px;
  color: var(--color-heading);
  text-decoration: none;
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  text-align: center;
}

.quick__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--teal-050);
  color: var(--teal-500);
  transition: var(--transition);
}

.quick__link:hover .quick__disc,
.quick__link:active .quick__disc { background: var(--teal-300); }

/* ------------------------------------------------------------
   정보 블록
   ------------------------------------------------------------ */
.block {
  padding: var(--space-3) var(--card-pad);
  border-top: var(--border);
}

.block__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-1);
  font-size: var(--fs-badge);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-badge);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 제목 옆 짧은 청록 선. 블록의 시작을 눈으로 잡아 준다. */
.block__title::before {
  content: "";
  width: 14px;
  height: 2px;
  background: var(--teal-500);
}

.block__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.block__list > li + li { border-top: var(--border); }

/* 행은 링크(a), 복사 버튼(button), 그냥 정보(div) 세 가지로 쓰인다.
   버튼일 때도 나머지와 똑같이 보여야 하므로 기본 스타일을 지운다. */
.row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-1) 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition: var(--transition);
}

button.row,
a.row { cursor: pointer; }

button.row:active,
a.row:active { background: var(--color-bg-subtle); }

.row__icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  opacity: 0.55;
}

.row__body {
  min-width: 0;
  flex: 1 1 auto;
}

.row__label {
  display: block;
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-text-muted);
}

.row__value {
  display: block;
  font-size: var(--fs-value);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  /* 긴 이메일·주소가 카드 폭을 밀어내지 않도록 */
  word-break: break-word;
  overflow-wrap: anywhere;
}

.row__value--sub {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}

/* 복사 가능한 행임을 알리는 오른쪽 끝 아이콘 */
.row__action {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  opacity: 0.32;
  transition: var(--transition);
}

button.row:active .row__action { opacity: 0.7; }

.block__text {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  word-break: keep-all;
}

.member {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 5px 10px;
  border: var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-latin);
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
}

.card-foot {
  padding: 0 var(--card-pad) var(--space-4);
  font-size: var(--fs-badge);
  color: var(--gray-600);
}

/* ------------------------------------------------------------
   하단 고정 액션바
   ------------------------------------------------------------ */
.actionbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-base);
  display: flex;
  gap: var(--space-1);
  /* 카드와 같은 규칙. 폰에서는 화면 끝까지, 460px 이상에서만 폭을 건다. */
  width: 100%;
  margin: 0 auto;
  padding: var(--space-1) var(--card-pad);
  /* 아이폰 홈 인디케이터 영역만큼 더 띄운다. */
  padding-bottom: calc(var(--space-1) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  border-top: var(--border);
  box-shadow: 0 -6px 20px rgba(10, 30, 60, 0.08);
}

@media (min-width: 460px) {
  .actionbar {
    max-width: var(--card-max);
    border-inline: var(--border);
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  border: var(--border-w) solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn--primary {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--color-bg-dark);
  color: var(--color-text-invert);
}

.btn--primary .icon { filter: invert(1); }
.btn--primary:hover,
.btn--primary:active { background: var(--navy-700); }

.btn--ghost {
  flex: 0 0 auto;
  width: var(--tap-min);
  padding: 0;
  background: var(--color-bg);
  border-color: var(--color-border);
  color: var(--color-heading);
}

.btn--ghost:hover,
.btn--ghost:active { border-color: var(--color-border-strong); }

/* ------------------------------------------------------------
   QR 모달
   ------------------------------------------------------------ */
.qr-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-modal);
  display: flex;
  /* 가로 모드처럼 화면 높이가 패널보다 낮으면 닫기 버튼이 화면 밖으로 잘린다.
     align-items:center 로 두면 넘친 위쪽은 스크롤로도 닿지 않으므로,
     정렬은 위에 두고 패널의 margin:auto 로 가운데를 잡는다. 공간이 남으면
     가운데, 모자라면 위에서부터 스크롤된다. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--card-pad);
  /* tokens.css 에 --overlay-solid 를 두지 않았으므로(홈페이지 전용) 직접 쓴다. */
  background: rgba(10, 30, 60, 0.82);
}

.qr-modal[hidden] { display: none; }

.qr-modal__panel {
  width: 100%;
  max-width: 320px;
  margin: auto;
  padding: var(--space-3);
  background: var(--white);
  border-radius: var(--radius);
  text-align: center;
}

.qr-modal__title {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-title);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
}

.qr-modal__desc {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* QR 은 확대·축소 시 눈금이 뭉개지면 인식률이 떨어진다. 보간을 끈다. */
.qr-modal__code {
  width: 100%;
  max-width: 236px;
  /* 가로 모드에서는 화면 높이의 42% 까지만. QR 은 작아져도 인식되지만
     닫기 버튼이 잘리면 모달을 빠져나갈 수 없다. */
  max-width: min(236px, 42vh);
  aspect-ratio: 1;
  margin: 0 auto;
  display: block;
  image-rendering: pixelated;
}

.qr-modal__url {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-latin);
  font-size: var(--fs-badge);
  color: var(--color-text-muted);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.qr-modal__close { width: 100%; }

/* ------------------------------------------------------------
   토스트 — 복사 피드백. 1.2초만 보인다.
   ------------------------------------------------------------ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tap-min) + var(--space-4) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - var(--space-4));
  padding: 10px var(--space-2);
  border-radius: var(--radius);
  background: var(--navy-900);
  color: var(--color-text-invert);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-overlay);
}

.toast[hidden] { display: none; }

.toast__icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  filter: invert(1);
}

/* ============================================================
   MOTION

   ⚠ 홈페이지 tokens.css 는 "transform 금지, color/border/background 만
     전환" 을 규칙으로 둔다. 그 규칙은 스크롤하며 읽는 긴 페이지에서
     움직임이 읽기를 방해하지 않게 하려는 것이다. 명함은 한 화면을
     건네는 물건이라 성격이 다르다고 보고, 아래 두 가지에 한해
     transform 을 쓴다.
       · 처음 열릴 때 한 번 지나가는 등장 동작
       · 눌렀을 때 즉시 돌아오는 반응
     계속 움직이는 것, 주의를 끌려고 반복하는 것은 넣지 않는다.

   움직임을 줄이도록 설정한 사용자에게는 이 절 전체가 적용되지 않는다.
   그 경우에도 화면은 완성된 모습으로 보인다 — 등장 동작의 끝 상태가
   기본값이고, 애니메이션은 그 앞에 잠깐 붙을 뿐이기 때문이다.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- 첫 진입: 위에서부터 차례로 자리를 잡는다 ----
     QR 을 찍고 들어온 사람이 보는 첫 0.5초다. 순서가 곧 읽는 순서가
     되도록 헤더 → 이름 → 실행 아이콘 → 정보 블록으로 늦춘다. */
  .card-head,
  .profile,
  .quick,
  .block,
  .card-foot {
    animation: rise-in 460ms var(--ease) both;
  }

  .card-head  { animation-delay: 0ms; }
  .profile    { animation-delay: 70ms; }
  .quick      { animation-delay: 140ms; }
  .block:nth-of-type(1) { animation-delay: 200ms; }
  .block:nth-of-type(2) { animation-delay: 250ms; }
  .block:nth-of-type(3) { animation-delay: 300ms; }
  .card-foot  { animation-delay: 340ms; }

  /* 실행 아이콘 4개는 하나씩 터지듯. 간격이 짧아야 경쾌하다. */
  .quick li { animation: pop-in 380ms var(--ease) both; }
  .quick li:nth-child(1) { animation-delay: 180ms; }
  .quick li:nth-child(2) { animation-delay: 230ms; }
  .quick li:nth-child(3) { animation-delay: 280ms; }
  .quick li:nth-child(4) { animation-delay: 330ms; }

  /* 하단 액션바는 아래에서 올라온다. */
  .actionbar { animation: bar-up 420ms var(--ease) 260ms both; }

  /* ---- 누름 반응 ---- */
  .quick__link:active .quick__disc { transform: scale(0.9); }
  .btn:active { transform: scale(0.97); }
  .lang-toggle:active { transform: scale(0.94); }

  .quick__disc,
  .btn,
  .lang-toggle {
    transition: var(--transition), transform 120ms var(--ease);
  }

  /* ---- QR 모달 ---- */
  .qr-modal { animation: fade-in 200ms var(--ease); }
  .qr-modal__panel { animation: panel-in 320ms var(--ease); }
  /* 코드는 패널이 자리를 잡은 뒤에 그려지듯 나타난다. 같이 움직이면
     눈금이 흔들려 보여서 QR 답지 않다. */
  .qr-modal__code { animation: fade-in 260ms var(--ease) 140ms both; }

  /* ---- 토스트 ---- */
  .toast { animation: toast-in 180ms var(--ease); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: none; }
}

@keyframes bar-up {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* 복사된 행 — 청록이 한 번 스몄다가 빠진다. 방금 누른 곳이 어디였는지
   토스트만으로는 알 수 없어서 행 자체도 반응하게 했다. */
.row.is-copied { animation: copied 1200ms var(--ease); }

.row.is-copied .row__action {
  opacity: 1;
  /* 복사 아이콘이 잠깐 체크로 바뀐다. 이미지 교체 대신 배경으로 겹쳐
     올려 두 번째 요청이 생기지 않게 한다. */
  content: url("/assets/icons/check.svg");
}

@keyframes copied {
  0%   { background: var(--teal-050); }
  70%  { background: var(--teal-050); }
  100% { background: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  /* 움직임 없이도 복사된 행은 표시되어야 한다. */
  .row.is-copied { background: var(--teal-050); }
}

/* ------------------------------------------------------------
   인쇄
   ------------------------------------------------------------ */
@media print {
  .actionbar,
  .lang-toggle,
  .qr-modal,
  .toast { display: none !important; }

  body { padding-bottom: 0; background: var(--white); }
  .card { box-shadow: none; }
  .card-head { background: var(--navy-900) !important; }
}