/* 앱 화면: 결과 F 한 얼굴 표지(D-64) · 나머지 R15 I 캠페인(D-65). 원본 시안 sketch/r14(F) · sketch/r15(I 열), 규칙 .claude/skills/lookalike-ui §0-1 · §0-2
   서체(사용자 10-29): 제목 ZEN SERIF · 본문 Pretendard · 숫자와 라벨 마포 꽃섬 · 손글씨 포인트 마포 다카포. 결과 F는 Bodoni Moda(숫자 · 해) + Hahmlet(한글)
   라이선스: fonts/README.md */
@font-face { font-family: 'ZEN SERIF'; src: url('fonts/ZEN-SERIF-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mapo FlowerIsland'; src: url('fonts/MapoFlowerIsland.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Mapo Dacapo'; src: url('fonts/MapoDacapo.ttf') format('truetype'); font-weight: 400; font-display: swap; }

:root {
  --aw: min(100vw, 430px);
  --in: cubic-bezier(0.22, 1, 0.36, 1); --out: cubic-bezier(0.4, 0, 1, 1); --move: cubic-bezier(0.4, 0, 0.2, 1);
  --st: env(safe-area-inset-top, 0px); --sb: env(safe-area-inset-bottom, 0px);
  --ink: #161412; --sans: 'Pretendard Variable', Pretendard, system-ui, sans-serif; --title: 'ZEN SERIF', 'Pretendard Variable', serif;
  --num: 'Mapo FlowerIsland', serif; --hand: 'Mapo Dacapo', serif; --bod: 'Bodoni Moda', serif; --hah: 'Hahmlet', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
body { font-family: var(--sans); color: #fff; word-break: keep-all; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0,0,0,.6); }
/* 화면이 바뀔 때 제목으로 옮기는 초점(읽기 순서용)은 테두리를 그리지 않는다 */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
img, video, canvas { display: block; -webkit-user-drag: none; user-select: none; }
p, h1, h2, figure, ol, ul, dl, dd { margin: 0; padding: 0; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 데스크톱도 휴대폰과 똑같이: 최대 430px 한 장을 가운데(사용자 10-29). 폭 비례 크기는 --aw 기준 */
#stage { position: fixed; top: 0; bottom: 0; left: calc(50% - var(--aw) / 2); width: var(--aw); overflow: hidden; }
#stage > section { position: absolute; inset: 0; }
@media (min-width: 431px) { html, body { background: #0a0a09; } #stage { box-shadow: 0 0 0 1px rgba(255,255,255,.06); } }
#toast { position: fixed; z-index: 70; left: 50%; bottom: calc(150px + var(--sb)); transform: translate(-50%, 10px); opacity: 0; transition: opacity .3s var(--in), transform .3s var(--in); background: rgba(20,20,20,.92); color: #fff; font-size: 13px; line-height: 1.45; padding: 10px 14px; border-radius: 18px; max-width: calc(var(--aw) - 32px); text-align: center; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ===== 진주 재질(R15 I 2차): 2K 정지 이미지를 바탕에만 조용히. 단색은 포인트(흰 알약 · 셔터 · 큰 해 · 고른 줄의 띠) ===== */
.ii, .sh { isolation: isolate; background: #0d0c0b; }
.pl { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #e9e6e1 url('img/pearl.jpg') center / cover; background-image: image-set(url('img/pearl.webp') type('image/webp'), url('img/pearl.jpg') type('image/jpeg')); }
.pl-dark { filter: brightness(.19) contrast(1.05) saturate(.6); }
.pl-dark::after { content: ''; position: absolute; inset: 0; background: var(--wall, #2a2016); mix-blend-mode: color; opacity: .6; }
.pl-light::after { content: ''; position: absolute; inset: 0; background: #fbfaf8; opacity: .55; }
.pl-still { filter: brightness(.28) grayscale(1) contrast(.85); }
.pl-still::after { display: none; }
.pl-veil { z-index: 0; mix-blend-mode: screen; opacity: 0; filter: brightness(.8) contrast(.8); }
/* 화면 전환 막: 앞 화면이 진주 막 뒤로 사라지고, 막이 걷히며 새 화면 */
#veil { position: fixed; z-index: 45; opacity: 0; left: calc(50% - var(--aw) / 2); width: var(--aw); }

/* ===== 공용 ===== */
.ii { overflow: hidden; font-family: var(--sans); }
.ii h1, .ii h2, .i-ttl { font-family: var(--title); font-weight: 400; letter-spacing: -0.015em; }
.i-top { position: absolute; z-index: 3; top: calc(14px + var(--st)); left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; min-height: 44px; }
.i-brand { font-family: var(--bod); font-variation-settings: 'opsz' 96; font-size: 19px; letter-spacing: 0.01em; display: inline-flex; align-items: center; gap: 9px; }
/* 라인아트 로켓 표지(10-31, mark.mjs): 오른쪽 뚜껑이 경첩에서 열리며 외곽선이 그려지고, 다 그려지면 선이 차오른다 */
.lk-mark { height: 1.7em; width: auto; aspect-ratio: 932 / 891; overflow: visible; flex: none; }
.lk-mark .lk-trace { opacity: 0; }
.lk-mark .lk-r { transform-origin: 1027px 1025px; }
.lk-mark.draw .lk-r { animation: lk-open 1.2s cubic-bezier(.2,.8,.2,1) .2s both; }
.lk-mark.draw .lk-trace { opacity: 1; animation: lk-out .6s 1.9s forwards; }
.lk-mark.draw .lk-trace path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lk-draw 1.6s cubic-bezier(.65,0,.35,1) .2s forwards; }
.lk-mark.draw .lk-fill { opacity: 0; animation: lk-in .8s 1.4s forwards; }
/* 기다리는 자리의 반복형(10-31): 뚜껑이 천천히 닫혔다 열림. 그리는 움직임 없이 선은 차 있음 */
.lk-mark.loop .lk-r { animation: lk-swing 1.8s cubic-bezier(.45,0,.55,1) infinite alternate; }
@keyframes lk-swing { from { transform: none; } to { transform: scaleX(.08); } }
.sh-wait { position: absolute; inset: 0; margin: auto; height: 64px; color: rgba(255,255,255,.7); }
.sh-card:not(.ld) .sh-wait { display: none; }
.i-lw { display: inline-flex; align-items: center; min-width: 0; }
.i-wait { height: 1.4em; margin-right: 10px; align-self: center; }
.hall-list li.busy, .bd-list li.busy { display: flex; justify-content: center; padding: 28px 0; border: 0; }
.hall-list li.busy .lk-mark, .bd-list li.busy .lk-mark { height: 44px; color: rgba(255,255,255,.7); }
.sh-video .lk-mark { height: 1.2em; vertical-align: -0.25em; margin-right: 4px; }
/* 스플래시(10-31): 검정 위에 큰 로켓이 열리며 그려지고 이름이 떠오름 */
.lk-splash { position: fixed; inset: 0; z-index: 90; background: #0d0d0d; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.lk-splash .lk-mark { height: min(34vw, 150px); }
.i-brand .i-nm { display: inline-flex; align-items: baseline; gap: 6px; }
.i-say, .lk-splash-read { font-family: 'Pretendard Variable', sans-serif; font-weight: 400; letter-spacing: .32em; opacity: .58; font-variation-settings: normal; }
.i-say { font-size: 10px; letter-spacing: .18em; }
.lk-splash-read { display: block; text-align: center; font-size: min(3vw, 13px); margin-top: 10px; padding-left: .32em; }
.lk-splash-name { font-family: var(--bod); font-variation-settings: 'opsz' 96; font-size: min(9vw, 40px); letter-spacing: .01em; opacity: 0; animation: lk-name .9s cubic-bezier(.2,.8,.2,1) 1.5s forwards; }
@keyframes lk-name { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lk-open { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lk-draw { to { stroke-dashoffset: 0; } }
@keyframes lk-in { to { opacity: 1; } }
@keyframes lk-out { to { opacity: 0; } }
.i-t { min-height: 44px; font-size: 15px; color: rgba(255,255,255,.9); }
.i-go { display: block; width: 100%; min-height: 54px; border-radius: 999px; background: #fff; color: #000; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 18px 0 8px; transition: transform .12s, opacity .24s; }
.i-go:active { transform: scale(.98); }
.i-go:disabled { opacity: .35; }
.i-date { font-family: var(--num); font-size: 16px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.i-line { position: fixed; z-index: 40; top: calc(52px + var(--st)); left: calc(50% - var(--aw) / 2); width: var(--aw); margin: 0; padding: 6px 16px; background: #fff; color: #000; font-size: 12.5px; transform: translateY(-6px); opacity: 0; transition: opacity .48s var(--in), transform .48s var(--in); }
.i-line.on { transform: none; opacity: 1; }

/* 띠: 눈을 맞춘 크롭 한 줄(눈높이가 띠 가운데). 첫 화면 · 계산 중 · 동의 */
.i-strip { flex: 1; position: relative; overflow: hidden; background: transparent; isolation: isolate; }
.i-strip img { position: absolute; left: 0; width: 100%; object-fit: cover; }
.i-y { position: absolute; z-index: 1; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--num); font-size: 14px; color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); letter-spacing: -0.01em; }
.i-lab { position: absolute; z-index: 1; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--hand); font-size: 17px; color: #fff; }
.i-blank { background: rgba(255,255,255,.05); }

/* ===== 첫 화면 ===== */
.i-strips { position: absolute; left: 0; right: 0; top: calc(48px + var(--st)); height: calc(60% - 48px - var(--st)); display: flex; flex-direction: column; gap: 3px; }
.i-copy { position: absolute; left: 20px; right: 20px; bottom: calc(18px + var(--sb)); }
/* 첫 화면 · 오프라인: 아래 글이 제 높이를 먼저 갖고 띠는 남는 높이만(낮은 화면 · 가로에서 겹치지 않게, 사용자 10-29 「반응형」) */
.i-start { display: flex; flex-direction: column; }
.i-start .i-strips { position: relative; top: auto; height: auto; flex: 1 1 0; min-height: 0; margin-top: calc(48px + var(--st)); justify-content: flex-end; overflow: hidden; }
/* 띠는 두께를 지키고(아래로 줄지 않음), 높이가 모자라면 위쪽 띠(오래된 해)부터 화면 밖으로 잘린다. 「나」 띠는 늘 제목 바로 위(사용자 10-29 2번) */
.i-start .i-strip { flex: 1 0 auto; min-height: clamp(40px, calc(var(--aw) * 13 / 100), 56px); }
.i-start .i-copy { position: relative; left: auto; right: auto; bottom: auto; flex: none; padding: 14px 20px calc(18px + var(--sb)); }
.i-copy h1 { font-size: 31px; line-height: 1.24; }
.i-start .i-copy h1, .i-start .i-copy p { white-space: nowrap; } /* 크기는 app.mjs fitLine이 폭에 맞춤 */
.i-start .i-copy .i-from { white-space: normal; } /* 링크로 받은 줄 · 참여자 줄(D-78)은 접힘 */
.i-from[hidden] { display: none; }
.i-copy p { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 8px; }
.i-copy small { display: block; text-align: center; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.55); }
.i-copy small[hidden] { display: none; }
.i-copy .i-size { margin-top: 2px; }
.i-foot { margin-top: 10px; text-align: center; font-size: 10.5px; line-height: 1.4; letter-spacing: .01em; color: rgba(255,255,255,.38); }
.i-policy { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: .5px; }
.i-logo { display: inline-block; vertical-align: -2px; height: 1.05em; width: auto; margin-left: 4px; overflow: visible; fill: none; stroke: currentColor; stroke-width: .75px; stroke-linejoin: round; }
.i-logo path { vector-effect: non-scaling-stroke; }
.i-tabs { display: flex; gap: 18px; margin-bottom: 14px; }
.i-tabs button { min-height: 40px; font-size: 14px; color: rgba(255,255,255,.55); border-bottom: 1.5px solid transparent; transition: color .24s, border-color .24s; }
.i-tabs button[aria-selected="true"] { color: #fff; border-color: #fff; }
.i-off .i-strip img { filter: grayscale(1) brightness(.78) contrast(1.05); }

/* ===== 촬영 · 상태: 뷰파인더 하나 + 실제 측정값 ===== */
.i-cap, .i-st { display: flex; flex-direction: column; padding-top: calc(60px + var(--st)); }
.i-vf { position: relative; height: min(calc(var(--aw) * 125 / 100), 58vh); min-height: 120px; overflow: hidden; background: #111; flex: 0 1 auto; isolation: isolate; } /* 낮은 화면에서는 뷰파인더가 줄어 셔터가 화면 안에 남음 */
.i-st .i-vf { height: min(calc(var(--aw) * 110 / 100), 48vh); }
.i-vf video, .i-vf canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.i-vf video.mirror { transform: scaleX(-1); }
.i-eyeline { position: absolute; left: 0; right: 0; top: 42%; height: 1px; background: rgba(255,255,255,.45); transition: background-color .24s, box-shadow .24s; }
.i-cap.level .i-eyeline { background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.8); }
.i-eyetag { position: absolute; left: 10px; top: calc(42% - 22px); font-family: var(--hand); font-size: 13px; color: rgba(255,255,255,.75); }
.i-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.i-read { display: grid; grid-template-columns: repeat(3, 1fr); padding: 16px 20px 0; }
.i-read dt { font-size: 11px; color: rgba(255,255,255,.55); }
.i-read dd { margin-top: 4px; font-size: 15px; min-height: 18px; display: flex; align-items: center; gap: 3px; font-variant-numeric: tabular-nums; }
.i-lum { position: relative; }
.i-lum i { width: 5px; height: 13px; background: rgba(255,255,255,.2); transition: background-color .2s; }
.i-lum i.on { background: #fff; }
.i-cap.dim .i-lum i.on { background: #9a9a9a; }
.i-tilt { font-family: var(--num); font-size: 18px; letter-spacing: -0.01em; }
.i-shoot-row { margin-top: auto; padding: 0 28px calc(18px + var(--sb)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.i-album { justify-self: start; }
.i-flip { justify-self: end; }
.i-shutter { width: 76px; height: 76px; border-radius: 50%; border: 3px solid #fff; padding: 5px; }
.i-shutter i { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; transition: transform .12s; }
.i-shutter:active i { transform: scale(.9); }
.i-shutter:disabled { opacity: .35; }
.i-vfmsg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; letter-spacing: .3em; color: rgba(30,27,24,.6); }
.i-perm .i-vf { background: transparent; }
.i-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.i-dark .i-shot { filter: brightness(.28) saturate(.7); }
.i-noface .i-shot, .i-read-fail .i-shot { filter: blur(16px); transform: scale(1.1); }
.i-need { position: absolute; left: 0; right: 0; top: 42%; height: 1px; background: rgba(255,255,255,.35); }
.i-needlab { font-size: 10px; color: rgba(255,255,255,.6); margin-left: 6px; }
.i-dark .i-lum i:nth-child(3) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.i-msg { padding: 16px 20px 0; }
.i-msg h1 { font-size: 25px; line-height: 1.3; }
.i-msg p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin-top: 6px; }
.i-acts { margin-top: auto; padding: 12px 20px calc(16px + var(--sb)); display: flex; flex-direction: column; align-items: stretch; }
.i-acts .i-go { margin: 0 0 4px; }
.i-acts .i-t { align-self: center; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
/* 여러 얼굴: 얼굴마다 그 얼굴 폭만큼의 눈높이 띠. 누른 띠만 밝게 남는다 */
.i-band { position: absolute; z-index: 2; background: transparent; border-top: 1px solid rgba(255,255,255,.75); border-bottom: 1px solid rgba(255,255,255,.75); transition: background-color .24s, opacity .24s; }
.i-band span { position: absolute; left: 0; bottom: calc(100% + 4px); font-family: var(--hand); font-size: 22px; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.i-vf.picked .i-shot { filter: brightness(.45); transition: filter .48s; }
.i-vf.picked .i-band:not(.on) { opacity: .4; }
.i-band.on { background: rgba(255,255,255,.12); border-color: #fff; box-shadow: 0 0 0 1px #fff; }
/* 권한 방법 시트 */
.i-sheet { position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,.55); display: flex; align-items: flex-end; }
.i-sheet-in { width: 100%; background: #111; color: #fff; padding: 22px 20px calc(18px + var(--sb)); }
.i-sheet h2 { font-size: 20px; margin-bottom: 8px; }
.i-sheet dt { font-size: 14px; font-weight: 600; margin-top: 12px; }
.i-sheet dd { font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 3px; }
.i-sheet p { font-size: 13px; color: rgba(255,255,255,.55); margin: 14px 0 6px; }
.i-sheet .i-go { margin: 8px 0 0; }

/* ===== 계산 중 · 받는 중: 해가 거꾸로 흐르고, 받는 동안은 그 자리에 MB ===== */
.i-calc .i-bg { position: absolute; inset: 0; }
.i-pane, .i-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.i-calc .i-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.2), rgba(0,0,0,.1) 40%, rgba(0,0,0,.55)); }
.i-mine { position: absolute; z-index: 2; top: calc(44px + var(--st)); left: 0; right: 0; height: 14vh; display: flex; border-top: 1px solid rgba(255,255,255,.6); border-bottom: 1px solid rgba(255,255,255,.6); }
.i-mine .i-strip { flex: 1; }
.i-big { position: absolute; z-index: 2; left: 0; right: 0; top: 54%; transform: translateY(-50%); text-align: center; font-family: var(--num); font-size: calc(var(--aw) * 37 / 100); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; text-shadow: 0 4px 40px rgba(0,0,0,.35); }
.i-load .i-big { font-size: calc(var(--aw) * 30 / 100); }
.i-low { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: calc(26px + var(--sb)); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; }
.i-ttl { min-width: 0; }
.i-cnt { flex: none; font-family: var(--num); font-size: 13px; color: rgba(255,255,255,.75); }
.i-cnt b { font-weight: 400; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.i-sub { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: calc(60px + var(--sb)); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.72); }
.i-load .i-low { bottom: calc(118px + var(--sb)); }
.i-acts-low { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding-bottom: calc(10px + var(--sb)); }
.i-load.stopped .i-big, .i-load.stopped .i-ttl { color: #8a8a8a; }
.i-load.stopped .i-bg { filter: grayscale(1); transition: filter .9s; }
.i-load.stopped .pl { filter: grayscale(1) brightness(.28); }
.i-load.stopped .i-sub { bottom: calc(86px + var(--sb)); }
.i-load.stopped .i-low { bottom: calc(150px + var(--sb)); }

/* 시작 못 함: 주소 줄 */
.i-url { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 20px 0; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); font-size: 13px; color: rgba(255,255,255,.75); }
.i-url .i-t { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

/* ===== 결과 F (D-64): 한 얼굴 · 세로 선 · 두 해 · 흰 띠 · 그림의 벽색 ===== */
.cf { --p: 1; --band: 78px; --under: 68px; overflow: hidden; background: var(--wall); color: #fff; touch-action: none; user-select: none; -webkit-user-select: none; transition: background-color .9s; font-family: var(--sans); }
.cd-face { position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--band) + var(--under) + var(--sb)); }
.cd-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.cd-me { clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.cd-ghost[hidden], .cf-count[hidden] { display: none; }
/* 아래 순위부터 세기(D-78 D): 그림 한 장이 화면을 채우고 왼쪽 아래에 순위 · 매치율 */
.cf-count { position: absolute; inset: 0; z-index: 6; background: var(--wall, #000); }
.cf-count img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.cf-count::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 45%); }
.cf-cn { position: absolute; z-index: 1; left: 20px; bottom: calc(96px + var(--sb)); font-family: var(--hah); font-size: 20px; }
.cf-cs { position: absolute; z-index: 1; left: 18px; bottom: calc(24px + var(--sb)); font-family: var(--bod); font-size: 72px; line-height: 1; font-variant-numeric: lining-nums; }
.cf-shade { position: absolute; left: 0; right: 0; top: 0; height: 40%; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.45), transparent); }
.cd-seam { position: absolute; z-index: 2; top: 0; bottom: calc(var(--band) + var(--under) + var(--sb)); left: calc(var(--p) * 100%); width: 0; }
.cd-seam i { position: absolute; top: 0; bottom: 0; left: -.5px; width: 1px; background: rgba(255,255,255,.9); box-shadow: 0 0 12px rgba(255,255,255,.5); }
.cd-seam b { position: absolute; top: 46%; left: -22px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.95); background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: opacity .48s, transform .2s var(--in); }
.cf.dragging .cd-seam b { transform: scale(1.12); }
.cf.intro .cd-seam b { opacity: 0; }
.cf.intro .cd-seam i { box-shadow: 0 0 22px 2px rgba(255,255,255,.7); }
.cf-yl, .cf-yr { position: absolute; z-index: 1; top: calc(72px + var(--st)); height: min(calc(var(--aw) * 16 / 100), 90px); overflow: hidden; pointer-events: none; color: #fff; }
.cf-yl { left: 0; width: calc(var(--p) * 100%); }
.cf-yr { right: 0; width: calc((1 - var(--p)) * 100%); }
.cf-yl span, .cf-yr span { position: absolute; top: 0; font-family: var(--bod); font-variation-settings: 'opsz' 96; font-size: min(calc(var(--aw) * 17 / 100), 96px); line-height: .82; letter-spacing: -0.02em; font-variant-numeric: lining-nums; white-space: nowrap; }
.cf-yl span { right: 10px; }
.cf-yr span { left: 10px; }
.cd-act { position: absolute; z-index: 3; right: 12px; top: calc(18px + var(--st)); display: flex; gap: 8px; }
.cf-retake { position: absolute; z-index: 3; left: 12px; top: calc(18px + var(--st)); }
/* 친구와 견주기(D-78 C): 해 줄 아래 가운데 알약, 누르면 견주기 카드 */
.cf-vs { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(72px + var(--st) + min(calc(var(--aw) * 16 / 100), 90px) + 14px); min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(13,13,13,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: rgba(255,255,255,.86); font-family: var(--hah); font-size: 14px; white-space: nowrap; }
.cf-like { display: inline-flex; align-items: center; font-size: 13px; }
.cf-like:disabled { pointer-events: none; }
.cf-like[hidden] { display: none; }
.cf-vs b { color: #fff; font-family: var(--bod); font-size: 17px; font-weight: 400; font-variant-numeric: lining-nums; }
.sh-seg[hidden], .sh-blur[hidden] { display: none; }
.pill { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #fff; background: rgba(0,0,0,.32); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform .12s; }
.pill-w { background: #fff; color: #111; }
.pill:active { transform: scale(.97); }
.cf-band { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(var(--under) + var(--sb)); height: var(--band); background: #fff; color: #0d0d0d; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; }
.ca-score { font-family: var(--bod); font-variation-settings: 'opsz' 96; font-size: 58px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.ca-pc { font-family: var(--hah); font-weight: 300; font-size: 24px; margin-left: 3px; }
.ca-cap { font-family: var(--hah); text-align: right; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-cap b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-cap span { font-size: 12px; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-src { font-size: 11px; color: #555; text-decoration: underline; text-underline-offset: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 0 4px 12px; margin: -4px 0; }
.ca-src[hidden] { display: none; }
.ca-score { cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* 사실 한 줄(사용자 10-29): 갈래 탭 바로 위, 사진 위 흰 글씨. CC BY 출처는 사진 오른쪽 가장자리에 세로로 작게 */
.cf-fact { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(var(--under) + var(--band) + var(--sb) + 52px); font-family: var(--hah); font-size: 14px; line-height: 1.5; letter-spacing: -0.01em; color: rgba(255,255,255,.94); text-shadow: 0 1px 10px rgba(0,0,0,.6); pointer-events: none; text-wrap: pretty; }
.cf-fact:empty, .cf-credit:empty { display: none; }
.cf-credit { position: absolute; z-index: 3; right: 5px; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; font-size: 10px; letter-spacing: .02em; color: rgba(255,255,255,.8); text-shadow: 0 0 2px rgba(0,0,0,.7), 0 1px 8px rgba(0,0,0,.7); white-space: nowrap; pointer-events: none; }
/* 결과 화면 갈래 탭: 흰 띠 바로 위, 첫 화면 탭과 같은 꼴(사용자 10-29) */
.cf-kinds { position: absolute; z-index: 3; left: 16px; right: 16px; bottom: calc(var(--under) + var(--band) + var(--sb) + 4px); display: flex; gap: 18px; }
.cf-kinds button { min-height: 40px; font-size: 14px; color: rgba(255,255,255,.62); border-bottom: 1.5px solid transparent; text-shadow: 0 1px 8px rgba(0,0,0,.55); transition: color .24s, border-color .24s; }
.cf-kinds button[aria-selected="true"] { color: #fff; border-color: #fff; }
.cf-under { position: absolute; z-index: 3; left: 16px; right: 12px; bottom: var(--sb); height: var(--under); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cf-up { min-width: 0; font-family: var(--hah); font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72); }
.cf-up b { font-weight: 500; color: #fff; }
.cf-other { min-height: 40px; text-align: left; font: inherit; color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.cf-next { flex: none; min-height: 44px; padding: 0 20px; border-radius: 999px; background: #fff; color: #111; font-size: 15px; font-weight: 650; transition: transform .12s, background-color .2s, opacity .3s; }
.cf-next:active { transform: scale(.98); background: #ececec; }

/* ===== 공유 카드 ===== */
.sh { display: flex; flex-direction: column; background: #000; color: #fff; padding: calc(44px + var(--st)) 16px calc(14px + var(--sb)); }
.sh-top { display: flex; justify-content: space-between; align-items: center; }
.sh-h { font-size: 13px; opacity: .7; }
.tb { min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.sh-card { position: relative; flex: 1; min-height: 0; margin: 4px 0 14px; }
.sh-card img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; box-shadow: 0 30px 70px rgba(0,0,0,.5); }
.sh-card img[hidden] { display: none; }
/* 그리는 동안: 카드 자리(9:16)만 조용히 숨 쉼. 깨진 그림 표시 대신 */
.sh-card.ld::before { content: ''; position: absolute; inset: 0; margin: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; background: rgba(255,255,255,.06); animation: sh-ld 1.6s ease-in-out infinite alternate; }
@keyframes sh-ld { from { opacity: .5; } to { opacity: 1; } }
.sh-retry { position: absolute; inset: 0; margin: auto; width: max-content; height: 44px; }
.sh-ctl { display: flex; flex-direction: column; gap: 10px; }
.sh-seg { display: flex; align-items: center; gap: 4px; }
.sh-lab { font-size: 13px; opacity: .7; margin-right: auto; }
.sh-seg button { min-height: 44px; padding: 0 12px; font-size: 14px; opacity: .6; border-bottom: 1.5px solid transparent; transition: opacity .2s, border-color .2s; }
.sh-seg button[aria-checked="true"] { opacity: 1; border-color: currentColor; }
.sh-blur { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.sh-blur input { flex: 1; accent-color: #fff; min-height: 32px; }
.sh-act { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.sh-act button { min-height: 52px; border-radius: 999px; font-size: 16px; font-weight: 600; transition: transform .12s; }
.sh-save { background: rgba(255,255,255,.14); color: #fff; }
.sh-go { background: #fff; color: #111; }
.sh-act button:active { transform: scale(.98); }

/* ===== 종이(동의 · 나이 확인): 흰 막을 덮은 진주, 먹색 글, 단색 검정이 포인트 ===== */
.i-paper { overflow-y: auto; color: var(--ink); }
.i-mine-top { position: relative; top: 0; height: 13vh; margin-top: calc(40px + var(--st)); border-color: rgba(22,20,18,.25); }
.i-pp { padding: 10px 20px calc(18px + var(--sb)); min-height: calc(100% - 13vh - 40px); display: flex; flex-direction: column; }
.i-age .i-pp { padding-top: calc(48px + var(--st)); min-height: 100%; }
.i-pp > .i-t { align-self: flex-start; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.i-pp h1 { font-size: 27px; line-height: 1.28; margin-top: 6px; }
.i-lead { font-size: 14px; line-height: 1.6; color: rgba(22,20,18,.72); margin-top: 8px; }
.i-pf { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; }
.i-pf .i-go { margin: 0 0 4px; }
.i-pf .i-t { align-self: center; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.i-paper .i-go { background: var(--ink); color: #fff; }
.i-paper .i-t { color: var(--ink); }
.i-paper :focus-visible { outline-color: var(--ink); box-shadow: none; }
.ic-all { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 16px 0; margin-top: 18px; border-bottom: 1px solid rgba(22,20,18,.16); cursor: pointer; }
.ic-all b { display: block; font-size: 17px; font-weight: 600; }
.ic-all small { display: block; font-size: 12.5px; line-height: 1.5; color: rgba(22,20,18,.6); margin-top: 3px; }
.ic-list { list-style: none; }
.ic-list li { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(22,20,18,.1); }
.ic-list label { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; }
.ic-list dl { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 4px 0 12px 36px; font-size: 13px; line-height: 1.5; }
.ic-list dt { color: rgba(22,20,18,.6); }
.ic-list dd { white-space: pre-line; } /* 받는 자 두 줄 */
.cs-t em { font-style: normal; font-weight: 600; }
li:has([data-req="false"]) .cs-t em { font-weight: 400; color: rgba(22,20,18,.55); }
.cs-view { min-height: 44px; padding: 0 2px 0 12px; font-size: 13px; color: rgba(22,20,18,.75); text-decoration: underline; text-underline-offset: 3px; }
.cs-note { grid-column: 1 / -1; color: var(--ink); margin-top: 4px; }
.ic-fine, .i-fine { font-size: 12px; line-height: 1.55; color: rgba(22,20,18,.6); margin-top: 12px; }
input.cs-all, input.cs-one { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cs-box { position: relative; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; transition: background-color .2s; }
.cs-box::after { content: ''; position: absolute; left: 6px; top: 2px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .24s var(--in); }
input:checked + .cs-box { background: var(--ink); }
input:checked + .cs-box::after { transform: rotate(45deg) scale(1); }
input:focus-visible + .cs-box { outline: 2px solid var(--ink); outline-offset: 3px; }
/* 나이 바퀴: 해 하나가 화면을 채우는 바퀴(계산 중의 큰 해와 같은 말). 처음은 「선택」 */
.i-wheels { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10px; margin: 24px 0 14px; }
.wh { position: relative; }
.wh-lab { display: block; height: 18px; line-height: 18px; margin-bottom: 6px; font-size: 12px; color: rgba(22,20,18,.6); }
.wh-band { position: absolute; left: 0; right: 0; top: calc(24px + 100px); height: 64px; background: var(--ink); }
.wh-list { position: relative; height: 264px; overflow-y: auto; scroll-snap-type: y mandatory; padding: 100px 0; scrollbar-width: none; -webkit-mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); mask-image: linear-gradient(transparent, #000 32%, #000 68%, transparent); outline-offset: -2px; }
.wh-list::-webkit-scrollbar { display: none; }
.wh-opt { height: 64px; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 52px; color: rgba(22,20,18,.28); font-variant-numeric: tabular-nums; transition: color .2s; cursor: pointer; }
.wh-opt.on { color: #fff; }
.wh-none { font-family: var(--sans); font-size: 15px; }
.i-out { display: flex; flex-direction: column; flex: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* ===== PoC 넓힘(10-30): 링크로 받은 결과 · 방문 통계 시트 · 의견 · 연락처 ===== */
.i-from { font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,.7); margin-bottom: 6px; }
.i-from b { font-weight: 600; color: #fff; }
.i-stats .st-line { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.72); margin: 4px 0 12px; }
.st-age { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; min-height: 44px; font-size: 15px; cursor: pointer; }
.st-age input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.i-sheet .cs-box { border-color: #fff; }
.i-sheet input:checked + .cs-box { background: #fff; }
.i-sheet .cs-box::after { border-color: #111; }
.i-sheet input:focus-visible + .cs-box { outline: 2px solid #fff; outline-offset: 3px; }
.st-row { display: flex; justify-content: space-between; margin-top: 2px; }
.st-row .i-t { font-size: 14px; text-decoration: underline; text-underline-offset: 4px; color: rgba(255,255,255,.8); display: inline-flex; align-items: center; }
.sh-more { display: flex; justify-content: center; gap: 18px; margin-top: -2px; }
.sh-more .tb { opacity: .8; }
.sh-more .tb[hidden] { display: none; }
.i-fb .i-sheet-in { display: flex; flex-direction: column; }
.fb-stars { border: 0; display: flex; gap: 8px; margin: 4px 0 14px; }
.fb-stars legend { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 8px; }
.fb-stars button { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); font-family: var(--bod); font-size: 20px; color: #fff; transition: background-color .2s, color .2s, border-color .2s; }
.fb-stars button.on { background: #fff; color: #111; border-color: #fff; }
.fb-body { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(255,255,255,.72); }
.fb-body small { color: rgba(255,255,255,.5); font-size: 12px; }
.fb-body textarea { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 12px; resize: none; }
/* 커뮤니티 ② · ③(D-78) */
.i-feed { display: block; margin: -2px 0 6px; font-size: 13px; color: rgba(255,255,255,.8); min-height: 36px; }
.i-feed[hidden], .hall-del[hidden], .hall-join[hidden] { display: none; }
.hall-list { list-style: none; margin: 6px 0 12px; max-height: 46vh; overflow-y: auto; }
.hall-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.hall-list li span { font-family: var(--bod); font-size: 18px; opacity: .7; }
.hall-list li em { font-style: normal; font-family: var(--bod); font-size: 20px; }
.hall-list li.me b { text-decoration: underline; text-underline-offset: 4px; }
.hall-list li.empty, .bd-list li.empty { display: block; color: rgba(255,255,255,.6); font-size: 14px; border: 0; }
.i-hall .i-t, .i-join .i-t { margin-right: 20px; }
.join-ck { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.85); }
.join-ck input { width: 20px; height: 20px; accent-color: #fff; flex: none; margin-top: 1px; }
.fb-body input { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); border-radius: 12px; padding: 12px; }
.i-board { display: flex; flex-direction: column; background: #000; color: #fff; padding: calc(44px + var(--st)) 16px calc(14px + var(--sb)); }
.bd-tabs { margin: 10px 0 6px; }
.bd-list { list-style: none; flex: 1; overflow-y: auto; }
.bd-list li { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.bd-list img { width: 52px; height: 65px; object-fit: cover; }
.bd-list b { display: block; font-size: 15px; }
.bd-list span { font-size: 12.5px; color: rgba(255,255,255,.65); }
.bd-heart { min-height: 44px; padding: 0 10px; font-size: 15px; color: rgba(255,255,255,.7); }
.bd-heart[aria-pressed="true"] { color: #fff; }
.bd-heart i { font-style: normal; font-family: var(--bod); }
.bd-report { min-height: 44px; font-size: 12px; color: rgba(255,255,255,.5); text-decoration: underline; text-underline-offset: 3px; }
.fb-err { min-height: 18px; font-size: 13px; color: #ffb4a8; margin: 6px 0 0; }
.i-fb .i-t { align-self: center; text-decoration: underline; text-underline-offset: 4px; font-size: 14px; }
.i-ct .i-pp { padding-top: calc(10px + var(--st)); min-height: 100%; }
.ct-f { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; font-size: 13px; color: rgba(22,20,18,.7); }
.ct-f input { font: inherit; font-size: 16px; color: var(--ink); min-height: 48px; padding: 0 2px; background: transparent; border: 0; border-bottom: 1.5px solid rgba(22,20,18,.3); border-radius: 0; transition: border-color .2s; }
.ct-f input:focus { outline: none; border-color: var(--ink); }
.ct-f input[aria-invalid="true"] { border-color: #a3271b; }
.ct-f input::placeholder { color: rgba(22,20,18,.38); }
.ct-err { font-style: normal; font-size: 12.5px; color: #a3271b; min-height: 0; }
.ct-err:empty { display: none; }
@media (max-height: 560px) { .i-copy .i-size, .i-copy .i-com, .i-copy .i-feed { display: none; } } /* 낮은 화면 · 가로: 띠 「나」가 잘리지 않게 크기 안내와 커뮤니티 줄(D-78)을 뺀다(크기는 계산 중 화면에 보이고, 커뮤니티는 세로로 돌리면 보임) */
.cf .i-sheet { touch-action: auto; user-select: text; -webkit-user-select: text; }