/* style_wrong.css */

/* 1. 좌측 패널 너비 강제 조정 (기본 600px -> 400px) */
.narrow-panel {
    width: 400px !important;
    min-width: 400px !important;
    padding: 20px !important;
}

/* 2. 상단 버튼 & 입력 그룹 레이아웃 */
.row-group {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.row-group .input-std {
    flex: 1;
    /* 남은 공간 차지 */
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.row-group .btn-load {
    width: 80px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

.btn-full {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 0px;
    /* 저장 버튼 아래 여백 */
}

/* 3. 인쇄 버튼 그룹 */
.print-group {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-print-action {
    flex: 1;
    padding: 12px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-main);
    transition: 0.2s;
}

.btn-print-action:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #f8fafc;
}


/* 4. 테이블 + 사이드 버튼 레이아웃 컨테이너 */
.table-container-row {
    display: flex;
    gap: 8px;
    height: calc(100vh - 600px);
    /* 화면 높이에 맞춰 늘리기 */
    min-height: 600px;
}

/* 테이블 영역 */
.table-wrapper {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow-y: auto;
    /* 스크롤 */
    background: white;
}

.wrong-input-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wrong-input-table th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-color);
    color: #555;
    z-index: 5;
    text-align: center;
}

.wrong-input-table td {
    padding: 2px;
    border-bottom: 1px solid #f1f5f9;
    text-align: center;
    height: 25px !important;
}

/* 테이블 5줄마다 구분선 넣기  */

/* 1. 구분선이 들어갈 공간 확보 */
.wrong-input-table tbody tr:nth-child(5n) td {
    padding-bottom: 5px !important; /* 위아래 숨통 확보를 위해 조금 더 넓힘 */
    border-bottom: none !important;  /* 표준 테두리는 아예 제거! */
}

/* 구분선 다음 줄 위쪽 여백 유지 */
.wrong-input-table tbody tr:nth-child(5n+1) td {
    padding-top: 5px !important;
}

/* 2. 핵심 로직: 5번째 행(tr) 자체에 '가짜 요소'를 그릴 준비를 시킴 */
.wrong-input-table tbody tr:nth-child(5n) {
    position: relative; /* 이 녀석을 기준으로 가짜 요소를 띄웁니다 */
}

/* 3. 진짜 구분선 그리기 (양 끝에서 떨어지고 둥근 형태) */
.wrong-input-table tbody tr:nth-child(5n)::after {
    content: '';          /* 필수 속성 (빈 박스 만듦) */
    position: absolute;   /* 공중에 띄움 */
    bottom: 0;            /* 행의 맨 바닥에 딱 붙임 */
    
    /* [요청 1] 양쪽 끝에는 살짝 닿지 않도록 간격 설정 */
    left: 6.5px;           /* 왼쪽에서 15px 뗌 */
    right: 6.5px;          /* 오른쪽에서 15px 뗌 */
    
    height: 1px;          /* 선 두께 (2px 유지) */
    background-color: #cbd5e1; /* 부드러운 색상 (유지) */
    
    /* [요청 2] 양 끝은 약간 둥근 느낌이 되도록 설정 */
    border-radius: 4px;   /* 두께보다 크게 주면 완전한 캡슐 모양이 됩니다 */
    
    display: block;
    pointer-events: none; /* 이 선 때문에 마우스 클릭이 안 되면 안 되므로 무시 설정 */
}

/* 테이블 내부 입력창 */
.cell-input {
    width: 100%;
    padding: 6px !important;
    font-size: 12px !important;
    border: 1px solid transparent;
    border-radius: 0px !important;
    text-align: center;
    background: transparent;
}

.cell-input:focus {
    border-color: var(--primary-color);
    background: white;
}

.cell-input:hover {
    background: #f8fafc;
}

/* 크롬, 사파리, 엣지, 오페라에서 화살표 제거 */
.cell-input::-webkit-outer-spin-button,
.cell-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* 파이어폭스에서 화살표 제거 */
.cell-input[type=number] {
    -moz-appearance: textfield;
}

/* 읽기 전용 순서 */
.seq-num {
    color: #94a3b8;
    font-weight: 600;
}


/* 5. 우측 세로 버튼 그룹 */
.side-controls {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 50px;
}

.btn-side {
    width: 100%;
    padding: 10px 0;
    font-size: 11px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    color: #64748b;
    line-height: 1.2;
}

.btn-side:hover {
    background: #f1f5f9;
    color: #1e293b;
    border-color: #cbd5e1;
}

.btn-add-row {
    margin-top: auto;
    /* 맨 아래로 밀기 */
    font-size: 20px;
    color: var(--primary-color);
    font-weight: bold;
    height: 50px;
}

/* 버튼 스타일 수정 및 추천 디자인 */
.btn-info-guide {
    /* 기존 .btn-side의 속성을 덮어쓰거나 추가합니다 */
    margin-top: auto;
    /* 맨 아래로 밀기 */
    height: auto !important;
    /* 텍스트 두 줄을 수용하기 위해 높이 자동 조절 */
    padding: 8px 0 !important;
    /* 위아래 여백을 줘서 클릭 영역 확보 */
    line-height: 1.3 !important;
    /* 두 줄 문구 사이의 간격 조절 */
    font-size: 11px !important;
    /* 좁은 버튼 너비에 맞게 폰트 크기 유지 */
    font-weight: 700 !important;
    /* 강조를 위해 굵게 설정 */

    /* [추천 스타일: 투명 배경 + 메인 컬러 테두리] */
    background-color: #f8fafc !important;
    /* 아주 연한 회색 배경 */
    color: var(--primary-color) !important;
    /* 글자색을 메인 파란색으로 */
    border: 1px solid var(--primary-color) !important;
    /* 테두리도 파란색으로 강조 */
    transition: all 0.2s ease;
}

.btn-info-guide:hover {
    background-color: var(--primary-color) !important;
    /* 마우스 올리면 파란색 배경 */
    color: white !important;
    /* 글자는 흰색으로 반전 */
}


/* style_wrong.css */

.table-wrapper {
    flex: 1;
    border: 1px solid var(--border-color);
    border-radius: 8px;

    /* 🔴 이 부분이 중요합니다 */
    overflow-y: auto;
    background: white;

    /* (선택) 헤더 고정을 위해 높이 제한을 줄 수도 있습니다만, 
       부모인 .table-container-row가 높이를 잡고 있어서 괜찮습니다. */
}