/* ==========================================================================
   새 디자인 - 사이트 구조와 기본 스타일(style.css)은 그대로 두고, 친구가 만든 새 시안의
   글꼴·색·첫 화면 움직임(인재 네트워크)만 입힌 것입니다.
   모서리는 지금 사이트(각짐)와 새 시안(알약 모양)의 중간으로 맞췄습니다. style.css 뒤에 불러옵니다.
   글꼴(Pretendard)은 assets/fonts 에 직접 둔 파일을 씁니다. 화면에 나오는 글자가 든 조각만 내려받습니다.
   ========================================================================== */
@import url("../assets/fonts/pretendard.css");

:root {
  /* 새 시안의 색 */
  --blue: #4A75A8;
  --blue-deep: #38638B;
  --blue-wash: #E3EEFD;
  --paper: #F5F5F5;
  --text: #242424;
  --text-2: #3D3D3D;
  --muted: #626262;
  --line: #DEDEDE;
  --line-strong: #CFCFCF;
  --input-border: #8A8A8A;   /* 흰 바탕과 대비 3.5:1 */

  /* 모서리: 지금 사이트(4~8px)와 새 시안(카드 24px, 알약 버튼)의 중간.
     큰 것일수록 조금 더 둥글게: 카드 > 버튼 > 입력칸 */
  --radius-card: 16px;
  --radius-button: 14px;
  --radius-control: 10px;
  --container: 1320px;

  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

body { line-height: 1.8; }

/* ---------- 버튼: 부드럽게 둥근 사각형 ---------- */
.btn { min-height: 52px; padding: 0 24px; border-radius: var(--radius-button); font-weight: 600; }
.btn--sm { min-height: 46px; padding: 0 20px; }
.btn--lg { min-height: 56px; }
.btn--primary { background: var(--blue-deep); }
.btn--primary:hover { background: #2F5476; }
/* 보조 버튼은 밑줄 글자 링크로 */
.hero__actions .btn--outline { min-height: 52px; padding: 0; border: 0; border-bottom: 1px solid var(--blue); border-radius: 0; background: transparent; color: var(--text); }
.hero__actions .btn--outline:hover { background: transparent; color: var(--blue-deep); }
.hero__actions { gap: 32px; align-items: center; }
.hero__actions .btn--outline .icon-arrow { display: none; }   /* 화살표는 버튼 모양이 되는 휴대폰에서만 */

/* ---------- 헤더: 스크롤해도 위에 붙어 있음 ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.site-header__inner { min-height: 88px; padding-top: 0; padding-bottom: 0; }
.site-nav a { font-weight: 600; }
/* 메뉴로 이동하거나 입력칸에 초점이 갈 때 고정된 상단바에 가려지지 않게 */
html { scroll-padding-top: 104px; }

/* ---------- 히어로: 물결 대신 움직이는 인재 네트워크 (js/hero-network.js) ---------- */
.hero { background: linear-gradient(145deg, #FFFFFF, #E3EEFD); }
.hero-network { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 글자가 놓이는 왼쪽은 그래픽이 비치지 않게 서서히 지웁니다. */
.hero-network { -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 64%); mask-image: linear-gradient(90deg, transparent 44%, #000 64%); }
.hero__inner { padding-top: 112px; padding-bottom: 128px; }
.hero__eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--text); }
.hero__title { font-size: clamp(38px, 5vw, 72px); font-weight: 650; line-height: 1.25; letter-spacing: -0.045em; }
.hero__lead { font-size: 20px; color: var(--muted); }
.text-accent { color: var(--blue-deep); }
.dict-card { background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-color: rgba(255, 255, 255, .9); box-shadow: 0 24px 60px -30px rgba(36, 60, 100, .45); }
.dict-card__word { color: var(--blue); }

/* ---------- 세 가지 원칙: 파란 띠 대신 옅은 파랑 카드 ---------- */
.principles { background: #FFFFFF; color: var(--text); padding: 0 0 var(--section-y); }
.principles__inner { gap: 24px; }
.principle { padding: 32px; border: 0; border-radius: var(--radius-card); background: var(--blue-wash); }
.principle p { color: var(--muted); }
.principles__head { display: flex; flex-direction: column; gap: 14px; max-width: 780px; margin-bottom: 40px; }
.principle h3 { font-weight: 600; font-size: 21px; line-height: 1.4; letter-spacing: -0.02em; }
.principles :focus-visible { outline-color: var(--blue); }

/* ---------- 섹션 머리 ---------- */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; color: var(--text); }
.eyebrow__num { color: var(--blue-deep); }
.section-title { font-weight: 600; letter-spacing: -0.035em; line-height: 1.25; }
.section-lead { font-size: 20px; }

/* ---------- 카드 ---------- */
.card { border-top: 1px solid var(--line); border-radius: var(--radius-card); padding: 32px; }
.card__kicker { font-weight: 600; color: var(--blue); }
.card h3 { font-weight: 600; }
.panel { padding: 32px; }
.panel h3 { font-weight: 600; }

/* ---------- 프로세스: 파란 바탕, 두 줄 목록 ---------- */
#process { background: var(--blue); color: #FFFFFF; }
#process .eyebrow, #process .eyebrow__num, #process .section-lead { color: #FFFFFF; }
#process :focus-visible { outline-color: #FFFFFF; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 24px; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, .3); }
.step__num { grid-row: 1 / span 2; font-size: 36px; font-weight: 400; color: #FFFFFF; }
.step h3 { margin-top: 0; font-weight: 600; }
.step p { grid-column: 2; color: #FFFFFF; }
.step--note { grid-column: 1 / -1; display: flex; margin-top: 24px; padding: 32px; border: 0; border-radius: var(--radius-card); background: #FFFFFF; color: var(--text); }
.step--note p { color: var(--muted); }
.step--note a { color: var(--blue-deep); border-bottom-color: var(--blue); }
.step--note a:hover { color: var(--text); border-bottom-color: var(--text); }

/* ---------- 헤드헌팅 의뢰 ---------- */
#contact { background: linear-gradient(135deg, #E3EEFD, #FFFFFF); }
.form-panel { border-top: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: none; padding: 40px; }
/* 양식의 단계 표시: 번호만 조금 크고 진하게, 영문은 한 단계 옅게 */
.form__group + .form__group { margin-top: 20px; }
.form__step { font-weight: 500; color: var(--muted); }
.form__num { margin-right: 2px; font-size: 16px; font-weight: 700; letter-spacing: 0; color: var(--blue-deep); }
.form__legend { font-weight: 600; }
.input { min-height: 48px; border-color: var(--input-border); }
.input--file { border-style: dashed; }
.contact-list > div { border-top-color: var(--blue); }
.contact-list > div:last-child { border-bottom-color: var(--blue); }
.done__summary dd, .contact-list dd { font-weight: 500; }

/* ---------- 푸터: 파란 띠 없이 옅은 회색 ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); }
.site-footer__bar { background: transparent; color: var(--muted); }
.site-footer__bar .container { border-top: 1px solid var(--line); }
.site-footer__bar :focus-visible { outline-color: var(--blue); }

/* ---------- 개인정보처리방침 ---------- */
.policy h2 { font-weight: 600; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  html { scroll-padding-top: 136px; }
  .site-header__inner { min-height: 0; padding-top: 10px; padding-bottom: 6px; }
  .hero-network { opacity: .5; -webkit-mask-image: linear-gradient(#000 120px, transparent 330px); mask-image: linear-gradient(#000 120px, transparent 330px); }
  .hero__inner { padding-top: 48px; padding-bottom: 72px; }
  .hero__actions { gap: 12px; }
  /* 휴대폰에서는 '이력서 보내기'도 '채용 의뢰하기'와 같은 크기의 버튼으로 (흰 바탕, 파란 테두리) */
  .hero__actions .btn--outline { padding: 0 24px; border: 1px solid var(--blue); border-radius: var(--radius-button); background: #FFFFFF; color: var(--blue-deep); }
  .hero__actions .btn--outline:hover { background: var(--blue-wash); }
  .hero__actions .btn--outline .icon-arrow { display: block; }
  .hero__lead, .section-lead { font-size: 16px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; }
  /* 번호와 제목의 글자 높이를 맞춥니다 (같은 줄 높이 30px) */
  .step__num { font-size: 22px; line-height: 30px; }
  .step h3 { line-height: 30px; }
  /* 일하는 방식 카드와 서비스 구역 사이: 흰 바탕 40 + 회색 바탕 40 (전체 간격은 예전의 절반) */
  .principles { padding-bottom: 40px; }
  #service { padding-top: 40px; }
  /* 서비스 카드: 그림을 제목 줄의 오른쪽 끝으로 옮겨 카드 높이를 줄입니다 */
  .card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 24px 16px; }
  .card__kicker, .card p:last-child { grid-column: 1 / -1; }
  .card__kicker { grid-row: 1; padding-top: 0; }
  .card h3 { grid-row: 2; grid-column: 1; }
  .card__icon { grid-row: 2; grid-column: 2; align-self: center; width: 32px; height: 32px; }   /* 제목 글자와 같은 높이에 */
  /* 글자 시작 위치 맞춤: 상자 밖 글자는 17px 안쪽으로 들이고, 상자 안 여백은 16px로 줄여서
     첫 화면부터 의뢰 구역까지 모든 글자가 같은 세로선(화면 왼쪽에서 37px)에서 시작합니다. */
  .hero__eyebrow, .hero__title, .hero__lead,
  .section-head, .principles__head, .split__aside, .split__main { padding-left: 17px; padding-right: 17px; }
  .step { padding-left: 17px; padding-right: 17px; }
  .hero__eyebrow { font-size: 11px; letter-spacing: .03em; }   /* 한 줄에 들어가도록 */
  .contact-list > div { padding-left: 17px; }
  .contact-list dt { flex-basis: 48px; }
  .dict-card, .principle, .panel, .step--note { padding: 24px 16px; }
  .principle, .step--note { padding-left: 17px; padding-right: 17px; }   /* 테두리가 없는 상자는 1px 더 */
  /* 상자 안 문장은 낱말이 아니라 글자 단위로 줄을 바꿔서, 오른쪽 끝까지 채웁니다.
     (낱말 단위로 바꾸면 줄마다 오른쪽이 들쭉날쭉 비어서 좌우 여백이 달라 보입니다.) */
  .principle p, .card p:last-child, .step--note p, .panel p { word-break: normal; }
  /* 안내 상자: 제목을 본문과 같은 크기로, 이메일 복사 버튼과 주소 칸은 조금 작게 */
  .panel h3 { font-size: 15px; }
  .copy-row .input, .copy-row .btn { min-height: 42px; height: 42px; }
  .copy-row .btn { padding: 0 14px; font-size: 14px; }
  .form-panel { padding: 24px 16px; }
}