/* css/style.css - v1.2 - IP Table Scroll Wrapper Added */

/* --- 전체 컨테이너 --- */
#mlc-link-checker-container {
    /* background-color: #ffffff; */ /* 배경 제거됨 */
    padding: 25px 30px;
    /* border: 1px solid #ddd; */ /* 외곽선 제거됨 */
    /* border-radius: 8px; */ /* 둥근 모서리 제거됨 */
    margin: 20px auto;
    max-width: 900px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.08); */ /* 그림자 제거됨 */
    /* overflow: hidden; */ /* 필요시 제거 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* 컨테이너 제목 */
#mlc-link-checker-container > h3 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-weight: 600;
    font-size: 1.4em;
}

/* --- 입력 폼 --- */
#mlc-link-checker-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

/* 입력 필드 */
#mlc-url-input {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#mlc-url-input:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
}

/* --- 버튼 스타일 --- */
#mlc-submit-button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease, transform 0.1s ease;
    vertical-align: middle;
}

#mlc-submit-button:hover:not(:disabled) {
    background-color: #2980b9;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
#mlc-submit-button:active:not(:disabled) {
     transform: translateY(0px);
     box-shadow: none;
}

#mlc-submit-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- 새 로딩 영역 스타일 --- */
#mlc-loading-area {
    transition: opacity 0.3s ease;
    margin-bottom: 20px;
    text-align: center;
}

.mlc-fancy-spinner {
    margin: 0 auto 15px auto;
    width: 70px;
    text-align: center;
}

.mlc-fancy-spinner > div {
    width: 14px;
    height: 14px;
    background-color: #3498db;
    border-radius: 100%;
    display: inline-block;
    animation: mlc-bouncedelay 1.4s infinite ease-in-out both;
    margin: 0 2px;
}

.mlc-fancy-spinner .mlc-bounce1 { animation-delay: -0.32s; }
.mlc-fancy-spinner .mlc-bounce2 { animation-delay: -0.16s; }

@keyframes mlc-bouncedelay {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1.0); }
}

.mlc-loading-text { font-weight: 500; color: #555; margin: 0; }
.mlc-loading-tip { transition: opacity 0.5s ease; margin-top: 8px; font-size: 0.9em; color: #777; min-height: 1.2em; }

/* --- 결과 표시 영역 --- */
#mlc-result-area {
    padding: 0;
    border: 2px solid #e9e9e9;
    min-height: 80px;
    border-radius: 4px;
    background-color: #f9f9f9;
    transition: border-color 0.5s ease, opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: translateY(10px);
    overflow: hidden;
    /* display: none; Initially hidden, controlled by JS */
}

#mlc-result-area.results-visible {
    opacity: 1;
    transform: translateY(0);
}


/* 결과 래퍼 */
.mlc-results-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    padding: 30px;
    opacity: 0;
    transition: opacity 0.4s ease 0.3s;
}

#mlc-result-area.results-visible .mlc-results-wrapper {
   opacity: 1;
}

/* --- 왼쪽 요약 영역 --- */
.mlc-summary-section { flex: 1; min-width: 220px; padding-right: 30px; border-right: 1px solid #eee; }
@media (max-width: 700px) {
    .mlc-results-wrapper { gap: 20px; padding: 20px; }
    .mlc-summary-section { flex-basis: 100%; border-right: none; padding-right: 0; border-bottom: 1px solid #eee; padding-bottom: 20px; margin-bottom: 20px; text-align: left; }
}

/* 상태 표시 */
.mlc-status-indicator { width: 85px; height: 85px; border-radius: 50%; margin: 0 auto 20px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 600; color: white; border: 5px solid rgba(0,0,0,0.05); line-height: 1.2; box-shadow: 0 3px 6px rgba(0,0,0,0.1); animation: mlc-pulse 2s infinite ease-in-out; }
@keyframes mlc-pulse { 0% { transform: scale(1); box-shadow: 0 3px 6px rgba(0,0,0,0.1); } 50% { transform: scale(1.03); box-shadow: 0 5px 10px rgba(0,0,0,0.15); } 100% { transform: scale(1); box-shadow: 0 3px 6px rgba(0,0,0,0.1); } }
@media (max-width: 700px) { .mlc-status-indicator { margin: 0 0 15px 0; width: 75px; height: 75px; } }
.mlc-status-indicator span { font-size: 1.1em; text-shadow: 1px 1px 2px rgba(0,0,0,0.25); }
.mlc-status-indicator.status-safe { background-color: #2ecc71; border-color: #27ae60;}
.mlc-status-indicator.status-suspicious { background-color: #f39c12; border-color: #d35400;}
.mlc-status-indicator.status-malicious { background-color: #e74c3c; border-color: #c0392b;}
.mlc-status-indicator.status-error { background-color: #95a5a6; border-color: #7f8c8d;}
.mlc-status-indicator.status-unreachable { background-color: #95a5a6; border-color: #7f8c8d; }
.mlc-status-indicator.status-unknown { background-color: #bdc3c7; border-color: #95a5a6;}

/* 요약 영역 텍스트 */
.mlc-summary-section p { margin-bottom: 12px; word-wrap: break-word; font-size: 0.95em; line-height: 1.5; color: #444; }
.mlc-summary-section p strong { display: block; margin-bottom: 4px; font-size: 0.9em; color: #666; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.mlc-summary-section p small { font-size: 0.85em; color: #888; }

/* 요약 영역 스크린샷 */
.mlc-summary-section h4 { font-size: 1em; margin-top: 20px; margin-bottom: 10px; color: #2c3e50; text-align: left; font-weight: 600; border-top: 1px dashed #eee; padding-top: 15px; }
.mlc-summary-section img { max-width: 100%; height: auto; border: 1px solid #ddd; margin-top: 5px; display: block; border-radius: 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* --- 오른쪽 상세 정보 영역 --- */
.mlc-details-section { flex: 2.5; min-width: 0; }

/* --- 최종 판단 근거 섹션 스타일 --- */
.mlc-judgement-section {
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 15px 20px;
    margin-bottom: 25px;
    background-color: #f9f9f9;
    opacity: 0;
    transform: translateY(-10px);
    animation: mlc-fade-in-down 0.5s ease forwards;
    animation-delay: 0.4s;
}
@keyframes mlc-fade-in-down { to { opacity: 1; transform: translateY(0); } }
.mlc-judgement-section h5 { margin: 0 0 10px 0; font-size: 1.1em; font-weight: 600; color: #333; display: flex; align-items: center; }
.mlc-judgement-icon { display: inline-block; width: 20px; height: 20px; margin-right: 8px; }
.mlc-judgement-icon::before { font-size: 1.1em; line-height: 1; vertical-align: middle; }
.mlc-judgement-section p { margin: 0; font-size: 0.95em; line-height: 1.6; color: #444; }
.mlc-judgement-section.status-malicious { border-color: #e74c3c; background-color: #fceded; }
.mlc-judgement-section.status-malicious h5 { color: #c0392b; }
.mlc-judgement-section.status-malicious .mlc-judgement-icon::before { content: '\26A0'; color: #c0392b; }
.mlc-judgement-section.status-suspicious { border-color: #f39c12; background-color: #fef9e7; }
.mlc-judgement-section.status-suspicious h5 { color: #d35400; }
.mlc-judgement-section.status-suspicious .mlc-judgement-icon::before { content: '\2753'; color: #d35400; }
.mlc-judgement-section.status-safe { border-color: #2ecc71; background-color: #eafaf1; }
.mlc-judgement-section.status-safe h5 { color: #27ae60; }
.mlc-judgement-section.status-safe .mlc-judgement-icon::before { content: '\2714'; color: #27ae60; }
.mlc-judgement-section.status-error, .mlc-judgement-section.status-unreachable, .mlc-judgement-section.status-info { border-color: #bdc3c7; background-color: #f8f9f9; }
.mlc-judgement-section.status-error h5, .mlc-judgement-section.status-unreachable h5, .mlc-judgement-section.status-info h5 { color: #7f8c8d; }
.mlc-judgement-section.status-error .mlc-judgement-icon::before, .mlc-judgement-section.status-unreachable .mlc-judgement-icon::before, .mlc-judgement-section.status-info .mlc-judgement-icon::before { content: '\2139'; color: #7f8c8d; }
/* --- 최종 판단 근거 섹션 스타일 끝 --- */

/* 상세 분석 정보 제목 */
.mlc-details-section > h4 {
    margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #e0e0e0; padding-bottom: 12px; font-size: 1.25em; color: #2c3e50; font-weight: 600;
    opacity: 0; transform: translateX(-15px); animation: mlc-fade-in-left 0.5s ease forwards; animation-delay: 0.5s;
}

/* 상세 정보 각 블록 */
.mlc-detail-block {
    margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #f0f0f0;
    opacity: 0; transform: translateX(-15px); animation: mlc-fade-in-left 0.5s ease forwards;
}
.mlc-results-wrapper .mlc-detail-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mlc-detail-block.mlc-errors { border-bottom: none !important; margin-bottom: 0 !important; padding-bottom: 0 !important; margin-top: 20px; }

/* 블록별 애니메이션 지연 */
/* 주의: nth-child는 판단 근거(.mlc-judgement-section)도 포함하여 계산될 수 있으므로, 실제 HTML 구조에 따라 조정 필요 */
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(1) { animation-delay: 0.6s; } /* judgement 다음 첫 블록 */
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(2) { animation-delay: 0.7s; }
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(3) { animation-delay: 0.8s; }
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(4) { animation-delay: 0.9s; }
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(5) { animation-delay: 1.0s; }
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block:nth-of-type(6) { animation-delay: 1.1s; }
#mlc-result-area.results-visible .mlc-results-wrapper .mlc-detail-block.mlc-errors { animation-delay: 1.2s; } /* 오류 블록은 항상 마지막 지연 */


@keyframes mlc-fade-in-left { to { opacity: 1; transform: translateX(0); } }

/* 블록 제목 */
.mlc-detail-block h5 { margin: 0 0 8px 0; font-size: 1em; color: #2c3e50; font-weight: 600; }

/* 블록 값 영역 */
.mlc-detail-block .detail-value-area { padding-left: 10px; font-size: 0.95em; color: #555; line-height: 1.6; word-wrap: break-word; }
.mlc-detail-block .detail-value-area ul { margin: 5px 0 0 0; padding-left: 18px; list-style-type: none; }
.mlc-detail-block .detail-value-area li { margin-bottom: 6px; position: relative; padding-left: 15px; }
.mlc-detail-block .detail-value-area li strong { color: #333; margin-right: 5px; font-weight: 600; }
.mlc-detail-block .detail-value-area a { color: #3498db; text-decoration: none; border-bottom: 1px dotted #3498db; transition: color 0.2s ease, border-bottom-color 0.2s ease; word-break: break-all; }
.mlc-detail-block .detail-value-area a:hover { color: #2980b9; border-bottom-color: #2980b9; text-decoration: none; }
.mlc-detail-block .detail-value-area span { display: block; margin-top: 4px; font-size: 0.9em; }
.mlc-detail-block .detail-value-area span[style*="color:orange"] { color: #e67e22 !important; }
.mlc-detail-block .detail-value-area span[style*="color:grey"] { color: #7f8c8d !important; font-style: italic; }

/* ★★★ IP 상세 정보 테이블 가로 스크롤 컨테이너 ★★★ */
.mlc-table-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 5px;
    margin-top: 5px; /* 테이블 위 간격 */
}

/* IP 상세 정보 테이블 스타일 */
.mlc-ip-details-table {
    width: 100%;
    border-collapse: collapse;
    /* margin-top 제거 (wrapper 에서 관리) */
    font-size: 0.9em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    border-radius: 4px;
    overflow: hidden;
    /* 테이블 내용이 넘칠 수 있도록 최소 너비 설정 (선택사항) */
     min-width: 550px; /* 예시 값, 필요시 조절 */
}

.mlc-ip-details-table th,
.mlc-ip-details-table td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap; /* 기본적으로 줄바꿈 방지 (스크롤 유도) */
}
/* AS 조직은 내용 길 수 있으므로 줄바꿈 허용 */
.mlc-ip-details-table td:nth-child(4) {
    white-space: normal;
}


.mlc-ip-details-table th { background-color: #f5f5f5; font-weight: 600; color: #333; }
.mlc-ip-details-table tbody tr:nth-child(even) { background-color: #fdfdfd; }
.mlc-ip-details-table tbody tr:hover { background-color: #f0f8ff; }
.mlc-ip-details-table td:nth-child(1) { font-family: monospace; } /* IP */
.mlc-ip-details-table td:nth-child(2) { text-align: left; } /* 국가 */
.mlc-flag-emoji { display: inline-block; margin-right: 6px; font-size: 1.2em; vertical-align: middle; line-height: 1; }
td .error-message { color: #b94a48; font-size: 0.9em; display: block; margin-top: 3px; white-space: normal; } /* 오류 메시지 줄바꿈 허용 */

/* 오류 메시지 블록 스타일 */
.mlc-detail-block.mlc-errors h5 { color: #c0392b; }
.mlc-detail-block.mlc-errors ul { margin: 8px 0 0 0; padding: 15px 20px; background-color: #fceded; border: 1px solid #f7cdcd; border-left: 4px solid #e74c3c; border-radius: 4px; list-style-type: none; }
.mlc-detail-block.mlc-errors li { color: #a94442; font-size: 0.9em; margin-bottom: 8px; line-height: 1.5; padding-left: 0; }
.mlc-detail-block.mlc-errors li strong { color: #a94442; font-weight: bold; margin-right: 5px; }

/* 모바일 화면 대응 Form Layout */
@media (max-width: 600px) {
    #mlc-link-checker-form { flex-direction: column; gap: 15px; }
    #mlc-submit-button { width: 100%; padding: 12px 20px; }
}