/* 스타일 초기화 */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 배경색과 전체 레이아웃 설정 */
body { background-color: #FFFFFF; color: #00224D; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

/* 전체 페이지 레이아웃 */
.page-wrapper { display: flex; width: 100%; max-width: 1200px; padding: 20px; }

/* 좌측 제목 및 부제목 */
.side-title { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-right: 20px; max-width:600px; }
.section-title { font-size: 1.6em; font-weight: bold; color: #00224D; text-align: center; margin-bottom: 10px; }
.section-subtitle { font-size: 1em; color: #555555; text-align: center; }

/* 메인 컨테이너 (중앙 정렬) */
.container { max-width: 600px; padding: 40px; background-color: #FFFFFF; display: flex; flex-direction: column; gap: 20px; width: 100%}

/* 우측 제출 버튼과 뒤로가기 버튼 */
.side-controls { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 10px; }

/* 제출 버튼 스타일 */
.submit-button {
    background-color: #0056B3; color: white; padding: 10px 25px; border: none; border-radius: 4px;
    font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.prev-button {
    background-color: #4A90E2; color: white; padding: 10px 25px; border: none; border-radius: 4px;
    font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/* 호버 스타일 */
.submit-button:hover { background-color: #003A75; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }
.prev-button:hover { background-color: #357ABD; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); }

/* 포커스 스타일 */
.submit-button:focus { outline: none; box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3); }
.prev-button:focus { outline: none; box-shadow: 0 0 0 2px rgba(160, 184, 217, 0.3); }


/* 화살표 아이콘 추가 */
.prev-button::before { content: '← '; font-weight: normal; }
.submit-button::after { content: ' →'; font-weight: normal; }

/* 섹션 인디케이터 */
.section-indicator { text-align: center; font-size: 1.5em; font-weight: bold; color: #4a6a8f; margin-bottom: 20px; }


/* 기본 섹션 스타일 */
.section {
    display: none; /* 기본적으로 숨김 처리 */
    flex-direction: column; 
    gap: 20px;
    opacity: 0; /* 기본적으로 투명하게 숨김 */
    transform: translateX(20px); /* 기본 상태는 약간 오른쪽에 위치 */
    transition: opacity 0.4s ease, transform 0.4s ease; /* 페이드와 슬라이드 애니메이션 */
    pointer-events: none; /* 비활성 상태일 때 클릭 불가 */
}

/* 현재 활성화된 섹션 */
.section.active {
    display: flex;
    opacity: 1; /* 완전히 보이도록 설정 */
    transform: translateX(0); /* 제 위치에 놓임 */
    pointer-events: auto; /* 활성 상태일 때만 클릭 가능 */
}


/* 이전 섹션이 왼쪽으로 슬라이드 아웃될 때 */
.section.slide-out-left {
    opacity: 0;
    transform: translateX(-20px); /* 왼쪽으로 슬라이드 아웃 */
}

/* 다음 섹션이 오른쪽으로 슬라이드 아웃될 때 */
.section.slide-out-right {
    opacity: 0;
    transform: translateX(20px); /* 오른쪽으로 슬라이드 아웃 */
}

/* 다음 섹션이 오른쪽에서 슬라이드 인될 때 */
.section.slide-in-right {
    opacity: 1;
    transform: translateX(0); /* 제 위치에 놓임 */
}

/* 이전 섹션이 왼쪽에서 슬라이드 인될 때 */
.section.slide-in-left {
    opacity: 1;
    transform: translateX(0); /* 제 위치에 놓임 */
}


/* form-group 스타일 */
.form-group { display: flex; flex-direction: column; gap: 10px; }
.input-group { display: flex; gap: 10px; align-items: center; }



/* 수평 그룹 스타일 (조직 유형과 조직 이름 같은 경우) */
.horizontal-group {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

/* 수평 배치 내 각 요소 비율 */
.label-wrapper { flex: 3; display: flex; flex-direction: column; }
.input-wrapper { flex: 9; display: flex; flex-direction: column; }

textarea, select, input {
    font-family: 'Cafe24Decoschool', 'Freesentation', sans-serif;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

ul.descr {
    font-size: 0.85em;
}

/* 인풋 필드 및 select 기본 스타일 */
input[type="text"], input[type="email"], textarea, select {
    width: 100%; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 5px;
    font-size: 1em; color: #00224D; background-color: rgba(255, 255, 255, 0.9);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* hover 및 focus 효과 없음 */
input[type="text"]:hover, input[type="email"]:hover, textarea:hover, select:hover,
input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
    outline: none; background-color: inherit;
}

/* readonly 상태 스타일 */
input[readonly], textarea[readonly] { color: #A0A0A0; background-color: #F5F5F5; cursor: not-allowed; }
input[readonly]:hover, textarea[readonly]:hover, input[readonly]:focus, textarea[readonly]:focus {
    background-color: #F5F5F5; border-color: rgba(0, 0, 0, 0.15); outline: none;
}

/* readonly-select 클래스 */
.readonly-select[readonly] { background-color: #f5f5f5; color: #a0a0a0; pointer-events: none; touch-action: none; }

/* "수정" 체크박스 스타일 */
.checkbox-label { display: flex; align-items: center; font-size: 0.9em; color: #777; white-space: nowrap; }
input[type="checkbox"] { margin-left: 8px; }

/* 전화번호와 사업자등록번호 대시 스타일 */
.dash { font-size: 1em; color: #999; flex-shrink: 0; }

/* 일반 버튼 스타일 */
button {
    padding: 10px 15px; font-size: 0.95em; border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px; background-color: #fff; color: #333; cursor: pointer; white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
button:hover { background-color: #f8f8f8; }
.search-button { flex-shrink: 0; min-width: 100px; text-align: center; }

/* 네비게이션 버튼 (뒤로 가기) */
.navigation { position: fixed; bottom: 20px; text-align: center; }

.business-card-horizontal {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #FAFAFA;
    border: 1px solid #D0D0D0;
    border-radius: 6px;
    padding: 20px 20px 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .business-card-title {
    font-size: 1.2em;
    font-weight: bold;
    color: #00224D;
    border-bottom: 1px solid #E0E0E0;
    padding-bottom: 8px;
    margin-bottom: 5px;
    text-align: center;
  }
  
  .display-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95em;
    color: #333;
  }
  
  .display-label {
    font-weight: bold;
    color: #555;
    min-width: 100px;
    text-align: right;
  }
  
  .display-value {
    color: #00224D;
    font-weight: 500;
    flex: 1;
  }
  
  .review-note {
    margin-top: 10px;
    font-size: 0.85em;
    color: #777;
    text-align: right;
  }
  

/* 수평 그룹 스타일 (조직 유형과 조직 이름 같은 경우) */
.horizontal-group {
    display: flex;
    gap: 10px;
    flex-direction: row;
    align-items: center;
}

/* 수평 배치 내 각 요소 비율 */
.label-wrapper3 { flex: 3; display: flex; flex-direction: column; }
.input-wrapper9 { flex: 9; display: flex; flex-direction: column; }

.input-wrapper4 { flex: 4; display: flex; flex-direction: column; }
.input-wrapper8 { flex: 8; display: flex; flex-direction: column; }

/* 수평 배치 내 각 요소 비율 */
.label-wrapper6 { flex: 1; display: flex; flex-direction: column; }
.input-wrapper6 { flex: 1; display: flex; flex-direction: column; }

/* 날짜 입력 필드와 텍스트 영역 크기 조정
.horizontal-group .input-wrapper {
    flex: 1;
}
 */

/* 날짜 및 텍스트 필드의 기본 스타일 조정 */
textarea {
    resize: vertical; /* 세로 길이 조절 가능 */
    width: 100%; /* 부모 요소의 너비에 맞춤 */
    box-sizing: border-box;
}

input[type="date"] {
    padding: 8px; /* 날짜 필드의 패딩 */
    font-size: 1em;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #00224D;
}

.description {
    font-size: 0.9em; /* 기본 폰트보다 조금 작게 */
    color: #808080; /* 메인 텍스트보다 약간 더 연한 회색 */
    line-height: 1.5; /* 가독성을 높이기 위해 줄 간격 조정 */
    margin: 10px auto; 
    padding-left: 15px; /* 왼쪽에 약간의 여백 추가 */
    border-left: 4px solid #e0e0e0; /* 왼쪽에 연한 회색 경계선 추가 */
    font-weight: 500;
}


ul {
    list-style-type: square;
    margin-top: 5px; /* 목록과 설명 텍스트 간격 */
    padding-left: 24px; /* 목록 아이템 들여쓰기 */
}
ul li {
    color: #444;
}
ul li ul li {
    color: coral;
}
ul li::marker {
    color: #ccc;
}

.description li {
    margin-bottom: 4px; /* 각 목록 아이템 사이의 간격 */
}

.point-txt {
    font-weight: bold;
    color: goldenrod;
}

/* 드래그 앤 드롭 영역 스타일 */
.drop-zone {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.drop-zone.dragover {
    border-color: #0056B3;
    background-color: #f5f8ff;
}

.file-list {
    margin-top: 10px;
}

.file-list .file-item {
    padding: 5px 10px;
    background-color: #f5f5f5;
    margin-bottom: 5px;
    border-radius: 3px;
}

.upload-feedback {
    color: #4CAF50;
    font-weight: bold;
    margin-top: 10px;
}









@media screen and (max-width: 1024px) {
    body {
        padding: 40px 10px;
    }
    .page-wrapper {
      flex-direction: column;
      align-items: center;
      padding: 20px 10px;
    }
    .side-title {
      max-width: 100%;
      padding-right: 0;
      margin-bottom: 20px;
    }
    .container {
      max-width: 100%;
      padding: 20px;
    }
    .horizontal-group {
      flex-direction: column;
      align-items: flex-start;
    }
    .label-wrapper3,
    .input-wrapper9,
    .label-wrapper6,
    .input-wrapper6,
    .input-wrapper8,
    .input-wrapper4 {
      flex: 1;
      width: 100% !important;
    }
    .side-controls {
      flex-direction: row;
      justify-content: center;
      gap: 10px;
    }
    .section-title {
      font-size: 1.4em;
    }
    .section-subtitle {
      font-size: 0.95em;
    }
    .drop-zone {
      width: 100%;
      margin: 0 auto;
    }
  }
  
  @media screen and (max-width: 768px) {
    .page-wrapper {
      padding: 10px;
    }
    .side-title {
      margin-bottom: 15px;
    }
    .container {
      padding: 20px 10px;
    }
    .section-title {
      font-size: 1.2em;
    }
    .section-subtitle {
      font-size: 0.9em;
    }
    .submit-button,
    .prev-button {
      font-size: 0.95em;
      padding: 8px 15px;
    }
    input[type="text"],
    input[type="email"],
    input[type="date"],
    textarea,
    select {
      font-size: 0.85em;
      padding: 8px;
    }
    .business-card-horizontal {
      padding: 15px;
      margin: 0 auto;
      width: 100%;
      box-sizing: border-box;
    }
    .display-label {
      min-width: 80px;
    }
  }