@charset "utf-8";

body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; overflow-x: hidden; background: #ffffff; min-height: 100vh; position: relative; }
.skip-nav {position:absolute; top:-100px; left:0; width:100%; padding:15px; text-align:center; background:#4678FD; color:#fff; z-index:10000;}
.skip-nav:focus {top:0;}

/* Header */
header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; width: 100%; margin: 0 auto; padding: 30px 40px; display: flex; justify-content: space-between; align-items: center; backdrop-filter: blur(10px); }
header .header-container { width: 100%; max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
header .logo { font-size:0; }
header nav { display: flex; align-items: center; gap: 30px; }
header nav a { text-decoration: none; color: #000; font-size: 18px; font-weight: 500; transition: color 0.3s; }
header nav a:hover { color: #4678FD; }
header nav a.active { color: #4678FD; background-color: #FFEFE4;}

header .header-buttons { display: flex; gap: 15px; margin-left: 20px; }
header .header-buttons a { display: flex; align-items: center; justify-content: center; width: 105px; height: 39px; line-height:39px; border: 1px solid #333; border-radius: 39px; color: #333; text-decoration: none; font-size: 16px; transition: all 0.3s; }
header .header-buttons .btn-signup { color: #fff; border: 0; background: #4678FD; }

.container {padding-top:99px;}
.container h2 { font-size: 42px; font-weight: 700; color: #111; }

/* Footer */
.footer {background-color:#000; color:#fff; padding:80px 20px;}
.footer .footer-inner {max-width:1395px; margin:0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap;}
.footer .footer-logo img {width:200px; max-width:100%;}
.footer .footer-info {flex:1; min-width:260px; font-size:16px; line-height:1.8;}
.footer .footer-info a {text-decoration: underline;}
.footer .footer-contact {min-width:220px; text-align:right; font-size:16px; line-height:1.8;}
.footer .footer-contact a {color:#fff; text-decoration:none;}
.footer .footer-contact a:hover {text-decoration:underline;}

/* 탭메뉴 */
.tab-menu { display: flex; margin-top: 34px; border-bottom: 1px solid #4678FD; margin-bottom:20px;}
.tab-menu li {flex:1; max-width:273px; margin-left:-1px;}
.tab-menu li a { display:flex; align-items: center; justify-content: center; width:100%; height: 58px; font-size: 22px; font-weight: 700; color: #919191; border:1px solid #4678FD; border-bottom:0; border-left:0;}
.tab-menu li:first-child a { border-left: 1px solid #4678FD; }
.tab-menu li.active a { color: #fff; font-weight: 600; background-color: #4678FD;}

/* 표형식 */
.table-section { margin-top: 20px;}
.table-section table { width: 100%; border-collapse: collapse; font-size: 16px; color: #313A47; }
.table-section th,
.table-section td { padding: 16px 18px; text-align: center; border-bottom: 1px solid #919191; }
.table-section td.left {text-align: left;}
.table-section td a {text-decoration: underline;}
.table-section td a:hover {color: #4678FD;}
.table-section thead th { font-size: 16px; font-weight: 700; color: #313A47; border-top: 2px solid #919191; border-bottom: 1px solid #919191; }
.table-section tfoot th {border-bottom: 2px solid #919191;}
.table-section .status-completed { color: #4678FD; }

/* 하단 페이징 */
.pagination { margin-top: 45px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.pagination .page-btn, .pagination .page-number { width: 32px; height: 34px; line-height:31px; border-radius: 4px; color: #313A47; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s; }
.pagination .page-number.active { background: #E6E6E6; }
.pagination .page-btn span { display: inline-block; font-size: 16px;  }
.pagination .page-btn {border:1px solid #E6E6E6;}

/* 버튼 */
.btn-prc {flex-shrink: 0; width: 205px; height: 64px; border-radius: 12px; border: 1px solid #4678FD; background: #fff; color: #4678FD; font-size: 20px; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.btn-prc:hover { background: #4678FD; color: #fff; box-shadow: 0 6px 16px rgba(92, 46, 255, 0.25); }
.btn-prc::after {content:''; display:inline-block; width:7px; height:12px; margin-left:14px; background: url('../images/icon_btn_arrow_purple.svg') no-repeat;}
.btn-prc:hover::after {background: url('../images/icon_btn_arrow_white.svg') no-repeat;}

/* 라디오 버튼 */
.radio-box { position: relative; display: flex; align-items: center; cursor: pointer; }
.radio-box input { position: absolute; opacity: 0; pointer-events: none; }
.radio-box span { display: inline-flex; align-items: center; gap: 12px; padding-left: 30px; font-size:14px; line-height:18px }
.radio-box span::before { content: ""; position: absolute; left: 0; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #919191; background: #fff; transition: all 0.2s ease; box-sizing: border-box; }
.radio-box input:checked + span::before { border:2px solid #4c2dff }
.radio-box input:checked + span::after { content: ""; position: absolute; left: 4px; top:4px; width: 10px; height: 10px; border-radius: 50%; background: #4c2dff;  border:none}

 /* 파일 업로드 */
.file-upload { margin-top: 14px; }
.file-upload .btn-upload { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 60px; border: 2px solid #d7d7d7; border-radius: 8px; background: #fff; cursor: pointer; transition: all 0.2s ease; }
.file-upload .btn-upload:hover { border-color: #4c2dff; background: #f8f7ff; }
.file-upload .upload-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #d7d7d7; color: #fff; font-size: 0; font-weight: 300; line-height: 1; background: url('../images/icon_add.svg') center no-repeat;}
.file-upload .upload-text { font-size: 16px; font-weight: 600; color: #919191; }
.file-upload .btn-upload:hover .upload-text { color: #4c2dff; }
.file-upload .file-name { position: relative; display: flex; align-items: center; justify-content: space-between; height:60px; padding: 20px 16px 10px; background: #f7f8f9; border-radius: 8px; border: 2px solid #d7d7d7;}
.file-upload .file-title {position: absolute; left: 15px; top: -1px; font-size: 11px;  color: #999;}
.file-upload .file-name-text { font-size: 14px; color: #333; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.file-upload .btn-delete { padding: 4px 12px; border: 1px solid #d7d7d7; border-radius: 6px; background: #fff; color: #666; font-size: 12px; cursor: pointer; transition: all 0.2s ease; }
.file-upload .btn-delete:hover { border-color: #ff3232; color: #ff3232; background: #fff5f5; }

.popup {z-index:9999; display: none;position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); backdrop-filter: blur(10px);}
.popup .popup-inner { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; width:100%; max-width:420px; min-height:300px; padding:20px; text-align: center; border-radius:20px; transform: translate(-50%, -50%); background: #fff;}
.popup .popup-inner .popup-content {display:flex; flex: 1; flex-direction: column; justify-content: center; font-size:16px; font-weight:500; color:#000; line-height:150%;}
.popup .popup-inner .popup-content .popup-title {font-size:24px; font-weight:700; line-height:120%; padding:30px 0 20px}
.popup .popup-inner .popup-content .popup-title .sub {font-size:18px; font-weight: 500;}
.popup .popup-inner .popup-content .popup-text strong {font-weight: 700;}
.popup .popup-inner .popup-content .radio-group {margin-top:20px; display:flex; flex-direction: column; gap:12px; text-align:left;}
.popup .popup-inner .popup-content .desc-red {margin-top: 12px; color: #ff3232; font-size: 12px; line-height:135%; font-weight: 500;}
.popup .popup-inner .popup-content .point {font-weight: 700; color: #4678FD;}
.popup .popup-inner .btn-confirm {cursor: pointer; display:flex; align-items: center; justify-content: center; width:100%; height:42px; color:#fff; font-size:14px; font-weight: 700; border-radius: 12px;; background-color: #4678FD; margin-top:15px;}
.popup .popup-inner .btn-close {position: absolute; right:6px; top:6px; width:36px; height:36px; font-size: 0; background:url('../images/icon_popup_close.svg') center no-repeat; cursor: pointer; border: none; background-color: transparent;}


/* 인플루언서 리스트 */
.influencer-list { margin-top: 24px; }
.influencer-list .list-header { display: flex; align-items: center; padding: 9px 0; font-size: 12px; font-weight: 700; color: #313A47; }
.influencer-list .list-header .col-name { flex: 1; text-align: left; }
.influencer-list .list-header .col-click { width: 33%; text-align: center; }
.influencer-list .list-header .col-result { width: 33%; text-align: center; }
.influencer-list .list-body { list-style: none; margin: 0; padding: 0; max-height: 400px; overflow-y: auto; border-bottom: 1px solid #E0E0E0;}
.influencer-list .list-body::-webkit-scrollbar { width: 3px; }
.influencer-list .list-body::-webkit-scrollbar-track { background: #f1f1f1; }
.influencer-list .list-body::-webkit-scrollbar-thumb { background: #C5D5FF; border-radius: 3px; }
.influencer-list .list-body::-webkit-scrollbar-thumb:hover { background: #4678FD; }
.influencer-list .list-item { display: flex; align-items: center; padding: 10px 0 10px 10px; border-top: 1px solid #E0E0E0; }
.influencer-list .list-item:last-child { border-bottom: none; }
.influencer-list .user-profile { flex: 1; display: flex; align-items: center; gap: 12px; }
.influencer-list .user-icon { width: 48px; height: 48px; border-radius: 12px; background: #C5D5FF; position: relative; }
.influencer-list .user-icon::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23fff"><circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/></svg>') center no-repeat; background-size: contain; }
.influencer-list .user-name { font-size: 16px; font-weight: 500; color: #313A47; }
.influencer-list .user-click { width: 33%; text-align: center; font-size: 18px; font-weight: 400; color: #313A47; }
.influencer-list .user-result { width: 33%; text-align: center; font-size: 18px; font-weight: 400; color: #313A47; }

/********************************************************* Tablet *********************************************************/
@media (min-width:769px) and (max-width: 1200px) {
  header nav {gap:2.5vw}
  header nav a {font-size:1.5vw}
  header .header-buttons a {width:8.75vw; font-size:1.33vw}

}


/********************************************************* Mobile *********************************************************/
@media (max-width: 768px) {
  header { height:63px; padding: 0 9px 0 20px; flex-wrap: wrap;}
  header nav { display:none; position:absolute; left:0; top:63px; width:100%; height:calc(100vh - 63px); background-color: #fff; z-index:1000; gap: 15px; font-size: 12px; text-align: center; padding-top:25px}
  header nav a {display: block; line-height:28px; margin-top:28px}
  header .header-buttons { margin-left: 0; justify-content: center; gap: 10px; text-align: center;}
  header .header-buttons a {width:116px; height:47px; line-height:47px; border-radius: 28px;}

  header .btn-login-mobile {display:inline-block; width:50px; height:18px; line-height:18px; text-align:center; color:#fff; font-size:12px; border-radius: 12px; background-color: #4678FD;}
  header .mobile-menu-btn {position: relative; display:inline-block; width:38px; height:63px; font-size:0;}
  header .mobile-menu-btn span,
  header .mobile-menu-btn::before,
  header .mobile-menu-btn::after {position:absolute; left:50%; top:50%; width:16px; height:2px; margin-left:-8px; margin-top:-1px; background-color: #313A47;}
  header .mobile-menu-btn::before,
  header .mobile-menu-btn::after {content: ''; display:block;}
  header .mobile-menu-btn::before {transform: translateY(-6px);}
  header .mobile-menu-btn::after {transform: translateY(6px);}

  header .mobile-menu-btn span,
  header .mobile-menu-btn::before,
  header .mobile-menu-btn::after {transition: all 0.5s ease;}

  header.open {background-color: #fff;}
  header.open nav {display:flex; flex-direction: column;}
  header.open .mobile-menu-btn span {opacity:0;}
  header.open .mobile-menu-btn::before {transform: rotate(45deg);}
  header.open .mobile-menu-btn::after {transform: rotate(-45deg);}

  .container {padding-top:63px;}
  .container h2 { font-size: 28px; }

  .footer {padding:56px 20px;}
  .footer .footer-logo img {width:160px;}
  .footer .footer-inner {flex-direction:column; gap:55px; text-align:left;}
  .footer .footer-info {font-size: 14px;}
  .footer .footer-contact {font-size:14px; text-align:left;}

  .tab-menu li a {font-size: 16px; height: 48px;}

  /* 표형식 */
  .table-section { margin-top: 16px; padding: 24px 16px; overflow-x: auto; }
  .table-section table { font-size: 13px; min-width: 800px; }
  .table-section th,
  .table-section td { padding: 10px 8px; font-size: 13px; }
  .table-section thead th { font-size: 14px; }

  .btn-prc {width: 100%; height: 50px; font-size: 16px;}

  .popup .popup-inner {max-width:324px}
  .popup .popup-inner .popup-content {font-size: 14px;}

  .influencer-list .user-icon {width:24px; height:24px;}

 }