/* 급여계산기 스타일 — albajangbu-calculators/assets/ajb-wage-calc.css
   🔴 **이 파일이 원본이다.** content/parts/wage-calc.html 은 2026-09-01 부로 지나간 판이다.
   파일로 올라가므로 128KB 제한도, 앰퍼샌드 변조도 없다 — 주석을 그대로 남겨 둔다. */

.ajb-calc{--b:#006241;--pale:#F0F7F4;--ln:#e2e8e5;--mu:#57615b;--rd:#C0392B;--mute:#f7f9f8;--bl:#1F5FC4;
  max-width:1080px;margin:0 auto;font-family:inherit;color:#1a1a1a;line-height:1.6;}

/* 🔴 그리드 칸의 min-width 기본값은 0 이 아니라 auto 다 — 「안쪽 내용이 요구하는 최소 폭보다
   작아지지 않는다」는 뜻이라, 안쪽이 385px 을 요구하면 그리드가 375px 이어도 칸이 385px 로
   밀고 나가 화면 밖으로 넘친다. 2026-08-31 에 모바일 가로 스크롤이 이것 때문이었다.
   이 한 줄을 지우면 시각 입력 줄이 다시 화면을 넘긴다. 세 계산기가 같은 규칙이다. */
.ajb-left,.ajb-right{min-width:0;}
.ajb-card{background:#fff;border:1px solid var(--ln);border-radius:14px;padding:22px 20px;}
.ajb-card--out{background:var(--pale);border-color:#cfe0d8;}
.ajb-h{margin:0 0 10px;font-size:1.5rem;font-weight:800;color:var(--b);}

.ajb-calc select,.ajb-calc input[type=number],.ajb-calc input[type=time],.ajb-calc input[type=text]{
  width:100%;padding:12px 13px;border:1px solid #cfd8d4;border-radius:9px;
  font-size:1.3rem;font-family:inherit;background:#fff;color:inherit;text-align:right;}
.ajb-calc select,.ajb-calc input[type=text]{text-align:left;}
/* 🔴 시급은 금액이라 오른쪽 정렬이다. 2026-08-31 에 type=number 를 text 로 바꾸면서
   (천 단위 쉼표 때문) 위 규칙에 걸려 왼쪽으로 갔다. 되돌리지 말 것. */
.ajb-calc #ajbWage{text-align:right;}
.ajb-calc input[type=time]{text-align:center;}

.ajb-calc .ajb-input input{padding-right:52px;}

.ajb-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;}

/* 단계 카드 */
.ajb-step{background:#fff;border:1px solid var(--ln);border-radius:16px;margin-bottom:10px;overflow:hidden;}
.ajb-step--lock{background:var(--mute);border-color:#eceeed;}
.ajb-step--done{border-color:rgba(0,98,65,.4);}
.ajb-step__h{width:100%;display:flex;align-items:center;gap:11px;padding:15px 14px;
  background:none;border:0;font-family:inherit;text-align:left;cursor:pointer;}
.ajb-step--lock .ajb-step__h{cursor:default;}
.ajb-step__b{flex:none;width:27px;height:27px;border-radius:999px;display:flex;
  align-items:center;justify-content:center;font-size:1.05rem;font-weight:700;
  background:var(--pale);color:#1a1a1a;}
.ajb-step--lock .ajb-step__b{background:#e6e9e8;color:#9aa5a0;font-size:.95rem;}
.ajb-step--done .ajb-step__b{background:var(--b);color:#fff;}
.ajb-step__t{flex:1;min-width:0;font-size:1.28rem;font-weight:700;}
.ajb-step--lock .ajb-step__t{color:#9aa5a0;}
.ajb-step__t em{display:block;font-style:normal;font-size:1.12rem;font-weight:500;
  color:var(--mu);margin-top:2px;}
.ajb-step__t em:empty{display:none;}
.ajb-step__a{flex:none;color:var(--mu);font-size:1.05rem;}
.ajb-step--lock .ajb-step__a{visibility:hidden;}
.ajb-step__c{display:none;padding:16px 18px 18px;border-top:1px solid var(--ln);}
.ajb-step--open .ajb-step__c{display:block;}
.ajb-next{width:100%;margin-top:18px;padding:14px;border:0;border-radius:11px;
  background:var(--b);color:#fff;font-family:inherit;font-size:1.28rem;font-weight:700;cursor:pointer;}

.ajb-chips--one button[aria-pressed=true]{background:#fff;color:var(--b);border-color:var(--b);
  box-shadow:inset 0 0 0 2px var(--b);}

.ajb-check{display:flex;align-items:center;font-size:1.25rem;font-weight:600;cursor:pointer;margin:0;}

/* ─────────────────────────────────────────────────────────────
   시각 입력 줄 — 이 덩어리만 **px 로 못 박는다.** em/rem 을 쓰지 않는다.
   ─────────────────────────────────────────────────────────────
   왜 여기만 px 인가

   이 줄에는 [근무] [09:00] - [18:00] [+1일] 다섯이 한 줄에 들어가야 한다.
   360px 폰의 3단계에서 이 줄이 받는 폭은 261px 뿐이라 여유가 거의 없다.

   그런데 이 사이트의 1rem 은 16px 이 아니다. 테마가 유동 타이포그래피를 쓰고 있어
   **약 17px** 이다. em/rem 으로 적어 두면 값이 전부 6% 씩 부푼다.

   2026-09-01 에 사장님 화면(1080px·DPR3 → 360 CSS px)을 픽셀로 재서 확인했다.
     · 칸 너비 81.7px  =  상한 4.6em × 1.05rem  →  1rem = 16.9px
     · 라벨 폭 40.7px  =        2.1em × 1.12rem  →  1rem = 17.3px
     · 필요 261.3px  vs  주는 폭 261px  →  0.3px 모자람

   내 검사 브라우저는 1rem 을 16px 로 쓴다. 그래서 「36px 여유」라고 잰 것이
   실제 기기에서는 0 이었다. **재현도 했다** — rem 을 17.5px 로 올리면 3단계가
   두 줄이 되고, 1단계는 버틴다. 사장님 화면과 정확히 같은 모양이다.

   px 로 박으면 테마가 rem 을 몇으로 잡든 내가 잰 값이 그대로 기기에서 나온다.
   한글 글자는 CJK 라 글꼴이 달라도 1em 폭이 거의 같아서, 남은 변수도 작다.

   🔴 이 덩어리에 em·rem 을 다시 넣지 말 것. 넣는 순간 테마 설정 하나에 조용히 깨진다.
   🔴 입력칸 글자를 16px 밑으로 내리지 말 것 — iOS 사파리가 화면을 확대해 버린다.

   확인하는 법
     360px 에서 1단계와 3단계 둘 다, [+1일] 과 [휴게없음] 이 시각 칸과 같은 줄에 있으면 된다.
   ───────────────────────────────────────────────────────────── */
.ajb-tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px;min-width:0;}
.ajb-tr .l{flex:none;width:40px;font-size:18px;font-weight:700;color:var(--mu);
  white-space:nowrap;letter-spacing:-.02em;}
.ajb-tr .tl{flex:none;color:var(--mu);font-size:18px;}
/* 🔴 type=time 을 쓰지 않는다 — 지역에 따라 「오전 09:00」이 되고 시계 아이콘이 붙는다.
   숫자만 받는 텍스트 칸에 마스크를 씌워 24시간 표기로 고정한다. 네 칸의 너비가 같아야 한다.
   🔴 flex:none 으로 되돌리지 말 것. 고정폭이면 좁은 화면에서 줄이 화면을 넘긴다.
   flex:1 1 0 이라 남는 폭을 넷이 똑같이 나눠 갖는다 — 그래서 네 칸의 너비가 늘 같다.
   max-width 는 넓은 화면에서의 상한(예전 5.2em 그대로), min-width 는 「09:00」이 안 잘리는 하한.
   하한까지 줄여도 안 들어가면 .ajb-tr 의 flex-wrap 이 체크박스를 아랫줄로 내린다. */
.ajb-calc input.ajb-t{flex:1 1 0;width:auto;min-width:61px;max-width:93px;padding:5px 4px;text-align:center;
  font-family:inherit;font-size:18px;font-variant-numeric:tabular-nums;
  border:1px solid #cfd8d4;border-radius:8px;background:#fff;color:#1a1a1a;}
.ajb-calc input.ajb-t:focus{outline:none;border-color:var(--b);box-shadow:0 0 0 2px var(--pale);}
.ajb-calc input.ajb-t:disabled{background:#f2f4f3;color:#a8b3ae;}
.ajb-calc .ajb-tr--brk input.ajb-t:not(:disabled){background:#fbfcfc;}
/* width 를 박아 두 줄의 체크박스 칸을 같은 폭으로 맞춘다. 두 줄의 글자 수가 다르면
   남는 폭이 달라져 시각 칸 크기가 위아래로 어긋난다.
   🔴 2026-09-01 에 「휴게없음」을 「없음」으로 줄였다. 3단계 시각 칸을 16px 로 올리면서
      (아이폰 확대 방지) 줄이 다시 두 줄로 깨졌는데, 라벨을 윗줄로 내리는 안은 하루 한 칸이
      118 → 188px 로 커져 3단계 스크롤이 1,500px 넘게 길어졌다. 글자를 줄이는 쪽이 쌌다.
      「휴게」 줄에 붙어 있어서 「없음」만으로도 뜻이 흐려지지 않는다.
   🔴 이제 긴 쪽은 「+1일」이다. 그 문구를 늘리면 이 값도 같이 봐야 한다. */
.ajb-cb{flex:none;width:60px;display:flex;align-items:center;gap:4px;font-size:17px;
  color:var(--mu);white-space:nowrap;cursor:pointer;}
.ajb-cb input{width:16px;height:16px;margin:0;accent-color:var(--b);}
.ajb-terr{margin:7px 0 0 40px;font-size:1.08rem;font-weight:600;color:#c0392b;}
.ajb-day{margin-bottom:16px;}
.ajb-day:last-child{margin-bottom:0;}
.ajb-day__h{display:flex;align-items:center;gap:9px;margin-bottom:7px;}
.ajb-day__h .d{width:32px;height:32px;flex:none;border-radius:50%;background:var(--pale);color:var(--b);
  font-weight:700;font-size:1.12rem;display:flex;align-items:center;justify-content:center;}

/* 달력 */
.ajb-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.ajb-cal .hd{text-align:center;font-size:1.05rem;color:var(--mu);font-weight:700;padding:4px 0;}
.ajb-cal button{aspect-ratio:1;border:1px solid #cfd8d4;background:#fff;border-radius:9px;
  font-family:inherit;font-size:1.15rem;color:#1a1a1a;cursor:pointer;padding:0;position:relative;}
/* 🔴 토요일 파랑, 일요일·공휴일 빨강. 달력 머리글·날짜·본문 날짜가 다 같은 규칙이다.
   반드시 [aria-pressed=true] **앞**에 둘 것 — 명시도가 같아서 뒤에 두면 고른 날의
   흰 글자를 덮어버린다. */
.ajb-cal .hd.sat,.ajb-cal button.sat{color:var(--bl);}
/* 🔴 빨간 글자는 **공휴일과 일요일만**이다 (2026-09-11). 예전엔 button.hol 도 여기 있었는데,
      hol 은 isHol() = 주휴일이거나 공휴일이라 수요일 주휴일까지 빨개졌다.
      주휴일은 아래 ::after 의 **빨간 점으로만** 표시한다 — 점과 글자색이 같은 클래스를
      쓰고 있었을 뿐, 둘은 다른 뜻이다. */
.ajb-cal .hd.sun,.ajb-cal button.sun{color:var(--rd);}
.ajb-cal button[aria-pressed=true]{background:var(--b);border-color:var(--b);color:#fff;font-weight:700;}
.ajb-cal button.prev{opacity:.55;}
.ajb-cal button.prev[aria-pressed=true]{background:#8aa79a;border-color:#8aa79a;}
/* 🔴 테두리 색은 **그 칸의 바탕색**이어야 한다. 늘 흰색으로 두면 초록 칸(고른 날) 위에서
      흰 고리가 글자를 파먹는다 — 폰에서 24·25 의 오른쪽 숫자가 잘려 보였다(2026-09-01).
      고리는 점을 바탕에서 떼어놓으려고 있는 것이라, 바탕이 바뀌면 같이 바뀌어야 맞다.
      점도 6px→5px, 4px→3px 로 모서리에 붙였다. 두 자리 숫자와 겹치는 폭이 그만큼 준다. */
.ajb-cal button.hol::after{content:'';position:absolute;right:3px;top:3px;width:5px;height:5px;
  border-radius:50%;background:var(--rd);box-shadow:0 0 0 1.5px #fff;}
/* 초록 바탕에서도 같은 빨강으로 보이게 — 연한 점은 「점이 사라졌다」로 읽힌다. */
.ajb-cal button[aria-pressed=true].hol::after{background:#e74c3c;box-shadow:0 0 0 1.5px var(--b);}
.ajb-cal button.prev[aria-pressed=true].hol::after{box-shadow:0 0 0 1.5px #8aa79a;}
.ajb-cal .pad{visibility:hidden;}
.ajb-calnote{margin:9px 0 0;font-size:1.1rem;color:var(--mu);}
.ajb-prev{margin:10px 0 0;padding:11px 13px;border:1px solid #dfe6e3;border-left:3px solid #9fb3ab;
  border-radius:8px;background:#f7faf9;font-size:1.1rem;line-height:1.6;color:#43524c;}
.ajb-prev b{color:#1a1a1a;}

/* 주 접기 — 한 번에 하나만 */
.ajb-wk{border:1px solid var(--ln);border-radius:11px;margin-bottom:8px;overflow:hidden;}
.ajb-wk:last-child{margin-bottom:0;}
.ajb-wk__h{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 10px;
  padding:12px 14px;background:#fbfcfc;border:0;font-family:inherit;font-size:1.18rem;
  color:#1a1a1a;cursor:pointer;text-align:left;}
.ajb-wk__h b{color:var(--b);white-space:nowrap;}
/* 🔴 오른쪽 덩어리는 통째로 안 접힌다. 안 그러면 「주 40시간」과 ▸ 가 갈라져
   화살표만 아랫줄로 떨어진다. 날짜(왼쪽)만 접히게 둔다. */
.ajb-wk__h > span:last-child{flex:none;white-space:nowrap;}
.ajb-wk__h .ar{flex:none;color:var(--mu);font-size:1rem;}
.ajb-wk__b{padding:2px 14px 14px;}
.ajb-drow{border-top:1px solid var(--ln);padding:10px 0 6px;}
.ajb-drow:first-child{border-top:0;}
.ajb-drow__h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2px 10px;margin-bottom:2px;}
.ajb-drow__h .dt{font-size:1.18rem;font-weight:700;}
.ajb-drow__h .dn{font-size:1.18rem;font-weight:700;color:var(--b);text-align:right;}
.ajb-drow__h .dn b{font-weight:700;}
.ajb-drow--pv .dn{color:var(--mu);}
/* 🔴 들여쓰지 않는다(2026-09-01). 16px 을 넣으면 그만큼 시각 칸이 좁아져
      360px 폰에서 [+1일] 이 아랫줄로 떨어진다. 날짜 줄과 시각 줄은 붙어 있어
      들여쓰기 없이도 어느 날짜의 시각인지 헷갈리지 않는다. */
.ajb-drow__b{padding-left:0;}
.ajb-dnote--none{padding:6px 0 2px;}
.ajb-drow--pv .dt{color:var(--mu);}
.ajb-dnote{margin:8px 0 0;font-size:1.1rem;color:var(--mu);}
.ajb-dnote b{color:var(--b);}
.ajb-seg{display:flex;gap:4px;}
.ajb-seg button{border:1px solid #cfd8d4;background:#fff;border-radius:8px;padding:7px 12px;
  font-family:inherit;font-size:1.08rem;color:var(--mu);cursor:pointer;white-space:nowrap;}
.ajb-seg button[aria-pressed=true]{border-color:var(--b);background:var(--pale);color:var(--b);
  font-weight:700;box-shadow:inset 0 0 0 1px var(--b);}
.ajb-sw{flex:none;width:40px;height:23px;padding:0;border:0;border-radius:999px;
  background:#cdd6d2;position:relative;cursor:pointer;transition:background .15s;}
.ajb-sw i{position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s;}
.ajb-sw[aria-checked=true]{background:var(--b);}
.ajb-sw[aria-checked=true] i{transform:translateX(17px);}

.ajb-mini{margin-top:18px;padding:13px 15px;background:var(--pale);border-radius:10px;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:1.25rem;}
.ajb-mini .t{display:flex;flex-direction:column;}
.ajb-mini .t span{font-weight:700;color:var(--b);}
.ajb-mini .t em{font-style:normal;font-size:1.12rem;color:var(--mu);}
.ajb-mini b{font-size:1.4rem;font-weight:800;color:var(--b);white-space:nowrap;}

/* 수당 블록 */
.ajb-alw{border:1px solid var(--ln);border-radius:12px;padding:14px;margin-bottom:10px;}
.ajb-alw__h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;}
.ajb-alw__n{flex:1 1 auto;min-width:0;font-size:1.25rem;font-weight:700;}
.ajb-alw__h b{flex:0 0 auto;font-size:1.28rem;font-weight:800;color:var(--b);white-space:nowrap;}
.ajb-alw__b{font-size:1.12rem;color:var(--mu);}
.ajb-alw__b:not(:empty){margin-top:10px;}
.ajb-alw__f{margin:0;font-size:1.12rem;color:var(--mu);}
/* 기본급과 수당은 같은 층 — 대제목이라 이름도 금액도 초록. 그 아래는 전부 검정. */
.ajb-alw--base .ajb-alw__n,.ajb-alw--grp > .ajb-alw__h .ajb-alw__n{font-size:1.3rem;color:var(--b);}
.ajb-alw--grp .ajb-alw .ajb-alw__n,.ajb-alw--pair .ajb-alw__n{color:#1a1a1a;}
.ajb-alw--grp .ajb-alw .ajb-alw__h > b,.ajb-alw--pair > .ajb-alw__h > b,
.ajb-alw--pair .ajb-sub__h b{color:#1a1a1a;}
.ajb-alw--base .ajb-alw__b .ajb-pick__c{padding-left:0;}
.ajb-alw--grp{padding-bottom:6px;}
.ajb-alw--grp > .ajb-alw__h{margin-bottom:4px;}
.ajb-alw--grp .ajb-alw{border:0;border-top:1px solid var(--ln);border-radius:0;
  padding:12px 0 10px;margin-bottom:0;}
.ajb-pick__d--in{padding-left:12px;}
.ajb-pick__d--in > span:first-child{font-weight:500;color:#43524c;}
/* 계산식 한 줄 — 굵게도 색도 넣지 않는다. 금액은 문장 끝에 붙는다. */
.ajb-pick__c{padding-left:12px;margin-top:2px;font-size:1.1rem;color:#1a1a1a;}
.ajb-holadd{display:flex;gap:8px;margin-top:10px;}
.ajb-holadd select{flex:1;font-size:1.12rem;padding:9px 11px;}
.ajb-holadd button{flex:none;border:1px solid var(--b);background:var(--pale);border-radius:9px;
  padding:0 14px;font-family:inherit;font-size:1.12rem;font-weight:700;color:var(--b);cursor:pointer;}
.ajb-pick__w{font-size:1.08rem;font-weight:700;color:var(--mu);margin:12px 0 4px;}
.ajb-pick__d{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 10px;margin-top:8px;}
.ajb-pick__d > span:first-child{flex:1 1 auto;min-width:0;font-size:1.1rem;font-weight:600;color:#1a1a1a;}
.ajb-pick__d em{font-style:normal;font-size:1rem;font-weight:700;color:var(--b);
  background:var(--pale);border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:1px;}
/* 🔴 회색 칩 — 「없다·안 나간다」를 말하는 자리 (2026-09-15). 주휴 결근이 첫 손님이다.
      초록 칩과 **같은 모양에 색만** 다르다. 모양을 달리하면 두 칩이 다른 물건으로 읽힌다.
      앱도 개근 초록 · 결근 회색으로 간다(store_payroll_calc_page.dart `tagColor`). */
.ajb-pick__d em.off{color:var(--mu);background:var(--mute);}
/* 사장이 넣은 임시공휴일을 빼는 칩. 자동으로 잡힌 휴일에는 붙지 않는다 —
   계산기가 아는 사실은 못 바꾸고, 사장이 넣은 것만 뺄 수 있다. */
.ajb-rm{flex:none;width:22px;height:22px;padding:0;margin-right:7px;border:1.5px solid var(--rd);
  border-radius:50%;background:#fff;color:var(--rd);font-size:1.2rem;font-weight:700;line-height:1;
  cursor:pointer;vertical-align:-2px;}
.ajb-rm:hover{background:var(--rd);color:#fff;}
.ajb-pick__l{display:flex;align-items:baseline;gap:6px;
  padding-left:12px;margin-top:3px;font-size:1.1rem;color:#1a1a1a;}
.ajb-pick__l em{flex:1;font-style:normal;color:#1a1a1a;font-weight:400;}
.ajb-pick__l b{flex:none;font-weight:700;color:var(--b);white-space:nowrap;}

.ajb-seg--wide button{flex:1;padding:9px 10px;font-size:1.15rem;}
/* 휴일근로수당 · 연장수당 — 한 카드 안의 두 덩어리 */
.ajb-alw--pair .ajb-sub{border-top:1px solid var(--ln);padding-top:11px;margin-top:11px;}
.ajb-alw--pair .ajb-sub__h{display:flex;flex-wrap:wrap;align-items:center;gap:2px 9px;}
.ajb-sub__n{flex:1 1 auto;min-width:0;font-size:1.2rem;font-weight:700;color:#1a1a1a;}
.ajb-sub__h b{flex:0 0 auto;font-size:1.2rem;font-weight:800;color:var(--b);white-space:nowrap;}

.ajb-row--bn{margin-top:20px;padding-top:18px;border-top:1px solid var(--ln);}
.ajb-bn{display:grid;grid-template-columns:1.2fr 1fr auto;gap:8px;margin-bottom:9px;}
.ajb-bn button{border:1px solid #cfd8d4;background:#fff;border-radius:9px;padding:0 13px;
  font-family:inherit;font-size:1.1rem;color:var(--mu);cursor:pointer;}
.ajb-add{width:100%;border:1px dashed #a8b5af;background:#fff;border-radius:11px;padding:13px;
  font-family:inherit;font-size:1.2rem;font-weight:700;color:var(--b);cursor:pointer;}

/* 🔴 계산 결과는 **아무것도 들여쓰지 않는다**(2026-09-01, 사장 확정). 항목 이름·금액·
   계산식이 다 왼쪽에 붙는다. 한때 계산식만 14px 들여썼는데, 폰에서 좁아진 계산식이
   두 줄로 접혀 되돌렸다.
   🔴 들여쓰기가 남아 있는 곳은 **지급액 상세뿐**이다(.ajb-dtd__c). 거기는 날짜 아래에
      항목이 여럿 매달리는 구조라 들여쓰기가 계층을 보여준다. 두 곳을 같이 맞추지 말 것. */

.ajb-blank{font-size:1.15rem;color:var(--mu);padding:8px 0;margin:0;}

.ajb-edge{margin-top:14px;padding:14px 16px;background:#fff;border:1px solid #cfe0d8;
  border-radius:11px;font-size:1.12rem;color:var(--mu);line-height:1.7;}

/* 계산 상세 — 결과 카드 안에 얹힌다. 테두리·배경 없이 실선 하나로만 위와 가른다. */

.ajb-dtd{border-top:1px solid #cfe0d8;padding:12px 0 2px;}
.ajb-dtd__h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;font-size:1.15rem;font-weight:700;}
/* 🔴 들여쓰기는 계산식(.ajb-dtd__c)에만 준다. 날짜·근무시각·항목 이름은 왼쪽에 붙인다. */

.ajb-dtd__i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
  font-size:1.12rem;margin-top:6px;}

.ajb-dtsum__t{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:0 0 6px;
  font-size:1.15rem;font-weight:800;color:#1a1a1a;}

/* 지난달 안내 — 흰 박스로 두면 결과 카드 안에서 또 하나의 박스가 된다. 세로줄로만 표시한다. */
.ajb-dtpv{border-left:3px solid #cfe0d8;padding:2px 0 2px 12px;margin-bottom:8px;
  font-size:1.1rem;color:var(--mu);}

.ajb-box p{margin:0 0 6px;}
.ajb-box p:last-child{margin-bottom:0;}

.ajb-note{margin:0 0 10px;padding:10px 13px;border-radius:9px;
  background:#fdf2f0;border:1px solid #f0cdc6;color:#a5372a;
  font-size:1.12rem;font-weight:600;}

@media (min-width:900px){
  .ajb-grid{grid-template-columns:1.35fr 1fr;gap:18px;align-items:start;}
  .ajb-right{position:sticky;top:20px;}
  /* 🔴 계산 상세를 펴면 오른쪽 열이 화면보다 길어진다. sticky 를 그대로 두면 카드가
     화면 위에 붙어버려 아래쪽 날짜들을 영영 못 본다. 펴는 동안에는 고정을 푼다. */
  .ajb-calc--det .ajb-right{position:static;}
}
@media (max-width:480px){
  .ajb-step__c{padding:14px 15px 16px;}
  .ajb-card{padding:18px 15px;}
  .ajb-chips{gap:4px;}
  .ajb-chips button{font-size:1.1rem;}
  .ajb-cal button{font-size:1.05rem;}
  .ajb-line--total b{font-size:1.35rem;}
  /* 🔴 시각 칸을 폰에서 한 번 더 줄인다. 여기 다섯 값은 눈대중이 아니라
        360px 폰에서 재서 나온 값이다(2026-09-01).
        [근무] [09:00] - [18:00] [+1일] 다섯이 한 줄에 들어가야 하는데, 테마 여백을
        24px 로 줄여도 줄 폭이 280px 뿐이다. 데스크톱 값이면 277px 이 필요해 3px 밖에
        안 남고, 폰의 한글 글꼴이 조금만 넓어도 [+1일] 이 아랫줄로 떨어진다.
        실제로 그렇게 떨어졌다 — 헤드리스 크로뮴에서는 들어가는데 갤럭시에서는 안 들어갔다.
        그래서 여유를 30px 쯤 두도록 줄였다. 필요 249px.
        🔴 글자 크기를 1rem 아래로 내리지 말 것. iOS 사파리가 16px 미만인 입력칸에
           초점이 가면 화면을 확대해 버린다. 1.05rem = 16.8px 이라 안 걸린다. */
  /* 폰에서 한 번 더 줄인다. 여기도 전부 px 다 — 이유는 위 「시각 입력 줄」 주석에 있다.
     360px 3단계 기준 필요 245px · 주는 폭 261px → 16px 남는다. */
  .ajb-calc input.ajb-t{font-size:17px;padding:8px 2px;min-width:50px;max-width:77px;}
  /* 🔴 3단계(날짜별)만 한 번 더 줄인다 — 위 값의 75% 다. 2026-09-01, 사장 확정.
        같은 줄인데 3단계가 더 좁다. 상자에 두 겹으로 싸여 있기 때문이다.
          2단계  카드 안여백 15  →                              줄폭 약 266px
          3단계  카드 15 + 주차상자 테두리 1 + 안여백 6  →      줄폭 약 250px
        줄이기 전 크기는 246px 을 먹어서 3단계에서 4px 밖에 안 남는다. 그 4px 이
        폰에서 무너졌다. 75% 로 줄이면 222px 이라 28px 이 남는다.
        테마 여백을 24px 로 넣으면 44px 까지 늘어난다 — 둘 중 어느 쪽이어도 된다.
        🔴 **16px 이 하한이다.** 아이폰 사파리는 입력칸 글자가 16px **미만**일 때만 화면을
           확대한다. 16px 은 안 걸린다. 그래서 13px 에서 16px 으로 올렸다(2026-09-01).
           필요 폭이 222 → 236px 이 되어 폰 줄폭 247.6px 에 12px 남는다.
           🔴 15px 이하로 내리지 말 것. 내리는 순간 아이폰에서 확대가 돌아온다. */
  .ajb-drow__b input.ajb-t{font-size:16px;padding:5px 2px;min-width:45px;max-width:70px;}
  .ajb-tr .l{width:37px;}
  .ajb-cb{width:52px;font-size:16px;}
  .ajb-terr{margin-left:37px;}
  /* 🔴 3단계 주차 상자의 좌우 안여백. 14px 이면 시각 줄이 250px 밖에 못 받는데
        한 줄에 들어가려면 244px 이 필요하다 — 6px 여유는 폰 글꼴 하나에 무너진다.
        6px 으로 줄여 262px 을 준다. 실측 기준은 위 시각 칸 주석과 같다(2026-09-01). */
  .ajb-wk__b{padding:2px 6px 12px;}
}