/* Flower Calc — 플라워샵 계산기 */
:root{
  /* 회색에 색을 섞지 않습니다. 화면의 대부분이 표와 금액인데,
   * 바탕이 따뜻하면 빨강(적자)·초록(흑자)이 같이 탁해져 구분이 늦어집니다.
   * 색은 브랜드 분홍과 상태색에만 쓰고, 나머지는 순수한 회색으로 둡니다. */
  --bg:#f2f2f2; --surface:#ffffff; --surface-2:#f7f7f7;
  --line:#ededed; --line-2:#dcdcdc;
  --ink:#151515; --ink-2:#616161; --ink-3:#9a9a9a;
  --brand:#b4436c; --brand-soft:#fdeff4; --brand-ink:#8d2f52;
  --sage:#5c7a63; --sage-soft:#eef4ef;
  --ok:#1f8a4d; --ok-soft:#e9f6ee;
  --warn:#b57500; --warn-soft:#fdf4e3;
  --bad:#dc2f26; --bad-soft:#fdedec;
  --info:#1f6feb; --info-soft:#eaf1fd;
  /* 매출·매입 두 계열 — 색각 이상에서도 구분되는지 검사한 짝입니다 */
  --c-sale:#1f6feb; --c-buy:#b57500;
  /* 카드를 띄우지 않습니다. 회색 바탕 위에 흰 판을 얹고 사이를 벌리는 것만으로
   * 이미 나뉘어 보입니다. 그림자를 걷어 내면 표가 빽빽한 화면에서 눈이 덜 지칩니다.
   * 그림자는 <정말로 떠 있는 것>에만 남깁니다 — 팝업·시트·의견 단추. */
  --radius:12px; --radius-s:8px;
  --shadow:none;
  --shadow-lift:0 1px 3px rgba(0,0,0,.07);
  --shadow-float:0 2px 6px rgba(0,0,0,.06),0 12px 28px rgba(0,0,0,.13);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
/* 어두운 화면 ──────────────────────────────────────────────────────────────
 * 세 가지 상태를 지원합니다.
 *   · 아무것도 안 고름 → 폰·PC 설정을 따라갑니다 (아래 media 규칙)
 *   · 직접 "어둡게"    → html[data-theme="dark"]  가 붙습니다
 *   · 직접 "밝게"      → html[data-theme="light"] 가 붙어 media 규칙을 이깁니다
 * 그래서 media 쪽에 :not([data-theme="light"]) 가 걸려 있습니다.
 * ────────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#111111; --surface:#1c1c1c; --surface-2:#242424;
    --line:#2f2f2f; --line-2:#3b3b3b;
    --ink:#f2f2f2; --ink-2:#b0b0b0; --ink-3:#848484;
    --brand:#e98bab; --brand-soft:#3a2029; --brand-ink:#f4b6ca;
    --sage:#9dc0a5; --sage-soft:#222b24;
    --ok:#7dd39b; --ok-soft:#1c2b21; --warn:#e5b45c; --warn-soft:#2e2617;
    --bad:#f2887f; --bad-soft:#33201e;
    --info:#8ab6e8; --info-soft:#1a2330;
    --c-sale:#4f8fe6; --c-buy:#bd7f14;
    --shadow:none;
    --shadow-lift:0 1px 3px rgba(0,0,0,.4);
    --shadow-float:0 2px 8px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --bg:#111111; --surface:#1c1c1c; --surface-2:#242424;
    --line:#2f2f2f; --line-2:#3b3b3b;
    --ink:#f2f2f2; --ink-2:#b0b0b0; --ink-3:#848484;
    --brand:#e98bab; --brand-soft:#3a2029; --brand-ink:#f4b6ca;
    --sage:#9dc0a5; --sage-soft:#222b24;
    --ok:#7dd39b; --ok-soft:#1c2b21; --warn:#e5b45c; --warn-soft:#2e2617;
    --bad:#f2887f; --bad-soft:#33201e;
    --info:#8ab6e8; --info-soft:#1a2330;
    --c-sale:#4f8fe6; --c-buy:#bd7f14;
    --shadow:none;
    --shadow-lift:0 1px 3px rgba(0,0,0,.4);
    --shadow-float:0 2px 8px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.45);
    color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.02em}
/* 링크에 밑줄을 두지 않습니다 — 표·카드·안내줄이 촘촘한 화면이라
   밑줄이 겹치면 글이 지저분해 보입니다.
   대신 밑줄을 지우기만 하면 어디를 누를 수 있는지 알 수 없으므로,
   글 속에 섞여 있는 링크는 색과 굵기로 구분합니다(아래 .tip a 등).
   메뉴·카드처럼 통째로 눌리는 링크는 생김새가 이미 버튼이라 그대로 둡니다. */
a{color:inherit; text-decoration:none}
.tip a, .sub a, .note a, .dn a, .footnote a,
.legal p a, .legal li a, .legal td a, .legal h2 a{
  color:var(--brand-ink); font-weight:600; text-decoration:none;
}
.tip a:hover, .sub a:hover, .note a:hover, .dn a:hover, .footnote a:hover,
.legal p a:hover, .legal li a:hover, .legal td a:hover{ opacity:.75 }
button,input,select,textarea{font:inherit; color:inherit}

.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:10px 14px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:9px; min-width:0}
.brand-mark{font-size:22px; width:30px; height:30px; border-radius:9px; display:block; flex:0 0 auto}
.brand strong{display:block; font-size:16px; line-height:1.2}
.brand small{display:block; color:var(--ink-3); font-size:11px}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:10px}
.basis{color:var(--ink-3); font-size:11.5px; display:none}
@media(min-width:900px){.basis{display:block}}
.navtoggle{
  background:none; border:1px solid var(--line); border-radius:10px;
  width:38px; height:36px; font-size:16px; cursor:pointer
}
@media(min-width:960px){.navtoggle{display:none}}

.layout{display:flex; align-items:flex-start}
.sidenav{
  position:fixed; z-index:45; top:0; left:0; bottom:0; width:262px; overflow-y:auto;
  background:var(--surface); border-right:1px solid var(--line);
  padding:14px 10px 30px; transform:translateX(-105%); transition:transform .22s ease;
}
.sidenav.open{transform:none}
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:44; display:none}
.scrim.open{display:block}
@media(min-width:960px){
  /* 상단바 높이를 숫자로 박아 두면(예전 57px) 글꼴·확대·줄바꿈으로 실제 높이가 달라질 때
   * 사이드바 아래가 화면 밖으로 밀려 잘립니다. 실제 높이를 재서 --topbar-h 로 넣습니다(app.js).
   * height 가 아니라 max-height 인 이유 — 메뉴가 짧으면 억지로 늘리지 않기 위해서입니다. */
  .sidenav{
    position:sticky; top:var(--topbar-h, 57px); transform:none; flex:0 0 262px;
    height:auto;
    max-height:calc(100vh - var(--topbar-h, 57px));
    max-height:calc(100dvh - var(--topbar-h, 57px));
    overflow-y:auto; overscroll-behavior:contain;
    z-index:30;                     /* 상단바(40) 보다 아래 — 스크롤 중에 겹쳐 보이지 않게 */
    padding-bottom:16px;
  }
  .scrim{display:none!important}
}
.navgroup{margin-bottom:16px}
.navgroup-title{
  font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink-3);
  padding:6px 12px;
}
.navlink{
  display:grid; grid-template-columns:26px minmax(0,1fr); align-items:baseline; gap:2px 8px;
  padding:9px 12px; border-radius:10px; text-decoration:none; font-weight:600; font-size:14px;
}
/* 메뉴 그림은 글자와 같은 굵기의 선으로 — 켜진 줄에서는 같이 진해집니다 */
.navlink b{color:var(--ink-3); font-size:15px; display:flex; align-items:center; align-self:center}
.navlink .nvi{width:19px; height:19px; display:block}
.navlink:hover b{color:var(--ink-2)}
.navlink.active b{color:var(--brand)}
.navlink em{grid-column:2; font-style:normal; font-weight:400; font-size:11.5px; color:var(--ink-3)}
.navlink:hover{background:var(--surface-2)}
.navlink.active{background:var(--brand-soft); color:var(--brand-ink)}
.navlink.active b{color:var(--brand-ink)}
.navfoot{padding:0 12px}
.content{flex:1; min-width:0; padding:16px 14px 80px; max-width:1180px; margin:0 auto}
@media(min-width:960px){.content{padding:22px 26px 90px}}



/* 화면 제목줄 — 왼쪽에 제목, 오른쪽 끝에 [📖 가이드].
 * 설명을 제목 밑에 깔지 않습니다. 매일 쓰는 분에게는 그 줄이 늘 방해였습니다. */
.pagehead{
  margin-bottom:16px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.pagehead h1{font-size:21px; letter-spacing:-.03em; display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0}
.pagehead .tag{
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-ink)
}
.pagehead p{margin:5px 0 0; color:var(--ink-2); font-size:13.5px}
.guidepill{
  margin-left:auto; flex:0 0 auto;
  display:inline-flex; align-items:center; gap:5px;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
  background:none; border:1px solid var(--line-2);
  padding:6px 12px; border-radius:999px; cursor:pointer; transition:.15s;
}
.guidepill:hover{border-color:var(--brand); color:var(--brand)}
.guidepill .ico{width:15px; height:15px; color:currentColor}

.grid{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}
@media(min-width:900px){
  .grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .grid.side{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px
}
.card > h2{font-size:15px; margin-bottom:12px; display:flex; align-items:center; gap:7px}
/* 제목 옆 선 아이콘 — 글자보다 크지 않게, 색은 분홍으로 */
.ico{width:18px; height:18px; flex:0 0 auto; color:var(--brand)}
.pagehead h1 .ico{width:21px; height:21px}
.card > h2 .hint{margin-left:auto; font-size:11.5px; font-weight:500; color:var(--ink-3)}
.card.accent{background:var(--surface-2)}
.sub{color:var(--ink-2); font-size:12.5px}
.mt{margin-top:12px} .mt-s{margin-top:7px} .mb{margin-bottom:12px}

.field{margin-bottom:11px}
.field > label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:4px}
.field .note{font-size:11.5px; color:var(--ink-3); margin-top:3px}
/* ── 날짜·시각 칸 ──────────────────────────────────────────
   iOS Safari 의 날짜 입력은 <제 고유 폭>을 갖고, width:100% 를 줘도
   그 폭 아래로 줄지 않습니다. 그래서 폰에서만 칸이 상자 밖으로 튀어나갑니다.
   appearance 를 끄면 일반 입력칸처럼 다뤄져 상자 안에 들어옵니다.
   (데스크톱 크롬은 원래 잘 들어가서, 여기서는 이 증상이 안 보입니다) */
input[type=date],input[type=time],input[type=month],input[type=week],input[type=datetime-local]{
  -webkit-appearance:none; appearance:none;
  width:100%; min-width:0; max-width:100%;
}
/* appearance 를 끄면 값이 비었을 때 높이가 무너집니다 — 최소 높이를 잡아 둡니다 */
input[type=date]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value{
  text-align:left; min-height:1.4em; margin:0;
}
/* 달력 아이콘은 오른쪽 끝에 */
input::-webkit-calendar-picker-indicator{ margin-left:auto; opacity:.55 }
input::-webkit-calendar-picker-indicator:hover{ opacity:1 }
/* 표 안에서는 좁으니 아이콘까지 넣을 자리를 줍니다 */
table input[type=date],table input[type=time]{ min-width:118px }

input[type=text],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; padding:9px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--surface); outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input[type=number]{font-variant-numeric:tabular-nums}
textarea{resize:vertical; min-height:76px; line-height:1.55}
.row{display:flex; gap:9px; flex-wrap:wrap}
.row > *{flex:1; min-width:0}
.inline{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.suffix{position:relative}
.suffix input{padding-right:34px}
.suffix span{position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--ink-3); font-size:12.5px}
.check{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; color:var(--ink-2); cursor:pointer}
.check input{width:17px; height:17px; accent-color:var(--brand); flex:none}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{
  flex:1; min-width:64px; padding:8px 10px; border:1px solid var(--line-2); background:var(--surface);
  border-radius:8px; font-size:13px; font-weight:600; color:var(--ink-2); cursor:pointer;
  transition:.15s
}
.seg button:hover{border-color:var(--ink-3)}
.seg button.on{
  background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); font-weight:700
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 15px; border-radius:8px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:700; font-size:13.5px; cursor:pointer;
  transition:.15s
}
.btn:hover{opacity:.88}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.btn.ghost:hover{opacity:1; border-color:var(--ink-3); background:var(--surface-2)}
.btn.soft{background:var(--brand-soft); color:var(--brand-ink); border-color:transparent}
.btn.sm{padding:6px 11px; font-size:12.5px; border-radius:7px}
.btn.block{width:100%}
.btn.danger{background:var(--bad-soft); color:var(--bad); border-color:transparent}
.btnrow{display:flex; gap:8px; flex-wrap:wrap}

.lines{display:flex; flex-direction:column; gap:7px}
.line{display:grid; grid-template-columns:minmax(0,1fr) 78px 30px; gap:7px; align-items:center}
.line .cost{grid-column:1/-1; font-size:11.5px; color:var(--ink-3); margin-top:-3px}
.iconbtn{
  border:1px solid var(--line-2); background:var(--surface); border-radius:7px; height:38px;
  cursor:pointer; color:var(--ink-3); font-size:15px
}
.iconbtn:hover{color:var(--bad); border-color:var(--bad)}

.kv{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:6px 0; font-size:13.5px}
.kv + .kv{border-top:1px dashed var(--line)}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.kv.total{border-top:2px solid var(--line); margin-top:4px; padding-top:9px; font-size:15px}
.kv.muted .v{font-weight:600; color:var(--ink-2)}
/* 금액은 화면에서 제일 큰 글자여야 합니다.
 * 라벨을 작고 흐리게 두고 숫자만 키우면, 스치듯 봐도 숫자가 먼저 읽힙니다. */
.big{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:15px 17px; border-radius:var(--radius-s);
  background:var(--brand-soft); color:var(--brand-ink); margin-bottom:10px
}
.big .lbl{font-size:12px; font-weight:600; opacity:.75; letter-spacing:-.01em}
.big .val{
  font-size:clamp(23px, 7.4vw, 30px); font-weight:800; font-variant-numeric:tabular-nums;
  line-height:1.05; letter-spacing:-.035em; margin-top:3px; white-space:nowrap
}
.big .sidenote{font-size:12px; font-weight:600; text-align:right; opacity:.85}
.big.plain{background:var(--surface-2); color:var(--ink)}
.big.ok{background:var(--ok-soft); color:var(--ok)}
.big.warn{background:var(--warn-soft); color:var(--warn)}
.big.bad{background:var(--bad-soft); color:var(--bad)}

.stat{display:grid; grid-template-columns:repeat(auto-fit,minmax(124px,1fr)); gap:10px}
.stat .box{
  background:var(--surface-2); border-radius:var(--radius-s); padding:12px 13px;
  border:1px solid var(--line); min-width:0
}
.stat .box .l{font-size:11.5px; color:var(--ink-3); font-weight:600}
.stat .box .n{
  font-size:clamp(16px, 5.2vw, 21px); font-weight:800; font-variant-numeric:tabular-nums;
  margin-top:3px; letter-spacing:-.03em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis
}
@media(min-width:420px){ .stat .box .n{font-size:21px} }
.stat .box.ok .n{color:var(--ok)} .stat .box.warn .n{color:var(--warn)} .stat .box.bad .n{color:var(--bad)}

.badge{display:inline-block; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:999px}
.badge.ok{background:var(--ok-soft); color:var(--ok)}
.badge.warn{background:var(--warn-soft); color:var(--warn)}
.badge.bad{background:var(--bad-soft); color:var(--bad)}
.badge.neutral{background:var(--surface-2); color:var(--ink-2)}
/* 파랑은 <지금 손이 가야 하는 일>에만 씁니다 — 오늘 픽업·오늘 배송.
   경고(빨강·노랑)와 달리 잘못됐다는 뜻이 아니라 "차례가 됐다"는 뜻입니다. */
.badge.info{background:var(--info-soft); color:var(--info)}

/* ── 샘플 표시 ──────────────────────────────────────────────
   처음 열었을 때 넣어 둔 예시 단가라는 뜻입니다. 눈에는 띄되
   사장님이 채워 넣은 진짜 값보다 도드라지면 안 되므로 채도를 낮춥니다. */
.stag{
  display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:1px 7px; margin-left:6px; border-radius:999px; vertical-align:middle;
  background:var(--surface-2); color:var(--ink-2); border:1px dashed var(--line);
  white-space:nowrap;
}
/* 표 안에서는 입력칸 옆이 아니라 아래에 답니다.
   옆에 두면 이름 칸이 그만큼 넓어지려 하고, 그 폭을 분류·색감 select 에서
   빼앗아 와 값이 한 글자로 찌그러집니다. */
td .stag{display:block; width:-moz-fit-content; width:fit-content; margin:5px 0 0}
tr.samp td{background:var(--surface-2)}
tr.samp td input, tr.samp td select{opacity:.82}
tr.samp:hover td input, tr.samp:focus-within td input,
tr.samp:hover td select, tr.samp:focus-within td select{opacity:1}
/* 오래된 단가 경고(.hl)가 샘플보다 급하므로 그쪽 배경을 살립니다 */
tr.hl.samp td{background:var(--brand-soft)}

.samplebar{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  flex-wrap:wrap; border-style:dashed;
}
.samplebar > div{flex:1 1 260px; min-width:0}
.samplebar .btn{flex:0 0 auto}

/* ── 보기 / 수정 ────────────────────────────────────────────
   기본은 읽기입니다. 값이 글자로만 보이면 표가 훨씬 조용해지고,
   지나가다 잘못 스치는 일도 없습니다. */
.tabtools{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 12px; padding-bottom:12px; border-bottom:1px dashed var(--line);
}
.tabtools .sub{margin:0}
.rowact{white-space:nowrap; text-align:right}
.rowbtns{display:inline-flex; gap:6px; align-items:center; justify-content:flex-end}
/* 수정 중 버튼은 표 위에 둡니다 — 열이 펴지면 표가 화면보다 넓어져서
   행 끝에 있는 버튼은 가로로 밀어야 보입니다. */
/* ── 대시보드 기둥 카드 ────────────────────────────────────
   급한 기둥만 테두리로 눈에 띄게 합니다. 다섯 개를 다 강조하면
   아무것도 강조되지 않습니다. */
.pcard > h2{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.pcard.urgent{border-color:var(--bad)}
.pcard.urgent > h2{color:var(--bad)}

/* ── 다섯 기둥 카드 (첫 화면) ────────────────────────────── */
.pillars{display:grid; gap:0; margin-top:2px}
.pillar{
  display:flex; gap:13px; align-items:center;
  padding:14px 2px; background:none; color:var(--ink);
  border-bottom:1px solid var(--line);
}
.pillars .pillar:last-child{border-bottom:0}
.pillar:hover{background:var(--surface-2)}
.pillar .pico{font-size:21px; line-height:1; flex:0 0 auto; width:26px; text-align:center}
.pillar .ptx{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.pillar .ptx b{font-size:14.5px; color:var(--ink)}
.pillar .pd{font-size:13px; color:var(--ink-2)}
.pillar .pn{font-size:11.5px; color:var(--ink-3); line-height:1.5}
/* 오른쪽 끝의 > — 누르면 넘어간다는 표시입니다 */
.pillar::after{
  content:''; flex:0 0 auto; width:7px; height:7px; margin-left:6px;
  border-right:1.6px solid var(--ink-3); border-top:1.6px solid var(--ink-3);
  transform:rotate(45deg);
}
@media(min-width:760px){ .pillars{grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:22px} }

/* ── 도움말 ────────────────────────────────────────────────
   설명을 화면에 늘 펼쳐 두면 정작 봐야 할 숫자가 묻힙니다.
   마우스를 올리면 열리고, 폰에서는 눌러서 엽니다(hover 가 없으므로 JS 로 .open 을 붙입니다). */
/* 보여 줄 것이 없을 때의 안내 — 조용하되 보여야 합니다 */
.emptyhint{margin:10px 0 0; color:var(--ink-3); font-size:13px; line-height:1.6}
.helprow{display:flex; justify-content:flex-end; margin-top:2px; margin-bottom:-4px}
/* 제목·라벨 옆에 붙는 ⓘ 는 글의 흐름을 끊지 않게 작게 둡니다 */
.pagehead h1 .helpwrap, .field label .helpwrap{vertical-align:middle}
.pagehead h1 .helpbtn, .field label .helpbtn{padding:2px 4px; font-size:13px; opacity:.55}
.pagehead h1 .helpbtn:hover, .field label .helpbtn:hover{opacity:1}
.field label{display:flex; align-items:center; gap:2px}
.pagehead h1 .helpbox, .field label .helpbox{right:auto; left:0}
.helpwrap{position:relative; display:inline-flex}
.helpbtn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer; padding:4px 6px;
  color:var(--ink-3); font-size:12px; font-weight:600; line-height:1;
  border-radius:8px;
}
.helpbtn:hover{color:var(--brand-ink); background:var(--surface-2)}
.helpbtn .hl{font-size:11.5px}
.helpbox{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:60;
  width:min(320px, 78vw); padding:11px 13px;
  background:var(--surface); color:var(--ink-2);
  border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-float);
  font-size:12.5px; line-height:1.65; font-weight:400; text-align:left;
  white-space:normal;
}
.helpbox b{color:var(--ink)}
/* PC 는 마우스로, 폰은 눌러서(.open), 키보드는 focus 로 */
/* 아래에 자리가 없으면 위로 폅니다 (app.js placeHelp) */
.helpwrap.up .helpbox{top:auto; bottom:calc(100% + 6px)}
.helpwrap:hover .helpbox,
.helpwrap:focus-within .helpbox,
.helpwrap.open .helpbox{display:block}
/* 화면 왼쪽에 붙은 도움말은 오른쪽으로 펴야 잘리지 않습니다 */
.helprow + .helpbox, .field .helpbox{right:auto; left:0}

@media(max-width:600px){
  .helpbox{width:min(300px, 86vw)}
  .helpbtn{padding:6px 8px}      /* 손가락으로 누를 자리 */
}

/* ── 폰 아래 막대 (다섯 기둥) ──────────────────────────────
   폰이 1순위입니다. ☰ 를 열어 스무 줄을 훑는 일이 하루에도 여러 번인데,
   실제로 오가는 곳은 다섯 곳뿐입니다. 그 다섯을 늘 손끝에 둡니다.
   PC 는 왼쪽 메뉴가 이미 다 보이므로 띄우지 않습니다. */
.tabbar{display:none}
@media(max-width:959px){
  .tabbar{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed; left:0; right:0; bottom:0; z-index:46;
    background:var(--surface); border-top:1px solid var(--line);
    /* 아이폰 홈 바에 가리지 않게 */
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .tabbar a{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    min-height:56px; font-size:11px; font-weight:600; color:var(--ink-3);
    text-decoration:none; padding:6px 2px;
  }
  .tabbar a svg{width:23px; height:23px; display:block; stroke-width:1.7}
  .tabbar a span{font-size:19px; line-height:1}
  .tabbar a.on{color:var(--brand); font-weight:700}
  .tabbar a.on svg{stroke-width:2.1}
  /* 막대에 가려 마지막 카드가 안 눌리는 일이 없게 자리를 비웁니다 */
  .content{padding-bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
  /* 의견 보내기 단추도 막대 위로 올립니다 */
  .fab{bottom:calc(70px + env(safe-area-inset-bottom, 0px))}
}

/* ── 📅 예약 달력 ──────────────────────────────────────────
   한 칸에 세 가지만 담습니다 — 날짜, 건수, 금액.
   더 넣으면 폰에서 글자가 겹칩니다. 자세한 것은 아래 목록에서 봅니다. */
.bhead{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px;
  margin-top:4px; font-size:11.5px; font-weight:700; color:var(--ink-3); text-align:center;
}
.bhead .sun{color:var(--bad)} .bhead .sat{color:var(--brand-ink)}
.bgrid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:6px}
.bcell{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px;
  min-height:62px; padding:6px 2px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; overflow:hidden;
}
.bcell:hover{background:var(--surface-2)}
.bcell .bd{font-size:13px; font-weight:700; line-height:1.1}
.bcell .bn{font-size:10.5px; font-weight:700; color:var(--brand-ink)}
.bcell .bn,.bcell .bs{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bcell .bs{font-size:10px; color:var(--ink-3)}
/* 이번 달이 아닌 날 — 지우지 않고 흐리게 둡니다. 달의 앞뒤가 보여야 주 단위로 읽힙니다.
   다만 예약이 있는 날은 덜 흐리게 합니다 — 월초·월말 예약을 놓치면 안 되니까요. */
.bcell.out{opacity:.38}
.bcell.out.has{opacity:.78}
.bcell.closed{background:var(--surface-2)}
.bcell.closed .bd{color:var(--ink-3)}
.bcell.has{border-color:var(--brand)}
.bcell.today{box-shadow:inset 0 0 0 2px var(--brand)}
.bcell.on{background:var(--brand-soft); border-color:var(--brand)}
/* 취소된 예약은 지우지 않고 흐리게 — 무슨 일이 있었는지 남아야 합니다 */
tr.off td{opacity:.5}
tr.off td b{text-decoration:line-through}

@media(max-width:600px){
  .bcell{min-height:54px; padding:5px 1px}
  .bcell .bd{font-size:12px}
  .bcell .bs{display:none}      /* 폰에서는 금액까지 넣으면 겹칩니다 */
}

/* ── 오늘 묶음 탭 (오늘 · 예약 관리 · 매입 · 매출) ──────────────────
   화면은 넷이지만 위에 같은 줄이 있어 한 곳처럼 오갑니다. */
.daytabs{
  display:flex; gap:4px; margin:-4px 0 14px; padding:4px;
  background:var(--surface-2); border-radius:12px; overflow-x:auto; scrollbar-width:none;
}
.daytabs::-webkit-scrollbar{display:none}
.daytabs a{
  flex:1 1 0; min-width:max-content; text-align:center; padding:9px 12px; border-radius:9px;
  font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap
}
.daytabs a:hover{color:var(--ink)}
.daytabs a.on{background:var(--surface); color:var(--brand); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ── 한눈에 달력 — 예약(분홍) · 매입(주황) · 매출(초록) ─────────────── */
.calchk{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 8px}
.lchk{
  display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--surface); font-size:13px; cursor:pointer;
  color:var(--ink-3); user-select:none
}
.lchk input{margin:0; width:16px; height:16px; accent-color:var(--brand)}
.lchk .dot{width:9px; height:9px; border-radius:50%; background:var(--ink-3)}
.lchk b{font-weight:700}
.lchk.on{color:var(--ink)}
.lchk.book.on{border-color:var(--brand); background:var(--brand-soft)}
.lchk.book .dot{background:var(--brand)}
.lchk.buy.on{border-color:var(--warn); background:var(--warn-soft)}
.lchk.buy .dot{background:var(--c-buy)}
.lchk.sale.on{border-color:var(--c-sale); background:var(--info-soft)}
.lchk.sale .dot{background:var(--c-sale)}

.cchip{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10.5px; font-weight:700; line-height:1.35; padding:0 5px; border-radius:6px
}
.cchip.book{background:var(--brand-soft); color:var(--brand-ink)}
.cchip.buy{background:var(--warn-soft); color:var(--warn)}
.cchip.sale{background:var(--info-soft); color:var(--info)}
.ccell{min-height:70px}
.ccell.has{border-color:var(--line-2)}

.cday{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.cdayhead{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:8px}
.cdayhead b{font-size:15px}
.cdaylist{list-style:none; margin:0; padding:0}
.cdaylist li{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.cdaylist li:last-child{border-bottom:0}
.cdaylist .cchip{flex:0 0 auto; font-size:11px; padding:2px 7px}
.cdaylist .dn{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.cdaylist .dn b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cdaylist .da{flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums}
.qbtns{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.qadd{margin-top:10px; padding:12px; border-radius:12px; background:var(--surface-2)}
.qfoot{display:flex; justify-content:flex-end; gap:8px; margin-top:8px}

@media(max-width:600px){
  .ccell{min-height:58px}
  .cchip{font-size:9.5px; padding:0 3px}
}

/* ── 예약 관리 — 단계 표시 (접수 주황 · 제작 파랑 · 완료 초록) ──────── */
.bst{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:10.5px; font-weight:700; line-height:1.35; padding:0 5px; border-radius:6px
}
.bst.s0{background:var(--warn-soft); color:var(--warn)}
.bst.s1{background:var(--info-soft); color:var(--info)}
.bst.s2{background:var(--ok-soft); color:var(--ok)}
.bstlegend{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; margin-top:10px; font-size:12px; color:var(--ink-2)}
.bstlegend .bst{display:inline-block}

.rform{margin:4px 0 14px}
.rformhead{font-weight:700; font-size:14px; color:var(--brand-ink)}
.rtabs{display:flex; gap:6px; margin:4px 0 12px; overflow-x:auto; scrollbar-width:none}
.rtabs::-webkit-scrollbar{display:none}
.rtab{
  flex:1 1 0; min-width:max-content; padding:9px 12px; border-radius:10px; cursor:pointer;
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  font:inherit; font-size:13.5px; font-weight:600
}
.rtab b{margin-left:2px}
.rtab.s0.on{background:var(--warn-soft); border-color:var(--warn); color:var(--warn)}
.rtab.s1.on{background:var(--info-soft); border-color:var(--info); color:var(--info)}
.rtab.s2.on{background:var(--ok-soft); border-color:var(--ok); color:var(--ok)}
.rtab.sx.on{background:var(--surface-2); border-color:var(--ink-3); color:var(--ink)}
.rcards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px}
.rcard{
  border:1px solid var(--line-2); border-left-width:4px; border-radius:12px; padding:12px;
  background:var(--surface); display:flex; flex-direction:column; gap:3px
}
.rcard.s0{border-left-color:var(--warn)}
.rcard.s1{border-left-color:var(--info)}
.rcard.s2{border-left-color:var(--ok)}
.rcard.s-1{border-left-color:var(--ink-3); opacity:.6}
.rtop{display:flex; align-items:baseline; gap:8px}
.rtop .grow,.ract .grow{flex:1 1 auto}
.rtime{font-size:15px}
.ramt{font-variant-numeric:tabular-nums}
.rname{font-weight:600}
.rmemo{font-size:12.5px; color:var(--ink-2); background:var(--surface-2); border-radius:8px; padding:4px 8px; margin-top:2px}
.ract{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px}

/* ── 메뉴 — 눌러서 고르는 품목 ───────────────────────────────────── */
.menupick{margin-bottom:12px; padding:10px 12px; border-radius:12px; background:var(--surface-2)}
.menuhead{display:flex; align-items:baseline; gap:8px; margin-bottom:8px}
.menuhead .grow{flex:1 1 auto}
.mchips{display:flex; flex-wrap:wrap; gap:6px}
.mchipwrap{display:inline-flex; align-items:center}
.mchip{
  padding:7px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface);
  color:var(--ink); font:inherit; font-size:13px; font-weight:600; cursor:pointer
}
.mchip small{font-weight:500; color:var(--ink-3); margin-left:2px}
.mchip.auto{border-style:dashed}
.mchip:hover{border-color:var(--brand); color:var(--brand-ink)}
.mdel{display:none; border:0; background:none; color:var(--bad); font-size:16px; cursor:pointer; padding:0 4px}
.menupick.editing .mdel{display:inline-block}
.menuadd{margin-top:10px}

/* ── 돈 대시보드 ─────────────────────────────────────────────────── */
.yearnav{display:flex; align-items:center; gap:8px; margin:-4px 0 14px}
.yearnav .grow{flex:1 1 auto}
.goalbar{height:8px; border-radius:999px; background:var(--surface-2); margin-top:12px; overflow:hidden}
.goalbar i{display:block; height:100%; border-radius:999px; background:var(--brand)}
.neg{color:var(--bad)}
.mlegend{display:flex; gap:14px; font-size:12.5px; color:var(--ink-2); margin-bottom:8px}
.mlegend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px}
.mlegend i.sale,.mbars i.sale{background:var(--c-sale)}
.mlegend i.buy,.mbars i.buy{background:var(--c-buy)}
.mchart{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; height:170px;
  border-bottom:1px solid var(--line-2)}
.mcol{position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-width:0; outline:none}
.mbars{display:flex; align-items:flex-end; justify-content:center; gap:2px; height:100%}
.mbars i{display:block; width:40%; max-width:14px; border-radius:4px 4px 0 0}
.mlab{position:absolute; bottom:-18px; left:0; right:0; text-align:center; font-size:11px; color:var(--ink-3)}
.mcol.cur .mlab{color:var(--ink); font-weight:700}
.mcol.future{opacity:.35}
.mcol[data-tip]:hover,.mcol[data-tip]:focus{background:var(--surface-2); border-radius:6px 6px 0 0}
.mcol[data-tip]:hover::after,.mcol[data-tip]:focus::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  width:max-content; max-width:220px; white-space:normal; z-index:5;
  background:var(--ink); color:var(--surface); font-size:12px; line-height:1.4; padding:6px 9px; border-radius:8px
}
.mcol:first-child[data-tip]:hover::after,.mcol:nth-child(2)[data-tip]:hover::after{left:0; transform:none}
.mcol:nth-child(n+11)[data-tip]:hover::after{left:auto; right:0; transform:none}
.psub{margin-top:28px; font-size:12px; color:var(--ink-3)}
.pchart{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:4px; height:70px; position:relative}
.pchart::before{content:''; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--line-2)}
.pcol{position:relative; height:100%}
.pbar{position:absolute; left:30%; right:30%; bottom:50%; background:var(--ink-2); border-radius:3px 3px 0 0}
.pcol.neg .pbar{bottom:auto; top:50%; background:var(--bad); border-radius:0 0 3px 3px}
.insights{list-style:none; margin:0; padding:0}
.insights li{color:var(--ink); display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); line-height:1.5}
.insights li:last-child{border-bottom:0}
.insights .ic{flex:0 0 auto}

/* 대시보드 '우리 가게 숫자' 고치는 자리 */
.numedit{
  background:var(--brand-soft); border:1px solid var(--brand);
  border-radius:12px; padding:14px 14px 4px; margin-bottom:4px;
}
.numedit .btnrow{align-items:center; flex-wrap:wrap; gap:8px}
.numedit .btnrow .sub{margin-left:auto}
.card > h2 > .btn{margin-left:auto}

.tabtools.editbar{background:var(--brand-soft); border:1px solid var(--brand);
  border-radius:12px; padding:10px 12px; border-bottom-style:solid}
.tabtools .grow{flex:1 1 auto}
.card > h2 .grow{flex:1 1 auto}
.btn.dangertext{color:var(--bad)}
/* 수정 중인 행은 한눈에 구분돼야 합니다 — 다른 행은 그대로 읽기 상태니까요 */
tr.editing td{background:var(--brand-soft); border-top:1px solid var(--brand); border-bottom:1px solid var(--brand)}
tr.editing td:first-child{border-left:1px solid var(--brand)}
tr.editing td:last-child{border-right:1px solid var(--brand)}
/* 계산을 틀어 놓는 값이 든 행 — 샘플보다 급합니다 */
tr.rowbad td{background:var(--bad-soft)}
tr.rowbad.samp td{background:var(--bad-soft)}
.btn.xs{font-size:11px; padding:2px 8px; min-height:26px; border-radius:8px}
.btn.xs.bad{background:var(--bad-soft); color:var(--bad); border-color:var(--bad)}

.mk{font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:999px}
.mk.on{background:var(--ok-soft); color:var(--ok)}
.mk.off{background:var(--surface-2); color:var(--ink-2)}
.iconbtn.danger{color:var(--bad); border-color:var(--bad)}

/* ── 꽃 사전 고르기 ─────────────────────────────────────── */
.booklist{
  max-height:min(46vh, 340px); overflow-y:auto; margin-top:10px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
}
.booklist .pad{padding:16px; text-align:center}
.bookitem{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; min-height:48px; background:none; border:0; cursor:pointer;
  border-bottom:1px solid var(--line); color:var(--ink); font:inherit;
}
.bookitem:last-child{border-bottom:0}
.bookitem:hover{background:var(--surface)}
.bookitem.on{background:var(--brand-soft)}
.bookitem[disabled]{opacity:.5; cursor:default}
.bookitem .bn{font-weight:700; flex:0 0 auto}
.bookitem .bm{font-size:12px; color:var(--ink-2); flex:1 1 auto; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bookitem .bo{font-size:11px; color:var(--ok); flex:0 0 auto}
.bookpick{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px}
.bookpick input{flex:1 1 120px; min-width:0}
.bookpick .sub{flex:0 0 auto}

.tip{
  display:flex; gap:9px; padding:10px 12px; border-radius:var(--radius-s); font-size:13px;
  background:var(--sage-soft); color:var(--ink); border:1px solid transparent
}
.tip.warn{background:var(--warn-soft); color:var(--ink)}
.tip.warn b{color:var(--warn)}
.tip.bad{background:var(--bad-soft); color:var(--ink)}
.tip.bad b{color:var(--bad)}
.tip.info{background:var(--surface-2); color:var(--ink-2)}
.tip b{font-weight:700}
.tip + .tip{margin-top:7px}

.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 -4px; padding:0 4px}
table{border-collapse:collapse; width:100%; font-size:13px}
th,td{padding:8px 9px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap}
th{
  font-size:11.5px; color:var(--ink-3); font-weight:600; background:var(--surface);
  border-bottom:1px solid var(--line-2)
}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
tr.hl td{background:var(--brand-soft)}
tbody tr:last-child td{border-bottom:none}
table input,table select{padding:5px 7px; border-radius:7px; font-size:12.5px}
/* 값이 보여야 고를 수 있습니다. 폭을 안 정해 두면 열이 많은 표에서 브라우저가
   select 를 한 글자까지 눌러 버려서, '분류'가 무엇으로 잡혀 있는지 알 수 없습니다.
   (이 규칙이 폰에만 있었습니다 — 데스크톱에서도 같은 일이 일어납니다) */
table select{min-width:76px}
/* 폭을 지정한 칸은 빼야 합니다 — 안 그러면 좁은 칸까지 104px 로 벌어집니다 */
table input[type=text]:not(.w-narrow):not(.w-mid){min-width:104px}
table input.num{text-align:right}
/* input[type=text] 는 0,1,1 이라 클래스 하나(.w-mid, 0,1,0)보다 셉니다.
   그래서 여태 폭 지정이 조용히 무시되고 전부 width:100% 로 벌어져 있었습니다.
   요소를 붙여 특정도를 맞추고, 뒤에 선언해 이기게 합니다. */
.w-narrow, input.w-narrow, select.w-narrow{width:78px}
.w-mid, input.w-mid, select.w-mid{width:112px}
.emptyrow{color:var(--ink-3); text-align:center; padding:22px 0; font-size:13px}

.copybox{background:var(--surface-2); border:1px dashed var(--line); border-radius:11px; padding:12px}
.copybox pre{
  margin:0 0 9px; white-space:pre-wrap; word-break:break-word; font-family:inherit;
  font-size:13.5px; line-height:1.6
}
/* 제안 문구 — 보내기 전에 직접 고칠 수 있는 칸 */
.copybox .copytext{
  width:100%; background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:10px 11px; font-family:inherit; font-size:13.5px; line-height:1.7;
  resize:vertical; min-height:64px
}
.copybox .copytext:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.copyfoot{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:9px}
.copyfoot .note{font-size:11.5px; color:var(--ink-3); margin-left:auto}
@media(max-width:520px){ .copyfoot .note{margin-left:0; width:100%} }

.bar{height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden}
.bar > i{display:block; height:100%; background:var(--brand); border-radius:99px}
.bar > i.ok{background:var(--ok)} .bar > i.warn{background:var(--warn)} .bar > i.bad{background:var(--bad)}
.spark{display:flex; align-items:flex-end; gap:5px; height:64px}
.spark .col{flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px}
.spark .col i{display:block; width:100%; background:var(--brand); border-radius:5px 5px 0 0; min-height:3px}
.spark .col span{font-size:10px; color:var(--ink-3)}

/* 탭(세그먼트) — 켜진 것은 브랜드 색으로 채웁니다.
 * 검정으로 채우면 강하긴 한데, 화면마다 검은 알약이 떠 있어 앱이 딱딱해 보였습니다. */
.tabs{
  display:flex; gap:2px; overflow-x:auto; margin-bottom:14px;
  border-bottom:1px solid var(--line);
  scrollbar-width:none; -ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  position:relative; padding:11px 13px 10px; border:0; background:none;
  font-size:14px; font-weight:600; color:var(--ink-3); white-space:nowrap; cursor:pointer;
  transition:color .15s
}
/* 밑줄은 글자 폭보다 조금 좁게 — 글자 아래에 딱 붙어 보입니다 */
.tabs button::after{
  content:''; position:absolute; left:5px; right:5px; bottom:-1px; height:2px;
  background:transparent; border-radius:2px
}
.tabs button:hover{color:var(--ink-2)}
.tabs button.on{color:var(--brand); font-weight:700}
.tabs button.on::after{background:var(--brand)}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:90;
  background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:.2s
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.footnote{margin-top:22px; color:var(--ink-3); font-size:11.5px; text-align:center}
.divider{height:1px; background:var(--line); margin:14px 0}
details.help{margin-top:12px; font-size:12.5px; color:var(--ink-2)}
details.help summary{cursor:pointer; font-weight:600; color:var(--ink-3)}
details.help div{padding:9px 0 0}
details.help code{font-family:var(--mono); font-size:11.5px; background:var(--surface-2); padding:1px 5px; border-radius:5px}

@media print{
  .topbar,.sidenav,.scrim,.noprint,.pagehead,.footnote,.tabs{display:none!important}
  ins.adsbygoogle,.google-auto-placed{display:none!important}
  body{background:#fff}
  .content{padding:0; max-width:none}
  .card{box-shadow:none; border:none; padding:0; page-break-inside:avoid}
  .grid,.grid.side,.grid.two,.grid.three{display:block}
  .quote-sheet{border:1px solid #ccc; padding:24px}
  .tablewrap{overflow:visible}
  .copyfoot{display:none!important}
  .copybox .copytext{border:none; background:none; padding:0; resize:none}
}
.quote-sheet{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px}
.quote-sheet h3{font-size:18px; text-align:center; margin-bottom:4px}
.quote-sheet .qmeta{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2); margin-bottom:14px; flex-wrap:wrap; gap:6px}

/* ---------- 가이드(첫 화면) ---------- */
.hero{
  text-align:center; padding:34px 20px 30px; border-radius:20px; margin-bottom:16px;
  background:linear-gradient(170deg,var(--brand-soft),var(--surface) 78%);
  border:1px solid var(--line);
}
.hero .mark{font-size:44px; line-height:1; display:block; margin:0 auto 10px}
/* 이모지에서 아이콘 이미지로 바뀌어서 크기를 정해 줘야 합니다 */
.hero img.mark{width:72px; height:72px; border-radius:20px}
@media(min-width:700px){ .hero img.mark{width:84px; height:84px; border-radius:24px} }
.hero h1{font-size:26px; letter-spacing:-.03em}
.hero .quote{
  margin-top:10px; font-size:15px; font-weight:700; color:var(--brand-ink);
}
.hero .sub{margin-top:8px; font-size:13.5px; color:var(--ink-2)}
.hero .btnrow{justify-content:center; margin-top:18px}
@media(min-width:700px){ .hero{padding:46px 28px 40px} .hero h1{font-size:32px} .hero .quote{font-size:17px} }

.letter{
  background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand);
  border-radius:16px; padding:22px 20px; box-shadow:var(--shadow);
}
@media(min-width:700px){ .letter{padding:30px 34px} }
.letter h2{font-size:17px; margin-bottom:14px}
.letter p{margin:0 0 14px; font-size:14.5px; line-height:1.85; color:var(--ink)}
.letter p:last-child{margin-bottom:0}
.letter .scene{
  background:var(--surface-2); border-radius:12px; padding:14px 16px; margin:0 0 14px;
  font-size:14px; line-height:1.9; color:var(--ink-2)
}
.letter .scene b{color:var(--ink); font-weight:600}
.letter em{font-style:normal; font-weight:700; color:var(--brand-ink); background:var(--brand-soft);
  padding:1px 6px; border-radius:6px}
.letter .sign{text-align:right; font-size:13px; color:var(--ink-3); margin-top:18px}

.steps{display:flex; flex-direction:column; gap:12px}
.step{display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; align-items:start}
.step .n{
  width:32px; height:32px; border-radius:50%; background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px
}
.step h3{font-size:14.5px; margin-bottom:3px}
.step p{margin:0; font-size:13px; color:var(--ink-2); line-height:1.65}
.step .when{font-size:11.5px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft);
  padding:1px 8px; border-radius:999px; margin-left:6px; white-space:nowrap}

.features{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){ .features{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(min-width:1000px){ .features{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} }
.feature{
  display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; align-items:start;
  padding:12px 13px; border-radius:12px; background:var(--surface-2); text-decoration:none
}
.feature:hover{background:var(--brand-soft)}
.feature .ico{font-size:19px; line-height:1.3}
.feature b{display:block; font-size:13.5px}
.feature span{display:block; font-size:12px; color:var(--ink-2); line-height:1.55}

/* ---------- 꽃 정보 주소록 ---------- */
.reslist{display:grid; gap:10px; grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){ .reslist{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.reslist-item{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:14px 15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px
}
.reslist-item.editing{grid-column:1/-1; background:var(--surface-2)}
.reshead{display:flex; align-items:flex-start; gap:9px}
.resname{display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0}
.resname b{font-size:14.5px; letter-spacing:-.02em}
.resaddr{margin:6px 0 0; font-size:12.5px; color:var(--ink-2); font-weight:600}
.resmemo{margin:0; font-size:12.5px; color:var(--ink-2); line-height:1.65}
.star{
  background:none; border:none; cursor:pointer; font-size:19px; line-height:1;
  color:var(--ink-3); padding:0; flex:none
}
.star.on{color:#e0a92b}
.reslist-item .btnrow{margin-top:auto}

/* ── 모달 (피드백 · 앞으로 prompt/confirm 대체용) ── */
.modal{
  position:fixed; inset:0; z-index:85; display:flex; justify-content:center; align-items:flex-end;
  background:rgba(0,0,0,.45); animation:fbIn .16s ease
}
@keyframes fbIn{from{opacity:0}to{opacity:1}}
@media(min-width:640px){ .modal{align-items:center; padding:20px} }
.modal-card{
  background:var(--surface); width:100%; max-width:480px; max-height:92vh;
  display:flex; flex-direction:column; border-radius:14px 14px 0 0; box-shadow:var(--shadow-float)
}
@media(min-width:640px){ .modal-card{border-radius:14px} }
.modal-head{
  display:flex; align-items:center; gap:10px; padding:15px 16px 11px;
  border-bottom:1px solid var(--line); flex:none
}
.modal-head h2{font-size:15px; flex:1}
.modal-body{padding:15px 16px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch}
.modal-body .sub{line-height:1.7}
.modal-foot{
  display:flex; gap:8px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); flex:none
}
.modal-foot .btn{flex:1}

/* ── 의견 보내기 버튼 (모든 화면 우하단) ── */
.fab{
  position:fixed; right:14px; bottom:14px; z-index:38;
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 15px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-2); box-shadow:var(--shadow-float);
  font-size:12.5px; font-weight:700; cursor:pointer
}
.fab:hover{color:var(--brand-ink); border-color:var(--brand)}
.fab .fab-t{display:none}
@media(min-width:700px){ .fab{right:22px; bottom:22px} .fab .fab-t{display:inline} }

/* ── 사이드바 하단 정책 링크 ── */
.navlegal{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:11.5px; color:var(--ink-3)}
.navlegal a{color:var(--ink-3); text-decoration:none}
.navlegal a:hover{color:var(--brand-ink)}

/* ── 처리방침 등 문서 페이지 ── */
.legal{max-width:820px}
.legal .card{margin-bottom:14px}
.legal p{margin:0 0 10px; font-size:14px; line-height:1.8}
.legal p:last-child{margin-bottom:0}
.legal ul,.legal ol{margin:0; padding-left:20px; font-size:14px; line-height:1.85}
.legal li{margin-bottom:5px}
.legal li:last-child{margin-bottom:0}
.legal .note{color:var(--ink-3); font-size:12.5px; line-height:1.7}
.legal code{font-family:var(--mono); font-size:12px; background:var(--surface-2); padding:1px 5px; border-radius:5px}
.legal a{color:var(--brand-ink); text-decoration:none}
.legal th,.legal td{white-space:normal; vertical-align:top; min-width:88px}
.legal .toc{columns:2; column-gap:24px}
@media(max-width:560px){ .legal .toc{columns:1} }
.legal .toc a{text-decoration:none; color:var(--ink-2)}
.legal .toc a:hover{color:var(--brand-ink)}
.draft-banner{
  background:var(--warn-soft); color:var(--warn); border:1px dashed var(--warn);
  border-radius:12px; padding:13px 15px; margin-bottom:16px; font-size:13px; line-height:1.7
}
.draft-banner b{display:block; margin-bottom:4px}
.fill{background:#ffe680; color:#5a4300; font-weight:700; padding:1px 6px; border-radius:5px}

/* ── ⓪ 대시보드 ── */
.setupgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:8px}
.setupitem{
  display:flex; align-items:center; gap:9px; padding:10px 12px; border-radius:11px;
  background:var(--surface-2); border:1px solid var(--line); text-decoration:none
}
.setupitem .mk{font-size:15px; flex:none}
.setupitem b{display:block; font-size:13px}
.setupitem .sub{font-size:11.5px}
.setupitem.on{background:var(--ok-soft); border-color:transparent}
.setupitem.on b{color:var(--ok)}

.todolist{display:flex; flex-direction:column; gap:7px}
.todo{
  display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:11px; text-decoration:none;
  background:var(--surface-2); border-left:3px solid var(--line); font-size:13px
}
.todo .ic{font-size:15px}
.todo .go{font-size:11.5px; font-weight:700; color:var(--ink-3); white-space:nowrap}
.todo:hover .go{color:var(--brand-ink)}
.todo.ok{background:var(--ok-soft); border-left-color:var(--ok)}
.todo.warn{background:var(--warn-soft); border-left-color:var(--warn)}
.todo.bad{background:var(--bad-soft); border-left-color:var(--bad)}
@media(max-width:560px){
  .todo{grid-template-columns:24px minmax(0,1fr); }
  .todo .go{grid-column:2; text-align:right}
}

/* ── 계정 · 저장 안내 ── */
.acct{white-space:nowrap}
.acct.on{color:var(--ok); border-color:var(--ok)}

/* ── 상단 계정 메뉴 (마이페이지 · 로그아웃) ── */
#acctSlot{position:relative; display:inline-flex}
.acctmenu{
  position:absolute; top:calc(100% + 6px); right:0; z-index:50;
  min-width:184px; max-width:250px; padding:6px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow-float);
}
.acctmenu-who{
  padding:7px 10px 8px; font-size:11.5px; color:var(--ink-3);
  border-bottom:1px solid var(--line); margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acctmenu-item{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:none; border:0; padding:9px 10px; border-radius:8px;
  font-size:13.5px; color:var(--ink)
}
.acctmenu-item:hover,.acctmenu-item:focus{background:var(--surface-2); outline:none}
.savebar{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  background:var(--warn-soft); border:1px solid transparent; border-radius:var(--radius);
  padding:13px 14px; margin-bottom:14px; font-size:13px; color:var(--ink)
}
.savebar .ic{font-size:16px; flex:none; line-height:1}
.savebar .tx{flex:1; min-width:180px; line-height:1.6}
.savebar .sub{color:var(--ink-2); font-size:11.5px}
.savebar .btn{flex:none}

.risk{display:flex; flex-direction:column; gap:8px}
.riskitem{
  display:grid; grid-template-columns:22px minmax(0,1fr); gap:9px; align-items:start;
  background:var(--surface-2); border-radius:10px; padding:10px 12px; font-size:13px; line-height:1.6
}
.hl-warn{background:var(--warn-soft); color:var(--warn); padding:1px 6px; border-radius:5px}

.prov{margin-bottom:8px; border:none}
.prov.kakao{background:#FEE500; color:#191600}
.prov.google{background:#fff; color:#1f1f1f; border:1px solid #dadce0}
.prov.apple{background:#000; color:#fff}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prov.google{background:#f5f5f5; color:#1f1f1f}
}
:root[data-theme="dark"] .prov.google{background:#f5f5f5; color:#1f1f1f}

.cfpick{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
@media(max-width:520px){ .cfpick{grid-template-columns:minmax(0,1fr)} }
.cfcard{background:var(--surface-2); border:1px solid var(--line); border-radius:11px; padding:12px}
.cfcard b{display:block; font-size:13.5px; margin-bottom:3px}
.cfcard .note{font-size:11.5px; color:var(--ink-3); margin-top:2px}
.btn.block{width:100%}

/* ── ① 단가 즉시 수정 ── */
.card > h2 .hint{display:flex; align-items:center; gap:8px}
.card > h2 .hint .btn{margin-left:2px}
#peModal td{vertical-align:middle}
#peModal .note{font-size:11px; color:var(--ink-3); font-weight:400; white-space:normal}
#peModal tbody tr td[colspan]{background:var(--surface-2); font-size:12px}

/* ── 소셜 로그인 버튼 (네이버 · 구글 · 카카오 · 애플) ── */
.prov{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-bottom:8px; border:none; font-weight:700
}
.prov .pv-mk{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:5px; font-size:12px; font-weight:900; flex:none
}
/* 네이버 — BI 가이드: #03C75A 바탕 · 흰 N 로고 · 흰 글자. 색은 다크 모드에서도 바꾸지 않습니다 */
.prov.naver{background:#03C75A; color:#fff; min-height:46px; border-radius:8px; font-size:15px}
.prov.naver:hover{opacity:1; background:#02b351}
.prov .pv-logo{display:inline-flex; width:15px; height:15px; flex:none}
.prov.kakao .pv-logo{width:19px; height:19px}
.prov .pv-logo svg{display:block; width:100%; height:100%}
.prov.naver .pv-txt{letter-spacing:-.01em}
.prov.google{background:#fff; color:#1f1f1f; border:1px solid #dadce0}
.prov.google .pv-mk{background:#4285F4; color:#fff}
/* 카카오 — 디자인 가이드: #FEE500 바탕 · 검은 말풍선 · 검은 글자 85% · 모서리 12px */
.prov.kakao{background:#FEE500; color:rgba(0,0,0,.85); min-height:46px; border-radius:12px; font-size:15px}
.prov.kakao:hover{opacity:1; background:#f5dc00}
.prov.apple{background:#000; color:#fff}
.prov.apple .pv-mk{background:#fff; color:#000; font-size:14px}
/* 로컬 테스트용 가짜 제공자 — 실서버에서는 뜨지 않습니다 */
.prov.dev{background:var(--surface-2); color:var(--ink-2); border:1px dashed var(--line)}
.prov.dev .pv-mk{background:transparent}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .prov.google{background:#f5f5f5; color:#1f1f1f; border-color:#c8c8c8}
  :root:not([data-theme="light"]) .prov.apple{background:#fff; color:#000}
  :root:not([data-theme="light"]) .prov.apple .pv-mk{background:#000; color:#fff}
}
:root[data-theme="dark"] .prov.google{background:#f5f5f5; color:#1f1f1f; border-color:#c8c8c8}
:root[data-theme="dark"] .prov.apple{background:#fff; color:#000}
:root[data-theme="dark"] .prov.apple .pv-mk{background:#000; color:#fff}

/* 연결된 로그인 옆의 작은 [끊기] */
.btn.xs{padding:2px 8px; font-size:11.5px; border-radius:7px; vertical-align:middle}

/* ── 브랜드 (한글 + 영문 부제) ── */
.brand strong{letter-spacing:-.02em}
.brand small{letter-spacing:.01em}

/* ── ⑥ 이벤트 견적 품목 줄 ── */
.evlines{display:flex; flex-direction:column; gap:10px}
.evline{
  display:grid; grid-template-columns:minmax(0,1fr) 92px 108px 30px; gap:7px; align-items:center;
  background:var(--surface-2); border-radius:11px; padding:10px
}
.evline .evnum{position:relative}
.evline .evnum input{width:100%; padding-right:34px}
.evline .evnum .unit{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--ink-3); pointer-events:none
}
.evline .evcost{grid-column:1/-1; font-size:11.5px; color:var(--ink-3)}
@media(max-width:560px){
  .evline{grid-template-columns:minmax(0,1fr) 44px}
  .evline .evnum{grid-column:span 1}
  .evline select{grid-column:1/2}
}

/* ── 근무표 ─────────────────────────────────────────────
 * 셀 전체가 버튼입니다 — 폰에서 손가락으로 누를 자리를 넓게 잡으려고. */
.shtable td.shcell{padding:3px; text-align:center}
.shtable th.shoff,.shtable td.shoff{background:var(--surface-2)}
.shtable td.shname{font-weight:600}
.shbtn{width:100%; min-width:74px; padding:6px 4px; border:1px solid var(--line);
  border-radius:8px; background:var(--surface); color:var(--ink); font-size:12px;
  line-height:1.5; cursor:pointer; text-align:center}
.shbtn:hover{border-color:var(--brand)}
.shbtn.on{border-color:var(--brand); background:var(--brand-soft)}
.shbtn.empty{color:var(--ink-3); border-style:dashed; min-height:42px}
.wklabel{padding:0 8px; font-size:13.5px; align-self:center}
.ok{color:var(--ok)}

/* 4대보험 개별 선택 — 공제 칸 아래에 작게 */
.inscheck{display:flex; flex-wrap:wrap; gap:2px 8px; margin-top:4px}
.check.sm{font-size:11.5px; color:var(--ink-2); gap:3px}

/* on/off 스위치 — 켜져 있는지 한눈에 */
.switch{display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:11.5px;
  font-weight:700; color:var(--ink-3)}
.switch input:checked + span{color:var(--ok)}

/* 급여 계산서 */
.quote-sheet h4{font-size:13px; margin:14px 0 6px; color:var(--ink-2)}
.quote-sheet .sheettotal td{border-top:1px solid var(--ink-3)}
.howlist{margin:0; padding-left:18px; font-size:12px; color:var(--ink-2); line-height:1.8}
.sheetnet{display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 14px; border-radius:10px; background:var(--brand-soft); font-size:15px}
.sheetnet b{font-size:20px}
@media print{
  .quote-sheet h4{color:#000}
  .sheetnet{background:none; border:1px solid #000}
  tr.whyrow > td{padding:0; border:none}
}

/* 직원 초대 — 권한 목록 */
.scopelist .check{align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--line)}
.scopelist .check:last-child{border-bottom:none}
.btn.ghost.danger{color:var(--bad); border-color:var(--bad-soft)}

/* 직원 상세 — 자주 안 바꾸는 값은 접어 둡니다 */
tr.detailrow > td{background:var(--surface-2); padding:0}
.staffdetail{display:grid; grid-template-columns:minmax(0,1fr); gap:10px 18px; padding:14px 12px}
@media(min-width:640px){ .staffdetail{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(min-width:1100px){ .staffdetail{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)} }
.dfield{display:flex; flex-direction:column; gap:4px; min-width:0}
.dfield .dk{font-size:11.5px; font-weight:700; color:var(--ink-3)}
.dfield .dn{font-size:11.5px; color:var(--ink-3); line-height:1.5}
.dfield .dv{display:block}
.staffdetail p{grid-column:1/-1; margin:0}
/* 직원 카드 — 한 사람에 한 장. 폰에서도 가로로 넘치지 않습니다 */
.stafflist{display:flex; flex-direction:column; gap:10px}
.scard{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); overflow:hidden}
.scard.hl{border-color:var(--bad); background:var(--bad-soft)}
.scard.off{opacity:.62}
.scard-main{display:flex; align-items:flex-start; gap:12px; padding:12px 14px; flex-wrap:wrap}
.savatar{flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-weight:800; font-size:15px; background:var(--sage-soft); color:var(--sage)}
.savatar.owner{background:var(--brand-soft); color:var(--brand-ink)}
.sinfo{flex:1; min-width:160px; display:flex; flex-direction:column; gap:3px}
.sname{display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:15px}
.sline{font-size:13.5px; color:var(--ink-2)}
.sline b{color:var(--ink)}
.snotes{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px}
.sacts{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.scard .staffdetail{border-top:1px dashed var(--line); background:var(--surface-2)}
@media(max-width:640px){ .sacts{width:100%; margin-left:50px} }

/* 등록·수정 폼 — 꼭 채울 것(호칭·급여)이 맨 위, 나머지는 묶음별로 */
.scard.editing{border:1.5px solid var(--brand); box-shadow:var(--shadow-lift)}
.sform-h{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:12px 14px;
  background:var(--brand-soft); color:var(--brand-ink); font-size:15px}
.sform-h .sub{font-size:12px}
.sgroup{padding:12px 14px 4px}
.sgroup + .sgroup{border-top:1px solid var(--line)}
.sgroup-h{font-size:13px; margin-bottom:10px}
.sgrid{display:grid; grid-template-columns:minmax(0,1fr); gap:12px 18px; padding-bottom:10px}
@media(min-width:640px){ .sgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
@media(min-width:1100px){ .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sgrid .dfield.wide{grid-column:1/-1}
/* 급여 형태 + 금액, 식대 금액 + 단위 + 방식은 한 줄에 — 고르는 칸이 폭을 다 먹지 않게 */
.sgrid .inline{gap:6px}
.sgrid .inline select{width:auto; flex:0 0 auto}
.sgrid .inline input{flex:1 1 90px; width:auto; min-width:0}
.sgrid input:not([type=checkbox]), .sgrid select{min-height:38px}
.scard.editing > .snotes{padding:0 14px 10px}
.scard.editing > p{padding:0 14px; margin:0 0 12px}
.dk em.req{font-style:normal; font-size:10px; font-weight:700; color:var(--brand);
  background:var(--brand-soft); padding:1px 6px; border-radius:999px; margin-left:4px}
.sform-f{display:flex; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line);
  background:var(--surface-2); position:sticky; bottom:0}
.sform-f .grow{flex:1}
.btn.addstaff{width:100%; border:1.5px dashed var(--line-2); background:transparent; color:var(--brand-ink);
  font-weight:700; min-height:46px}
.btn.addstaff:hover{border-color:var(--brand); background:var(--brand-soft)}
.w-wide{width:100%; min-width:150px}

/* 왼쪽 메뉴 맨 위 계정 카드 — 지금 누구로 들어와 있는지 늘 보입니다 */
.navacct{display:flex; align-items:center; gap:9px; padding:11px 12px; margin:0 0 12px;
  border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
  text-decoration:none; color:var(--ink)}
a.navacct:hover{border-color:var(--brand); background:var(--brand-soft)}
.navacct .na-mk{flex:none; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; background:var(--surface)}
.navacct .na-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.navacct .na-txt b{font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.navacct .na-txt em{font-size:11px; color:var(--ink-3); font-style:normal}
.navacct .na-go{flex:none; color:var(--ink-3); font-size:17px}

/* 로그인 전 계정 칸 — 마이페이지 링크와 로그인 버튼을 함께 담습니다 */
.navacct-box{border:1px solid var(--line); border-radius:12px; background:var(--surface-2);
  margin:0 0 12px; overflow:hidden}
.navacct-box .navacct{border:none; border-radius:0; margin:0; background:none}
.navacct-box .navacct:hover{background:var(--brand-soft)}
.navacct-box .btn{width:calc(100% - 20px); margin:0 10px 10px; font-size:12px}

/* 화면이 낮으면 메뉴를 촘촘하게 — 안 그러면 마지막 그룹이 접힌 채 시작합니다.
 * 메뉴 전체 높이가 대략 1,030px 라 노트북(≈900px)에서는 그대로 두면 아래가 잘려 보입니다. */
@media(min-width:960px) and (max-height:900px){
  .sidenav{padding-top:10px}
  .navlink{padding:7px 12px}
  .navgroup{margin-bottom:11px}
  .navacct,.navacct-box{margin-bottom:9px}
}
@media(min-width:960px) and (max-height:780px){
  /* 더 낮으면 설명 줄까지 접습니다 — 이름만으로도 찾아갈 수 있습니다 */
  .navlink em{display:none}
  .navlink{grid-template-columns:24px minmax(0,1fr); padding:6px 12px; font-size:13.5px}
  .navgroup-title{padding:4px 12px}
  .navacct .na-txt em{display:none}
}

/* ══ 폰·태블릿 ══════════════════════════════════════════════════════════
 * 손가락으로 쓰는 화면에서만 적용합니다. 마스터를 폰으로 채우는 사장님이
 * 실제로 많아서, 여기가 불편하면 앱을 못 씁니다. */
@media(max-width:900px){

  /* iOS 는 글꼴이 16px 보다 작은 입력칸을 누르면 화면을 확대해 버립니다.
   * 마스터 한 화면에만 12.5px 입력칸이 84개라, 칸을 옮길 때마다 화면이 튀었습니다.
   * 확대를 막는 방법은 글꼴을 16px 로 올리는 것뿐입니다(user-scalable=no 는 접근성을 해칩니다). */
  input, select, textarea,
  table input, table select{ font-size:16px }
  table input, table select{ padding:7px 9px }
  /* 글꼴이 커진 만큼 칸도 넓혀야 숫자가 잘리지 않습니다 */
  .w-narrow, input.w-narrow, select.w-narrow{ width:88px }
  .w-mid, input.w-mid, select.w-mid{ width:124px }

  /* 손가락 목표 — 애플·구글 권장 44px 에 맞춥니다 */
  /* 손님께 보낼 문구 칸 — .copybox .copytext 가 더 세서 위 16px 규칙을 이기고 있었습니다 */
  .copybox .copytext{ font-size:16px }
  .btn{ min-height:44px; padding:11px 16px; font-size:14px }
  .btn.sm{ min-height:44px; padding:10px 14px; font-size:13.5px }
  .btn.xs{ min-height:32px; padding:6px 10px; font-size:12.5px }
  .iconbtn{ height:44px; min-width:44px }
  .line{ grid-template-columns:minmax(0,1fr) 78px 44px }
  /* 고르는 칸도 눌러야 열립니다 */
  select{ min-height:44px }
  /* 날짜·월 칸이 31px 이었습니다. 체크박스는 감싼 라벨이 목표라 제외합니다. */
  input:not([type=checkbox]):not([type=radio]){ min-height:44px }
  /* 도움말 ⓘ 는 17px 이었습니다 — 글자는 작게 두되 누를 자리는 넓힙니다 */
  .helpbtn{ min-width:44px; min-height:44px; justify-content:center }
  /* 라벨·제목 옆 ⓘ 는 작게 보여야 글의 흐름을 안 끊습니다.
   * 대신 보이지 않는 여백을 둘러 손가락이 닿는 자리를 44px 로 넓힙니다
   * (그냥 키우면 칸마다 20px 씩 길어져 폼이 다시 늘어납니다). */
  .field label .helpbtn{ min-width:32px; min-height:32px; position:relative }
  .field label .helpbtn::after{ content:''; position:absolute; inset:-6px }
  /* 제목 줄은 이미 높이가 있어서, 여기 ⓘ 는 그냥 44 로 키워도 화면이 안 길어집니다 */
  .pagehead h1 .helpbtn{ min-width:44px; min-height:44px }
  /* 표 안 체크박스도 같은 방식으로 — 보이는 크기는 24px, 누르는 자리는 40px */
  td input[type=checkbox]{ position:relative }
  td input[type=checkbox]::after{ content:''; position:absolute; inset:-8px }
  /* 고르는 단추 묶음(포장 등급·색감)도 44 */
  .segment button, .seg button{ min-height:44px }
  /* 떠 있는 단추도 44 */
  .fab{ min-height:44px }
  .navtoggle{ min-width:44px; min-height:44px }

  /* 체크박스가 13px 이라 손끝으로 맞히기 어려웠습니다 */
  input[type=checkbox], input[type=radio]{ width:24px; height:24px; accent-color:var(--brand) }
  .check input{ width:24px; height:24px }
  .check{ min-height:44px; font-size:14px }
  .check.sm{ min-height:34px; font-size:13px }
  /* 표 안의 체크박스는 칸 전체가 눌리도록 여백까지 목표로 만듭니다 */
  td input[type=checkbox]{ margin:9px 8px }

  /* 표 안의 버튼이 두 줄로 접히면 줄 높이가 들쭉날쭉해집니다 */
  td .inline{ display:flex; flex-wrap:wrap; gap:6px }

  /* 근무표 칸 — 눌러서 여는 자리라 넉넉해야 합니다 */
  .shbtn{ min-height:52px; min-width:84px; font-size:12.5px }

  /* 탭이 화면 밖으로 나가면 뒤쪽 탭이 있는 줄 모릅니다 — 살짝 보이게 */
  .tabs{ padding-right:26px; scroll-padding-left:12px }
  .tabs button{ min-height:44px }
  /* 즐겨찾기 별이 19px 이었습니다 — 보이는 크기는 두고 누를 자리만 넓힙니다 */
  .star{ position:relative }
  .star::after{ content:''; position:absolute; inset:-12px }

  /* 모달은 아래에서 올라오므로 홈바에 가리지 않게 */
  .modal-card{ max-height:88vh; max-height:88dvh }

  /* 글자 가운데서 접히는 것들 — "플라워샵 도우/미", "백/업" 처럼 보였습니다 */
  .btn{ white-space:nowrap }
  .brand strong, .brand small{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .brand > div{ min-width:0 }
  .card > h2{ flex-wrap:wrap; row-gap:3px }
  .card > h2 .hint{ order:2; margin-left:0; flex-basis:100%; }

  /* 표 안 글자 칸이 0폭으로 찌그러져 꽃 이름이 안 보였습니다 */
  table input[type=text]:not(.w-narrow):not(.w-mid){ min-width:132px }
  table input[type=date]{ min-width:150px }
  /* 숫자 칸의 위·아래 화살표(스피너)가 폭을 먹어 "10" 이 "1(" 으로 잘려 보였습니다.
   * 폰에서는 화살표를 눌러 값을 올릴 일이 없으니 감춥니다. */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
  input[type=number]{ -moz-appearance:textfield; appearance:textfield }
  .w-narrow, input.w-narrow, select.w-narrow{ width:92px }
  .w-mid, input.w-mid, select.w-mid{ width:128px }

  /* 고르는 칸이 화살표만 보이고 값이 안 보였습니다 */
  table select{ min-width:84px }

  /* 값에 설명이 길게 붙으면 왼쪽 라벨을 0폭까지 밀어내서
   * "사장님 제작 가능" 이 한 글자씩 세로로 쪼개졌습니다. */
  .kv{ flex-wrap:wrap; row-gap:2px }
  .kv .k{ flex:0 0 auto }
  .kv .v{ white-space:normal; text-align:right; min-width:0 }
}

/* 아주 좁은 폰 (아이폰 SE 등) */
@media(max-width:400px){
  .content{ padding-left:11px; padding-right:11px }
  .card{ padding-left:13px; padding-right:13px }
  .pagehead h1{ font-size:18px }
  /* 아주 좁은 폰에서는 상단바 부제를 접습니다 — 제목이 두 줄로 깨지는 것보다 낫습니다 */
  .brand small{ display:none }
  .topbar{ gap:9px; padding:9px 11px }
  .topbar-actions{ gap:7px }
}

/* 표가 옆으로 더 있다는 것을 알려 주는 그림자.
 * 폰에서는 표가 화면보다 넓어 가로로 밀어야 하는데, 그걸 모르고
 * "공제·실지급이 안 보인다"고 느끼는 일이 있습니다.
 * 끝까지 밀면 그림자가 사라져서 더 볼 게 없다는 것도 알 수 있습니다. */
.tablewrap{
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(0,0,0,0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--surface) 30%, rgba(0,0,0,0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) left center / 13px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) right center / 13px 100% no-repeat scroll;
}
@media print{ .tablewrap{ background:none } }

/* ══════════════════════════════════════════════════════════════════════
   📖 이용 가이드 (#/guide)

   화면마다 붙어 있던 설명을 전부 이리로 옮겼습니다(assets/js/guidebook.js).
   그래서 여기는 <글이 많은 화면>입니다 — 목록에서는 한 줄만 보이게 접고,
   필요한 것만 펼쳐 읽도록 만들었습니다.
   ══════════════════════════════════════════════════════════════════════ */

.gsearch{display:flex; gap:8px; align-items:center}
.gsearch input{
  flex:1; min-width:0; padding:11px 14px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface-2); font-size:14px
}
.gsearch input:focus{outline:none; border-color:var(--brand); background:var(--surface)}

.ggroup + .ggroup{margin-top:18px}
.ggroup-title{
  font-size:11.5px; font-weight:800; color:var(--ink-3);
  letter-spacing:.06em; padding:0 4px 8px
}

.gentry{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; margin-bottom:9px
}
.gentry + .gentry{margin-top:9px}
.gentry.open{box-shadow:var(--shadow-lift); border-color:var(--brand)}

.ghead{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:14px 16px; background:none; border:0; cursor:pointer
}
.gico{
  font-size:19px; width:38px; height:38px; flex:0 0 auto; border-radius:11px;
  background:var(--brand-soft); display:flex; align-items:center; justify-content:center
}
.gtx{display:flex; flex-direction:column; gap:2px; min-width:0}
.gtx b{font-size:14.5px}
.gtx span{font-size:12.5px; color:var(--ink-2); line-height:1.45}
.gchev{
  margin-left:auto; flex:0 0 auto; color:var(--ink-3); font-size:13px;
  transition:transform .18s
}
.gentry.open .gchev{transform:rotate(180deg)}

/* 접힌 상태 — 높이 0. display:none 을 쓰지 않는 이유는 펼칠 때 부드럽게 열리기 위해서입니다. */
.gbody{display:none; padding:0 16px 16px; border-top:1px solid var(--line); margin-top:2px}
.gentry.open .gbody{display:block}
.gbody h4{
  font-size:13px; font-weight:800; margin:14px 0 5px; color:var(--brand-ink)
}
.gbody h4:first-child{margin-top:12px}
.gbody p{margin:0; font-size:13.5px; line-height:1.72; color:var(--ink)}
.gbody .gwhen{
  margin:12px 0 0; padding:9px 12px; border-radius:var(--radius-s);
  background:var(--sage-soft); color:var(--sage); font-size:12.5px; font-weight:600
}
.gbody .formula{display:flex; flex-direction:column; gap:6px; margin-top:6px}
.gbody .formula code{
  font-family:var(--mono); font-size:12.5px; background:var(--surface-2);
  border:1px solid var(--line); border-radius:9px; padding:8px 11px;
  display:block; overflow-x:auto; white-space:nowrap
}

@media(max-width:640px){
  .gico{width:34px; height:34px; font-size:17px}
  .gtx b{font-size:14px}
  .ghead{padding:13px 13px; gap:10px}
  .gbody{padding:0 13px 14px}
}

/* ══════════════════════════════════════════════════════════════════════
   📊 오늘 — 대시보드 첫 화면

   열자마자 네 숫자가 보여야 합니다: 오늘 매출 · 이번 달 매출 · 지출 · 순이익.
   라벨은 작게, 금액은 크게. 스치듯 봐도 숫자가 먼저 읽히도록.
   ══════════════════════════════════════════════════════════════════════ */

.todaycard{padding:18px}
.todaycard .thead{
  display:flex; align-items:flex-start; gap:12px; margin-bottom:16px
}
.todaycard .tdate{font-size:19px; font-weight:800; letter-spacing:-.02em}
.todaycard .tsub{font-size:12.5px; color:var(--ink-3); font-weight:600; margin-top:3px}
.todaycard .thead > a{margin-left:auto; flex:0 0 auto}

.money4{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px}
.mcard{
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius-s); padding:14px 15px;
  display:flex; flex-direction:column; gap:3px; min-width:0
}
.mcard .l{font-size:12px; color:var(--ink-3); font-weight:600}
.mcard b{
  font-size:clamp(15px, 5vw, 23px); font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:-.035em; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis
}
@media(min-width:460px){ .mcard b{font-size:23px} }
.mcard .n{font-size:11.5px; color:var(--ink-3); font-weight:600}

/* 오늘 매출만 브랜드 색으로 — 넷 다 강조하면 아무것도 강조되지 않습니다 */
.mcard.lead{background:var(--brand-soft); border-color:transparent}
.mcard.lead .l{color:var(--brand-ink); opacity:.75}
.mcard.lead b{color:var(--brand-ink)}
.mcard.lead .n{color:var(--brand-ink); opacity:.65}
.mcard.profit b{color:var(--ok)}
.mcard.loss b{color:var(--bad)}

/* 폰에서는 금액이 잘리지 않게 한 줄에 하나씩 두는 편이 낫습니다 */
@media(max-width:359px){
  .money4{grid-template-columns:minmax(0,1fr)}
  .mcard b{font-size:23px}
}
@media(max-width:400px){ .mcard{padding:12px 13px} }
@media(min-width:900px){
  .money4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ── 다가오는 예약 줄 ─────────────────────────────────────────────── */
.booklist{display:flex; flex-direction:column; gap:8px}
.bookrow{
  display:flex; align-items:center; gap:12px;
  padding:11px 13px; border-radius:var(--radius-s);
  background:var(--surface-2); border:1px solid var(--line); transition:.15s
}
.bookrow:hover{border-color:var(--brand); background:var(--surface)}
.bwhen{
  flex:0 0 auto; min-width:44px; text-align:center;
  font-size:12px; font-weight:700; color:var(--ink-2);
  font-variant-numeric:tabular-nums
}
.bwhen.now{
  background:var(--brand); color:#fff; border-radius:999px; padding:3px 9px
}
.bmain{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.bmain b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bmain .sub{font-size:12px}
.bamt{
  margin-left:auto; flex:0 0 auto; display:flex; flex-direction:column;
  align-items:flex-end; gap:4px;
  font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums
}
.bamt .badge{font-size:10.5px; padding:2px 7px}

@media(max-width:520px){
  .bookrow{gap:9px; padding:10px}
  .bmain b{font-size:13.5px}
  .bamt{font-size:13.5px}
}

/* ── 한 줄 요약 — 네 기둥을 네 칸으로 ────────────────────────────────
   기둥 카드 넷(숫자 16개)이 대시보드 절반을 먹고 있었습니다.
   매일 보는 건 각 기둥의 한 칸씩뿐이라, 그것만 남기고 나머지는 접었습니다. */
.glance{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px}
@media(min-width:720px){ .glance{grid-template-columns:repeat(4,minmax(0,1fr))} }
.gcell{
  display:flex; flex-direction:column; gap:3px; min-width:0;
  padding:12px 13px; border-radius:var(--radius-s);
  background:var(--surface-2); border:1px solid var(--line); transition:.15s
}
.gcell:hover{border-color:var(--brand); background:var(--surface)}
.gcell .l{font-size:11.5px; color:var(--ink-3); font-weight:600}
.gcell b{
  font-size:18px; font-weight:800; font-variant-numeric:tabular-nums;
  letter-spacing:-.02em; line-height:1.2
}
.gcell.ok b{color:var(--ok)}
.gcell.warn b{color:var(--warn)}
.gcell.bad b{color:var(--bad)}

/* ── 접어 두는 상세 ──────────────────────────────────────────────
   지우지 않고 접습니다 — 여기에만 있는 기능(매출 직접 적기·고정비 고치기)이
   사라지면 안 되기 때문입니다. */
.more{margin-top:14px}
.more > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:13px 16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow);
  font-size:14px; font-weight:700
}
.more > summary::-webkit-details-marker{display:none}
.more > summary::before{
  content:'▾'; color:var(--ink-3); font-size:12px; transition:transform .18s
}
.more[open] > summary::before{transform:rotate(180deg)}
.more > summary:hover{border-color:var(--brand)}
.more > summary .sub{margin-left:auto; font-weight:500}
.morebody{margin-top:4px}
/* 접힌 상태로 인쇄하면 내용이 통째로 빠집니다 — 인쇄할 때는 늘 펼칩니다 */
@media print{
  .more > summary{display:none}
  .morebody{display:block!important}
}
@media(max-width:520px){
  .more > summary .sub{margin-left:0; width:100%; font-size:11.5px}
}

/* ── 예약 진행 단계 (접수 → 제작 → 전달) ────────────────────────────
   상태 글자 하나("확정")로는 지금 뭘 해야 하는지 안 보입니다.
   세 점과 선으로 그리면 <어디까지 왔는지>가 눈으로 먼저 읽힙니다. */
.stepper{
  display:flex; align-items:flex-start; gap:0;
  padding:6px 4px 18px; margin-bottom:4px
}
.stepper .step{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  position:relative; min-width:0
}
/* 점과 점을 잇는 선 — 지나온 구간만 브랜드 색으로 찹니다 */
.stepper .step::before{
  content:''; position:absolute; top:13px; left:calc(-50% + 14px); right:calc(50% + 14px);
  height:2px; background:var(--line)
}
.stepper .step:first-child::before{display:none}
.stepper .step.done::before,
.stepper .step.now::before{background:var(--brand)}
.stepper .dot{
  width:27px; height:27px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-size:12.5px; font-weight:800; position:relative; z-index:1;
  background:var(--surface); color:var(--ink-3);
  border:2px solid var(--line)
}
.stepper .lb{
  font-size:11.5px; font-weight:600; color:var(--ink-3); text-align:center;
  line-height:1.3; word-break:keep-all
}
.stepper .step.done .dot{background:var(--brand); border-color:var(--brand); color:#fff}
.stepper .step.done .lb{color:var(--ink-2)}
/* 지금 단계 — 채우지 않고 테두리만 굵게. 채우면 '끝난 것'과 구별이 안 됩니다 */
.stepper .step.now .dot{border-color:var(--brand); color:var(--brand-ink); background:var(--brand-soft)}
.stepper .step.now .lb{color:var(--brand-ink); font-weight:800}

:root[data-theme="dark"] .stepper .step.done .dot{color:#231317}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .stepper .step.done .dot{color:#231317}
}

.stepper.cancelled{
  justify-content:center; padding:12px; border-radius:var(--radius-s);
  background:var(--bad-soft); margin-bottom:12px
}
.stepper.cancelled .cx{font-size:13px; font-weight:700; color:var(--bad)}

@media(max-width:420px){
  .stepper .lb{font-size:10.5px}
  .stepper .dot{width:24px; height:24px; font-size:11.5px}
  .stepper .step::before{top:11px; left:calc(-50% + 12px); right:calc(50% + 12px)}
}

/* ── 접어 두는 메뉴 (원가 도구) ───────────────────────────────────────
   꽃마다 단수·단가를 넣어야 도는 화면들이라 매일 쓰기에는 무겁습니다.
   지우지는 않고, 쓰시는 분만 펼치도록 접어 둡니다. */
.navmore{margin:2px 0 10px}
.navmore > summary{
  list-style:none; cursor:pointer; user-select:none;
  display:flex; align-items:center; gap:7px;
  padding:9px 12px; border-radius:10px;
  font-size:12.5px; font-weight:700; color:var(--ink-2)
}
.navmore > summary::-webkit-details-marker{display:none}
.navmore > summary::after{
  content:'▾'; margin-left:auto; font-size:11px; color:var(--ink-3); transition:transform .18s
}
.navmore[open] > summary::after{transform:rotate(180deg)}
.navmore > summary:hover{background:var(--surface-2); color:var(--ink)}
.navmore > summary span{font-size:11px; font-weight:500; color:var(--ink-3)}

/* ── 탭 구분선 — "여기부터는 안 채우셔도 됩니다" ──────────────────────
   마스터 데이터의 뒷쪽 탭(꽃 단가·부자재·레시피…)은 원가 도구를 쓰실 때만 필요합니다.
   섞어 두면 전부 채워야 하는 줄 알고 시작부터 지치십니다. */
/* 원가 도구 앞의 칸막이. 그림 대신 세로줄 하나로 둡니다 —
   탭은 글자만 늘어서야 어디가 켜졌는지 한눈에 보입니다. */
.tabsep{
  flex:0 0 auto; align-self:center; width:1px; padding:0; cursor:default;
  border-left:1px solid var(--line-2); margin:0 9px; height:15px
}
.tabs button.dim{color:var(--ink-3); opacity:.62}
.tabs button.dim:hover{color:var(--ink-2); opacity:1}

/* ── 포트폴리오 올리기 (마이페이지 → 손님에게 공개하기) ─────────────
   손님은 가격표가 아니라 <사진>을 보고 고릅니다. 그래서 고르는 자리를 크게 둡니다. */
.pfup{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap}
.pfpick{
  flex:0 0 auto; width:120px; height:120px; border-radius:var(--radius-s);
  border:2px dashed var(--line); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  overflow:hidden; text-align:center; color:var(--ink-3); font-size:22px; font-weight:700;
  transition:.15s;
}
.pfpick:hover{border-color:var(--brand); background:var(--surface)}
.pfpick img{width:100%; height:100%; object-fit:cover}
.pfpick small{font-size:11.5px; font-weight:600}
.pfform{flex:1; min-width:230px}
.pfform .btnrow{margin-top:8px}

.pfgrid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:9px}
.pfcell{position:relative; border-radius:var(--radius-s); overflow:hidden; background:var(--surface-2)}
.pfcell img{width:100%; aspect-ratio:1; object-fit:cover; display:block}
.pfcell .pfcap{
  position:absolute; left:0; right:0; bottom:0; padding:5px 7px;
  background:linear-gradient(transparent,rgba(0,0,0,.6));
  color:#fff; font-size:11px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pfcell .iconbtn{
  position:absolute; top:3px; right:3px; background:rgba(0,0,0,.55); color:#fff;
  border-radius:999px; width:22px; height:22px; font-size:15px; line-height:1;
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer;
}

/* 확인 한 줄 — "됐다"만 알립니다 */
.oknote{margin:0; font-size:13px; color:var(--ok)}

/* ══ 폰에서 한 손으로 ══════════════════════════════════════════════════
 * 기록 폼 · 날짜별 목록 · 달력 칸 · 아래 막대와 겹치는 탭 줄 정리 */

/* 두 칸씩 짝짓는 입력 격자 — 폰에서도 두 칸 (품목·메모처럼 긴 칸만 한 줄 통째로) */
.fgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px 12px}
.fgrid > .field{margin:0}
.fgrid > .field.full{grid-column:1 / -1}
@media(max-width:340px){ .fgrid{grid-template-columns:minmax(0,1fr)} }

/* 가끔 쓰는 칸 — 접어 둡니다 */
.formmore{margin-top:10px; border-top:1px dashed var(--line-2)}
.formmore > summary{
  display:flex; align-items:center; min-height:44px; cursor:pointer; list-style:none;
  font-size:13.5px; font-weight:600; color:var(--ink-2)
}
.formmore > summary::-webkit-details-marker{display:none}
.formmore > summary::before{content:'＋'; margin-right:6px; color:var(--brand)}
.formmore[open] > summary::before{content:'－'}
.formmore > .fgrid{padding-bottom:4px}

.formacts{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px}
.formacts .grow{flex:1 1 auto}
.btn.block{width:100%; justify-content:center}

/* 날짜별 목록 (매출·매입) */
.daylist{display:flex; flex-direction:column; gap:14px}
.dhead{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:0 2px 6px; border-bottom:1px solid var(--line-2); font-size:13px; color:var(--ink-2)
}
.dhead b{color:var(--ink); font-size:14px}
.dhead span{font-weight:700; font-variant-numeric:tabular-nums}
.lrow{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow.off{opacity:.5}
.lrow.off b{text-decoration:line-through}
.lmain{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
.lmain b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lmain .sub{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lrow .badge{flex:0 0 auto}
.lamt{flex:0 0 auto; font-weight:700; font-variant-numeric:tabular-nums}
.lrow .iconbtn{flex:0 0 auto}

/* 달력 칸 글 — 넓은 화면용(.w) / 폰용(.n) */
.cchip .n{display:none}

/* 새 예약 카드·빠른 기록으로 데려갈 때 위 막대에 가리지 않게 */
.rform,.qadd,.daycard{scroll-margin-top:calc(var(--topbar-h, 56px) + 10px)}

@media(max-width:959px){
  /* 아래 막대가 같은 네 곳(오늘·예약·매입·매출)으로 가므로 위의 탭 줄은 뺍니다 */
  .daytabs{display:none}

  /* 긴 예약 폼 — 저장 버튼이 늘 손 닿는 곳에 있게 아래 막대 위에 붙입니다 */
  .rform .formacts{
    position:sticky; bottom:calc(57px + env(safe-area-inset-bottom, 0px)); z-index:4;
    margin:14px -14px -4px; padding:10px 14px;
    background:var(--surface); border-top:1px solid var(--line-2); border-radius:0 0 12px 12px
  }
}

@media(max-width:600px){
  .cchip .w{display:none}
  .cchip .n{display:inline}
  .cchip{font-size:10px; padding:0 2px; letter-spacing:-.2px}

  /* 체크박스 세 개를 한 줄에 — 켜진 것은 색이 차고, 꺼진 것은 비어 보입니다 */
  .calchk{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .lchk{
    position:relative; flex-direction:column; align-items:flex-start; gap:1px;
    padding:8px 10px; border-radius:12px; min-height:52px; font-size:12.5px
  }
  .lchk input{position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0; cursor:pointer}
  .lchk .lt{display:flex; align-items:center; gap:5px}
  .lchk .dot{position:absolute; top:10px; right:10px; width:14px; height:14px; border:2px solid currentColor; background:none!important}
  .lchk.on .dot{border-color:transparent}
  .lchk.book.on .dot{background:var(--brand)!important}
  .lchk.buy.on .dot{background:var(--c-buy)!important}
  .lchk.sale.on .dot{background:var(--c-sale)!important}
  .lchk b{font-size:14px}
  .lchk input:focus-visible ~ .dot{outline:2px solid var(--brand); outline-offset:2px}

  /* 메뉴 칩·가이드 버튼 — 손가락 크기 */
  .mchip{min-height:42px; padding:8px 13px}
  .mdel{min-width:36px; min-height:42px}
  .guidepill{min-height:40px}

  /* 저장 안내 띠 — 한 줄로 */
  .savebar .sub{display:none}
  .savebar{padding:10px 12px; gap:10px}

  /* 예약 카드는 한 줄에 하나 */
  .rcards{grid-template-columns:minmax(0,1fr)}
  .rtab{padding:10px 6px; font-size:13px}
}
.stat.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:600px){ .stat.s3 .box .n{font-size:17px} .stat.s3 .box{padding:10px 11px} }

/* 직원 계정으로 남의 가게를 볼 때 — 어느 가게인지 늘 보이게 */
.workbar{
  position:sticky; top:var(--topbar-h, 56px); z-index:40;
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:7px 12px; font-size:13px; background:var(--info-soft); color:var(--ink);
  border-bottom:1px solid var(--line)
}
.workbar[hidden]{display:none}
.navgroup[hidden],.navlink[hidden],#tabBar a[hidden]{display:none!important}
.acctmenu-sec{padding:8px 12px 2px; font-size:11.5px; color:var(--ink-3); font-weight:700}
.acctmenu-item.on{color:var(--brand); font-weight:700}

/* 직원 계정 — 권한 체크 · 목록 */
.permgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 12px; margin-top:8px}
.permgrid .check{display:flex; align-items:center; gap:8px; min-height:36px; font-size:13.5px}
.mlist{display:flex; flex-direction:column; gap:10px}
.mrow{border:1px solid var(--line-2); border-radius:12px; padding:10px 12px}
.mrowhead{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap}
.mrowhead .grow{flex:1 1 auto}
.joinperms{list-style:none; padding:0; margin:6px 0 0}
.joinperms li{padding:3px 0}
.joinlogin{display:flex; flex-direction:column; gap:8px; margin-top:8px}

/* 메뉴 화면 */
.menulist{display:flex; flex-direction:column}
.menurow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line)}
.menurow:last-child{border-bottom:0}
.menurow.editing{display:block; background:var(--surface-2); border-radius:12px; padding:12px; margin:6px 0}
.menurow .mord{display:flex; gap:4px}

/* 메뉴판 만들기 */
.mbcta{display:flex; align-items:center; gap:12px; padding:14px 16px; margin-bottom:14px; border-radius:var(--radius);
  background:var(--brand-soft); border:1px solid var(--brand); color:var(--ink); text-decoration:none}
.mbcta > span:first-child{font-size:26px}
.mbcta > span:nth-child(2){flex:1 1 auto; display:flex; flex-direction:column}
.mbcta .go{font-weight:700; color:var(--brand)}
.mbthumbs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px}
.mbhot{font-style:normal; font-size:10px; font-weight:800; color:#fff; background:linear-gradient(90deg,#fa7e1e,#d62976); padding:1px 6px; border-radius:999px; vertical-align:1px}
.mbthumb{display:flex; flex-direction:column; gap:6px; padding:6px; border:2px solid var(--line-2); border-radius:12px;
  background:var(--surface); cursor:pointer; font:inherit; color:var(--ink)}
.mbthumb.on{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.mbimg{display:block; aspect-ratio:1240/1754; overflow:hidden; border-radius:6px; background:#fff}
.mbimg svg,.mbpreview svg{display:block; width:100%; height:auto}
.mbname{font-size:12.5px; font-weight:600; text-align:center}
.mbpreview{max-width:520px; margin:0 auto; border-radius:8px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.12)}
@media(max-width:600px){ .mbthumbs{grid-template-columns:repeat(3,minmax(0,1fr))} }
#boardPrint{display:none}
@media print{
  html.printing-board body > *:not(#boardPrint){display:none!important}
  html.printing-board #boardPrint{display:block}
  html.printing-board #boardPrint svg{width:100%; height:auto; display:block}
}