/* 미부장 꾸미기 — 폰(680px 이하) */
#mbTop,#mbPans,#mbBar,.mb-sheet,.mb-ov,#mbUpTog,#pcSide,#pcBar{display:none}

/* ===== 컴퓨터(681px 이상): 왼쪽 세로 메뉴 =====
   폴더·지점·설정을 왼쪽 기둥으로 세워 위쪽 여덟 줄을 비운다.
   가로는 남고 세로는 모자란 컴퓨터 화면에 맞춘 배치다. */
@media(min-width:681px){
  body{padding-left:212px}
  header .ftabs,header .stabs,header .h1row{display:none!important}

  #pcSide{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:212px;z-index:60;
    background:#1c2733;color:#fff;padding:16px 12px 14px;overflow-y:auto;scrollbar-width:thin}
  #pcSide .pc-brand{font-size:16px;font-weight:800;letter-spacing:-.4px;padding:0 9px 13px;
    border-bottom:1px solid rgba(255,255,255,.13);margin-bottom:11px;line-height:1.35}
  #pcSide .pc-brand em{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:rgba(255,255,255,.45);margin-top:2px}
  #pcSide .pc-lab{font-size:10.5px;font-weight:800;color:rgba(255,255,255,.35);padding:13px 11px 5px;letter-spacing:.3px}
  #pcSide button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;border:none;background:none;
    font-family:inherit;font-size:14px;font-weight:800;color:rgba(255,255,255,.62);
    padding:10px 11px;border-radius:10px;margin-bottom:3px;cursor:pointer;line-height:1.3}
  #pcSide button:hover{background:rgba(255,255,255,.08);color:#fff}
  #pcSide button i{font-style:normal;font-size:16px;width:20px;text-align:center;flex:none}
  #pcSide button span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #pcSide button.on{background:var(--ac);color:#fff}
  #pcSide button.st.on{background:rgba(255,255,255,.14);color:#fff}
  #pcSide .pc-bot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.13)}
  /* 절취선 — 미부장 기능과 「따로 만들어 드리는 것」을 나눈다 */
  #pcSide .pc-hr{margin:9px 11px;border-top:1px dashed rgba(255,255,255,.24)}
  /* 계산기 묶음 — 접었다 폈다 */
  #pcSide .pc-grp{position:relative}
  #pcSide .pc-grp .pc-car{position:absolute;right:12px;top:50%;margin-top:-6px;
    font-style:normal;font-size:10px;opacity:.6;transition:transform .15s}
  #pcSide.calcopen .pc-grp .pc-car{transform:rotate(180deg)}
  #pcSide .pc-grp.act{color:#fff;background:rgba(255,255,255,.08)}
  #pcSide .pc-sub{display:none;margin-bottom:3px}
  #pcSide.calcopen .pc-sub{display:block}
  #pcSide .pc-sub button{padding-left:28px;font-size:13.5px}

  /* 위쪽 한 줄 도구띠 */
  #pcBar{display:flex;align-items:center;gap:0;position:sticky;top:0;z-index:45;
    background:var(--bg);padding:11px 0 10px;border-bottom:1px solid var(--line)}
  #pcBar .pc-slot{display:flex;align-items:center;gap:7px;min-width:0;flex:none}
  /* 묶음 사이를 세로줄로 갈라 놓는다. 줄 좌우 여백이 곧 묶음 간격이 된다. */
  #pcBar .pc-div{width:1px;height:44px;background:var(--line);flex:none;margin:0 14px}
  #pcBar #yearBar,#pcBar #ptabs{margin:0!important;flex-wrap:nowrap!important;gap:6px!important}
  #pcBar #ptabs .vtab{flex:none!important;padding:8px 15px!important;font-size:13.5px!important;white-space:nowrap}
  #pcBar #ptabs .vtab s{font-size:10px}
  /* 달은 옆으로 밀지 않고 6칸씩 두 줄로 세운다 — 1~6월 윗줄, 7~12월 아랫줄 */
  #pcBar .pc-slot.grow{flex:1 1 auto;min-width:0;padding-right:6px}
  #pcBar #mPicker{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px!important;margin:0!important;width:100%;max-width:430px}
  #pcBar #mPicker button{flex:none!important;width:100%;white-space:nowrap;
    padding:7px 2px!important;font-size:13px!important;text-align:center}
  /* 수익계산 쪽도 같은 모양으로 (기간탭 · 달 6칸씩 두 줄) */
  #pcBar #cvTabs{display:flex!important;flex-wrap:nowrap!important;gap:6px!important;margin:0!important}
  #pcBar #cvTabs .vtab{flex:none!important;padding:8px 15px!important;font-size:13.5px!important;white-space:nowrap}
  #pcBar #cvTabs .vtab s{font-size:10px}
  #pcBar #cvMonths{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px!important;margin:0!important;width:100%;max-width:430px}
  #pcBar #cvMonths button{width:100%;white-space:nowrap;padding:7px 2px!important;font-size:13px!important;text-align:center}
  #pcUp{flex:none;margin-left:14px;border:1.5px solid var(--line);background:var(--card);color:var(--tx2);
    border-radius:10px;padding:9px 14px;font-size:13.5px;font-weight:800;font-family:inherit;cursor:pointer;white-space:nowrap}
  #pcUp:hover{border-color:var(--ac);color:var(--ac)}

  /* 엑셀 올리는 칸은 도구띠 버튼으로 여닫는다 */
  #mUploadWrap #mUpload{display:none}
  #mUploadWrap.upopen #mUpload{display:block}
}
body.capturing #pcSide,body.printing #pcSide,
body.capturing #pcBar,body.printing #pcBar{display:none!important}
body.capturing,body.printing{padding-left:0!important}
@media(max-width:680px){
  body{padding-bottom:calc(150px + env(safe-area-inset-bottom))}
  /* 원래 위쪽에 있던 것들은 숨긴다 (내용은 아래로 옮겨 담는다) */
  header .ftabs,header .h1row{display:none!important}

  /* --- 위쪽 한 줄 --- */
  #mbTop{display:flex;gap:7px;align-items:center;position:sticky;top:0;z-index:45;
    background:var(--bg);padding:9px 0 8px;border-bottom:1px solid var(--line)}
  .mb-pill{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:5px;
    background:var(--card);border:1.5px solid var(--line);border-radius:11px;padding:7px 10px;
    cursor:pointer;font-family:inherit;text-align:left;color:var(--tx)}
  .mb-pill>span{min-width:0}
  .mb-pill .k{display:block;font-size:9.5px;font-weight:800;color:var(--tx3);letter-spacing:-.2px;line-height:1.2}
  .mb-pill .v{display:block;font-size:14px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mb-pill i{font-style:normal;font-size:10px;color:var(--tx3);flex:none}
  .mb-pill.act{border-color:var(--ac)}
  .mb-pill.act i{color:var(--ac)}
  #mbPans{display:block}
  .mb-pan{display:none;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px 12px;margin-top:9px}
  .mb-pan.open{display:block}
  .mb-slab{font-size:11px;font-weight:800;color:var(--tx3);margin:0 0 6px}
  .mb-slot{margin-bottom:11px}
  .mb-slot:last-child{margin-bottom:0}
  .mb-slot>*{margin:0!important}
  #mbSlotY .ysel-wrap,#mbSlotY #yearBar{margin:0!important}
  /* 옮겨 담긴 것들은 줄바꿈해서 다 보이게 */
  #mbSlotP #ptabs,#mbSlotS #stabs{flex-wrap:wrap!important;margin:0!important}
  /* 달은 4칸씩 3줄로 딱 떨어지게 (9월 옆에 10월이 오도록) */
  /* ── 늘 보이는 기간 줄 (묶어보기 · 달) ────────────────────
     예전엔 「기간 ▾」 을 눌러야 나왔다. 자주 쓰는 것이라 밖으로 냈다. */
  /* 연도 — 위는 이전 해, 아래는 다음 해 */
  .mb-yr{gap:8px!important;cursor:default!important}
  .mb-yr .yrar{display:flex;flex-direction:column;gap:2px;flex:none}
  .mb-yr .yrar button{border:1px solid var(--line);background:var(--card);color:var(--tx2);
    font-family:inherit;font-size:8px;line-height:1;padding:3px 7px;border-radius:5px;cursor:pointer}
  .mb-yr .yrar button:active{background:var(--ac);border-color:var(--ac);color:#fff}
  /* ── 묶어보기(전반기·하반기·연간)와 달(1~12월)을 **한 줄**에 — 옆으로 밀어서 본다
     원장님 : 「고르는 줄 다섯 줄」 · 예전엔 묶어보기 한 줄 + 달 한 줄이었다.
     「월별」 단추는 감춘다 — 달을 누르면 그 달로 바로 간다 (js/period.js 의 drawMonthChips)
     ⚠️ 묶어보기는 **왼쪽에 붙여 두고 달만** 밀린다 — 원장님 : 「월별 전반기 하반기 연간 어디 갔음?」
        (줄 전체를 밀었더니 9월을 가운데로 맞출 때 전반기·하반기·연간이 화면 왼쪽 밖으로 사라졌다) */
  #mbBars{display:flex;align-items:center;gap:5px;position:sticky;top:52px;z-index:44;background:var(--bg);padding:7px 0 7px;
    border-bottom:1px solid var(--line)}
  #mbBarM{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #mbBarM::-webkit-scrollbar{display:none}
  #mbBarP{flex:none;margin:0;padding-right:8px;border-right:1px solid var(--line)}
  #mbBarP #ptabs{display:flex!important;gap:5px!important;margin:0!important;flex-wrap:nowrap!important}
  #mbBarP #ptabs [data-p="month"]{display:none!important}
  #mbBarP #ptabs button{flex:none!important;padding:6px 12px!important;font-size:12px!important;
    border-radius:999px!important;line-height:1.25!important;white-space:nowrap!important}
  #mbBarP #ptabs button s{display:none}
  #mbBarM{flex:1 1 auto;min-width:0}
  #mbBarM #mPicker{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;margin:0!important;padding-bottom:1px}
  #mbBarM #mPicker button{flex:none!important;padding:6px 12px!important;font-size:12px!important;border-radius:999px!important}
  /* 수익계산도 같은 한 줄 — 묶어보기는 왼쪽에 붙고 달만 밀린다 (js/close.js 의 cvBar) */
  #cvBar{display:flex;align-items:center;gap:5px;position:sticky;top:52px;z-index:44;background:var(--bg);padding:7px 0;
    margin:0 0 12px;border-bottom:1px solid var(--line)}
  #cvBar #cvTabs{flex:none;display:flex!important;gap:5px!important;margin:0!important;flex-wrap:nowrap!important;
    padding-right:8px;border-right:1px solid var(--line)}
  #cvBar #cvTabs [data-v="month"]{display:none!important}
  #cvBar #cvTabs .vtab{flex:none!important;padding:6px 12px!important;font-size:12px!important;
    border-radius:999px!important;line-height:1.25!important;white-space:nowrap!important}
  #cvBar #cvTabs .vtab s{display:none}
  #cvBar #cvMonths{flex:1 1 auto;min-width:0;flex-wrap:nowrap!important;gap:5px!important;margin:0!important;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #cvBar #cvMonths::-webkit-scrollbar{display:none}
  #cvBar #cvMonths .mtab{flex:none!important;padding:6px 12px!important;font-size:12px!important;border-radius:999px!important;white-space:nowrap}
  #mbSlotM #mPicker{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px!important;margin:0!important}
  #mbSlotM #mPicker button{flex:none!important;width:100%!important;padding:9px 2px!important;
    font-size:13px!important;white-space:nowrap;overflow:hidden}

  /* 사람 고르는 줄은 위쪽 한 줄 바로 밑에 붙어 있게 */
  .picker{top:54px!important}

  /* --- 엑셀 올리기 접기 --- */
  /* 엑셀 올리기는 **따로 한 줄** 그대로 — 원장님 : 「엑셀 올리기는 전처럼 잘 보이는 게 나은 것 같아」
     (위 매장·연도 줄 끝의 작은 단추로 옮겨 봤다가 되돌렸다) */
  #mbUpTog{display:flex;align-items:center;justify-content:space-between;width:100%;
    background:var(--card);border:1px solid var(--line);border-radius:13px;padding:12px 14px;margin-bottom:11px;
    font-family:inherit;font-size:14px;font-weight:800;color:var(--tx);cursor:pointer}
  #mbUpTog i{font-style:normal;font-size:11px;color:var(--tx3)}
  #mUploadWrap #mUpload{display:none}
  #mUploadWrap.upopen #mUpload{display:block}

  /* --- 아래 탭바 --- */
  /* 높이를 고정하지 않는다. 아이폰 아래 여백(safe-area)까지 더해 넉넉히 잡아야
     아이콘이 흰 띠 밖으로 삐져나오지 않는다. */
  #mbBar{display:flex;align-items:stretch;position:fixed;left:0;right:0;bottom:0;z-index:9995;
    background:var(--card);border-top:1px solid var(--line);box-shadow:0 -3px 12px rgba(0,0,0,.06);
    padding:8px 0 calc(9px + env(safe-area-inset-bottom))}
  #mbBar button{flex:1 1 0;min-width:0;border:none;background:none;font-family:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
    color:var(--tx3);font-size:10.5px;font-weight:800;letter-spacing:-.4px;line-height:1.15;
    padding:0 1px;-webkit-tap-highlight-color:transparent}
  #mbBar button i{font-style:normal;font-size:20px;line-height:22px;height:22px;display:block}
  #mbBar button.on{color:var(--ac)}
  /* 탭이 여섯 개가 되면서 좁은 폰(아이폰 SE 등)에서 「매출분석」이 넘친다 */
  @media(max-width:390px){
    #mbBar button{font-size:9.5px;letter-spacing:-.6px}
    #mbBar button i{font-size:18px;line-height:20px;height:20px}
  }

  /* --- 아래에서 올라오는 판 --- */
  .mb-ov{display:block;position:fixed;inset:0;background:rgba(20,24,30,.4);z-index:9996;opacity:0;pointer-events:none;transition:.2s}
  .mb-ov.on{opacity:1;pointer-events:auto}
  .mb-sheet{display:block;position:fixed;left:0;right:0;bottom:0;z-index:9997;background:var(--card);
    border-radius:20px 20px 0 0;transform:translateY(103%);transition:transform .24s;
    padding:8px 15px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -8px 26px rgba(0,0,0,.18)}
  .mb-sheet.on{transform:translateY(0)}
  .mb-grip{width:38px;height:4px;background:var(--line);border-radius:99px;margin:0 auto 12px}
  .mb-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;
    border-bottom:1px solid var(--line);padding:14px 2px;font-family:inherit;font-size:15px;font-weight:800;
    color:var(--tx);cursor:pointer;text-align:left}
  .mb-item:last-child{border-bottom:none}
  .mb-hr{border-top:1px dashed var(--line);margin:9px 2px}
  .mb-item i{font-style:normal;font-size:19px;width:24px;text-align:center;flex:none}
  .mb-item span{flex:1 1 0;min-width:0}
  .mb-item s{display:block;text-decoration:none;font-size:11.5px;font-weight:700;color:var(--tx3);margin-top:1px}

  /* --- 매장 판에서는 사용설명서를 빼고 톱니바퀴를 둔다 --- */
  #mbSlotS .stab.guide{display:none!important}
  #mbCfg2{display:flex;align-items:center;justify-content:center;width:44px;height:40px;
    background:var(--card2);border:1px solid var(--line);border-radius:11px;margin-top:10px;
    padding:0;font-family:inherit;font-size:19px;line-height:1;cursor:pointer}

  /* --- 떠 있는 버튼: 탭바에 안 가리게, 서로 안 겹치게 --- */
  #capBtn{right:12px!important;left:auto!important;bottom:calc(84px + env(safe-area-inset-bottom))!important}
  /* 폰에서는 인쇄를 잘 안 쓴다. 그 자리를 로그인 단추에게 준다.
     인쇄가 필요하면 컴퓨터에서 하면 된다. */
  #prtBtn{display:none!important}
  #loginFab{right:12px!important;left:auto!important;bottom:calc(136px + env(safe-area-inset-bottom))!important;
    font-size:12.5px;padding:11px 15px}
  #ordToast{bottom:calc(150px + env(safe-area-inset-bottom))}
}
/* 사용설명서 · 휴대폰 안내에서 되돌아가는 버튼 (컴퓨터·폰 공통) */
.mb-back{display:flex;align-items:center;gap:7px;background:var(--card);border:1.5px solid var(--line);
  border-radius:11px;padding:9px 15px;margin:0 0 14px;font-family:inherit;font-size:14px;font-weight:800;
  color:var(--tx2);cursor:pointer}
.mb-back:hover{border-color:var(--ac);color:var(--ac)}
body.capturing .mb-back,body.printing .mb-back{display:none!important}
body.capturing #mbTop,body.capturing #mbPans,body.capturing #mbBar,body.capturing #mbUpTog,
body.printing #mbTop,body.printing #mbPans,body.printing #mbBar,body.printing #mbUpTog{display:none!important}

/* ═══ 폰 : 일정 밑 사람 동그라미 (원장님 「일정 밑에 동그라미로 가자」) ═══ */
@media(max-width:680px){
  /* 개인/매장 탭은 없앤다 — 「매장」 동그라미가 대신한다 */
  #vtabs{display:none!important}

  #mbWho{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;
    padding:10px 0 6px;border-bottom:1px solid var(--line)}
  /* 명단은 붙어다니지(sticky) 않게 — 여기서는 한 줄로 옆으로 민다 */
  #mbWho .picker{position:static!important;flex:1 1 0;min-width:0;
    display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;
    gap:10px;margin:0!important;padding:0!important;border:none!important;background:none!important;
    scrollbar-width:none}
  #mbWho .picker::-webkit-scrollbar{display:none}

  #mbWho .pbtn{position:relative;flex:none;width:46px;padding:0!important;gap:3px!important;
    background:none!important;border:none!important;border-radius:0!important;
    display:flex!important;flex-direction:column;align-items:center;transition:none}
  #mbWho .pbtn::before{content:attr(data-ini);width:40px;height:40px;border-radius:50%;
    background:var(--card);border:1.5px solid var(--line);color:var(--tx2);
    display:flex;align-items:center;justify-content:center;
    font-size:16px;font-weight:800;line-height:1}
  #mbWho .pbtn.on::before{background:var(--ac);border-color:var(--ac);color:#fff}
  #mbWho .pbtn::after{content:attr(data-sn);font-size:9.5px;font-weight:700;color:var(--tx3);
    max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
  #mbWho .pbtn.on::after{color:var(--ac)}
  #mbWho .pbtn>span:first-child{display:none}          /* 긴 이름은 감춘다 */
  #mbWho .pbtn .px{position:absolute;top:-1px;right:-1px;width:15px;height:15px;border-radius:50%;
    background:var(--card);border:1px solid var(--line);color:var(--tx3);
    font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;
    opacity:.5;padding:0}
  #mbWho .pbtn.on .px{opacity:.9}
  #mbWho .stav{flex:none}
  #mbWho .stav::before{border-style:dashed}

  /* 퇴사자 칸 — 제목 한 줄만 두고 접는다 */
  #hiddenBox{width:100%;margin:2px 0 0!important;line-height:1.9!important}
  #hiddenBox .hb-h{display:flex;align-items:center;gap:6px;width:100%;
    background:none;border:none;padding:4px 0;font-family:inherit;font-size:11.5px;
    text-align:left;cursor:pointer;color:var(--tx2)}
  #hiddenBox .hb-h i{margin-left:auto;font-style:normal;color:var(--tx3);transition:transform .18s}
  #hiddenBox.open .hb-h i{transform:rotate(180deg)}
  #hiddenBox .hb-b{display:none;padding-bottom:6px}
  #hiddenBox.open .hb-b{display:block}
}
/* 컴퓨터에서는 접지 않는다 (자리가 넉넉하다) */
@media(min-width:681px){
  #hiddenBox .hb-h{background:none;border:none;padding:0;font-family:inherit;
    font-size:11.5px;color:var(--tx2);cursor:default}
  #hiddenBox .hb-h i{display:none}
}

/* 꾹 눌러 끌 때 손가락을 따라오는 복제본 — 폰에서는 동그라미 모양으로 */
@media(max-width:680px){
  .sortghost.pbtn{background:none!important;border:none!important;box-shadow:none!important;
    flex-direction:column!important;gap:3px!important;overflow:visible!important;padding:0!important}
  .sortghost.pbtn::before{content:attr(data-ini);width:40px;height:40px;border-radius:50%;
    background:var(--ac);border:1.5px solid var(--ac);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
    box-shadow:0 10px 20px rgba(0,0,0,.32)}
  .sortghost.pbtn::after{content:attr(data-sn);font-size:9.5px;font-weight:700;color:var(--ac)}
  .sortghost.pbtn>span:first-child{display:none}
}