@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.css");

/* ============================================================
   놀이로 자라는 우리, 놀자! — 2026 영유아 사교육 인식개선 대국민 캠페인
   유치원·어린이집의 특별한 배움 60초 영상 공모전
   Figma: 육아정책 연구소_공모전 접수페이지_PC (1920 기준)
   ============================================================ */

:root {
  --purple: #7d46ff;
  --purple-deep: #4a259e;
  --purple-table: #49259e;
  --purple-text: #5f1ef8;
  --bullet: #6732e3;
  --lav-bg: #f4efff;
  --lav-badge: #ece4ff;
  --lav-row: #faf8ff;
  --lav-file: #f5f0ff;
  --line: #cec5de;
  --line-form: #e5e5e5;
  --footer-bg: #332651;
  --ink: #000;
  --ink-soft: #262626;
  --ink-muted: #4c4c4c;
  --placeholder: #b3b3b3;
  --input-line: #a0a0a0;
  --note-bg: #f3f3f3;
  --shadow-lav: #e2d9f8;

  --container: min(1220px, calc(100vw - 40px));
  --canvas: 1920px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.5;
  word-break: keep-all;
}

img { display: block; border: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.container { width: var(--container); margin: 0 auto; }

/* ============================================================
   HERO  (Figma 1:3 / 1:320 / 1:450 — 1920 × 1020)
   ============================================================ */

.hero {
  position: relative;
  height: 1020px;
  background: var(--lav-bg);
  overflow: hidden;
}

/* 1920 기준 좌표를 뷰포트 중앙(960px) 기준 오프셋으로 환산해 배치 */
.hero__media,
.hero__note,
.hero__player,
.hero__emoji {
  position: absolute;
  left: 50%;
  pointer-events: none;
}

.hero__media  { top: 187px; margin-left: -478px; width: 1626px; height: 986px; }
.hero__player { top: 141px; margin-left:   31px; width:  217px; height: 229px;
                filter: drop-shadow(0 10px 20px var(--shadow-lav)); }
.hero__emoji  { top: 112px; margin-left:  130px; width:   72px; height:  73px; }
.hero__note   { top: 271px; margin-left:  428px; width: 153.33px; height: 124.84px;
                display: flex; align-items: center; justify-content: center; }
.hero__note img { width: 133px; height: 79px; transform: rotate(-23.1deg); }

.hero__media img,
.hero__player img,
.hero__emoji img { width: 100%; height: 100%; object-fit: cover; }

.hero__copy {
  position: absolute;
  top: 200px;
  left: 50%;
  margin-left: -610px;
  width: 562px;
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: flex-start;
}

.hero__head {
  display: flex;
  flex-direction: column;
  gap: 36px;
  align-items: flex-start;
  width: 100%;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 500px;
  background: var(--purple-deep);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.28px;
  white-space: nowrap;
}

/* 워드마크: 4겹(부제·1행·놀자!면·놀자!획)을 겹쳐 쌓는다.
   자식 좌표를 모두 %로 두어 박스 폭만 바꾸면 그대로 축소·확대된다. */
.hero__wordmark {
  position: relative;
  width: 562.93px;
  aspect-ratio: 562.93 / 342.01;
}
.hero__wordmark img { position: absolute; }
/* 겹침 순서는 Figma와 동일: 부제 → 1행 → 놀자!(면) → 놀자!(획) */
.wm-subtitle { left:  0.694%; top:  0;       width: 96.396%; height:  7.988%; }
.wm-line1    { left:  0.941%; top: 15.052%;  width: 99.058%; height: 27.412%; }
.wm-line2    { left: -0.179%; top: 50.458%;  width: 63.143%; height: 51.001%; }
.wm-line2-st { left: -1.419%; top: 48.408%;  width: 65.623%; height: 55.101%; }

.hero__lead {
  font-size: 33px;
  font-weight: 600;
  letter-spacing: -0.99px;
  line-height: 1.4;
  color: var(--ink-soft);
  white-space: nowrap;
}
.hero__lead em { font-style: normal; color: var(--purple); }

/* ---- 탭 내비게이션 (Figma 1:6) ---- */
.tabs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  align-items: center;
  filter: drop-shadow(0 3px 10px var(--shadow-lav));
}

.tabs__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 82px;
  border-radius: 20px 20px 0 0;
  background: var(--purple);
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -1.08px;
  line-height: 1.4;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.tabs__item:hover { filter: brightness(1.08); }
.tabs__item[aria-current="page"] {
  background: #fff;
  color: var(--purple);
}
.tabs__item[aria-current="page"]:hover { filter: none; }

/* ============================================================
   본문 공통
   ============================================================ */

.main { background: #fff; padding: 150px 0; }

.section__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

/* 라벨 + 표를 한 묶음으로 두는 블록 (Figma gap 30) */
.block-30 { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; width: 100%; }

/* 섹션 제목 + 형광펜 하이라이트 (Figma 1:64) */
.section__title {
  position: relative;
  display: inline-block;
  margin-left: -12px;
  padding: 0 10px 0 12px;
  font-size: 43px;
  font-weight: 800;
  letter-spacing: -1.29px;
  line-height: 1.4;
  white-space: nowrap;
}
/* 형광펜 막대: 글자 뒤에 깔리도록 제목 자신의 배경으로 그린다 */
.section__title {
  background-image: linear-gradient(var(--lav-badge), var(--lav-badge));
  background-repeat: no-repeat;
  background-position: 0 0.698em;
  background-size: 100% 0.605em;
}

/* 섹션 구분선 (Figma 1:92 / 1:170 / 1:275 — 위아래 21.5px) */
.divider {
  width: var(--container);
  margin: 21.5px auto;
  border: 0;
  border-top: 1px solid var(--line);
}

/* 리드 박스 (Figma 1:67) */
.lead-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 50px 40px;
  border-radius: 10px;
  background: var(--lav-bg);
  text-align: center;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.78px;
}
.lead-box strong { font-weight: 700; color: var(--purple-text); }
.lead-box p + p { margin-top: 0; }
.lead-box .spacer { display: block; height: 1.4em; }

/* 라벨 + 본문 블록 (Figma 1:69 등) */
.field { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.field__label {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.9px;
  line-height: 1.4;
}
.field__body {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1.4;
}
.field__body strong { font-weight: 700; color: var(--purple); }

/* 본문 안에서 다른 페이지로 넘어가는 링크 — 강조 텍스트와 같은 색에 밑줄로 구분 */
.inline-link {
  font-weight: 700;
  color: var(--purple);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
}
.inline-link:hover,
.inline-link:focus-visible { color: var(--purple-deep); }
.field__body--loose { line-height: 1.5; }

/* 불릿 목록 — 불릿만 보라색, 줄간격 1.5 (Figma 1:129 / 1:132 / 1:169 / 1:285 / 1:288) */
.bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1.5;
}
.bullets li { position: relative; padding-left: 18px; }
.bullets li::before { content: "•"; position: absolute; left: 0; color: var(--bullet); }
.field__note {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: -0.54px;
  line-height: 1.5;
}
.field__list { margin: 0; padding: 0; list-style: none; }
.field__list li + li { margin-top: 0; }

.stack-8  { display: flex; flex-direction: column; gap: 8px;  align-items: flex-start; }
.stack-30 { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }

/* 다운로드 버튼 (Figma 1:84) */
.btn-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: var(--purple);
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.78px;
  line-height: 1.4;
  white-space: nowrap;
  transition: filter 0.15s ease;
}
.btn-download:hover { filter: brightness(1.08); }

/* 표 (Figma 1:101 / 1:136 / 1:178 / 1:238) */
.table {
  width: var(--container);
  border-collapse: collapse;
  border: 1px solid var(--line);
  table-layout: fixed;
}
.table th,
.table td {
  height: 60px;
  padding: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
  vertical-align: middle;
}
.table th:last-child,
.table td:last-child { border-right: 0; }
.table tr:last-child td { border-bottom: 0; }
.table thead th {
  background: var(--purple-table);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}
.table tbody th,
.table tbody td {
  background: var(--lav-row);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.66px;
}

/* 열 너비 (Figma PC) */
.table--compo    .col-a { width: 16.393%; }
.table--spec     .col-a { width: 26.230%; }
.table--criteria .col-a { width: 17.213%; }
.table--criteria .col-b { width: 17.213%; }
.table--award    .col-a,
.table--award    .col-b { width: 33.333%; }

/* 좌측 열이 헤더인 표 — 제출 규격 (Figma 1:136) */
.table--vhead tbody th {
  background: var(--purple-table);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.72px;
}

.table--criteria tbody th,
.table--criteria tbody td { height: 90px; }
.table--criteria .row-total th,
.table--criteria .row-total td { height: 60px; }

/* ============================================================
   푸터 (Figma 1:289)
   ============================================================ */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 100px;
  background: var(--footer-bg);
  color: #fff;
}

.footer__inner {
  width: var(--container);
  max-width: 100%;
  padding: 100px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.footer__block { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.footer__title {
  font-size: 43px;
  font-weight: 800;
  letter-spacing: -1.29px;
  line-height: 1.4;
}
.footer__list { margin: 0; padding: 0; list-style: none; }
.footer__list li {
  position: relative;
  padding-left: 18px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1.5;
}
.footer__list li::before { content: "•"; position: absolute; left: 0; }

/* 전화번호·이메일은 어떤 폭에서도 중간에서 끊기지 않는다 */
.footer__contact .nw { white-space: nowrap; }

.org-row { display: flex; gap: 60px; align-items: flex-start; }
.org { display: flex; gap: 20px; align-items: flex-start; }
.org__tag {
  flex: none;
  padding: 2px 10px;
  border-radius: 4px;
  background: #fff;
  color: var(--footer-bg);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.4;
}
.org__names {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 139px;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1.5;
}

/* CTA (Figma 1:315) */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 80px;
  border-radius: 900px;
  background: var(--purple);
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -1.02px;
  line-height: 1.4;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.cta img { width: 14px; height: 24px; }
.cta:disabled { opacity: 0.55; cursor: progress; transform: none; }

/* 폼 제출 버튼 (Figma 1:445 / 1:538 — 460 × 76) */
.cta--submit { width: 460px; padding: 14px 0; }

/* 신청 확인 → 수정 */
.result__actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn-edit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 32px; border-radius: 900px;
  background: var(--purple); color: #fff;
  font-size: 22px; font-weight: 700; letter-spacing: -0.66px;
  transition: filter 0.15s ease;
}
.btn-edit:hover { filter: brightness(1.08); }

.edit-form { margin-top: 60px; padding-top: 60px; border-top: 2px solid var(--line); }
.edit-form[hidden] { display: none; }
.edit-form__actions { flex-direction: column; align-items: center; gap: 16px; }
.btn-cancel {
  padding: 10px 28px; border: 1px solid var(--input-line); border-radius: 900px;
  background: #fff; color: var(--ink-muted);
  font-size: 20px; font-weight: 600;
}
.btn-cancel:hover { background: #f5f5f5; }

/* 수정 폼에서 기존 첨부와 새로 추가한 첨부를 구분한다 */
.file-list li .tag {
  flex: none; padding: 2px 8px; border-radius: 4px;
  background: var(--lav-badge); color: var(--purple-deep);
  font-size: 14px; font-weight: 700;
}
.file-list li .tag--new { background: #e3f6ec; color: #1a6b47; }

/* ============================================================
   신청 폼 (Figma 1:388 / 1:519)
   ============================================================ */

.form { display: flex; flex-direction: column; gap: 46px; align-items: flex-start; width: 100%; }

.form__row {
  display: grid;
  grid-template-columns: 351px 1fr;
  align-items: start;
  width: 100%;
}
.form__row--center { align-items: center; }

.form__label {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: normal;
  line-height: normal;
}
.form__label .req { color: var(--purple); font-weight: 500; }

.form__control { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }

.form__hr { width: var(--container); border: 0; border-top: 1px solid var(--line-form); margin: 0; }

.input {
  width: 100%;
  height: 60px;
  padding: 15px 20px;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-soft);
}
.input::placeholder { color: var(--placeholder); }
.input:focus { outline: 2px solid var(--purple); outline-offset: -1px; }

.input--name { width: 523px; }

.input-group { display: flex; gap: 4px; align-items: center; }
.input-group > .sep { font-size: 20px; font-weight: 400; color: var(--ink); }
.input-group .input { width: 220px; }

.select-wrap { position: relative; width: 466px; }
.select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 60px;
}
.select-wrap select:invalid { color: var(--placeholder); }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 19px;
  height: 19px;
  margin-top: -9.5px;
  background: url("../assets/svg/select-arrow.svg") no-repeat center / 100% 100%;
  transform: rotate(180deg);
  pointer-events: none;
}

/* 첨부파일 (Figma 1:427) */
.dropzone {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 697px;
  padding: 16px 20px;
  border: 1px solid var(--input-line);
  border-radius: 8px;
  background: var(--lav-file);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone.is-dragover { border-color: var(--purple); background: #ece0ff; }

.dropzone__btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  padding: 8px 16px;
  border-radius: 800px;
  background: var(--purple);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}
.dropzone__btn img { width: 25px; height: 25px; }
.dropzone__status { font-size: 20px; font-weight: 400; color: var(--ink-soft); }

.file-list { margin: 0; padding: 0; list-style: none; width: 697px; }
.file-list:empty { display: none; }
.file-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 18px;
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.file-list .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-list .size { flex: none; color: var(--ink-muted); }
.file-list .remove {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--line); color: #fff; font-size: 14px; line-height: 1;
}
.file-list .remove:hover { background: var(--purple); }

.format-note {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 697px;
  padding: 8px 20px;
  background: var(--note-bg);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.54px;
  line-height: 1.5;
}

/* 동의 체크박스 (Figma 1:441) */
.agree { display: flex; gap: 14px; align-items: center; }
.agree label { font-size: 22px; font-weight: 500; color: var(--ink-soft); cursor: pointer; }
.agree input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  margin: 0;
  border: 2px solid var(--input-line);
  border-radius: 3px;
  cursor: pointer;
}
.agree input[type="checkbox"]:checked {
  border-color: var(--purple);
  background: var(--purple) url("../assets/svg/checkbox-on.svg") no-repeat center / 14px 10px;
}
.agree input[type="checkbox"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* Figma 기준 폼 하단 ~ 버튼 간격 80px. .form의 gap 46px가 이미 붙으므로 34px만 더한다 */
.form__submit { display: flex; justify-content: center; width: var(--container); margin-top: 34px; }

.form__intro {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.66px;
  line-height: 1.4;
}

.form-error {
  display: none;
  width: var(--container);
  padding: 16px 20px;
  border-radius: 8px;
  background: #ffefef;
  color: #c0342b;
  font-size: 20px;
  font-weight: 600;
}
.form-error.is-visible { display: block; }
/* 오류가 아닌 진행 안내 (업로드 중 등) */
.form-error.is-busy { background: #eee8ff; color: var(--purple-deep); }

.result {
  display: none;
  width: var(--container);
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--lav-row);
  font-size: 22px;
  line-height: 1.6;
}
.result.is-visible { display: block; }
.result strong { color: var(--purple-deep); }
.cta--result { margin-top: 24px; font-size: 24px; padding: 12px 40px; }


/* 유틸: PC/모바일 전용 표기 */
.only-mo { display: none; }

/* ============================================================
   모바일  (Figma: 육아정책 연구소_공모전 접수페이지_MO — 800 기준)
   ------------------------------------------------------------
   --u : 레이아웃 단위. 디자인 1px 을 실제 px 로 환산. 800px 뷰포트에서 1:1.
   --t : 타이포 단위. 작은 화면에서 본문이 읽히지 않을 만큼 줄지 않도록
         하한(0.58)을 둔다. 하한을 없애고 디자인과 완전히 같은 비율로
         축소하려면 --t 값을 var(--u) 로 바꾸면 된다.
   ============================================================ */

@media (max-width: 1259px) {

  :root {
    --mw: min(100vw, 800px);
    --u: calc(var(--mw) / 800);
    --t: max(0.58px, var(--u));
    --container: calc(700 * var(--u));
  }

  .only-pc { display: none; }
  .only-mo { display: inline; }

  /* ---------------- HERO (800 × 1300) ---------------- */

  .hero { height: calc(1300 * var(--u)); }

  .hero__media,
  .hero__note,
  .hero__player,
  .hero__emoji {
    margin-left: 0;
    transform: translateX(-50%);
  }

  .hero__media {
    top: calc(630 * var(--u));
    left: calc(50% - 6.5 * var(--u));
    width: calc(1273 * var(--u));
    height: calc(773 * var(--u));
  }
  .hero__player {
    top: calc(441 * var(--u));
    left: calc(50% + 210.5 * var(--u));
    width: calc(211 * var(--u));
    height: calc(222 * var(--u));
    filter: drop-shadow(0 calc(5.935 * var(--u)) calc(11.869 * var(--u)) var(--shadow-lav));
  }
  .hero__emoji {
    top: calc(413 * var(--u));
    left: calc(50% + 236.5 * var(--u));
    width: calc(69 * var(--u));
    height: calc(71 * var(--u));
  }
  .hero__note {
    top: calc(706.58 * var(--u));
    left: calc(50% + 132.4 * var(--u));
    width: calc(138.83 * var(--u));
    height: calc(113.956 * var(--u));
  }
  .hero__note img {
    width: calc(120.508 * var(--u));
    height: calc(72.096 * var(--u));
    transform: rotate(-23.25deg) skewX(-0.3deg);
  }

  .hero__copy {
    top: calc(124 * var(--u));
    left: 50%;
    margin-left: 0;
    transform: translateX(-50%);
    width: calc(564.88 * var(--u));
    gap: calc(43.63 * var(--u));
  }
  .hero__head { gap: calc(39.58 * var(--u)); }

  .hero__eyebrow {
    align-self: center;
    padding: calc(16 * var(--u)) calc(28 * var(--u));
    border-radius: calc(500 * var(--u));
    font-size: calc(28 * var(--u));
    letter-spacing: -0.01em;
  }

  .hero__wordmark { width: 100%; aspect-ratio: 564.88 / 351.79; }
  .wm-subtitle { left:  0.736%; top:  0;      width: 99.264%; height:  8.026%; }
  .wm-line1    { left:  0.938%; top: 15.995%; width: 98.716%; height: 26.649%; }
  .wm-line2    { left: -0.179%; top: 51.837%; width: 62.925%; height: 49.583%; }
  .wm-line2-st { left: -1.414%; top: 49.845%; width: 65.395%; height: 53.568%; }

  .hero__lead {
    font-size: calc(32 * var(--u));
    letter-spacing: -0.03em;
    white-space: normal;
  }

  /* ---------------- 탭 (Figma 1:547) ---------------- */

  .tabs {
    width: calc(730 * var(--u));
    gap: calc(8 * var(--u));
    filter: drop-shadow(0 calc(1.78 * var(--u)) calc(5.935 * var(--u)) var(--shadow-lav));
  }
  .tabs__item {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    height: calc(70 * var(--u));
    border-radius: calc(11.869 * var(--u)) calc(11.869 * var(--u)) 0 0;
    /* 탭은 3등분 고정폭이라 하한 없이 디자인 비율대로 줄인다 */
    font-size: calc(28 * var(--u));
    letter-spacing: -0.03em;
  }

  /* ---------------- 본문 ---------------- */

  .main { padding: calc(100 * var(--u)) 0; }
  .section__inner { gap: calc(60 * var(--u)); }
  .block-30 { gap: calc(30 * var(--u)); }
  .stack-30 { gap: calc(34.426 * var(--u)); }
  .stack-8  { gap: calc(9.18 * var(--u)); }

  .section__title {
    margin-left: -0.287em;
    padding: 0 0.208em 0 0.287em;
    font-size: calc(48 * var(--t));
    letter-spacing: -0.03em;
    white-space: normal;
  }
  .section__title { background-position: 0 0.708em; background-size: 100% 0.625em; }

  .divider { margin: calc(70 * var(--u)) auto; }

  .lead-box {
    padding: calc(40 * var(--u)) 0;
    border-radius: calc(10 * var(--u));
    background: #f3f0fd;
    font-size: calc(26 * var(--t));
    letter-spacing: -0.03em;
  }

  .field { gap: calc(11.475 * var(--u)); }
  .field__label { font-size: calc(36 * var(--t)); letter-spacing: -0.03em; }
  .field__body  { font-size: calc(26 * var(--t)); letter-spacing: -0.03em; }
  .field__note  { font-size: calc(20 * var(--t)); letter-spacing: -0.03em; }
  .bullets      { font-size: calc(26 * var(--t)); letter-spacing: -0.03em; }
  .bullets li   { padding-left: 0.8em; }

  .btn-row { flex-direction: column; align-items: flex-start; gap: calc(10 * var(--u)); }
  .btn-download {
    padding: calc(13.77 * var(--u)) calc(27.541 * var(--u));
    font-size: calc(28 * var(--t));
    letter-spacing: -0.03em;
    white-space: normal;
  }

  /* ---------------- 표 ---------------- */

  .table { width: 100%; }
  .table th,
  .table td { height: auto; padding: calc(11.475 * var(--u)); }
  .table thead th {
    height: calc(80 * var(--u));
    font-size: calc(28 * var(--t));
    letter-spacing: -0.03em;
  }
  .table tbody th,
  .table tbody td {
    height: calc(90 * var(--u));
    font-size: calc(24 * var(--t));
    letter-spacing: -0.03em;
  }
  .table--vhead tbody th { font-size: calc(28 * var(--t)); }
  .table--criteria tbody th,
  .table--criteria tbody td { height: calc(145 * var(--u)); }
  .table--criteria .row-total th,
  .table--criteria .row-total td { height: calc(90 * var(--u)); }
  .table--award thead th,
  .table--award tbody th,
  .table--award tbody td { height: calc(70 * var(--u)); }

  /* 열 너비 (Figma MO) */
  .table--compo    .col-a { width: 22.857%; }
  .table--spec     .col-a { width: 31.429%; }
  .table--criteria .col-a { width: 21.714%; }
  .table--criteria .col-b { width: 12.571%; }

  /* ---------------- 푸터 ---------------- */

  .footer { padding-bottom: calc(120 * var(--u)); }
  .footer__inner {
    width: var(--container);
    padding: calc(100 * var(--u)) 0 0;
    gap: calc(60 * var(--u));
  }
  .footer__block { gap: calc(40 * var(--u)); }
  .footer__block--org { gap: calc(30 * var(--u)); }
  .footer__title { font-size: calc(48 * var(--t)); letter-spacing: -0.03em; }
  .footer__list li {
    padding-left: 0.8em;
    font-size: calc(26 * var(--t));
    letter-spacing: -0.03em;
  }
  /* 2.25vw = 이 문장이 한 줄에 들어가는 크기(측정값 기준).
     읽을 수 있는 13px 이 하한이고, 그보다 작아져야 할 폭에서는 두 줄이 된다. */
  .footer__contact { font-size: max(13px, min(2.25vw, calc(26 * var(--t)))); }

  /* 한 줄에 안 들어가 여러 줄로 접히므로, 항목 사이를 띄워 어디까지가
     한 항목인지 드러나게 한다. PC 는 Figma 대로 붙여 둔다. */
  .footer__list li + li { margin-top: 0.7em; }
  .bullets li + li      { margin-top: 0.55em; }
  .field__body          { line-height: 1.6; }
  .field__note          { line-height: 1.6; }

  .org-row { gap: calc(60 * var(--u)); flex-wrap: wrap; }
  .org { gap: calc(20 * var(--u)); }
  .org__tag {
    padding: calc(2 * var(--u)) calc(10 * var(--u));
    border-radius: calc(4 * var(--u));
    font-size: calc(23 * var(--t));
    letter-spacing: -0.03em;
  }
  .org__names {
    width: auto;
    gap: calc(4 * var(--u));
    font-size: calc(26 * var(--t));
    letter-spacing: -0.03em;
  }

  .cta {
    margin-top: calc(70 * var(--u));
    gap: calc(18.361 * var(--u));
    padding: calc(16.066 * var(--u)) calc(91.803 * var(--u));
    border-radius: calc(1032 * var(--u));
    font-size: calc(39.016 * var(--t));
    letter-spacing: -0.03em;
  }
  .cta img { width: calc(16.137 * var(--u)); height: calc(27.42 * var(--u)); }

  /* ---------------- 폼: 라벨을 컨트롤 위로 ---------------- */

  .form { gap: calc(60 * var(--u)); }
  .form__row {
    grid-template-columns: minmax(0, 1fr);
    gap: calc(20 * var(--u));
    width: 100%;
  }
  .form__label { font-size: calc(36 * var(--t)); letter-spacing: -0.03em; }
  .form__row--agree .form__label { font-size: calc(30 * var(--t)); }
  .form__control { gap: calc(14 * var(--u)); width: 100%; }
  .form__hr { width: 100%; }
  .form__intro { font-size: calc(26 * var(--t)); letter-spacing: -0.03em; }

  .input {
    height: calc(70 * var(--u));
    padding: calc(15 * var(--u)) calc(20 * var(--u));
    border-radius: calc(8 * var(--u));
    font-size: calc(26 * var(--t));
  }
  .input--name { width: calc(460 * var(--u)); max-width: 100%; }
  .input-group { gap: calc(4 * var(--u)); width: 100%; }
  .input-group .input { width: auto; min-width: 0; flex: 1 1 0; }
  .input-group > .sep { font-size: calc(26 * var(--t)); }
  .select-wrap { width: calc(466 * var(--u)); max-width: 100%; }
  .select-wrap::after {
    right: calc(20 * var(--u));
    width: calc(19 * var(--u));
    height: calc(19 * var(--u));
    margin-top: calc(-9.5 * var(--u));
  }

  .dropzone {
    width: 100%;
    gap: calc(14 * var(--u));
    padding: calc(16 * var(--u)) calc(20 * var(--u));
    border-radius: calc(8 * var(--u));
  }
  .dropzone__btn {
    gap: calc(2 * var(--u));
    padding: calc(8 * var(--u)) calc(16 * var(--u));
    border-radius: calc(800 * var(--u));
    font-size: calc(24 * var(--t));
  }
  .dropzone__btn img { width: calc(25 * var(--u)); height: calc(25 * var(--u)); }
  .dropzone__status { font-size: calc(24 * var(--t)); }
  .file-list { width: 100%; }
  .file-list li { font-size: calc(20 * var(--t)); }
  .format-note {
    width: 100%;
    justify-content: center;
    padding: calc(8 * var(--u)) calc(20 * var(--u));
    font-size: calc(18 * var(--t));
    letter-spacing: -0.03em;
    text-align: center;
  }

  .agree { gap: calc(14 * var(--u)); }
  .agree label { font-size: calc(26 * var(--t)); }
  .agree input[type="checkbox"] {
    width: calc(23 * var(--u));
    height: calc(23 * var(--u));
  }

  /* .form 의 gap 60 이 이미 붙으므로 추가 여백 없음 (Figma MO 간격 60) */
  .form__submit { width: 100%; margin-top: 0; }
  .form__submit .cta { margin-top: 0; }
  .cta--submit {
    width: calc(500 * var(--u));
    max-width: 100%;
    padding: calc(16.066 * var(--u)) 0;
  }

  .form-error, .result { width: 100%; }
  .result { padding: calc(30 * var(--u)); font-size: calc(24 * var(--t)); }
}

/* 아주 좁은 화면: 첨부 영역이 한 줄에 들어가지 않으면 세로로 쌓는다 */
@media (max-width: 480px) {
  .dropzone { flex-direction: column; align-items: flex-start; }
  .dropzone__btn { white-space: normal; text-align: left; }
  .format-note { justify-content: flex-start; text-align: left; overflow-wrap: anywhere; }
}