.counsel-form {
  margin: 40px auto;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.counsel-form h2 {
  text-align: center;
  margin-bottom: 25px;
  font-size: 24px;
  color: #2a4d7f;
  border-bottom: 2px solid #2a4d7f;
  display: inline-block;
  padding-bottom: 5px;
}

.form-row {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: 600;
  margin-bottom: 8px;
}

.form-row input[type="text"],
.form-row input[type="tel"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

fieldset legend {
  font-weight: bold;
  padding: 0 10px;
  color: #333;
}

.checkbox-grid {
  display: grid;
    grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

label {
  font-size: 15px;
  color: #333;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: 6px;
}

.btn-submit {
  display: block;
  width: 100%;
  padding: 14px;
  background: #005bac;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-submit:hover {
  background: #005bac;
}
/* === 체크박스 & 라디오 공통 스타일 === */
.counsel-form label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 15px;
  color: #333;
}

/* 기본 input 숨기고 appearance 없애기 */
.counsel-form input[type="checkbox"],
.counsel-form input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #b0b8c5;
  border-radius: 4px; /* 체크박스 네모 */
  background: #fff;
  display: inline-grid;
  place-content: center;
  transition: all 0.2s ease-in-out;
}

/* 라디오일 경우 원형 */
.counsel-form input[type="radio"] {
  border-radius: 50%;
}

/* 체크박스 체크 표시 */
.counsel-form input[type="checkbox"]::after {
  content: "";
  width: 6px;
  height: 12px;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease-in-out;
}

/* 라디오 선택 표시 */
.counsel-form input[type="radio"]::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.15s ease-in-out;
}

/* 선택됐을 때 색상 변경 */
.counsel-form input[type="checkbox"]:checked,
.counsel-form input[type="radio"]:checked {
  background: #005bac; /* 병원 느낌 블루 */
  border-color: #005bac;
}

.counsel-form input[type="checkbox"]:checked::after,
.counsel-form input[type="radio"]:checked::after {
  transform: scale(1);
}

/* 포커스(키보드 접근) */
.counsel-form input[type="checkbox"]:focus,
.counsel-form input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(42, 77, 127, 0.3);
}

/* 비활성화 */
.counsel-form input[type="checkbox"]:disabled,
.counsel-form input[type="radio"]:disabled {
  background: #f1f5f9;
  border-color: #d1d5db;
  cursor: not-allowed;
}
.counsel-form input[type="checkbox"]:disabled + span,
.counsel-form input[type="radio"]:disabled + span {
  color: #9ca3af;
}



/* 온라인상담 */

/* 제목 */
.form-title{
  font-size: 28px;
  font-weight: 800;
  margin: 18px 0 16px;
}

/* 종이양식 느낌의 시트 레이아웃 */
.sheet-form{
   margin: 40px auto;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
}

.sheet-row{
  display:grid;
  grid-template-columns: 140px 1fr 140px 1fr 140px 1fr; /* 6칸 */
}
.sheet-row:first-child{ border-top:none; }

.sheet-cell{
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
}
.sheet-cell:first-child{ border-left:none; }

.sheet-cell.label{
  background:#fff;
  font-weight:700;
}
.v-top{ align-items:flex-start; }

/* 셀 병합 */
.span-5{ grid-column: span 5; }

/* 인풋/텍스트에어리어 */
.sheet-cell input[type="text"],
.sheet-cell input[type="tel"],
.sheet-cell textarea{
  width:100%;
  border:1px solid #cfd6e3;
  border-radius:8px;
  padding:10px 12px;
  font-size:15px;
  transition:border-color .2s, box-shadow .2s;
}
.sheet-cell textarea{ resize:vertical; }
.sheet-cell input:focus,
.sheet-cell textarea:focus{
  outline:none;
  border-color:#005bac;
  box-shadow:0 0 0 3px rgba(42,77,127,.25);
  background:#f7f9fc;
}

/* 옵션 그리드(체크/라디오 정렬) */
.option-grid{
  display:grid;
  gap:10px 16px;
}
.option-grid.col4{ grid-template-columns:repeat(4,minmax(0,1fr)); }

/* 커스텀 체크/라디오 (이전 답변과 동일 톤) */
.control{
  --size:18px;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-size:15px; color:#273142; user-select:none;
}
.control input{
  appearance:none; width:var(--size); height:var(--size);
  border:2px solid #b9c6d8; background:#fff; margin:0;
  border-radius:6px; display:inline-grid; place-content:center;
  transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.control input[type="radio"]{ border-radius:50%; }
.control input:focus{ outline:none; box-shadow:0 0 0 3px rgba(42,77,127,.25); }
.control input[type="checkbox"]::after{
  content:""; width:9px;height:9px; transform:rotate(45deg) scale(0);
  transition:transform .18s;
}
.control input[type="radio"]::after{
  content:""; width:8px;height:8px; border-radius:50%; background:#fff; transform:scale(0);
  transition:transform .18s;
}
.control input:checked{ background:#2a4d7f; border-color:#2a4d7f; }
.control input:checked::after{ transform:scale(1); }

/* 제출 영역 */
.sheet-actions{ padding:18px;  }
.btn-submit{
  width:100%; height:50px; border:0; border-radius:10px;
  background:linear-gradient(180deg,#005bac,#005bac); color:#fff;
  font-weight:800; letter-spacing:.02em; cursor:pointer;
}

/* 반응형 */
@media (max-width: 980px){
  .sheet-row{ grid-template-columns: 120px 1fr; }
  .span-5{ grid-column: span 1; }
  .option-grid.col4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 560px){
  .option-grid.col4{ grid-template-columns:1fr; }
}



/* 반응형 */
@media (max-width: 1000px) {
  .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
  }
}

/* 반응형 */
@media (max-width: 600px) {
  .checkbox-grid {
        grid-template-columns: repeat(1, 1fr);
  }
}