/* 주휴수당 계산기 스타일 — albajangbu-calculators/assets/ajb-weekly-holiday.css
   🔴 **이 파일이 원본이다.** content/parts/weekly-holiday-pay-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;}
.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],.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{text-align:left;}

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

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

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

/* 요일 칩 */

.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;}

/* 요일별 시간 줄 — 요일 칩은 최저임금 계산기와 같은 크기(32px)로 맞춥니다. */
.ajb-per{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.ajb-per .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-per .ajb-input{flex:1;}
.ajb-calc .ajb-per input{padding:10px 52px 10px 12px;font-size:1.28rem;}

/* 개근 확인 줄
   🔴 날짜와 기간을 .ajb-kv 로 묶는다. 폭이 모자라면 **기간이 통째로 아랫줄로** 내려간다.
      2026-09-01 이전에는 체크박스·날짜·기간이 한 줄에 나란히 묶여 있어(flex, nowrap)
      좁은 화면에서 두 칸이 각자 안에서 접혔다 — 「9월 6일 / (일)」 「8월 31일 ~ 9월 / 6일」
      처럼 날짜 하나가 두 동강 나서 읽을 수가 없었다.
      급여계산기의 주차 헤더(.ajb-wk__h)와 같은 방식이다. */
.ajb-weeks{display:flex;flex-direction:column;gap:7px;}
.ajb-week{display:flex;align-items:center;gap:0;padding:11px 14px;border:1px solid #cfd8d4;
  border-radius:9px;font-size:1.2rem;cursor:pointer;background:#fff;}
.ajb-week input{width:18px;height:18px;flex:none;margin:2px 11px 0 0;accent-color:var(--b);}
.ajb-week.on{border-color:var(--b);background:var(--pale);}
.ajb-week .wkt{flex:1 1 auto;min-width:0;}
/* 🔴 두 칸 모두 nowrap 이다. 안에서 접히면 아랫줄로 내려가는 의미가 없어진다. */
.ajb-week .wd{font-weight:700;white-space:nowrap;}
.ajb-week .wr{font-size:1.05rem;color:var(--mu);white-space:nowrap;}
.ajb-week.on .wd{color:var(--b);}

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

   🔴 .s 를 .k 안에 넣지 말 것. 예전에는 이름과 계산식을 한 칸에 세로로 쌓았는데
      (.t{flex-direction:column}), 그러면 계산식이 이름 칸 폭에 갇혀 폰에서 접혔다.
      이 계산기는 계산식이 짧아 아직 안 깨졌지만, 최저임금 계산기는 그렇게 깨져 있었다.
      세 계산기를 같은 짜임으로 맞춘 것이다(2026-09-01).
   ───────────────────────────────────────────────────────────── */

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

/* 🔴 줄을 들여쓰지 않는다(2026-09-01, 사장 확정). 항목 이름과 금액은 왼쪽·오른쪽
      끝에 붙어야 금액 열이 맞는다. 계산식도 들여쓰지 않는다.
      들여쓰기가 남아 있는 곳은 **지급액 상세뿐**이다(.ajb-dtd__c). 세 계산기가 같다.
   🔴 이 계산기는 --sub 를 아직 쓰지 않는다. 그래도 규칙을 맞춰 둔다 —
      항목이 늘어날 때 이 줄만 혼자 다르게 나오는 것을 막는다. */

.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__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-dtd__i--off span{color:var(--mu);}

.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;}
  .ajb-line--total{font-size:1.15rem;}
  .ajb-line--total .v{font-size:1.35rem;}
  .ajb-bar b{font-size:1.35rem;}
}