/* 페이플레이트 홈페이지 · 범정부 UI/UX 디자인 시스템 기반 토큰 */
:root {
  --primary-5: #EFF5FF;
  --primary-10: #D3E1FB;
  --primary-20: #A7C4F7;
  --primary-50: #246BEB;
  --primary-60: #1D56BC;
  --primary-70: #16408D;
  --navy-50: #003675;
  --navy-70: #002046;
  --gray-5: #f8f8f8;
  --gray-20: #e4e4e4;
  --gray-40: #c6c6c6;
  --gray-60: #717171;
  --gray-70: #555555;
  --gray-80: #2d2d2d;
  --gray-90: #1d1d1d;
  --danger: #E71825;
  --danger-bg: #FDF2F3;
  --radius-md: 8px;
  --radius-lg: 12px;
  --header-h: 72px;
  --gutter: 56px;
  --section-y: 112px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  font-family: "Pretendard Variable", "Pretendard", -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  color: var(--gray-90);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, p, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; }
a { color: var(--primary-50); text-decoration: none; }
a:hover { color: var(--primary-60); }
input, select, textarea, button { font-family: inherit; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: var(--header-h); }

:focus-visible { outline: 2px solid var(--primary-50); outline-offset: 2px; }
.site-header :focus-visible,
.hero :focus-visible,
.site-footer :focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 100;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--navy-70);
  font-weight: 700;
}
.skip-link:focus { top: 12px; }

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section > .container {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}

.eyebrow { font-size: 15px; font-weight: 600; color: var(--primary-50); }
.h2 {
  font-size: clamp(28px, 2.96875vw, 38px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}
.section-desc { font-size: 17px; line-height: 1.7; color: var(--gray-70); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy-70);
}
.site-header .container {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo img { height: 26px; width: auto; }
.site-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
.site-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--primary-10);
}
.site-nav__link:hover { color: #fff; }
.site-nav__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--primary-10);
}
.site-nav__home:hover { color: #fff; }
.site-nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--primary-50);
  color: #fff;
  font-weight: 600;
}
.site-nav__cta:hover { background: var(--primary-60); color: #fff; }

/* ---------- Hero ---------- */
.hero { background: var(--navy-70); }
.hero .container {
  padding-top: 96px;
  padding-bottom: 112px;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero .eyebrow { color: var(--primary-20); }
.hero__title {
  font-size: clamp(36px, 4.375vw, 56px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero__lead {
  font-size: 19px;
  line-height: 1.7;
  color: var(--primary-10);
  text-wrap: pretty;
}
.hero__cta {
  align-self: flex-start;
  padding: 16px 28px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--navy-70);
  font-size: 16px;
  font-weight: 700;
}
.hero__cta:hover { background: var(--primary-5); color: var(--navy-70); }

.stack { display: flex; flex-direction: column; gap: 12px; }
.stack__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 4px 16px;
  padding: 22px 26px;
  border-radius: var(--radius-lg);
  background: var(--primary-70);
  color: #fff;
}
.stack__row--accent { background: var(--primary-50); }
.stack__title { font-size: 17px; font-weight: 600; }
.stack__meta { font-size: 14px; color: var(--primary-20); }
.stack__row--accent .stack__meta { color: var(--primary-5); }

/* ---------- 주요 기능 ---------- */
.features .container {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 64px;
}
.features__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: flex-start;
}
.feature {
  display: grid;
  grid-template-columns: 64px 220px minmax(0, 1fr);
  gap: 16px;
  padding: 28px 0;
  border-top: 1px solid var(--gray-20);
}
.feature:first-child { border-top-color: var(--gray-90); }
.feature:last-child { border-bottom: 1px solid var(--gray-20); }
.feature__num { font-size: 16px; font-weight: 700; color: var(--primary-50); }
.feature__title { font-size: 20px; font-weight: 700; }
.feature__desc { font-size: 16px; line-height: 1.65; color: var(--gray-70); }

/* ---------- 회사 소개 ---------- */
.about { background: var(--gray-5); }
.about .container { display: flex; flex-direction: column; gap: 48px; }
.about__vision {
  max-width: 960px;
  font-size: clamp(26px, 3.125vw, 40px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.about__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--gray-40);
}
.about__item { display: flex; flex-direction: column; gap: 10px; }
.about__label { font-size: 15px; font-weight: 700; }
.about__text { font-size: 17px; line-height: 1.7; color: var(--gray-70); }

/* ---------- 문의하기 ---------- */
.contact .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.contact__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
}
.contact__head .h2,
.contact__head .section-desc { line-height: normal; }

.form {
  width: 100%;
  max-width: 760px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 40px;
  border-radius: var(--radius-lg);
  background: var(--gray-5);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
}
.field--full { grid-column: 1 / -1; }
.input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--gray-40);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--gray-90);
  font-size: 16px;
  font-weight: 400;
}
select.input { padding: 0 12px; }
textarea.input { height: auto; padding: 14px 16px; resize: vertical; }
.input:focus { border-color: var(--primary-50); outline: 1px solid var(--primary-50); outline-offset: 0; }

.consent {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--gray-20);
  border-radius: var(--radius-md);
  background: #fff;
}
.consent__check {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.consent__check input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--navy-70);
}
.consent__table {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 6px 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-70);
}
.consent__table dt { font-weight: 600; color: var(--gray-80); }
.consent__note { font-size: 13px; line-height: 1.6; color: var(--gray-60); }

.form__submit {
  grid-column: 1 / -1;
  height: 56px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--navy-70);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.form__submit:hover:not(:disabled) { background: var(--navy-50); }
.form__submit:disabled { background: var(--gray-40); cursor: not-allowed; }
.form__submit.is-loading:disabled { background: var(--navy-50); cursor: progress; }

.form__error {
  grid-column: 1 / -1;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 15px;
  line-height: 1.6;
}

/* 스팸 방지용 숨김 필드 */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__done {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 48px;
  border: 1px solid var(--primary-10);
  border-radius: var(--radius-lg);
  background: var(--primary-5);
  text-align: center;
}
.contact__done:focus { outline: none; }
.contact__done h3 { font-size: 22px; font-weight: 700; }
.contact__done p { font-size: 16px; color: var(--gray-70); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-70); }
.site-footer .container {
  padding-top: 48px;
  padding-bottom: 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.site-footer__brand { display: flex; flex-direction: column; gap: 20px; }
.site-footer__brand img { height: 22px; width: auto; align-self: flex-start; }
.site-footer__biz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--primary-10);
}
.site-footer__contact {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  font-size: 14px;
  color: var(--primary-10);
  white-space: nowrap;
}
.site-footer__contact a { color: inherit; }
.site-footer__contact a:hover { color: #fff; }
.site-footer__contact .site-footer__policy { color: #fff; font-weight: 700; }
.site-footer__copy { color: var(--primary-20); }

/* ---------- 개인정보처리방침 ---------- */
.page-privacy { min-height: 100vh; display: flex; flex-direction: column; }
.policy {
  flex: 1;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  padding: 80px 24px 112px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.policy__intro { display: flex; flex-direction: column; gap: 12px; }
.policy__intro h1 { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.policy__intro p { font-size: 16px; line-height: 1.7; color: var(--gray-70); }
.clause {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--gray-20);
}
.clause:first-of-type { border-top-color: var(--gray-90); }
.clause--officer { gap: 16px; }
.clause h2 { font-size: 20px; font-weight: 700; }
.clause p { font-size: 16px; line-height: 1.75; color: var(--gray-70); }
.clause .clause__note { font-size: 15px; line-height: 1.7; color: var(--gray-60); }
.officer {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px 16px;
  padding: 24px;
  border-radius: var(--radius-md);
  background: var(--gray-5);
  font-size: 16px;
  line-height: 1.6;
}
.officer dt { font-weight: 600; }
.officer dd { color: var(--gray-70); }
.site-footer--compact .container {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px 20px;
  font-size: 14px;
  color: var(--primary-10);
}

/* ---------- 768–1279px ---------- */
@media (max-width: 1279px) {
  :root { --gutter: 40px; }
  .hero .container,
  .features .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { grid-template-columns: 48px minmax(0, 1fr); row-gap: 8px; }
  .feature__num { grid-row: 1 / span 2; }
}

/* ---------- <768px ---------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-y: 72px; }

  .site-nav__link { display: none; }

  .hero .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    padding-top: 56px;
    padding-bottom: 72px;
  }
  .hero__copy { gap: 24px; }
  .hero__lead { font-size: 17px; }

  .features .container { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .feature { padding: 24px 0; }

  .about .container { gap: 32px; }
  .about__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; }

  .contact .container { gap: 40px; }
  .contact__head .h2 { line-height: 1.35; }
  .form { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
  .consent { padding: 16px; }
  .consent__check { min-height: 44px; }
  .consent__table { grid-template-columns: 76px minmax(0, 1fr); }
  .contact__done { padding: 36px 20px; }

  .site-footer .container { flex-direction: column; align-items: flex-start; }
  .site-footer__contact { align-items: flex-start; gap: 0; }
  .site-footer__contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer__copy { margin-top: 8px; }

  .policy { padding: 56px 20px 80px; }
  .policy__intro h1 { font-size: 28px; }
  .officer { grid-template-columns: 72px minmax(0, 1fr); padding: 20px; }
}

/* 터치 기기에서는 버튼 높이를 44px 이상으로 */
@media (max-width: 767px), (pointer: coarse) {
  .site-nav__cta { min-height: 44px; }
}