<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>사회복지시설 종사자 급여 계산기 | Welmoa</title>

  <!-- SEO -->
  <meta name="description" content="사회복지시설 종사자 급여 계산기. 기본급, 수당, 공제, 실수령액을 한 번에 확인하세요." />

  <!-- 공통 스타일 -->
  <link rel="stylesheet" href="https://tools.welmoa.kr/assets/site.css" />

<style>
  :root {
    --salary-accent: #3559a8;
    --salary-accent-dark: #2c4a8a;
    --salary-accent-soft: #edf3ff;
    --salary-bg: #f4f7fb;
    --salary-surface: #ffffff;
    --salary-surface-soft: #f8fbff;
    --salary-border: #dfe7f3;
    --salary-text: #18212f;
    --salary-muted: #637287;
    --salary-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
    --salary-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.05);
    --salary-radius-xl: 24px;
    --salary-radius-lg: 18px;
    --salary-radius-md: 14px;
    --salary-max: 1180px;
  }

  html { scroll-behavior: smooth; }

  body {
    background:
      radial-gradient(circle at top left, rgba(53, 89, 168, 0.05), transparent 28%),
      linear-gradient(180deg, #f7f9fc 0%, #f3f6fb 100%);
    color: var(--salary-text);
  }

  .container {
    width: min(var(--salary-max), calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
  }

  .site-header {
  position: relative;
  top: auto;
  z-index: 1;
  background: #2c4058;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: none;
}

.header-inner {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 10px;
  padding-bottom: 6px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.site-header nav a {
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.97rem;
  padding: 10px 14px;
  border-radius: 999px;
  transition: 0.18s ease;
}

.site-header nav a:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

  .salary-page {
    padding: 10px 0 56px;
  }

  .hero {
    margin-bottom: 24px;
  }

  .hero-card {
    position: relative;
    overflow: hidden;
    padding: 36px 36px 34px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(53, 89, 168, 0.98), rgba(88, 125, 206, 0.94));
    color: #fff;
    box-shadow: 0 24px 54px rgba(53, 89, 168, 0.24);
  }

  .hero-card::after {
    content: "";
    position: absolute;
    inset: auto -80px -80px auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 14px;
  }

  .hero-card h1 {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.18;
    letter-spacing: -0.03em;
    color: #fff;
  }

  .lead {
    margin: 0;
    max-width: 760px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.04rem;
    line-height: 1.7;
  }

  .hero-actions {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .section { margin-top: 28px; }

  .section-title {
    margin: 0 0 16px;
    font-size: 1.7rem;
    letter-spacing: -0.03em;
    color: var(--salary-text);
  }

  .salary-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
    gap: 22px;
    align-items: start;
  }

  .salary-subgrid {
    display: grid;
    gap: 22px;
  }

  .card {
    background: var(--salary-surface);
    border: 1px solid var(--salary-border);
    border-radius: var(--salary-radius-xl);
    box-shadow: var(--salary-shadow-soft);
  }

  .salary-panel {
    padding: 0;
    overflow: hidden;
  }

  .salary-panel-header {
    padding: 24px 26px 14px;
    border-bottom: 1px solid var(--salary-border);
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  }

  .salary-panel-body {
    padding: 24px 26px 26px;
  }

  .salary-card-title {
    margin: 0 0 10px;
    font-size: 1.28rem;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--salary-text);
  }

  .salary-card-desc,
  .salary-note,
  .salary-help,
  .muted {
    color: var(--salary-muted);
    line-height: 1.7;
  }

  .salary-card-desc {
    margin: 0;
    font-size: 0.97rem;
  }

  .salary-form-section + .salary-form-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--salary-border);
  }

  .salary-section-label {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 900;
    color: var(--salary-text);
    letter-spacing: -0.02em;
  }

  .salary-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 800;
    color: var(--salary-text);
    font-size: 0.95rem;
    letter-spacing: -0.01em;
  }

  .salary-grid-2,
  .salary-grid-3 {
    display: grid;
    gap: 14px;
  }

  .salary-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .salary-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .salary-form input,
  .salary-form select,
  .salary-form textarea {
    width: 100%;
    min-height: 50px;
    border: 1px solid var(--salary-border);
    border-radius: 14px;
    padding: 12px 14px;
    box-sizing: border-box;
    font: inherit;
    background: #fff;
    color: var(--salary-text);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
  }

  .salary-form textarea {
    min-height: 120px;
    resize: vertical;
  }

  .salary-form input:focus,
  .salary-form select:focus,
  .salary-form textarea:focus {
    outline: none;
    border-color: #bfd1f8;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(53, 89, 168, 0.12);
  }

  .choice-pills,
  .inline-checks,
  #allowanceChecks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .pill,
  .check-chip,
  #allowanceChecks label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--salary-border);
    background: var(--salary-surface-soft);
    box-sizing: border-box;
    color: var(--salary-text);
    font-weight: 700;
    margin: 0;
    cursor: pointer;
    transition: 0.18s ease;
  }

  .pill:hover,
  .check-chip:hover,
  #allowanceChecks label:hover {
    background: #f2f7ff;
    border-color: #c8d8f7;
  }

  .pill input,
  .check-chip input,
  #allowanceChecks input {
    width: auto;
    min-height: auto;
    margin: 0;
    accent-color: var(--salary-accent);
    box-shadow: none;
  }

  .salary-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
  }

  .salary-actions > * {
    flex: 1 1 220px;
  }

  .btn-primary,
  #btnCalc {
    appearance: none;
    border: none;
    background: linear-gradient(135deg, var(--salary-accent), #4f72c8);
    color: #fff;
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 14px 26px rgba(53, 89, 168, 0.18);
    transition: 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-primary:hover,
  #btnCalc:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--salary-accent-dark), #4567ba);
    box-shadow: 0 16px 32px rgba(53, 89, 168, 0.24);
  }

  .btn-secondary,
  #btnDownload {
    appearance: none;
    border: 1px solid #cfe0ff;
    background: #fff;
    color: var(--salary-accent);
    min-height: 50px;
    padding: 12px 18px;
    border-radius: 999px;
    font: inherit;
    font-weight: 800;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: 0.18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .btn-secondary:hover,
  #btnDownload:hover {
    background: #f4f8ff;
    border-color: #bdd2ff;
    transform: translateY(-1px);
  }

  .salary-status-wrap { margin-top: 14px; }

  #error {
    margin-top: 6px;
    color: #cf3131;
    font-weight: 700;
  }

  .result-summary {
    display: grid;
    gap: 14px;
  }

  .result-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .result-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--salary-accent-soft);
    color: var(--salary-accent-dark);
    font-weight: 900;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
  }

#kpiBoxes {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid var(--salary-border);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.kpi-card--blue {
  background: linear-gradient(135deg, #3559a8, #4f72c8);
  border: none;
  color: #fff;
  box-shadow: 0 14px 28px rgba(53, 89, 168, 0.22);
}

.kpi-card--green {
  background: linear-gradient(135deg, #2f855a, #38a169);
  border: none;
  color: #fff;
  box-shadow: 0 14px 28px rgba(47, 133, 90, 0.2);
}

.kpi-card--gold {
  background: linear-gradient(135deg, #b7791f, #d69e2e);
  border: none;
  color: #fff;
  box-shadow: 0 14px 28px rgba(183, 121, 31, 0.2);
}

.kpi-title {
  font-size: 0.92rem;
  font-weight: 800;
  opacity: 0.92;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.kpi-value {
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

@media (max-width: 720px) {
  #kpiBoxes {
    grid-template-columns: 1fr;
  }
}
  .result-card-box {
    border: 1px solid var(--salary-border);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    padding: 18px;
  }

  .result-card-box + .result-card-box {
    margin-top: 14px;
  }

  .table-wrap {
    margin-top: 10px;
    overflow-x: auto;
    border: 1px solid var(--salary-border);
    border-radius: 14px;
    background: #fff;
  }

  #monthlyTable,
  #yearlyTable,
  #deductionTable,
  #taxTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 280px;
  }

  #monthlyTable th,
  #monthlyTable td,
  #yearlyTable th,
  #yearlyTable td,
  #deductionTable th,
  #deductionTable td,
  #taxTable th,
  #taxTable td {
    padding: 12px 14px;
    border-bottom: 1px solid #edf2f8;
    text-align: left;
    font-size: 0.96rem;
    color: var(--salary-text);
  }

  #monthlyTable th,
  #yearlyTable th,
  #deductionTable th,
  #taxTable th {
    background: #f8fbff;
    font-weight: 900;
  }

  #monthlyTable tr:last-child td,
  #yearlyTable tr:last-child td,
  #deductionTable tr:last-child td,
  #taxTable tr:last-child td {
    border-bottom: none;
  }

  .notice-box {
    margin-top: 12px;
    padding: 16px;
    border: 1px solid var(--salary-border);
    border-radius: 16px;
    background: var(--salary-surface-soft);
  }

  .notice-box-title {
    margin: 0 0 8px;
    font-weight: 900;
    color: var(--salary-text);
  }

  .quick-links {
    display: grid;
    gap: 12px;
  }

  .quick-link-card {
    display: block;
    padding: 17px 18px;
    border-radius: 18px;
    border: 1px solid var(--salary-border);
    background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%);
    text-decoration: none;
    transition: 0.18s ease;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.03);
  }

  .quick-link-card:hover {
    transform: translateY(-1px);
    background: #fbfdff;
    box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    border-color: #cfdcf2;
  }

  .quick-link-card h3 {
    margin: 0 0 6px;
    color: var(--salary-text);
    font-size: 1rem;
    letter-spacing: -0.01em;
  }

  .quick-link-card p {
    margin: 0;
    color: var(--salary-muted);
    font-size: 0.94rem;
    line-height: 1.6;
  }

  .list-clean {
    margin: 0;
    padding-left: 18px;
    color: var(--salary-text);
  }

  .list-clean li + li {
    margin-top: 8px;
  }

  .site-footer {
    margin-top: 48px;
    border-top: 1px solid rgba(223, 231, 243, 0.9);
    background: rgba(255, 255, 255, 0.78);
  }

  .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-top: 22px;
    padding-bottom: 18px;
    color: var(--salary-muted);
    font-size: 0.95rem;
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .footer-links a {
    color: var(--salary-muted);
    text-decoration: none;
    font-weight: 700;
  }

  .footer-links a:hover {
    color: var(--salary-accent-dark);
  }

  @media (max-width: 1024px) {
    .salary-layout {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 720px) {
    .container {
      width: min(var(--salary-max), calc(100% - 20px));
    }

    .header-inner,
    .footer-inner {
      flex-direction: column;
      align-items: flex-start;
    }

    .header-inner {
      padding-top: 6px;
      padding-bottom: 6px;
    }

    .hero-card {
      padding: 26px 20px 24px;
      border-radius: 24px;
    }

    .salary-panel-header,
    .salary-panel-body,
    .card {
      padding-left: 18px;
      padding-right: 18px;
    }

    .salary-panel {
      padding: 0;
    }

    .salary-grid-2,
    .salary-grid-3 {
      grid-template-columns: 1fr;
    }

    .result-top {
      flex-direction: column;
    }

    .salary-actions > * {
      flex-basis: 100%;
    }

    .site-header nav {
      width: 100%;
    }

    .site-header nav a {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
</style>
</head>

<body>

<!-- ✅ Welmoa 공통 헤더 (완성본) -->
<header class="site-header">
  <div class="container header-inner">
    
    <!-- 로고 -->
    <a class="brand" href="https://tools.welmoa.kr/">
      Welmoa
    </a>

    <!-- 네비게이션 -->
    <nav>
      <a href="https://tools.welmoa.kr/">홈</a>
      <a href="https://tools.welmoa.kr/tools/">도구</a>
      <a href="https://tools.welmoa.kr/blog/">콘텐츠</a>
      <a href="https://tools.welmoa.kr/about/">소개</a>
      <a href="https://tools.welmoa.kr/privacy/">개인정보처리방침</a>
      <a href="https://tools.welmoa.kr/terms/">이용약관</a>
    </nav>

  </div>
</header>

<!-- 이후 기존 salary 본문 그대로 유지 -->
<main class="container salary-page">

  <main class="container salary-page">
    <section class="hero">
      <div class="hero-card">
        <div class="badge">급여 계산 도구</div>
        <h1>사회복지시설 종사자 급여 계산기</h1>
        <p class="lead">
          기본급, 수당, 4대보험, 공제 구조를 이해하고 참고용 실수령액을 빠르게 확인할 수 있습니다.
        </p>
        <div class="hero-actions">
          <a class="btn-primary" href="#salary-calculator">급여 계산하기</a>
          <a class="btn-secondary" href="https://tools.welmoa.kr/blog/salary-guide.html">급여 가이드 보기</a>
        </div>
      </div>
    </section>

    <section class="section" id="salary-calculator">
      <h2 class="section-title">급여 계산</h2>

      <div class="salary-layout">
        <div class="card salary-panel salary-form">
          <div class="salary-panel-header">
            <h3 class="salary-card-title">기본 정보 입력</h3>
            <p class="salary-card-desc">
              결과값과 세부 내역을 오른쪽 카드에서 바로 확인할 수 있습니다.
            </p>
          </div>

          <div class="salary-panel-body" id="inputCard">
            <div class="salary-form-section">
              <div class="salary-section-label">기본 정보</div>
              <div class="salary-grid-2">
                <div>
                  <label for="year">기준년도</label>
                  <select id="year"></select>
                </div>
                <div>
                  <label for="facilityType">근무시설 유형</label>
                  <select id="facilityType"></select>
                </div>
                <div>
                  <label for="grade">직급</label>
                  <select id="grade"></select>
                </div>
                <div>
                  <label for="step">호봉</label>
                  <select id="step"></select>
                </div>
              </div>
            </div>

            <div class="salary-form-section">
              <div class="salary-section-label">비과세(선택)</div>
              <div class="salary-grid-2">
                <div>
                  <label for="nonTaxableMonthly">월 비과세 금액(식대 등)</label>
                  <input id="nonTaxableMonthly" type="number" min="0" value="0" />
                </div>
              </div>
              <p class="salary-help">식대 등 비과세 항목이 있다면 월 기준 금액을 입력해 주세요.</p>
            </div>

            <div class="salary-form-section">
              <div class="salary-section-label">가족수당 입력</div>
              <div class="choice-pills" style="margin-bottom: 12px;">
                <label class="pill" for="spouse">
                  <input id="spouse" type="checkbox" />
                  <span>배우자</span>
                </label>
              </div>

              <div class="salary-grid-2">
                <div>
                  <label for="children">자녀 수</label>
                  <input id="children" type="number" min="0" value="0" />
                </div>
                <div>
                  <label for="otherDependents">기타 부양가족(최대 4)</label>
                  <input id="otherDependents" type="number" min="0" max="4" value="0" />
                </div>
              </div>
            </div>

            <div class="salary-form-section">
              <div class="salary-section-label">시간외수당 입력</div>
              <div class="salary-grid-2">
                <div>
                  <label for="overtimeHours">월 시간외(시간)</label>
                  <input id="overtimeHours" type="number" min="0" value="0" />
                </div>
                <div>
                  <label for="overtimeKind">가산 종류</label>
                  <select id="overtimeKind">
                    <option value="1.5">연장/야간 (1.5배)</option>
                    <option value="1.5">휴일 8시간 이내 (1.5배)</option>
                    <option value="2.0">휴일 8시간 초과 (2.0배)</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="salary-form-section">
              <div class="salary-section-label">수당 및 공제 옵션</div>
              <label style="margin-bottom: 8px;">수당 포함</label>
              <div id="allowanceChecks"></div>

              <div class="inline-checks" style="margin-top: 14px;">
                <label class="check-chip" for="includeDeductions">
                  <input id="includeDeductions" type="checkbox" />
                  <span>4대보험 공제(추정) 포함</span>
                </label>
                <label class="check-chip" for="includeTax">
                  <input id="includeTax" type="checkbox" />
                  <span>세금(간이세액표) 포함</span>
                </label>
              </div>

              <p class="salary-help">※ 국세청의 근로소득 간이세액표를 참고합니다.</p>

              <div class="salary-actions">
                <button id="btnCalc" type="button">계산하기</button>
                <button id="btnDownload" type="button">엑셀(CSV) 다운로드</button>
              </div>

              <div class="salary-status-wrap">
                <div id="status" class="muted"></div>
                <div id="error" class="error"></div>
                <p class="salary-help">※ 계산이 실행되지 않거나 로딩이 지연될 경우, 잠시 후 다시 시도해 주세요.</p>
              </div>
            </div>
          </div>
        </div>

        <div class="salary-subgrid">
          <div class="card salary-panel">
            <div class="salary-panel-header">
              <h3 class="salary-card-title">계산 결과</h3>
              <p class="salary-card-desc">왼쪽 입력 항목을 설정한 뒤 <strong>계산하기</strong>를 누르면 예상 결과와 내역이 표시됩니다.</p>
            </div>

            <div class="salary-panel-body">
              <div id="resultCard" style="display:none;">
                <div class="result-summary">
                  <div class="result-top">
                    <div>
                      <div class="result-badge">결과</div>
                      <div class="muted" id="resultMeta" style="margin-top: 8px;"></div>
                    </div>
                  </div>

                  <div id="kpiBoxes"></div>

                  <div class="result-card-box">
                    <div class="salary-section-label">월 수당(내역)</div>
                    <div class="table-wrap">
                      <table id="monthlyTable"></table>
                    </div>
                  </div>

                  <div class="result-card-box">
                    <div class="salary-section-label">연 수당(내역)</div>
                    <div class="table-wrap">
                      <table id="yearlyTable"></table>
                    </div>
                  </div>

                  <div id="deductionCard" class="result-card-box" style="display:none;">
                    <div class="salary-section-label">4대보험 공제(추정) 내역</div>
                    <div class="table-wrap">
                      <table id="deductionTable"></table>
                    </div>
                    <p class="salary-help">※ 요율/상·하한/반올림은 설정값에 따라 일부 오차가 발생할 수 있습니다.</p>
                  </div>

                  <div id="taxCard" class="result-card-box" style="display:none;">
                    <div class="salary-section-label">세금(근로소득간이세액표 기반) 내역</div>
                    <div class="table-wrap">
                      <table id="taxTable"></table>
                    </div>
                    <p class="salary-help">※ 근로소득간이세액표 기준 추정값입니다.</p>
                  </div>

                  <div class="notice-box">
                    <div class="notice-box-title">안내</div>
                    <div class="muted" id="noticeText"></div>
                  </div>
                </div>
              </div>

              <div id="resultEmpty" class="salary-note">
                aa
              </div>
            </div>
          </div>

          <div class="card" style="padding: 24px 26px;">
            <h3 class="salary-card-title">처음 방문하셨나요?</h3>
            <p class="salary-note">
              먼저 급여 구조와 공제 흐름을 이해한 뒤 계산기를 활용하면 결과를 더 쉽게 해석할 수 있습니다.
            </p>

            <div class="quick-links" style="margin-top: 14px;">
              <a class="quick-link-card" href="https://tools.welmoa.kr/salary/guide/pay-structure.html">
                <h3>급여 구조 이해하기</h3>
                <p>기본급, 수당, 공제, 실수령액 흐름 정리</p>
              </a>

              <a class="quick-link-card" href="https://tools.welmoa.kr/salary/guide/insurance-tax.html">
                <h3>4대보험 이해하기</h3>
                <p>공제 구조와 실무 체크 포인트 확인</p>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <h2 class="section-title">안내 및 체크 포인트</h2>

      <div class="salary-layout">
        <div class="card" style="padding: 24px 26px;">
          <h3 class="salary-card-title">이 도구에서 제공하는 정보</h3>
          <ul class="list-clean">
            <li>기본급과 각종 수당 구조를 참고용으로 정리합니다.</li>
            <li>공제 포함 여부에 따라 예상 실수령 흐름을 확인할 수 있습니다.</li>
            <li>월/연 단위 수당 및 공제 내역을 나누어 볼 수 있습니다.</li>
          </ul>

          <h3 class="salary-card-title" style="margin-top: 24px;">자주 생기는 혼동 포인트</h3>
          <ul class="list-clean">
            <li>기본급과 실수령액은 다를 수 있습니다.</li>
            <li>수당 포함 여부에 따라 결과가 달라질 수 있습니다.</li>
            <li>실제 지급액은 기관 기준과 개인별 조건에 따라 차이가 날 수 있습니다.</li>
          </ul>
        </div>

        <div class="card" style="padding: 24px 26px;">
          <h3 class="salary-card-title">바로가기</h3>

          <div class="quick-links">
            <a class="quick-link-card" href="https://tools.welmoa.kr/blog/salary-guide.html">
              <h3>급여 계산 방법 총정리</h3>
              <p>기본급, 수당, 공제 구조를 한 번에 이해하기</p>
            </a>

            <a class="quick-link-card" href="https://tools.welmoa.kr/blog/take-home-pay.html">
              <h3>실수령액 계산 방법</h3>
              <p>총지급액과 공제 흐름 쉽게 이해하기</p>
            </a>

            <a class="quick-link-card" href="https://tools.welmoa.kr/blog/family-allowance.html">
              <h3>가족수당 지급 기준</h3>
              <p>실무에서 자주 확인하는 수당 기준 정리</p>
            </a>
          </div>

          <h3 class="salary-card-title" style="margin-top: 24px;">면책</h3>
          <p class="salary-note">
            본 도구는 급여 구조 이해와 참고용 계산을 위한 페이지입니다.
            실제 지급액은 기관 기준, 지자체 추가수당, 과세 여부, 개인별 공제 조건 등에 따라 달라질 수 있습니다.
          </p>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-inner">
      <div>© Welmoa. 사회복지 실무자를 위한 도구와 정보 플랫폼</div>
      <div class="footer-links">
        <a href="https://tools.welmoa.kr/about/">소개</a>
        <a href="https://tools.welmoa.kr/privacy/">개인정보처리방침</a>
        <a href="https://tools.welmoa.kr/terms/">이용약관</a>
        <a href="https://tools.welmoa.kr/blog/">콘텐츠 모음</a>
      </div>
    </div>
    <div class="container" style="padding-bottom:24px; color:var(--salary-muted); font-size:13px;">
      본 사이트는 사회복지 실무 정보 제공을 목적으로 운영됩니다.
    </div>
  </footer>

  <script src="./app.js"></script>
  <script>
    (function () {
      const resultCard = document.getElementById("resultCard");
      const resultEmpty = document.getElementById("resultEmpty");
      if (!resultCard || !resultEmpty) return;

      const observer = new MutationObserver(() => {
        const isVisible = getComputedStyle(resultCard).display !== "none";
        resultEmpty.style.display = isVisible ? "none" : "block";
      });

      observer.observe(resultCard, { attributes: true, attributeFilter: ["style", "class"] });

      const isVisible = getComputedStyle(resultCard).display !== "none";
      resultEmpty.style.display = isVisible ? "none" : "block";
    })();
  </script>
</body>
</html>
