@charset "utf-8";
/* 시스템 사이트의 경우 :  메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분, 서브에 적용되는 css 기재 /  메인에만 적용되는 main.css 추가해 메인 css 기재 */
/* 일반 사이트의 경우 : 메인+서브에 공통 적용되는 common.css 파일 추가해 메인+서브 공통부분 css / 메인에만 적용되는 main.css 추가해 메인 css 기재 / 서브에만 적용되는 sub.css 추가해 서브 css 기재 */
/* 시스템, 일반 사이트 공통 : 멤버십, 에러 등이 필요한 경우 퍼블 가이드 UI 요소에서 원하는 부분만 복사해서 common.css에 기재 */
/* basic.css, board.css에서 수정해서 사용할 것들은 common.css에 수정 css 적기 (basic, board 수정 X) */

:root{
    --dark: #444;
    --dark-hover: #222;
    --blue: #4359FC;
    --btn-blue-hover : #263DE6;
}
body{font-size: 1.6rem;}

/** layout **/
.content{padding: 8rem 1.6rem 1.6rem;min-height: 100vh;padding-bottom: 10rem;}
.content:has(.tab_menu){padding-top: 10.5rem;}

.btn{height: 4.5rem;}
.btn.dark{background-color: var(--dark); color:#fff; border-color: var(--dark);}
.btn.dark:hover,
.btn.dark:active{background-color: var(--dark-hover); border-color: var(--dark-hover);}
select:focus, input:focus, textarea:focus{border-color: transparent; outline: 2px solid var(--dark);}

/* header */
#header{height: 5rem;box-shadow: 0 0 10px rgba(0,0,0,0.16);position: fixed;top: 0;left: 0;width: 100%;background: #fff;display: flex;align-items: center;justify-content: center;z-index: 99;}
#header h2{font-size: 2rem; color: #000; font-weight: 700;}
#header .btn_history_back{font-size: 0; display: block; width: 5.8rem; height: 5.8rem; background-color: #fff; position: absolute; left: 0; top: 0;}
#header .btn_history_back::before{content: "\ea64"; font-family: 'remixicon'; font-size: 2rem;}
#header .btn_del{color: var(--red); background:transparent; font-size: 1.8rem; height: 6rem; width: 8rem; text-align: center; position: absolute; right: 0; top: 0; display: block;}
body:not(:has(.tab_menu)) #header{border-bottom: 1px solid var(--bdr);}
.btn_logout{position: absolute; right: 2rem; top: 2rem; background: #fff; color: #6E7779; font-size: 1.5rem;}


/* fixed_menu */
#fixed_menu{position: fixed;bottom: 0;left: 0;width: 100%;height: 7.5rem;background: #fff;z-index: 99;border-radius: 1.5rem 1.5rem 0 0;box-shadow: 0px -3px 10px rgba(0,0,0,0.16);overflow: hidden;}

div#fixed_menu {}
#fixed_menu ul{display: flex; align-items: center;}
#fixed_menu ul li{flex: 1;}
#fixed_menu ul li a{display: flex;align-items: center;justify-content: center;height: 7.5rem;font-size: 1.4rem;flex-direction: column;background: #fff;color: #CCCCCC;}
#fixed_menu ul li a::before{content: ''; display: block; width: 100%; height: 3.5rem;}
#fixed_menu ul li.on a{color: #5887F7;}
#fixed_menu ul li.menu1 a::before{background: url(../images/icon/i_menu1_off.png) no-repeat center / 3rem;}
#fixed_menu ul li.menu2 a::before{background: url(../images/icon/i_menu2_off.png) no-repeat center / 2.5rem;}
#fixed_menu ul li.menu3 a::before{background: url(../images/icon/i_menu3_off.png) no-repeat center / 3rem;}
#fixed_menu ul li.menu4 a::before{background: url(../images/icon/i_menu4_off.png) no-repeat center / 3rem;}
#fixed_menu ul li.menu1.on a::before{background: url(../images/icon/i_menu1_on.png) no-repeat center / 3rem;}
#fixed_menu ul li.menu2.on a::before{background: url(../images/icon/i_menu2_on.png) no-repeat center / 2.5rem;}
#fixed_menu ul li.menu3.on a::before{background: url(../images/icon/i_menu3_on.png) no-repeat center / 3rem;}
#fixed_menu ul li.menu4.on a::before{background: url(../images/icon/i_menu4_on.png) no-repeat center / 3rem;}

/** input, btns **/
span.chk{display: flex; gap: 0.8rem; flex-wrap: wrap;}
.chk .radio label::before,
.chk .radio label::after{display: none;}
.chk .radio label{font-size: 1.6rem;padding: 1rem 2.5rem;border-radius: 100rem;background: #f2f2f2;}
.chk .radio input:checked ~ label{background: var(--dark);color: #fff;}
.chk > span{margin: 0;}

input[type='text'],
input[type='number'],
input[type='date']{height: 4.5rem;font-size: 1.7rem;}
textarea{font-size: 1.7rem;}
input[type="date"]{-webkit-appearance: none; background: #fff url(../images/icon/i_cal.svg) no-repeat right 1rem center;}

/* custom file */
.filebox{}
.filebox input[type="file"] {overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;border: 0; outline:none !important;}
.filebox ul{padding-top: 1rem;}
.filebox .upload_name {min-width:0;width: auto;text-overflow: ellipsis;overflow: hidden;max-width: calc(100% - 4rem);white-space: nowrap;border: 0;padding: 0;height: auto;display: inline-block; padding-left: 1.1rem; position: relative;}
.filebox .upload_name::before{content: ''; display: block; width: 0.4rem; height: 0.4rem; background: #ddd; border-radius: 100rem; position: absolute; left: 0; top: 1rem;}
.filebox .upload_name + .btn_del{font-size: 0;background: transparent;vertical-align: 5px;}
.filebox .upload_name + .btn_del::before{content: "\eb99"; font-family: 'remixicon'; color: var(--red); font-size: 1.5rem;}
.filebox input[type="file"]:focus + .btn,
.filebox input[type="file"]:focus-visible + .btn{outline: 0.2rem solid var(--blue); outline-offset: 0.2rem;}
.filebox .btn{height: 4.5rem;line-height: 4.5rem;width: 100%;}

.btn.sml{font-size: 1.5rem;}


/* count_area */
.count_area{overflow:hidden;}
.count_area *{box-sizing:border-box;}
.count_area input[type=number]{height: 4.5rem;border:0.1rem solid #ddd;float:left;border-left:0;border-right:0;width:5rem;text-align:center;}
.count_area input[type=number]::-webkit-inner-spin-button {appearance: none;-moz-appearance: none;-webkit-appearance: none;}
.count_area .btn_minus,
.count_area .btn_plus{display:inline-block;width: 4.5rem;height: 4.5rem;font-size:2rem;float:left;border:0.1rem solid #ddd;cursor:pointer;}
.count_area .btn_minus{border-radius:0.5rem 0 0 0.5rem;}
.count_area .btn_plus{border-radius:0 0.5rem 0.5rem 0;}

/** contents **/

/* tab */
.tab.basic > .tab_menu{position: fixed;top: 6rem;width: 100%;left: 0;background: #fff;z-index: 99;}
.tab.basic > .tab_menu li{height: 4.5rem; border-top:0}
.tab.basic > .tab_menu li:last-of-type{border-right: 0;}
.tab.basic > .tab_cont{margin-top: 1.6rem;}

/* sub_tab_btns */
.sub_tab_btns{display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem;}
.sub_tab_btns button{display: inline-block;line-height: 1;padding: 0.8rem 1.5rem;border-radius: 100rem;background: #F3F3F3;font-weight: 400;color: #6E7779;font-size: 1.6rem;}
.sub_tab_btns button.on{background: #334161;color: #fff;}

/* ingredients_list */
.list_top{margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;}
.list_top i{margin-right: 0.5rem;}
.list_top b{color: var(--blue);}
.btn_write_float{position: fixed;bottom: 9rem;right: 1.6rem;width: 6rem;height: 6rem;border-radius: 100rem;background: var(--blue);font-size: 0;box-shadow: 2px 2px 5px rgba(0,0,0,0.16); transition: opacity 0.1s;}
.btn_write_float::before{content: "\ea13";font-family: 'remixicon';font-size: 2rem;color: #fff;}
.btn_write_float.menu_write::before{content: "\efe0";}
.btn_write_float.hide{opacity: 0;}
.ingredients_list ul{gap: 1rem;flex-wrap: wrap;display: flex;}
.ingredients_list li{border-radius: 1rem;position: relative;width: calc((100% - 1rem) / 2);/* width: 100%; */border: 1px solid #eee;}
.ingredients_list li a{display: block;padding: 1.2rem;}
.ingredients_list a b{font-weight: 600;display: block;padding-right: 2rem;word-break: break-all;line-height: 1.2;}
.ingredients_list a p{font-size: 1.3rem;color: #777;}
.ingredients_list a b .count{display: inline-block;width: 2rem;height: 2rem;line-height: 2rem;text-align: center;background: #F3F3F3;border-radius: 100rem;color: #7b8585;font-size: 1.2rem;vertical-align: 0.1rem;margin-left: 0.2rem;}
.ingredients_list .btn_del{font-size: 0;width: 3rem;height: 3rem;background: #fff;position: absolute;right: 0.3rem;top: 0.6rem;font-size: 0;text-align: center;}
.ingredients_list .btn_del::before{content: "\eb99";font-family: 'remixicon';font-size: 1.6rem;}

/* board_write */
.board_write{border-top: 0;}
.board_write dl{}
.board_write dl ~ *{margin-top: 3rem;}
.board_write dl dt{font-size: 1.8rem;font-weight: 600; position: relative;}
.board_write dl dt .btns{position: absolute; right: 0; top: -0.6rem;}
.board_write dl dt:has(.btns){margin-bottom: 1.2rem;}
.board_write dl dd{font-size: 1.7rem; margin-top: 0.5rem;}
.board_write .col2{display: flex; flex-wrap: wrap; gap: 2rem;}
.board_write .col2 > *{flex: 1;}
.board_write .col2 dl{margin-top: 0 !important;}
.board_write  .input_wrap {position: relative;padding-top: 2rem;border-top: 2px dashed #ddd;}
.board_write  .input_wrap > * + *{margin-top: 1.5rem;}
.board_write  .input_wrap > .btn{position: absolute; right: 0; top: 1.5rem;}
.btn_bottom_area{position: fixed; bottom: 0; left: 0; width: 100%; height: 7.5rem; background-color: #fff; z-index: 999; border-top: 1px solid #ddd; display: flex;}
.btn_bottom_area .btn{flex: 1; border-radius: 0; border: 0; height: 7.5rem; font-size: 1.8rem; font-weight: 500;}
.board_write dl dd + dd{margin-top: 1rem;}
.board_write dl dd .input_btn{display: flex; justify-content: space-between;}
.board_write dl dd .input_btn input{width: calc(100% - 11rem);}

/* board_view */
.board_view{border-top: 0; color: #333;}
.board_view .ingredients_tit{display: block;font-size: 2rem;font-weight: 700;margin-bottom: 2rem;}
.board_view .ingredients_tit .count{display: inline-block;width: 2.5rem;height: 2.5rem;line-height: 2.5rem;text-align: center;background: #F3F3F3;border-radius: 100rem;color: #7b8585;font-size: 1.4rem;vertical-align: 0.1rem;margin-left: 0.2rem;}
.board_view dl{display: flex;padding: 1.2rem;border: 1px solid #eee;border-radius: 1rem;}
.board_view dl + dl{margin-top: 1rem;}
.board_view dl dt{font-size: 1.7rem;font-weight: 600;width: 10rem;position: relative;}
.board_view dl dd{font-size: 1.7rem;width: calc(100% - 10rem);padding-left: 2rem;word-break: break-all;}
.board_view dl.w100p{display: block;}
.board_view dl.w100p dt{width: 100%;}
.board_view dl.w100p dt::after{display: none;}
.board_view dl.w100p dd{width: 100%; padding: 0; margin-top: 1rem;}
.board_view pre{display: block;border-radius: 1rem;line-height: 1.6;word-break: break-all;font-size: 1.6rem;letter-spacing: -0.02em;}
.board_view .link{white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; display: block; position: relative; padding-right: 2rem;}
.board_view .link::after{content: "\ecaf"; font-family: 'remixicon'; font-size: 1.6rem; position: absolute; right: 0; top: 0.2rem;}
.btn_recipe_photo{position: absolute; right: 0; top: -0.2rem;}

/* recipe_list */
.recipe_list{}
.recipe_list ul{display: flex;gap: 1.5rem 2rem;flex-wrap: wrap;}
.recipe_list ul li{width: calc((100% - 2rem) / 2);}
.recipe_list ul li a{display: block;}
.recipe_list ul li input{position: absolute; visibility: hidden !important;}
.recipe_list ul li label{display: block;position: relative;/* padding-top: 2rem; */}
.recipe_list ul li label::before{content: '\eb7b';font-family: 'remixicon';display: inline-block;position: relative;width: 1.7rem;height: 1.7rem;border: 0.9px solid var(--bdr);border-radius: 0.4rem;font-size: 0;font-weight: 900;line-height: 1.4rem;color: var(--bdr);text-align: center;background: #FFFFFF;position: absolute;top: 1rem;left: 1rem;}
.recipe_list ul li input:checked + label::before {border-color: var(--chk-bg);font-size: 1.2rem;color: #FFFFFF;background: var(--chk-bg);}

.recipe_list ul li .img_area{width: 100%; height: 13vh; background: #f2f2f2; overflow: hidden; border-radius: 1rem;}
.recipe_list ul li .img_area img{width: 100%; object-fit: cover; width: 100%; height: 100%;}
.recipe_list ul li b{display: block;text-align: center;font-size: 1.5rem;padding-top: 0.5rem;font-weight: 500;}

/* recipe_view */
.recipe_top{margin-bottom: 3rem;}
.recipe_top .img_area{width: 100%; height: 30vh; background: #f2f2f2; overflow: hidden; border-radius: 1rem;}
.recipe_top .img_area img{width: 100%; object-fit: cover; width: 100%; height: 100%;}
.recipe_top b{display: block;text-align: center;font-size: 2.5rem;padding-top: 1rem;font-weight: 600;word-break: break-all;}
.recipe_top .btn_favorite{font-size: 0; background: transparent; display: inline-block; vertical-align: -0.2rem;}
.recipe_top .btn_favorite i{font-size: 2.5rem; color: #ddd;}
.recipe_top .btn_favorite.on i{color: #dbac28;}

/* top_sch */
.top_sch{position: relative; margin-bottom: 1rem;}
.top_sch input{padding-right: 6rem;width: 100%;border-radius: 100rem;background: #f2f2f2;border: 0;padding-left: 2rem;}
.top_sch .btn_sch{display: block;width: 5rem;height: 4.5rem;background: transparent;position: absolute;right: 0.5rem;top: 0;font-size: 0;}
.top_sch .btn_sch i{font-size: 2.4rem;}

/* layer_popup */
.layer_pop .pop_content{max-height: 70vh; overflow-y: auto;}
.recipe_img img{width: 100%;}

/* comment_area */
.comment_area{margin-top: 6rem; padding: 1.5rem; background: #f1f1f1; border-radius: 1rem; position: relative;}
.comment_area > p{position: absolute; top: -3.5rem; left: 0; font-size: 1.8rem; font-weight: 600;}
.comment_area .comment_write{display: flex; align-items: center; justify-content: space-between;}
.comment_area .comment_write textarea{height: 10rem; min-height: 0; width: calc(100% - 11rem);}
.comment_area .comment_write .btn{width: 10rem; height: 10rem; min-width: 0;}
.comment_area .comment_list{margin-top: 2rem;}
.comment_area .comment_list li{position: relative;background: #fff;padding: 1rem;padding-right: 7rem;border-radius: 1rem;}
.comment_area .comment_list li + li{margin-top: 1rem;}
.comment_area .comment_list li p{font-size: 1.4rem; color: #777;}
.comment_area .comment_list li .btn_del{position: absolute; right: 1rem; top: 1rem;}

/* login */
.login_wrap{min-height: 100vh;}
.login_box h1.logo{margin-bottom: 2rem;}
.login_box h1.logo img{max-width: 15rem;}
.login_box .input_box > ul > li label{position: absolute; font-size: 1.4rem; left: 1.6rem; top:1rem; font-weight: 600;}
.login_box .input_box > ul > li input{height: 7rem; padding-top: 2rem; font-weight: 500; font-size: 1.8rem; border-radius: 1rem;}
.login_box .input_box > ul > li input:focus{outline: 2px solid black; border-color: transparent;}
.btn_login{height: 5.6rem !important;}

/* tab */
.tab.basic > .tab_menu {border-bottom: 1px solid var(--bdr);}
.tab.basic > .tab_menu li{background-color: transparent; border: 0; position: relative;}
.tab.basic > .tab_menu li a{color: #222;font-size: 1.8rem;padding-bottom: 1.5rem;}
.tab.basic > .tab_menu li a.on{color: var(--blue);}
.tab.basic > .tab_menu li:has(.on){background-color: transparent; font-weight: 700;}
.tab.basic > .tab_menu li:has(.on)::after{content: '';display: block;width: 100%;height: 0.3rem;background: var(--blue);position: absolute;left: 0;bottom: 0;}

/* buy_list */
.content:has(.top_write){padding-top: 17.5rem;}
.top_write{display: flex;align-items: center;justify-content: space-between;background: #f2f2f2;width: 100%;padding: 1.6rem;position: fixed;left: 0;top: 10rem;z-index: 9;}
.top_write input{width: calc(100% - 10rem);}
.top_write .btn{}
.buy_list{margin-top: 2rem;}
.buy_list li{border: 1px solid #eee; border-radius: 1rem; position: relative;}
.buy_list li .btn{position: absolute;right: 0.8rem;top: 0.7rem;}
.buy_list li + li{margin-top: 1rem;}
.buy_list li .chk,
.buy_list li .cbx,
.buy_list li label{display: block;}
.buy_list li label{padding: 1.5rem;padding-left:3.8rem;padding-right: 8rem;word-break: break-all;}
.buy_list li input:checked ~ label{text-decoration: line-through;}
.buy_list li label::before{position: absolute !important; left: 1.2rem;}

/* menu_list*/
.content:has(.menu_date_range){padding-top: 13rem;}
.menu_date_range{display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #fff;  position: fixed; top: 6rem; left: 0; padding: 1.6rem;}
.menu_date_range p{font-size: 1.8rem; font-weight: 600;}
.menu_date_range button{display: block; width: 3.5rem; height: 3.5rem; background: #fff; font-size: 0; border-radius: 100rem; border: 1px solid #ddd;}
.menu_date_range button::before{content: "\ea64"; font-family: 'remixicon'; font-size: 1.7rem;}
.menu_date_range button.btn_next{transform: rotate(180deg);}
.menu_list{}
.menu_list > ul{}
.menu_list > ul > li{padding: 1.2rem;border-radius: 1rem;display: flex;align-items: center;background: #F3F3F3;}
.menu_list > ul > li + li{margin-top: 1rem;}
.menu_list > ul > li .date{display: flex;flex-direction: column;align-items: center;justify-content: center;background: #fff;width: 8rem;padding: 1rem 1rem;border-radius: 1rem;line-height: 1.2;}
.menu_list > ul > li ul{width: calc(100% - 8rem); padding-left: 1rem;}
.menu_list > ul li li{font-size: 1.7rem; font-weight: 500;}
.menu_list > ul li li a::after{content: "\ea6c"; font-family: 'remixicon'; display: inline-block; width: 2.4rem; height: 2.4rem; border-radius: 100rem; background-color: var(--blue); color: #fff; font-size: 1.4rem; text-align: center; line-height: 2.4rem; margin-left: 0.5rem;}

/*************************************************************
    나만의냉장고레시피 추가 css
*************************************************************/
:root{
    --orange: #F87536;
    --orange-light: #FB7F3D;
    --orange-hover: #E8622A;
    --input-bg: #F4F5FA;
    --input-icon: #A1AABA;
    --txt-gray: #8A909C;
}

/* common */
.blind{position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}
.btn.orange{border-color: var(--orange); color: #fff; background-color: var(--orange);}
.btn.orange:hover,
.btn.orange:focus{border-color: var(--orange-hover); background-color: var(--orange-hover);}

/* login (AUTH-01) */
.login_wrap.fridge{position: relative; overflow: hidden; display: block; padding: 8rem 1.9rem 4rem; background: linear-gradient(180deg, #FDF5EF 0%, #FCF8F5 45%, #FBF8F8 100%);}
.login_wrap.fridge::before{content: ''; position: absolute; left: -9rem; top: -10rem; width: 24rem; height: 19rem; border-radius: 0 0 60% 40% / 0 0 70% 50%; background: linear-gradient(160deg, #FECBA3 0%, #FEDDC2 55%, rgba(254,225,203,0) 100%); transform: rotate(-12deg); z-index: 0;}
.login_wrap.fridge::after{content: ''; position: absolute; right: -6rem; bottom: -5rem; width: 18rem; height: 12rem; border-radius: 60% 0 0 0 / 70% 0 0 0; background: linear-gradient(200deg, #FDE3D2 0%, rgba(253,232,220,0.4) 100%); transform: rotate(-8deg); z-index: 0;}
.login_wrap.fridge .login_box{position: relative; z-index: 1; max-width: 48rem;}
.login_wrap.fridge .login_top{text-align: center;}
.login_wrap.fridge h1.logo{margin-bottom: 0; font-size: 3rem; font-weight: 800; line-height: 1.3; color: #222; letter-spacing: -0.04em;}
.login_wrap.fridge h1.logo em{font-style: normal; color: var(--orange);}
.login_wrap.fridge .login_top .txt{margin-top: 0.2rem; font-size: 1.5rem; color: var(--txt-gray); letter-spacing: -0.02em;}
.login_wrap.fridge .login_top .img_area{width: 90%; max-width: 42rem; margin: 1.8rem auto 0; aspect-ratio: 800 / 440; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);}
.login_wrap.fridge .login_top .img_area img{display: block; width: 100%; height: 100%;}

.login_wrap.fridge .login_form{position: relative; padding: 3rem 2rem 3.3rem; background: #fff; border-radius: 1.8rem; box-shadow: 0 0.8rem 3rem rgba(226,196,176,0.25);}
.login_wrap.fridge .input_box > ul > li{position: relative;}
.login_wrap.fridge .input_box > ul > li + li{margin-top: 1.2rem;}
.login_wrap.fridge .input_box > ul > li > i{position: absolute; left: 1.4rem; top: 0; height: 4.4rem; line-height: 4.4rem; font-size: 2rem; color: var(--input-icon); z-index: 1;}
.login_wrap.fridge .input_box > ul > li input{width: 100%; height: 4.4rem; padding: 0 1.6rem 0 4.4rem; border: 0; border-radius: 1.2rem; background: var(--input-bg); font-size: 1.6rem; font-weight: 500; line-height: 4.4rem; color: #333;}
.login_wrap.fridge .input_box > ul > li input:placeholder-shown{font-size: 1.5rem;}
.login_wrap.fridge .input_box > ul > li input::placeholder{color: var(--txt-gray); font-weight: 400;}
.login_wrap.fridge .input_box > ul > li input:focus{outline: 2px solid var(--orange); border-color: transparent;}
.login_wrap.fridge .input_box > ul > li.user_pw input{padding-right: 5rem;}
.login_wrap.fridge .btn_pw_view{position: absolute; right: 0.4rem; top: 0; width: 4.4rem; height: 4.4rem; font-size: 0; background: transparent;}
.login_wrap.fridge .btn_pw_view::before{content: "\ecb7"; font-family: 'remixicon'; font-size: 2rem; color: #6B7280;}
.login_wrap.fridge .btn_pw_view.on::before{content: "\ecb5";}
.login_wrap.fridge .error_txt{margin-top: 0.6rem; font-size: 1.3rem;}
.login_wrap.fridge .btn_area{margin-top: 1.7rem;}
.login_wrap.fridge .btn_login{height: 4.4rem !important; border: 0; border-radius: 1.2rem; background: linear-gradient(90deg, var(--orange-light) 0%, var(--orange) 100%); font-size: 1.7rem; font-weight: 600; line-height: 4.4rem; box-shadow: 0 0.6rem 1.4rem rgba(248,117,54,0.28);}
.login_wrap.fridge .btn_login:hover,
.login_wrap.fridge .btn_login:focus{background: var(--orange-hover);}

/* header (no_line) */
body #header.no_line{border-bottom: 0;}
#header.no_line h2{font-size: 1.8rem;font-weight: 800;color: #222;}

/* fixed_menu (type_fridge) */
#fixed_menu.type_fridge{height: 6rem; overflow: visible; border-radius: 2rem 2rem 0 0; box-shadow: 0 -0.3rem 1.6rem rgba(31,41,55,0.07);}
#fixed_menu.type_fridge ul li a{height: 6rem; font-size: 1.2rem; font-weight: 500; color: #9AA2B1; background: transparent;}
#fixed_menu.type_fridge ul li a::before{width: 2.4rem; height: 2.4rem; margin-bottom: 0.3rem; background: no-repeat center / contain;}
#fixed_menu.type_fridge ul li.on a{color: var(--orange); font-weight: 600;}
#fixed_menu.type_fridge ul li.menu_recipe a::before{background-image: url(../images/icon/i_nav_recipe_off.png);}
#fixed_menu.type_fridge ul li.menu_ingredient a::before{background-image: url(../images/icon/i_nav_ingredient_off.png);}
#fixed_menu.type_fridge ul li.menu_calendar a::before{background-image: url(../images/icon/i_nav_calendar_off.png);}
#fixed_menu.type_fridge ul li.menu_shopping a::before{background-image: url(../images/icon/i_nav_shopping_off.png);}
#fixed_menu.type_fridge ul li.menu_recipe.on a::before{background-image: url(../images/icon/i_nav_recipe_on.png);}
#fixed_menu.type_fridge ul li.menu_ingredient.on a::before{background-image: url(../images/icon/i_nav_ingredient_on.png);}
#fixed_menu.type_fridge ul li.menu_calendar.on a::before{background-image: url(../images/icon/i_nav_calendar_on.png);}
#fixed_menu.type_fridge ul li.menu_shopping.on a::before{background-image: url(../images/icon/i_nav_shopping_on.png);}
#fixed_menu.type_fridge ul li.menu_add{position: relative; height: 6rem;}
#fixed_menu.type_fridge .btn_add{position: absolute; left: 50%; top: -1.8rem; width: 4.6rem; height: 4.6rem; margin-left: -2.3rem; border-radius: 100rem; font-size: 0; background: linear-gradient(135deg, var(--orange-light) 0%, var(--orange) 100%); box-shadow: 0 0 0 0.5rem #fff, 0 0.6rem 1.4rem rgba(248,117,54,0.35);}
#fixed_menu.type_fridge .btn_add::before{content: "\ea13"; font-family: 'remixicon'; font-size: 2.4rem; color: #fff;}

/* recipe_main (REC-01) */
.content.recipe_main{padding: 6.2rem 1.4rem 9rem;}
.list_search{display: flex; gap: 0.6rem; margin-bottom: 0.8rem;}
.list_search .top_sch{flex: 1; margin-bottom: 0;}
.list_search .top_sch > i{position: absolute; left: 1.3rem; top: 50%; transform: translateY(-50%); font-size: 1.8rem; color: #7D8594; z-index: 1;}
.list_search .top_sch input{height: 4.2rem;padding: 0 1.2rem 0 3.8rem;border: 1px solid #E3E5EA;border-radius: 1.2rem;background: #fff;font-size: 1.5rem;}
.list_search .top_sch input::placeholder{color: #9AA0AC;}
.list_search .top_sch input:focus{outline: 2px solid var(--orange); border-color: transparent;}
.list_search .view_type{display: flex; gap: 0.2rem; padding: 0.3rem; border: 1px solid #ECEDF1; border-radius: 1.4rem; background: #fff;}
.list_search .btn_view{position: relative; width: 3.4rem; height: 3.4rem; border-radius: 1rem; font-size: 0; background: transparent;}
.list_search .btn_view::before{content: ''; position: absolute; left: 50%; top: 50%; width: 1.8rem; height: 1.8rem; transform: translate(-50%,-50%); background: no-repeat center / contain;}
.list_search .btn_view.list::before{width: 1.9rem; background-image: url(../images/icon/i_view_list_off.png);}
.list_search .btn_view.grid::before{background-image: url(../images/icon/i_view_grid_off.png);}
.list_search .btn_view.on{background: #FFF1E8;}
.list_search .btn_view.list.on::before{background-image: url(../images/icon/i_view_list_on.png);}
.list_search .btn_view.grid.on::before{background-image: url(../images/icon/i_view_grid_on.png);}

.chip_area{display: flex; gap: 0.5rem; margin: 0 -1.4rem 1rem; padding: 0 1.4rem; overflow-x: auto; scrollbar-width: none;}
.chip_area::-webkit-scrollbar{display: none;}
.sub_tab_btns.chip{flex-wrap: nowrap; flex-shrink: 0; gap: 0.5rem; margin-bottom: 0;}
.sub_tab_btns.chip button,
.chip_area .btn_favorite_filter{flex-shrink: 0;height: 2.8rem;border-radius: 100rem;line-height: 1;padding: 0 1rem;border: 1px solid #E3E5EA;background: #fff;font-size: 1.4rem;color: #7A8190;white-space: nowrap;}
.sub_tab_btns.chip button.on{border-color: var(--orange); background: var(--orange); color: #fff; font-weight: 500;}
.chip_area .btn_favorite_filter i{margin-right: 0.4rem; font-size: 1.5rem; color: var(--orange); vertical-align: -0.2rem;}
.chip_area .btn_favorite_filter.on{border-color: var(--orange); background: #FFF1E8; color: var(--orange);}

.cate_badge{display: inline-block;padding: 0 1rem;border-radius: 100rem;font-size: 1.3rem;font-weight: 500;line-height: 1.5;}
.cate_badge.health{background: #EAF7E4; color: #4BA52E;}
.cate_badge.normal{background: #FFEEE4; color: #F2681E;}
.cate_badge.keto{background: #F1E9FF; color: #7A3CE6;}

.recipe_list ul li{position: relative;}
.recipe_list ul li > a{border: 1px solid #ECEDF1; border-radius: 1.2rem; background: #fff; overflow: hidden;}
.recipe_list ul li .img_area{height: auto; border-radius: 0.8rem;}
.recipe_list ul li .txt_area b{padding: 0; font-size: 1.55rem; font-weight: 700; color: #222; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.recipe_list ul li .btn_favorite{position: absolute; font-size: 0; background: transparent;}
.recipe_list ul li .btn_favorite i::before{content: "\ee0f"; color: #8C95A6;}
.recipe_list ul li .btn_favorite.on i::before{content: "\ee0e"; color: var(--orange);}
.recipe_list .no_data{display: none; padding: 6rem 0; text-align: center; font-size: 1.5rem; color: #9AA0AC;}
.recipe_list.empty .no_data{display: block;}
/* recipe_list : 피드형 */
.recipe_list.type_grid ul{gap: 0.8rem;}
.recipe_list.type_grid ul li{width: calc((100% - 0.8rem) / 2);}
.recipe_list.type_grid ul li > a{padding: 0.5rem 0.5rem 0.9rem;}
.recipe_list.type_grid ul li .img_area{aspect-ratio: 4 / 3;}
.recipe_list.type_grid ul li .txt_area{padding: 1rem 0.3rem 0;}
.recipe_list.type_grid ul li .txt_area b{margin-top: 0.3rem;}
.recipe_list.type_grid ul li .btn_favorite{right: 0.9rem; top: 0.9rem; width: 2.6rem; height: 2.6rem; border-radius: 100rem; background: #fff; box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.12);}
.recipe_list.type_grid ul li .btn_favorite i{font-size: 1.6rem; line-height: 2.6rem;}
/* recipe_list : 목록형 */
.recipe_list.type_list ul{flex-direction: column; gap: 0.8rem;}
.recipe_list.type_list ul li{width: 100%;}
.recipe_list.type_list ul li > a{display: flex; align-items: center; padding: 0.7rem;}
.recipe_list.type_list ul li .img_area{flex-shrink: 0; width: 11.4rem; height: 8rem;}
.recipe_list.type_list ul li .txt_area{min-width: 0; padding: 0 4rem 0.6rem 1.2rem;}
.recipe_list.type_list ul li .txt_area b{margin-top: 0.8rem;}
.recipe_list.type_list ul li .btn_favorite{right: 0.8rem; top: 0.9rem; width: 3.6rem; height: 3.6rem;}
.recipe_list.type_list ul li .btn_favorite i{font-size: 2.2rem;}

/* bottom_sheet (layer_pop 확장) */
.layer_pop.bottom_sheet{position: fixed; left: 0; top: auto; bottom: 0; width: 100%; padding-bottom: 9rem; border-radius: 2.4rem 2.4rem 0 0; background: #fff; transform: translateY(100%); transition: transform 0.3s ease;}
.layer_pop.bottom_sheet.on{transform: translateY(0);}
.layer_pop.bottom_sheet .pop_header{display: block; height: auto; padding: 1rem 2rem 0; border: 0; border-radius: 0; text-align: center;}
.layer_pop.bottom_sheet .pop_header .handle{display: block; width: 3.8rem; height: 0.4rem; margin: 0 auto 1.8rem; border-radius: 100rem; background: #D3D6DC;}
.layer_pop.bottom_sheet .pop_header h2{font-size: 2rem; font-weight: 800; color: #222;}
.layer_pop.bottom_sheet .pop_header .txt{margin-top: 0.3rem;font-size: 1.4rem;color: var(--txt-gray);}
.layer_pop.bottom_sheet .pop_close{position: absolute; right: 1rem; top: 1.6rem; width: 3.6rem; height: 3.6rem;}
.layer_pop.bottom_sheet .pop_close i::before{font-size: 2.4rem; color: #9A9FAB;}
.layer_pop.bottom_sheet .pop_content{padding: 1.2rem 1.6rem 1.4rem;}
body:has(.bottom_sheet.on){overflow: hidden;}
body:has(.bottom_sheet.on) #fixed_menu.type_fridge{z-index: 5600;}

/* add_type (REC-02) */
.add_type .url_box input{width: 100%; height: 4.2rem; padding: 0 1.4rem; border: 1px solid #E3E5EA; border-radius: 1.2rem; font-size: 1.45rem;}
.add_type .url_box input::placeholder{color: #A3A9B4;}
.add_type .url_box input:focus{outline: 2px solid var(--orange); border-color: transparent;}
.add_type .url_box .error_txt{display: none; margin-top: 0.5rem; padding-left: 0.4rem; font-size: 1.3rem; color: #e83667;}
.add_type .url_box.err input{border-color: #e83667;}
.add_type .url_box.err .error_txt{display: block;}
.add_type .btn{display: block; width: 100%; height: 3.8rem; border-radius: 100rem; font-size: 1.6rem; font-weight: 600; line-height: 3.6rem; cursor: pointer;}
.add_type .btn_analysis{margin-top: 0.8rem; border-color: #FE9345; background: #FE9345; color: #fff;}
.add_type .btn_analysis:hover,
.add_type .btn_analysis:focus{border-color: var(--orange); background: var(--orange);}
.add_type .btn_line{border-color: #FE9345; background: #fff; color: var(--orange);}
.add_type .btn_line:hover,
.add_type .btn_line:focus{background: #FFF6F0;}
.add_type .btn_line i{margin-right: 0.6rem; font-size: 2rem; vertical-align: -0.3rem;}
.add_type .or{position: relative; margin: 1.1rem 0 1rem; text-align: center; line-height: 1;}
.add_type .or::before{content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: #E3E5EA;}
.add_type .or span{position: relative; padding: 0 1.2rem; background: #fff; font-size: 1.2rem; color: #9AA0AC;}

/* header 뒤로가기 (no_line) */
#header.no_line .btn_history_back{background-color: transparent;}
#header.no_line .btn_history_back::before{content: "\ea64"; font-size: 2.6rem; color: #5B6475;}

/* recipe_write (REC-05 / REC-09) */
.content.recipe_write{padding: 6.2rem 1.4rem 10rem;}
.recipe_write .board_write .write_box{padding: 1.6rem 1.3rem 1.8rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff;}
.recipe_write .board_write .write_box + .write_box{margin-top: 1.2rem;}
.recipe_write .board_write .write_box .tit{display: block; margin-bottom: 1rem; font-size: 2rem; font-weight: 800; color: #222;}
.recipe_write .board_write .write_box .tit:has(+ .desc){margin-bottom: 0;}
.recipe_write .board_write .write_box .desc{margin: 0.2rem 0 1.2rem; font-size: 1.35rem; color: var(--txt-gray);}
.recipe_write .board_write dl ~ *{margin-top: 1.6rem;}
.recipe_write .board_write dl dt{font-size: 1.5rem; font-weight: 700; color: #222;}
.recipe_write .board_write dl dd{margin-top: 0.6rem; font-size: 1.5rem;}
.recipe_write .board_write input[type='text'],
.recipe_write .board_write textarea{width: 100%;border: 1px solid #E3E7ED;border-radius: 1rem;font-size: 1.5rem;color: #333;}
.recipe_write .board_write input[type='text']{height: 4rem; padding: 0 1.3rem;}
.recipe_write .board_write textarea{display: block; min-height: 0; padding: 1.2rem 1.3rem; line-height: 1.6; resize: vertical;}
.recipe_write .board_write textarea.h_s{height: 9.6rem;}
.recipe_write .board_write textarea.h_m{height: 14.4rem;}
.recipe_write .board_write textarea.h_l{height: 16rem;}
.recipe_write .board_write input::placeholder,
.recipe_write .board_write textarea::placeholder{color: #A3A9B4;}
.recipe_write .board_write input[type='text']:focus,
.recipe_write .board_write textarea:focus{outline: 2px solid var(--orange); border-color: transparent;}

/* cate_chk : 라운드 선택칩 */
.chk.cate_chk{gap: 0.7rem; flex-wrap: nowrap;}
.chk.cate_chk > span{flex: 1 1 auto;}
.chk.cate_chk.col3 > span{flex: 1 1 0;}
.chk.cate_chk .radio label{display: block; height: 3.5rem; padding: 0 0.8rem; border: 1px solid #E0E3EA; border-radius: 100rem; background: #fff; font-size: 1.45rem; line-height: 3.3rem; color: #4B5260; text-align: center; white-space: nowrap;}
.chk.cate_chk .radio input:checked ~ label{border-color: var(--orange); background: var(--orange); color: #fff; font-weight: 500;}
.chk.cate_chk .radio input:focus-visible ~ label{outline: 2px solid var(--orange); outline-offset: 2px;}
.recipe_write .board_write dl.sub_cate.hide{display: none;}
.info_txt{margin-top: 1.2rem;font-size: 1.3rem;color: var(--txt-gray);}
.info_txt i{margin-right: 0.5rem;font-size: 1.6rem;color: #8C95A6;vertical-align: -0.2rem;}

/* photo_upload */
.photo_upload ul{display: flex; gap: 0.6rem; margin: 0 -1.3rem; padding: 0 1.3rem 0.8rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #D5DAE2 transparent;}
.photo_upload ul::-webkit-scrollbar{height: 0.4rem;}
.photo_upload ul::-webkit-scrollbar-thumb{border-radius: 100rem; background: #D5DAE2;}
.photo_upload ul::-webkit-scrollbar-track{background: transparent;}
.photo_upload li{position: relative; flex: 0 0 10rem; min-width: 0; aspect-ratio: 5 / 5; border-radius: 0.8rem; overflow: hidden;}
.photo_upload li.add label{display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;border: 1px dashed #BDC0D0;border-radius: 0.8rem;font-size: 1.4rem;color: #6B7280;cursor: pointer;}
.photo_upload li.add label i{margin-bottom: 0.3rem; font-size: 2.2rem; color: #5B6475;}
.photo_upload li.add input:focus-visible + label{outline: 2px solid var(--orange);}
.photo_upload li.photo img{width: 100%; height: 100%; object-fit: cover;}
.photo_upload li.photo .btn_del{position: absolute; right: 0.3rem; top: 0.3rem; width: 1.8rem; height: 1.8rem; border-radius: 100rem; background: rgba(0,0,0,0.5); font-size: 0;}
.photo_upload li.photo .btn_del::before{content: "\eb99"; font-family: 'remixicon'; font-size: 1.1rem; color: #fff;}
.photo_upload li.photo .badge{position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(248,117,54,0.9); font-size: 1rem; line-height: 1.8rem; color: #fff; text-align: center;}

/* btn_area col2 */
.btn_area.col2{display: flex; gap: 0.8rem; margin-top: 2rem;}
.btn_area.col2 .btn{flex: 1; height: 4.8rem; margin: 0; border-radius: 1.6rem; font-size: 1.7rem; font-weight: 700; line-height: 4.6rem;}
.btn_area.col2 .btn_line{border-color: #FE9345; background: #fff; color: var(--orange);}
.btn_area.col2 .btn_line:hover,
.btn_area.col2 .btn_line:focus{background: #FFF6F0;}
.btn_area.col2 .btn.orange{border: 0; background: linear-gradient(90deg, var(--orange-light) 0%, var(--orange) 100%);}
.btn_area.col2.fixed{position: fixed; left: 0; bottom: 0; width: 100%; margin: 0; padding: 1rem 1.4rem calc(1.2rem + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -0.3rem 1.2rem rgba(31,41,55,0.06); z-index: 99;}

/* recipe_view (REC-06) */
.content.recipe_view{padding: 6.6rem 1.4rem 3rem;}
.recipe_view .view_img{position: relative; aspect-ratio: 17 / 10; border-radius: 1.2rem; overflow: hidden;}
.recipe_view .view_img img{display: block; width: 100%; height: 100%; object-fit: cover;}
.recipe_view .view_img .btn_favorite{position: absolute; right: 0.9rem; top: 1.1rem; width: 3.2rem; height: 3.2rem; border-radius: 100rem; background: #fff; box-shadow: 0 0.2rem 0.6rem rgba(0,0,0,0.12);}
.recipe_view .view_img .btn_favorite i{font-size: 1.8rem; line-height: 3.2rem;}
.recipe_view .view_img .btn_favorite i::before{content: "\ee0f"; color: #8C95A6;}
.recipe_view .view_img .btn_favorite.on i::before{content: "\ee0e"; color: var(--orange);}

.recipe_view .view_info{margin-top: 1.1rem;}
.recipe_view .view_info .info_top{display: flex; align-items: center; justify-content: space-between;}
.recipe_view .view_info .btns{display: flex; gap: 0.9rem;}
.recipe_view .btn_icon{display: flex; align-items: center; justify-content: center; width: 3.4rem; height: 3.2rem; border: 1px solid #E3E5EA; border-radius: 1rem; background: #fff; color: var(--orange);}
.recipe_view .btn_icon i{font-size: 1.7rem;}
.recipe_view .btn_icon:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.recipe_view .view_info .tit{margin-top: 0.6rem; font-size: 2.4rem; font-weight: 800; color: #222; letter-spacing: -0.03em; word-break: keep-all;}
.recipe_view .view_info .desc{margin-top: 0.3rem;font-size: 1.4rem;color: #9298AB;word-break: keep-all;}

.recipe_view .view_box{margin-top: 1.3rem; padding: 1.4rem 0.8rem 0.8rem; border: 1px solid #E7EAEE; border-radius: 1.4rem; background: #fff;}
.recipe_view .view_info + .view_box{margin-top: 1.8rem;}
.recipe_view .view_box > .tit{margin: 0 0 1rem 0.8rem; font-size: 1.85rem; font-weight: 800; color: #222;}
.recipe_view .box_inner{padding: 1.1rem 1.3rem;border-radius: 1rem;background: #F5F6FA;font-size: 1.5rem;line-height: 1.5;color: #333;word-break: keep-all;}
.recipe_view .step_list{padding-block: 0.3rem;}
.recipe_view .step_list li{position: relative;display: flex;align-items: center;min-height: 2.3rem;font-size: 1.5rem;line-height: 1.8rem;}
.recipe_view .step_list li + li{margin-top: 1.4rem;}
.recipe_view .step_list .num{flex-shrink: 0; width: 2.3rem; height: 2.3rem; margin-right: 1rem; border-radius: 100rem; background: var(--orange); font-size: 1.15rem; font-weight: 600; line-height: 2.3rem; color: #fff; text-align: center;}
.recipe_view .link_box{display: flex;align-items: center;height: 3.85rem;padding: 0 1.2rem;border: 1px solid #E3E5EA;border-radius: 1rem;background: #fff;font-size: 1.5rem;color: #333;white-space: nowrap;overflow: hidden;}
.recipe_view .link_box i{flex-shrink: 0; margin-right: 1.6rem; font-size: 1.7rem; color: #444;}
.recipe_view .cook_log li + li{margin-top: 0.6rem;}
.recipe_view .cook_log .log_top{display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem;}
.recipe_view .cook_log .date{font-size: 1.15rem; color: #9298AB;}
.recipe_view .cook_log p{white-space: pre-line;}
.star_score{display: inline-flex; gap: 0.1rem; color: var(--orange);}
.star_score i{font-size: 1.5rem; line-height: 1;}
.star_score i.off{color: #D9DCE3;}
.recipe_view .view_box .btn_area.col2{margin-top: 0.8rem;}
.recipe_view .ingredient_list li{position: relative; padding-left: 1.2rem;}
.recipe_view .ingredient_list li + li{margin-top: 0.3rem;}
.recipe_view .ingredient_list li::before{content: ''; position: absolute; left: 0.2rem; top: 0.8rem; width: 0.4rem; height: 0.4rem; border-radius: 100rem; background: var(--orange);}

/* bottom_sheet.type_form : 입력폼 바텀시트 (하단 메뉴 없는 화면) */
.layer_pop.bottom_sheet.type_form{padding-bottom: env(safe-area-inset-bottom);}
.layer_pop.bottom_sheet.type_form .pop_content{padding: 1.5rem 1.4rem 1.4rem;}
.sheet_box{padding: 1.2rem 1.1rem; border: 1px solid #E7EAEE; border-radius: 1.2rem; background: #fff;}
.sheet_box + .sheet_box{margin-top: 0.8rem;}
.sheet_box > .tit{display: block; margin-bottom: 0.7rem; font-size: 1.45rem; font-weight: 700; color: #222;}
.sheet_box textarea{display: block;width: 100%;height: 6.6rem;min-height: 0;padding: 1rem 1.2rem;border: 1px solid #E3E7ED;border-radius: 0.8rem;background: #F7F8FB;font-size: 1.5rem;line-height: 1.5;color: #333;resize: none;}
.sheet_box textarea::placeholder{color: #A3A9B4;}
.sheet_box textarea:focus{outline: 2px solid var(--orange); border-color: transparent;}
.sheet_form .btn_area.col2{margin-top: 1rem;}

/* star_rating (REC-07 별점 선택) */
.star_rating{display: flex; gap: 1.8rem; padding-left: 0.2rem;}
.star_rating label{display: block; width: 3rem; height: 3rem; cursor: pointer;}
.star_rating label::before{content: "\f186"; font-family: 'remixicon'; display: block; font-size: 3rem; line-height: 3rem; color: #D9DCE3; transition: color 0.15s;}
.star_rating label.on::before{color: #FE8A3D;}
.star_rating input:focus-visible + label{outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 0.4rem;}

/* REC-08 달력에 추가 */
.sheet_box.recipe_card{display: flex; align-items: center; padding: 0.9rem 1.1rem;}
.sheet_box.recipe_card .img_area{flex-shrink: 0; width: 7rem; height: 5.9rem; border-radius: 0.8rem; overflow: hidden;}
.sheet_box.recipe_card .img_area img{width: 100%; height: 100%; object-fit: cover;}
.sheet_box.recipe_card .txt_area{min-width: 0; padding-left: 1.2rem;}
.sheet_box.recipe_card b{display: block;margin-top: 0.5rem;font-size: 1.6rem;font-weight: 700;color: #222;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.date_select{position: relative;}
.date_select input{width: 100%;height: 4rem;padding: 0 3.6rem 0 4.1rem;border: 1px solid #E3E7ED;border-radius: 0.8rem;background: #fff;font-size: 1.5rem;color: #222;cursor: pointer;}
.date_select input:focus{outline: 2px solid var(--orange); border-color: transparent;}
.date_select i{position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;}
.date_select .ri-calendar-line{left: 1.1rem; font-size: 1.8rem; color: var(--orange);}
.date_select .ri-arrow-right-s-line{right: 1rem; font-size: 2rem; color: #9AA0AC;}
.chk.cate_chk.col4{gap: 0.6rem;}
.chk.cate_chk.col4 > span{flex: 1 1 0;}
.sheet_box .chk.cate_chk .radio label{height: 3.2rem;border-color: #E3E5EA;background: #F9FAFC;font-size: 1.4rem;line-height: 3rem;}
.sheet_box .chk.cate_chk .radio input:checked ~ label{border-color: var(--orange); background: var(--orange);}

/* datepicker : 주황 포인트 */
html #ui-datepicker-div .ui-state-highlight{color: var(--orange) !important;}
html #ui-datepicker-div .ui-state-hover,
html #ui-datepicker-div .ui-state-focus{color: var(--orange) !important;}
html #ui-datepicker-div .ui-state-active,
html #ui-datepicker-div.ui-widget-content .ui-state-active{color: #fff !important; background: var(--orange) !important;}

/* recipe_write 수정 (REC-09) */
.recipe_write .board_write textarea.h_xl{height: 19rem;}

/* fixed_menu : 가운데 + 가 링크(a)일 때 (식재료 등 → 등록 화면 이동) */
#fixed_menu.type_fridge ul li a.btn_add{flex-direction: row; padding: 0;}
#fixed_menu.type_fridge ul li a.btn_add::before{width: auto; height: auto; margin: 0; background: none; line-height: 1;}

/* ingredient_main (ING-01) */
.content.ingredient_main{padding: 6.2rem 1.4rem 9rem;}
.chip_area.type_wrap{margin-bottom: 1.4rem; overflow: visible;}
.chip_area.type_wrap .sub_tab_btns.chip{flex-wrap: wrap; flex-shrink: 1; row-gap: 0.7rem;}
.ingredients_list ul{gap: 1rem;}
.ingredients_list li{border: 1px solid #E7EAEE; border-radius: 1.2rem; background: #fff;}
.ingredients_list li a{padding: 1.4rem 4rem 1.4rem 1.2rem;}
.ingredients_list a b{font-size: 1.7rem; font-weight: 700; color: #222; padding-right: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.ingredients_list a p{margin-top: 0.4rem; font-size: 1.35rem; color: #6B7280;}
.ingredients_list .btn_del{right: 0.6rem; top: 0.8rem; width: 3.2rem; height: 3.2rem; background: transparent;}
.ingredients_list .btn_del::before{font-size: 2.2rem; color: #222;}
.ingredients_list .btn_del:focus-visible{outline: 2px solid var(--orange); border-radius: 0.6rem;}
.ingredients_list .no_data{display: none; padding: 6rem 0; text-align: center; font-size: 1.5rem; color: #9AA0AC;}
.ingredients_list.empty .no_data{display: block;}

/* ingredient_view (ING-02) */
.cate_badge.ing{background: #EAF7E4; color: #4BA52E;}
.content.ingredient_view{padding: 6.6rem 1.4rem 9.6rem;}
.ingredient_view .view_box{padding: 1.6rem 1.2rem 1.4rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff;}
.ingredient_view .view_box + .view_box{margin-top: 1.2rem;}
.ingredient_view .view_box .name,
.ingredient_view .view_box .tit{font-size: 2.3rem; font-weight: 800; color: #222; letter-spacing: -0.03em; word-break: keep-all;}
.ingredient_view .view_box .name + .cate_badge{margin-top: 0.6rem;}
.ingredient_view .view_box .tit{margin-bottom: 1.1rem;}
.ingredient_view .info_table{margin-top: 1.6rem; padding: 0 1.1rem; border: 1px solid #E3E7ED; border-radius: 1rem;}
.ingredient_view .info_table dl{display: flex; align-items: center; min-height: 4.2rem; padding: 0.6rem 0.5rem;}
.ingredient_view .info_table dl + dl{border-top: 1px solid #E7EAEE;}
.ingredient_view .info_table dt{flex-shrink: 0; width: 9.6rem; font-size: 1.45rem; color: #6B7280;}
.ingredient_view .info_table dd{display: flex; align-items: center; min-width: 0; margin-left: 0; font-size: 1.5rem; color: #222;}
.ingredient_view .dday{margin-left: 1.2rem; padding: 0 1.4rem; border-radius: 100rem; background: #FFEEE4; font-size: 1.4rem; font-weight: 700; line-height: 2.3rem; color: #F2681E;}
.ingredient_view .memo{min-height: 9.2rem; padding: 1.2rem; border: 1px solid #E3E7ED; border-radius: 1rem; font-size: 1.45rem; line-height: 2.2rem; color: #6B7280; word-break: keep-all;}
.ingredient_view .related_recipe{margin-top: 2.4rem;}
.ingredient_view .related_recipe .tit_area{display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
.ingredient_view .related_recipe .tit{font-size: 2.3rem; font-weight: 800; color: #222; letter-spacing: -0.03em;}
.ingredient_view .btn_more{display: inline-flex; align-items: center; font-size: 1.4rem; font-weight: 700; color: var(--orange);}
.ingredient_view .btn_more i{margin-left: 0.2rem; font-size: 2rem;}
.btn_area.col2 a.btn{display: block; text-align: center;}

/* ingredient_write (ING-03 / ING-04) : recipe_write 확장 */
.content.recipe_write.ingredient_write{padding-bottom: 3rem;}
.ingredient_write .tit_area{display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem;}
.recipe_write .board_write .ingredient_row .tit_area .tit{margin-bottom: 0;}
.ingredient_write .btn_row_del{height: 2.8rem; padding: 0 1rem; border: 1px solid #E0E3EA; border-radius: 100rem; background: #fff; font-size: 1.3rem; color: #6B7280;}
.ingredient_write .btn_row_del:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.chk.cate_chk.type_wrap{flex-wrap: wrap;}
.chk.cate_chk.type_wrap > span{flex: 0 0 calc((100% - 2.1rem) / 4); min-width: 0;}
.chk.cate_chk.type_wrap .radio label{padding: 0 0.4rem;}
.recipe_write .board_write .col2{gap: 1rem;}
.recipe_write .board_write input[type='number']{width: 100%; height: 4rem; padding: 0 1.3rem; border: 1px solid #E3E7ED; border-radius: 1rem; font-size: 1.5rem; color: #333;}
.recipe_write .board_write input[type='number']:focus{outline: 2px solid var(--orange); border-color: transparent;}
.date_input{position: relative;}
.date_input input{padding-right: 4rem !important; background: #fff !important; cursor: pointer;}
.date_input i{position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); font-size: 2.2rem; color: #5B6475; pointer-events: none;}
.ingredient_write .btn_row_add{display: flex; align-items: center; justify-content: center; width: 100%; height: 4.8rem; margin-top: 1.2rem; border: 1px solid #BFC5D2; border-radius: 1.6rem; background: #fff; font-size: 1.6rem; font-weight: 700; color: #5B6475;}
.ingredient_write .btn_row_add i{margin-right: 0.4rem; font-size: 2rem;}
.ingredient_write .btn_row_add:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.content.recipe_write.ingredient_write{padding-bottom: 15.6rem;}
.content.recipe_write.ingredient_write.type_edit{padding-bottom: 10rem;}
.btn_area.col2.type_stack{flex-direction: column; gap: 0.8rem;}
.btn_area.col2.type_stack > *{flex: none; width: 100%;}
.ingredient_write .btn_area .btn_row_add{margin-top: 0;}

/* calendar_main (CAL-01) */
.content.calendar_main{padding: 6.2rem 1.4rem 9rem;}
.cal_box{padding: 1.6rem 1rem 1.2rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff;}
.cal_top{display: flex; align-items: center; justify-content: space-between; padding: 0 0.4rem;}
.cal_top .month{font-size: 2.3rem; font-weight: 800; color: #222; letter-spacing: -0.03em;}
.cal_top .range{margin-left: 0.4rem; font-size: 1.45rem; font-weight: 400; color: #7A8190; letter-spacing: 0;}
.cal_top .btns{display: flex; gap: 0.6rem;}
.cal_top .btns button{width: 3.2rem; height: 3.2rem; border-radius: 0.8rem; background: transparent; color: #5B6475;}
.cal_top .btns button i{font-size: 2.6rem;}
.cal_top .btns button:focus-visible{outline: 2px solid var(--orange);}
.cal_box .week_name,
.cal_box .week{display: flex;}
.cal_box .week_name li,
.cal_box .week li{flex: 1 1 0; min-width: 0;}
.cal_box .week_name{margin-top: 1.6rem; font-size: 1.45rem; color: #4B5260; text-align: center;}
.cal_box .sun{color: var(--orange);}
.cal_box .sat{color: #9AA0AC;}
.cal_box .week_name + .cal_days{margin-top: 0.8rem;}
.cal_box .week + .week{margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed #E3E5EA;}
.cal_box .day{display: flex; flex-direction: column; align-items: stretch; width: 100%; min-height: 5.6rem; padding: 0.6rem 0.15rem; border-radius: 1rem; background: transparent; font-size: 1.5rem; color: #333;}
.cal_box .day.sun{color: var(--orange);}
.cal_box .day.sat{color: #9AA0AC;}
.cal_box .day .num{display: block; width: 3.2rem; height: 3.2rem; margin: 0 auto 0.3rem; border-radius: 100rem; line-height: 3.2rem; text-align: center;}
.cal_box .day.on{background: #FFF1E8;}
.cal_box .day.on .num{background: var(--orange); color: #fff; font-weight: 700;}
.cal_box .day:focus-visible{outline: 2px solid var(--orange); outline-offset: -2px;}
.cal_box .day .ev{display: block; margin-top: 0.3rem; padding: 0 0.3rem; border-radius: 0.5rem; background: #EEF0F4; font-size: 1rem; letter-spacing: -0.03em; font-weight: 600; line-height: 2rem; color: #5B6475; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 달력 일정 라벨 : 식사 구분 배지(.cate_badge.meal)와 같은 색 */
.cal_box .day .ev.breakfast{background: #FFF4D6; color: #B47A00;}
.cal_box .day .ev.lunch{background: #E3F2FD; color: #1D73B8;}
.cal_box .day .ev.dinner{background: #E8EBFA; color: #3B4BA8;}
.cal_box .day .ev.snack{background: #FDE8F0; color: #C92A63;}

/* 식사 구분 배지 : 아침/점심/저녁/간식 (직접 추가한 구분은 기본 회색) */
.cate_badge.meal{background: #EEF0F4; color: #5B6475;}
.cate_badge.meal.breakfast{background: #FFF4D6; color: #B47A00;}
.cate_badge.meal.lunch{background: #E3F2FD; color: #1D73B8;}
.cate_badge.meal.dinner{background: #E8EBFA; color: #3B4BA8;}
.cate_badge.meal.snack{background: #FDE8F0; color: #C92A63;}
.day_schedule{margin-top: 1.4rem; padding: 1.6rem 1.4rem 1rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff;}
.day_schedule .tit_area{display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem;}
.day_schedule .date_tit{font-size: 2rem; font-weight: 800; color: #222;}
.day_schedule .btn_sch_add{height: 3rem; padding: 0 2rem; border-radius: 100rem; background: linear-gradient(90deg, var(--orange-light) 0%, var(--orange) 100%); font-size: 1.5rem; font-weight: 700; color: #fff;}
.day_schedule .btn_sch_add:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.schedule_list li + li{border-top: 1px solid #ECEDF1;}
.schedule_list li{display: flex; align-items: center;}
.schedule_list .item{flex: 1; min-width: 0; display: flex; align-items: center; padding: 1rem 0;}
.schedule_list .btn_del{flex-shrink: 0; width: 3.4rem; height: 3.4rem; margin-left: 0.4rem; border-radius: 0.8rem; background: transparent; font-size: 0;}
.schedule_list .btn_del::before{content: "\eb99"; font-family: 'remixicon'; font-size: 2rem; color: #9AA0AC;}
.schedule_list .btn_del:focus-visible{outline: 2px solid var(--orange);}
.schedule_list .img_area{flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 7rem; height: 5.6rem; border-radius: 0.8rem; background: #F4F5FA; overflow: hidden;}
.schedule_list .img_area img{width: 100%; height: 100%; object-fit: cover;}
.schedule_list .img_area > i{font-size: 2.4rem; color: #C3C8D2;}
.schedule_list .txt_area{flex: 1; min-width: 0; padding: 0 1rem 0 1.4rem;}
.schedule_list .txt_area b{display: block; margin-top: 0.4rem; font-size: 1.7rem; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.schedule_list .item > i{flex-shrink: 0; font-size: 2.2rem; color: #7A8190;}
.day_schedule .no_data{display: none; padding: 3rem 0 2rem; text-align: center; font-size: 1.45rem; color: #9AA0AC;}
.day_schedule.empty .no_data{display: block;}

/* CAL-02 일정 추가 (바텀시트) */
body:has(.bottom_sheet.type_form.on) #fixed_menu.type_fridge{z-index: 99;}
.cal_add_form .meal_chk{display: flex; align-items: center; gap: 0.6rem;}
.cal_add_form .meal_chk .cate_chk{flex: 1; flex-wrap: wrap; gap: 0.6rem;}
.cal_add_form .meal_chk .cate_chk > span{flex: 1 1 0;}
.cal_add_form .btn_meal_add{flex-shrink: 0; width: 3.5rem; height: 3.5rem; border: 1px solid #FE9345; border-radius: 100rem; background: #fff; color: var(--orange);}
.cal_add_form .btn_meal_add i{font-size: 2rem;}
.cal_add_form .btn_meal_add:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.tab.line.type_sheet{margin: 1.6rem -1.6rem 0;}
.tab.line.type_sheet::after{top: 4.4rem; height: 1px; background: #E7EAEE;}
.tab.line.type_sheet > .tab_menu{padding: 0 1.4rem;}
.tab.line.type_sheet > .tab_menu li{flex: 1 1 0; min-width: 0;}
.tab.line.type_sheet > .tab_menu li a{height: 4.4rem; padding: 0; font-size: 1.6rem; line-height: 4.4rem; color: #9AA0AC; text-align: center;}
.tab.line.type_sheet > .tab_menu li:has(.on) a{font-weight: 700; color: #222;}
.tab.line.type_sheet > .tab_menu li:has(.on)::before{left: 0; height: 0.3rem; background: var(--orange);}
.tab.line.type_sheet > .tab_cont{margin-top: 1.4rem; padding: 0 1.6rem; font-size: 1.5rem;}
.tab.line.type_sheet .list_search{margin-bottom: 1rem;}
.pick_list li + li{margin-top: 0.8rem;}
.pick_list label{display: flex; align-items: center; padding: 0.8rem; border: 1px solid #E7EAEE; border-radius: 1.2rem; background: #fff; cursor: pointer;}
.pick_list .img_area{flex-shrink: 0; width: 6.6rem; height: 5.4rem; border-radius: 0.8rem; overflow: hidden;}
.pick_list .img_area img{width: 100%; height: 100%; object-fit: cover;}
.pick_list .txt_area{min-width: 0; padding-left: 1.4rem;}
.pick_list .txt_area b{display: block; margin-bottom: 0.4rem; font-size: 1.6rem; font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.pick_list input:checked + label{border-color: var(--orange); background: #FFF6F0;}
.pick_list input:focus-visible + label{outline: 2px solid var(--orange); outline-offset: 2px;}
.cal_add_form .no_data{display: none; padding: 3rem 0; text-align: center; font-size: 1.45rem; color: #9AA0AC;}
.cal_add_form .empty .no_data,
.cal_add_form .tab_cont.empty .no_data{display: block;}
.cal_add_form .sheet_box input[type='text']{width: 100%; height: 4rem; padding: 0 1.2rem; border: 1px solid #E3E7ED; border-radius: 0.8rem; font-size: 1.5rem; color: #333;}
.cal_add_form .sheet_box input[type='text']::placeholder{color: #A3A9B4;}
.cal_add_form .sheet_box input[type='text']:focus{outline: 2px solid var(--orange); border-color: transparent;}

/* cal_pop : REC-08 날짜 선택 레이어 팝업 (바텀시트 위, .cal_box 재사용) */
.layer_pop.cal_pop{left: 1.4rem; width: calc(100% - 2.8rem); border-radius: 1.6rem; background: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,0.18);}
.layer_pop.cal_pop .pop_header{height: auto; padding: 1.6rem 1.6rem 0.4rem; border: 0; border-radius: 0;}
.layer_pop.cal_pop .pop_header h2{font-size: 1.8rem; font-weight: 800; color: #222;}
.layer_pop.cal_pop .pop_close{width: 3.2rem; height: 3.2rem;}
.layer_pop.cal_pop .pop_close i::before{font-size: 2.4rem; color: #9A9FAB;}
.layer_pop.cal_pop .pop_content{max-height: none; padding: 0.4rem 0.6rem 1rem;}
.layer_pop.cal_pop .cal_box{padding: 0.6rem 1rem 0.6rem; border: 0;}
.layer_pop.cal_pop .cal_box .day{min-height: 0;}
.layer_pop.cal_pop .cal_box .day .num{margin-bottom: 0;}
.layer_pop.cal_pop .cal_box .day .ev{display: none;} /* 날짜 선택 팝업은 날짜만 표시 */
.cal_pop_bg{display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.35); z-index: 5650;}
.date_select input{cursor: pointer;}

/* shopping_main (SHP-01) : 참고 .top_write / .buy_list 덮어쓰기 */
.content.shopping_main,
.content.shopping_main:has(.top_write){padding: 6.2rem 1.4rem 9rem;}
.shopping_main .top_write{position: static; gap: 1rem; padding: 1.2rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff; z-index: auto;}
.shopping_main .top_write input{flex: 1; width: auto; min-width: 0; height: 4.2rem; padding: 0 1.3rem; border: 1px solid #E3E7ED; border-radius: 1rem; font-size: 1.5rem; color: #333;}
.shopping_main .top_write input::placeholder{color: #A3A9B4;}
.shopping_main .top_write input:focus{outline: 2px solid var(--orange); border-color: transparent;}
.shopping_main .top_write .btn_shop_add{flex-shrink: 0; width: 6.8rem; height: 4.2rem; margin: 0; padding: 0; border: 0; border-radius: 1rem; background: linear-gradient(90deg, var(--orange-light) 0%, var(--orange) 100%); font-size: 1.6rem; font-weight: 700; line-height: 4.2rem;}
.shopping_main .list_top{justify-content: flex-end; margin: 1.2rem 0 1rem;}
.shopping_main .btn_bought_del{display: inline-flex; align-items: center; height: 3rem; padding: 0 1.2rem; border: 1px solid #D5DAE2; border-radius: 1rem; background: #fff; font-size: 1.3rem; color: #4B5260;}
.shopping_main .btn_bought_del i{margin-right: 0.5rem; font-size: 1.7rem; color: #5B6475;}
.shopping_main .btn_bought_del:focus-visible{outline: 2px solid var(--orange); outline-offset: 2px;}
.buy_list_wrap{padding: 0 1rem; border: 1px solid #E7EAEE; border-radius: 1.6rem; background: #fff;}
.shopping_main .buy_list{margin-top: 0;}
.shopping_main .buy_list li{display: flex; align-items: center; min-height: 4.6rem; border: 0; border-radius: 0; background: #fff;}
.shopping_main .buy_list li + li{margin-top: 0; border-top: 1px solid #ECEDF1;}
.shopping_main .buy_list .chk{flex: 1; min-width: 0;}
.shopping_main .buy_list .chk > span{display: block; margin: 0;}
.shopping_main .buy_list li label{display: block; padding: 1.2rem 0.8rem 1.2rem 3.8rem; font-size: 1.6rem; line-height: 2.2rem; color: #222; word-break: break-all;}
.shopping_main .buy_list li label::before{left: 0.6rem; top: 50%; width: 2rem; height: 2rem; margin: -1rem 0 0; border: 1px solid #C5CAD3; border-radius: 0.6rem; line-height: 1.8rem;}
.shopping_main .buy_list li input:checked + label::before{border-color: var(--orange); background: var(--orange); font-size: 1.4rem; color: #fff;}
.shopping_main .buy_list li input:checked + label{color: #A3A9B4;}
.shopping_main .buy_list li input:focus-visible + label::before{outline: 2px solid var(--orange); outline-offset: 2px;}
.shopping_main .buy_list .btn_move,
.shopping_main .buy_list .btn_del{flex-shrink: 0; width: 3.6rem; height: 3.6rem; border-radius: 0.8rem; background: transparent; color: #8C95A6;}
.shopping_main .buy_list .btn_move i,
.shopping_main .buy_list .btn_del i{font-size: 2.2rem;}
.shopping_main .buy_list .btn_move{cursor: grab; touch-action: none;}
.shopping_main .buy_list .btn_move:focus-visible,
.shopping_main .buy_list .btn_del:focus-visible{outline: 2px solid var(--orange);}
.shopping_main .buy_list li.dragging{position: relative; z-index: 2; border-radius: 1rem; box-shadow: 0 0.6rem 1.6rem rgba(31,41,55,0.15);}
.shopping_main .buy_list li.dragging .btn_move{cursor: grabbing;}
.buy_list_wrap .no_data{display: none; padding: 4rem 0; text-align: center; font-size: 1.45rem; color: #9AA0AC;}
.buy_list_wrap.empty{padding: 0;}
.buy_list_wrap.empty .no_data{display: block;}

/* app : 썸네일 없는 레시피 카드 */
.recipe_list ul li .img_area.no_img{display: flex; align-items: center; justify-content: center;}
.recipe_list ul li .img_area.no_img i{font-size: 3rem; color: #C3C8D2;}

/* app : 레시피 상세 (DB 데이터) */
.recipe_view .view_img.no_img{display: flex; align-items: center; justify-content: center; background: #F4F5FA;}
.recipe_view .view_img.no_img > i{font-size: 4rem; color: #C3C8D2;}
.recipe_view .ingredient_list li.group{margin-top: 1rem; padding-left: 0; font-weight: 700; color: #222;}
.recipe_view .ingredient_list li.group:first-child{margin-top: 0;}
.recipe_view .ingredient_list li.group::before{display: none;}
.recipe_view .step_list li.group{display: block; min-height: 0; font-weight: 700; color: #222;}
.recipe_view .step_list li.has_notes{align-items: flex-start;}
.recipe_view .step_list .step_txt{flex: 1; min-width: 0;}
.recipe_view .step_notes{margin-top: 0.4rem;}
.recipe_view .step_notes li{position: relative; display: block; min-height: 0; margin: 0.2rem 0 0; padding-left: 1rem; font-size: 1.35rem; line-height: 1.5; color: #6B7280;}
.recipe_view .step_notes li::before{content: "-"; position: absolute; left: 0; top: 0;}
.recipe_view .box_tip .box_inner p + p{margin-top: 0.4rem;}
.recipe_view .photo_list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem;}
.recipe_view .photo_list li{aspect-ratio: 1; border-radius: 0.8rem; overflow: hidden; background: #F4F5FA;}
.recipe_view .photo_list img{width: 100%; height: 100%; object-fit: cover;}
.recipe_view .no_log{padding: 1.2rem 0.8rem; font-size: 1.4rem; color: #9AA0AC;}
.recipe_view .step_list .step_notes li + li{margin-top: 0.2rem;}

/* join (AUTH-02 회원가입) : 로그인 화면(.login_wrap.fridge) 디자인 그대로 + 일러스트 없음 */
.login_wrap.fridge.type_join{padding-top: 6rem;}
.login_wrap.fridge.type_join .login_top{margin-bottom: 2.4rem;}
.login_wrap.fridge.type_join h1.logo{font-size: 2.6rem;}
.login_wrap.fridge .join_form .input_box > ul > li .error_txt{margin: 0.5rem 0 0 0.4rem; font-size: 1.25rem; line-height: 1.4;}
.login_wrap.fridge .join_form .input_box > ul > li .error_txt:empty{display: none;}
.login_wrap.fridge .join_form .input_box > ul > li.err input{outline: 2px solid #e83667;}
.login_wrap.fridge .join_form .js_join_error{margin-top: 1.2rem; text-align: center;}
.login_wrap.fridge .join_link{margin-top: 1.6rem; font-size: 1.35rem; color: var(--txt-gray); text-align: center;}
.login_wrap.fridge .join_link a{margin-left: 0.4rem; font-weight: 700; color: var(--orange); text-decoration: underline; text-underline-offset: 0.3rem;}

/* header_util (메인 화면 헤더 오른쪽 : 내 정보 수정 / 로그아웃) */
#header .header_util{position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center;}
#header .header_util a,
#header .header_util button{position: static; display: flex; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; padding: 0; border-radius: 100rem; background: transparent; font-size: 0; color: #5B6475;}
#header .header_util a::before,
#header .header_util button::before{font-family: 'remixicon'; font-size: 2.2rem; line-height: 1;}
#header .header_util .btn_mypage::before{content: "\f26e";}
#header .header_util .btn_logout::before{content: "\eeda";}
#header .header_util a:active,
#header .header_util button:active{background: #F4F5FA;}

/* mypage (AUTH-03 내 정보 수정) : 03번 .recipe_write 폼 재사용 */
.recipe_write .board_write input[type='email'],
.recipe_write .board_write input[type='tel'],
.recipe_write .board_write input[type='password']{width: 100%; height: 4rem; padding: 0 1.3rem; border: 1px solid #E3E7ED; border-radius: 1rem; font-size: 1.45rem; color: #333;}
.recipe_write .board_write input[type='email']:focus,
.recipe_write .board_write input[type='tel']:focus,
.recipe_write .board_write input[type='password']:focus{outline: 2px solid var(--orange); border-color: transparent;}
.recipe_write .board_write input[readonly]{background: #F4F5FA; color: #6B7280;}
.recipe_write .board_write input[readonly]:focus{outline: 0; border-color: #E3E7ED;}
.mypage_write .info_txt{margin-top: 0.6rem;}
.mypage_write .pw_input{position: relative;}
.mypage_write .pw_input input[type]{padding-right: 4.6rem;}
.mypage_write .btn_pw_view{position: absolute; right: 0.2rem; top: 0; width: 4.2rem; height: 4rem; font-size: 0; background: transparent;}
.mypage_write .btn_pw_view::before{content: "\ecb7"; font-family: 'remixicon'; font-size: 2rem; color: #6B7280;}
.mypage_write .btn_pw_view.on::before{content: "\ecb5";}
.mypage_write .error_txt{margin: 0.5rem 0 0 0.4rem; font-size: 1.25rem; line-height: 1.4; color: #e83667;}
.mypage_write dd > .error_txt:empty{display: none;}
.mypage_write dl.err input,
.mypage_write dl.err input:focus{outline: 2px solid #e83667; border-color: transparent;}
.mypage_write .js_mypage_error{margin-top: 1.2rem; text-align: center;}

/* recipe_view : 제목 아래 등록일 · 등록자 */
.recipe_view .view_info .writer_info{margin-top: 0.4rem; font-size: 1.3rem; color: #9298AB;}
.recipe_view .view_info .writer_info span:empty{display: none;}
.recipe_view .view_info .writer_info .name::before{content: "·"; margin: 0 0.5rem;}
.recipe_view .view_info .writer_info .date:empty + .name::before{display: none;}

/* btn_sch_clear : 검색창 오른쪽 X (검색어 있을 때만) */
.list_search .top_sch input{padding-right: 4rem;}
.list_search .top_sch .btn_sch_clear{display: none; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; border-radius: 100rem; background: transparent; font-size: 0;}
.list_search .top_sch .btn_sch_clear::before{content: "\eb96"; font-family: 'remixicon'; font-size: 1.9rem; line-height: 1; color: #B8BEC9;}
.list_search .top_sch.has_value .btn_sch_clear{display: flex;}

/* recipe_view : 썸네일 높이 = 이미지 원래 비율 (사진 없을 때만 17:10 자리) / 아주 긴 캡처 이미지는 화면 높이 75%까지만 보이고 위쪽부터 */
.recipe_view .view_img:not(.no_img){aspect-ratio: auto;}
.recipe_view .view_img img{height: auto; max-height: 75vh; object-fit: cover; object-position: center top;}

/* list_fixed : 목록 화면 상단 고정 (02 검색+필터 / 06 검색+필터 / 11 장보기 입력) — 헤더(5rem) 바로 아래에 붙음 */
.content.recipe_main:has(> .list_fixed),
.content.ingredient_main:has(> .list_fixed),
.content.shopping_main:has(> .list_fixed){padding-top: 5rem;}
.list_fixed{position: sticky; top: 5rem; z-index: 50; margin: 0 -1.4rem; padding: 1.2rem 1.4rem 1rem; background: #fff; transition: box-shadow 0.15s;}
.list_fixed > :last-child{margin-bottom: 0;}
.list_fixed.stuck{box-shadow: 0 0.6rem 1rem -0.6rem rgba(31,41,55,0.12);}
.shopping_main .list_fixed .top_write{margin: 0;}
.shopping_main .list_fixed + .list_top{margin-top: 0.4rem;}

/* recipe_list : 20개씩 더 보기 감지용 (높이만 있는 빈 영역) */
.recipe_list .list_more{height: 1px;}

/* recipe_list : 카테고리 배지 줄 맨 오른쪽 출처 아이콘 (원본 링크 : 유튜브 / 인스타그램 / 다음카페) */
.recipe_list ul li .txt_area .badge_row{display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 1.8rem;}
.src_icon{flex-shrink: 0; width: 1.8rem; height: 1.8rem; background: no-repeat center / contain;}
.src_icon.youtube{background-image: url(../images/icon/ico_youtube.png);}
.src_icon.insta{background-image: url(../images/icon/ico_insta.png);}
.src_icon.daumcafe{background-image: url(../images/icon/ico_daumcafe.png);}
.src_icon.naverblog{background-image: url(../images/icon/ico_naverbloge.png);}
.recipe_list.type_list ul li .txt_area{flex: 1;} /* 목록형 : 아이콘이 하트 앞(맨 오른쪽)에 오도록 글자 영역을 끝까지 */

/* photo_viewer : 레시피 참고사진 전체 화면 보기 (Swiper : 넘기기 · 확대) */
body.pv_open{overflow: hidden;}
.photo_viewer{display: none; position: fixed; left: 0; top: 0; z-index: 6000; width: 100%; height: 100%; background: #000;}
.photo_viewer.on{display: block;}
.photo_viewer .swiper{width: 100%; height: 100%;}
.photo_viewer .swiper-slide{display: flex; align-items: center; justify-content: center; overflow: hidden;}
.photo_viewer .swiper-zoom-container img{max-width: 100%; max-height: 100%; object-fit: contain;}
.photo_viewer .pv_count{position: absolute; left: 50%; top: calc(1.6rem + env(safe-area-inset-top)); z-index: 10; transform: translateX(-50%); padding: 0.4rem 1.2rem; border-radius: 100rem; background: rgba(0,0,0,0.45); font-size: 1.4rem; color: #fff;}
.photo_viewer .pv_close{position: absolute; right: 1.2rem; top: calc(1.1rem + env(safe-area-inset-top)); z-index: 10; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 100rem; background: rgba(0,0,0,0.45); font-size: 0;}
.photo_viewer .pv_close::before{content: "\eb99"; font-family: 'remixicon'; font-size: 2.4rem; line-height: 1; color: #fff;}
.photo_viewer .pv_hint{position: absolute; left: 0; bottom: calc(2rem + env(safe-area-inset-bottom)); z-index: 10; width: 100%; font-size: 1.25rem; color: rgba(255,255,255,0.6); text-align: center; pointer-events: none;}
.recipe_view .photo_list a{display: block; width: 100%; height: 100%; cursor: zoom-in;}

/* recipe_view : 썸네일 받기 전 스켈레톤 (앱 : .view_img.loading) */
.recipe_view .view_img.loading{aspect-ratio: 17 / 10; background: linear-gradient(90deg, #F1F2F5 25%, #E6E8EC 37%, #F1F2F5 63%); background-size: 400% 100%; animation: skeleton_shine 1.4s ease infinite;}
.recipe_view .view_img.loading img{visibility: hidden;}
@keyframes skeleton_shine{0%{background-position: 100% 50%;} 100%{background-position: 0 50%;}}
@media (prefers-reduced-motion: reduce){.recipe_view .view_img.loading{animation: none;}}
.recipe_view .view_img.skeleton_only{aspect-ratio: 17 / 10; background: #F1F2F5;} /* 썸네일 없음 : 멈춘 스켈레톤 */
.sheet_box.recipe_card .img_area.skeleton_only{background: #F1F2F5;} /* 달력에 추가 시트 : 썸네일 없음 */

/* recipe_view : 하단 레시피 삭제 (등록한 사람만) */
.recipe_view .recipe_del_area{margin-top: 2.4rem; text-align: center;}
.recipe_view .btn_recipe_del{display: inline-flex; align-items: center; gap: 0.4rem; height: 3.6rem; padding: 0 1.2rem; border-radius: 1rem; background: transparent; font-size: 1.4rem; color: #9AA0AC; text-decoration: underline; text-underline-offset: 0.3rem;}
.recipe_view .btn_recipe_del i{font-size: 1.7rem;}
.recipe_view .btn_recipe_del:focus-visible{outline: 2px solid var(--orange);}
/* recipe_write : 입력 안내 · 저장 중 */
.recipe_write .write_box textarea + .info_txt{margin-top: 0.8rem;}
.recipe_write .btn_area .btn:disabled{opacity: 0.6;}
.recipe_write .save_msg{margin-top: 1.2rem; font-size: 1.35rem; color: #e83667; text-align: center;}

/* recipe_write : 자동 분석으로 채웠을 때 안내 (앱) */
.recipe_write .draft_notice{display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 1.2rem; padding: 1.2rem 1.4rem; border-radius: 1.2rem; background: #FFF4EC; font-size: 1.35rem; line-height: 1.5; color: #B4541F;}
.recipe_write .draft_notice i{font-size: 1.8rem; line-height: 1.2; color: var(--orange);}
/* add_type : 분석 중 (앱) */
.add_type.working .btn_line,
.add_type.working .btn_analysis{pointer-events: none;}
.add_type .btn i.spin{display: inline-block; margin-right: 0.6rem; vertical-align: -0.2rem; animation: spin_rotate 0.9s linear infinite;}
@keyframes spin_rotate{to{transform: rotate(360deg);}}
/* recipe_view : 세부 카테고리 (배지 옆) */
.recipe_view .view_info .sub_cate_txt{margin-left: 0.6rem; font-size: 1.3rem; color: #8A909C; vertical-align: middle;}

/* loading_layer : 전체 화면 로딩 (분석 중 · 등록/수정 저장 중) — 바텀시트(5000~6000)보다 위 */
body.loading_open{overflow: hidden;}
.loading_layer{display: none; position: fixed; left: 0; top: 0; z-index: 7000; width: 100%; height: 100%; align-items: center; justify-content: center; padding: 2.4rem; background: rgba(17,24,39,0.45);}
.loading_layer.on{display: flex;}
.loading_layer .loading_box{width: 100%; max-width: 30rem; padding: 2.8rem 2rem 2.4rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 1rem 3rem rgba(0,0,0,0.18); text-align: center;}
.loading_layer .loading_spin{display: block; width: 4.4rem; height: 4.4rem; margin: 0 auto; border: 0.4rem solid #FFE3D3; border-top-color: var(--orange); border-radius: 100rem; animation: spin_rotate 0.9s linear infinite;}
.loading_layer .loading_tit{margin-top: 1.6rem; font-size: 1.7rem; font-weight: 700; line-height: 1.4; color: #222;}
.loading_layer .loading_sub{margin-top: 0.6rem; font-size: 1.35rem; line-height: 1.5; color: var(--txt-gray);}
.loading_layer .loading_sub:empty{display: none;}
.loading_layer .loading_time{margin-top: 1rem; font-size: 1.25rem; color: #A3A9B4; font-variant-numeric: tabular-nums;}
.loading_layer .loading_time:empty{display: none;}
@media (prefers-reduced-motion: reduce){.loading_layer .loading_spin{animation-duration: 2.4s;}}

/* recipe_view : 원본 링크가 삭제됨 (url_status = broken) */
.recipe_view .box_link.broken .link_box{border-style: dashed; background: #F7F8FA; color: #A3A9B4; text-decoration: line-through;}
.recipe_view .box_link.broken .link_box i{color: #A3A9B4;}
.recipe_view .box_link .link_broken{display: flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; padding-left: 0.4rem; font-size: 1.3rem; color: #e83667;}
.recipe_view .box_link .link_broken i{font-size: 1.5rem;}

/* recipe_list : 목록 위 개수 ("전체 389개") — 참고 .list_top 재사용 */
.recipe_list .list_top{margin: 0 0 0.8rem; padding-left: 0.2rem;}
.recipe_list .list_top .count{font-size: 1.35rem; color: #6B7280;}
.recipe_list .list_top .count b{font-weight: 700; color: var(--orange);}

/* 메인재료 : 상세 = 재료 칸 위 작은 제목 + 칩 / 등록·수정 = 재료 칸 안 입력 (쉼표 구분) */
.recipe_view .main_ing{margin-bottom: 1.4rem;}
.recipe_view .view_box .sub_tit{margin-bottom: 0.6rem; font-size: 1.4rem; font-weight: 700; color: #5B6475;}
.recipe_view .main_ing_list{display: flex; flex-wrap: wrap; gap: 0.6rem;}
.recipe_view .main_ing_list li{padding: 0 1.1rem; border-radius: 100rem; background: #FFF1E8; font-size: 1.35rem; font-weight: 600; line-height: 2.8rem; color: var(--orange);}
.recipe_view .box_ingredient.no_main .main_ing,
.recipe_view .box_ingredient.no_main .ing_tit{display: none;}

/* 레시피 검색 결과 섹션 제목 : 레시피명 일치 / 메인재료 일치 (common.js filterRecipe) */
.recipe_list ul li.sec_tit{width: 100%; font-size: 1.5rem; font-weight: 700; color: #222;}
.recipe_list ul li.sec_tit b{display: inline; padding: 0; font-size: 1.5rem; font-weight: 700; color: var(--orange);}
.recipe_list ul li.sec_tit ~ li.sec_tit{margin-top: 1.6rem;}

/* 식재료 상세 : DB 불러오기 전엔 내용 숨김 (시안 샘플 깜빡임 방지) */
.ingredient_view.is_loading > *{visibility: hidden;}

/* 식재료 메모 : 등록·수정 행 안 textarea / 상세는 textarea 모양 상자 (비어 있으면 안내 문구) */
.ingredient_write .ingredient_row textarea{min-height: 0;}
.ingredient_view .memo{white-space: pre-line;}
.ingredient_view .memo.empty{color: #9AA0AC;}

/* CAL-02 일정 추가 바텀시트 : 위(식사 구분·탭·레시피 검색)와 아래 버튼은 고정, 레시피 목록만 스크롤 */
.layer_pop.bottom_sheet .pop_content:has(.cal_add_form){display: flex; flex-direction: column; overflow: hidden;}
.cal_add_form{display: flex; flex-direction: column; flex: 1; min-height: 0;}
.cal_add_form .meal_chk,
.cal_add_form .btn_area{flex-shrink: 0;}
.cal_add_form .tab.line.type_sheet{display: flex; flex-direction: column; flex: 1; min-height: 0;}
.cal_add_form .tab.line.type_sheet > .tab_menu{flex-shrink: 0;}
.cal_add_form .tab.line.type_sheet > .tab_cont.on{display: flex; flex-direction: column; flex: 1; min-height: 0; margin-bottom: 1.4rem;}
.cal_add_form .tab_cont .list_search{flex-shrink: 0;}
.cal_add_form .pick_list{flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -1.6rem; padding: 0.2rem 1.6rem;}

/* 장보기 ✎ 수정 : 그 자리에서 이름 입력 (수정 중엔 체크박스·글자 숨기고 입력칸, 연필 → ✔) */
.shopping_main .buy_list .btn_edit{flex-shrink: 0; width: 3.6rem; height: 3.6rem; border-radius: 0.8rem; background: transparent; color: #8C95A6;}
.shopping_main .buy_list .btn_edit i{font-size: 2.1rem;}
.shopping_main .buy_list .btn_edit:focus-visible{outline: 2px solid var(--orange);}
.shopping_main .buy_list li.editing .btn_edit{color: var(--orange);}
.shopping_main .buy_list li.editing .chk > span{display: none;}
.shopping_main .buy_list .chk input.edit_input{position: static; opacity: 1; display: block; width: 100%; height: 3.8rem; margin: 0.4rem 0; padding: 0 1rem; border: 1px solid var(--orange); border-radius: 0.8rem; font-size: 1.6rem; color: #222;}
.shopping_main .buy_list .chk input.edit_input:focus{outline: none; box-shadow: 0 0 0 0.3rem rgba(248,117,54,0.18);}