@charset "utf-8";

.apply-page { max-width: 1440px; margin: 0 auto; padding: 200px 40px 100px; }
.apply-page h2 { font-size: 42px; font-weight: 700; color: #111; margin-bottom: 20px; }
.apply-page .noti {color:#919191; font-size:15px; font-weight: 400;}
.apply-page .apply-notice { list-style: none; margin: 50px 0 40px 0; padding: 0; }
.apply-page .apply-notice li { font-size: 24px; font-weight: 500; color: #313A47; line-height: 37px; margin-bottom: 12px; text-indent: -15px; padding-left:15px;}
.apply-page .apply-notice li.point {color: #4678FD;}

/* 테이블 스타일 */
.apply-page .table-section { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.apply-page .table-section table { width: 100%; min-width: 1000px; table-layout: fixed; border-collapse: collapse; }
.apply-page .table-section table th, .table-section table td { padding: 12px 8px; word-wrap: break-word; }
.apply-page .table-section table td.left { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apply-page .table-section table td .btn-count {cursor:pointer; font-size:16px; font-weight: 700; text-decoration: underline; color:#4678FD}

/* 커스텀 셀렉트박스 */
.apply-page .custom-select { position: relative; display: inline-block; }
.apply-page .custom-select .select-button { display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 8px; font-size: 16px; font-weight: 700; color: #313A47; cursor: pointer; transition: border-color 0.2s; }
.apply-page .custom-select .select-label { color: #313A47; font-weight: 700; }
.apply-page .custom-select .select-value { color: #313A47; }
.apply-page .custom-select .select-arrow { margin-left: 4px; font-size: 0; width:12px; height:12px; transition: transform 0.2s; background: url('../images/icon_arrow_down.svg') center no-repeat; }
.apply-page .custom-select .select-button[aria-expanded="true"] .select-arrow { transform: rotate(180deg); }
.apply-page .custom-select .select-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; background: #fff; border: 1px solid #ddd; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); list-style: none; margin: 0; z-index: 100; }
.apply-page .custom-select .select-dropdown li { padding: 10px 16px; font-size: 16px; font-weight: 400; color: #313A47; cursor: pointer; transition: background 0.2s; }
.apply-page .custom-select .select-dropdown li:hover { background: #f5f7fa; }
.apply-page .custom-select .select-dropdown li.active { background: #E8EFFF; color: #4678FD; font-weight: 500; }


/* 캠페인 등록 폼 */
.campaign-form { max-width: 1360px; margin: 40px auto 0; display: block; }
.campaign-form .input-group { position: relative; margin-top: 20px; }
.campaign-form .input-group:first-child { margin-top: 0; }
.campaign-form .input-label { display: block; font-size: 18px; font-weight: 700; color: #313A47; margin-bottom: 10px; }
.campaign-form .input-group .btn-input { cursor: pointer; position: absolute; right: 16px; top: 49px; height: 34px; line-height: 33px; font-size: 16px; font-weight: 700; color: #fff; padding: 0 10px; background-color: #4678FD; border-radius: 28px; }
.campaign-form .input-wrap { display: block; position: relative; }
.campaign-form .input-wrap input, .campaign-form .input-wrap select, .campaign-form .input-wrap textarea { width: 100%; height: 64px; line-height: 64px; padding: 0 16px; border: 1px solid #dedede; background: #fff; font-size: 16px; color: #333; transition: border-color 0.3s; }
.campaign-form .input-wrap.has-unit input { padding-right: 50px; }
.campaign-form .input-wrap.has-count input { padding-right: 80px; }
.campaign-form .input-wrap.has-count textarea { padding-right: 80px; }
.campaign-form .input-wrap .unit-text { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #313A47; pointer-events: none; }
.campaign-form .input-wrap .char-count { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: #919191; pointer-events: none; white-space: nowrap; }
.campaign-form .input-wrap textarea ~ .char-count {bottom:16px; top: auto; transform: none; }
.campaign-form .char-count .current { color: #5b2bff; font-weight: 700; }
.campaign-form .input-wrap textarea { height: auto; line-height: 1.5; padding: 16px; resize: vertical; min-height: 120px; }
.campaign-form .input-wrap input::placeholder, .campaign-form .input-wrap textarea::placeholder { color: #919191; }
.campaign-form .input-wrap input:focus, .campaign-form .input-wrap textarea:focus, .campaign-form .input-wrap select:focus { outline: none; border-color: #5b2bff; }
.campaign-form .input-wrap input.error, .campaign-form .input-wrap textarea.error { border-color: #ff3232; }
.campaign-form .input-wrap input.valid, .campaign-form .input-wrap textarea.valid { border-color: #5b2bff; }
.campaign-form .input-wrap input:disabled { background: #f5f5f5; cursor: not-allowed; }
.campaign-form .input-group .btn-input:disabled { background-color: #999; cursor: not-allowed; }
.campaign-form .validation-message { display: block; margin-top: 6px; font-size: 12px; color: #ff3232; text-align: left; min-height: 18px; }
.campaign-form .validation-message.noti { color: #5b2bff; }
.campaign-form .validation-message:empty { display: none; }
.campaign-form .noti-message { display: block; margin-top: 6px; font-size: 12px; color: #5b2bff; text-align: left; min-height: 18px; }
.campaign-form .period-inputs { display: flex; align-items: center; gap: 12px; }
.campaign-form .period-inputs label { flex: 1; }
.campaign-form .period-inputs input { width: 100%; height: 64px; padding: 0 16px; border: 1px solid #dedede; background: #fff; font-size: 16px; color: #333; }
.campaign-form .period-divider { font-size: 18px; color: #313A47; }
.campaign-form .input-wrap select { appearance: none; background: #fff url('../images/icon_arrow_down.svg') no-repeat right 16px center; background-size: 12px; cursor: pointer; padding-right: 48px; }
.campaign-form .btn { display: block; width: 100%; height: 62px; line-height: 61px; border-radius: 12px; border: 1px solid #dedede; background: #fff; color: #313A47; font-size: 18px; cursor: pointer; position: relative; margin-top: 10px; }
.campaign-form .btn.primary {max-width:200px; background: #4678FD; border: none; color: #fff; font-weight: 600; border-radius: 8px; margin: 40px auto 0; }
.campaign-form .btn.primary:after { content: ''; display: inline-block; width: 7px; height: 12px; margin-left: 14px; background: url('../images/icon_btn_arrow.svg') no-repeat; }
.campaign-form .btn.outline { background: #fff; border: 1px solid #cfcfcf; }
.campaign-form .btn.outline:after { content: ''; display: inline-block; width: 7px; height: 12px; margin-left: 14px; background: url('../images/icon_btn_arrow_gray.svg') no-repeat; }

/* 미디어 쿼리 - 768px 이하 */
@media (max-width: 768px) {
  .apply-page { padding: 100px 20px 60px; }
  .apply-page h2 { font-size: 28px; margin-bottom: 16px; }
  .apply-page .noti { font-size: 14px; }
  .apply-page .apply-notice { margin: 20px 0 30px 0; }
  .apply-page .apply-notice li { font-size: 14px; line-height: 1.6; }

  /* 테이블 스타일 */
  .apply-page .table-section table { min-width: 800px; }
  .apply-page .table-section table th, .table-section table td { padding: 8px 4px; font-size: 14px; }
  .apply-page .table-section table td .btn-count { font-size: 14px; }

  /* 커스텀 셀렉트박스 */
  .apply-page .custom-select .select-button { padding: 6px 10px; font-size: 12px; }
  .apply-page .custom-select .select-dropdown li { padding: 8px 12px; font-size: 14px; }

  /* 인플루언서 리스트 */
  .influencer-list .list-header { font-size: 11px; }
  .influencer-list .user-icon { width: 40px; height: 40px; border-radius: 10px; }
  .influencer-list .user-icon::before { width: 20px; height: 20px; }
  .influencer-list .user-name { font-size: 14px; }
  .influencer-list .user-click, .influencer-list .user-result { width: 80px; font-size: 16px; }
  .influencer-list .list-item { padding: 8px 0 8px 8px; }

  /* 캠페인 등록 폼 */
  .campaign-form { margin: 30px auto 0; }
  .campaign-form .input-group { margin-top: 16px; }
  .campaign-form .input-label { font-size: 16px; margin-bottom: 8px; }
  .campaign-form .input-group .btn-input { font-size: 14px; padding: 0 8px; height: 30px; line-height: 29px; top: 47px; }
  .campaign-form .input-wrap input, .campaign-form .input-wrap select, .campaign-form .input-wrap textarea { height: 56px; line-height: 56px; padding: 0 12px; font-size: 14px; }
  .campaign-form .input-wrap.has-unit input { padding-right: 40px; }
  .campaign-form .input-wrap.has-count input { padding-right: 70px; }
  .campaign-form .input-wrap.has-count textarea { padding-right: 70px; }
  .campaign-form .input-wrap .unit-text { font-size: 14px; right: 12px; }
  .campaign-form .input-wrap .char-count { font-size: 14px; right: 12px; }
  .campaign-form .input-wrap textarea { padding: 12px; min-height: 100px; }
  .campaign-form .validation-message { font-size: 11px; }
  .campaign-form .noti-message { font-size: 11px; }
  .campaign-form .period-inputs { flex-direction: column; gap: 12px; }
  .campaign-form .period-inputs label { width: 100%; }
  .campaign-form .period-inputs input { height: 56px; padding: 0 12px; font-size: 14px; }
  .campaign-form .period-divider { display: none; }
  .campaign-form .input-wrap select { font-size: 14px; padding-right: 40px; background-size: 10px; }
  .campaign-form .btn { height: 56px; line-height: 55px; font-size: 16px; }
  .campaign-form .btn.primary { max-width: 160px; font-size: 16px; margin: 30px auto 0; }
  .campaign-form .btn.primary:after { width: 6px; height: 10px; margin-left: 10px; }
  .campaign-form .btn.outline:after { width: 6px; height: 10px; margin-left: 10px; }
}