:root{
  --ink:#14171C;
  --paper:#F7F6F3;
  --paper2:#FBFAF8;
  --muted:#7A7D85;
  --rule:rgba(20,23,28,.11);
  --rule2:rgba(20,23,28,.18);
  --ease:cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:"Pretendard Variable",Pretendard,-apple-system,sans-serif;
  background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- the card ---------- */
.card{
  width:min(86vw,340px);aspect-ratio:1.62/1;
  text-align:left;font:inherit;color:inherit;
  perspective:1400px;cursor:pointer;background:none;border:0;padding:0;display:block;
}
.card .inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .82s cubic-bezier(.22,.9,.24,1);
}
.card.flipped .inner{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border-radius:14px;overflow:hidden;
  padding:20px 21px;
  display:flex;flex-direction:column;
  box-shadow:
    0 1px 1px rgba(20,23,28,.05),
    0 6px 16px rgba(20,23,28,.09),
    0 18px 40px rgba(20,23,28,.09);
}
.face.back{transform:rotateY(180deg)}
/* paper texture: fine speckle + a soft raking light */
.face::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(146deg,rgba(255,255,255,.16),transparent 42%,rgba(0,0,0,.05));
}

/* front */
.f-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.f-org{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.2em;
  opacity:.62;text-transform:uppercase;line-height:1.5;max-width:62%;
}
.f-photo{
  width:44px;height:44px;border-radius:50%;flex:none;object-fit:cover;
  box-shadow:0 0 0 1px var(--cline);
}
.f-mid{margin-top:auto}
.f-name{
  font-size:31px;font-weight:680;letter-spacing:-.028em;line-height:1.05;
  word-break:keep-all;
}
.f-latin{
  font-family:"Fraunces",Georgia,serif;font-weight:300;font-style:italic;
  font-size:16.5px;letter-spacing:.005em;opacity:.72;margin-top:5px;
}
.f-rule{height:1px;background:var(--cline);margin:13px 0 10px;opacity:.85}
.f-title{font-size:11.5px;letter-spacing:-.005em;opacity:.78;line-height:1.45}

/* back */
.b-head{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8.5px;letter-spacing:.2em;
  opacity:.6;text-transform:uppercase;margin-bottom:11px;flex:none;
}
.b-rows{display:flex;flex-direction:column;gap:7px;flex:none}
.b-row{display:flex;align-items:baseline;gap:9px;font-size:11.5px;line-height:1.3}
.b-row .k{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8px;letter-spacing:.16em;
  opacity:.5;width:32px;flex:none;text-transform:uppercase;
}
.b-row .v{opacity:.92;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.b-note{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:300;
  font-size:11.5px;opacity:.66;line-height:1.45;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--cline);
  max-height:36px;overflow:hidden;flex:none;
}
.b-foot{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;padding-top:12px}
.b-qr{width:52px;height:52px;flex:none;border-radius:6px;background:#fff;padding:3px;box-shadow:0 0 0 1px var(--cline)}
.b-qr.ph{
  border:1px dashed var(--cline);display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8px;letter-spacing:.14em;opacity:.45;
}
.b-qr canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.b-sig{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:8px;letter-spacing:.16em;
  opacity:.45;text-align:right;line-height:1.6;
}

/* empty state inside preview */
.f-name.ph,.f-latin.ph{opacity:.28}

/* ---------- toast (shared) ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 26px);
  transform:translateX(-50%) translateY(8px);
  background:rgba(20,23,28,.93);color:#fff;font-size:13px;padding:11px 18px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .28s,transform .28s var(--ease);
  z-index:60;white-space:nowrap;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

*:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .card .inner{transition-duration:.01s}
  *{transition-duration:.01s!important}
}