/* 기본설정 : 한 줄 전체를 차지하는 큰 박스형태 */
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

/* 패딩, 테두리까지 모두 width/height 안에 포함해서 박스 크기를 계산 레이아웃 깨지는 거 방지 */
*, ::after, ::before {
    box-sizing: border-box;
}

body {
  font-family: 'Hind Madurai', sans-serif;
  background-color: #f0f0f0;
  min-height: 100vh; /* ✅ 뷰포트 높이만큼 채움 */
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* ✅ 가로 스크롤 방지 */

}

.container {
  width: 100%;
  margin: 0 auto;
  background-color: white;
  padding: 40px 20px;
  margin-bottom: 10px;
}


/* 전체 본문 내용 */
.mainContent {
  background-color: #e8e8e8;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
  flex: 1; /* ✅ 남는 공간을 차지하게 만듦 */
  display: flex;
  flex-direction: column;
}

.mainContent h1 {
    font-size: 56px;
    font-weight: 800;
}

.mainContent h2 {
    font-size: 20px;
    font-weight: 600;
}

.mainContent h3 {
    font-size: 25px;
    font-weight: 600;
}

.mainContent p {
    font-size: 16px;
    line-height: 33.6px;
    color: #434343;
    
}

.txt-color-blue {
    color: #406CB4 !important;
}

/* 안내 박스 아코디언 */
.accordion-header {
    padding: 20px;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-align: left;
    border-bottom: 1px solid #e9ebed;
    display: flex;
    gap: 8px;
    align-items: center;
    cursor: pointer;
    background: #f8fafc;
}

/* 아코디언의 토글 아이콘 회전 */
.accordion.active .toggle-icon {
    transform: rotate(180deg);
}

/* 반려동물 등록 박스 */
.registration-box {
    margin: 30px 0;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}


/* DL 정의목록: 입력 항목 1건당 */
.form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    margin-bottom: 15px;
}

/* DT 용어나 항목 : 제목줄, 이름 성별 등등 */
.form-row dt {
    width: auto;
    font-weight: 700;
    color: #0d0c22;
    font-size: 16px;
    margin-bottom: 5px;
}

/* DD 설명 내용줄, 이 안에 입력 항목 입력 선택 등이 다 들어간다 */
.form-row dd {
    width: 100%;
}

/* 입력 인풋 박스내부의 스타일 */
input[type="text"],
input[type="number"],
input[type="date"],
select {
    width: 100%;
    height: 46px;
    padding-left: 10px;
    border: 1px solid #e7e7e7;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* 인풋박스 플레이스홀더 */
input::placeholder {
    color: black;
    opacity: 0.3;
}

/* 라디오 버튼은 보이지 않게 */
input[type="radio"] {
    display: none;
}

/* 종 성별 구분의 라디오 그룹 */
.radio-group {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
}

/* 선택 항목안의 텍스트 1개 고양이, 개 이런것 처럼 */
.check-btn label {
    margin-bottom: 12px;
    padding: 10px;
    vertical-align: middle;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    min-width: 80px;
    text-align: center;
    font-weight: 500;
    color: #e7e7e7;
    transition: all 0.2s ease;
}

/* 체크 아이콘 평소에는 안 보이고 체크하면 보인다다*/
.check-icon {
    display: none;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    fill: #406CB4;
}

/* 선택된 경우 라벨 디자인 */
.check-btn input[type="radio"]:checked+label {
    border-color: #406CB4;
    color: #406CB4;
    font-weight: bold;
    position: relative;
}

/* 선택된 경우 체크 아이콘 보이게 */
input[type="radio"]:checked + label .check-icon {
    display: inline-block;
}

/* 여기서부터 체크동그라미 설정 중성화/비만 처럼 */
/* 라벨 디자인부터 */
.labelcontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 기본 브라우저의 체크박스 설정을 없앤다 */
.labelcontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* 새로운 체크박스 생성 */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* 마우스 오버 시 그레인 배경색상 처리 */
.labelcontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* 체크박스가 체크되면 핑크 배경색상처리 */
.labelcontainer input:checked ~ .checkmark {
  background-color: #406CB4;
}

/* 새로운 체크마크 생성 (체크되지 않을땐 숨긴다) */
.checkmark:after {
  box-sizing: content-box;
  content: "";
  position: absolute;
  display: none;
}

/* 체크되면 체크마크를 보여준다 */
.labelcontainer input:checked ~ .checkmark:after {
  display: block;
}

/* 체크마크의 디자인 */
.labelcontainer .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* 공통 버튼 기본 스타일 */
/* 공통 버튼 + 기본은 파란 버튼으로 적용 */
button {
  width: 100%;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: normal;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  transition: background 0.2s, color 0.2s, border 0.2s;

  /* ✅ 기본 버튼은 primary 스타일 */
  background: #406CB4;
  color: white;
  border: none;
}

button:hover {
  background: #1b335a;
  color: white;
}

/* ⚪️ 흰색 배경 버튼은 outline 클래스 */
button.outline {
  background: white;
  color: #757679;
  border: 1px solid #d9dadc;
}

button.outline:hover {
  background: white;
  color: #406CB4;
  border-color: #406CB4;
}

button.outline.selected {
  color: #406CB4;
  border-color: #406CB4;
}

.outline {
          border: 1px solid #ccc;
          border-radius: 8px;
          background: white;
          padding: 10px 16px;
          margin: 4px;
          font-size: 14px;
          cursor: pointer;
          transition: all 0.3s ease;
}

.outline:hover {
border-color: #406CB4;
color: #406CB4;
}


/* 표에 삭제 버튼*/
.delete-pill {
    background-color: white;
    color: #406CB4;
    border: 1px solid #406CB4;
}

.delete-pill:hover {
    background-color: #406CB4;
    color: white;
}

.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    min-width: 70px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* 등록된 반려동물 리스트 */
/* 전체리스트 컨테이너*/
.list-section {
    width: 100%;
    max-width: 1080px;
    background-color: #f3f4f6;
    padding: 20px;
    border-radius: 12px;
    border: none !important;
}

/* 실제 반려동물 테이블 */
.list-section table {
    border-spacing: 0;
    overflow: hidden;
}

.responsive-table {
    display: table;
    width: 100%;
}

/* 테이블 머리행 */
.list-section th {
    background: #4b5563;
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    text-align: center;
}

/* 테이블 각각의 데이터 */
.list-section td {
    padding: 10px;
    text-align: center;
}

/* 테이블의 첫줄은 흰색으로 */
.list-section tbody tr:nth-child(odd) {
    background: #ffffff;
}

/* 테이블의 두번째줄은 회색으로 */
.list-section tbody tr:nth-child(even) {
    background: #f4f4f4;
}


/* 태어난지 몇개월 되었어요 위로 공간 */
#birthdateInput {
    margin-bottom: 12px;
}


/* 여기서부터는 레시피.php */

/* 푸드 카드 */
.food-card {
    position: relative;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 12px;
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: 14px;
}

.food-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    color: #333;
}

.food-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 20px;
}

.food-card-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.food-card-top input {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 14px;
}

.food-card-bottom {
    margin-top: 6px;
    color: #888;
    font-size: 12px;
}

/* 식품카드 삭제 버튼 */
.delete-food-card {
    font-weight: bold;
    font-size: 18px;
    color: #ff5555;
    cursor: pointer;
    margin-left: 10px;
}

.delete-food-card:hover {
    color: #cc0000;
}

/* 추가설명 ? 아이콘 마우스 오버시*/
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

.tooltip-icon {
    color: #888;
    font-size: 13px;
}

.tooltip-box {
    display: none;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    border: 1px solid #ccc;
    padding: 8px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 999;
    font-size: 12px;
    color: #333;
    line-height: 1.4;
}

.tooltip-container:hover .tooltip-box {
    display: block;
}

/* 4분할로 나뉜 비타민 미네랄 기타미네랄 등..*/
   .nutrient-grid {
    grid-template-columns: 1fr !important;
    padding: 5px;
  }
  .nutrient-box {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
  }


.nutrient-header {
    font-weight: 800;
    font-size: 18px;
    margin-bottom: 6px;
}

.nutrient-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nutrient-row,
.nutrient-subrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nutrient-row span:first-child {
    font-weight: 600;
}

.nutrient-subrow {
    font-size: 13px;
    color: #555;
    padding-left: 10px;
}

/* 미네랄 박스 비타민 박스... */
.nutrient-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 20px;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
}

/* 여기까지는 성분 분석 관련 이었습니다 */
/**************************************/


/* 직접 식품 정보 입력란 */
#manualFoodPanel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#manualFoodPanel.open {
  max-height: 700px; /* 실제 내용 높이에 맞게 조정 */
}


/*미체크 배지*/
.badge-unchecked {
  position: absolute;
  top: 10px;
  left: 14px;
  background: #e53232;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 10px;
  z-index: 1;
  letter-spacing: 1px;
  display: inline-block;
}

/* ======================
   Drawer (슬라이드 오픈)
   ====================== */
#foodDetailDrawer {
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 340px; max-width: 90vw;
  background: #fff;
  box-shadow: -2px 0 24px rgba(0,0,0,0.18);
  z-index: 1100;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.68,-0.55,.27,1.55);
  padding: 32px 22px 22px 22px;
  display: flex; flex-direction: column;
}
#foodDetailDrawer.open {
  transform: translateX(0);
}
#drawerDim {
  display: none;
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1099;
  background: rgba(0,0,0,0.18);
}
#drawerDim.show {
  display: block;
}