/* 백도어 인터랙티브 — 아이폰 화면 (잠금화면 · 카톡 알림 · FaceTime 수신/통화)
   치수는 iPhone 390×844(상태바 54) 기준. 백도어 화면소품 v3 실측값을 이어받음 */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Apple SD Gothic Neo", "Pretendard Variable", Pretendard, "Noto Sans KR", sans-serif;
  --ink: #fff;
  --sub: rgba(235, 235, 245, .6);
  --sub2: rgba(235, 235, 245, .3);
  --blue: #0a84ff;
  --green: #30d158;
  --red: #ff453a;
  --gold: #e8c98a;
  --tint: #e9eeff;      /* 잠금화면 시계 색(벽지에서 뽑은 차가운 흰색) */
  --tint2: #c3cde6;
  --glass: rgba(30, 30, 34, .55);
  --t: 0px;             /* 위쪽 기준 보정(모바일 사파리는 진짜 상태바가 따로 있음) */
  --b: 0px;             /* 아래쪽 기준 보정 */
  --kb: 0px;            /* 키보드 높이 */
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: #000; color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; }
body { display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 40%, #15171d, #050506 70%); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

/* SF Symbols (맥에서 뽑은 원본 기호를 마스크로) */
.sym { display: inline-block; width: 1.25em; height: 1.25em; flex: none; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.s-chev { --m: url(img/sf/chevron.right.png); } .s-spk { --m: url(img/sf/speaker.wave.2.fill.png); } .s-spkoff { --m: url(img/sf/speaker.slash.fill.png); }
.s-camoff { --m: url(img/sf/video.slash.fill.png); } .s-vid { --m: url(img/sf/video.fill.png); } .s-micoff { --m: url(img/sf/mic.slash.fill.png); }
.s-msg { --m: url(img/sf/message.fill.png); } .s-end { --m: url(img/sf/phone.down.fill.png); } .s-plus { --m: url(img/sf/plus.png); }
.s-up { --m: url(img/sf/arrow.up.png); } .s-alarm { --m: url(img/sf/alarm.fill.png); } .s-lock { --m: url(img/sf/lock.fill.png); }
.s-flash { --m: url(img/sf/flashlight.off.fill.png); } .s-camera { --m: url(img/sf/camera.fill.png); } .s-person { --m: url(img/sf/person.fill.png); }
.s-again { --m: url(img/sf/arrow.clockwise.png); } .s-share { --m: url(img/sf/square.and.arrow.up.png); } .s-x { --m: url(img/sf/xmark.png); }

/* ───────── 무대: 폰에선 화면 꽉, 큰 화면에선 아이폰 테두리 ───────── */
.stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; background: #000; isolation: isolate;
  --t: calc(env(safe-area-inset-top, 0px) - 40px); --b: calc(env(safe-area-inset-bottom, 0px) - 20px); }
@media (min-width: 600px) {
  .stage { position: relative; inset: auto; width: 390px; height: 844px; border-radius: 55px; transform: scale(var(--k, 1)); flex: none;
    --t: 0px; --b: 0px;
    box-shadow: 0 0 0 10px #0d0d0f, 0 0 0 11.5px #3b3b40, 0 0 0 13px #1a1a1d, 0 50px 120px rgba(0, 0, 0, .75); }
}
.stage > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 0;
  transition: filter .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
.stage > video { opacity: 0; } .stage.vid > video { opacity: 1; }
.stage.connecting > video { filter: blur(22px) brightness(1.3); transform: scale(1.08); }
.stage.ending > video { filter: blur(16px) brightness(.55) saturate(.7); transform: scale(1.04); }

/* 데스크톱 폰 테두리 부속 */
.sb, .island, .homebar { display: none; }
@media (min-width: 600px) {
  .sb { position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 90; display: flex; align-items: center; justify-content: space-between;
    padding: 4px 30px 0 46px; font-size: 17px; font-weight: 600; letter-spacing: -.3px; color: #fff; pointer-events: none; }
  .sb-r { display: flex; align-items: center; gap: 7px; }
  .bat { position: relative; width: 27px; height: 13px; border-radius: 4.2px; display: inline-block; margin-right: 3px;
    background: linear-gradient(90deg, #fff 0 87%, rgba(255,255,255,.36) 87% 100%); }
  .bat::after { content: ""; position: absolute; right: -3px; top: 4.2px; width: 1.7px; height: 4.6px; border-radius: 0 1.5px 1.5px 0; background: #fff; opacity: .4; }
  .bat i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 700 11px/1 -apple-system, "SF Pro Text", sans-serif; color: #000; font-style: normal; letter-spacing: -.35px; }
  .island { display: block; position: absolute; top: 11px; left: 50%; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; z-index: 95; pointer-events: none; }
  .isl-dot { position: absolute; right: 14px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); opacity: 0; transition: opacity .3s; }
  .stage.cam-on .isl-dot { opacity: 1; }
  .homebar { display: block; position: absolute; bottom: 8px; left: 50%; width: 140px; height: 5px; margin-left: -70px; border-radius: 3px; background: #fff; opacity: .85; z-index: 95; pointer-events: none; }
}

/* 필름 그레인(아주 얇게) */
.grain { position: absolute; inset: -50%; z-index: 5; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-size: 160px 160px; animation: grain .9s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); } 60% { transform: translate(-6%,-2%); } 80% { transform: translate(5%,4%); } 100% { transform: translate(0,0); } }

/* ───────── 잠금화면 ───────── */
.lock { position: absolute; inset: 0; z-index: 30; color: var(--tint); opacity: 0; pointer-events: none; transition: opacity .7s; }
.lock.on { opacity: 1; pointer-events: auto; }
.lock .wallp { position: absolute; inset: -3%; background: #0b0d14 url(img/wall.jpg) center / cover no-repeat; transform: scale(1.12); filter: brightness(.2);
  transition: transform 1.2s cubic-bezier(.2,1,.32,1), filter 1.2s; animation: drift 18s ease-in-out infinite alternate; }
.lock.on .wallp { transform: scale(1); filter: none; }
@keyframes drift { from { translate: 0 0; } to { translate: -5px -7px; } }
.lock::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, rgba(0,0,0,.14) 70%, rgba(0,0,0,.34)); }
.lk-glyph { position: absolute; top: calc(60px + var(--t)); left: 50%; margin-left: -7px; width: 14px; height: 18px; z-index: 2; color: var(--tint); }
.lk-date, .lk-time { position: absolute; left: 0; right: 0; text-align: center; z-index: 2; transform: translateY(-14px); opacity: 0; transition: transform .9s cubic-bezier(.2,1,.32,1) .15s, opacity .6s .15s; }
.lock.on .lk-date, .lock.on .lk-time { transform: none; opacity: 1; }
.lk-date { top: calc(84px + var(--t)); font-size: 20px; font-weight: 600; letter-spacing: -.1px; }
.lk-time { top: calc(101px + var(--t)); font-size: 112px; font-weight: 500; letter-spacing: -2.5px; line-height: 1; font-variant-numeric: tabular-nums; }
.lk-notis { position: absolute; left: 17px; right: 17px; bottom: calc(190px + var(--b)); display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.noti { display: flex; gap: 14px; align-items: flex-start; padding: 13px 12px 15px; border-radius: 20px; color: #fff; text-align: left;
  background: rgba(28, 30, 40, .55); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.13); animation: notiIn .7s cubic-bezier(.2,1,.32,1) both; }
.noti.still { animation: none; }
.noti.out { animation: notiOut .35s ease-in forwards; }
@keyframes notiIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes notiOut { to { opacity: 0; transform: scale(.94); } }
.nic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; overflow: hidden; }
img.nic { object-fit: cover; }
.nic.ft { background: linear-gradient(180deg, #5ad25f, #2fb447); color: #fff; font-size: 18px; }
.nb { flex: 1; min-width: 0; padding-top: 1px; }
.nh { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.2px; }
.nh em { font-style: normal; font-weight: 400; font-size: 13px; color: var(--tint2); white-space: nowrap; }
.nr { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 1px; }
.nm { font-size: 15px; line-height: 1.33; margin-top: 3px; letter-spacing: -.15px; word-break: keep-all; overflow-wrap: anywhere; }
.lk-bottom { position: absolute; left: 0; right: 0; bottom: calc(48px + var(--b)); display: flex; justify-content: space-between; padding: 0 45px; z-index: 2; }
.lk-btn { width: 51px; height: 51px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px;
  background: rgba(40, 42, 56, .55); backdrop-filter: blur(30px) saturate(1.4); -webkit-backdrop-filter: blur(30px) saturate(1.4); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12); }

/* 사원 정보 시트 */
.sh-dim { position: absolute; inset: 0; z-index: 4; background: rgba(0,0,0,.42); opacity: 0; pointer-events: none; transition: opacity .4s; }
.lock.sheet-open .sh-dim { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; left: 8px; right: 8px; bottom: calc(8px + max(var(--kb), env(safe-area-inset-bottom, 0px))); z-index: 5; padding: 7px 16px 18px; border-radius: 34px; color: #fff;
  background: rgba(32, 32, 36, .82); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12), 0 -10px 40px rgba(0,0,0,.35);
  transform: translateY(115%); transition: transform .55s cubic-bezier(.2,1,.32,1), bottom .25s; }
.lock.sheet-open .sheet { transform: none; }
.grab { width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: rgba(255,255,255,.28); }
.sh-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 40px; }
.sh-head b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.sh-head button { justify-self: end; font-size: 17px; font-weight: 600; color: var(--blue); padding: 6px 4px; }
.sh-head button:disabled { color: var(--sub2); cursor: default; }
.sh-av { width: 84px; height: 84px; margin: 12px auto 8px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; font-weight: 600; letter-spacing: -1px;
  background: linear-gradient(180deg, #a8acb5, #7b7f88); color: #fff; }
.sh-av .sym { font-size: 34px; }
.sh-org { text-align: center; font-size: 15px; color: var(--sub); letter-spacing: -.2px; }
.sh-group { margin: 18px 0 6px; border-radius: 14px; background: rgba(118,118,128,.18); overflow: hidden; }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; font-size: 17px; letter-spacing: -.4px; position: relative; }
.sh-row + .sh-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: .5px; background: rgba(84,84,88,.65); }
.sh-row input { flex: 1; min-width: 0; text-align: right; color: #fff; background: none; border: 0; outline: none; font-size: 17px; letter-spacing: -.4px; caret-color: var(--blue); }
.sh-row input::placeholder { color: var(--sub2); }
.sh-row em { font-style: normal; color: var(--sub); }
.sh-foot { padding: 0 16px; font-size: 13px; color: var(--sub); letter-spacing: -.1px; }
.sh-btn { display: block; width: 100%; height: 50px; margin-top: 18px; border-radius: 25px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 600; letter-spacing: -.4px; transition: transform .15s; }
.sh-btn:active { transform: scale(.98); }
.sheet.shake { animation: shake .35s; }
@keyframes shake { 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }

/* ───────── 영상통화 수신 (연락처 포스터 + 깊이 효과) ───────── */
.incoming { position: absolute; inset: 0; z-index: 40; background: #000; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity .45s, transform .6s cubic-bezier(.2,1,.32,1); }
.incoming.on { opacity: 1; pointer-events: auto; }
.incoming.answer { opacity: 0; transform: scale(1.06); pointer-events: none; }
.ip-photo, .ip-cut { position: absolute; bottom: 0; left: 50%; height: var(--ph, 85%); aspect-ratio: var(--par, 2 / 3); translate: -50% 0; background: center / cover no-repeat; transform-origin: 50% 40%; }
.ip-photo { z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%); mask-image: linear-gradient(180deg, transparent 0, #000 16%); }
.ip-cut { z-index: 2; pointer-events: none; }
.incoming.on .ip-photo, .incoming.on .ip-cut { animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } }
.ip-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%, transparent 52%, rgba(0,0,0,.6) 82%, rgba(0,0,0,.78)); }
.ip-top { position: absolute; left: 0; right: 0; top: calc(66px + var(--t)); z-index: 1; text-align: center; }
.ip-kind { font-size: 17px; font-weight: 500; letter-spacing: -.3px; color: rgba(255,255,255,.88); }
.ip-name { margin-top: 2px; font-size: 74px; font-weight: 700; letter-spacing: -1.5px; line-height: 1.05; color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
html[lang=ja] .ip-name { font-size: min(54px, 14vw); letter-spacing: -1px; white-space: nowrap; }   /* 「ソ・ジヒョク」이 두 줄로 깨지던 것(10/14 검증) */
.ip-row { position: absolute; left: 0; right: 0; bottom: calc(196px + var(--b)); z-index: 3; display: flex; justify-content: space-between; padding: 0 62px; }
.ip-sm { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; letter-spacing: -.3px; color: #fff; }
.ip-sm .c { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 17px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14); }
.slide { position: absolute; left: 36px; right: 36px; bottom: calc(92px + var(--b)); height: 72px; z-index: 3; border-radius: 36px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none;
  background: rgba(255,255,255,.16); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.16); }
.slide-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(255,255,255,.14); }
.slide-text { position: absolute; inset: 0; display: grid; place-items: center; padding-left: 58px; font-size: 20px; letter-spacing: -.4px; color: transparent;
  background: linear-gradient(90deg, rgba(255,255,255,.45) 0%, #fff 45%, rgba(255,255,255,.45) 60%) 0 0 / 230% 100%; -webkit-background-clip: text; background-clip: text; animation: shimmer 2.4s linear infinite; }
@keyframes shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.slide-knob { position: absolute; top: 5px; left: 5px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--green); font-size: 22px; box-shadow: 0 2px 10px rgba(0,0,0,.25); cursor: grab; }
.slide.dragging .slide-knob { cursor: grabbing; }
/* 메시지로 답하기 시트 */
.as-dim { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.4); opacity: 0; pointer-events: none; transition: opacity .3s; }
.as { position: absolute; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 6; display: flex; flex-direction: column; gap: 8px; transform: translateY(120%); transition: transform .45s cubic-bezier(.2,1,.32,1); }
.incoming.asking .as-dim { opacity: 1; pointer-events: auto; }
.incoming.asking .as { transform: none; }
.as-grp, .as-cancel { border-radius: 16px; overflow: hidden; background: rgba(44,44,48,.88); backdrop-filter: blur(40px) saturate(1.6); -webkit-backdrop-filter: blur(40px) saturate(1.6); }
.as-grp button, .as-cancel { display: block; width: 100%; min-height: 57px; padding: 0 16px; font-size: 19px; letter-spacing: -.4px; color: var(--blue); position: relative; }
.as-grp button + button::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: rgba(84,84,88,.65); }
.as-cancel { font-weight: 600; }

/* ───────── 통화 화면 ───────── */
.call { position: absolute; inset: 0; z-index: 20; opacity: 0; pointer-events: none; transition: opacity .5s; }
.stage.in-call .call { opacity: 1; pointer-events: auto; }
.hotspots { position: absolute; inset: 0; z-index: 1; }
.hotspot { position: absolute; padding: 0; }
.ft { position: absolute; top: calc(58px + var(--t)); left: 10px; right: 10px; z-index: 4; padding: 12px 14px 14px; border-radius: 28px;
  background: rgba(36,36,40,.5); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.12);
  transition: opacity .35s, transform .45s cubic-bezier(.2,1,.32,1); }
.ft.hide { opacity: 0; transform: translateY(-14px) scale(.98); pointer-events: none; }
.ft-head { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.ft-av { width: 34px; height: 34px; border-radius: 50%; flex: none; background: #555 center / cover no-repeat; }
.ft-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ft-who b { font-size: 17px; font-weight: 600; letter-spacing: -.4px; }
.ft-who small { font-size: 13px; color: var(--sub); letter-spacing: -.1px; font-variant-numeric: tabular-nums; }
.ft-head .s-chev { font-size: 11px; color: var(--sub); }
.ft-btns { display: flex; justify-content: space-between; margin-top: 12px; }
.ft-b { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(255,255,255,.16); transition: background .2s, color .2s, transform .12s; }
.ft-b:active { transform: scale(.94); }
.ft-b.on { background: #fff; color: #000; }
.ft-b.end { background: var(--red); color: #fff; font-size: 21px; }
.pip { position: absolute; right: 12px; top: calc(196px + var(--t)); z-index: 3; width: 92px; height: 138px; border-radius: 16px; overflow: hidden; background: #1c1c1e; cursor: pointer;
  box-shadow: 0 6px 24px rgba(0,0,0,.4), inset 0 0 0 .5px rgba(255,255,255,.14); transition: top .45s cubic-bezier(.2,1,.32,1); }
.ft.hide ~ .pip { top: calc(58px + var(--t)); }
.pip video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: 0; transition: opacity .4s; }
.pip.live video { opacity: 1; }
.pip-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--sub); font-size: 13px; transition: opacity .3s; }
.pip.live .pip-off { opacity: 0; }
.pip-off span { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, #a8acb5, #7b7f88); color: #fff; font-size: 16px; font-weight: 600; letter-spacing: -.5px; }
.talk { position: absolute; left: 12px; right: 12px; bottom: calc(60px + max(var(--kb), env(safe-area-inset-bottom, 0px))); z-index: 3; display: flex; flex-direction: column; gap: 8px; pointer-events: none; transition: bottom .25s; }
.bubbles { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bub { max-width: 76%; padding: 7px 13px 8px; border-radius: 19px; background: #0b84fe; color: #fff; font-size: 16px; line-height: 1.32; letter-spacing: -.3px; word-break: keep-all; overflow-wrap: anywhere;
  animation: pop .35s cubic-bezier(.2,1.3,.4,1) both; transform-origin: 100% 100%; transition: opacity .4s; }
.bub.old { opacity: .5; }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(10px); } }
.bub-meta { font-size: 11px; color: rgba(235,235,245,.62); padding-right: 4px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.lc { align-self: stretch; padding: 9px 14px 11px; border-radius: 20px; background: rgba(20,20,24,.56); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.1); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.lc.show { opacity: 1; transform: none; }
.lc-who { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--sub); letter-spacing: -.1px; }
.lc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); opacity: .35; }
.lc.speaking .lc-dot { opacity: 1; animation: talkDot .5s ease-in-out infinite alternate; }
@keyframes talkDot { to { transform: scale(1.5); } }
.lc-text { margin-top: 3px; font-size: 18px; font-weight: 600; line-height: 1.38; letter-spacing: -.4px; word-break: keep-all; overflow-wrap: anywhere; }
.lc-text .w { display: inline-block; max-width: 100%; opacity: 0; filter: blur(3px); animation: word .32s forwards; white-space: pre-wrap; overflow-wrap: anywhere; }
@keyframes word { to { opacity: 1; filter: none; } }
html[lang=ja] .lc-text, html[lang=ja] .bub, html[lang=ja] .nm, html[lang=ja] .end-sub { word-break: normal; line-break: strict; }   /* 일본어는 keep-all이면 문장이 통째로 한 낱말 취급 */
.lc.typing .lc-text { display: flex; gap: 5px; padding: 8px 0 5px; }
.lc.typing .lc-text i { width: 8px; height: 8px; border-radius: 50%; background: rgba(235,235,245,.7); animation: dots 1.2s infinite; }
.lc.typing .lc-text i:nth-child(2) { animation-delay: .15s; } .lc.typing .lc-text i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.quick { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; pointer-events: auto; }
.quick:empty { display: none; }
.quick button { font-size: 15px; letter-spacing: -.3px; padding: 8px 14px; border-radius: 18px; background: rgba(255,255,255,.16); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: inset 0 0 0 .5px rgba(255,255,255,.24); animation: pop .35s cubic-bezier(.2,1.3,.4,1) both; }
.quick button:nth-child(2) { animation-delay: .06s; } .quick button:nth-child(3) { animation-delay: .12s; }
.compose { position: absolute; left: 10px; right: 10px; bottom: calc(10px + max(var(--kb), env(safe-area-inset-bottom, 0px))); z-index: 4; display: flex; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .35s, transform .35s, bottom .25s; }
.stage.can-chat .compose { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 600px) { .compose { bottom: 26px; } .talk { bottom: 78px; } }
.cp-plus { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 15px; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.16); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.cp-field { position: relative; flex: 1; min-width: 0; height: 38px; border-radius: 19px; background: rgba(28,28,32,.5); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.cp-field input { width: 100%; height: 100%; padding: 0 44px 0 14px; font-size: 17px; letter-spacing: -.4px; color: #fff; background: none; border: 0; outline: none; caret-color: var(--blue); }
.cp-field input::placeholder { color: rgba(235,235,245,.45); }
.cp-send { position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: #fff; background: var(--blue);
  transform: scale(0); transition: transform .2s cubic-bezier(.2,1.4,.4,1); }
.compose.has-text .cp-send { transform: scale(1); }
.cp-send:disabled { opacity: .45; }

/* ───────── 위에서 내려오는 알림·토스트 ───────── */
.banner { position: absolute; left: 8px; right: 8px; top: calc(54px + var(--t)); z-index: 60; cursor: pointer; transform: translateY(calc(-100% - 80px)); transition: transform .55s cubic-bezier(.2,1,.32,1); }
.banner.on { transform: none; }
.banner .noti { background: rgba(30,30,34,.74); animation: none; box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14), 0 10px 30px rgba(0,0,0,.35); }
.banner .nh em { color: var(--sub); }
.toast { position: absolute; left: 50%; top: calc(64px + var(--t)); z-index: 61; max-width: 86%; padding: 10px 16px; border-radius: 20px; font-size: 14px; letter-spacing: -.2px; text-align: center; white-space: normal; width: max-content; word-break: keep-all; overflow-wrap: anywhere;
  background: rgba(30,30,34,.82); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.14);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ───────── 끝 화면 ───────── */
.endcard { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; padding: 0 24px; text-align: center;
  background: rgba(4,4,8,.5); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); opacity: 0; pointer-events: none; transition: opacity .7s; }
.endcard.open { opacity: 1; pointer-events: auto; }
.endcard.hidden-route { background: rgba(10,6,2,.82); }
.end-in { width: 100%; }
.end-logo { width: 150px; margin-bottom: 18px; opacity: .94; filter: drop-shadow(0 0 12px rgba(160,190,255,.4)); }
.endcard.hidden-route .end-logo { filter: sepia(1) saturate(2.2) hue-rotate(-12deg) brightness(1.05) drop-shadow(0 0 14px rgba(232,201,138,.55)); }
.end-call { margin-bottom: 18px; font-size: 13px; color: var(--sub); font-variant-numeric: tabular-nums; }
.end-kicker { margin-bottom: 6px; font-size: 11px; letter-spacing: .28em; color: var(--sub); }
.end-title { font-size: 30px; font-weight: 700; letter-spacing: -.6px; }
.end-title .lt { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(6px); animation: lt .6s cubic-bezier(.2,.8,.2,1) forwards; white-space: pre; }
@keyframes lt { to { opacity: 1; transform: none; filter: none; } }
.end-sub { margin: 10px 0 24px; font-size: 15px; line-height: 1.5; color: rgba(235,235,245,.75); word-break: keep-all; }
.endcard.hidden-route .end-kicker, .endcard.hidden-route .end-title { color: var(--gold); }
.end-btns { display: flex; gap: 10px; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0 22px; border-radius: 24px; font-size: 16px; font-weight: 600; letter-spacing: -.3px; background: #fff; color: #000; transition: transform .15s; }
.pill .sym { font-size: 14px; }
.pill:active { transform: scale(.97); }
.pill.glass { color: #fff; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.end-found { margin-top: 18px; font-size: 12px; color: rgba(235,235,245,.45); }

/* ───────── 숨은 루트 전환 ───────── */
.flash { position: absolute; inset: 0; z-index: 80; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), rgba(200,215,255,.25) 40%, transparent 70%); }
.flash.on { animation: flash .7s ease-out forwards; }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.glitch { position: absolute; inset: 0; z-index: 81; pointer-events: none; opacity: 0; display: grid; place-items: center; }
.glitch.on { animation: glitchIn 1.8s steps(1, end) forwards; }
.glitch-noise { position: absolute; inset: -20%; background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px), radial-gradient(circle at 30% 40%, rgba(232,201,138,.35), transparent 60%); mix-blend-mode: screen; animation: jitter .12s infinite; }
.glitch-text { position: relative; font-size: 15px; color: var(--gold); letter-spacing: .04em; text-shadow: 2px 0 rgba(255,0,60,.6), -2px 0 rgba(0,200,255,.6); }
@keyframes glitchIn { 0% { opacity: 0; } 8% { opacity: 1; background: #fff; } 14% { background: transparent; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes jitter { 0% { transform: translate(0,0); } 25% { transform: translate(-6px,3px); } 50% { transform: translate(5px,-4px); } 75% { transform: translate(-3px,-2px); } 100% { transform: translate(0,0); } }
.stage.rgb > video { animation: rgbSplit .9s steps(6) 1; }
@keyframes rgbSplit { 0%,100% { filter: none; transform: none; } 20% { filter: hue-rotate(40deg) saturate(2); transform: translateX(-4px) skewX(3deg); } 50% { filter: invert(.15) contrast(1.6); transform: translateX(5px); } 80% { filter: sepia(.8); transform: none; } }

/* ───────── 탭해서 시작 · 오프닝 ───────── */
.tap { position: absolute; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #000; cursor: pointer; transition: opacity .5s; }
.tap.hide { opacity: 0; pointer-events: none; }
.tap-in { text-align: center; }
.tap-ring { position: relative; width: 74px; height: 74px; margin: 0 auto 22px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); }
.tap-ring::before, .tap-ring::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(190,210,255,.55); animation: tapPulse 2.2s ease-out infinite; }
.tap-ring::after { animation-delay: 1.1s; }
.tap-ring span { position: absolute; inset: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px rgba(170,195,255,.9); }
@keyframes tapPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
.tap-text { font-size: 12px; letter-spacing: .5em; padding-left: .5em; color: rgba(255,255,255,.85); }
.tap-sub { margin-top: 10px; font-size: 12px; color: rgba(255,255,255,.38); }
.tap-foot { position: absolute; bottom: calc(40px + var(--b)); font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.25); }
.intro { position: absolute; inset: 0; z-index: 84; background: #000; opacity: 0; pointer-events: none; transition: opacity .8s; }
.intro.on { opacity: 1; pointer-events: auto; }
.intro.off { opacity: 0; }
.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-sub { position: absolute; left: 0; right: 0; top: 58%; text-align: center; font-size: 11px; letter-spacing: 1.1em; padding-left: 1.1em; color: rgba(225,232,255,0);
  transition: color 1.2s, letter-spacing 2.4s cubic-bezier(.2,.8,.2,1); }
.intro-sub.on { color: rgba(225,232,255,.72); letter-spacing: .48em; }
.slit { position: absolute; left: 0; right: 0; height: 50%; background: #000; z-index: 2; transition: transform 1.1s cubic-bezier(.7,0,.2,1); }
.slit.top { top: 0; } .slit.bottom { bottom: 0; }
.intro.open .slit.top { transform: translateY(-100%); }
.intro.open .slit.bottom { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .glitch-noise, .slide-text, .incoming.on .ip-photo, .incoming.on .ip-cut, .lock .wallp, .grain { animation: none; }
}

/* 점검용(?debug=1): 전환 효과 끄기 */
.stage.notrans, .stage.notrans * { transition: none !important; }

/* ───────── 다국어(10/14): 시작 화면 언어 고르기 · 일본어 글꼴 ───────── */
.tap-langs { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.tap-langs button { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 13px; letter-spacing: -.1px; color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 .5px rgba(255,255,255,.22); transition: background .2s, color .2s, transform .15s; }
.tap-langs button.on { background: #fff; color: #000; font-weight: 600; }
.tap-langs button:active { transform: scale(.96); }
html[lang="ja"] { --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }

/* 10/14 검증 반영: 작은 버튼은 보이는 크기는 그대로, 누르는 영역만 넓힘 · 가로 모드 안내 */
.cp-plus { position: relative; }
.cp-plus::after, .cp-send::after { content: ''; position: absolute; inset: -8px; }
.rotate { display: none; position: fixed; inset: 0; z-index: 200; background: #000; color: rgba(235,235,245,.85); flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 15px; letter-spacing: -.2px; }
.rotate i { width: 34px; height: 56px; border: 2px solid rgba(255,255,255,.7); border-radius: 8px; animation: rot 1.8s ease-in-out infinite; }
@keyframes rot { 0%, 30% { transform: rotate(-90deg); } 60%, 100% { transform: rotate(0deg); } }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) { .rotate { display: flex; } }
/* 10/14 페이블 검증 반영 */
.end-btns { flex-wrap: wrap; }
.pill { white-space: nowrap; flex-shrink: 0; }
.end-title, .sh-foot, .end-sub { text-wrap: balance; }
html[lang=ja] .end-title { font-size: 26px; }
html[lang=ja] .bub[lang=ko] { word-break: keep-all; }   /* 일본어 화면에서 한국어로 친 말은 음절 중간에서 안 끊기게 */
@media (max-height: 640px) {   /* 320×568 같은 작은 폰: 채팅이 내 카메라 창과 겹치지 않게, 이름 칸이 시계를 덮지 않게 */
  .bub.old { display: none; }
  .lc-text { font-size: 16px; }
  .sh-av { width: 60px; height: 60px; margin: 6px auto 4px; font-size: 24px; }
}

/* 10/14 안내 문구(사용자 "AI 캐릭터는 예시, 본 서비스는 바뀔 수 있다 — 보조 안전장치"): 첫 화면 아래·엔딩 아래 */
.tap-disc { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(64px + var(--b)); width: min(320px, 84vw); margin: 0; font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.34); text-align: center; word-break: keep-all; }
.end-disc { margin: 18px auto 0; max-width: 300px; font-size: 10.5px; line-height: 1.55; color: rgba(255,255,255,.34); text-align: center; word-break: keep-all; }
html[lang="ja"] .tap-disc, html[lang="ja"] .end-disc { word-break: normal; line-break: strict; }