@charset "UTF-8";


a:link { text-decoration: none; color:#6b6b6b; }
a:visited { text-decoration: none; color:#6b6b6b; }
a:active { text-decoration: none; color:#6b6b6b; }
a:hover { text-decoration: none; color:#7b889f; }


body{
    margin:0;
    font-family: Arial, sans-serif;
    background:#f4f3ee;
}


.container{
    max-width:100%;
    margin:auto;
    /* background:white; */
}


/* =========================
   PC에서 모바일처럼 보이기
   ========================= */
@media (min-width: 768px) {
  body {
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .container {
    width: 600px;              /* 모바일 폭 */
    min-height: 800px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  }
}


/* header */
.header{
    position:relative;
    height:50px;
    display:flex;
    align-items:center;
    padding:0 16px;
    border-bottom:1px solid #eee;
    background:#101720;
	color: white;
	font-weight: bold;
}


.left_icon{
    font-size:15px;
}

.right_icon{
    margin-left:auto;
    font-size:15px;
}

.header .title{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    font-weight:600;
    font-size:20px;
}

/* 저장 아이콘 */
.right_icon .save-wrapper {
	position: relative;
	width: 28px;
	height: 28px;
	cursor: pointer;
}

.right_icon .save-icon {
	width: 100%;
	height: 100%;
}

/* 뱃지 */
.right_icon .badge {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	background: red;
	color: #fff;
	font-size: 11px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1px 2px;
	font-weight: bold;
}

.right_icon .hidden {
	display: none;
}



/* section */

.section{
    padding:15px;
}

.section-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
    font-weight:bold;
    font-size:18px;
    margin-bottom:10px;
}
.section-title .more{
	float:right;
	font-size: 0.7em;
	font-weight: normal;
}

/* card list */

.card-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
	padding:10px 10px 10px 0px;
}

.card{
    min-width:90px;
    background:white;
    border-radius:15px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    overflow:hidden;
	border:1px solid #D9D9D9;
	text-align:center;
}

.card .in {
	border:0px solid red;
	width:90%;
	display: inline-block;
	padding-top:5px;
}
.card img{
    width:100%;
	border-radius:12px;
    object-fit:cover;
}

.card .name{
    font-size:13px;
    text-align:center;
    padding:3px 5px 3px 5px;
}

/* theme box */

.theme-box{
    background:#fff;
    border-radius:15px;
    padding:10px;
	border:1px solid #D9D9D9;
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.theme-box-list {

    display:flex;
    gap:10px;
    overflow-x:auto;
	padding-bottom:12px;

}

.theme-box2{
	display:inline;
	overflow:hiddlen; 
	white-space:nowrap;
    background:#fff;
    border-radius:12px;
    padding:10px;
	border:1px solid #D9D9D9;
	margin-top:10px;
	font-size:16px;
	font-weight:bold;
	box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.theme-title{
	font-size:16px;
	font-weight:bold;
	padding:5px 0 8px 0;
}

.theme-foods{
    display:flex;
    gap:10px;
}

.theme-food{
    flex:1;
	position: relative;          /* 제목 배치의 기준점 */
}

.theme-food img{
    width:100%;
    border-radius:10px;
}

.theme-food .image-title {
	position: absolute;          /* 컨테이너 기준으로 절대 배치 */
	bottom: 0;                   /* 바닥에 붙임 */
	left: 0;                     /* 왼쪽에 붙임 */
	width: 100%;                 /* 가로로 꽉 채움 (선택 사항, 글자 길이에 맞춰도 됨) */
	
	/* 가독성을 위한 배경 그라데이션 (선택 사항, 더 세련됨) */
	/* background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); */
	/* 또는 단순 반투명 배경 (원하는 대로 선택) */
	/* background-color: rgba(0, 0, 0, 0.5); */


	color: white;                /* 글자 색상 */
	padding: 10px;               /* 안쪽 여백 */
	box-sizing: border-box;      /* 패딩을 너비에 포함 */
	margin: 0;
	font-size: 13px;
	font-weight: bold;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.5); /* 글자 그림자로 가독성 향상 */
}



/* sale */

.sale-card{
    display:flex;
    gap:10px;
}

.sale-item{
    flex:1;
    background:white;
    border-radius:15px;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
	position: relative;
}

.sale-item .outDiv{
    position:absolute;
	border:0px solid red;
	width:100%;
	padding-left:17px;
}

.sale-item .inRate{
	width:25%;
	height:90px;
	border:0px solid blue;
	background-image: url('/images/rate_tag.png');
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align:center;
	padding:0px 2px 0 2px;
}

.sale-item .inRate .rate{
	color: white;
	font-size:14px;
	padding-top:5px;
}

.sale-item .inRate .off{
	color: white;
	font-size:10px;
}

.sale-item img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.sale-item .title{
    padding:1px 10px 6px 10px;
    font-weight:bold;
	float:left;
}

/* sale product */
.sale-product-row{
    display:flex;
    gap:10px;
    overflow-x:auto;
	padding:10px 10px 10px 0px;
}
.sale-product-row .sale-item{
	flex: 1;
	display:flex;
	flex-direction: column;
    min-width: 30vw;
    background:white;
    border-radius:2vw;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
	position: relative;
}

.sale-product-row .sale-item img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.sale-product-row .sale-item .title{
	width: calc(100% -20px);
	height: 10vw;
    padding:1px 10px 6px 10px;
    font-weight:bold;
	float:left;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sale-product-row .sale-item .price{
    padding:10px;
    font-weight:bold;
	text-align: right;
	float:right;
}

.sale-product-row .sale-item .price span{
	font-weight: normal;
	font-size: 0.92em;
	text-decoration: line-through;
}

/* recipe in product */
.recipe-in-product {
	padding: 15px 10px 15px 10px;
	margin-bottom: 5px;
	border-bottom: 0.4vw dotted #CDCDCD;
}
.recipe-in-product .product-item {
    display: flex;
    align-items: center;
	background: #FFFFFF;
	border-radius: 2vw;
	padding: 10px;
}
.recipe-in-product .product-left {
	flex: 1;
    display: flex;
    align-items: center;
}

.recipe-in-product .product-left img {
    width: 12vw;
    height: 12vw;
    border-radius: 1.3vw;
    object-fit: cover;
	display: block;
}
.recipe-in-product .product-left span {
	margin-left: 1.5vw;
	font-size: 0.95em;
	color: #333333;
}
.recipe-in-product .product-price {
    width: 22vw;
    text-align: right;
	font-size: 1em;
    font-weight: 600;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.recipe-in-product .product-price .dc-rate {
	color: #666666;
    font-weight: 300;
	font-size: 0.85em;
}
.recipe-in-product .product-item .bprice {
	text-decoration: line-through;
}
.recipe-in-product .product-item .dprice {
	color: #FF4500;
    font-weight: 600;
}
.recipe-in-product .product-item .won{
    font-size: 0.8em;
}
.recipe-in-product .product-item .product-cart {
	width: 8.5vw;
	height: 8.5vw;
	margin-left: 2vw;
}
.recipe-in-product .product-item .product-cart img {
	width: 8.5vw;
	height: 8.5vw;
}

/* recipe in product */
.dc-product-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 15px;
}
.dc-product-list .dc-item{
	display:flex;
	flex-direction: column;
	width: 29vw;
    background:white;
    border-radius:2vw;
    overflow:hidden;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
	position: relative;
	margin-bottom: 20px;
}

.dc-product-list .dc-item img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.dc-product-list .dc-item .title{
	width: calc(100% - 20px);
	height: 11vw;
    padding:1px 10px 1px 10px;
    font-weight:bold;
	float:left;
	overflow: hidden;
}

.dc-product-list .dc-item .price{
    padding:10px;
    font-weight:bold;
	text-align: right;
	float:right;
	color: #FF4500;
}

.dc-product-list .dc-item .price span{
	font-weight: normal;
	font-size: 0.90em;
	color: #666666;
	text-decoration: line-through;
}

.dc-product-list .dc-item .outDiv{
    position:absolute;
	border:0px solid red;
	width:110px;
	padding-left:12px;
}

.dc-product-list .dc-item .inRate{
	width:30%;
	height:90px;
	border:0px solid blue;
	background-image: url('/images/rate_tag.png');
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align:center;
	padding:0px 2px 0 2px;
}

.dc-product-list .dc-item .inRate .rate{
	color: white;
	font-size:14px;
	padding-top:5px;
}

.dc-product-list .dc-item .inRate .off{
	color: white;
	font-size:10px;
}

/* fridge */

.fridge img{
	border:0px solid red;
	border-radius:15px;
	box-shadow:0 2px 6px rgba(0,0,0,0.2);
}

/* bottom nav */
/*
.nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    max-width:420px;
    margin:auto;
    background:white;
    display:flex;
    justify-content:space-around;
    padding:10px 0;
    border-top:1px solid #ddd;
}

.nav div{
    text-align:center;
    font-size:12px;
}

.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:60px;
    background:#fff;
    border-top:1px solid #eee;
	margin:auto;
	display:flex;
	justify-content:space-around;
    transition:transform 0.5s ease;
}

.bottom-nav div{
    text-align:center;
    font-size:13px;
	padding-top:10px;
}
*/

.bottom-nav.hide{
    transform:translateY(100%);
}


/* 하단 바 전체 컨테이너 */
.bottom-nav {
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around; /* 아이템 간격 균등 분배 */
    align-items: center;
    border-top: 1px solid #eeeeee;
    z-index: 1000;
	transition:transform 0.5s ease;
}

/* 각 메뉴 아이템 */
.nav-item {
    display: flex;
    flex-direction: column; /* 아이콘 아래에 글씨 배치 */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 1; /* 동일한 너비 공유 */
}

/* 네비게이션 내 이미지 아이콘 스타일 */
.nav-item img {
    width: 24px;  /* 아이콘 적정 크기 */
    height: 24px;
    margin-bottom: 1px; /* 아이콘과 텍스트 사이 간격 */
    object-fit: contain; /* 이미지 비율 유지 */
    opacity: 1; /* 기본 상태는 약간 흐리게 */
    transition: all 0.2s ease;
}


/* 메뉴 텍스트 스타일 */
.nav-item span {
    font-size: 12px;
    color: #000;
}

/* 활성화(클릭된) 상태 스타일 */
.nav-item.active img {
    opacity: 1; /* 이미지를 진하게 */
    /* 필요 시 이미지를 오렌지색 계열로 보이게 필터 적용 가능 */
    /* filter: sepia(100%) saturate(500%) hue-rotate(10deg); */
}

.nav-item.active span {
    color: #f37321; /* 강조 색상 (주황색) */
    font-weight: bold;
}



/* ai chat */

.aichat {
	max-width:98vw;
    height: 80vh;
    margin:auto;

    display:flex;
	margin-bottom:60px;
}

/* main chat area */
.aichat .main{
    flex:1;
    overflow-y:auto;
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* message */
.aichat .message{
    max-width:80%;
    padding:12px 14px;
    border-radius:14px;
    font-size:14px;
    line-height:1.4;
}

/* AI */
.aichat .ai{
    background:#ffffff;
    align-self:flex-start;
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
}

/* user */
.aichat .user{
    background:#e8f0ff;
    align-self:flex-end;
}

/* AI2 */
.aichat .ai2{
    background:#D2E3FC;
    align-self:flex-end;
	color:#174EA6;
}

.aichat .dish-name {
	color:#2e7d32
}

.aichat .dish-summary {
	font-size:13px
}


.aichat .detail_link{
    padding:3px 3px;
    border-radius:10px;
    font-size:11px;
    line-height:12px;
	background:#efefef;
    align-self:flex-end;
	width:50px;
	text-align:center;
	word-break: keep-all;
}

/* footer */
.aichat .input-footer{
	width:100vw;
	position:fixed;
    bottom:calc(60px + env(safe-area-inset-bottom));
	
}

.aichat .input-footer .input-item{
	width:90%;
	align-items:center;
	padding-left:16px;
	padding-bottom:10px;
}

.aichat .input-box{
	
    display:flex;
    align-items:center;
    background:white;
    border-radius:30px;
    padding:10px 14px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

.aichat .plus{
    font-size:20px;
    margin-right:8px;
}

.aichat .input{
    flex:1;
    border:none;
    outline:none;
    font-size:15px;
}

.aichat .icons{
    display:flex;
    gap:10px;
    align-items:center;
}

.aichat .voice{
    background:black;
    color:white;
    border-radius:50%;
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.aichat .list-item{
    display:flex;
    align-items:center;
    padding:15px;
    background:white;
    border-bottom:0px solid #eee;
    opacity:0;
    transform:translateY(10px);
    transition:all 0.4s ease;
}

.aichat .list-item.show{
    opacity:1;
    transform:translateY(0);
}

.aichat .list-item img{
    width:70px;
    height:70px;
    border-radius:10px;
    margin-right:15px;
    object-fit:cover;
}



/*******************************냉장고 털어 먹기*****************************************/
.ingredient {
}

.ingredient .ingredient-list{
	padding:10px;
}

.ingredient .ingredient-box{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:10px;
}

.ingredient .tag{
    background:#e8f0ff;
    padding:6px 12px;
    border-radius:14px;
    font-size:13px;
    display:flex;
    align-items:center;
    gap:6px;

    animation:tagPop 0.2s ease;
}

.ingredient .tag span{
    cursor:pointer;
}


.ingredient .main{
    flex:1;
    overflow-y:auto;
    padding:20px 16px;
    display:flex;
    flex-direction:column;
    gap:0px;
}



.ingredient .main .message{
    max-width:80%;
    padding:12px 14px;
    border-radius:14px;
    font-size:14px;
    line-height:1.4;
}

/* AI */
.ingredient .main .ai{
    background:#ffffff;
    align-self:flex-start;
    box-shadow:0 2px 5px rgba(0,0,0,0.08);
}





.ingredient .main .list-item{
    display:flex;
    align-items:center;
    padding:10px;
    background:white;
    border-bottom:0px solid #eee;
    opacity:0;
    transform:translateY(10px);
    transition:all 0.4s ease;
}




.ingredient .main .list-item.show{
    opacity:1;
    transform:translateY(0);
}

.ingredient .main .list-item img{
    width:70px;
    height:70px;
    border-radius:10px;
    margin-right:15px;
    object-fit:cover;
}

.ingredient .main .dish-name {
	color:#2e7d32
}

.ingredient .main .dish-summary {
	font-size:13px
}


.ingredient .main .detail_link{
    padding:3px 3px;
    border-radius:10px;
    font-size:11px;
    line-height:12px;
	background:#efefef;
    align-self:flex-end;
	width:50px;
	text-align:center;
	word-break: keep-all;
}


/* 추가 애니메이션 */
@keyframes tagPop{
    from{
        transform:scale(0.7);
        opacity:0;
    }
    to{
        transform:scale(1);
        opacity:1;
    }
}

/* 삭제 애니메이션 */
.ingredient .tag.remove{
    animation:tagRemove 0.2s forwards;
}

@keyframes tagRemove{
    to{
        transform:scale(0.7);
        opacity:0;
    }
}


/* layer */
.ingredient .layer{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.35);

    display:none;          /* 기본 숨김 */

    align-items:center;    /* 세로 가운데 */
    justify-content:center;/* 가로 가운데 */
}

.ingredient .layer-content{
    position:relative;

    width:85%;
    max-width:340px;

    background:white;
    border-radius:18px;

    padding:28px 20px 24px 20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

/* 닫기 버튼 */
.ingredient .close-btn{
    position:absolute;
    top:12px;
    right:12px;   /* ← 여기만 변경 */
	width:32px;
    height:32px;
    border-radius:50%;
    background:#f3f3f3;
	font-size:20px;

}

/* 제목 */

.ingredient .layer-title{
    text-align:center;
    font-size:18px;
    font-weight:600;
    margin-bottom:20px;
}

/* 입력 영역 */

.ingredient .layer-input{
    display:flex;
    gap:8px;
}

/* 입력창 */

.ingredient .layer-input input{
    flex:1;

    padding:12px 14px;

    border-radius:10px;
    border:1px solid #ddd;

    font-size:14px;

    outline:none;

    transition:0.2s;
}

.ingredient .layer-input input:focus{
    border-color:#4f7cff;
}

/* 추가 버튼 */

.ingredient .add-btn{
    padding:0 16px;

    border:none;
    border-radius:10px;
	
    background:#4f7cff;
    color:white;

    font-weight:600;
	font-size:14px;
    cursor:pointer;
}

.ingredient  .refresh-btn {
	float:right;
    display: inline-block;
    margin:10px 20px;
    padding: 6px 10px;
    background: #111;
    color: white;
    border-radius: 6px;
    cursor: pointer;
	font-size:14px;
	font-weight:bold;
}




/******************************* 레시피 리스트 *******************************/

/* search */
.search-wrap{
    top:50px; /* header 높이 만큼 */
    background:#fff;
    z-index:10;
	padding:10px 10px 0 10px;
    border-bottom:0px solid #eee;
}

/* 검색창 */
.search-box{
    display:flex;
    align-items:center;
    background:#f1f1f1;
    border-radius:20px;
    padding:8px 12px;
}

.search-box input{
    border:none;
    background:transparent;
    outline:none;
    width:100%;
	font-size:15px;
}

/* 전체 영역 */
.category-wrap{
    background:#fff;
    padding:10px;
    border-bottom:1px solid #eee;
}

/* 상위 카테고리 */
.category-list{
    gap:8px;

}

.cat{
    border:none;
    background:#f1f1f1;
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
	margin-top:10px;
	color:#000;
}

/* 선택 상태 */
.cat.active{
    background:#4f7cff;
    color:#fff;
}

/* 하위 카테고리 */
.sub-category{
    gap:8px;
	display:none;
}

.sub-cat{
    border:1px solid #ddd;
    background:#fff;
    padding:6px 12px;
    border-radius:16px;
    font-size:13px;
    cursor:pointer;
	margin-top:10px;
	color:#000;
}

.sub-cat.active{
    background:#4f7cff;
    color:#fff;
	border:1px solid #ddd;

}



.recipe-list {
    padding:10px;
}




.recipe-list .item{
    display:flex;
    background:#fff;
    border-radius:14px;
    padding:10px;
    margin-bottom:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.05);
}

.recipe-list .item .empty-item{
	text-align:center;
	width:100%;
	font-size:14px;
}


.recipe-list .item .outDiv{
    position:absolute;
	border:0px solid red;
	width:110px;
	padding-left:12px;
}

.recipe-list .item .inRate{
	width:30%;
	height:90px;
	border:0px solid blue;
	background-image: url('/images/rate_tag.png');
	background-size: contain;
	background-position: 0 0;
	background-repeat: no-repeat;
	text-align:center;
	padding:0px 2px 0 2px;
}

.recipe-list .item .inRate .rate{
	color: white;
	font-size:14px;
	padding-top:5px;
}

.recipe-list .item .inRate .off{
	color: white;
	font-size:10px;
}

.recipe-list .thumb{
    width:110px;
    height:110px;
    border-radius:12px;
    object-fit:cover;
    margin-right:12px;
}

/* 내용 */
.recipe-list .content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.recipe-list .title{
    color:#2e7d32;
    font-weight:700;
    margin-bottom:4px;
}

.recipe-list .desc{
    font-size:14px;
    color:#333;
    margin-bottom:6px;
}

.recipe-list .hash{
    font-size:13px;
    color:#777;
    margin-bottom:6px;
}

.recipe-list .meta{
    font-size:13px;
    color:#777;
    display:flex;
    align-items:center;
    gap:6px;
}

.recipe-list .star{
    color:#ffb400;
}

.recipe-list .bottom{
    display:flex;
    gap:10px;
    margin-top:6px;
}

.recipe-list .badge{
    border:1px solid #ddd;
    border-radius:20px;
    padding:4px 8px;
    font-size:12px;
    color:#555;
}

/* 북마크 */
.recipe-list .bookmark{
    font-size:20px;
    align-self:flex-start;
    margin-left:6px;
    cursor:pointer;
}


#loadingOverlay{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4); /* 화면 흐리게 */
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    display:none;
}

/* 로딩 스피너 */
.spinner{
    width:40px;
    height:40px;
    border:6px solid rgba(255,255,255,0.3);
    border-top:6px solid white;
    border-radius:50%;
    animation:spin 0.3s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}