inneratb/frontend/pages/privacy.vue

<script setup lang="ts">
// 개인정보처리방침 — 채용·커피챗 과정의 개인정보 처리 안내 문서
useHead({ title: '개인정보처리방침 | innertab' })
</script>

<template>
  <div>
    <AppHeader variant="back" />

    <div class="doc-wrap">
      <div class="doc-head">
        <p v-reveal class="doc-eyebrow">Privacy Policy</p>
        <h1 v-reveal="{ delay: 80 }">개인정보처리방침</h1>
        <p v-reveal="{ delay: 160 }" class="meta">
          본 방침은 이너탭(innertab) 채용 홈페이지를 통한 입사지원·채용 전형 및 커피챗(비공식 면담)
          과정에서의 개인정보 처리에 적용됩니다.
        </p>
      </div>

      <div v-reveal class="intro">
        <p>
          이너탭(이하 ‘회사’)은 「개인정보 보호법」 등 관련 법령을 준수하며, 채용 과정 및
          커피챗(채용 전 비공식 면담)에서 수집하는 지원자·신청자의 개인정보를 안전하게 보호하기 위해
          다음과 같은 개인정보처리방침을 수립·공개합니다. 본 방침은 채용 및 커피챗 목적에 한정하여
          적용되며, 그 외 서비스 이용에 대한 처리방침과는 별도로 운영됩니다.
        </p>
      </div>

      <div class="doc">
        <section v-reveal class="article">
          <h2><span class="no">01</span><span>수집하는 개인정보의 항목</span></h2>
          <div class="body">
            <p>회사는 채용 전형 진행을 위하여 지원자가 직접 제출하거나 전형 과정에서 생성되는 다음의 개인정보를 수집합니다.</p>
            <p class="sub">필수 항목</p>
            <ul>
              <li><b>인적사항</b> — 성명, 생년월일, 연락처(휴대전화번호), 이메일 주소</li>
              <li><b>학력 및 경력사항</b> — 최종 학력, 전공, 경력, 자격증, 어학 능력</li>
              <li><b>지원서류</b> — 이력서, 자기소개서, 포트폴리오 등 지원자가 제출한 자료</li>
            </ul>
            <p class="sub">선택 항목</p>
            <ul>
              <li>증명사진, 희망 근무지 등 지원자가 자발적으로 기재한 정보</li>
            </ul>
            <p class="sub">자동 생성·수집 항목</p>
            <ul>
              <li>지원 일시, 전형 진행 기록, 접속 로그 등 채용 관리에 필요한 정보</li>
            </ul>
            <p class="sub">커피챗 신청 시 수집 항목</p>
            <ul>
              <li><b>신청자 정보</b> — 성명, 이메일(필수), 연락처(선택)</li>
              <li><b>면담 관련 정보</b> — 관심 직무·분야, 현재 소속·직무(선택), 희망 일정, 사전 질문 등 신청자가 기재한 내용</li>
            </ul>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">02</span><span>개인정보의 수집 및 이용 목적</span></h2>
          <div class="body">
            <ul>
              <li>지원자 본인 확인 및 채용 전형(서류·면접 등) 진행</li>
              <li>전형 결과 안내 및 합격자에 대한 입사 절차 진행</li>
              <li>커피챗(비공식 면담) 신청 접수, 일정 조율 및 면담 진행</li>
              <li>채용·커피챗 관련 문의 응대 및 원활한 의사소통</li>
              <li>신청자 동의 시, 향후 채용 기회 제공을 위한 인재풀(Talent Pool) 운영</li>
            </ul>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">03</span><span>개인정보의 보유 및 이용 기간</span></h2>
          <div class="body">
            <p>회사는 원칙적으로 개인정보의 수집·이용 목적이 달성되면 지체 없이 해당 정보를 파기합니다. 다만 다음의 경우에는 명시한 기간 동안 보관합니다.</p>
            <div class="info-table">
              <div class="row"><div class="k">합격자</div><div class="v">입사 후 인사기록으로 전환되며, 별도의 인사 관련 규정 및 법령에 따라 보관</div></div>
              <div class="row"><div class="k">불합격자</div><div class="v">전형 종료 후 즉시 파기 (단, 분쟁 대응 등을 위해 필요한 경우 관련 법령이 정한 기간 동안 보관)</div></div>
              <div class="row"><div class="k">인재풀 동의자</div><div class="v">동의일로부터 1년간 보관 후 파기 (동의 철회 시 즉시 파기)</div></div>
              <div class="row"><div class="k">커피챗 신청자</div><div class="v">면담 종료 후 즉시 파기 (인재풀 보관에 동의한 경우 동의 기간 동안 보관 후 파기)</div></div>
            </div>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">04</span><span>개인정보의 제3자 제공</span></h2>
          <div class="body">
            <p>회사는 지원자의 개인정보를 본 방침에서 명시한 범위를 넘어 외부에 제공하지 않습니다. 다만 지원자가 사전에 동의하였거나, 법령에 의해 요구되는 경우에 한하여 제공할 수 있습니다.</p>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">05</span><span>개인정보 처리의 위탁</span></h2>
          <div class="body">
            <p>회사는 원활한 채용 업무 처리를 위해 채용 플랫폼·클라우드 인프라 등 일부 업무를 외부 전문업체에 위탁할 수 있습니다. 위탁 시에는 관련 법령에 따라 개인정보가 안전하게 관리될 수 있도록 필요한 사항을 계약을 통해 규정합니다.</p>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">06</span><span>정보주체의 권리·의무 및 행사 방법</span></h2>
          <div class="body">
            <p>지원자는 언제든지 자신의 개인정보에 대하여 다음의 권리를 행사할 수 있습니다.</p>
            <ul>
              <li>개인정보 열람·정정·삭제 요구</li>
              <li>개인정보 처리 정지 요구</li>
              <li>개인정보 수집·이용 동의의 철회</li>
            </ul>
            <p>권리 행사는 아래 개인정보 보호책임자에게 서면, 이메일 등을 통해 요청할 수 있으며, 회사는 지체 없이 필요한 조치를 취합니다.</p>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">07</span><span>개인정보의 파기 절차 및 방법</span></h2>
          <div class="body">
            <ul>
              <li><b>파기 절차</b> — 보유 기간이 경과하거나 처리 목적이 달성된 개인정보는 내부 방침에 따라 안전하게 파기합니다.</li>
              <li><b>파기 방법</b> — 전자적 파일은 복구·재생이 불가능한 방법으로 영구 삭제하며, 출력물 등은 분쇄 또는 소각합니다.</li>
            </ul>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">08</span><span>개인정보의 안전성 확보 조치</span></h2>
          <div class="body">
            <ul>
              <li>개인정보 접근 권한의 최소화 및 접근 통제</li>
              <li>개인정보가 포함된 자료의 암호화 및 안전한 저장</li>
              <li>개인정보 처리 담당자에 대한 정기적인 교육 시행</li>
            </ul>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">09</span><span>개인정보 보호책임자</span></h2>
          <div class="body">
            <p>회사는 개인정보 처리에 관한 업무를 총괄하고, 지원자의 문의·불만 처리 및 피해 구제를 위하여 개인정보 보호책임자를 지정하고 있습니다.</p>
            <div class="contact-card">
              <p class="role">개인정보 보호책임자</p>
              <p>이메일 <span>people@innertab.co.kr</span></p>
              <p>담당 부서 <span>People 팀</span></p>
            </div>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">10</span><span>정보주체의 권익침해 구제 방법</span></h2>
          <div class="body">
            <p>정보주체는 개인정보 침해로 인한 상담 및 피해 구제를 위하여 아래 기관에 분쟁 해결, 상담 등을 신청할 수 있습니다. 회사의 자체적인 처리에 만족하지 못하시는 경우 아래 기관에 도움을 요청하실 수 있습니다.</p>
            <ul>
              <li><b>개인정보분쟁조정위원회</b> — 1833-6972 (www.kopico.go.kr)</li>
              <li><b>개인정보침해신고센터</b> — (국번 없이) 118 (privacy.kisa.or.kr)</li>
              <li><b>대검찰청 사이버수사과</b> — (국번 없이) 1301 (www.spo.go.kr)</li>
              <li><b>경찰청 사이버수사국</b> — (국번 없이) 182 (ecrm.cyber.go.kr)</li>
            </ul>
          </div>
        </section>

        <section v-reveal class="article">
          <h2><span class="no">11</span><span>방침의 변경</span></h2>
          <div class="body">
            <p>본 개인정보처리방침은 관련 법령 및 회사 내부 정책의 변경에 따라 수정될 수 있으며, 변경 시 본 페이지를 통해 그 내용을 공지합니다.</p>
            <p>· 공고일자 : 2026년 1월 1일<br >· 시행일자 : 2026년 1월 1일</p>
          </div>
        </section>
      </div>
    </div>

    <AppFooter />
  </div>
</template>

<style scoped>
.doc-wrap {
  max-width: var(--maxw); /* 사이트 공통 폭(1200px)과 동일 */
  margin: 0 auto;
  padding-inline: var(--pad);
}

.doc-head {
  padding: clamp(3.5rem, 8vw, 6.25rem) 0 clamp(2rem, 4vw, 3rem); /* 56~100px / 32~48px */
  border-bottom: 0.0625rem solid var(--line);
}

.doc-eyebrow {
  font-family: var(--font-display);
  font-size: 1.0625rem; /* 17px */
  letter-spacing: 0.1em;
  color: var(--label);
  font-weight: 700;
}

.doc-head h1 {
  font-size: clamp(1.875rem, 5vw, 2.875rem); /* 30~46px */
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 0.875rem; /* 14px */
}

.doc-head .meta {
  font-size: 0.875rem; /* 14px */
  color: var(--ink-soft);
  margin-top: 1.125rem; /* 18px */
}

.intro {
  padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 0.5rem; /* 36~56px / 8px */
}

.intro p {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink-soft);
  line-height: 1.85;
}

.doc {
  padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(4.5rem, 10vw, 7.5rem); /* 20~32px / 72~120px */
}

.article {
  padding: clamp(1.75rem, 3.4vw, 2.5rem) 0; /* 28~40px */
  border-top: 0.0625rem solid var(--line);
}

.article:first-child {
  border-top: 0;
}

.article > h2 {
  font-size: clamp(1.125rem, 1.9vw, 1.4375rem); /* 18~23px */
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.4;
  display: flex;
  gap: 0.75rem; /* 12px */
  align-items: baseline;
  word-break: keep-all;
}

.article > h2 .no {
  font-family: var(--font-display);
  color: var(--label);
  font-weight: 700;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.article .body {
  margin-top: 1.125rem; /* 18px */
  padding-left: clamp(0rem, 3.4vw, 2.5rem); /* 0~40px */
}

.article p {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink-soft);
  line-height: 1.85;
}

.article p + p {
  margin-top: 0.75rem; /* 12px */
}

.article ul {
  list-style: none;
  margin-top: 0.75rem; /* 12px */
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

.article ul li {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink-soft);
  line-height: 1.7;
  padding-left: 1.125rem; /* 18px */
  position: relative;
}

.article ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.3125rem; /* 5px */
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--label);
}

.article ul li b {
  color: var(--ink);
  font-weight: 700;
}

.article .sub {
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  color: var(--ink);
  margin-top: 1.375rem; /* 22px */
}

/* 정보 테이블 */
.info-table {
  margin-top: 1rem; /* 16px */
  border: 0.0625rem solid var(--line);
  border-radius: 0.75rem; /* 12px */
  overflow: hidden;
}

.info-table .row {
  display: grid;
  grid-template-columns: 12.5rem 1fr; /* 200px */
  border-top: 0.0625rem solid var(--line);
}

.info-table .row:first-child {
  border-top: 0;
}

.info-table .k {
  background: #f7f8fa;
  padding: 1rem 1.25rem; /* 16px 20px */
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  color: var(--ink);
}

.info-table .v {
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

.contact-card {
  margin-top: 1rem; /* 16px */
  background: #f7f8fa;
  border-radius: 0.875rem; /* 14px */
  padding: clamp(1.375rem, 2.6vw, 1.875rem); /* 22~30px */
}

.contact-card .role {
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  color: var(--label);
  letter-spacing: 0.02em;
}

.contact-card p {
  font-size: 0.9375rem; /* 15px */
  color: var(--ink);
  line-height: 1.9;
  margin-top: 0.5rem; /* 8px */
}

.contact-card p span {
  color: var(--ink-soft);
}

@media (max-width: 38.75rem) {
  /* 620px */
  .info-table .row {
    grid-template-columns: 1fr;
  }

  .info-table .k {
    border-bottom: 0.0625rem solid var(--line);
  }

  .article .body {
    padding-left: 0;
  }
}
</style>