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

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

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

.ajb-calc select,.ajb-calc input[type=number]{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{text-align:left;}

/* 숫자칸 증감 화살표 숨김 — 단위 글자와 겹칩니다 */

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

/* 요일 칩 */

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

/* 매일 같음 */
.ajb-check{display:flex;align-items:center;gap:0;font-size:1.25rem;font-weight:600;cursor:pointer;margin:0;}

/* 요일별 시각 줄 — 요일 칩은 급여계산기 2단계와 같은 모양, 들여쓰기는 이쪽이 원본이다. */
.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;}
/* 🔴 들여쓰지 않는다(2026-09-01). 16px 을 넣으면 그만큼 시각 칸이 좁아진다.
      요일 배지가 바로 위에 있어 들여쓰기 없이도 어느 요일의 시각인지 헷갈리지 않는다.
      급여계산기도 같은 이유로 없앴다(.ajb-drow__b). */
.ajb-day__b{padding-left:0;}

/* ─────────────────────────────────────────────────────────────
   시각 입력 줄 — 이 덩어리만 **px 로 못 박는다.** em/rem 을 쓰지 않는다.
   ─────────────────────────────────────────────────────────────
   이 사이트의 1rem 은 16px 이 아니다. 테마가 유동 타이포그래피를 써서 약 17px 이다.
   em/rem 으로 적으면 값이 전부 6% 씩 부푼다. 그만큼이 이 줄에서는 치명적이다.

   2026-09-01 에 이 계산기를 재보니 **네 조합 모두 두 줄로 깨져 있었다.**
     여백 30px(테마 기본)  매일같음 두 줄(줄폭 268) · 요일별 두 줄(줄폭 252)
     여백 24px(자식 CSS)   매일같음 두 줄(줄폭 280) · 요일별 두 줄(줄폭 264)
   급여계산기에서 같은 원인을 잡고 px 로 바꿔 해결했다. 여기도 같은 값으로 맞춘다.

   🔴 이 덩어리에 em·rem 을 다시 넣지 말 것. 테마 설정 하나에 조용히 깨진다.
   🔴 입력칸 글자를 16px 밑으로 내리면 아이폰이 누를 때 화면을 확대한다.
      데스크톱은 18px 이라 안 걸리고, 폰은 13px 이라 걸린다 — 알고 고른 값이다.
   ───────────────────────────────────────────────────────────── */
.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:var(--rd);}

/* ─────────────────────────────────────────────────────────────
   .ajb-kv — 「이름 ↔ 금액」을 가로로 놓는 자리는 전부 이 한 벌을 쓴다.
   ─────────────────────────────────────────────────────────────
   폭이 모자라면 금액이 아랫줄로 접힌다. 이름이 잘리거나 화면을 넘지 않는다.
   .s(계산식)는 폭 전체를 쓰는 셋째 줄이다.

   🔴 .s 를 .k 안에 넣지 말 것. 예전에는 이름과 계산식을 한 칸에 세로로 쌓았는데
      (.t{flex-direction:column}), 그러면 계산식이 이름 칸 폭에 갇혀 폰에서 두 줄로
      접혔다. 급여계산기에서 같은 이유로 뜯어고쳤다(2026-08-31).
   ───────────────────────────────────────────────────────────── */

.ajb-result{padding:2px 0 0;}

/* 🔴 줄을 들여쓰지 않는다(2026-09-01, 사장 확정). 항목 이름과 금액은 왼쪽·오른쪽
      끝에 붙어야 금액 열이 맞는다. 계산식도 들여쓰지 않는다.
      들여쓰기가 남아 있는 곳은 **지급액 상세뿐**이다(.ajb-dtd__c). 급여계산기와 같다. */

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

/* 지급액 상세 — 급여계산기와 같은 짜임 */

.ajb-dth{margin:12px 0 2px;font-size:1.15rem;font-weight:800;color:var(--b);}
.ajb-dth--sep{border-top:1px solid #cfe0d8;margin-top:14px;padding-top:14px;}
.ajb-dtd{border-top:1px solid #cfe0d8;padding:10px 0 2px;}
.ajb-dtd--plain{border-top:0;}
.ajb-dtd__h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
  font-size:1.15rem;font-weight:700;}
/* 🔴 요일·항목 이름 아래 딸린 줄은 왼쪽에 붙인다. 들여쓰기는 「한 단 아래」를
      나타낼 때만 준다 — 연장 사유(ㄴ)와 주 계 안쪽이 그렇다. */

.ajb-dtd__c2{padding-left:28px;font-size:1.05rem;color:var(--mu);}
/* 월 환산 항목 — 결과 카드의 수당 항목 줄(.ajb-line--sub)과 똑같이 맞춘다.
   1.15rem · 이름과 금액 모두 500. 🔴 700 으로 올리지 말 것 — 그러면 상세가
   결과 카드만큼 무거워져서 어느 쪽을 봐야 할지 알 수 없어진다. */
.ajb-dtd__i{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;
  font-size:1.15rem;margin-top:9px;}
.ajb-dtd__i span{font-weight:500;}
.ajb-dtd__f{font-size:1.05rem;color:var(--mu);}

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

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

/* 모바일 하단 고정 바 — 계산기 영역을 벗어나면 스르륵 내려간다.
   🔴 hidden 속성으로 숨기지 않는다. .ajb-bar 의 display:flex 가 브라우저 기본
      [hidden]{display:none} 을 이겨서, 예전에는 계산기를 지나쳐도 바가 화면에 남았다. */
.ajb-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;background:#006241;color:#fff;
  box-shadow:0 -3px 14px rgba(0,0,0,.16);font-family:inherit;
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:opacity .2s ease, transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s linear .26s;}
.ajb-bar--on{opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .2s ease, transform .26s cubic-bezier(.22,.61,.36,1), visibility 0s;}
@media (prefers-reduced-motion:reduce){.ajb-bar,.ajb-bar--on{transition:none;}}
.ajb-bar span{font-size:1.12rem;font-weight:600;opacity:.92;}
.ajb-bar b{font-size:1.6rem;font-weight:800;white-space:nowrap;}

/* PC — 2열 + 결과 고정 */
@media (min-width:900px){
  .ajb-grid{grid-template-columns:1.35fr 1fr;gap:18px;align-items:start;}
  .ajb-right{position:sticky;top:20px;}
  /* 상세를 펼치면 결과가 길어져 고정이 오히려 방해가 된다 — 그때는 풀어준다. */
  .ajb-calc--det .ajb-right{position:static;}
  .ajb-bar{display:none;}
}
@media (max-width:480px){
  .ajb-card{padding:18px 15px;}
  .ajb-chips{gap:4px;}
  .ajb-chips button{font-size:1.1rem;}
  /* 🔴 시각 칸을 폰에서 한 번 더 줄인다. 급여계산기 3단계와 같은 값이다(그쪽의 75%).
        「안전하게」가 사장 지시다(2026-09-01). 이 칸에 필요한 폭이 222px 이 되어,
        테마 여백이 30px 이든 24px 이든(줄폭 268 / 280) 46px 넘게 남는다.
        깨지는 줄폭은 214px 이다. */
  .ajb-calc input.ajb-t{font-size:13px;padding:6px 2px;min-width:38px;max-width:58px;}
  .ajb-tr .l{width:37px;}
  .ajb-cb{width:52px;font-size:16px;}
  .ajb-terr{margin-left:37px;}
  .ajb-line--total{font-size:1.15rem;}
  .ajb-line--total .v{font-size:1.35rem;}
  .ajb-bar b{font-size:1.35rem;}
}