html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure,  figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%;  font: inherit; letter-spacing: var(--sys-font-letterSpacing-default); color: inherit; text-decoration: none;}article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}body {line-height: 1;}ol, ul {	list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: '';}table {border-collapse: collapse; border-spacing: 0;}
*:before, *:after{box-sizing: border-box;}

@font-face {
	font-family: 'Pretendard';	
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/Pretendard-Medium.subset.woff2') format('woff2');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
}


*{margin: 0;padding: 0;box-sizing: border-box; word-break: keep-all; letter-spacing: var(--sys-font-letterSpacing-default);}


html{background-color: var(--background-dark);}
body{max-width: 1024px; margin: 0 auto; background-color: var(--background-onsurface); min-height: 100vh; display: flex; flex-direction: column; color: var(--text-default); font: var(--sys-font-body-7);}

/* component */

/* input text */
input[type="text"], input[type="password"], textarea{display: flex; height: var(--ref-sizing-700, 56px); padding: 0px var(--container-side, 16px); background: var(--background-dark, #F2F2F2); font: var(--sys-font-body-3); color: var(--text-default); border: none; width: 100%; border: 1px solid transparent;}
.search_input{position: relative;}
.search_input:before{content: ''; display: block; width: var(--ref-sizing-250, 20px); height: var(--ref-sizing-250, 20px); background: url('/html/img/icon/search.svg')no-repeat center; background-size: 18px; position: absolute; left: 12px; top: 14px;}
input[type="text"].search{height: var(--ref-sizing-600, 48px); border-radius: var(--ref-radius-md, 8px); padding: 0px var(--ref-spacing-500, 40px);}
input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder{color: var(--text-disabled);}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus{outline: none;}
input[type="text"]:not(:read-only):focus, input[type="password"]:not(:read-only):focus, textarea:not(:read-only):focus{border: 1px solid var(--brand-standard, #236EDE); outline: none;}
textarea{padding: var(--container-side, 16px); height: 152px; resize: none;}

/* input radio, checkbox */
/*
input[type="radio"], input[type="checkbox"]{display: none;}
input[type="radio"]+label, input[type="checkbox"]+label{font: var(--sys-font-button-label); display: flex; gap: var(--ref-spacing-100, 8px); position: relative; user-select: none;}
input[type="radio"].label_all+label, input[type="checkbox"].label_all+label{font: var(--sys-font-button-label-all);}
input[type="radio"]+label:before, input[type="checkbox"]+label:before{content: ''; width: var(--ref-sizing-300, 24px); height: var(--ref-sizing-300, 24px); border-radius: var(--ref-radius-full, 360px); border: 1px solid var(--border-control, #CCC); background: var(--ref-color-grey-white, #FFF); flex-shrink: 0;}
*/

input[type="radio"]:checked+label:before{background: var(--brand-standard, #236EDE); border: none;}
input[type="radio"]+label:after{content: ''; display: block; width: var(--ref-sizing-150, 12px); height: var(--ref-sizing-150, 12px); border-radius: var(--ref-radius-full, 360px); position: absolute; left: 6px; top: 6px;}
input[type="radio"]:checked+label:after{background-color: var(--ref-color-grey-white, #FFF);}
input[type="radio"]:active+label:after{background-color: var(--brand-light, rgba(245, 123, 0, 0.20));}
input[type="radio"]:checked:active+label:before{background: var(--brand-dark, #BB3711);}
input[type="radio"]:checked:active+label:after{background-color: var(--ref-color-grey-white, #FFF);}

/*
input[type="checkbox"]:checked+label:before{background: var(--brand-standard, #236EDE); border: none;}
input[type="checkbox"]+label:after{content: ''; display: block; width: var(--ref-sizing-150, 12px); height: var(--ref-sizing-100, 8px); position: absolute; left: 6px; top: 8.5px;}
input[type="checkbox"]:checked+label:after{background: url('../img/icon/checkbox.svg')no-repeat;}
input[type="checkbox"]:active+label:before{background: var(--background-dark, #F2F2F2);}
input[type="checkbox"]:checked:active+label:before{background: var(--brand-dark, #BB3711);}
*/

/* input switch */
input[type="checkbox"].comp-switch+label:before{width: 51px; height: 31px; border-radius: var(--ref-radius-full, 360px); background: var(--border-control, #CCC); border: none; transition: background-color 200ms ease;}
input[type="checkbox"].comp-switch+label:after{width: 27px; height: 27px; background: var(--ref-color-grey-white, #FFF); border-radius: var(--ref-radius-full, 360px); left: 2px; top: 2px; transition: left 200ms ease;}
input[type="checkbox"]:checked.comp-switch+label:before{background-color: var(--brand-standard, #236EDE);}
input[type="checkbox"]:checked.comp-switch+label:after{left: 22px;}

/* chip */
input[type="radio"].comp-chip+label:before, input[type="radio"].comp-chip+label:after, input[type="checkbox"].comp-chip+label:before, input[type="checkbox"].comp-chip+label:after{display: none !important;}
input[type="radio"].comp-chip+label, input[type="checkbox"].comp-chip+label{display: inline-flex; height: var(--ref-sizing-550, 44px); padding: 0px var(--ref-spacing-200, 16px); border-radius: var(--ref-radius-sm, 4px); border: 1px solid var(--border-control, #CCC); background: var(--ref-color-grey-white, #FFF); justify-content: center; align-items: center; cursor: pointer; font: var(--sys-font-body-6);}
input[type="radio"].comp-chip:checked+label, input[type="checkbox"].comp-chip:checked+label{border: 1px solid var(--brand-standard, #236EDE); background: var(--brand-lighter, rgba(245, 123, 0, 0.10)); color: var(--brand-standard, #236EDE);}
input[type="radio"].comp-chip[disabled]+label, input[type="checkbox"].comp-chip[disabled]+label{border: 1px solid var(--border-frame-light, #E6E6E6); background: var(--background-dark, #F2F2F2); color: var(--text-disabled, #999); cursor: default;}

/* select */
select{display: flex; height: var(--ref-sizing-700, 56px); padding: 0px var(--ref-spacing-700, 56px) 0px var(--container-side, 16px); border: 1px solid var(--border-control, #CCC); background: url('../img/icon/arrow-down.svg')no-repeat var(--background-onsurface, #FFF); background-size: var(--ref-sizing-250, 20px); background-position: right 18px center; appearance: none; -webkit-appearance: none; font: var(--sys-font-body-3); color: var(--text-default, #1A1A1A);}
select:focus{border: 1px solid var(--brand-standard, #236EDE); outline: none;}

select.comp-select-sm{height: var(--ref-sizing-550, 44px); padding: 0px var(--ref-spacing-450, 36px) 0px var(--spacing-horizontal-sm, 8px); background-size: 14px; background-position: right 8px center; appearance: none; -webkit-appearance: none; font: var(--sys-font-body-5);}


/* button */
.comp-button-xs{display: inline-flex; height: var(--ref-sizing-400, 32px); padding: 0px var(--ref-spacing-150, 12px); border-radius: var(--ref-radius-sm, 4px); justify-content: center; align-items: center; font: var(--sys-font-button-xs); outline: none; border: none; }
.comp-button-sm{display: inline-flex; height: var(--ref-sizing-500, 40px); padding: 0px var(--ref-spacing-200, 16px); justify-content: center; align-items: center; gap: var(--ref-spacing-50, 4px); font: var(--sys-font-button-sm); outline: none; border: none;}
.comp-button-sm img{width: var(--ref-sizing-200, 16px);	height: var(--ref-sizing-200, 16px);}
.comp-button-md{display: inline-flex; height: var(--ref-sizing-550, 44px); padding: 0px var(--ref-spacing-150, 12px); justify-content: center; align-items: center; gap: var(--ref-spacing-50, 4px); font: var(--sys-font-button-md); outline: none; border: none;}
.comp-button-lg{display: flex; height: var(--ref-sizing-700, 56px); padding: 0px var(--ref-spacing-250, 20px); justify-content: center; align-items: center; gap: var(--ref-spacing-50, 4px); font: var(--sys-font-button-lg); outline: none; border: none;}
.comp-button-xl{ display: flex; height: var(--ref-sizing-750, 60px); padding: 0px var(--ref-spacing-300, 24px); justify-content: center; align-items: center; gap: var(--ref-spacing-100, 8px); font: var(--sys-font-button-xl); outline: none; border: none; }
[class*="comp-button"]{cursor: pointer; user-select: none;}
[class*="comp-button"][disabled]{background: var(--background-dark, #F2F2F2); color: var(--text-disabled, #999); cursor: default;}

.comp-solid-primary{background: var(--brand-standard, #236EDE); color: var(--ref-color-grey-white, #FFF);}
.comp-solid-primaryTinted{background: var(--brand-lighter, rgba(245, 123, 0, 0.10)); color: var(--brand-standard, #236EDE);}
.comp-solid-gray{background: var(--background-dark, #F2F2F2); color: var(--text-default, #1A1A1A);}
.comp-solid-negative{background: var(--background-light, #FAFAFA); color: var(--state-negative-standard, #FA3848);}
.comp-outline-primary{border: 1px solid var(--brand-standard, #236EDE); color: var(--brand-standard, #236EDE); background-color: var(--background-onsurface, #FFF);}
.comp-outline-gray{border: 1px solid var(--border-control, #CCC); color: var(--text-default, #1A1A1A); background-color: var(--background-onsurface, #FFF);}
.comp-outline-negative{border: 1px solid var(--border-control, #CCC); color: var(--state-negative-standard, #FA3848); background-color: var(--background-onsurface, #FFF);}

/* confirm, alert */
.comp-confirm{position: fixed; height: 100%; width: 100%; max-width: 1024px; background: var(--background-dim, rgba(0, 0, 0, 0.50)); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0 var(--container-side, 16px);}
.comp-confirm .container{display: flex; padding: var(--ref-spacing-250, 20px); background: var(--background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-vertical-xl, 24px); width: 100%;}
.comp-confirm .text_wrap{display: flex; padding: var(--spacing-vertical-md, 12px) 0px; flex-direction: column; gap: var(--spacing-vertical-sm, 8px); text-align: left;}
.comp-confirm .text_wrap strong{font: var(--sys-font-title-2);}
.comp-confirm .text_wrap p{font: var(--sys-font-body-3); color: var(--text-subdued, #595959);}
.comp-confirm .btn_wrap{display: flex; gap: var(--spacing-horizontal-sm, 8px);}
.comp-confirm .btn_wrap > *{flex-grow: 1; flex-basis: 0;}

.comp-alert{position: fixed; height: 100%; width: 100%; max-width: 1024px; background: var(--background-dim, rgba(0, 0, 0, 0.50)); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0 var(--container-side, 16px);}
.comp-alert .container{display: flex; padding: var(--ref-spacing-250, 20px); background: var(--background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-vertical-xl, 24px); width: 100%;}
.comp-alert .text_wrap{display: flex; padding: var(--spacing-vertical-md, 12px) 0px; flex-direction: column; gap: var(--spacing-vertical-sm, 8px); text-align: left;}
.comp-alert .text_wrap strong{font: var(--sys-font-title-2);}
.comp-alert .text_wrap p{font: var(--sys-font-body-3); color: var(--text-subdued, #595959);}
.comp-alert .btn_wrap{display: flex;}
.comp-alert .btn_wrap > *{flex-grow: 1;}
.comp-alert .text_wrap{text-align: center;}

/* comp-popup */
.comp-popup{position: fixed; height: 100%; width: 100%; max-width: 1024px; background: var(--background-dim, rgba(0, 0, 0, 0.50)); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 0 var(--container-side, 16px); z-index: 10000;}
.comp-popup .container{display: flex;flex-direction: column; width: 300px; border-radius: var(--ref-radius-md, 8px); background: var(--background-onsurface, #FFF); overflow: hidden;}
.comp-popup .container .swiper-slide{width: 100% !important;}
.comp-popup .container img{width: 100%; vertical-align: top;}
.comp-popup .btn_wrap{display: flex; height: var(--ref-sizing-700, 56px); background: var(--background-onsurface, #FFF); justify-content: space-between; align-items: center;}
.comp-popup .btn_wrap label{margin: 0px var(--container-side, 16px);}
.comp-popup .btn_wrap .close{display: flex; align-items: center; padding: 0px var(--container-side, 16px); font: var(--sys-font-detail-1); align-self: stretch; border: none; background-color: transparent;}
.comp-popup .swiper-container-horizontal>.swiper-pagination-bullets{display: flex; justify-content: center; gap: var(--spacing-horizontal-md, 12px); gap: var(--spacing-horizontal-sm, 8px);}
.comp-popup .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{width: var(--ref-sizing-100, 8px); height: var(--ref-sizing-100, 8px); background-color: var(--ref-color-grey-white, #FFF); opacity: 0.5; margin: 0;}
.comp-popup .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active{opacity: 1; width: var(--ref-sizing-250, 20px); border-radius: var(--ref-radius-md, 8px);}

.comp-bottom-sheet{position: fixed; width: 100%; max-width: 1024px; height: 100%; background: var(--background-dim, rgba(0, 0, 0, 0.50)); z-index: 100000; display: flex; flex-direction: column; justify-content: flex-end; top: 0;}
.comp-bottom-sheet .container{display: flex; overflow: hidden; padding-top: var(--ref-spacing-100, 8px); background: var(--background-onsurface, #FFF); flex-direction: column;}
.comp-bottom-sheet .title_wrap{display: flex; height: var(--ref-sizing-700, 56px); padding: var(--ref-spacing-50, 4px) var(--ref-spacing-100, 8px); background: var(--background-onsurface, #FFF); align-items: center; justify-content: space-between;}
.comp-bottom-sheet .title_wrap .title{display: flex; padding-left: var(--ref-spacing-100, 0px); font: var(--sys-font-title-3);}
.comp-bottom-sheet .title_wrap .icon_right{display: flex; width: var(--ref-sizing-500, 40px); height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; border: none; background-color: transparent;}
.comp-bottom-sheet .contents{display: flex; padding: var(--ref-spacing-150, 12px) var(--container-side, 16px) var(--ref-spacing-300, 24px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-lg, 16px);}

/* snack bar */
.comp-snack-bar {display: flex; position: fixed; width: 100%; max-width: 1024px; bottom: calc(-1 * var(--navigation-height)); transition: all 0.15s linear; z-index: 100000; padding: 0 var(--container-side, 16px);}
.comp-snack-bar .container{display: flex; background: var(--background-dim, rgba(0, 0, 0, 0.50)); padding: var(--ref-spacing-200, 16px) var(--ref-spacing-250, 20px); border-radius: var(--ref-radius-md, 8px); align-items: center; gap: var(--spacing-horizontal-md, 12px); width: 100%; font: var(--sys-font-body-4); color: var(--ref-color-grey-white, #FFF);}
.comp-snack-bar .container:before{content: ''; display: flex; flex-shrink: 0; width: var(--ref-sizing-300, 24px); height: var(--ref-sizing-300, 24px); background: url('../img/icon/snackbar.svg')no-repeat;}
.comp-snack-bar.show {display: block; bottom: 100px}

/* list */
.comp-list{display: flex; height: var(--ref-sizing-700, 56px); align-items: center; font: var(--sys-font-body-3); justify-content: space-between;}
.comp-list input[type="radio"].right+label, .comp-list input[type="checkbox"].right+label{flex-direction: row-reverse; width: 100%; height: 100%; align-items: center;}
.comp-list input[type="radio"].right+label span{flex-grow: 1;}
.comp-list input[type="radio"].right+label:after{left: auto; right: 6px; top: 50%; margin-top: -6px;}
.comp-list .icon{display: flex;	width: var(--ref-sizing-500, 40px);	height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; user-select: none; cursor: pointer;}
.comp-list .icon img{width: var(--ref-sizing-200, 16px); height: var(--ref-sizing-200, 16px); transition: all 0.2s ease;}
.comp-list .icon.on img{transform: rotate(180deg);}

/* navigation */
.comp-navigation{height: var(--navigation-height, 64px); flex-shrink: 0;}
.comp-navigation ul{position: fixed; height: var(--navigation-height, 64px); border-top: 1px solid var(--border-frame-light, #E6E6E6); background-color: var(--background-onsurface, #FFF); width: 100%; max-width: 1024px; display: flex; bottom: 0;}
.comp-navigation li{flex-grow: 1; flex-basis: 0; display: flex;}
.comp-navigation a{display: flex; flex-direction: column; gap: 2px; align-items: center; justify-content: center; width: 100%; font-size: 10px; font-weight: 500; color: var(--text-subdued, #595959); line-height: 170%;}
@media(min-width: 500px){
    .comp-navigation a{font-size: 11.2px;}
}

/* store list */
.comp-store-list{ display: flex; padding: var(--spacing-vertical-lg, 16px) var(--container-side, 16px); background: var(--background-onsurface, #FFF); flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.comp-store-list .top{display: flex;}
.comp-store-list .store_info{flex-grow: 1; display: flex; flex-direction: column;}
.comp-store-list .store_info strong{gap: var(--ref-spacing-50, 4px); font: var(--sys-font-subtitle-2);}
.comp-store-list .store_info .partner{margin-top: 2px; display: inline-flex; height: var(--ref-sizing-300, 24px); padding: 0px var(--ref-spacing-100, 8px); border-radius: var(--ref-radius-150, 12px); background: var(--content-accent-light, #B447EB); justify-content: center; align-items: center; color: var(--ref-color-grey-white, #FFF); font: var(--sys-font-button-xs); vertical-align: top;}
.comp-store-list .store_info .adr{color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}
.comp-store-list .store_info .service{margin-top: var(--spacing-vertical-sm, 8px); display: flex; flex-wrap: wrap; gap: 4px var(--ref-spacing-50, 4px);}
.comp-store-list .store_info .service li{ display: flex; height: var(--ref-sizing-300, 24px); padding: 0px var(--ref-spacing-100, 8px); border-radius: var(--ref-radius-50, 4px); background: var(--background-dark, #F2F2F2); justify-content: center; align-items: center; font: var(--sys-font-button-xs); color: var(--text-subdued, #595959);}
.comp-store-list .top img{width: 96px; height: 96px; background-color: var(--background-light); flex-shrink: 0; object-fit: cover;}
.comp-store-list .bottom{display: flex; align-items: center; justify-content: space-between;}
.comp-store-list .review{display: flex; align-items: center; gap: var(--ref-spacing-50, 4px); font: var(--sys-font-detail-1);flex-direction: row;
    padding: 0;}
.comp-store-list .map{display: flex; align-items: center; gap: var(--ref-spacing-100, 8px);}
.comp-store-list .distance{font: var(--sys-font-detail-3); color: var(--content-information-standard, #1F9EDE);}

/* header */
.header{height: var(--header-height, 64px); flex-shrink: 0;position: sticky;top: 0;z-index:999}
.header .header_fixed{/*position: fixed;*/ height: var(--header-height, 64px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6); background: var(--background-onsurface, #FFF); width: 100%; max-width: 1024px; display: flex; align-items: center; padding: 0px var(--ref-spacing-100, 8px); z-index: 999;}
.header .back{display: flex; width: var(--ref-sizing-500, 40px); height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer;}
.header .menu{display: flex; width: var(--ref-sizing-500, 40px); height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer;}
.header h1{display: flex; font: var(--sys-font-title-3); flex-grow: 1; align-items: center; padding: 0 var(--spacing-horizontal-sm, 0px); gap: var(--spacing-horizontal-sm, 8px); }
.header h1 .center{text-align: center; flex-grow: 1;}
.header .weather{display: flex; align-items: center;	gap: var(--ref-spacing-50, 4px); font: var(--sys-font-detail-2); flex-grow: 1;}
.header .weather .w_good{color: var(--content-information-standard, #1F9EDE);}
.header .weather .w_bad{color: var(--state-negative-standard, #FA3848);}
.header .right{display: flex; flex-shrink: 0;}
.header .right .icon{display: flex; width: var(--ref-sizing-500, 40px);	height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; position:relative}
.header .right .on:after {content:''; width:5px; height:5px; border-radius:100%; background: var(--state-negative-standard, #B447EB); display:flex; position:absolute; top:7px; right:5px}
.header .right button.icon{display: flex; width: var(--ref-sizing-500, 40px);	height: var(--ref-sizing-500, 40px); justify-content: center; align-items: center; flex-shrink: 0; cursor: pointer; background: none; outline: none; border: none;}
.header .right .button{display: flex; padding-right: var(--spacing-horizontal-md, 0px);	justify-content: center; align-items: center;}

/* layout */
/*.contents_wrap{flex-grow: 1; display: flex; flex-direction: column;}*/
.btn_fixed_wrap{height: calc(var(--ref-sizing-750, 60px) + var(--ref-spacing-200, 16px) + var(--ref-spacing-300, 24px))}
.btn_fixed_wrap .btn_wrap{position: fixed; display: flex;  padding: var(--ref-spacing-200, 16px) var(--container-side, 16px) var(--ref-spacing-300, 24px) var(--container-side, 16px);	background: var(--background-onsurface, #FFF);	align-items: center; width: 100%; max-width: 1024px; bottom: 0px; gap: var(--spacing-horizontal-md, 12px); z-index: 3;}
.btn_fixed_wrap [class*="button"]{flex-grow: 1; flex-basis: 0;}

/* 리뷰 리스트 */
.comp-review-list{display: flex; padding: var(--spacing-vertical-lg, 16px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-md, 12px);  border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.comp-review-list .title_wrap{display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-vertical-sm, 8px);}
.comp-review-list .title{display: flex; justify-content: space-between; align-items: center;}
.comp-review-list .title .nick{font: var(--sys-font-body-6);}
.comp-review-list .title .date{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.comp-review-list .title_wrap .star{position: relative; width: var(--ref-sizing-1000); display: flex;}
.comp-review-list .title_wrap .star img{width: 100%;}
.comp-review-list .title_wrap .star .fill{position: absolute; left: 0; top: 0; height: 100%; object-fit: cover; object-position: left;}

.comp-review-list .contents{display: flex; flex-direction: row !important; gap: var(--spacing-vertical-md, 12px) var(--spacing-horizontal-sm, 8px); flex-wrap: wrap;}
.comp-review-list .contents .contents_text{width: calc(100% - 88px); flex-grow: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; cursor: pointer;}
.comp-review-list .contents img{width: var(--ref-sizing-1000, 80px); height: var(--ref-sizing-1000, 80px);object-fit: cover;}
.comp-review-list .contents .detail{display: flex; flex-direction: column; gap: var(--spacing-vertical-md, 12px);}
.comp-review-list .contents .answer{display: flex; padding: var(--container-side, 16px) var(--container-padding, 16px); background: var(--background-light, #FAFAFA); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); flex-shrink: 0;}
.comp-review-list .contents .answer .top{display: flex; align-items: center; justify-content: space-between;}
.comp-review-list .contents .answer .top strong{font: var(--sys-font-body-6);}
.comp-review-list .contents .answer .top .date{font: var(--sys-font-body-5); color: var(--text-disabled, #999);}
.comp-review-list .contents .answer p{color: var(--text-default, #1A1A1A);}
.comp-review-list.on .contents{flex-direction: column !important; flex-wrap: nowrap;}
.comp-review-list.on .contents .contents_text{width: 100%; -webkit-line-clamp: inherit}
.comp-review-list.on .contents img{width: 100%; height: auto;}


/* 알림 */
.notification_wrap {display: flex; flex-direction: column;}
.notification_wrap .list{display: flex; padding: var(--ref-spacing-250, 20px) var(--container-side, 16px); flex-direction: column; gap: var(--spacing-vertical-sm, 8px); border-bottom: 1px solid var(--border-frame-light, #E6E6E6);}
.notification_wrap .list .date{color: var(--text-disabled, #999); font: var(--sys-font-body-5);}
.notification_wrap .list .strong{font: var(--sys-font-subtitle-3);}
.notification_wrap .contents{display: flex; padding: 0px var(--container-side, 16px) var(--ref-spacing-250, 20px) var(--container-side, 16px); color: var(--text-subdued, #595959); font: var(--sys-font-body-5);}