/* ---------- 저승 통행 명부 (등록 완료 · 하단 메뉴 ‘망자 명부’) ----------
   낡은 한지 한 장 + 압정 하나에 매달려 달랑거리는 빛바랜 사진 + 연필 글씨 + 입국 허가 관인.
   새로 발급될 때만 app.js playIssue()가 연출을 붙인다:
   명부가 떨어져 놓임 → 사진이 압정에 꽂혀 흔들림 → 이름·망자 번호·등급이 연필 글씨로 한 글자씩 적힘 → 도장 쾅 → [홈으로 이동]
   다시 볼 때는 글씨·도장이 이미 있는 상태이고, 사진만 계속 달랑거린다.
   한지·도장·사진 노화는 이미지 에셋(assets/ui/hanji-*.webp, seal-entry.webp, photo-age.webp)이라 색 규칙(먹·종이·인주·부적)의 재질 표현으로 본다.
   그림자는 만화식 딱딱한 그림자만 쓴다. */

.route-passport .scr-head h2{margin-bottom:8px}   /* 등록 완료 제목과 안내 문장 사이를 공용 10px보다 2px 좁게 (제목은 등록 직후에만 있음) */
.passport{position:relative;isolation:isolate;margin-top:22px;padding:30px 24px 24px;color:var(--ink)}

/* 한지: 찢어진 실루엣(마스크)에 맞춰 딱딱한 그림자가 따라간다 */
.pp-sheet{position:absolute;inset:0;z-index:-1;pointer-events:none;filter:drop-shadow(3px 5px 0 #000)}
.pp-sheet>i{position:absolute;inset:0;
  background:url('assets/ui/hanji-age.webp') 0 0/100% 100% no-repeat,url('assets/ui/hanji-paper.webp') 50% 50%/cover,#eadcb8;
  -webkit-mask:url('assets/ui/hanji-edge.webp') 0 0/100% 100% no-repeat;mask:url('assets/ui/hanji-edge.webp') 0 0/100% 100% no-repeat}
/* 고문서 테두리(광곽): 인주색 굵은 줄 + 가는 줄이 종이에 찍혀 있다. 찢어진 자리에서는 같이 끊긴다 */
.pp-sheet>i:after{content:'';position:absolute;inset:14px 13px;border:2px solid #9c3a2c;outline:1px solid #9c3a2c;outline-offset:-6px;opacity:.42;mix-blend-mode:multiply}

/* 인쇄된 글자·줄은 종이에 스민 느낌으로 */
.pp-head,.pp-grid,.pp-name small,.pp-oath{mix-blend-mode:multiply}
.pp-head{display:flex;flex-direction:column;align-items:center;gap:2px;border-bottom:2px solid var(--ink);padding-bottom:10px;margin-bottom:18px;text-align:center}
.pp-head b{font:var(--t-title);letter-spacing:4px;color:var(--seal)}   /* 관청 문서 머리글: 넓은 자간은 의도된 장식이라 유지 */
.pp-head span{font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink2)}
.pp-body{display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:center}
.pp-name{min-width:0}
.pp-name small{display:block;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink2)}
.pp-name strong{display:block;margin:0 0 4px;font-weight:400}
.pp-grid{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 0;border-top:1px solid #a58f62}
.pp-grid div{padding:8px 0 7px;border-bottom:1px solid #a58f62}
.pp-grid .wide{grid-column:1/-1}
.pp-grid>div:nth-child(2){padding-left:12px}   /* 등급 동그라미가 망자 번호 끝 글자에 닿지 않게 */
.pp-grid dt{font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink2)}
.pp-grid dd{margin:1px 0 0;font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pending{font:var(--fw-medium) var(--fs-sm)/var(--lh-sm) var(--font-sans);color:var(--ink2)}
.pp-track{display:inline-flex;gap:3px}
.pp-track i{width:20px;height:8px;background:#cdbb8f}
.pp-track i.on{background:var(--seal)}
.pp-oath{font:var(--t-body-sm-strong);letter-spacing:var(--t-body-sm-strong-ls);color:var(--ink2);margin:14px 0 8px}
.pp-oath small{font:var(--t-caption);letter-spacing:var(--t-caption-ls)}

/* ---------- 사진: 압정 하나에 비뚤게 꽂혀 달랑거린다 ----------
   .pp-swing  발급 연출에서 꽂힐 때·도장 칠 때 크게 흔들리는 층 (app.js)
   .pp-print  늘 조금씩 흔들리는 층 (아래 ppSway). 두 회전이 겹쳐 진짜 매달린 것처럼 보인다
   회전 중심은 압정 자리(왼쪽에서 42%, 위에서 9px) */
.pp-photo{position:relative;padding-top:4px}
.pp-swing,.pp-print{transform-origin:42% 9px}
.pp-print{position:relative;padding:6px 6px 9px;background:#f2e9d3;transform:rotate(5deg);animation:ppSway 4.2s ease-in-out infinite;
  filter:sepia(.34) saturate(.68) contrast(.93) brightness(1.02) drop-shadow(2px 3px 0 rgba(35,29,20,.42))}
.pp-shot{display:block;padding:6px 7px 0;background:#c9bc9c;overflow:hidden}
.pp-print .face{display:block;width:100%;aspect-ratio:1/1.05;background:#fee4c7;border:2px solid var(--ink);border-radius:var(--head);border-bottom-left-radius:38% 30%;border-bottom-right-radius:38% 30%}
.pp-print:after{content:'';position:absolute;inset:0;background:url('assets/ui/photo-age.webp') 0 0/100% 100% no-repeat;pointer-events:none}
.pp-pin{position:absolute;left:calc(42% - 12px);top:1px;z-index:2;width:24px;height:24px;max-width:none;pointer-events:none}
@keyframes ppSway{0%,100%{transform:rotate(5deg)}27%{transform:rotate(8.6deg)}52%{transform:rotate(2.6deg)}78%{transform:rotate(7deg)}}
/* 발급 연출: 꽂힐 때 크게 출렁이는 순간과 흔들림 꼭대기가 겹쳐 20°까지 꺾이지 않게 흔들림 위상을 1초 당긴다 */
.passport.fresh .pp-print{animation-delay:-1000ms}

/* ---------- 연필 글씨 (이름 · 망자 번호 · 등급) · 글꼴은 style.css :root --id-font ----------
   글자마다 흑연 질감을 채우고 조금씩 기울여 손글씨처럼. 화면 낭독기는 .sr-only 원문을 읽는다 */
.hw{position:relative;display:inline-block;font-family:var(--id-font);font-weight:var(--id-weight);line-height:1.15;color:#3b3833;letter-spacing:0}
/* 11.11 디자인 피드백: 손글씨 느낌을 빼고 붓글씨(먹색·반듯하게)로 통일. 연필 효과로 되돌리려면 아래 한 줄만 지운다 */
.hw .hw-c{transform:none;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.hw-t{display:inline}
.hw-w{white-space:nowrap}
.hw-w.brk{white-space:normal}
.hw-c{display:inline-block;font-style:normal;transform:translateY(var(--y,0)) rotate(var(--r,0deg));
  background:url('assets/ui/graphite.webp') 0 0/128px 128px,#3b3833;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding:.15em .08em;margin:-.15em -.08em}   /* 흑연을 칠하는 칸을 글자 상자보다 넓혀 칸 밖으로 나온 획(亡의 점, 꼬리)이 잘리지 않게. 자리는 그대로 */
.hw-c.hj{font-family:var(--font-sans);font-weight:var(--fw-medium)}   /* 손글씨 글꼴에 없는 한자(亡)는 가는 고딕으로 */
.pp-name .hw{font-size:calc(var(--fs-4xl) * var(--id-scale));line-height:1.1}
.pp-name .hw.long{font-size:calc(var(--fs-3xl) * var(--id-scale))}
.pp-grid .hw{font-size:calc(var(--fs-2xl) * var(--id-scale))}
/* 등급: 연필로 동그라미를 쳐 둔다 */
.pp-lv{padding:0 4px}
.hw-ring{position:absolute;left:-9px;right:-11px;top:-4px;bottom:-5px;pointer-events:none}
.hw-ring svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:#3b3833;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
/* 간격(2)을 길이(1)보다 길게: 시작 오프셋 1.05에서 길 전체가 빈칸이라 미리 보이는 조각이 없다 */
.hw-ring path{stroke-dasharray:1 2}

/* ---------- 입국 허가 관인 ---------- */
.pp-seal{position:absolute;right:16px;bottom:22px;z-index:2;width:98px;height:98px;max-width:none;transform:rotate(-8deg);mix-blend-mode:multiply;pointer-events:none}

/* 375~389px(아이폰 SE·미니)도 큰 글씨가 들어가지 않아 같은 작은 판을 쓴다 */
@media (max-width:389px){
  .passport{padding:28px 20px 22px}
  .pp-body{grid-template-columns:96px 1fr;gap:14px}
  .pp-name .hw{font-size:var(--fs-3xl)}
  .pp-name .hw.long{font-size:var(--fs-2xl)}
  .pp-grid .hw{font-size:var(--fs-xl)}
  .pp-seal{width:84px;height:84px;right:12px}
}
@media (max-width:339px){
  .pp-grid .hw{font-size:var(--fs-lg)}
  .pp-seal{width:74px;height:74px;right:8px;bottom:46px}
}
/* 동작 줄이기: 연출 없이 끝 상태, 사진은 비뚤게 멈춰 있다 (style.css 전역 규칙이 애니메이션을 끈다) */