:root{
  --header-h: 0px; /* JS에서 동적으로 설정 */
  --footer-h: 80px; /* 광고 높이 */
}

/* Body 스크롤바 숨김 */
html, body {
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

/* index.css의 .app 스타일 오버라이드 */
.app {
  background-color: unset !important;
  padding: unset !important;
  gap: 44px;
}

/* Header 타이틀 스타일 (Instagram과 동일하게) */
.title {
  flex: 1;
  font-weight: 700;
  font-size: 22px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--gray-90);
}

/* Header 타이틀 한글일 때 font-weight 900 */
body.lang-kr .title.h2--B {
  font-weight: 900;
}

/* Header 스타일 - sticky로 변경하여 상단 고정 */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gray-0);
}

.header-topbar {
  position: relative;
}

.selecArea {
  padding: 32px 16px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 52px;
  position: relative;
  z-index: 1;
}

/* Information 카드 스타일 */
.card--information {
  background-color: var(--gray-10);
  border-left: 4px solid var(--yellow-50);
  padding: 12px 12px 12px 16px;
}

.card--information .card__content-item {
  color: var(--gray-70) !important;
  position: relative;
  padding-left: 20px;
  list-style: none;
}

.card--information .card__content-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8.5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--gray-50);
  display: block;
  flex-shrink: 0;
}

.contentsArea{
  border-left: 1px solid var(--gray-20);
  border-right: 1px solid var(--gray-20);
  margin-top: 0;
  box-sizing: border-box;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 0;
  height: calc(100dvh - var(--header-h) - var(--footer-h));
  padding: 0 !important;
  padding-bottom: var(--footer-h);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  touch-action: pan-y;
  scrollbar-gutter: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  transition: height 0.3s ease-in-out;
}

/* 모든 브라우저에서 스크롤바 숨김 */
.contentsArea::-webkit-scrollbar,
.contentsArea *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

.contentsArea::-webkit-scrollbar-track,
.contentsArea *::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

.contentsArea::-webkit-scrollbar-thumb,
.contentsArea *::-webkit-scrollbar-thumb {
  display: none !important;
  background: transparent !important;
  -webkit-appearance: none !important;
}

.contentsArea::-webkit-scrollbar-corner {
  display: none !important;
  background: transparent !important;
}

@supports not (height: 100dvh){
  .contentsArea{
    min-height: calc(100vh - var(--header-h) - var(--footer-h));
  }
}

/* Footer 스타일 (Instagram과 동일) */
.footer {
  width: 100%;
  max-width: 500px;
  height: var(--footer-h);
  min-height: var(--footer-h);
  max-height: var(--footer-h);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-10);
  border-left: 1px solid var(--gray-20);
  border-right: 1px solid var(--gray-20);
  padding: 0;
  margin-top: 0;
  margin-bottom: 0;
}

.footer .adsbygoogle {
  display: block;
  margin: 0 auto;
}

.result{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 16px;
  gap: 8px;
  background: var(--lime-50-default);
  margin-bottom: 0;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.result .btn{
  margin-left: 8px;
}

#detailBtn{
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  display: none; /* 나중에 살릴 수 있도록 숨김 */
}

.caloriesContainer{
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.totalTitle{
  flex-shrink: 1;
  min-width: 0;
}

.caloriesWrapper{
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.resultCalories{
  text-align: right;
}

.detailPage {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.detailPage > .card--information {
  margin-top: 20px;
  padding: 24px 16px;
}

/* 영양 정보 섹션 */
.nutrition-info {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 500px;
  z-index: 1000;
  top: 0;
  pointer-events: none;
}

.nutrition-info__content {
  position: relative;
  z-index: 1001;
  width: 100%;
  background: var(--scrim-60);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  pointer-events: auto;
}

.nutrition-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}

.nutrition-item:first-child {
  padding-top: 0;
}

.nutrition-label {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--gray-0);
}

.nutrition-value {
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--gray-30);
}

/* ingredients.html 스타일 */

/* ingredients.html의 카드 텍스트 가운데 정렬 */
.selecArea > .card .card__content {
  text-align: center;
}

/* doubleSelect: 한 줄에 2개씩 배치 */
.doubleSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.doubleSelect > .checkbox,
.doubleSelect > .radio {
  flex: 0 0 calc((100% - 8px) / 2);
  box-sizing: border-box;
  max-width: calc((100% - 8px) / 2);
  min-width: 0;
}

/* 가로 정렬인 경우 한 줄에 1개씩 */
.doubleSelect > .checkbox:has(.checkbox__content--horizontal),
.doubleSelect > .radio:has(.radio__content--horizontal) {
  flex: 0 0 100%;
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

/* 쿠키 섹션: 2개씩 한 줄에 배치 */
.doubleSelect .side:first-child {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.doubleSelect .side:first-child .sideTitle {
  width: 100%;
  flex: 0 0 100%;
}

.doubleSelect .side:first-child .checkbox {
  flex: 0 0 calc((100% - 8px) / 2);
  box-sizing: border-box;
  max-width: calc((100% - 8px) / 2);
  min-width: 0;
}

/* 사이드 섹션의 체크박스: 한 줄에 2개씩 배치 */
.doubleSelect .side:last-child {
  align-self: flex-start;
  height: auto;
  min-height: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}

.doubleSelect .side:last-child .sideTitle {
  width: 100%;
  flex: 0 0 100%;
}

.doubleSelect .side:last-child .checkbox {
  flex: 0 0 calc((100% - 8px) / 2);
  box-sizing: border-box;
  max-width: calc((100% - 8px) / 2);
  min-width: 0;
}

/* formHeader와 doubleSelect 사이 gap */
.form {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* formTitle이 formHeader 밖에 있을 때만 (빵, 메인 메뉴, 치즈) */
.form > .formTitle,
.form select {
  display: block;
  width: 100%;
  margin: 0 !important;
}

/* formHeader: formTitle과 description 가로 정렬 */
.formHeader {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 !important;
}

.form select {
  margin: 0 !important;
}

/* formHeader는 margin-bottom 없음 */
.formHeader {
  margin-bottom: 0 !important;
}

.formHeader .formTitle {
  color: var(--gray-70);
  width: auto;
  display: inline;
}

.formHeader .description {
  color: var(--blue-40);
}

.side{
  padding: 12px;
  background-color: var(--gray-10);
  border-radius: 8px;
}
.sideTitle{
  color: var(--gray-60);
}

/* 야채 정보 카드 그리드 */
.vegetableInfoGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.vegetableInfoCard {
  background-color: var(--gray-10);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vegetableInfoCard__name {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0%;
  color: var(--gray-90);
}

.vegetableInfoCard__calorie {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: 0%;
  color: var(--gray-60);
}
/* Force cache refresh */