@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

:root {
  --primary-color: #1e40af;    
  --primary-hover: #1d4ed8;
  --bg-color: #f8fafc;         
  --card-bg: #ffffff;
  --text-main: #334155;
  --text-muted: #64748b;
  --border-color: #cbd5e1;
  --point-red: #ef4444;
  --max-width: 1024px;          
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  font-family: "Pretendard";
}

a {
  color: inherit;
  text-decoration: none;
}

/* 헤더 영역 */
.main-header {
  background-color: #ffffff;
  /*background-color: #1e40af;*/
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
}
.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.logo a {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--primary-color);
}
.nav-link {
  font-size: 16px;
  color: #ffffff;
  border: 1px solid var(--border-color);
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  background-color: var(--primary-color);
  transition: all 0.2s;
  font-weight: 500;
}
.nav-link:hover {
  background-color: var(--primary-hover);
}

/* 메인 구조 컨테이너 */
.form-container {
  max-width: var(--max-width);
  margin: 2.5rem auto;
  padding: 0 1rem;
}
.form-title {
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #111827;
  text-align: center;
}

/* 기본 섹션 카드 스타일 */
.form-section {
  background-color: var(--card-bg);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
}
.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f1f5f9;
  color: #111827;
}

/* 폼 컨트롤 공통 */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group > label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.required {
  color: var(--point-red);
  margin-left: 2px;
}

input[type="text"], select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--text-main);
  background-color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
input[type="text"]:focus, select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* 그리드 & 인라인 그룹 */
.inline-group {
  display: grid;
  gap: 0.5rem;
}
.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.radio-group {
  display: flex;
  gap: 1.5rem;
  padding: 0.5rem 0;
}
.radio-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.radio-label input {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary-color);
}

/* 우편번호 주소창 */
.address-zip {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}
.mt-8 {
  margin-top: 0.5rem;
}

/* 파일 첨부 영역 스타일 */
.file-upload-group {
  margin-top: 1.5rem;
}

.file-custom-area {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: center;
}

/* 기본 파일 인풋은 숨김 처리 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 파일명이 노출되는 인풋창 */
.file-name-input {
  background-color: #f8fafc !important; 
  cursor: default;
}

/* 파일 선택 버튼 라벨 */
.btn-file-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.65rem 1.2rem;
  margin: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 안내 문구 */
.file-help-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.4rem;
  padding-left: 2px;
}

/* 텍스트에어리어 스타일 추가 */
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--text-main);
  background-color: #fff;
  outline: none;
  resize: vertical; /* 사용자가 세로 크기만 조절할 수 있도록 제한 (가로 깨짐 방지) */
  min-height: 100px;
  font-family: inherit; /* body에 지정한 폰트 상속 */
  transition: border-color 0.2s;
}

textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.description-group {
  margin-top: 1.5rem;
}

/* 버튼 스타일 정의 */
.btn-primary {
  width: 100%;
  padding: 1rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary:hover {
  background-color: var(--primary-hover);
}
.btn-secondary {
  padding: 0.65rem 1rem;
  background-color: #e2e8f0;
  color: var(--text-main);
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.btn-secondary:hover {
  background-color: #cbd5e1;
}
.btn-text {
  background: none;
  border: none;
  color: var(--primary-color);
  text-decoration: underline;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
}

/*되돌아가기*/
.btn-return{
    display: block;
    width: 100%;
    max-width: 600px; /* 테이블 크기와 맞춤 (필요시 조절) */
    margin: 20px auto 0;
    padding: 14px 0;
    
    /* 핵심 변경 사항: 화이트 배경 + 테두리 */
    background-color: #ffffff;
    color: #1e40af; /* 기존 블루 톤 글자색 */
    border: 2px solid #1e40af; /* 블루 테두리 추가 */
    
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease; /* 부드러운 전환 효과 */
}

/* 마우스 올렸을 때(Hover) 디자인 효과 */
.btn-return:hover {
    background-color: #1e40af; /* 배경을 다시 블루로 */
    color: #ffffff; /* 글자색은 화이트로 변환 */
}

/* 약관 항목 */
.checkbox-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: 1px dashed #f1f5f9;
}
.checkbox-item label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.checkbox-item input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--primary-color);
}

/* 입금 안내 박스 */
.notice-box {
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.bank-info {
  font-size: 1.1rem;
  color: #166534;
  margin-bottom: 0.5rem;
}
.bank-desc {
  font-size: 0.85rem;
  color: #15803d;
}
.payment-methods {
  background-color: #f8fafc;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

/* 신청자조회 */
.min-container {
  max-width: 680px; 
  margin: 3.5rem auto;
}


.search-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: none; /* 이미지처럼 하단 실선 제거 혹은 유지 선택 */
  font-size: 1.35rem;
  color: #000000;
  margin-bottom: 2rem;
}
.icon-check {
  font-size: 1.2rem;
  color: #111827;
}


.tight-gap {
  gap: 0;
}
.tight-gap select {
  border-radius: 0;
}
.tight-gap select:first-child {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
}
.tight-gap select:not(:first-child) {
  border-left: none; /* 중간 경계선 겹침 방지 */
}
.tight-gap select:last-child {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}


.phone-group {
  grid-template-columns: 1fr auto 1.2fr auto 1.2fr;
  align-items: center;
  gap: 0.4rem;
}
.phone-group .dash {
  color: #64748b;
  text-align: center;
  font-weight: 500;
}


.btn-search-box {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}
.btn-search {
  width: auto;
  min-width: 280px; /* 버튼이 너무 길어지지 않게 밸런스 조정 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-size: 1.05rem;
}
.icon-svg {
  width: 18px;
  height: 18px;
}


/* 하단 버튼 배치 영역 */
.form-actions {
  grid-column: span 2;
  margin-top: 2rem;
  margin-bottom: 4rem;
}

/*테이블 */
.table-container {
    width: 100%;    
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef2f5;
}

.member-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Noto Sans KR', sans-serif;
    text-align: left;
}

.member-table th {
    background-color: #f8fafc;
    color: #475569;
    font-weight: 600;
    padding: 14px 16px;
    font-size: 14px;
    border-bottom: 2px solid #e2e8f0;
	text-align:center;
}

.member-table td {
    padding: 14px 16px;
    color: #334155;
    font-size: 15px;
    border-bottom: 1px solid #f1f5f9;
    background-color: #ffffff;
}

/* 마우스 올렸을 때 행 하이라이트 효과 */
.member-table tbody tr:hover td {
    background-color: #f1f5f9;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* 마지막 행의 테두리 제거 */
.member-table tbody tr:last-child td {
    border-bottom: none;
}

/* 버튼을 감싸는 컨테이너: 우측 정렬 및 하단 테이블과의 여백 조절 */
.button-container {
    display: flex;
    justify-content: flex-end; /* 좌측(flex-start)에서 우측(flex-end)으로 변경 */
    margin-bottom: 12px;       /* 테이블과의 간격 */
    padding-right: 4px;        /* 테이블 라인 우측 끝과 정렬을 맞추기 위한 미세 조정 */
}

/* 단체원추가+ 버튼 스타일 (기존과 동일) */
.add-btn {
    background-color: #0056b3;  
    color: #ffffff;             
    font-size: 14px;            
    font-weight: 600;           
    padding: 8px 16px;          
    border: none;               
    border-radius: 6px;         
    cursor: pointer;            
    transition: background-color 0.2s ease-in-out; 
}

/* 마우스 호버 및 클릭 효과 (기존과 동일) */
.add-btn:hover {
    background-color: #004085;  
}
.add-btn:active {
    background-color: #003166;
}


/* 테이블 안의 삭제 버튼 스타일 */
.btn-delete {
    background-color: #ffffff;    /* 기본 배경은 깔끔하게 흰색 */
    color: #dc3545;               /* 글자 및 테두리는 경고/삭제를 의미하는 레드 톤 */
    border: 1px solid #ced4da;    /* 부드러운 연회색 테두리 */
    border-radius: 4px;           /* 다른 입력창과 맞춘 라운드 처리 */
    font-size: 12px;              /* 테이블 내부에 알맞은 아담한 크기 */
    font-weight: 500;
    padding: 4px 10px;            /* 버튼 안쪽 여백 (상하 4px, 좌우 10px) */
    cursor: pointer;
    transition: all 0.15s ease-in-out; /* 호버 시 부드러운 전환 효과 */
}

/* 마우스를 올렸을 때 (Hover) */
.btn-delete:hover {
    background-color: #dc3545;    /* 배경이 빨간색으로 변경 */
    color: #ffffff;               /* 글자색은 흰색으로 변경 */
    border-color: #dc3545;        /* 테두리도 빨간색으로 통일 */
}

/* 버튼을 클릭했을 때 (Active) */
.btn-delete:active {
    background-color: #bd2130;    /* 조금 더 짙은 레드로 변경되어 누르는 느낌 제공 */
    border-color: #b21f2d;
}



/* 전체 감싸는 컨테이너 */
.form-group-custom {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 400px; /* 기존 인풋창 크기에 맞게 조절 가능 */
	margin-bottom:1.5rem;
}

/* 입력창과 버튼을 가로로 정렬 */
.input-btn-row {
    display: flex;
    gap: 8px; /* 입력창과 버튼 사이의 간격 */
    align-items: center;
    width: 100%;
}

/* 기존 입력창 스타일 유지용 기본 세팅 */
.input-text-custom {
    flex: 1; /* 남은 공간을 꽉 채움 */
    height: 40px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
}

/* 중복체크 버튼 스타일 (우편번호 검색 버튼 스타일 톤앤매너 매칭) */
.check-btn {
    height: 40px;
    padding: 0 16px;
    background-color: #e9ecef; /* 연한 그레이 톤 */
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap; /* 글자가 아래로 떨어지지 않게 고정 */
    transition: all 0.2s ease-in-out;
}

/* 버튼 마우스 호버 효과 */
.check-btn:hover {
    background-color: #dee2e6;
    border-color: #adb5bd;
}

/* 하단 메시지 스타일 */
.msg-text {
    font-size: 13px;
    margin-top: 6px; /* 입력창과의 간격 */
    padding-left: 4px;
}

/* 중복 확인 성공 시 (초록색 계열) */
.msg-text.success {
    color: #28a745;
}

/* 중복 확인 실패/경고 시 (빨간색 계열) */
.msg-text.error {
    color: #dc3545;
}


/* 1. 기념품 그룹을 가로 정렬(Flex) 레이아웃으로 변경 */
.form-group:has(#souvenirsname) {
    display: flex;
    flex-wrap: wrap; /* 모바일 등 아주 좁은 화면에서 깨짐 방지 */
    align-items: center;
    gap: 8px; /* 두 박스 사이의 간격 */
}

/* 2. '기념품' 라벨은 기존대로 상단에 한 줄 전체 차지하도록 설정 */
.form-group:has(#souvenirsname) label {
    width: 100%;
    margin-bottom: 6px;
    display: block;
}

/* 3. 좌측 기념품 이름 인풋 박스 (#souvenirsname) */
#souvenirsname {
    flex: 6.5; /* 전체 가로 영역 중 약 65% 차지 */
    min-width: 120px;
    height: 42px; /* 셀렉트 박스와 높이 완전 통일 */
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px; /* 다른 입력창들과 매칭되는 둥근 모서리 */
    background-color: #f8fafc; /* 읽기 전용(readonly)에 어울리는 차분한 배경색 */
    color: #334155;
    box-sizing: border-box;
}

/* 4. 우측 사이즈 셀렉트 박스 (#souvenirssize) */
#souvenirssize {
    flex: 3.5; /* 전체 가로 영역 중 약 35% 차지 */
    min-width: 90px;
    height: 42px; /* 인풋 박스와 높이 완전 통일 */
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
    color: #334155;
    box-sizing: border-box;
    cursor: pointer;
}


/* 1. 기본 체크박스는 숨기되 접근성 유지 */
.form-group input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 2. 라벨 영역 최적화 (클릭 범위 확대 및 반응 속도 향상) */
.form-group input[type="checkbox"] + label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    margin-right: 15px;
    margin-bottom: 10px;
    
    /* [개선] 클릭/터치 인식 영역을 넓혀서 반응성을 높임 */
    padding: 6px 10px; 
    border-radius: 4px;
    
    /* [개선] 모바일 터치 하이라이트 지연 제거 */
    -webkit-tap-highlight-color: transparent; 
    
    /* [개선] 반응 속도를 위해 transition 속도를 매우 빠르게 (0.05초) 설정하거나 제거 */
    transition: background-color 0.05s ease;
    user-select: none;
}

/* 3. 체크박스 박스 디자인 */
.form-group input[type="checkbox"] + label::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    margin-right: 8px;
    box-sizing: border-box;
    /* [개선] 크기 변경 애니메이션을 제거하여 즉각적으로 반응하도록 함 */
}

/* 4. 체크되었을 때 (지연 없이 즉시 변경) */
.form-group input[type="checkbox"]:checked + label::before {
    background-color: #1e40af;
    border-color: #1e40af;
}

/* 5. V자 표시 (정확한 위치 고정) */
.form-group input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    transform: rotate(45deg);
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    margin-left: 7px;
    margin-top: -2px;
}

/* 6. 마우스 호버 효과 */
.form-group input[type="checkbox"] + label:hover {
    background-color: #f3f4f6; /* 라벨 전체에 살짝 음영을 주어 클릭 가능함을 즉시 인지 */
}

/* 라디오 버튼 선택지들을 감싸는 부모 컨테이너 (예: .radio-group) */
.radio-container {
    display: flex;
    flex-wrap: wrap; /* 화면이 아주 좁아질 때는 자연스럽게 다음 줄로 넘어가도록 설정 */
    gap: 15px;       /* 선택지 사이의 간격 */
    align-items: center;
}

/* 개별 라디오 버튼과 텍스트를 감싸는 label 요소 */
.radio-container label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* 글자가 아래로 쪼개져서 줄바꿈되는 것을 방지 */
    cursor: pointer;
    font-size: 14px;
}

/* 라디오 버튼 자체와 글자 사이의 간격 */
.radio-container input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}


















/* 두 버튼을 나란히 정렬하고 여백을 주는 부모 컨테이너 */
.btn-container {
  display: flex;
  gap: 12px;          /* 버튼 사이의 간격 */
  width: 100%;        /* 전체 너비 사용 */
  max-width: 500px;   /* 기존 버튼 박스 크기에 맞게 조절 (예시) */
  margin: 0 auto;     /* 가운데 정렬 */
}

/* 두 버튼 공통 스타일 (기존 참가신청 버튼 스타일 유지) */
.btn-container button {
  flex: 1;            /* 부모 너비를 50%씩 정확히 반으로 나눠 가짐 */
  padding: 15px 0;    /* 상하 패딩 */
  font-size: 16px;
  font-weight: bold;
  border-radius: 6px;
  /*border: none;*/
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 참가신청하기 버튼 (기존 블루 톤 유지) */
.btn-submit {
  background-color: #1e40af; /* 기존 사이트의 네이비/블루 계열 색상 */
  color: #ffffff;
  border: none;
}

.btn-submit:hover {
  background-color: #1d4ed8; /* 마우스 올렸을 때 약간 밝아지게 */
}

/* 되돌아가기 버튼 (차분한 그레이 톤으로 대비) */
.btn-back {
  background-color: #f3f4f6; /* 연한 회색 배경 */
  color: #4b5563;            /* 짙은 회색 글자 */
  border: 1px solid #d1d5db; /* 테두리 추가로 깔끔하게 */
}

.btn-back:hover {
  background-color: #e5e7eb; /* 마우스 올렸을 때 조금 더 어두운 회색 */
}

.btn-card {
	background-color: #d9e6f1;
	border: 1px solid #3F51B5;
	color: #3F51B5;
}

.btn-card:hover {
  background-color: #ffffff; /* 마우스 올렸을 때 약간 밝아지게 */
  color: #3F51B5;
}

.btn-bank {
  background-color: #f3dfd9;
  color: #F44336;
  border: 1px solid #F44336;

}

.btn-bank:hover {
  background-color: #ffffff; /* 마우스 올렸을 때 조금 더 어두운 회색 */
}

.btn-delet {
	background-color: #ffe9e7;
    color: #F44336;
    border: 1px solid #F44336;
}

.btn-delet:hover {
  background-color: #ffffff; /* 마우스 올렸을 때 조금 더 어두운 회색 */
}
.btn-edit {
	background-color: #efe6ff; 	
    color: #673AB7;
    border: 1px solid #673AB7;
}

.btn-edit:hover {
  background-color: #ffffff; /* 마우스 올렸을 때 조금 더 어두운 회색 */
}

/* ==========================================
   1. 데스크톱 기본 스타일 (가로 나란히 중앙 정렬)
   ========================================== */
.btn_area {
    display: flex !important;             /* Flexbox 레이아웃 강제 적용 */
    justify-content: center !important;   /* 가로축 기준 무조건 정중앙 정렬 */
    align-items: center !important;       /* 세로축 기준 정중앙 정렬 */
    gap: 16px !important;                 /* 버튼과 버튼 사이의 가로 간격 */
    
    width: 100% !important;               /* 부모 너비를 100% 가득 채움 */
    float: none !important;               /* 기존 float 정렬 방식 방해 차단 */
    margin: 40px auto 0 auto !important;  /* 위쪽 여백 40px, 좌우 마진 자동(중앙) */
}

/* 버튼 자체 스타일 (글자 수와 상관없이 크기 일치) */
.btn_area a, 
.btn_area button {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    float: none !important;               /* 버튼 개별 float 속성 제거 */
    
    /* ★ 두 버튼을 같은 크기로 똑같이 맞추는 핵심 속성 ★ */
    flex: 1 !important;                   
    max-width: 250px !important;          /* 데스크톱에서 너무 넓어지지 않도록 고정 크기 지정 */
    width: 250px !important;              /* 가로 크기를 완전히 일치시킴 */
    
    padding: 12px 0 !important;           /* 안쪽 여백 (글자 수에 영향받지 않게 좌우 패딩 제거) */
    box-sizing: border-box !important;    /* 패딩을 포함한 전체 크기 고정 */
    text-align: center;
	margin:0 !important;
}
/* 푸터 영역 */
.main-footer {
  background-color: #1e293b;
  color: #94a3b8;
  padding: 3rem 2rem;
  font-size: 0.85rem;
}
.footer-container {
  max-width: var(--max-width);
  margin: 0 auto;
}
.footer-links {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #334155;
}
.footer-link-bold {
  color: #f8fafc;
  font-weight: 700;
}
.footer-info p {
  margin-bottom: 0.4rem;
}
.footer-info .company {
  color: #f8fafc;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.footer-info .copy {
  margin-top: 1.5rem;
  color: #64748b;
}


/* 방법 1: readonly 속성이 있는 모든 input 창에 적용 */
input[readonly] {
    background-color: #f1f5f9; /* 은은하고 세련된 회색 (Slate 100) */
    color: #64748b;            /* 글자색도 조금 더 연하게 처리하여 구분 */
    border-color: #cbd5e1;      /* 테두리 선도 흐리게 변경 */
    cursor: not-allowed;        /* 마우스 커서를 금지 모양으로 변경 */
}

/* 방법 2 (선택): textarea(작품소개 등)에도 readonly가 있다면 함께 적용 */
input[readonly], 
textarea[readonly] {
    background-color: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
    cursor: not-allowed;
}

.uploaded-img {
    display: block;
    margin: 20px auto 0;  /* 상단에 20px 공백 추가, 좌우는 자동 중앙 정렬 */
    width: 30%;           /* 이미지 너비를 부모 영역의 30%로 조절 */
    height: auto;         /* 가로 세로 비율 유지 */
    border-radius: 6px;   /* 테두리 라운드 효과 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* 부드러운 그림자 */
}

/* ========================================================
   반응형 미디어 쿼리 
   ======================================================== */


@media (min-width: 769px) {
  .form-body {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 왼쪽 단과 오른쪽 단을 1:1로 정확히 분할!!! 주석처리 하면 1단으로 보임 */
    gap: 1.5rem;
    align-items: start;         
  }
}


@media (max-width: 768px) {
  .form-body {
    display: flex;
    flex-direction: column;
  }
  
  .form-section {
    padding: 1.25rem;
  }
  
  .cols-3 {
    /*grid-template-columns: 1fr;  생년월일, 연락처 등이 모바일에서는 한 줄씩 세로 배치 */
    gap: 0.4rem;
  }
  .btncol{
		display:none;
   }

   .btn_area {
        flex-direction: column !important;    /* ★ 정렬 방향을 가로에서 세로(아래로)로 변경 ★ */
        align-items: center !important;       /* ★ 세로 상태에서 버튼들을 수평 정중앙 정렬 ★ */
        justify-content: center !important;   
        gap: 12px !important;                 /* 밑으로 떨어졌을 때 버튼 간의 위아래 간격 */
        width: 100% !important;
        margin: 30px auto 0 auto !important;
    }

    .btn_area a, 
    .btn_area button {
        display: flex !important;
        
        /* ★ 모바일에서도 동일한 크기로 하나씩 떨어지게 설정 ★ */
        width: 100% !important;               /* 부모 너비에 맞춰 늘어나되 */
        max-width: 280px !important;          /* 지나치게 퍼지지 않도록 모바일 최적화 크기로 제한 */
    }

	.main-header .logo img{
		width:50%;
	}

}

@media (max-width: 380px) {
  .main-header {
    padding: 2rem 1rem;
  }

  .header-container {
    flex-direction: column;
    gap: 0.5rem;          
    text-align: center;
  }
	h1{font-size: 1.1rem;}

  .logo a {
    font-size: 1.1rem;    
  }

  .nav-link {
    font-size: 0.8rem;     
    padding: 0.3rem 0.6rem;
    display: inline-block;
  }
  .phone-group {
    grid-template-columns: 1fr; /* 320px 모바일에선 폰 번호 필드도 세로 배치하여 깨짐 방지 */
  }
  .phone-group .dash {
    display: none; /* 세로 배치 시 하이픈 숨김 처리 */
  }
  .btn-search {
    width: 100%; /* 모바일에선 버튼 가득 차게 */
  }
  .btncol{
		display:none;
   }


   #souvenirsname, #souvenirssize {
        flex: 1 1 100%; /* 화면이 지나치게 좁아지면 깔끔하게 세로로 재배치 */
    }

}