/* ============================================================
   annual-leave.css — 연차수당 계산기 전용 스타일

   ★ 이 계산기의 입력폼·결과 모양만 바꾸고 싶을 때
     이 파일을 수정하세요. 다른 페이지에는 영향이 없습니다.
   ============================================================ */

.stage{
  background:linear-gradient(180deg,var(--card),#101b2c);
  border:1px solid var(--line);
  border-radius:22px;
  padding:26px 20px 24px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}

/* --- 입력 폼 --- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
.in-label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.in-hint{font-weight:400;font-size:12px;color:var(--dim)}
.in-text{
  width:100%;padding:14px 15px;border-radius:12px;font-size:15px;
  font-family:inherit;color:var(--text);
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.in-text:focus{outline:none;border-color:rgba(var(--primary-rgb),.5)}

/* 세그먼트 토글 */
.seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg-btn{
  padding:12px 6px;border-radius:12px;font-size:12.5px;font-weight:700;line-height:1.35;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--muted);
}
.seg-btn.active{
  color:#0b1220;background:linear-gradient(180deg,var(--primary-soft),var(--primary));
  border-color:transparent;
}

.btn-primary{
  width:100%;margin-top:6px;padding:16px;font-size:16px;color:#0b1220;border-radius:14px;
  background:linear-gradient(180deg,var(--primary-soft),var(--primary));
  box-shadow:0 12px 24px -10px rgba(var(--primary-rgb),.5);
}
.btn-primary:hover{filter:brightness(1.05)}

/* --- 결과 영역 --- */
.result{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.result-head{text-align:center;margin-bottom:20px}
.result-label{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:6px}
.result-main{font-size:32px;font-weight:800;color:var(--primary-soft);letter-spacing:-.02em}
.result-sub{font-size:13px;color:var(--muted);margin-top:6px}

.breakdown{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:14px;padding:6px 16px;
}
.b-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:11px 0;font-size:14px;color:var(--text);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.b-row:last-child{border-bottom:none}
.b-row span:first-child{color:var(--muted)}
.b-row.total{font-weight:800;font-size:15px}
.b-row.total span:first-child{color:var(--text)}
.b-row.total span:last-child{color:var(--accent)}

.notice-box{margin-top:18px}
.notice-box p{
  font-size:12px;color:var(--dim);line-height:1.7;margin-bottom:8px;
  padding-left:12px;position:relative;
}
.notice-box p::before{content:'·';position:absolute;left:0}
.notice-box .disclaimer{
  margin-top:12px;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  color:var(--muted);font-size:11.5px;
}
.notice-box .disclaimer::before{content:none}

@media (max-width:420px){
  .result-main{font-size:27px}
  .seg-btn{font-size:11.5px}
}