/* 글꼴은 프리텐다드만. 어두운 남색 배경 + 반투명 유리 카드 (랜덤 닉네임 생성기와 같은 계열, 색만 파랑) */
:root { color-scheme:dark;
  --fg:#e8eefc; --muted:#b6c4e0; --line:rgba(127,176,255,.26); --card:rgba(16,24,44,.72); --field:rgba(6,10,22,.72);
  --accent:#7fb0ff; --accent-2:#4f8df5; --on-accent:#06101f; }
* { box-sizing:border-box; }
input, button, select, textarea { font-family:inherit; } /* 입력칸·버튼도 프리텐다드 */
body { margin:0; min-height:100vh; color:var(--fg); word-break:keep-all; -webkit-font-smoothing:antialiased;
  background:radial-gradient(1200px 600px at 15% -10%, #1d3466 0%, transparent 60%),
             radial-gradient(900px 500px at 110% 110%, #14345a 0%, transparent 55%), #0c1220;
  background-attachment:fixed;
  font:16px/1.6 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }

main, footer { max-width:560px; margin:0 auto; padding-left:16px; padding-right:16px; }
main { padding-top:8px; padding-bottom:40px; }
footer { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 20px; padding-top:20px; padding-bottom:40px;
  border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer a { color:var(--muted); }
header { max-width:560px; margin:0 auto; padding:0 16px; height:52px; display:flex; align-items:center; }
.logo { display:inline-flex; align-items:center; gap:8px; color:var(--fg); text-decoration:none; font-weight:700; }
.brand { display:flex; align-items:center; justify-content:center; gap:10px; }
.brand img { flex:none; width:34px; height:34px; } /* 제목 옆 계산기 로고 */

h1 { font-size:26px; font-weight:800; line-height:1.25; letter-spacing:-0.03em; margin:4px 0 12px; text-align:center; }
h2 { font-size:20px; margin:32px 0 8px; }
.note { min-height:1.6em; margin:6px 0 0; font-size:13px; color:var(--muted); text-align:center; }
.note.warn { color:#ff8a8a; font-weight:700; } /* 꼭 확인해야 하는 경고 */

/* 위 탭 3개: 누르면 아래 계산기가 바뀝니다 */
.tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; padding:4px; margin-bottom:10px;
  border:1px solid var(--line); border-radius:14px; background:var(--field); }
.tabs a { display:flex; align-items:center; justify-content:center; text-decoration:none; min-height:42px; border:0; border-radius:10px; background:none; color:var(--muted); cursor:pointer;
  font:inherit; font-size:15px; font-weight:700; transition:background .2s, color .2s; }
.tabs a:hover { color:var(--fg); }
.tabs a[aria-selected="true"] { color:var(--on-accent); background:linear-gradient(135deg, #a3c8ff, var(--accent-2));
  box-shadow:0 4px 16px rgba(79,141,245,.35); }

/* 유리 카드 */
.card { background:var(--card); border:1px solid var(--line); border-radius:18px; padding:16px;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 12px 40px rgba(0,0,0,.35); }
/* 계산기 3개를 한 칸에 겹침: 숨긴 계산기도 자리는 차지해서 카드 크기가 늘 같습니다 */
.panels { display:grid; }
.panels > .tool { grid-area:1 / 1; display:flex; flex-direction:column; }
.panels > .tool[hidden] { visibility:hidden; }
.tool .result { margin-top:auto; } /* 결과는 늘 카드 맨 아래 같은 줄에 */

/* 입력: 왼쪽 이름, 오른쪽 칸 (줄 맞춤) */
.form { display:flex; flex-direction:column; gap:8px; }
.field { display:grid; grid-template-columns:116px 1fr; align-items:center; gap:8px; }
.field > label { color:var(--accent); font-size:14px; font-weight:600; line-height:1.3; }
.field > label small { display:block; font-size:12px; font-weight:500; color:var(--muted); } /* 칸 이름 아래 작은 설명 */
.money { display:flex; align-items:baseline; gap:6px; min-height:46px; padding:0 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--field); transition:border-color .15s, box-shadow .15s; }
.money:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(127,176,255,.22); }
.money input { flex:1; min-width:0; width:100%; height:44px; padding:0; border:0; background:none; outline:none; color:var(--fg);
  font:inherit; font-size:18px; /* 16px 미만이면 아이폰이 확대합니다 */ font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }
/* 입사일: 기본 달력 아이콘 대신 사이트 색 아이콘, 칸 전체가 달력 버튼 */
.money.date { position:relative; cursor:pointer; }
.money.date:hover { border-color:rgba(127,176,255,.5); }
.money input[type="date"] { text-align:right; font-size:17px; cursor:pointer; color-scheme:dark; accent-color:var(--accent-2); letter-spacing:.01em; }
.money input[type="date"].empty { color:rgba(182,196,224,.45); font-weight:500; }
.money input[type="date"]::-webkit-calendar-picker-indicator { position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer; }
.money input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding:0; }
/* 날짜도 다른 칸처럼 오른쪽 끝에 맞춤 (크롬·안드로이드 / 아이폰) */
.money input[type="date"]::-webkit-datetime-edit { display:flex; justify-content:flex-end; }
.money input[type="date"]::-webkit-date-and-time-value { text-align:right; }
.cal { flex:none; width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; pointer-events:none; }
.money input::placeholder { color:rgba(182,196,224,.45); font-size:15px; font-weight:500; }
.money span { flex:none; width:30px; color:var(--muted); font-size:15px; font-weight:700; text-align:left; } /* 단위(원·시간·일) 자리 폭을 같게: 모든 칸의 숫자 끝이 한 세로줄에 */
.money .cal { margin-right:10px; align-self:center; } /* 날짜 칸 아이콘도 같은 자리에 */
.read { display:flex; justify-content:space-between; gap:8px; height:1.4em; line-height:1.4; margin:-4px 0 0; font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; } /* 글이 생겨도 아래 버튼이 밀리지 않게 높이 고정 */
/* 금액 빠른 버튼 (3.3%) */
.quick { display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.quick button { min-height:44px; padding:0; border:1px solid var(--line); border-radius:10px; background:var(--field); color:var(--fg);
  font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, transform .1s; }
.quick button:hover { border-color:rgba(127,176,255,.5); }
.quick button:active { transform:scale(.95); background:rgba(127,176,255,.18); }
.quick button:last-child { color:var(--muted); }
.nowrap { white-space:nowrap; }
/* 주휴수당 받는 조건 체크 */
.checks { list-style:none; margin:4px 0 0; padding:10px 12px; border-radius:12px; background:rgba(127,176,255,.07); }
.checks li { position:relative; padding-left:22px; font-size:14px; line-height:1.7; color:var(--muted); }
.checks li::before { content:""; position:absolute; left:2px; top:.45em; width:12px; height:7px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
/* 첫 화면 참고용 안내 */
.ref { margin:14px 0 0; font-size:12px; line-height:1.6; color:rgba(182,196,224,.7); text-align:center; }
.disclaimer.ref { font-size:13px; color:var(--muted); }
.note a { color:var(--accent); font-weight:600; text-decoration:none; }
html { scroll-behavior:smooth; } #who { scroll-margin-top:16px; }
.ref span { display:block; } /* 한 줄씩 정해서 가운데 정렬 */
.ref b { color:var(--fg); font-weight:700; font-variant-numeric:tabular-nums; }
/* 휴대폰 터치: 누를 때 회색 깜빡임·두 번 눌러 확대 없애기 */
a, button, label, input { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }

/* 두 개 중 하나 고르기 (계약 금액/실수령액, 월급/시급) */
.seg { display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:3px; border-radius:12px; background:var(--field); border:1px solid var(--line); }
.seg label { position:relative; }
.seg input { position:absolute; opacity:0; width:1px; height:1px; }
.seg span { display:flex; align-items:center; justify-content:center; min-height:36px; border-radius:9px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--muted); transition:background .2s, color .2s; }
.seg input:checked + span { background:linear-gradient(135deg, #a3c8ff, var(--accent-2)); color:var(--on-accent); font-weight:700; } /* 고른 쪽이 분명하게 */
.seg input:focus-visible + span { outline:3px solid var(--accent); outline-offset:1px; }
.seg.mini span { min-height:34px; font-size:14px; } /* 테두리·여백 포함 42px = 입력칸 높이와 같게 (줄 맞춤) */

/* 결과: 이름은 왼쪽, 금액은 오른쪽 끝에 자리 맞춰 */
.result { margin-top:12px; padding-top:10px; border-top:1px solid var(--line); }
.out { margin:0; }
.out div { display:flex; justify-content:space-between; align-items:baseline; padding:3px 0; }
.out dt { color:var(--muted); font-size:14px; }
.out dd { margin:0; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.big { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-top:6px; padding-top:8px; border-top:1px dashed var(--line); }
.big span { font-weight:700; }
.big strong { color:var(--accent); font-size:28px; font-weight:800; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }

/* 첫 화면은 계산기만: 화면 높이를 채워 설명 글은 스크롤해야 보입니다 */
.stage { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-bottom:24px; }

/* 광고 칸: 비어 있으면 숨김, 넣으면 높이를 미리 잡아 화면이 밀리지 않게 */
.ad { display:block; min-height:250px; margin:24px 0; }
.ad:empty { display:none; }
.ad.ad-top { display:none; }

.guide { margin-top:24px; padding:8px 20px 20px; }
.guide:empty { display:none; }
.guide section[hidden] { display:none; }
.guide-note { margin:16px 0 0; padding:10px 12px; border-radius:10px; background:rgba(127,176,255,.07); font-size:13px; line-height:1.6; color:var(--muted); }
.guide h3 { font-size:17px; margin:24px 0 6px; }
.guide ul { margin:0; padding-left:20px; }
.guide li { margin:6px 0; }
.law { display:block; font-size:13px; color:var(--muted); } /* 근거 법령: 문장 아래 작게 */
.days { width:100%; margin:10px 0 0; border-collapse:collapse; font-size:14px; text-align:center; font-variant-numeric:tabular-nums; }
.days th, .days td { padding:6px 2px; border-bottom:1px solid var(--line); }
.days th { color:var(--muted); font-weight:600; }
.disclaimer { margin:24px 0 0; padding-top:14px; border-top:1px solid var(--line); }
.doc { padding:4px 20px 24px; }
.doc h1 { text-align:left; }

/* 휴대폰 */
@media (max-width:559px) {
  .stage { justify-content:flex-start; padding-bottom:72px; } /* 첫 화면은 계산기만: 화면 높이를 채워 아래 설명은 스크롤해야 보임 */ /* 화면 아래 띠 광고(앵커)가 결과를 가리지 않게 */
  .ad.ad-top, .ad.ad-top:empty { display:block; width:100%; max-width:320px; height:100px; min-height:100px; margin:0 auto 6px; overflow:hidden; }
  h1 { font-size:22px; margin:2px 0 8px; }
  .field { grid-template-columns:116px 1fr; } /* "2026년 최저 10,320원"이 한 줄에 들어가는 폭, 세 탭 모두 같게 */
  /* 연차수당(입력 4칸)도 띠 광고 위에 들어오게 촘촘히. 누르는 칸은 손가락 권장 크기 44px */
  .form { gap:6px; }
  .money { min-height:44px; }
  .money input { height:42px; }
  .seg.mini span { min-height:36px; } /* 테두리·여백 포함 44px = 입력칸과 같은 높이 */
  .tabs a { min-height:44px; }
  footer { padding-bottom:calc(40px + env(safe-area-inset-bottom)); } /* 아이폰 홈바 피하기 */
  .card { padding:14px; }
  .result { margin-top:14px; padding-top:8px; }
  .big { margin-top:4px; padding-top:6px; }
}
/* 화면이 짧은 휴대폰(아이폰 SE 등)은 위 광고 칸을 숨기고 아래 띠 광고만 */
@media (max-width:559px) and (max-height:600px) { .ad.ad-top, .ad.ad-top:empty { display:none; } h1 { margin:0 0 6px; } .tabs { margin-bottom:8px; } .brand img { width:28px; height:28px; } }
@media (max-width:359px) { .field { grid-template-columns:96px 1fr; } #h-min { font-size:10px; letter-spacing:-0.02em; } /* 아주 좁은 화면: 글자를 줄여서라도 2026년 최저시급을 한 줄에 */ .field > label { font-size:13px; }
  .checks { padding:8px 8px; } .checks li { padding-left:18px; font-size:12.5px; letter-spacing:-0.02em; } /* 아주 좁은 화면에서도 조건이 한 줄씩 */ }

/* 컴퓨터: 왼쪽 입력, 오른쪽 결과 */
@media (min-width:900px) {
  main, footer, header { max-width:880px; }
  h1 { font-size:36px; margin-bottom:16px; }
  .tabs { max-width:480px; width:100%; margin:0 auto 16px; }
  .panels > .tool { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; padding:28px; min-height:300px; }
  .tool .form { align-self:start; }
  .tool .result { margin:0; padding:0 0 0 28px; border-top:0; border-left:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:flex-end; } /* 큰 결과 숫자를 늘 같은 줄에 */
  .big strong { font-size:34px; }
  .out dt, .out dd { font-size:16px; }
}

@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }