/* ============================================================
   正式名片 — 真實名片比例（90×54mm，5:3），字體排印即全部工藝
   紙 #fdfdfb・墨 #191b16・灰 #55584f・細線 #dcdad4・地 #e9eae4
   ============================================================ */

:root {
  --paper: #fdfdfb;
  --ground: #e9eae4;
  --ink: #191b16;
  --ink-soft: #55584f;
  --hairline: #dcdad4;
  --mark: #b4b6aa;
  --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --sans: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: light; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 12px;
}

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
html { scrollbar-color: #b9bbae var(--ground); }

/* ---- 印刷台：名片置中，四角裁切標記 ---- */
.stage { display: contents; }

.plate {
  padding: clamp(16px, 4vw, 28px);
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
  background-size:
    18px 1px, 1px 18px, 18px 1px, 1px 18px,
    18px 1px, 1px 18px, 18px 1px, 1px 18px;
  background-position:
    left 0 top 0, left 0 top 0,
    right 0 top 0, right 0 top 0,
    left 0 bottom 0, left 0 bottom 0,
    right 0 bottom 0, right 0 bottom 0;
}


.card {
  container-type: inline-size;
  position: relative;
  width: min(640px, 94vw);
  aspect-ratio: 5 / 3;
  background: var(--paper);
  border: 1px solid #e3e2da;
  box-shadow: 0 1px 3px rgba(25, 27, 22, 0.06), 0 14px 34px -16px rgba(25, 27, 22, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6.5% 8% 6%;
}

/* 細內框：正式名片的耳線 */
.card::after {
  content: "";
  position: absolute;
  inset: clamp(6px, 1.7cqi, 11px);
  border: 1px solid #d6d4cb;
  pointer-events: none;
}

/* ---- 公司名：卡頂，正式寬字距 ---- */
.company {
  font-family: var(--serif);
  font-weight: 700;
  font-size: max(15px, 3.3cqi);
  letter-spacing: 0.3em;
  padding-left: 0.3em; /* 居中追蹤補正 */
  color: var(--ink);
}
.company::after {
  content: "";
  display: block;
  width: 56%;
  margin: max(8px, 1.8cqi) auto 0;
  border-top: 1px solid var(--hairline);
}

/* ---- 姓名與職稱：垂直置中 ---- */
.name-block {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.name {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6em;
  font-family: var(--serif);
  font-weight: 900;
}
.name #name {
  font-size: max(34px, 10cqi);
  letter-spacing: 0.16em;
  line-height: 1.1;
}
.title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: max(14px, 3.4cqi);
  letter-spacing: 0.42em;
  color: var(--ink);
  line-height: 1.2;
}

/* ---- 業務項目：一行，安靜 ---- */
.services {
  font-size: max(11px, 2.3cqi);
  font-weight: 400;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  margin-bottom: max(6px, 1.6cqi);
}

/* ---- 聯絡方式：卡片底緣，細安靜 ---- */
.contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.6em;
}
.contact-item {
  font-size: max(11px, 2.3cqi);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
}
.contact-item .c-label {
  font-size: 0.82em;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
}
.contact-item .c-value {
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease;
}
.contact-item:hover .c-value,
.contact-item:focus-visible .c-value { border-bottom-color: var(--ink); }

/* ---- 進場：一次安靜的浮現，尊重減動態 ---- */
@media (max-width: 560px) {
  .card { width: 86vw; }
  .plate { padding: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  .card { animation: card-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
  @keyframes card-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---- 列印：輸出正好是 90×54mm 實體名片 ---- */
@page { size: A4 portrait; margin: 20mm; }
@media print {
  body { background: none; padding: 0; display: block; min-height: 0; }
  .plate { padding: 0; background: none; }
  .card {
    width: 90mm;
    height: 54mm;
    aspect-ratio: auto;
    box-shadow: none;
    border: 0.2mm solid #d9d8d0;
    animation: none;
  }
}