/* DaiZ Automation — marketing site
   Palette = mobile/constants/colors.ts (the production app theme).
   Warm editorial: light, mint-anchored, Fraunces display + Inter body.  */

/* ── fonts — 모바일 앱과 동일하게 Inter 단일 (utils/fonts.ts 기준) ── */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('assets/inter-var.woff2') format('woff2');
}

/* ── tokens (from the app) ─────────────────────────────── */
:root{
  --mint:#88C9A1; --mint-600:#6BAF87; --mint-700:#52956D;
  --wash:#E8F5EE; --wash-2:#C8E6D5;
  --bg:#FFFFFF; --card:#FFFFFF;
  --ink:#171717; --ink-2:#525252; --ink-3:#737373;
  --emerald:#059669;
  --navy:#1A1A2E;
  --error:#EF4444; --success:#4CAF50;
  --disp:'Inter',-apple-system,'Segoe UI',sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  /* 모든 섹션이 공유하는 좌우 레일 — 왼쪽 시작선이 페이지 전체에서 일치한다 */
  --rail:clamp(1.25rem,5vw,4.5rem);
  --rail-w:1280px;
  /* 자체 배경 없는 섹션용: 캡에 패딩 몫을 포함해야
     풀블리드 섹션(패딩 → 내부 1280 캡)과 시작 x 가 같아진다 */
  --rail-outer:calc(var(--rail-w) + 2*var(--rail));
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:hidden}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit}

h1,h2{font-family:var(--disp);font-weight:700;line-height:1.1;letter-spacing:-.028em}
h1{font-size:clamp(2.5rem,6vw,4.4rem);text-wrap:balance}
h1 .accent{color:var(--mint-700)}
h2{font-size:clamp(1.9rem,4vw,3rem);text-wrap:balance}

.eyebrow{
  font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mint-700);margin-bottom:1rem;
}

/* ── buttons ───────────────────────────────────────────── */
.btn-primary,.btn-ghost{
  display:inline-block;font-weight:600;font-size:.95rem;text-decoration:none;
  border-radius:999px;padding:.72rem 1.5rem;transition:all .25s var(--ease);
  border:1.5px solid transparent;cursor:pointer;font-family:var(--body);
}
.btn-primary{background:var(--mint);color:var(--ink)}
.btn-primary:hover{background:var(--mint-600);box-shadow:0 0 0 6px color-mix(in srgb,var(--mint) 25%,transparent)}
.btn-ghost{border-color:color-mix(in srgb,var(--ink) 18%,transparent);color:var(--ink)}
.btn-ghost:hover{border-color:var(--mint-600);color:var(--mint-700)}
.btn-lg{padding:.95rem 2rem;font-size:1.05rem}

/* ── header ────────────────────────────────────────────── */
.site-header{
  display:flex;align-items:center;gap:2.5rem;
  padding:1.1rem clamp(1.25rem,4vw,3.5rem);
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid color-mix(in srgb,var(--ink) 6%,transparent);
}
.brand{background:var(--mint);border-radius:12px;padding:.35rem .6rem;
  display:inline-flex;line-height:0}
.brand img{height:30px;width:auto}
.site-nav{display:flex;gap:1.75rem;font-size:.92rem;font-weight:500}
.site-nav a{text-decoration:none;color:var(--ink-2)}
.site-nav a:hover{color:var(--mint-700)}
.header-actions{margin-left:auto;display:flex;gap:.7rem;align-items:center}
@media(max-width:720px){
  .site-nav{display:none}
  .site-header{gap:1rem;padding:.85rem 1.1rem}
  .header-actions{gap:.5rem}
  .btn-primary,.btn-ghost{padding:.6rem 1.1rem;font-size:.88rem}
}

/* ── hero ──────────────────────────────────────────────── */
.hero{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);
  align-items:center;
  padding:clamp(1rem,2.5vh,1.75rem) var(--rail) clamp(3rem,8vh,6rem);
  max-width:var(--rail-outer);margin:0 auto;
}
.hero-sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);
  margin:1.4rem 0 2rem;max-width:44rem;text-wrap:pretty}
.hero-sub .line{display:block}
.hero-sub strong{color:var(--mint-700)}
.hero-cta{display:flex;gap:.9rem;flex-wrap:wrap}

/* hero orbit — 대시보드 궤도 이미지 */
.hero-orbit{margin:0;display:flex;flex-direction:column;align-items:stretch}
.hero-orbit img{
  width:100%;aspect-ratio:4/5;object-fit:cover;   /* 칸을 항상 꽉 채우고 넘치는 부분만 잘림 */
  max-height:min(72vh,640px);
  border-radius:26px;
  box-shadow:0 30px 70px -34px color-mix(in srgb,var(--navy) 30%,transparent)}
.hero-orbit figcaption{margin-top:.85rem;text-align:center;font-size:.85rem;color:var(--ink-3)}
.hero-orbit strong{color:var(--mint-700)}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-orbit{max-width:440px;justify-self:center}
}


/* ── flagship ──────────────────────────────────────────── */
.flagship{background:var(--card);padding:clamp(4rem,10vh,7rem) var(--rail)}
.flagship>*{max-width:var(--rail-w);margin-left:auto;margin-right:auto}
.flagship-sub{margin-top:1.2rem;margin-left:0;color:var(--ink-2);max-width:none;font-size:.98rem}
.lifecycle{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(1.2rem,3vw,2.4rem);margin-top:3rem;
}
.lifecycle h3{font-family:var(--disp);font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
  border-top:2px solid var(--mint-600);padding-top:.9rem}
.lifecycle p{margin-top:.55rem;font-size:.95rem;color:var(--ink-2)}


/* ── automations ───────────────────────────────────────── */
.auto-list{list-style:none;margin-top:3rem;display:grid;gap:clamp(2rem,5vh,3.2rem)}
.auto-list li{display:flex;gap:clamp(1.2rem,3vw,2.4rem);align-items:baseline}
.num{font-family:var(--disp);font-size:2rem;font-weight:700;
  color:var(--mint);line-height:1.25;min-width:1.9em}
.auto-list h3{font-size:1.25rem;font-weight:600}
.auto-list p{margin-top:.4rem;color:var(--ink-2);max-width:34rem}


/* ── works with (연동) ─────────────────────────────────── */
.works{margin-top:clamp(2.5rem,5vh,3.5rem);padding-top:clamp(1.8rem,3.5vh,2.4rem);
  border-top:1px solid color-mix(in srgb,var(--ink) 9%,transparent);max-width:var(--rail-w)}
.works-lead{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3)}
.works-list{list-style:none;display:flex;flex-wrap:wrap;
  align-items:center;gap:.85rem clamp(1.6rem,3.5vw,2.8rem);margin-top:1.4rem}
.works-list li{color:var(--c)}
.works-list b{font-size:1.18rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.works-list li:nth-child(3) b{font-weight:500;letter-spacing:-.01em}
.works-list li:nth-child(5) b{font-size:1.02rem;letter-spacing:.02em}
.works-list span{font-weight:400;color:var(--ink-2)}

/* ── numbers ───────────────────────────────────────────── */
.numbers h2{max-width:var(--rail-w);margin:0 auto 1.8rem}
.numbers{background:var(--wash);padding:clamp(4rem,10vh,7rem) var(--rail)}
.numgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.4rem,3.5vw,3rem);max-width:var(--rail-w);margin:0 auto}
.numline{margin:0}
.numline em{display:block;font-family:var(--disp);font-style:normal;font-weight:700;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2.4rem,4.6vw,3.4rem);color:var(--mint-700)}
.numline span{display:block;margin-top:.55rem;font-size:.92rem;color:var(--ink-2);
  text-wrap:pretty;max-width:22rem}
.numfoot{max-width:var(--rail-w);margin:2.6rem auto 0;font-size:.83rem;color:var(--ink-3)}


/* ── faq ───────────────────────────────────────────────── */
.faq{background:var(--card);
  padding:clamp(3rem,8vh,5.5rem) var(--rail)}
.faq h2,.faq details{max-width:var(--rail-w);margin-left:auto;margin-right:auto}
.faq h2{max-width:none}
.faq details{border-bottom:1px solid color-mix(in srgb,var(--ink) 9%,transparent)}
.faq summary{
  cursor:pointer;list-style:none;font-weight:600;font-size:1.03rem;
  padding:1.15rem 2rem 1.15rem 0;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:.2rem;top:50%;
  transform:translateY(-50%);font-weight:400;font-size:1.4rem;color:var(--mint-600);
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding:0 0 1.25rem;color:var(--ink-2)}
.faq h2{margin-bottom:1.4rem}

/* ── demo form ─────────────────────────────────────────── */
.demo-cta{
  position:relative;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(4rem,11vh,7.5rem) clamp(1.5rem,6vw,5rem);
}
.demo-rings{
  position:absolute;left:-200px;bottom:-260px;width:680px;height:680px;border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    transparent 0 82px, color-mix(in srgb,var(--mint) 20%,transparent) 82px 84px);
  mask-image:radial-gradient(circle,black 30%,transparent 70%);
  pointer-events:none;
}
.demo-cta h2{color:#fff;max-width:640px;margin:0 auto;text-align:center}
.demo-cta h2 em{font-style:italic;color:var(--mint)}
.demo-sub{color:#A8ACB8;text-align:center;max-width:34rem;margin:1.1rem auto 0}
.demo-form{
  max-width:620px;margin:2.6rem auto 0;position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;
}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label{font-size:.83rem;font-weight:600;color:#C9CCD6}
.field input{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid transparent;border-radius:10px;
  padding:.78rem .9rem;outline:none;transition:border-color .2s,box-shadow .2s;
}
.field input:focus{border-color:var(--mint);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint) 28%,transparent)}
.field input.invalid{border-color:var(--error)}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.demo-form .btn-primary{grid-column:1/-1;justify-self:center;margin-top:.6rem;min-width:260px;text-align:center}
.consent{grid-column:1/-1;font-size:.78rem;color:#8A8FA0;text-align:center;max-width:34rem;justify-self:center}
.consent a{color:#C9CCD6}
.form-msg{grid-column:1/-1;text-align:center;font-size:.95rem;min-height:1.4em}
.form-msg.ok{color:var(--mint)}
.form-msg.err{color:#FF9B9B}
@media(max-width:560px){.demo-form{grid-template-columns:1fr}}

/* ── footer ────────────────────────────────────────────── */
.site-footer{
  padding:2.6rem 1.5rem 3rem;text-align:center;color:var(--ink-3);font-size:.88rem;
  display:grid;gap:.5rem;justify-items:center;
}
.site-footer .foot-logo{background:var(--mint);border-radius:10px;
  padding:.3rem .55rem;display:inline-flex;line-height:0}
.site-footer img{height:24px;width:auto}
.site-footer a{color:var(--ink-2)}

/* ── reveal motion ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease) var(--d,0s),transform .7s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .bubble{opacity:1;transform:none;transition:none}
  .live-dot{animation:none}
}

/* ── one app (기능 목록 + 클릭 가능한 앱 목업) ────────── */
.oneapp{background:var(--wash);
  padding:.5rem var(--rail) clamp(1.5rem,3vh,3rem)}
.oneapp-grid{max-width:var(--rail-w);margin:0 auto;
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.oneapp-copy{order:2}
.oneapp-phone{order:1}
.oneapp-sub{color:var(--ink-2);margin-top:1.1rem;max-width:38rem}
.oneapp-copy .auto-list{margin-top:2.2rem;gap:1.8rem}
.oneapp-copy .auto-list p{max-width:none}
.oneapp-copy .auto-list li{align-items:start}
.oneapp-phone{display:flex;flex-direction:column;align-items:center;position:sticky;top:96px}
.mock-lead{margin-bottom:.6rem;font-size:.95rem;font-weight:600;color:var(--ink);text-align:center}
.mock-note{margin-top:.45rem;font-size:.72rem;font-weight:400;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);text-align:center}
@media(max-width:900px){
  .oneapp{padding-top:2.25rem}              /* 1단이 되면 상단 숨통이 필요 */
  .oneapp-grid{grid-template-columns:1fr;justify-items:center}
  .oneapp-copy{width:100%;order:0}          /* 모바일은 제목부터 */
  .oneapp-phone{order:1;position:static}    /* sticky 해제 */
  .oneapp-copy .auto-list{margin-top:1.8rem}
}
/* ── app mockup — 실제 앱(mobile/) 과 1:1 대응 ─────────────
   토큰 출처 constants/colors.ts / 레이아웃 출처 (tabs)/*.tsx        */
.mock-phone{
  --p:#88C9A1; --pd:#6BAF87; --p50:#E8F5EE; --p700:#3F7A57;
  --slate:#F8FAFC; --line:#F5F5F5; --n400:#A3A3A3; --n500:#737373; --n600:#525252; --n900:#171717;
  width:375px; height:700px; flex:none;
  transform:scale(var(--s,1)); transform-origin:top left;
  border:10px solid #1F2937; border-radius:44px; background:var(--slate);
  box-shadow:0 30px 70px -30px color-mix(in srgb,var(--navy) 50%,transparent),
             0 0 0 2px rgba(255,255,255,.6) inset;
  overflow:hidden; position:relative; display:flex; flex-direction:column;
  font-size:13px; line-height:1.35;
}
.mock-phone .ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

/* 화면 */
.msc{position:absolute;inset:0;display:flex;flex-direction:column;
  animation:mfade .3s var(--ease)}
.msc[hidden]{display:none}
@keyframes mfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.mbody{flex:1;overflow-y:auto;padding:14px 14px 84px;scrollbar-width:none}
.mbody::-webkit-scrollbar{display:none}

/* Home 헤더 — bg-primary-500 rounded-b-3xl */
.mtop{background:var(--p);padding:12px 14px 14px;border-radius:0 0 22px 22px;
  display:flex;align-items:center;gap:7px;flex:none;
  box-shadow:0 1px 3px rgba(0,0,0,.06)}
.mbiz{font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--n900);white-space:nowrap}
.mrule{flex:1;height:1.5px;background:#fff;border-radius:2px}
.mbrand{font-weight:700;font-size:15px;letter-spacing:-.04em;color:var(--n900)}
.mbrand i{font-style:normal;color:rgba(23,23,23,.4)}
.mlive{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;
  color:rgba(23,23,23,.7);letter-spacing:.02em}
.mlive i{width:6px;height:6px;border-radius:50%;background:#10B981;animation:mpulse 1.8s ease-in-out infinite}
@keyframes mpulse{0%,100%{opacity:1}50%{opacity:.3}}
.mrefresh{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:var(--n900);font-size:13px}

/* 섹션 라벨 — text-2xs bold neutral-400 uppercase tracking-widest */
.mlabel{font-size:9px;font-weight:700;color:var(--n400);text-transform:uppercase;
  letter-spacing:.12em;margin:14px 0 7px 4px}
.mbody>.mlabel:first-child{margin-top:2px}

/* 카드 */
.mcard{background:#fff;border-radius:20px;border:1px solid var(--line);overflow:hidden}
.mdiv{height:1px;background:var(--line);margin-left:48px}
.mdiv.inset{margin:0 14px}

/* Needs You 행 — AttentionRow */
.mrow{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
  padding:12px 14px;font:inherit;text-align:left;cursor:pointer;color:inherit;
  transition:background .15s}
.mrow:hover{background:#FAFAFA}
.mrico{width:20px;display:grid;place-items:center;color:var(--n600);font-size:17px;flex:none}
.mrico.alt{color:var(--pd)}
.mrmain{flex:1;min-width:0}
.mrline{display:flex;align-items:baseline;gap:6px}
.mrline b{font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--p700)}
.mrline span{font-size:12px;font-weight:500;color:var(--n600)}
.mrmain em{display:block;font-style:normal;font-size:10px;color:var(--n400);margin-top:1px}
.mchev{color:#D4D4D4;font-size:14px}

/* CallFlowHero */
.mhero{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:20px;padding:14px;margin-top:12px;font:inherit;color:inherit;cursor:pointer;
  transition:background .15s}
.mhero:hover{background:#FAFAFA}
.mhero .mlabel{margin:0 0 5px}
.mherorow{display:flex;align-items:flex-end;gap:8px}
.mherobig{font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--p700)}
.mherotxt{flex:1;font-size:11.5px;color:var(--n500);padding-bottom:3px}
.mflow{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line)}
.mflow i{width:8px;height:8px;border-radius:50%;background:#2563EB;transition:background .2s}
.mflow em{font-style:normal;font-size:11px;font-weight:600;color:#2563EB;transition:color .2s}
.mflow.direct i,.mflow.direct em{background:#059669;color:#059669}
.mflow.direct i{background:#059669}
.mflow.off i{background:#E11D48}.mflow.off em{color:#E11D48}

/* MiniTile */
.mtiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mtiles.two{grid-template-columns:repeat(2,1fr);margin-top:7px}
.mtile{background:#fff;border:1px solid var(--line);border-radius:15px;padding:9px 11px}
.mtile b{display:block;font-size:19px;font-weight:700;letter-spacing:-.02em;color:var(--p700)}
.mtile span{font-size:10px;font-weight:500;color:var(--n500)}

/* 화면 제목 (Calls / Messages) */
.mh{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--n900);margin:2px 0 9px 2px}
.mh span{font-size:11px;font-weight:400;color:var(--n400);margin-left:5px}

/* 검색 */
.msearch{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #F0F0F0;
  border-radius:14px;padding:8px 11px;color:#A3A3A3;font-size:11.5px}
.msearch .ic{font-size:14px}

/* 세그먼트 필터 */
.mseg{display:flex;gap:3px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:4px;margin-top:8px}
.mseg button{flex:1;background:none;border:none;font:inherit;font-size:10.5px;font-weight:600;
  color:var(--n600);padding:5px 2px;border-radius:10px;cursor:pointer;transition:all .18s}
.mseg button.on{background:var(--n900);color:#fff}

/* 리스트 */
.mlist{list-style:none;margin:9px 0 0;display:grid;gap:7px}
.mlist.flush{background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;gap:0}
.mitem{background:#fff;border:1px solid var(--line);border-radius:15px;overflow:hidden}
.mlist.flush .mitem{border:none;border-radius:0}
.mlist.flush .mitem+.mitem{border-top:1px solid var(--line)}
.mitem[hidden]{display:none}
.mitem-head{display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;
  padding:11px;font:inherit;text-align:left;color:inherit;cursor:pointer;transition:background .15s}
.mitem-head:hover{background:#FAFAFA}
.mitem-head.conv{padding:12px}   /* 대화 행 — ConversationItem p-4 */
.mav{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;font-size:15px;flex:none}
.mav.in{background:var(--p50);color:var(--pd)}
.mav.out{background:#EFF6FF;color:#3B82F6}
.mav.miss{background:#FEF2F2;color:#E53935}
.mit-main{flex:1;min-width:0}
.mit-main b{display:block;font-size:12px;font-weight:700;color:var(--n900);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.mit-sub{display:flex;align-items:center;gap:6px;margin-top:2px}
.mit-sub em{font-style:normal;font-size:10px;font-weight:500}
.mit-sub em.ok{color:var(--pd)}
.mit-sub em.warn{color:#D97706}
.mit-sub i{font-style:normal;font-size:10px;color:var(--n400)}
.mit-right{text-align:right;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.mit-right i{font-style:normal;font-size:9.5px;color:var(--n400)}
.tag{font-style:normal;font-size:8.5px;font-weight:700;padding:1px 6px;border-radius:999px;
  letter-spacing:.03em}
.tag.ai{background:#ECFDF5;color:#059669}
.tag.staff{background:#F5F3FF;color:#7C3AED}

/* 전사 / 스레드 */
.mtranscript,.mthread{padding:0 11px 11px 52px;font-size:11px;line-height:1.5;
  animation:mfade .25s var(--ease)}
.mthread{padding-left:11px}
.mtranscript[hidden],.mthread[hidden]{display:none}
.tc,.bc{color:var(--n600);margin-bottom:5px}
.td,.bd{color:var(--p700);font-weight:600;margin-bottom:5px}
.bc,.bd{background:#F5F5F5;border-radius:12px;padding:6px 9px;display:inline-block;max-width:88%}
.bd{background:var(--p50);margin-left:12%}
.tbooked{display:flex;align-items:center;gap:5px;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--line);font-size:10px;font-weight:700;color:#059669}
.tbooked.warn{color:#D97706}
.tbooked .ic{font-size:12px}
.bnote{font-size:9.5px;font-weight:700;color:#059669;margin-top:5px;letter-spacing:.02em}

/* 메시지 채널 아바타 */
.mch{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:15px;flex:none;
  background:#E5E5E5;color:var(--n500)}
.mch.sms.unread{background:var(--p);color:#fff}
.mch.ig{background:#F3E8FF;color:#9333EA}
.mch.ig.unread{background:#E1306C;color:#fff}
.mch.fb{background:#EFF6FF;color:#2563EB}
.mch.fb.unread{background:#1877F2;color:#fff}
.mprev{display:block;font-size:10.5px;color:var(--n400);margin-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.unread-dot{font-style:normal;background:var(--p);color:#fff;font-size:9px;font-weight:700;
  width:16px;height:16px;border-radius:50%;display:grid;place-items:center}

/* Dial */
.dialpad{display:flex;flex-direction:column;padding-top:14px}
.mdialnum{margin-top:auto}   /* 아래로 밀어 붙인다 — 실제 앱과 동일 */
.mdialnum{text-align:center;font-size:30px;font-weight:700;letter-spacing:.04em;color:#0F172A;
  min-height:38px}
.mdialhint{text-align:center;font-size:10.5px;color:var(--n400);margin:2px 0 4px;min-height:14px}
.mkeys{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 24px;
  width:100%;max-width:286px;margin:0 auto}
.mkeys button{aspect-ratio:1;border-radius:50%;background:#fff;border:1px solid #EDEFF2;font:inherit;
  font-size:24px;font-weight:600;color:#0F172A;cursor:pointer;display:grid;place-items:center;
  line-height:1;transition:transform .1s,background .15s;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.mkeys button:active{background:#EFEFEF;transform:scale(.94)}
.mdialbar{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:18px}
.mspacer{width:40px}
.mcallbtn{width:58px;height:58px;border-radius:50%;background:#22C55E;color:#fff;border:none;
  font-size:22px;display:grid;place-items:center;cursor:pointer;transition:transform .12s,opacity .2s;
  box-shadow:0 6px 16px -6px rgba(34,197,94,.8)}
.mcallbtn:hover{transform:scale(1.06)}
.mcallbtn:disabled{opacity:.35;box-shadow:none;transform:none;cursor:default}
.mback{width:40px;height:40px;background:none;border:none;color:var(--n400);font-size:20px;
  display:grid;place-items:center;cursor:pointer}

/* 통화 중 */
.minCall{position:absolute;inset:0;background:var(--slate);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;padding:0 20px 84px;animation:mfade .3s var(--ease)}
.minCall[hidden]{display:none}
.mavatar{width:72px;height:72px;border-radius:50%;background:#E2E8F0;color:#64748B;
  display:grid;place-items:center;font-size:30px;margin-bottom:14px}
.mincall-num{font-size:20px;font-weight:700;letter-spacing:.05em;color:#0F172A}
.mincall-state{font-size:12px;font-weight:600;color:#F59E0B}
.mincall-state.live{color:var(--pd);font-variant-numeric:tabular-nums}
.mincall-ctrls{display:flex;gap:34px;margin:26px 0 22px}
.mincall-ctrls span{display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:10px;color:var(--n500)}
.mctrl{width:46px;height:46px;border-radius:50%;background:#fff;color:#64748B;font-size:18px;
  display:grid;place-items:center;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.mendbtn{width:56px;height:56px;border-radius:50%;background:#EF4444;color:#fff;border:none;
  font-size:24px;display:grid;place-items:center;cursor:pointer;
  box-shadow:0 6px 16px -6px rgba(239,68,68,.8)}
.mendlbl{font-size:10px;color:var(--n400);margin-top:7px}

/* Settings */
.mtoggle-row{display:flex;align-items:center;gap:11px;padding:12px 14px}
.mtitle-sm{font-size:12px;font-weight:700;color:var(--n900)}
.msw{width:40px;height:23px;border-radius:999px;background:#E5E5E5;border:none;position:relative;
  cursor:pointer;transition:background .22s var(--ease);flex:none}
.msw i{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:left .22s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.msw.on{background:var(--p)}
.msw.on i{left:19.5px}
.mflowbox{margin:0 14px 14px;background:var(--p50);border:1px solid #C8E6D5;border-radius:13px;
  padding:9px 11px}
.mflowbox span{display:block;font-size:10px;font-weight:500;color:var(--p700);margin-bottom:2px}
.mflowbox b{font-size:12px;font-weight:700;color:var(--pd)}
.mnav{display:flex;align-items:center;gap:11px;padding:12px 14px}

/* 떠 있는 알약 탭바 — height 58, radius 22, margin 16/12 (실제 앱 수치) */
.mtabs{position:absolute;left:14px;right:14px;bottom:11px;height:52px;
  background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:20px;
  display:flex;box-shadow:0 2px 8px rgba(0,0,0,.05)}
.mtabs button{flex:1;background:none;border:none;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#94A3B8;font-size:9px;font-weight:600;letter-spacing:.02em;position:relative;
  transition:color .18s}
.mtabs button .ic{font-size:18px}
.mtabs button.on{color:var(--p)}
.tbadge,.tdot{position:absolute;font-style:normal;background:#EF4444;color:#fff}
.tbadge{top:5px;right:calc(50% - 18px);font-size:8px;font-weight:700;min-width:14px;height:14px;
  border-radius:7px;display:grid;place-items:center;padding:0 3px}
.tdot{top:7px;right:calc(50% - 12px);width:7px;height:7px;border-radius:50%}

/* 폰은 340×700 고정 설계 — 화면에 맞춰 통째로 축소한다(내부 치수 그대로) */
.mock-fit{--s:1;width:calc(375px * var(--s));height:calc(700px * var(--s))}
@media(max-height:960px){.mock-fit{--s:.94}}
@media(max-height:880px){.mock-fit{--s:.88}}
@media(max-height:800px){.mock-fit{--s:.82}}
@media(max-height:720px){.mock-fit{--s:.76}}
@media(max-height:640px){.mock-fit{--s:.68}}
@media(max-width:900px){.mock-fit{--s:.88}}
@media(max-width:420px){.mock-fit{--s:.84}}
@media(max-width:350px){.mock-fit{--s:.72}}