/* Nintendo 2001 direction: DESIGN.md palette, hard bevels and console chrome.
   [임의] Type and touch sizes are enlarged for the speaker's mobile call surface. */
#call-preview .s-call-dialog {
  --call-canvas:#7a8aba; --call-sky:#9fbee7; --call-lavender:#acace7;
  --call-indigo:#3d4f97; --call-ice:#c0d5e6; --call-platinum:#dedede;
  --call-ink:#21242e; --call-teal:#206479; --call-orange:#f68d1f;
  --call-amber:#ecab37; --call-red:#e60012; --call-white:#fff;
  color-scheme:light; position:fixed; inset:auto; margin:0; padding:0; max-width:none;
  max-height:100dvh; border:0; overflow:hidden; color:var(--call-ink); background:var(--call-canvas);
  font-family:Arial,Helvetica,'Noto Sans KR',sans-serif;
}
#call-preview .s-call-dialog::backdrop { background:#21242e33; }
#call-preview .s-call-screen {
  display:flex; flex-direction:column; height:100%; min-height:0; padding:12px; overflow-y:auto;
  background:repeating-linear-gradient(0deg,#ffffff08 0 1px,transparent 1px 4px),linear-gradient(110deg,#9fbee7,#7a8aba 60%,#60619c);
  box-shadow:inset 2px 2px #d6e3ff,inset -2px -2px var(--call-indigo); text-align:center;
}
#call-preview .s-call-dialog :is(button,.call-ui-control,h2,h3,p) { font-family:inherit; }
#call-preview .s-call-dialog :is(h2,h3) { text-wrap:balance; }
#call-preview .s-call-dialog p { text-wrap:pretty; }
#call-preview .s-call-masthead,#call-preview .s-call-bottom {
  background-color:var(--call-ink); background-image:radial-gradient(#46516a 0.65px,transparent 0.8px); background-size:4px 4px;
  border:1px solid var(--call-indigo); border-top-color:#e0e8ff; border-left-color:#c0d5e6;
  box-shadow:0 2px 0 var(--call-indigo); flex-shrink:0;
}
#call-preview .s-call-masthead { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:68px; padding:14px 16px; }
#call-preview .s-call-brand { margin:0; padding:3px 13px 4px; border:2px solid var(--call-red); border-radius:999px; outline:2px solid white; background:white; color:var(--call-red); font-size:18px; font-weight:900; line-height:24px; letter-spacing:-.5px; }
#call-preview .s-call-incoming-tag { display:flex; align-items:center; gap:7px; color:var(--call-amber); font-size:16px; line-height:24px; font-weight:700; white-space:nowrap; }
#call-preview .s-call-substrip { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; min-height:38px; padding:7px 16px; border:1px solid var(--call-indigo); border-top-color:#dfeaff; background:var(--call-sky); font-size:15px; line-height:22px; font-weight:700; text-align:left; }
#call-preview .s-call-lights { display:flex; gap:4px; }
#call-preview .s-call-lights i { display:block; width:5px; height:12px; background:var(--call-indigo); border-top:1px solid #21242e; border-bottom:1px solid #e4edff; }
#call-preview .s-call-incoming-main { display:flex; flex:1; flex-direction:column; min-height:0; margin:12px 0; border:2px solid var(--call-indigo); border-right-color:#dce6ff; border-bottom-color:#dce6ff; }
#call-preview .s-call-caller-card { position:relative; isolation:isolate; display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:24px; min-height:290px; padding:28px 20px 24px; overflow:hidden; background:var(--call-lavender); }
#call-preview .s-call-caller-card::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,transparent 49.5%,#3d4f9717 49.5% 50.5%,transparent 50.5%),linear-gradient(0deg,transparent 49.5%,#3d4f9717 49.5% 50.5%,transparent 50.5%); background-size:32px 32px; }
#call-preview .s-call-caller-card::after { content:''; position:absolute; z-index:-1; width:180px; height:180px; right:-75px; bottom:5px; border:12px double #d8deff; transform:rotate(45deg); box-shadow:0 0 0 12px #3d4f9730,0 0 0 24px #d8deff66; }
#call-preview .s-call-caller-title { z-index:1; }
#call-preview .s-call-name { margin:0; color:white; font-family:'Arial Black',Arial,'Noto Sans KR',sans-serif; font-size:64px; line-height:1.2; font-weight:900; letter-spacing:-2px; -webkit-text-stroke:5px var(--call-indigo); paint-order:stroke fill; text-shadow:4px 5px 0 var(--call-indigo); }
#call-preview #s-call-status { margin:12px 0 0; color:var(--call-ink); font-size:22px; line-height:30px; font-weight:700; }
#call-preview .s-call-avatar { position:relative; display:block; width:134px; height:134px; flex-shrink:0; transform:rotate(-10deg); }
#call-preview .s-call-avatar > span { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:118px; height:126px; border:3px solid; border-color:#f1f4ff #5569a8 #3d4f97 #dce6ff; border-radius:10px; background:linear-gradient(135deg,#dedede,#c0d5e6 50%,#8ba1d4); color:var(--call-ink); box-shadow:5px 6px 0 #3d4f97; }
#call-preview .s-call-avatar > span svg.lucide { box-sizing:content-box; width:42px!important; height:42px!important; padding:10px 14px; border:2px solid; border-color:#3d4f97 #f0f4ff #f0f4ff #3d4f97; border-radius:3px; background:var(--call-teal); color:white; stroke-width:2.4; }
#call-preview .s-call-avatar b { width:48px; height:8px; background:repeating-linear-gradient(90deg,var(--call-indigo) 0 3px,transparent 3px 6px); }
#call-preview .s-call-avatar > i { position:absolute; right:-5px; bottom:0; display:grid; place-items:center; width:46px; height:42px; border:2px solid; border-color:#ffe8b5 #8b590c #8b590c #ffe8b5; border-radius:4px; background:var(--call-amber); color:var(--call-ink); box-shadow:2px 3px 0 var(--call-indigo); }
#call-preview .s-call-avatar > i svg.lucide { width:24px!important; height:24px!important; stroke-width:2; }
#call-preview .s-call-invitation { position:relative; margin:0; padding:18px 12px; border-top:1px solid var(--call-indigo); box-shadow:inset 0 1px white; background:var(--call-platinum); color:var(--call-ink); font-size:19px; line-height:1.55; font-weight:700; }
#call-preview .s-call-bottom { width:100%; padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px)); }
#call-preview .s-call-actions { display:flex; flex-direction:column; gap:12px; }
#call-preview .s-call-actions :where(button,.call-ui-control),#call-preview .s-call-home { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; min-height:52px; padding:10px 16px; border:2px solid; border-radius:4px; font-size:21px; line-height:28px; font-weight:700; cursor:pointer; box-shadow:0 3px 0 #080f23; }
#call-preview .s-call-circle { display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; color:inherit; }
#call-preview .s-call-circle svg.lucide { width:27px!important; height:27px!important; stroke-width:2.2; }
#call-preview .s-call-actions [data-scall=answer],#call-preview .s-call-home { min-height:68px; border-color:#ffdfa5 #b75606 #a84c00 #ffd295; background:linear-gradient(#ffb343,var(--call-orange)); color:var(--call-ink); font-size:23px; }
#call-preview .s-call-forward { display:grid; place-items:center; margin-left:auto; width:27px; height:27px; border:1px solid #8e4300; border-radius:50%; background:#ffca75; }
#call-preview .s-call-forward svg.lucide { width:20px!important; height:20px!important; }
#call-preview .s-call-actions [data-scall=answer] > .s-call-circle { margin-left:auto; }
#call-preview .s-call-actions [data-scall=decline] { min-height:48px; padding:8px 16px; border-color:white #6f79a4 #56618c #e0e8ff; background:linear-gradient(#e9edf6,#c0d5e6); color:var(--call-ink); font-size:18px; }
#call-preview [data-scall=decline] .s-call-circle { color:#b00013; }
#call-preview .is-red svg.lucide { transform:rotate(135deg); }
#call-preview .s-call-dialog[data-state=connected] {
  --connected-bg:#f4f3f1;
  --connected-card:#fff;
  --connected-ink:#171513;
  --connected-muted:#5f5853;
  --connected-accent:#8a3c22;
  --connected-accent-soft:#f7e9e1;
  --connected-danger:#b42318;
  --connected-line:#d9d4d0;
  background:var(--connected-bg);
  color:var(--connected-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
#call-preview .s-call-dialog[data-state=connected] .s-call-screen {
  padding:0;
  overflow:hidden;
  background:var(--connected-bg);
  box-shadow:none;
  text-align:left;
}
#call-preview .s-call-connected-masthead {
  min-height:82px;
  padding:18px 22px;
  border:0;
  border-bottom:1px solid var(--connected-line);
  background:var(--connected-card);
  background-image:none;
  box-shadow:none;
}
#call-preview .s-call-connected-title { display:flex; min-width:0; align-items:center; gap:10px; }
#call-preview .s-call-connected-title .s-call-name {
  margin:0;
  color:var(--connected-ink);
  font-family:inherit;
  font-size:24px;
  line-height:32px;
  font-weight:800;
  letter-spacing:-.035em;
  -webkit-text-stroke:0;
  text-shadow:none;
}
#call-preview .s-call-connected-title .s-call-name:focus { outline:none; }
#call-preview .s-call-status-dot { width:12px; height:12px; flex:0 0 12px; border:3px solid #d8eedc; border-radius:50%; background:#17783e; box-shadow:none; }
#call-preview .s-call-time { display:block; flex-shrink:0; color:var(--connected-ink); font-size:22px; line-height:30px; font-weight:800; font-variant-numeric:tabular-nums; }
#call-preview .s-call-connected-main {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  padding:24px 22px 20px;
}
#call-preview .s-call-connection-status {
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  gap:16px;
  padding:0 0 24px;
  border-bottom:1px solid var(--connected-line);
}
#call-preview .s-call-connection-icon { display:grid; width:56px; height:56px; place-items:center; border-radius:18px; background:var(--connected-accent-soft); color:var(--connected-accent); }
#call-preview .s-call-connection-icon svg.lucide { width:30px!important; height:30px!important; stroke-width:2.5; }
#call-preview .s-call-connection-status h3 { margin:0; color:var(--connected-ink); font-size:23px; line-height:32px; font-weight:800; letter-spacing:-.035em; }
#call-preview .s-call-connection-status p { margin:4px 0 0; color:var(--connected-muted); font-size:18px; line-height:27px; }
#call-preview .s-call-conversation { display:flex; flex:1; min-height:0; flex-direction:column; margin:0; border:0; background:transparent; text-align:left; }
#call-preview .s-call-transcript-heading { flex-shrink:0; padding:24px 0 8px; border:0; background:transparent; box-shadow:none; }
#call-preview #s-call-transcript-title { margin:0; color:var(--connected-muted); font-size:18px; font-weight:700; line-height:27px; }
#call-preview .s-call-transcript {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:0;
}
#call-preview .s-call-message { display:grid; grid-template-columns:52px minmax(0,1fr); gap:12px; align-items:start; margin:0; padding:18px 0; border:0; border-bottom:1px solid var(--connected-line); background:transparent; box-shadow:none; }
#call-preview .s-call-message:last-child { border-bottom:0; }
#call-preview .s-call-message-name { display:block; min-width:0; padding:2px 0; background:transparent; color:var(--connected-accent); font-size:18px; line-height:28px; font-weight:800; }
#call-preview .s-call-message > p { margin:0; padding:0; color:var(--connected-ink); font-size:23px; line-height:1.48; font-weight:650; white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; }
#call-preview .s-call-message.is-self { margin:0; background:transparent; }
#call-preview .s-call-message.is-self .s-call-message-name { background:transparent; color:var(--connected-muted); }
#call-preview .s-call-connected-bottom {
  width:100%;
  padding:14px 22px calc(18px + env(safe-area-inset-bottom,0px));
  border:0;
  border-top:1px solid var(--connected-line);
  background:var(--connected-card);
  background-image:none;
  box-shadow:none;
}
#call-preview .s-call-audio-hint { margin:0 0 12px; color:var(--connected-muted); font-size:16px; line-height:24px; text-align:center; }
#call-preview .s-call-actions.is-connected { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#call-preview .s-call-actions.is-connected :where(button,.call-ui-control) { min-height:76px; padding:12px 8px; flex-direction:row; gap:9px; border:2px solid; border-radius:18px; box-shadow:none; font-size:18px; line-height:26px; font-weight:800; }
#call-preview .s-call-actions [data-scall=speaker] { border-color:#8f8782; background:#fff; color:var(--connected-ink); }
#call-preview .s-call-actions [data-scall=speaker][aria-pressed=true] { border-color:var(--connected-accent); background:var(--connected-accent-soft); color:var(--connected-accent); box-shadow:none; }
#call-preview .s-call-actions [data-scall=end] { border-color:var(--connected-danger); background:var(--connected-danger); color:#fff; }
#call-preview .s-call-actions.is-connected .s-call-circle { width:28px; height:28px; }
#call-preview .s-call-actions.is-connected .s-call-circle svg.lucide { width:26px!important; height:26px!important; }
#call-preview .s-call-recovery-state {
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  margin:12px 0;
  padding:28px 22px;
  border:2px solid;
  border-color:var(--call-indigo) #dce6ff #dce6ff var(--call-indigo);
  background:#fff;
  color:var(--call-ink);
}
#call-preview .s-call-recovery-symbol {
  display:grid;
  width:84px;
  height:84px;
  margin-bottom:24px;
  place-items:center;
  border:3px solid var(--call-indigo);
  border-radius:50%;
  background:var(--call-ice);
  color:var(--call-indigo);
  box-shadow:3px 4px 0 var(--call-indigo);
}
#call-preview .s-call-recovery-symbol svg.lucide { width:40px!important; height:40px!important; stroke-width:2.4; }
#call-preview .s-call-recovery-state .s-call-name { margin:0; color:var(--call-ink); font-family:inherit; font-size:30px; line-height:1.35; font-weight:800; letter-spacing:-.04em; -webkit-text-stroke:0; text-shadow:none; }
#call-preview .s-call-recovery-state #s-call-status { margin:20px 0 0; color:var(--call-ink); font-size:22px; line-height:1.55; font-weight:600; }
#call-preview .s-call-recovery-state small { margin-top:18px; color:#4d5568; font-size:16px; line-height:24px; }
#call-preview .s-call-recovery-actions [data-scall=redial] { min-height:68px; border-color:#ffdfa5 #b75606 #a84c00 #ffd295; background:linear-gradient(#ffb343,var(--call-orange)); color:var(--call-ink); font-size:22px; }
#call-preview .s-call-recovery-actions [data-scall=home-after-drop] { min-height:48px; border-color:white #75829d #65718e #e4eaff; background:linear-gradient(#e7edf5,#c0d5e6); color:var(--call-ink); font-size:18px; }
#call-preview .s-call-welcome { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; min-height:350px; margin:12px 0; padding:24px 12px; border:2px solid; border-color:var(--call-indigo) #dce6ff #dce6ff var(--call-indigo); background:var(--call-lavender); }
#call-preview .s-call-finished { display:grid; place-items:center; width:72px; height:72px; margin-bottom:24px; border:3px solid; border-color:white #4e629b #3d4f97 #dce6ff; border-radius:6px; background:var(--call-ice); color:var(--call-indigo); box-shadow:3px 4px 0 var(--call-indigo); }
#call-preview .s-call-finished svg.lucide { width:38px!important; height:38px!important; stroke-width:2.5; }
#call-preview .s-call-farewell { margin:28px 0 22px; color:var(--call-ink); font-size:22px; line-height:1.6; }
#call-preview .s-call-duration { padding:9px 16px; border:1px solid; border-color:var(--call-indigo) #f4f7ff #f4f7ff var(--call-indigo); background:var(--call-ice); color:var(--call-ink); font-size:17px; line-height:26px; font-variant-numeric:tabular-nums; }
#call-preview .s-call-home { width:100%; }
#call-preview .s-call-dialog:is([data-state=incoming],[data-state=dropped],[data-state=ended]) {
  --simple-bg:#f4f3f1;
  --simple-card:#fff;
  --simple-ink:#171513;
  --simple-muted:#5f5853;
  --simple-accent:#8a3c22;
  --simple-accent-soft:#f7e9e1;
  color:var(--simple-ink);
  background:var(--simple-bg);
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
}
#call-preview .s-call-dialog:is([data-state=incoming],[data-state=dropped],[data-state=ended]) .s-call-screen {
  padding:0;
  overflow:hidden;
  background:var(--simple-bg);
  box-shadow:none;
}
#call-preview .s-call-simple-header { display:flex; min-height:70px; flex-shrink:0; align-items:center; padding:16px 22px; border-bottom:1px solid #d9d4d0; background:var(--simple-card); }
#call-preview .s-call-simple-header p { margin:0; color:var(--simple-muted); font-size:18px; line-height:28px; font-weight:700; }
#call-preview .s-call-simple-state { display:flex; flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; text-align:center; }
#call-preview .s-call-simple-icon { display:grid; width:96px; height:96px; margin-bottom:30px; place-items:center; border-radius:32px; background:var(--simple-accent-soft); color:var(--simple-accent); }
#call-preview .s-call-simple-icon svg.lucide { width:48px!important; height:48px!important; stroke-width:2.3; }
#call-preview .s-call-simple-state .s-call-name { margin:0; color:var(--simple-ink); font-family:inherit; font-size:34px; line-height:1.35; font-weight:800; letter-spacing:-.045em; -webkit-text-stroke:0; text-shadow:none; }
#call-preview .s-call-simple-state .s-call-name:focus { outline:none; }
#call-preview .s-call-simple-state .s-call-duration { margin-top:20px; padding:0; border:0; background:transparent; color:var(--simple-muted); font-size:18px; line-height:28px; }
#call-preview .s-call-simple-bottom { width:100%; padding:18px 22px calc(20px + env(safe-area-inset-bottom,0px)); border:0; border-top:1px solid #d9d4d0; background:var(--simple-card); background-image:none; box-shadow:none; }
#call-preview .s-call-simple-actions { gap:12px; }
#call-preview .s-call-simple-actions :where(button,.call-ui-control),
#call-preview .s-call-simple-bottom .s-call-home { min-height:72px; border:2px solid; border-radius:18px; box-shadow:none; font-size:21px; line-height:30px; font-weight:800; }
#call-preview .s-call-simple-actions [data-scall=answer],
#call-preview .s-call-simple-actions [data-scall=redial],
#call-preview .s-call-simple-bottom .s-call-home { border-color:var(--simple-accent); background:var(--simple-accent); color:#fff; }
#call-preview .s-call-simple-actions [data-scall=decline],
#call-preview .s-call-simple-actions [data-scall=home-after-drop] { min-height:58px; border-color:#8f8782; background:#fff; color:var(--simple-ink); font-size:18px; }
#call-preview .s-call-simple-actions [data-scall=answer] > .s-call-circle { margin-left:0; }
#call-preview .s-call-dialog:is([data-state=incoming],[data-state=dropped],[data-state=ended]) button:focus-visible { outline:3px solid #17623b; outline-offset:3px; }
#call-preview .s-call-dialog button:focus-visible { outline:3px solid white; outline-offset:4px; }
#call-preview .s-call-dialog[data-state=connected] button:focus-visible { outline:3px solid #17623b; outline-offset:3px; }
#call-preview .s-call-transcript:focus-visible { outline:3px solid var(--call-indigo); outline-offset:-3px; }
#call-preview .s-call-latest:focus-visible { outline-color:var(--call-indigo); }
#call-preview .s-call-dialog button:active { translate:0 2px; box-shadow:none; }
@media(max-height:740px) {
  #call-preview .s-call-screen { padding:10px; }
  #call-preview .s-call-masthead { min-height:60px; padding:11px 14px; }
  #call-preview .s-call-caller-card { min-height:246px; gap:18px; padding:20px 16px; }
  #call-preview .s-call-name { font-size:54px; }
  #call-preview .s-call-caller-card .s-call-avatar { width:110px; height:104px; }
  #call-preview .s-call-caller-card .s-call-avatar > span { width:100px; height:102px; gap:8px; }
  #call-preview .s-call-caller-card .s-call-avatar > span svg.lucide { width:34px!important; height:34px!important; padding:7px 12px; }
  #call-preview .s-call-caller-card .s-call-avatar > i { width:38px; height:36px; right:-7px; }
  #call-preview .s-call-invitation { padding:12px; font-size:18px; }
  #call-preview .s-call-bottom { padding:12px 14px calc(14px + env(safe-area-inset-bottom,0px)); }
  #call-preview .s-call-connected-masthead { min-height:70px; padding:14px 18px; }
  #call-preview .s-call-connected-main { padding:18px 18px 12px; }
  #call-preview .s-call-connection-status { grid-template-columns:48px minmax(0,1fr); gap:12px; padding-bottom:16px; }
  #call-preview .s-call-connection-icon { width:48px; height:48px; border-radius:15px; }
  #call-preview .s-call-transcript-heading { padding-top:16px; }
  #call-preview .s-call-message { padding:12px 0; }
  #call-preview .s-call-message > p { font-size:21px; }
  #call-preview .s-call-connected-bottom { padding:10px 18px calc(12px + env(safe-area-inset-bottom,0px)); }
  #call-preview .s-call-actions.is-connected :where(button,.call-ui-control) { min-height:68px; }
  #call-preview .s-call-welcome { min-height:310px; }
  #call-preview .s-call-farewell { margin:22px 0 18px; }
}
@media(max-width:360px) {
  #call-preview .s-call-masthead { padding-inline:12px; }
  #call-preview .s-call-brand { padding-inline:10px; font-size:17px; }
  #call-preview .s-call-incoming-tag { font-size:15px; }
  #call-preview .s-call-actions.is-connected { gap:10px; }
  #call-preview .s-call-actions.is-connected :where(button,.call-ui-control) { font-size:17px; }
  #call-preview .s-call-conversation .s-call-transcript-heading { padding-inline:10px; }
  #call-preview #s-call-transcript-title { font-size:15px; }
}
@media(prefers-reduced-motion:reduce) {
}