/* ══════════════════════════════════════════════════════════════════════════
   모바일 UI 아홉 벌 — 옷 (2026-08-22 · 사장님이 「툭」 앱 화면 보고 고르신 것)

   고르신 번호와 이름
     1  아래 고정 탭바 + 가운데 큰 단추        .mu-tabs
     2  다음에 뭘 누를지 알려주는 말풍선        .mu-coach
     3  큰 숫자 남은 시간                      .mu-cd
     4  진행 단계(체크 + NOW)                  .mu-steps
     5  방금 무슨 일이 있었나(흐르는 알림)      .mu-ticker
     6  소개 진척 네 칸                        .mu-ref
     7  알약 스위치                            .mu-seg
     9  걸리는 시간 막대                       .mu-bars
     11 처음 온 손님용 소개 카드                .mu-ob

   ⛔ 글자는 22px 아래로 내려가지 않는다 (사장님 지시). 좁아서 안 들어가면
      글자를 줄이지 말고 **낱말을 짧게** 하거나 칸을 뺀다.
   ⛔ 색은 페이지가 이미 쓰는 --accent · --ink · --line 을 그대로 빌린다.
      여기서 색을 새로 정하지 말 것 — 페이지마다 배경이 조금씩 다르다(#000 · #0a0a09).
   ⚠ 모든 이름은 .mu- 로 시작한다. 페이지들이 저마다 .steps · .seg · .bars 를
      이미 쓰고 있어서(track · pricing) 접두어 없이 두면 서로 잡아먹는다.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --mu-accent:#c8ff00;
  --mu-ink:#f2efe6;
  --mu-dim:#8a8377;
  --mu-line:rgba(242,239,230,.13);
  --mu-card:rgba(242,239,230,.045);
  --mu-ease:cubic-bezier(.22,1,.36,1);
  --mu-tabh:0px;                /* 탭바가 서면 자바스크립트가 실제 높이를 넣는다 */
}

/* ═══════════════════════════════════════════════════════
   1 · 아래 고정 탭바
   ⛔ 폰에서만 선다. PC 는 위 메뉴로 충분하고, 아래를 가리면 본문이 잘린다.
   ⛔ 화면 아래에 이미 다른 고정 바가 있는 페이지(예약하기 .bookbar)에서는
      자바스크립트가 아예 세우지 않는다. 두 겹이 되면 「다음」 단추가 가려진다.
   ═══════════════════════════════════════════════════════ */
.mu-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;                                  /* 폰에서만 flex 로 켠다 */
  align-items:flex-end;justify-content:space-around;
  padding:12px 4px calc(14px + env(safe-area-inset-bottom,0px));
  background:rgba(10,10,9,.96);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid var(--mu-line);
}
.mu-tabs a,.mu-tabs button{
  display:grid;place-items:center;gap:5px;flex:1;min-width:0;
  color:var(--mu-dim);background:none;border:0;text-decoration:none;
  font-family:inherit;cursor:pointer;
}
.mu-tabs .mu-t svg{width:28px;height:28px;fill:currentColor;flex:none;}
.mu-tabs .mu-t span{font-size:22px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;}
.mu-tabs .mu-t.on{color:var(--mu-accent);}
/* 가운데 튀어나온 단추 — 제일 중요한 하나(예약)만 여기에 온다 */
.mu-tabs .mu-fab{flex:0 0 96px;position:relative;}
.mu-tabs .mu-fab a{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:84px;height:84px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#f2ff9a,var(--mu-accent) 55%,#9ecb00);
  color:#0a0a09;font-size:22px;font-weight:900;line-height:1.15;text-align:center;
  box-shadow:0 0 0 7px rgba(10,10,9,.96),0 12px 30px rgba(200,255,0,.3);
}
.mu-tabs .mu-fab a small{display:block;font-size:22px;font-weight:900;}
@media (max-width:760px){
  .mu-tabs{display:flex;}
  /* 본문이 탭바에 가리지 않게 그만큼 아래를 비운다 */
  body.mu-hastabs{padding-bottom:calc(var(--mu-tabh) + 18px)!important;}
  /* 떠 있는 동그란 단추들(챗봇 · 소리 · 진행상황)을 탭바 위로 올린다.
     ⛔ 소리 단추는 스스로 --kr-fab-lift 로 올라간다(assets/audio-toggle.js).
        그래서 여기서는 건드리지 않는다 — 두 곳이 올리면 두 배로 뜬다.
     ⛔ 챗봇과 진행상황을 **같은 높이로 올리지 말 것** — 겹쳐서 둘 다 못 누른다
        (2026-08-22 폰 실측에서 실제로 겹쳤다). 원래 간격 70px 을 그대로 지킨다. */
  body.mu-hastabs .track-fab{bottom:calc(var(--mu-tabh) + 16px)!important;}
  body.mu-hastabs .krc-fab{bottom:calc(var(--mu-tabh) + 86px)!important;}
  body.mu-hastabs .krc-panel{bottom:calc(var(--mu-tabh) + 86px)!important;}
}
/* 화면을 덮는 메뉴가 열리면 탭바는 숨는다(메뉴 위로 삐져나오지 않게) */
html.kr-menu .mu-tabs{display:none!important;}

/* ═══════════════════════════════════════════════════════
   2 · 말풍선 코치마크
   쓰는 법 : 단추를 <span class="mu-coach" data-mu-say="3분이면 끝나요"> 로 감싼다.
   ⚠ 감싼 칸은 inline-block 이라 단추의 폭을 그대로 따라간다. 폭을 꽉 채우려면
      감싼 칸에 style="display:block" 을 준다.
   ═══════════════════════════════════════════════════════ */
.mu-coach{position:relative;display:inline-block;}
.mu-coach>.mu-bub{
  position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%);
  background:var(--mu-accent);color:#0a0a09;
  font-size:22px;font-weight:800;letter-spacing:-.02em;
  padding:9px 18px;border-radius:999px;white-space:nowrap;
  pointer-events:none;z-index:5;
  animation:mu-bob 1.6s var(--mu-ease) infinite;
}
.mu-coach>.mu-bub::after{
  content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:8px solid transparent;border-top-color:var(--mu-accent);
}
/* 무지개 말풍선 — 이벤트·새 기능처럼 「눈에 띄어야 하는 것」에만 (한 화면에 하나) */
.mu-coach>.mu-bub.mu-grad{background:linear-gradient(90deg,#7b5cff,#ff4dc4);color:#fff;}
.mu-coach>.mu-bub.mu-grad::after{border-top-color:#ff4dc4;}
@keyframes mu-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-7px)}}
@media (prefers-reduced-motion:reduce){ .mu-coach>.mu-bub{animation:none;} }

/* ═══════════════════════════════════════════════════════
   3 · 큰 숫자 남은 시간
   ⛔ 마감 날짜가 비어 있으면 아예 그리지 않는다 (assets/mobile-ui.js 의 CFG).
      지어낸 마감은 손님이 한 번 겪으면 다음부터 아무 말도 안 믿는다.
   ═══════════════════════════════════════════════════════ */
.mu-cd-wrap{
  border:1px solid var(--mu-line);border-radius:20px;background:var(--mu-card);
  padding:22px 18px;text-align:center;margin:26px auto;max-width:560px;
}
.mu-cd-lab{font-size:22px;color:var(--mu-dim);letter-spacing:-.01em;}
.mu-cd{display:flex;align-items:flex-start;justify-content:center;gap:6px;margin-top:12px;}
.mu-cd .mu-u{text-align:center;min-width:70px;}
.mu-cd .mu-u b{
  display:block;font-size:clamp(2.6rem,10vw,3.4rem);font-weight:800;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;
}
.mu-cd .mu-u span{display:block;margin-top:9px;font-size:22px;color:var(--mu-dim);}
.mu-cd .mu-sep{display:grid;gap:6px;padding-top:12px;}
.mu-cd .mu-sep i{display:block;width:6px;height:6px;border-radius:50%;background:var(--mu-dim);}
.mu-cd-end{font-size:22px;color:var(--mu-accent);font-weight:800;padding:10px 0;}

/* ═══════════════════════════════════════════════════════
   4 · 진행 단계 (체크 + NOW)
   ⚠ track.html 에서는 **이미 있던 진행률 막대 자리**에 들어간다.
      막대를 지우고 새 칸을 더한 게 아니라, 그 막대에 점과 이름표를 얹은 것이다.
      (2026-07-27 「단계 바 아예 제거, 타임라인만」 지시를 어기지 않으려는 것 —
       아래 세로 타임라인은 그대로 두고 칸 수를 늘리지 않는다.)
   ═══════════════════════════════════════════════════════ */
.mu-steps{position:relative;padding:38px 4px 0;}
.mu-steps .mu-rail{
  position:absolute;left:26px;right:26px;top:54px;height:5px;
  background:rgba(242,239,230,.14);border-radius:3px;overflow:hidden;
}
.mu-steps .mu-fill{height:100%;width:0;background:var(--mu-accent);border-radius:3px;
  transition:width .6s var(--mu-ease);}
.mu-steps .mu-dots{position:relative;display:flex;justify-content:space-between;}
.mu-steps .mu-d{
  width:44px;height:44px;border-radius:50%;flex:none;
  background:#2a2a25;color:#6e6a60;
  display:grid;place-items:center;font-size:22px;font-weight:800;
  border:0;font-family:inherit;transition:.35s var(--mu-ease);
}
.mu-steps .mu-d.done{background:var(--mu-accent);color:#0a0a09;}
.mu-steps .mu-d.now{box-shadow:0 0 0 6px rgba(200,255,0,.16);}
.mu-steps .mu-nowtag{
  position:absolute;top:0;transform:translateX(-50%);
  background:#3c4400;color:var(--mu-accent);
  font-size:22px;font-weight:800;padding:3px 13px;border-radius:999px;
  transition:left .6s var(--mu-ease);white-space:nowrap;
}
.mu-steps .mu-labs{display:flex;justify-content:space-between;margin-top:12px;}
.mu-steps .mu-labs span{
  width:44px;flex:none;text-align:center;font-size:22px;color:var(--mu-dim);
  letter-spacing:-.03em;
}
.mu-steps .mu-labs span.on{color:var(--mu-ink);font-weight:700;}
/* 아주 좁은 폰(360px 이하)에서 다섯 칸이 겹치면 이름표만 한 줄 접는다 */
@media (max-width:360px){
  .mu-steps .mu-labs span{width:40px;}
  .mu-steps .mu-d{width:40px;height:40px;}
}
/* 진행상황 조회(track.html) 상단바 안에 들어갈 때의 여백 */
.mu-stepwrap{margin-top:16px;}
.mu-refwrap{margin-top:16px;}

/* ═══════════════════════════════════════════════════════
   5 · 방금 무슨 일이 있었나 (흐르는 알림)
   ⛔ 사람 이름 · 지어낸 숫자를 넣지 않는다. 실제로 올라와 있는 작업 이름만 굴린다.
      (사장님 규칙 : 셀 수 없는 숫자는 화면에 적지 않는다)
   ═══════════════════════════════════════════════════════ */
.mu-ticker{
  display:flex;align-items:center;gap:13px;
  border:1px solid var(--mu-line);border-radius:16px;background:var(--mu-card);
  padding:14px 18px;overflow:hidden;max-width:680px;margin:0 auto;
}
.mu-ticker .mu-ic{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:rgba(200,255,0,.12);color:var(--mu-accent);
  display:grid;place-items:center;font-size:22px;
}
.mu-ticker .mu-roll{flex:1;min-width:0;height:34px;position:relative;overflow:hidden;}
.mu-ticker .mu-roll p{
  position:absolute;left:0;right:0;top:0;
  font-size:22px;line-height:34px;color:var(--mu-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .45s var(--mu-ease),opacity .45s var(--mu-ease);
}
.mu-ticker .mu-roll p.out{transform:translateY(-100%);opacity:0;}
.mu-ticker .mu-roll p.in{transform:translateY(100%);opacity:0;}
.mu-ticker .mu-roll p b{color:var(--mu-accent);font-weight:800;}
/* 폰에선 한 줄에 안 들어가 「…」로 잘려 무슨 말인지 모른다(2026-08-22 실측).
   글자를 줄이는 대신(22px 아래로 못 내려간다) 두 줄까지 편다. */
@media (max-width:760px){
  .mu-ticker .mu-roll{height:68px;}
  .mu-ticker .mu-roll p{
    white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    line-height:34px;
  }
}

/* ═══════════════════════════════════════════════════════
   6 · 소개 진척 네 칸
   ⛔ 소개 혜택(몇 곳에 얼마)은 **사장님이 정하는 약속**이다. CFG.referral 이
      비어 있으면 그리지 않는다. 내가 숫자를 지어내지 않는다.
   ═══════════════════════════════════════════════════════ */
.mu-ref{border:1px solid var(--mu-line);border-radius:20px;background:var(--mu-card);padding:22px 18px;}
.mu-ref .mu-rtit{font-size:26px;font-weight:800;letter-spacing:-.02em;}
.mu-ref .mu-rtit b{color:var(--mu-accent);}
.mu-ref .mu-ring-line{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:20px;}
.mu-ref .mu-n{text-align:center;flex:none;}
.mu-ref .mu-ring{
  width:66px;height:66px;border-radius:50%;
  border:2px dashed rgba(242,239,230,.28);display:grid;place-items:center;
  font-size:26px;color:#6e6a60;transition:.3s var(--mu-ease);
}
.mu-ref .mu-ring.on{border-style:solid;border-color:var(--mu-accent);
  background:rgba(200,255,0,.1);color:var(--mu-accent);}
.mu-ref .mu-ring.gift.lit{border-style:solid;border-color:var(--mu-accent);
  box-shadow:0 0 26px rgba(200,255,0,.35);}
.mu-ref .mu-n span{display:block;margin-top:8px;font-size:22px;color:var(--mu-dim);}
.mu-ref .mu-bar{flex:1;height:3px;background:rgba(242,239,230,.16);border-radius:2px;}
.mu-ref .mu-bar.on{background:var(--mu-accent);}
.mu-ref .mu-rfoot{
  margin-top:20px;border:1.5px solid var(--mu-accent);border-radius:18px;
  padding:18px;display:flex;align-items:center;gap:13px;flex-wrap:wrap;
}
.mu-ref .mu-rfoot .mu-txt{flex:1;min-width:180px;}
.mu-ref .mu-rfoot .mu-s{font-size:22px;color:var(--mu-dim);}
.mu-ref .mu-rfoot .mu-m{font-size:26px;font-weight:800;margin-top:5px;letter-spacing:-.02em;}
.mu-ref .mu-rfoot .mu-m b{color:var(--mu-accent);}
.mu-ref .mu-rfoot a{
  background:var(--mu-accent);color:#0a0a09;font-size:22px;font-weight:800;
  padding:14px 22px;border-radius:999px;white-space:nowrap;text-decoration:none;
}

/* ═══════════════════════════════════════════════════════
   7 · 알약 스위치
   ⛔ 칸(내용)을 새로 만들지 않는다. 이미 화면에 있는 카드들을 **하나씩 보여줄 뿐**이다.
      그래서 스위치를 꺼도(자바스크립트가 안 돌아도) 카드는 전부 그대로 보인다.
   ═══════════════════════════════════════════════════════ */
/* ⛔ width:max-content 를 주지 말 것 — 알약 세 개가 폰 폭보다 길어지면 **페이지 전체가**
   가로로 밀려 오른쪽이 잘린다(2026-08-22 폰 390px 실측에서 요금표 전체가 잘렸다).
   폭은 부모까지만 쓰고, 그래도 넘치면 알약 줄만 옆으로 밀리게 한다. */
.mu-seg{
  display:flex;background:rgba(242,239,230,.07);border-radius:999px;padding:5px;
  position:relative;margin:0 auto 24px;max-width:100%;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.mu-seg::-webkit-scrollbar{display:none;}
.mu-seg button{
  position:relative;z-index:2;flex:1 1 auto;min-width:0;
  font-family:inherit;font-size:22px;font-weight:800;letter-spacing:-.03em;
  color:var(--mu-dim);background:none;border:0;cursor:pointer;
  padding:11px 14px;border-radius:999px;white-space:nowrap;
  transition:color .25s;
}
@media (max-width:400px){ .mu-seg button{padding:11px 10px;} }
.mu-seg button.on{color:#0a0a09;}
.mu-seg .mu-knob{
  position:absolute;top:5px;bottom:5px;left:0;width:0;
  border-radius:999px;background:var(--mu-accent);z-index:1;
  transition:left .32s var(--mu-ease),width .32s var(--mu-ease);
}
/* 스위치가 켜진 동안에만 카드를 한 장씩 보인다 */
.mu-segged>.mu-hid{display:none!important;}

/* ═══════════════════════════════════════════════════════
   9 · 걸리는 시간 막대
   ⚠ 여기 숫자는 reserve.html 의 SERVICES(durMin·durMax)와 **같은 값**이어야 한다.
      한쪽만 고치면 손님이 화면 두 곳에서 다른 기간을 본다. 고칠 땐 둘 다.
   ⛔ 남의 회사 숫자(「A 제작사 45일」)는 적지 않는다 — 근거 없는 비교광고다.
   ═══════════════════════════════════════════════════════ */
.mu-bars{display:grid;gap:16px;max-width:620px;margin:0 auto;}
.mu-bar-row{display:flex;align-items:center;gap:12px;}
.mu-bar-row .mu-who{
  width:132px;flex:none;font-size:22px;color:var(--mu-dim);
  line-height:1.25;letter-spacing:-.03em;
}
.mu-bar-row.me .mu-who{color:var(--mu-accent);font-weight:800;}
.mu-bar-row .mu-track{flex:1;min-width:0;}
.mu-bar-row .mu-b{
  height:46px;border-radius:10px;background:rgba(242,239,230,.09);
  width:0;transition:width 1s var(--mu-ease);
}
.mu-bar-row.me .mu-b{background:var(--mu-accent);}
.mu-bar-row .mu-v{
  flex:none;font-size:22px;padding:7px 15px;border-radius:999px;
  background:rgba(242,239,230,.07);color:var(--mu-ink);white-space:nowrap;
}
.mu-bar-row.me .mu-v{background:rgba(200,255,0,.14);color:var(--mu-accent);font-weight:800;}
.mu-bars-cap{
  display:block;width:max-content;max-width:100%;margin:20px auto 0;
  font-size:22px;color:var(--mu-dim);background:rgba(242,239,230,.06);
  padding:9px 20px;border-radius:999px;text-align:center;
}
@media (max-width:520px){ .mu-bar-row .mu-who{width:104px;} }

/* ═══════════════════════════════════════════════════════
   11 · 처음 온 손님용 소개 카드
   ⛔ 한 사람에게 한 번만 보인다(localStorage). 올 때마다 뜨면 문을 막는 벽이 된다.
   ⛔ 홈에는 켜지 않았다 — 홈은 이미 「클릭하면 시작합니다」 입장 화면이 있어서
      두 겹이 된다. 켜려면 mobile-ui.js 의 CFG.onboardOn 에 '/' 를 더한다.
   ═══════════════════════════════════════════════════════ */
.mu-ob{
  position:fixed;inset:0;z-index:800;background:#0a0a09;
  display:flex;flex-direction:column;padding:5vh 22px calc(26px + env(safe-area-inset-bottom,0px));
  opacity:0;transition:opacity .35s var(--mu-ease);
}
.mu-ob.show{opacity:1;}
.mu-ob.gone{opacity:0;pointer-events:none;}
.mu-ob .mu-skip{
  align-self:flex-end;font-family:inherit;font-size:22px;font-weight:700;
  color:var(--mu-accent);background:none;border:0;cursor:pointer;padding:8px 4px;
}
.mu-ob .mu-slide{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.mu-ob .mu-s1{font-size:26px;color:#cfcabc;letter-spacing:-.02em;}
.mu-ob .mu-s2{font-size:clamp(2rem,7.5vw,2.6rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.32;margin-top:8px;}
.mu-ob .mu-s2 em{font-style:normal;color:var(--mu-accent);}
.mu-ob .mu-art{
  margin:34px auto 0;width:min(230px,60vw);aspect-ratio:6/5;border-radius:26px;
  background:radial-gradient(circle at 50% 60%,rgba(200,255,0,.3),transparent 62%),#111110;
  display:grid;place-items:center;font-size:clamp(3rem,14vw,4rem);
}
.mu-ob .mu-dots{display:flex;gap:9px;justify-content:center;margin:24px 0 18px;}
.mu-ob .mu-dots i{width:10px;height:10px;border-radius:50%;background:rgba(242,239,230,.2);transition:.25s;}
.mu-ob .mu-dots i.on{background:var(--mu-accent);}
.mu-ob .mu-next{
  display:block;width:100%;max-width:520px;margin:0 auto;
  font-family:inherit;font-size:26px;font-weight:800;letter-spacing:-.02em;
  background:var(--mu-accent);color:#0a0a09;border:0;cursor:pointer;
  padding:19px;border-radius:999px;text-align:center;text-decoration:none;
}

/* 좁은 폰에서 동그라미 넷이 폭을 다 먹어 잇는 선이 안 보였다(2026-08-22 실측).
   동그라미를 조금 줄여 선이 보이게 한다. */
@media (max-width:400px){
  .mu-ref .mu-ring{width:56px;height:56px;font-size:22px;}
}