/* ---------------------- 기본 리셋 ---------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: 'Pretendard','Segoe UI','Apple SD Gothic Neo',sans-serif;
    background:#f5f7fb;
/*    padding:30px;*/
}

/* ---------------------- 레이아웃 ---------------------- */
.container {
    width:100%;
    max-width:1300px;
    margin:0 auto;
}

/* 카드 UI */
.card {
    background:#fff;
    border-radius:14px;
    box-shadow:0 5px 25px rgba(0,0,0,0.05);
    padding:25px;
    margin-bottom:25px;
}

/* 제목 */
.card h2 {
    font-size:20px;
    margin-bottom:20px;
    color:#333;
    font-weight:700;
}

/* ---------------------- API 설정 ---------------------- */
.api-box label { font-weight:600; margin-right:10px; }
.api-box input {
    padding:10px 14px;
    border:1px solid #ddd;
    border-radius:6px;
    width:350px;
}

/* ---------------------- 폼 ---------------------- */
.form-group { margin-bottom:15px; }
label { font-size:14px; font-weight:600; color:#333; display:block; margin-bottom:7px; }

input[type="text"] {
    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:15px;
}

/* 버튼 */
.web_btn {
    width:100%;
    padding:14px;
    background:#4f67ff;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    transition:.2s;
}
.web_btn:hover { background:#3e51d9; }

/* ---------------------- 결과 UI ---------------------- */
.result-box {
    background:#f9fafc;
    border-left:4px solid #4f67ff;
    padding:20px;
    border-radius:10px;
    margin-top:20px;
    display:none;
}
.result-box.success { border-left-color:#00c853; }
.result-box.error { border-left-color:#ff5252; }
.result-box pre {
    background:white;
    padding:12px;
    border-radius:8px;
    font-size:13px;
    white-space:pre-wrap;
}

/* ---------------------- 순위 리스트 테이블 ---------------------- */
.rank-table {
    width:100%;
    border-collapse:collapse;
    margin-top:10px;
}
.rank-table thead th {
    background:#eef1f7;
    padding:12px;
    font-size:14px;
    font-weight:700;
    color:#333;
    border-bottom:2px solid #e2e6ee;
    text-align:left;
}
.rank-table td {
    padding:12px;
    border-bottom:1px solid #eef0f3;
    vertical-align:top;
}

/* 키워드/URL */
.keyword { font-size:15px; color:#333; font-weight:600; }
.url a { color:#4f67ff; text-decoration:none; }

/* ---------------------- 달력형 순위 ---------------------- */
.day-box-wrapper {
    display:flex;
    flex-wrap: wrap;   /* ← 줄바꿈 허용 */
    gap:5px;
    padding-bottom:5px;
    overflow-x: visible;  /* 가로 스크롤 제거 */
}
.day-box {
    min-width:75px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:8px 5px;
    text-align:center;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}
.day-box-date { font-size:12px; color:#666; margin-bottom:6px; }
.day-box-rank {
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    color:#333;
}
.day-box-rank.empty { color:#bbb; }

/* 갱신 버튼 */
.refresh-btn {
    margin-top:6px;
    padding:4px 7px;
    font-size:11px;
    background:#4f67ff;
    color:white;
    border:none;
    border-radius:4px;
    cursor:pointer;
}

/* ---------------------- 모달 ---------------------- */
#chartModal {
    display:none;
    position:fixed;
    top:0;left:0;
    width:100%; height:100%;
    background:rgba(0,0,0,.5);
    align-items:center;
    justify-content:center;
    z-index:9999;
}
.modal-inner {
    background:white;
    border-radius:10px;
    width:90%; max-width:700px;
    padding:25px;
    position:relative;
}
.close-modal {
    position:absolute;
    right:10px; top:10px;
    background:#ff5252;
    color:white;
    padding:5px 10px;
    border-radius:5px;
    border:none;
}

/* ---------------------- 모달 ---------------------- */
.sub-action {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
  }
  
  .btn-screenshot {
    background: #f5f6fa;
    border: 1px solid #dcdde1;
    color: #333;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .btn-screenshot:hover {
    background: #eef0f7;
    border-color: #4f67ff;
    color: #4f67ff;
  }
  
  .btn-download {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
  }
  
  .btn-download:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    transform: translateY(-2px);
  }
  
  .btn-download:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
  }
  
  .btn-download i {
    font-size: 16px;
  }
  
  .btn-download span {
    font-size: 14px;
  }
  
  /* ===========================
     🔥 전체 오버레이 (배경 흐림)
  =========================== */
  .loading-overlay {
      display:none;
      position:fixed;
      top:0; left:0;
      width:100%; height:100%;
      background:rgba(0,0,0,0.45);
      backdrop-filter:blur(6px);
      z-index:99999;
      color:white;
      align-items:center;
      justify-content:center;
      flex-direction:column;
      animation:fadeIn .25s ease-out;
  }
  
  @keyframes fadeIn {
      from { opacity:0; }
      to { opacity:1; }
  }
  
  /* ===========================
     🔵 네모칸 점프 로딩바
  =========================== */
  .box-loader {
      display:flex;
      gap:10px;
      margin-bottom:15px;
  }
  
  .box-loader div {
      width:16px;
      height:16px;
      background:#4f67ff;
      border-radius:4px;
      animation:jump 0.6s infinite alternate;
  }
  
  .box-loader div:nth-child(2) { animation-delay:0.15s; }
  .box-loader div:nth-child(3) { animation-delay:0.30s; }
  .box-loader div:nth-child(4) { animation-delay:0.45s; }
  
  @keyframes jump {
      0%   { transform:translateY(0);    opacity:1; }
      100% { transform:translateY(-14px); opacity:0.5; }
  }
  
  /* ===========================
     텍스트 깜빡임
  =========================== */
  .loading-msg {
      font-size:18px;
      font-weight:600;
      letter-spacing:0.5px;
      animation:textBlink 1.5s infinite;
  }
  
  @keyframes textBlink {
      0%,100% { opacity:1; }
      50%     { opacity:0.4; }
  }
  
  .result-card {
      margin-top:20px;
      padding:20px;
      background:#f8f9ff;
      border-radius:12px;
      border:1px solid #e3e6ff;
  }
  
  .result-card h3 {
      font-size:18px;
      margin-bottom:15px;
  }
  
  .result-card h4 {
      margin-top:20px;
      font-size:16px;
      font-weight:700;
  }
  
  .result-card ul {
      list-style:none;
      padding:0;
  }
  
  .result-card li {
      padding:4px 0;
      font-size:14px;
  }
  
  .score-summary {
      display:flex;
      gap:12px;
      margin-bottom:15px;
  }
  
  .score-item {
      flex:1;
      background:#eef1ff;
      border-radius:10px;
      padding:12px;
      text-align:center;
  }
  
  .score-item span {
      display:block;
      font-size:13px;
      color:#555;
  }
  
  .score-item strong {
      font-size:26px;
      font-weight:800;
      color:#4f67ff;
  }
  
  .analysis-container {
      max-width: 1200px;
      margin: 0 auto;
  }
  
  /* ===== 상단 요약 ===== */
  .summary-card {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: linear-gradient(180deg, #f3f6ff, #ffffff);
      border-radius: 20px;
      padding: 26px;
      box-shadow: 0 10px 30px rgba(0,0,0,0.05);
      margin-bottom: 24px;
  }
  
  .summary-title {
      font-size: 18px;
      font-weight: 800;
  }
  
  .summary-url {
      margin-top: 4px;
      font-size: 13px;
      color: #6b7280;
  }
  
  .summary-score {
      text-align: right;
  }
  
  .score-label {
      font-size: 12px;
      color: #6b7280;
  }
  
  .score-value {
      font-size: 36px;
      font-weight: 800;
      color: #4f46e5;
  }
  
  /* ===== 지표 카드 ===== */
  .metric-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 16px;
      margin-bottom: 30px;
  }
  
  .metric-item {
      background: #fff;
      border-radius: 18px;
      padding: 22px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  }
  
  .metric-label {
      font-size: 13px;
      color: #6b7280;
  }
  
  .metric-value {
      margin-top: 8px;
      font-size: 20px;
      font-weight: 800;
  }
  
  .metric-value.warning { color: #f59e0b; }
  .metric-value.danger  { color: #ef4444; }
  
  /* ===== 테이블 ===== */
  .table-card {
      background: #fff;
      border-radius: 20px;
      padding: 26px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  }
  
  .card-title {
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  
  .card-title .btn-download {
      margin-bottom: 0;
  }
  
  .backlink-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
  }
  
  .backlink-table th {
      text-align: left;
      padding: 12px;
      color: #6b7280;
      border-bottom: 1px solid #e5e7eb;
  }
  
  .backlink-table td {
      padding: 12px;
      border-bottom: 1px solid #f1f5f9;
  }
  
  .muted {
      color: #9ca3af;
  }
  
  /* ===== 배지 ===== */
  .badge {
      padding: 4px 10px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 700;
  }
  
  .badge.safe {
      background: #dcfce7;
      color: #16a34a;
  }
  
  .badge.warning {
      background: #fef3c7;
      color: #b45309;
  }
  
  .badge.danger {
      background: #fee2e2;
      color: #b91c1c;
  }
  
  .badge.safe    { background:#dcfce7; color:#16a34a; }
  .badge.warning { background:#fef3c7; color:#b45309; }
  .badge.danger  { background:#fee2e2; color:#b91c1c; }
  .muted         { color:#9ca3af; }
  
  /* ===== DataTables 스타일 ===== */
  .form-control, .form-control-sm {
      display: block;
      width: 100%;
      padding: 0.375rem 0.75rem;
      font-size: 0.875rem;
      font-weight: 400;
      line-height: 1.5;
      color: #212529;
      background-color: #fff;
      background-image: none;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }
  
  .form-control:focus, .form-control-sm:focus {
      color: #212529;
      background-color: #fff;
      border-color: #86b7fe;
      outline: 0;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
  
  .form-control-sm {
      padding: 0.25rem 0.5rem;
      font-size: 0.875rem;
      border-radius: 0.25rem;
  }
  
  /* ===== 반응형 ===== */
  @media (max-width: 768px) {
      .summary-card {
          flex-direction: column;
          gap: 16px;
          text-align: left;
      }
  
      .score-value {
          font-size: 28px;
      }
  }