/* 망자 신원 등록: 합성 얼굴(.av) · 직접 만들기 / 셀카로 만들기 · AI 변환 로딩(시연)
   규칙은 style.css와 같음: 모서리 2px(얼굴 제외) / 먹·종이·인주·부적 색 / 보라색 없음 */

/* ---------- 합성 얼굴: 어디서 쓰든 크기는 각 화면의 .face 규칙이 정한다 ---------- */
.av{position:relative;display:inline-block;vertical-align:middle;width:96px;aspect-ratio:1/1.05;overflow:hidden;background:#fee4c7;line-height:0}
.av .av-photo,.av .av-parts{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block}
.av .av-photo{object-fit:cover}
/* 작가님 파츠 레이어(600×750): 카드 비율 1:1.05에 맞춰 위쪽 빈 여백만 잘라 냄 */
.av .av-parts img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%}


/* ---------- 11.12 화면 한 장 = 한지 한 장 (등록 · 초상 결재 대기) ----------
   바깥 여백(.content padding)을 없애고 한지(.reg-page)가 화면 끝까지 닿는다. 버튼도 한지 안 맨 아래로.
   한지 한 장 안에서 문서 머리(.scr-head)·버튼(.scr-foot)은 고정하고 가운데 기입란(.scr-body)만 스크롤한다 (style.css 화면 틀).
   비밀번호 확인(regConfirm)은 한지가 없어 일반 화면 틀 그대로 */
.content:has(>.reg-page){display:flex;flex-direction:column;padding:0;overflow:hidden}
.paper.reg-page{flex:1 1 0;min-height:0;display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:0}
.reg-page>*{flex:none}
.reg-page>.scr-head{padding-bottom:0;border-bottom:0}   /* 문서 머리의 먹 굵은 줄이 곧 경계선 */
.reg-page>.scr-body{flex:1 1 0;padding:18px 20px 12px}
.reg-page>.scr-foot{border-top-color:transparent;padding-bottom:calc(24px + var(--safe-b))}
.reg-page>.scr-body.more+.scr-foot{border-top-color:rgba(35,29,20,.45)}
.reg-page .sub{color:var(--ink2)}
.reg-page .ai-demo{margin:0 0 14px;color:var(--ink2)}
.reg-page .scr-body>h2:first-child{font:var(--t-subtitle);letter-spacing:var(--t-subtitle-ls)}   /* 문서 머리 아래 안내 제목은 한 단계 작게 */

/* ---------- 성명 (11.12) ----------
   항목 이름(성명·명부 사진)은 머리·눈·코·입(.pt-k)과 같은 국대떡볶이 라벨.
   입력란은 파츠 값 칸(.pt-v)과 같은 높이·바탕·먹 밑줄. 글자 수 안내(2~10자)는 placeholder로 */
.reg-page .field>label,.reg-page .field>legend{font:var(--t-label);letter-spacing:var(--t-label-ls)}
.reg-page .field input{min-height:44px;padding:9px 12px;background:rgba(255,250,236,.45);border-bottom:1.5px solid var(--ink);
  font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls)}

/* ---------- 명부 사진 미리보기 ---------- */
/* 11.12 네모 한지 상자(바탕·테두리)는 뺐다 — 타원 얼굴 프레임만 남긴다 (req 9tx9jjk4) */
.reg-photo{position:relative;width:min(210px,62%);margin:2px auto 16px}
.reg-photo .av-lg{display:block;width:100%;border:2px solid var(--ink);border-radius:var(--head)}
.reg-photo.empty{text-align:center}
/* 11.12 빈 사진 자리 = 바랜 인화지(photo-age, 명부와 같은 원화) + 아주 흐린 기본 얼굴 원화(face-a).
   관람객이 자기 얼굴로 오해하지 않게 회색·옅게만(예시 그림자). 점선 원·선 카메라 아이콘은 뺐다 */
.av-empty{position:relative;display:block;aspect-ratio:1/1.05;overflow:hidden;border:2px solid var(--ink2);border-radius:var(--head);background:url('assets/ui/photo-age.webp') 0 0/100% 100% no-repeat,#ece2c8}
.av-empty::before{content:'';position:absolute;inset:6% 4% -4%;background:url('assets/ui/face-a.webp') 50% 60%/cover no-repeat;filter:grayscale(1) contrast(1.2);mix-blend-mode:multiply;opacity:.13}
.reg-photo.empty p{margin:8px 0 0;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink2)}
.reg-seal{position:absolute;right:-12px;bottom:12px;background:#f8f1df;font:var(--fw-solmoe) var(--fs-sm)/var(--sl-lh-sm) var(--font-solmoe);padding:4px 7px}
.reg-photo.fresh .av-lg{animation:regDevelop 1.1s ease-out both}
.reg-photo.fresh .reg-seal{animation:regStamp .5s .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes regDevelop{0%{filter:grayscale(1) blur(4px) contrast(.7);transform:scale(.94)}60%{filter:grayscale(.3) blur(0)}100%{filter:none;transform:none}}
@keyframes regStamp{0%{opacity:0;transform:scale(2) rotate(-24deg)}100%{opacity:1;transform:rotate(-8deg)}}

/* ---------- 탭 ---------- */
.reg-tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px}
/* 탭·◀ ▶ = 찢긴 한지 조각 (11.12 톤앤매너): style.css .primary/.secondary와 같은 paper-hanji + 찢긴 가장자리 마스크 + 먹 그림자.
   ::before = 먹 그림자, ::after = 종이. 버튼 자체에는 바탕·테두리를 두지 않는다(찢긴 모양 밖으로 네모가 드러나지 않게) */
.rt,.pt-b{position:relative;isolation:isolate;border:0;border-radius:0;background:none;box-shadow:none;--hj:#d2c29b;--hj-drop:3px}
.rt::before,.rt::after,.pt-b::before,.pt-b::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask:url('assets/ui/hanji-edge-wide.webp') 0 0/100% 100% no-repeat;mask:url('assets/ui/hanji-edge-wide.webp') 0 0/100% 100% no-repeat}
.pt-b::before,.pt-b::after{-webkit-mask-image:url('assets/ui/hanji-edge.webp');mask-image:url('assets/ui/hanji-edge.webp')}
.rt::before,.pt-b::before{background:#000;translate:0 var(--hj-drop)}
.rt::after,.pt-b::after{background:url('assets/ui/design-1111/paper-hanji.webp') 50% 50%/cover,var(--hj);background-blend-mode:multiply}
.rt+.rt::before,.rt+.rt::after{scale:-1 1}
.rt{min-height:48px;padding:8px 6px;color:var(--ink);font:var(--t-button-sm);letter-spacing:var(--t-button-sm-ls)}
/* 고른 탭 = 먹물 들인 한지, 눌려 들어간 자리(그림자 1px) */
.rt[aria-selected="true"]{--hj:#3a3126;--hj-drop:1px;color:var(--paper);transform:translateY(2px)}

/* ---------- 파츠 ◀ ▶ ---------- */
.reg-hint{margin:0 0 10px;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink2)}
.parts{display:grid;gap:8px}
.pt-row{display:grid;grid-template-columns:40px 44px 1fr 44px;align-items:center;gap:8px}
.pt-k{font:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--ink)}
.pt-b{display:grid;place-items:center;width:44px;height:44px;padding:0;color:var(--ink)}
.pt-b svg{width:18px;height:18px}
.pt-b:active,.rt:not([aria-selected="true"]):active{transform:translateY(2px);--hj-drop:1px}
/* 값 칸 = 명부 기입란: 성명 입력처럼 먹 밑줄 한 줄 */
.pt-v{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;padding:2px 4px;background:rgba(255,250,236,.45);border-bottom:1.5px solid var(--ink);text-align:center;line-height:1.25}
.pt-v b{font:var(--t-body-strong);letter-spacing:var(--t-body-strong-ls);color:var(--ink)}   /* 11.12 고른 모양 이름은 Pretendard (n/m 표기는 뺐다) */

/* ---------- 셀카 ---------- */
.selfie-btns{display:grid;gap:10px;margin:0 0 12px}
.selfie-btns>*{margin:0!important;cursor:pointer}
/* 폼 안의 .field label 규칙(작은 글자·왼쪽 정렬)을 버튼 모양으로 되돌림 */
.field .selfie-btns label{display:flex;align-items:center;justify-content:center;gap:0;padding:12px 34px;font:var(--t-button);letter-spacing:var(--t-button-ls)}
.field .selfie-btns label.primary{color:var(--btn-ink)}
.field .selfie-btns label.secondary{color:var(--ink);font:var(--t-button-sm);letter-spacing:var(--t-button-sm-ls)}
.parts+.selfie-btns{margin-top:18px}
.reg-clear{display:block;margin:0 auto;color:var(--ink2)}

/* ---------- AI 변환: 비밀번호 확인 · 로딩 ---------- */
.ai-load{margin-top:8px}
.ai-frame{position:relative;width:min(200px,58%);aspect-ratio:1/1.05;margin:0 auto 24px;overflow:hidden;background:#fee4c7;border:3px solid #000;border-radius:var(--head);outline:2px solid var(--tal);outline-offset:4px}
.ai-raw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) blur(2px);animation:aiDevelop 3.9s linear both}
.ai-raw.still{filter:none;animation:none}
.pin-field{margin:0 auto 4px;max-width:260px;text-align:center}
.pin-field label{color:var(--text)}
.pin-field input{text-align:center;letter-spacing:.5em;padding-left:calc(12px + .5em);font:var(--fw-bold) var(--fs-2xl)/var(--lh-2xl) var(--font-sans)}
.pin-msg{min-height:var(--lh-sm);margin:8px 0 0;font:var(--t-body-sm-strong);letter-spacing:var(--t-body-sm-strong-ls);color:var(--seal)}
@keyframes aiDevelop{to{filter:grayscale(.2) contrast(1.35) saturate(1.2) blur(0)}}
/* 대기 화면: 한지 결재 문서 위 화폭에 초상이 먹처럼 배어 나오고, 결재란에 단계마다 도장(judge/v2/seal.webp)이 찍힌다 */
.ai-sheet{margin-top:18px;padding-bottom:18px}
.ai-canvas{position:relative;width:min(190px,58%);aspect-ratio:1/1.05;margin:4px auto 20px;overflow:hidden;background:#f8f1df;border:2px solid var(--ink);border-radius:var(--head);outline:1px solid var(--rule);outline-offset:5px}
.ai-canvas .ai-raw{mix-blend-mode:multiply;animation-name:aiPaint}
@keyframes aiPaint{0%{opacity:.2;filter:grayscale(1) contrast(1.8) brightness(1.2) blur(3px)}55%{opacity:.8;filter:grayscale(.7) contrast(1.5) blur(.6px)}100%{opacity:1;filter:grayscale(.15) contrast(1.25) saturate(1.1)}}
.ai-sign{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(3,70px);width:max-content;border:1.5px solid var(--ink)}
.ai-sign li{display:grid;grid-template-rows:auto 62px;place-items:center;border-left:1px solid var(--ink)}
.ai-sign li:first-child{border-left:0}
.ai-sign span{justify-self:stretch;padding:3px 0;border-bottom:1px solid var(--ink);text-align:center;font:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--ink2)}
.ai-sign li.on span,.ai-sign li.done span{color:var(--ink)}
.ai-sign b{display:grid;place-items:center;width:44px;height:44px;background:url(assets/judge/v2/seal.webp) center/100% 100% no-repeat;color:#1d0a06;font:var(--fw-solmoe) 15px/1.05 var(--font-solmoe);opacity:0;transform:rotate(-8deg)}
.ai-sign li.on b{animation:aiPoise .8s ease-in-out infinite alternate}
.ai-sign li.done b{opacity:1;animation:regStamp .45s cubic-bezier(.3,1.6,.5,1) both}
@keyframes aiPoise{from{opacity:.1;transform:translateY(-7px) scale(1.2) rotate(-16deg)}to{opacity:.3;transform:translateY(0) scale(1.06) rotate(-10deg)}}
/* 11.12 진행 문구: 10px 아래로(14→24) + Regular(400) (req 7vx8rk1e) */
.ai-now{min-height:var(--lh-sm);margin:24px 0 0;text-align:center;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--ink)}
.ai-demo{margin:14px 0 18px;font:var(--t-body-sm);letter-spacing:var(--t-body-sm-ls);color:var(--dim);text-align:center}

@media (prefers-reduced-motion: reduce){
  .ai-sign li.on b{animation:none;opacity:.2}
  .reg-photo.fresh .av-lg,.reg-photo.fresh .reg-seal{animation:none}
}

/* ---------- 진입 대기 (기획안 p3): 키비주얼 확대 + 얇은 진행 바 + 대기 문구 ---------- */
/* 화면 높이에 꼭 맞춘다: 키비주얼이 남는 높이를 다 채우고(가로는 가운데 기준으로 잘림), 진행 바·문구는 맨 아래 */
.entry-load{display:flex;flex-direction:column;height:100dvh;overflow:hidden;background:#000}
.el-kv{position:relative;flex:1 1 0;min-height:0;overflow:hidden}
.el-kv:after{content:'';position:absolute;inset:auto 0 0;height:72px;background:linear-gradient(transparent,#000);pointer-events:none}
.el-kv img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;animation:elIn .8s ease-out both}
@keyframes elIn{from{opacity:0;transform:scale(.96)}}
.el-foot{flex:none;padding:14px 28px calc(28px + var(--safe-b))}
.el-bar{height:3px;background:var(--line);overflow:hidden}
.el-bar b{display:block;height:100%;width:0;background:var(--tal);animation:aiBar linear forwards}
@keyframes aiBar{to{width:100%}}
.el-text{margin:12px 0 0;text-align:center;font:var(--t-label);letter-spacing:var(--t-label-ls);color:var(--muted)}
@media (min-width:901px){ .entry-load{height:var(--ph)} }
/* 휴대폰: 브라우저 하단 바 뒤·주소창 뒤로 비치는 바탕까지 같은 검정으로 (바탕색 #0a0d0c와 달라 아래가 비어 보이던 문제) */
@media (max-width:900px){ html:has(.route-loading),html:has(.route-loading) body,.phone.route-loading{background:#000} }

/* ---------- 등록 안내 팝업 (기획안 p4) ---------- */
/* 11.12 톤앤매너: 뒤의 명부와 같은 낡은 한지(hanji-age + hanji-paper, hanji-edge 찢긴 가장자리) + 먹 그림자.
   한지는 ::before에 깔고 마스크로 찢는다(dialog 자체에 마스크를 걸면 버튼 그림자까지 잘림). 그림자는 dialog의 drop-shadow.
   ::after = 안쪽 먹선 틀. 제목 = 솔뫼 김대건체 + 명부 머리(.sheet-head)와 같은 먹 굵은 줄, 안내 = Pretendard */
dialog.notice-dlg{max-width:350px;padding:34px 28px 30px;background:none;border:0;outline:0;overflow:visible;isolation:isolate;filter:drop-shadow(5px 7px 0 #000);color:var(--ink);text-align:center}
dialog.notice-dlg::before,dialog.notice-dlg::after{content:'';position:absolute;z-index:-1;pointer-events:none}
dialog.notice-dlg::before{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}
dialog.notice-dlg::after{inset:14px;border:1.5px solid rgba(35,29,20,.55)}
.nd-art{display:block;width:84px;height:auto;margin:0 auto 10px}
dialog.notice-dlg .nd-title{margin:0 0 14px;padding-bottom:12px;border-bottom:2px solid var(--ink);font:var(--t-subtitle);letter-spacing:var(--t-subtitle-ls);color:var(--ink);text-wrap:balance}
.nd-text{margin:0 0 24px;font:var(--t-body);letter-spacing:var(--t-body-ls);color:var(--ink)}
.nd-text p{margin:0 0 8px;text-wrap:balance}
.nd-text p:last-child{margin:0}
.nd-text b{font-weight:var(--fw-bold);color:#a32a20}

@media (prefers-reduced-motion: reduce){ .el-kv img{animation:none} }