/* 기본 설정 */
body {
    font-family: 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', Dotum, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333;
    box-sizing: border-box;
}
:root { --main-padding: 60px 20px; }

/* 주요 컨테이너 */
.main, .index {
    padding: var(--main-padding);
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.main {
    height: 100vh; /* viewport 높이 전체를 사용 */
    justify-content: center; /* 수직 중앙 정렬 */
}
.index {
    display: none;
    height: 100vh; /* 화면 전체 높이를 차지하도록 설정 */
}

/* 로고, 부제목, 섹션 제목 */
img { max-width: 380px; height: auto; display: block; margin-bottom: 40px; }
.subtitle { text-align: center; font-weight: 600; font-size: 1.1em; color: #555; margin-bottom: 30px; }
.section-title { text-align: center; font-weight: 700; font-size: 1.9em; color: #2c3e50; margin: 0; }

/* --- ▼▼▼ 새로고침 버튼 관련 스타일 추가 ▼▼▼ --- */
.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}
.refresh-list {
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.refresh-list:hover {
    background-color: #0056b3;
}
/* --- ▲▲▲ 스타일 추가 끝 ▲▲▲ --- */


/* 폼 & 목록 컨테이너 */
.form-container, .list-container {
    background-color: #eef1f6;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    width: 100%;
    max-width: 520px;
    box-sizing: border-box;
    text-align: center;
    animation: fadeIn 0.6s ease-out;
}
.list-container {
    max-width: 800px;
    flex-grow: 1; /* 부모 컨테이너의 남은 공간을 모두 차지 */
    display: flex; /* 내부 아이템(목록)의 크기 조절을 위해 flex로 설정 */
    flex-direction: column;
    min-height: 0; /* flex 아이템의 크기가 부모를 넘어가는 것을 방지 */
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Form Grid 레이아웃 */
.form-grid { display: grid; grid-template-columns: auto 1fr; gap: 15px 15px; margin-bottom: 30px; }
.grid-full-width { grid-column: 1 / -1; }
.form-label { font-size: 1em; font-weight: 500; color: #333; text-align: center; display: flex; align-items: center; justify-content: center; }
.form-control input, .form-control .select2-container { width: 100%; }

/* 입력창 & Select 공통 스타일 */
input { width: 100%; height: 48px; padding: 12px; margin: 0; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 1em; background-color: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; text-align: center; color: #333; }
input:focus, .select2-container--open .select2-selection { border-color: #80bdff !important; outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important; }
.select2-container { width: 100% !important; height: 48px; box-sizing: border-box; text-align: center; }
.select2-selection { height: 48px !important; border-radius: 8px !important; border: 1px solid #ddd !important; background-color: #fff !important; display: flex !important; align-items: center; justify-content: center; }
.select2-selection__rendered { color: #333 !important; line-height: 46px !important; }
.select2-selection__placeholder { color: #aaa !important; }
.select2-selection__arrow { height: 46px !important; right: 8px !important; }
.select2-dropdown { border-color: #ddd !important; border-radius: 8px !important; }

/* 버튼 */
.button-group { display: flex; gap: 10px; margin-bottom: 25px; }
.button-group button, .modal-buttons button, .signature-buttons button { flex: 1; padding: 13px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 1.1em; font-weight: 600; transition: background-color 0.2s ease, transform 0.2s ease; }
.button-group button:hover, .modal-buttons button:hover, .signature-buttons button:hover { transform: translateY(-2px); }
button.primary { background-color: #28a745; color: white; }
button.primary:hover { background-color: #218838; }
button.secondary { background-color: #6c757d; color: white; }
button.secondary:hover { background-color: #5a6268; }

/* 메시지 영역 */
.message-area { padding: 8px 12px; line-height: 1.8; background-color: #fceeee; border: 1px solid #f7c5c5; border-radius: 8px; font-size: 0.9em; color: #d9534f; font-weight: 500; white-space: pre-line; text-align: center; }

/* 목록 페이지 스타일 */
.items {
    width: 100%;
    /* max-height: 500px; */ /* 고정 높이 속성 제거 */
    flex-grow: 1; /* 부모 컨테이너의 남은 공간을 모두 차지 */
    min-height: 0; /* flex 아이템의 크기가 부모를 넘어가는 것을 방지 */
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background-color: #fefefe;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
}
.items::-webkit-scrollbar { width: 8px; }
.items::-webkit-scrollbar-thumb { background-color: #c0c0c0; border-radius: 4px; }

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    width: 95%;
    box-sizing: border-box;
}
.item:last-child { border-bottom: none; }
.item-text { flex: 1; cursor: pointer; text-align: left; }
.item-text:hover { color: #007bff; }
button.del-btn { background: #dc3545; color: white; border: none; border-radius: 5px; padding: 5px 10px; font-size: 0.8em; cursor: pointer; }

/* 모달 스타일 */
.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #fefefe;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    max-width: 400px;
    text-align: center;
    animation: fadeIn 0.3s ease-out;
}
.modal-content.view-modal {
    max-width: 90vw;
    width: 1200px;
    height: 90vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
}
.modal-content h2 { margin-top: 0; }
.modal-buttons { display: flex; gap: 10px; margin-top: 20px; }

.warning-text {
    color: #dc3545;
    font-weight: 500;
    font-size: 0.9em;
    margin-top: 15px;
    background-color: #fceeee;
    border: 1px solid #f7c5c5;
    border-radius: 5px;
    padding: 10px;
}

/* 닫기 버튼 */
.close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    color: #555;
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    left: 15px;
    top: 10px;
    cursor: pointer;
    z-index: 110;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.close-button:hover { background-color: #f0f0f0; color: #000; }
#deleteModal .close-button { display: none; }

/* 서명 모달 스타일 */
.canvas-container {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 15px;
}
.canvas-container.signing-active {
    overflow-y: hidden;
}
#signature-canvas {
    display: block;
    cursor: default;
}
.canvas-container.signing-active #signature-canvas {
    cursor: crosshair;
}
.signature-buttons {
    display: flex;
    gap: 15px;
    flex-shrink: 0;
}
.signature-buttons button {
    flex: 1;
}

#resetModal p {
    margin: 10px 0;
}
.target-branch-name {
    font-weight: bold;
    color: #007bff;
    background-color: #e9ecef;
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 15px !important;
}
#resetModal .form-control {
    margin-bottom: 15px;
}

/* --- ▼▼▼ APK 다운로드 링크 스타일 추가 ▼▼▼ --- */
.apk-download-link {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
    text-align: center;
}
.apk-download-link a {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0em;
    transition: color 0.2s ease;
}
.apk-download-link a:hover {
    color: #0056b3;
    text-decoration: underline;
}
/* --- ▲▲▲ 스타일 추가 끝 ▲▲▲ --- */