@charset "utf-8";

/* reset */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
img,svg { display: inline-block; vertical-align: top }
img,fieldset,iframe { border: 0 }
ol,ul { list-style: none }
i,em,address { font-style: inherit }
table { border-collapse: collapse }
button,input,select,textarea { border: 0; border-radius: 0; background-color: transparent; font-family: inherit; font-size: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none }
textarea { resize: vertical }
a,button,[role=button],[role=listbox],[role=option],label { cursor: pointer }
a[aria-disabled=true],button[aria-disabled=true],[role=button][aria-disabled=true],[role=listbox][aria-disabled=true],[role=option][aria-disabled=true],label[aria-disabled=true] { cursor: default }
a { color: inherit; text-decoration: none }
button { -webkit-user-select: none; user-select: none }
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-decoration { display: none }
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-text-fill-color:  var(--black-color); box-shadow: 0 0 0 1000px var(--white) inset }
details>summary { list-style: none }
details>summary::-webkit-details-marker { display: none }
mark { background: none; color: inherit }
html,body,#app-root { height: 100% }
html { font-size: 10px; line-height: 10px }
body { background-color: var(--background-bg); font-family: -apple-system,BlinkMacSystemFont,helvetica,"Apple SD Gothic Neo",sans-serif; font-size: 1.6rem; color: var(--black-color); letter-spacing: -0.3px; line-height: 2rem; word-break: break-all; overflow-wrap: break-word; -webkit-text-size-adjust: none }
a, button, [role=button], [role=listbox], [role=option], label { cursor: pointer; }
html{ scroll-behavior:smooth; }

:root {	
	--theme-color: rgba(15,23,42,1);
	/* --theme-color-02: rgba(37,59,113,1); */
	--theme-color-light: color-mix(in srgb, var(--theme-color) 30%, transparent);
	--accent-color: rgba(169,66,118,1);
	/* --accent-color-02: rgba(59,153,109,1); */
	--accent-color-light: color-mix(in srgb, var(--accent-color) 7%, transparent);
	--link-color: rgba(59,124,243,1); 
	--link-color-light: rgba(59,124,243,0.1);
	--link-color-gra: linear-gradient(90deg, #57DBFF 0%, #2D7BFF 55%, #B8A7FF 100%);
	--linear-gra: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
	--background-bg: #f0f0f0;	
	--transparent: transparent;
	--white: #fff;
	--yellow: #f9d207;		
	--orange: #fb7946;		
	--black-color: #1c1c1c;
	--black-color-tan: #1a1a1a;
	--black-color-mud: #424242;
	--gray-color: #8c8c8c;
	--gray-color-light: #c9c9c9;
	--gray-color-bright: #e5e5e5;
	--gray-color-thin: #f0f0f0;
	--gray-color-smooth: #f7f7f7;
	--max-width: 480px; /*480px*/
	--section-padding: 16px 18px;	
	--padding-horizontal: 16px;
	--padding-horizontal-negative: clac(-1 * 16px);
	--header-height: 50px;
	--menu-tabmenu-height: 46px;
	--scroll-margin-top: calc(var(--header-height) + var(--menu-tabmenu-height));
	--shadow: 0px 1px 6px rgba(0, 0, 0, 0.07);
	--shadow-top: 0px -1px 6px 0px rgba(0, 0, 0, 0.1);
}

/************************ 공통 ************************/
.blind { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(100%); }
.img { object-fit: cover; }
.svg { fill: var(--gray-color); width: 14px; height: 14px; margin: 3px 0 0 0; transition: transform 0.2s ease; }
[class*="_section"] { margin-top: 0px; background-color: var(--white); }
[class*="_section"].margin { margin-bottom: 8px; }
[class*="_section"].mb8 { margin-bottom: 8px }
[class*="_header"] {display: flex; align-items: center; position: relative; padding-block: 20px 16px; padding-inline: var(--padding-horizontal); font-size: 1.8rem; font-weight: 600; color: var(--black-color); line-height: 2.4rem; }
[class*="_title"] { overflow: hidden; flex: 1; word-break: keep-all; }
[class*="_count"] { margin-left: 4px; color:  var(--gray-color); }
[class*="_extra"] { flex: none; margin-left: 16px; }
[class*="_content"] { padding: 0 var(--padding-horizontal) 20px; }
.feed [class*="_content"] { padding: 16px var(--padding-horizontal); }
.title [class*="_content"] { padding: 0 0 8px 0; }
/*[class*="_section"]+[class*="_section"].margin { position: relative; border-top: 1px solid; border-top-color: var(--gray-color-thin); }*/
.place_thumb { display: block; overflow: hidden; position: relative; width: 100%; height: 100%; /*background: var(--gray-color-bright);*/ }
.place_thumb img { object-fit: cover; }
.place_thumb img.img { object-position: 50% 0; width: 100%; height: 100%; }
.place_thumb img, .place_thumb.video-item video { width: 100%; height: 100%; display: block; border-radius: var(--radius); object-fit: cover; aspect-ratio: 1 / 1; transition: transform .35s ease; }
.caution { display: flex; gap: 5px; padding-top: 10px; border-top: 1px solid; border-top-color: var(--gray-color-thin); font-size: 1.5rem; color: var(--gray-color); line-height: 1.9rem; }
.caution .svg { fill: var(--gray-color); width: 16px; height: 16px; margin: 1px 0 0 0;}
/************************ 더보기 ************************/
.more_wrap { display: flex; align-items: center; position: relative; padding: 0 var(--padding-horizontal) 16px; text-align: center; }
.more_wrap::before, .more_wrap::after { flex: 1; height: 1px; background: var(--gray-color-thin); content: ""; }
.more_wrap .more_btn { display: flex; flex: none; gap: 4px; align-items: center; justify-content: center; position: relative; z-index: 1; height: 36px; margin: 0 auto; padding: 0 20px; border-radius: 36px; background: var(--gray-color-smooth); font-size: 1.5rem; color: var(--black-color-mud); line-height: 36px; text-decoration: none; }
.more_wrap .tt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.more_wrap .more { flex-shrink: 0; }
.more_wrap .more .svg {margin: 11px 0 0 0;}
.more_wrap::before, .more_wrap::after { flex: 1; more_wrapeight: 1px; background: var(--gray-color-thin); content: ""; }



/***************************** 이미지모달.js *****************************/
#modal { display: none; }
#modal.is-open { display: block; }
.imgbox-wrap { overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 8000; background: #000; letter-spacing: -0.3px; }
.imgbox-header { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 0; right: 0; left: 0; z-index: 5000; height: 70px; transition: top .3s ease-out; padding: 0;}
.imgbox-header::before { position: absolute; top: -66px; right: 0; bottom: 0; left: 0; opacity: .5; background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); content: ""; }
.imgbox-header .img-modal-close { display: inline-block; padding: 15px; vertical-align: top; position: relative; z-index: 10; }
.imgbox-header .img-modal-close .svg { fill: var(--white); width: 25px; height: 25px; margin: 0; transform: rotate(180deg); }
.imgbox-wrap svg, .imgbox-wrap img { display: inline-block; vertical-align: top; }
.imgbox-header .total-num-list { flex: none; position: relative; z-index: 10; right: 25px; font-size: 14px; }
.imgbox-header .total-num-list .num { margin-right: 5px; color: var(--white); }
.imgbox-header .total-num-list .total-num { color: hsla(0, 0%, 100%, .6); } 
/* 이미지박스 */
.imgbox { --radius: 24px; position: relative; height: 100%; white-space: nowrap; transform-origin: top left; }
.imgbox::before { position: absolute; right: 0; bottom: 0; left: 0; z-index: 10; opacity: 0; height: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) -0.26%, rgba(0, 0, 0, 0.5) 100%); transition: opacity .3s ease-out; content: ""; }
.imgbox .imgbox-viewer, .imgbox .imgbox-container { height: 100%; }
.imgbox .imgbox-img-item { display: inline-flex; vertical-align: top; align-items: center; width: 100%; height: 100%; padding: 10px; box-sizing: border-box; margin: 0 auto; } 
.imgbox-thumb,
.video-item {position: relative; break-inside: avoid; overflow: hidden; border-radius: var(--radius); background: var(--black-color); width: 100%; max-width: var(--max-width); margin: 0 auto; cursor: pointer !important;}
.imgbox-thumb:after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: #00000008; content: ""; }
.video-item:after { display:none !important; }
.imgbox-thumb.video-item video {width: 100%; display: block; border-radius: var(--radius); object-fit: cover; aspect-ratio: 1 / 1; transition: transform .35s ease;}
.imgbox .img { object-fit: contain; }
/* 이미지로드 */
.imgbox-viewer{ overflow:hidden; }
.imgbox-container { display: flex; width: 100%; height: 100%; transition: transform 0.3s ease-out;}
.imgbox-img-item { flex: 0 0 100%; width: 100%; height: 100%; }
.bt-prev, .bt-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 6000; cursor: pointer; padding: 20px; }
.bt-prev { left: 0; transform: translateY(-50%) rotate(180deg); }
.bt-next { right: 0; }
.btn-icon { width: 50px; height: 50px; border-radius: 50%; background: rgba(0, 0, 0, .2); cursor: pointer; z-index: 1000; backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center;}
.btn-icon svg { fill: var(--white); width: 25px; height: 50px; margin: 0; }



/************************ 헤더 ************************/
.header { display: flex; position: fixed; top: 0; right: 0; left: 0; z-index: 5000; border-bottom: 1px solid rgba(0, 0, 0, .1); background-clip: padding-box; max-width: var(--max-width); margin: 0 auto;}
.header a { z-index: 10; display: flex; gap: 5px; justify-content: center; align-items: center;}
.header.box { border-color: rgba(0, 0, 0, 0); background: var(--gray-color-thin); box-shadow: none; height: var(--header-height); opacity:0; pointer-events: none; } 
.header.box.header_box { box-shadow: var(--shadow); }
.header.box.hidden { opacity:0;}
.header.box.visible { opacity:1; pointer-events: visible;}
.header .home { position: relative; width: 44px; height: 50px; }
.header .home .svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); fill: var(--theme-color); width: 30px; height: 30px; margin: 0px 0 0 0;}
.header .home+.bizname { padding-left: 0; padding-right: 44px; text-align: center; }
.header .bizname { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; position: relative; z-index: 10; padding: 0; font-size: 2rem; font-weight: 600; color: var(--theme-color); line-height: var(--header-height); }
.header .bizname svg { fill: var(--theme-color); width: 18px; height: 18px; margin: 0;}
.header .hbg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: var(--white); }



/************************ 메인 컨테이너 ************************/
.container { max-width: var(--max-width); margin: 0 auto; min-height: 100vh; position: relative; }
/************************ 히어로 ************************/
.hero_section {position: relative;}
.hero {display: flex; position: relative; height: 20rem; background: var(--white); }
.hero .hero-wrap {overflow: hidden; flex: 1; align-items: center;}
.hero .hero-wrap + .hero-wrap {margin-left: 1px;}
.hero .hero-wrap .heroimg {height: 100%; width: 100%; overflow: hidden; flex: 1; align-items: center;}
.hero .hero-wrap .heroimg + .heroimg {margin-left: 1px;}
.heroimg .place_thumb::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 100; height: 100%; background: var(--linear-gra); }
/* .heroimg .place_thumb.video-item video { width: 100%; height: 100%; display: block; object-fit: cover; aspect-ratio: 1 / 1; transition: transform .35s ease; } */
.hero .hero-wrap .herolist {display: flex; overflow: hidden; align-items: center; height: 50%;}
.hero .hero-wrap .herolist + .herolist {margin-top: 1px;}
.place_thumb .icon-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; background: rgba(0, 0, 0, .27); font-size: 1.3rem; font-weight: 600; color: var(--white); line-height: 1.8rem; }
.place_thumb .icon-photo .svg { fill: var(--white); width: 25px; height: 25px; margin: 0 auto 0px; }

/************************ 타이틀 ************************/
.title_name { padding: var(--padding-horizontal); }
.title_list { position: relative; margin-top: 3px;/* line-height: 2.5rem; */ }
.title_list .tt { margin-right: 5px; font-size: 2rem; font-weight: 600; color: var(--theme-color);}
.title_list .st { display: inline-block; vertical-align: top; font-size: 1.5rem; color: var(--gray-color); }
.title_desc:not(:empty) { margin-top: 3px;}
.title_desc .desc { display: inline-block; vertical-align: top; position: relative; font-size: 1.5rem; color: var(--black-color-mud); white-space: nowrap; }
.title_desc .desc+.desc::before { display: inline-block; vertical-align: top; width: 3px; height: 3px; margin-top: 9px; margin-right: 5px; margin-left: 5px; border-radius: 50%; background: var(--gray-color-light); content: ""; }
/* 아이콘메뉴 */
.title_icon_menu { padding: 0 var(--pad ding-horizontal); }
.title_icon_menu .menu { display: flex; height: 70px; border-top: 1px solid; border-top-color: var(--gray-color-thin); }
.title_icon_menu .item_list { flex: 1; position: relative; }
.title_icon_menu .item_list+.item_list::before { display: block; position: absolute; top: 10px; bottom: 3px; left: 0; width: 1px; background: var(--gray-color-thin); content: ""; }
.title_icon_menu .item { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; height: 100%; font-size: 1.4rem; color: var(--black-color-mud); line-height: 1.9rem; text-align: center; }
.title_icon_menu .item .svg { fill: var(--black-color-mud); width: 22px; height: 22px; margin: 0 auto 5px; }
.title_icon_menu .item_list:last-child .item .svg, .title_icon_menu .item_list:last-child .item { fill: var(--accent-color); color: var(--accent-color);}



/************************ 메뉴탭.js ************************/
.menu_tabmenu {position: relative; max-width: var(--max-width); margin: 0 auto; box-shadow: var(--shadow);}
.menu_tabmenu.indexmenu_section {background: var(--transparent) ! important;}
.menu_tabmenu._fixed { position: fixed; top: 50px; right: 0; left: 0; z-index: 5000; }
.menu_tabmenu_wrap { position: relative; background: rgba(255,255,255,.95); backdrop-filter: blur(3px); height: var(--menu-tabmenu-height); max-width: var(--max-width); margin: 0 auto;}
.menu_list { position: relative; width: 100%; }
.tabmenu_list { position: relative; transition: height .2s ease-out; padding-bottom: 1px;}
.tabmenu { overflow: hidden; overflow-x: auto; white-space: nowrap; scrollbar-width: none; display: flex; flex-wrap: nowrap; width: 100%; height: 100%; display: flex; position: relative; z-index: 10;}
.tabmenu::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: var(--transparent); content: ""; }
.tabmenu .menu { display: inline-flex; vertical-align: top; flex: 1; justify-content: center; padding: 0 15px; box-sizing: border-box; }
.tabmenu .menu[aria-selected=true] .title { font-weight: 600; color:  var(--theme-color); }
.tabmenu .menu[aria-selected=true] .title::after { position: absolute; right: 0; bottom: 0; left: 0; z-index: 20; height: 3px; border-radius: 2px; background: var(--theme-color); content: ""; }
.tabmenu .title { display: inline-block; vertical-align: top; position: relative; padding: 13px 0; font-size: 1.7rem; color:  var(--gray-color); }
/*#home, #feed, #menu, #photo, #info { scroll-margin-top: var(--scroll-margin-top); }*/




/************************ 메뉴 *******************************/
/************************ 메뉴 썸네일  메뉴판이미지.js *******************************/
.menu_section {--radius: 8px;}
.menu_section .text_link { display: inline-block; vertical-align: top; font-size: 1.5rem; font-weight: 400; color: var(--link-color); }
.menu_section ._extra .svg {fill: var(--link-color); margin: 5px 0 0 0;}
.menu_box_wrap { margin: 0 var(--padding-horizontal-negative); }
.menu_box_slide { position: relative; width: 100%; }
.menu_box { position: relative; transition: height .2s ease-out; }
.menu_box_list { overflow: hidden; overflow-x: auto; white-space: nowrap; scrollbar-width: none; display: flex; flex-wrap: nowrap; width: 100%; height: 100%; }
.menu_box_list>* { flex-shrink: 0; }
.menu_box_list .list { display: inline-block; vertical-align: top; width: auto; }
.menu_box_list .list:first-child { padding-left: 0; }
.menu_box_list .list+.list { padding-left: 10px; }
.menu_box_list .list_thumb { display: block; }
.menu_box_list .list_thumb .thumb { width: 100px; height: 100px; }
.menu_box_list .list_thumb .thumb .place_thumb { aspect-ratio: 1 / 1; border-radius: var(--radius); }
.menu_box_list .list_thumb .thumb .place_thumb::before, .menu_box_list .list_thumb .thumb .place_thumb::after { border-radius: var(--radius); }
.menu_box_list .list_thumb .place_thumb::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; background: rgba(0, 0, 0, .03); content: ""; }
.menu_box_list .list_thumb .desc { margin-top: 8px; }
.menu_box_list .list_thumb .desc .tt { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 2.1rem; color:  var(--black-color); }
.menu_box_list .list_thumb .desc .st { margin-top: 2px; font-size: 1.5rem; color:  var(--black-color); } _9vj1 em { font-weight: 700; }
/************************ 메뉴 리스트 *******************************/
.menulist_section {}
.menulist_wrap {}
.menulist { position: relative; padding-top: 17px; padding-bottom: 16px; }
.menulist::before { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--gray-color-bright); content: ""; }
.menulist:first-child { padding-top: 16px; }
.menulist_thumb { display: block; }
.menulist_thumb .thumb { display: flex; gap: 16px; align-items: center; }
.menulist_thumb .thumb .text { overflow: hidden; flex: 1; }
.menulist_thumb .mark { position: relative; }
.menulist_thumb .mark.signature {display: inline-block; margin-bottom: 5px; border-radius: 15px; color: var(--accent-color); border: 1px solid currentColor; padding: 0px 8px 0px; font-size: 11px; font-weight: 600; }
.menulist_thumb .tt { display: block; display: -webkit-box; overflow: hidden; max-height: 4.4rem; line-height: 2.2rem; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; font-size: 1.7rem; font-weight: 600; color: var(--black-color);}
.menulist_thumb .desc { display: block; /*display: -webkit-box; overflow: hidden; max-height: 4rem; line-height: 2rem; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal;*/ margin-top: 4px; font-size: 1.5rem; color: var(--black-color-mud); }
.menulist_thumb .price { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; position: relative; margin-top: 2px; font-size: 1.5rem; }
.menulist_thumb .price em { font-weight: 700; }
.menulist_thumb .price .free { flex: none; color:  var(--black-color); }
.menulist_thumb .thumb .photo { flex: none; }
.menulist_thumb .thumb .photo .place_thumb { border-radius: 12px; }
.menulist_thumb .thumb .photo .place_thumb .img { width:100px; height:100px; }



/************************ 소식 ************************/
.feed_box { padding: 16px; border-radius: 8px; background: var(--accent-color-light); }
.feed_box .feed_title { font-weight: 500; font-size: 1.5rem; color: var(--accent-color); }
.feed_box .feed_title .svg { fill: var(--accent-color); /*stroke-width: 1; stroke: var(--accent-color);*/ width: 16px; height: 16px; margin: 2px 3px 0 0; animation: shake 2s ease-in-out infinite; transform-origin: top center;}
.feed_box .list { position: relative; margin-top: 5px; font-size: 1.4rem; color:  var(--gray-color); }
.feed_box .list .svg { /*fill: var(--yellow); stroke-width: 1; stroke: var(--yellow);*/ }
@keyframes shake {
    0%, 40% { transform: rotate(0deg); }
    10% { transform: rotate(-15deg); }
    20% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
}



/*************** 업체정보 ***************/
/*************** 공통 ***************/
.info_box_wrap { display: flex; flex-direction: column; gap: 10px; padding: 15px 0 0; border-top: 1px solid var(--gray-color-thin);}
.info_box { display: flex; position: relative; }
.left { flex: none; margin-right: 8px; }
.left > .svg { fill: var(--theme-color-light); width: 14px; height: 14px; margin: 3px 0 0 0; }
.right {overflow: hidden; flex: 1; font-size: 1.5rem; color: var(--black-color-mud); }
/**************** 위치 ****************/
.info_box.loc .desc { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: pre-line; word-break: break-all;}
/**************** 안내글 ****************/
.info_link { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px;}
.info_link .info_more { margin-left: 0; }
.info_link .info_more .svg { /*fill: var(--gray-color);*/ width: 16px; height: 16px; stroke: var(--gray-color-light); stroke-width: 1.8; margin:0;}
.info_link[aria-expanded="true"] .info_more .svg { transform: rotate(180deg); }
.info_link .desc { display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: pre-line; word-break: break-all; }
.info_link[aria-expanded="true"] .desc{ display:block; overflow:visible; }
/**************** 영업시간 ****************/
.time_link { }
.time_link .time_more {margin-right: 0; margin-left: auto;}
.time_link .time_more .svg {/*fill: var(--gray-color);*/ width: 16px; height: 16px; stroke: var(--gray-color-light); stroke-width: 1.8; margin:0;}
.time_link[aria-expanded="true"] .time_more .svg { transform: rotate(180deg); }
.time_link .desc { flex: 1; display:-webkit-box; -webkit-line-clamp: 1; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; white-space: pre-line; word-break: break-all; }
.time_link[aria-expanded="true"] .desc{ flex:1; display:block; overflow:visible; }
.info_box.time .right .time_link {display: flex; flex-direction: row;}
.info_box.time .right .time_link .hours {display: flex; flex-direction: row; flex-shrink: 0;}
.info_box.time .right .time_link .hours::after {content: "";  display: inline-block; vertical-align: top; width: 3px; height: 3px; border-radius: 50%; background: var(--gray-color-light); margin: 8px 10px;}
/***************** 전화번호.js *****************/
.info_box.phone { position: relative; }
.info_box.phone .number { margin-right: 4px; }
.copy { display: inline-block; vertical-align: top; position: relative; font-size: inherit; color: var(--link-color); line-height: inherit; }
/***************** 편의서비스 *****************/
.info_box.ser .desc { display: block; /*overflow: hidden; text-overflow: ellipsis; white-space: nowrap;*/ }
/***************** 가격표.js *****************/
.X2oNY { flex: none; margin-right: 8px; }
.X2oNY>.DNzQ2 { fill: var(--gray-color-light); width: 18px; height: 18px; margin-top: 1px; }
.info_box.price .box {  }
.info_box.price .item { display: flex; overflow: hidden; position: relative; z-index: 1;}
.info_box.price .item::after { position: absolute; top: 50%; right: 0; left: 0; border-top: 1px dashed; border-top-color: var(--gray-color-bright); transform: translateY(-50%); content: ""; z-index: -1; }
.info_box.price .desc { display: flex; overflow: hidden; flex: 1; }
.info_box.price .text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--white); padding-right: 5px;}
.info_box.price .price { flex: none; position: relative; color: var(--black-color); background: var(--white); padding-left: 5px;}
.info_box.price .price em { font-weight: 700; }
/****************** 초기 상태: 2번째 li 이후는 모두 숨김 ******************/
.menu-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 4px 24px; overflow: hidden; }
.menu-list li { display:none; }
.menu-list li:nth-child(-n+2) { display:block; }/* 처음 2개만 표시 */
/****************** 접기 ******************/
.info_box.price .list { text-align: left; }
.info_box.price .list.more {display: flex; flex-direction: row-reverse; justify-content: space-between; margin-top: 8px;}
.info_box.price .list .btn { display: inline-block; font-size: 1.5rem; color: var(--link-color); /*background: var(--theme-color-light); border: 1px solid var(--theme-color-light); border-radius: 6px; box-shadow: var(--shadow);*/ width: fit-content; padding: 0; text-decoration: underline; margin: 0; }
/****************** 가격표이미지.js ******************/
.info_box.price .open { position: relative; font-size: 1.5rem; }
.info_box.price .open .svg { fill: var(--link-color); margin: 3px 0 0 0; }
.info_box.price .open .btn { color: var(--link-color); text-decoration: none;}




/****************** 편의시설 ******************/
.service_section {}
.service .box { margin: 0 var(--padding-horizontal-negative); }
.service .list_item { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 0; }
.service .list_item .list { font-size: 1.2rem; color: var(--black-color-mud); line-height: 1.6rem; text-align: center; word-break: keep-all; }
.service .list_item .svg { fill: var(--black-color-mud); display: block; width: 30px; height: 30px; margin: 0 auto 7px; }
.service .list_item .desc { max-width: 75px; margin: 0 auto; }
.place-more .photo { fill: var(--white); width: 18px; height: 18px; margin: 1px auto 4px; }




/****************** 포토 ******************/
/******************* 포토1 ******************/
.photo-thumb { --radius: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.thumb-item, .video-item {display: block; overflow: hidden; position: relative; cursor: pointer;}
.thumb-item img {width: 100%; aspect-ratio: 1 / 1;}
.thumb-item:nth-child(3n-2):first-child { border-top-left-radius: var(--radius); }
.thumb-item:nth-child(3n-2):first-child { border-top-left-radius: var(--radius); }
.thumb-item:nth-child(3n):nth-child(-n+3) { border-top-right-radius: var(--radius); }
.thumb-item:nth-child(3n-2):nth-last-child(-n+3) { border-bottom-left-radius: var(--radius); }
.thumb-item:nth-child(3n):last-child { border-bottom-right-radius: var(--radius); }
.thumb-item img, .thumb-item.video-item video { width: 100%; display: block; border-radius: var(--radius); object-fit: cover; aspect-ratio: 1 / 1; transition: transform .35s ease; }
.video-item::after { content: '▶'; position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .5); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 13px; backdrop-filter: blur(4px); }
/******************** 포토2 *******************/
.photo-wrap { --radius: 10px; --gap: 4px;}
.photo-wrap{ column-count: 3; column-gap: var(--gap); }
.photo-item, .video-item{ position:relative; break-inside:avoid; margin-bottom: var(--gap); overflow:hidden; border-radius: var(--radius); background:#eee; cursor: pointer;}
.photo-item.video-item img { display: none; }
.photo-item img, .photo-item.video-item video{ width:100%; display:block; border-radius: var(--radius); object-fit:cover; aspect-ratio: auto; transition:transform .35s ease; }
.photo-item:hover img, .photo-item:hover video{ transform:scale(1.03); }
.photo-item::before{ content:''; position:absolute; inset:0; background:linear-gradient( to top, rgba(0,0,0,.08), transparent 45% ); z-index:1; pointer-events:none; }
/******************* 포토모달.js *******************/
#modalPhoto {}
.modal-photo { --radius: 10px; --gap: 4px; position:fixed; inset:0; background:rgba(0,0,0,.96); z-index:99999; display:none; align-items:center; justify-content:center; padding:10px; }
.modal-photo.active{ display:flex; }
.close-btn{ position:absolute; top:20px; right:20px; width:50px; height:50px; border-radius:50%; background: rgba(255,255,255,.15); /*color:white; font-size:20px; */ display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(10px); z-index: 999999!important;}
.nav-btn{ position:absolute; top:50%; transform: rotateY(0deg) translateY(-50%); width:50px; height:50px; border:none; border-radius:50%; background: rgba(255,255,255,.15); /*color:var(--white); font-size:34px;*/ cursor:pointer; z-index:1000; backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center; }
.prev-btn{ left:20px; }
.next-btn{ right:20px; }
.close-btn .svg, .nav-btn .svg {fill: var(--white); width: 28px; height: 28px; margin: 0px 0 0 0;}
.nav-btn.prev-btn {transform: rotateY(180deg) translateY(-50%); }
/* 포토로드 */
#modalContent { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; }
.slide-track { display: flex !important; flex-direction: row !important; width: 100%; height: 100%; touch-action: pan-y; }
.slide-item { flex: 0 0 100% !important; width: 100% !important; height: 100%; display: flex; justify-content: center; align-items: center; box-sizing: border-box; }
.slide-item img, .slide-item video { width:100%; max-width: var(--max-width); max-height: 90vh; object-fit:contain; border-radius: var(--radius); max-height: 100vh; object-fit: contain; user-select: none; -webkit-user-drag: none; }




/****************** 푸터 ******************/
footer { background-color: var(--white); max-width: var(--max-width); margin: 0 auto 8px; border-top: 1px solid var(--gray-color-smooth);}
.foot-box { display: flex; flex-direction: column; gap: 2px; padding: 15px 20px 80px; }
.foot-menu { text-align: center; }
.foot-menu .list { font-size: 1.4rem; color:  var(--gray-color); }
.foot-menu .list+.list::before { display: inline-block; vertical-align: top; width: 1px; height: 12px; margin: 5px 10px 0; background: var(--gray-color-thin); content: ""; }
.foot-logo { text-align: center; }
.foot-logo a { display: block; }
.foot-logo .svg { width: 65px; height: 30px; fill: var(--gray-color-light); margin:0;}



/******************** 하단 고정 CTA ********************/
.cta-fixed { --radius: 5px; --size: 50px; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--max-width); background: white; padding: 8px 12px; border-top: 0px solid var(--gray-color-light); display: flex; gap: 5px; z-index: 100; box-shadow: var(--shadow-top);}
.cta-icon-btn { width: var(--size); height: var(--size); border-radius: var(--radius); background: var(--accent-color); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.cta-icon-btn svg, .cta-primary svg { width: 20px; height: 20px; fill: var(--white); margin: 0; /*stroke: none; stroke-width: 1.8;*/ }
.cta-primary { flex: 1; height: var(--size); border-radius: var(--radius); background: var(--theme-color); color: white; border: none; font-size: 17px; font-weight: 400; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.cta-primary:active { background: var(--accent-color); }
/* ===================================================================
   site.php 추가 스타일 (디자인 최종판 연동)
=================================================================== */

/* HERO 2번째 영역: 좌우 스크롤 (요청사항) */
.hero .hero-wrap.hero-scroll { display: flex; flex-direction: row; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hero .hero-wrap.hero-scroll::-webkit-scrollbar { display: none; }
.hero .hero-wrap.hero-scroll .heroimg { flex: 0 0 50%; height: 100%; }
.hero .hero-wrap.hero-scroll .heroimg + .heroimg { margin-left: 1px; }

/* 편의시설 map-icons SVG (lucide 24x24 stroke) — 기존 .service .svg는 fill 기준이라 별도 지정 */
.service .list_item .list > svg { fill: none; stroke: var(--black-color-mud); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; width: 28px; height: 28px; margin: 0 auto 7px; }

/* 편의서비스 요약 줄 아이콘이 없을 때 정렬 보정 */
.info_box.ser .right .desc { line-height: 2rem; }

/* 액션 시트 (길찾기/공유) */
.hb-sheet { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.hb-sheet .hb-sheet-dim { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s ease; }
.hb-sheet .hb-sheet-box { position: relative; width: 100%; max-width: var(--max-width); background: var(--white); border-radius: 16px 16px 0 0; padding: 8px; transform: translateY(100%); transition: transform .2s ease; box-shadow: var(--shadow-top); }
.hb-sheet.on .hb-sheet-dim { opacity: 1; }
.hb-sheet.on .hb-sheet-box { transform: translateY(0); pointer-events: auto; }
.hb-sheet .hb-sheet-item { display: block; width: 100%; padding: 16px; font-size: 1.6rem; color: var(--black-color); text-align: center; border-radius: 10px; background: transparent; }
.hb-sheet .hb-sheet-item:active { background: var(--gray-color-smooth); }
.hb-sheet .hb-sheet-item + .hb-sheet-item { border-top: 1px solid var(--gray-color-thin); }
.hb-sheet .hb-sheet-cancel { margin-top: 6px; font-weight: 600; color: var(--gray-color); border-top: 8px solid var(--gray-color-thin) !important; }
.hb-sheet .hb-sheet-box { pointer-events: auto; }

/* 메뉴 더보기 펼침 시 화살표 회전 */
.more_wrap .more_btn.expanded .svg { transform: rotate(180deg); }
.more_wrap .more_btn .svg { transition: transform .2s ease; }

/* ===== 메뉴 더보기 부드러운 전환 ===== */
/* 리스트배열은 기본 숨김(JS가 .menu-pane으로 제어). JS 미작동 시 썸네일만 노출 */
.menulist_wrap:not(.menu-pane) { display: none; }
.menu-pane { overflow: hidden; transition: height .32s cubic-bezier(.4,0,.2,1), opacity .26s ease; will-change: height, opacity; }
.menu-pane.is-hidden { height: 0; opacity: 0; pointer-events: none; }
.menu-pane.is-shown { opacity: 1; }