@charset "UTF-8";
/* =============================================================================
   apply — 응모하기 오버레이 (Figma 6400:2886)

   이 팝업은 base.css 토큰 축과 다른 자체 팔레트(#f6f7ff 계열)를 씁니다.
   전역 토큰을 늘리는 대신 .apply 스코프 안에서만 사는 지역 변수로 선언합니다.

   PC는 모바일 레이아웃을 그대로 공유하고 폭·좌우 여백만 넓힙니다.
   ============================================================================= */

.apply {
  /* --- 지역 팔레트 (Figma 실측) --- */
  --apply-bg: #f6f7ff;              /* 팝업 배경 */
  --apply-field-bg: rgba(87, 93, 123, 0.08); /* 입력 필드 */
  --apply-surface: #e9ebf4;         /* 탭 트랙 · 썸네일 · 유의사항 박스 */
  --apply-ink: #020202;             /* 제목 · 활성 세그먼트 · 제출 버튼 */
  --apply-ink-soft: #21212b;        /* 약관 · 유의사항 본문 */
  --apply-label: #808080;           /* 필드 라벨 */
  --apply-placeholder: rgba(0, 0, 0, 0.4);
  --apply-line: rgba(0, 0, 0, 0.08);
  --apply-danger: #d81f2a;          /* 검증 오류 (디자인 미제공 · 접근성용 추가) */

  --apply-pad: 20px;                /* 좌우 거터 (Figma 343 - 303 = 40 / 2) */

  /* --- dialog 자체 --- */
  width: calc(100% - 32px);         /* 320px 뷰포트에서도 좌우 16px 확보 */
  max-width: 343px;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  background-color: var(--apply-bg);
  color: var(--apply-ink);
  overflow: hidden;
}

/* UA 스타일시트의 dialog:not([open]) { display: none } 을 덮지 않도록
   반드시 [open] 에만 display 를 겁니다. */
.apply[open] {
  display: flex;
  flex-direction: column;
}

.apply::backdrop {
  background-color: rgba(0, 0, 0, 0.6);
}

.apply__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
  outline: none;
}

/* -----------------------------------------------------------------------------
   상단 닫기 바 — 스크롤과 무관하게 고정
   -------------------------------------------------------------------------- */
.apply__topbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  height: 64px;
  padding: 12px;
}

.apply__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px; /* 아이콘 광학 정렬은 유지하고 탭 영역만 넓힘 */
}

/* Figma 6400:2974 는 24×24 아이콘 프레임 안에 14×14 글리프(5px 인셋)입니다.
   내보내진 SVG 는 글리프만 담고 있으므로 24 로 키우면 71% 커지고 선도 굵어집니다. */
.apply__close-icon {
  width: 14px;
  height: 14px;
}

/* -----------------------------------------------------------------------------
   스크롤 영역
   -------------------------------------------------------------------------- */
.apply__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.apply__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-bottom: var(--s-24);
  padding-inline: var(--apply-pad);
}

.apply__title {
  font-size: 24px;
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  letter-spacing: -0.48px;
  color: var(--apply-ink);
}

.apply__lead {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.28px;
  color: rgba(2, 2, 2, 0.8);
}

.apply__form {
  display: flex;
  flex-direction: column;
}

.apply__groups {
  display: flex;
  flex-direction: column;
  gap: var(--s-40);
  padding-inline: var(--apply-pad);
}

/* -----------------------------------------------------------------------------
   1. 응모자 정보
   -------------------------------------------------------------------------- */
.apply__group--fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.apply__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apply__label {
  padding-left: var(--s-4);
  font-size: 14px;
  font-weight: var(--fw-medium);
  line-height: var(--lh-base);
  letter-spacing: -0.28px;
  color: var(--apply-label);
}

/* 필수 표시. 색만으로 구분하지 않도록 라벨에는 sr-only "(필수)" 가 함께 있고,
   이 별표는 aria-hidden 이라 스크린리더가 "별" 을 두 번 읽지 않습니다. */
.apply__required {
  margin-left: 2px;
  color: var(--apply-danger);
}

.apply__input,
.apply__textarea {
  width: 100%;
  border: 0;
  border-radius: 0;
  background-color: var(--apply-field-bg);
  color: var(--c-black);
  appearance: none;
  -webkit-appearance: none;
}

.apply__input {
  height: 48px;
  padding-inline: 14px;
  font-size: 15px;
  line-height: var(--lh-base);
  letter-spacing: -0.3px;
}

.apply__textarea {
  min-height: 120px;
  padding: var(--s-20) 14px;
  font-size: 14px;
  line-height: var(--lh-base);
  letter-spacing: -0.28px;
  resize: vertical;
}

.apply__input::placeholder,
.apply__textarea::placeholder {
  color: var(--apply-placeholder);
}

/* iOS Safari 는 date 입력값을 가운데로 밀고 높이를 제멋대로 잡습니다 */
.apply__input--date {
  display: flex;
  align-items: center;
  min-height: 48px;
}
.apply__input--date::-webkit-date-and-time-value {
  text-align: left;
}
.apply__input--date::-webkit-calendar-picker-indicator {
  margin-left: auto;
  opacity: 0.5;
  cursor: pointer;
}

.apply__input[aria-invalid="true"],
.apply__textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--apply-danger);
}

/* --- 직업 드롭다운 --- */
/* appearance:none 은 .apply__input 이 이미 끕니다. 네이티브 화살표가 사라지므로
   배경 이미지로 직접 그립니다. 인라인 SVG 를 data URI 로 넣어 요청을 늘리지
   않습니다. */
.apply__select {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23020202' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

/* 아직 고르지 않았을 때는 placeholder 색으로 보여야 다른 빈 칸과 어울립니다.
   :invalid 는 required + value="" 인 첫 option 이 선택된 상태에서만 걸립니다. */
.apply__select:invalid {
  color: var(--apply-placeholder);
}

.apply__select option {
  color: var(--c-black);
}

.apply__error {
  padding-left: var(--s-4);
  font-size: 13px;
  line-height: var(--lh-base);
  letter-spacing: -0.26px;
  color: var(--apply-danger);
}

.apply__hint {
  margin-top: var(--s-8);
  padding-left: var(--s-4);
  font-size: 13px;
  line-height: var(--lh-base);
  letter-spacing: -0.26px;
  color: rgba(2, 2, 2, 0.5);
}

/* --- 서킷경험 세그먼트 --- */
.apply__segment {
  position: relative;
  display: flex;
  gap: var(--s-8);
  height: 48px;
}

.apply__segment-option {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 14px;
  background-color: var(--apply-field-bg);
  color: var(--c-black);
  font-size: 15px;
  font-weight: var(--fw-medium);
  letter-spacing: -0.5px;
  opacity: 0.8;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.apply__segment-input:checked + .apply__segment-option {
  background-color: var(--apply-ink);
  color: var(--c-white);
}

.apply__segment-input:focus-visible + .apply__segment-option {
  outline: 2px solid var(--c-sky-blue);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   2. 인증사진 / 게시물 URL
   -------------------------------------------------------------------------- */
.apply__group--upload {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}

.apply__upload-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.apply__subtitle {
  font-size: 18px;
  font-weight: var(--fw-medium);
  line-height: normal;
  letter-spacing: -0.5px;
  color: var(--c-black);
}

.apply__tabs {
  display: inline-flex;
  align-self: flex-start;
  padding: var(--s-4);
  border-radius: var(--radius-md);
  background-color: var(--apply-surface);
}

.apply__tab {
  /* 고정 width 였는데 라벨이 "사진 업로드" → "컨텐츠 업로드" 로 길어지면서
     두 줄로 접혔습니다. 최소 폭만 유지하고 라벨 길이에 맞춰 늘어나게 둡니다. */
  min-width: 98px;
  padding: 9px 14px;
  white-space: nowrap;
  border-radius: 6px;
  color: var(--c-black);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: -0.3px;
  opacity: 0.5;
  transition: background-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.apply__tab[aria-selected="true"] {
  background-color: var(--c-white);
  opacity: 1;
}

.apply__tabpanel:focus-visible {
  outline: 2px solid var(--c-sky-blue);
  outline-offset: 4px;
}

/* --- 파일 썸네일 그리드 --- */
.apply__thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

.apply__thumb,
.apply__add {
  position: relative;
  aspect-ratio: 1 / 1;
  background-color: var(--apply-surface);
  overflow: hidden;
}

.apply__thumb-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apply__thumb-clear {
  position: absolute;
  top: var(--s-8);
  right: var(--s-8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.apply__thumb-clear img {
  width: 20px;
  height: 20px;
}

/* 동영상은 첫 프레임만 보이므로 재생 대상임을 배지로 알립니다 */
.apply__thumb-badge {
  position: absolute;
  left: var(--s-8);
  bottom: var(--s-8);
  padding: 2px 6px;
  background-color: rgba(2, 2, 2, 0.72);
  color: var(--c-white);
  font-size: 11px;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  letter-spacing: 0;
}

/* 업로드 진행률 — 썸네일 타일 위에 덮습니다.
   200MB 영상이면 수십 초가 걸리는데 피드백이 없으면 멈춘 것으로 오해합니다. */
.apply__thumb-progress {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(2, 2, 2, 0.55);
  color: var(--c-white);
  font-size: 13px;
  font-weight: var(--fw-semibold);
  letter-spacing: -0.26px;
}

.apply__thumb-progress[hidden] {
  display: none;
}

.apply__thumb-progress::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--apply-progress, 0%);
  background-color: var(--c-michelin-yellow);
  transition: width 120ms linear;
}

/* 제출 중에는 버튼을 잠급니다. 두 번 눌러 두 건이 들어가는 것을 막습니다. */
.apply__submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 접수 완료 화면. form 바깥에 있어 form.hidden 에 함께 지워지지 않습니다. */
.apply__done {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-64) var(--apply-pad) var(--s-80);
  text-align: center;
  outline: none;
}

.apply__done[hidden] {
  display: none;
}

.apply__done-title {
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.4px;
  color: var(--apply-ink);
}

.apply__done-desc {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.28px;
  color: rgba(2, 2, 2, 0.6);
}

.apply__add {
  display: flex;
  align-items: center;
  justify-content: center;
}

.apply__add-icon {
  width: 18px;
  height: 18px;
}

/* --- URL 입력 --- */
.apply__urls {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.apply__url-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.apply__url-row .apply__input {
  flex: 1 1 auto;
  min-width: 0;
}

.apply__url-remove {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.apply__url-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-12);
  padding: 10px var(--s-4);
  color: var(--apply-ink-soft);
  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-base);
  letter-spacing: -0.28px;
}

.apply__url-add-sign {
  font-size: 15px;
  line-height: 1;
}

/* -----------------------------------------------------------------------------
   3. 약관 동의 / 유의사항
   -------------------------------------------------------------------------- */
.apply__group--agree {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.apply__options {
  display: flex;
  flex-direction: column;
}

.apply__option {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-8);
  border-top: 1px solid var(--apply-line);
}

.apply__option:last-child {
  border-bottom: 1px solid var(--apply-line);
}

.apply__checkbox {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: url("../../assets/apply/checkbox-off.svg") center / 100% 100% no-repeat;
  cursor: pointer;
}

.apply__checkbox:checked {
  background-image: url("../../assets/apply/checkbox-on.svg");
}

.apply__option-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.42px;
  color: var(--apply-ink-soft);
  cursor: pointer;
}

/* 링크는 우측 disclosure 에만 겁니다 (라벨 클릭 = 체크박스 토글) */
/* 화살표 글리프는 6×11 뿐이라 그대로 두면 탭 타깃이 너무 작습니다.
   padding 으로 히트영역만 키우고 같은 크기의 음수 margin 으로 되돌려
   글리프 위치(Figma x=309)는 그대로 유지합니다. */
.apply__option-more {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  margin: -16px -12px -16px 0;
}

/* Figma 가 내보내는 icn_arrow_right 원본 벡터는 왼쪽을 향합니다.
   디자인에서는 rotate(180deg) 를 걸어 오른쪽 disclosure 로 씁니다. */
.apply__option-more img {
  width: 6px;
  height: 11px;
  transform: rotate(180deg);
}

/* 주의사항 — 본문 footer 와 같은 문구를 응모 직전에 한 번 더 보여주는 자리.
   문구가 3개 그룹으로 늘어나면서 단순 목록에서 제목 + 목록 구조가 됐습니다. */
.apply__notice {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
  padding: var(--s-20) 14px;
  background-color: var(--apply-surface);
}

.apply__notice-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.apply__notice-title {
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-base);
  letter-spacing: -0.28px;
  color: var(--c-black);
}

.apply__notes {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* 불릿을 list-style 대신 ::before 로 그립니다. 두 줄 이상 넘어가는 항목이
   많은데, list-style 은 두 번째 줄이 불릿 아래로 파고들어 제목과 어긋납니다. */
.apply__note {
  position: relative;
  padding-left: 13px;
  font-size: 13px;
  line-height: var(--lh-base);
  letter-spacing: -0.26px;
  color: var(--apply-ink-soft);
}

.apply__note::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 3px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: currentColor;
}

/* -----------------------------------------------------------------------------
   제출 — 스크롤 컨테이너 하단에 고정, 아래로 갈수록 배경색으로 페이드
   -------------------------------------------------------------------------- */
.apply__footer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: var(--s-4);
  padding: var(--apply-pad);
  background-image: linear-gradient(
    to bottom,
    rgba(246, 247, 255, 0) 0%,
    var(--apply-bg) 21.277%
  );
}

.apply__status {
  margin-bottom: var(--s-8);
  font-size: 13px;
  line-height: var(--lh-base);
  letter-spacing: -0.26px;
  text-align: center;
  color: var(--apply-ink-soft);
}

.apply__status--error {
  color: var(--apply-danger);
}

.apply__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  padding-inline: var(--s-32);
  background-color: var(--apply-ink);
  color: var(--c-white);
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  transition: opacity var(--dur-fast) var(--ease-out);
}

.apply__submit:hover {
  opacity: 0.88;
}

/* -----------------------------------------------------------------------------
   PC (1024px+) — 레이아웃은 모바일과 동일, 폭과 거터만 조정
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .apply {
    --apply-pad: 32px;
    max-width: 480px;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
  }

  .apply__topbar {
    height: 68px;
    padding: 16px 20px;
  }
}