body {
    margin: auto;
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    background: center 58px / min(1080px, 100%) no-repeat fixed;
    /* #f1f3f5 */
    user-select: none;
    touch-action: manipulation;
}

:root {
	--close: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17 17L3 3M17 3L3 17" stroke="%23666" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round"></path></svg>');
}

.wrap {
    width: 100%;
    height: 50px;
    max-width: 768px;
    padding: 0 10px;
    margin: 0 auto;
}

header {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    font-size: 12px;
    z-index: 100;
    flex-direction: column;
}

header > div:first-child {
    background: #D33023;
    padding: 5px 0;
}

.search {
    background: rgb(54 55 58 / 5%) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path stroke="%23222" fill="none" stroke-linecap="round" stroke-width="2.5" d="M11 16c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5Zm7.59 2.59-4.06-4.06"/></svg>') no-repeat 4px center;
    border-radius: 10px;
    padding-left: 30px;
    margin: 10px 0;
}

button.getLocation {
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path d="M11.647 17.111v3.036m0-17v3.036m-5.464 5.464H3.147m17 0h-3.036M11.647 17.147a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Z" stroke="%23222" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round"/><path d="M11.647 14.147a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" fill="%23222"/></svg>') no-repeat center;
    height: 33px;
    min-width: 33px;
}
.star {
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3.1 11.3l3.6 3.3-1 4.6c-.1.6.1 1.2.6 1.5.2.2.5.3.8.3.2 0 .4 0 .6-.1 0 0 .1 0 .1-.1l4.1-2.3 4.1 2.3s.1 0 .1.1c.5.2 1.1.2 1.5-.1.5-.3.7-.9.6-1.5l-1-4.6c.4-.3 1-.9 1.6-1.5l1.9-1.7.1-.1c.4-.4.5-1 .3-1.5s-.6-.9-1.2-1h-.1l-4.7-.5-1.9-4.3s0-.1-.1-.1c-.1-.7-.6-1-1.1-1-.5 0-1 .3-1.3.8 0 0 0 .1-.1.1l-1.9 4.3-4.7.5h-.1c-.5.1-1 .5-1.2 1-.1.6 0 1.2.4 1.6z" fill="%23f7c942"></path></svg>') no-repeat;
	padding-left: 17px;
}
.soldout {
    pointer-events: none;
}
.soldout > * {
    opacity: 50%
}
.soldout:after {
    content: 'SOLDOUT';
    position:absolute;
    display: flex;
    align-items: center;
    background: rgb(255 255 255 / 70%);
    justify-content: center;
    right: 10px;
    border-radius: 10px;
    padding: 0 5px;
}
.food.soldout:after {width: 96px;height: 96px;}

a.close > * {
	opacity: 50%;
}
a.close:after {
    content: 'CLOSE';
    position:absolute;
    display: flex;
    align-items: center;
    background: rgb(255 255 255 / 70%);
    justify-content: center;
    border-radius: 5px;
    padding: 0 5px;
	width: 96px;
	height: 96px;
}
button {
    cursor: pointer;
}
:is(button, [type="button"], [type="image"], [type="submit"]):hover {
    background-color: rgb(230 230 236 / 50%); /* rgb(230 230 230 / 50%) !important; */
    transition: background-color .3s, scale .3s;
}
:is(button, [type="button"], [type="image"], [type="submit"]):active {
    transition: background-color .3s !important;
    scale: calc((var(--size) - 4) / var(--size));
}

label:has([type=search]) {
	background: rgb(255 255 255 / 30%);
    width: calc(100% + 10px);
    display: flex;
    margin: 0 -5px;
    align-items: center;
}

header > div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    position: relative;
}

header em {
    display: inline-flex;
    gap: 5px;
}

header button {
    border-radius: 50%;
    --size: 33;
}


span.profile {
    font-weight: bold;
    inset: 10px auto auto 10px;
}
span.profile img {border-radius: 50%;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
}

span.profile img:not([src]) {
    content: url(https://static.line-scdn.net/line_web_login/196d1b21b1a/dist/image/default@2x.png);
    width: 30px;
}

main > h1 {
	font-size: 26px;
	font-weight: 800;
}
h1 {
    font-size: 22px;
    line-height: 1.4;
    padding: 20px 0;
    width: 100%;
}

h2 {
    width: 100%;
    margin-top: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
h2 em {
	color: #00482f;
	background: #d9fcde;
	border-radius: 10px;
	line-height: 20px;
	padding: 0 7px;
}

main.wrap {
    position: relative;
    background: #fff;
    flex: 1;
    border-radius: 20px 20px 0 0;
    /* padding-top: 20px; */
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    align-content: flex-start;
}
main button {
    background: #f5f5f5;
    border-radius: 20px;
    padding: 20px 5px;
    /* font-weight: bold; */
    flex: 1;
    --size: 60;
}

main section, main > label {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 5px;
    line-height: 1.2;
    margin: 0 -10px -5px;
    --size: 320;
    overflow: hidden;
    width: calc(100% + 20px);
    animation: opacity .3s;
}
section[id] {
    margin-top: -90px;
    padding-top: 120px;
}

main label:has([name=onAddress]) {
    align-items: center;
    flex: 1;
    border-radius: 18px 18px 0 0;
    justify-content: center;
    gap: 5px;
    line-height: 1.4;
    height: 44px;
    /* border: 2px solid #f1f3f5; */
    border-bottom: 0;
}

main label [type=radio][name=onAddress] {
	/* position: absolute; */
	border: 1px solid #ffffff;
	background: #fff;
	height: 26px;
	width: 26px;
	/* inset: auto 7px auto; */
}
main label:has([name=onAddress]:checked) {
	background: #fff !important;
}
main label [name=onAddress]:checked {
	border: 1px solid transparent;
	background: #0ab356;
	color: #fff;
}

form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

form input {
    height: 50px;
}

form [type=submit] {
    background: #0AB356 !important;
    color: #fff;
    font-weight: bold;
}

.album button {
	background: none !important;
	padding: 0;
	font-size: 0;
	border-radius: 0;
	line-height: 1;
}

[type=button].addressList {
    background: #0AB356;
    color: #fff;
    font-weight: bold;
    border-radius: 5px;
    line-height: 30px;
    padding: 0 5px;
    margin-right: 5px;
    min-width: auto;
}

button.edit {
    position: absolute;
    background: url(/img/edit.svg) no-repeat center center !important;
    width: 40px;
    inset: 0 0 0 auto;
    opacity: 50%;
}

button.edit:hover {
    opacity: 100%;
}



nav {
    position: sticky;
    top: 65px;
    background: rgb(233 233 236 / 70%);
    padding: 5px !important;
    overflow: hidden;
    border-radius: 18px;
    --focusColor: transparent;
    width: 100%;
    backdrop-filter: blur(10px);
    overflow-x: scroll;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 5px;
    scrollbar-width: none;
}
nav > a {
	flex: none;
	padding: 5px 10px;
	font-weight: bold;
}

nav > a {
    background: #fff;
    border-radius: 14px;
}
nav > ul {
	line-height: 38px;
	display: flex;
	position: relative;
	width: 100%;
	align-items: stretch;
}


nav ul:before {
	content: '';
	position: absolute;
	background: #fff;
	border-radius: 12px;
	height: 100%;
	width: 50%;
	transition: transform .3s;
}
nav ul:has(> :nth-child(3)):before {
	width: calc(100% / 3);
}
nav ul:has(> :nth-child(4)):before {
	width: calc(100% / 4);
}
nav ul:has(> :nth-child(2) [aria-pressed=true]):before {transform: translateX(calc(100%));}
nav ul:has(> :nth-child(3) [aria-pressed=true]):before {transform: translateX(calc(200%));}
nav ul:has(> :nth-child(4) [aria-pressed=true]):before {transform: translateX(calc(300%));}

nav ul li {
    padding: 10px 5px;
    position: relative;
    text-align: center;
    z-index: 1;
    flex: 1;
    color: #555;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;

}
nav ul li > * {
    width: 100%;
    text-transform: inherit;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
nav ul [aria-pressed=true] {
    font-weight: 600;
    color: #222;

}


ul.album {
  display: inline-flex;
  flex-wrap: wrap;
  width: calc(var(--count) * 290px + 10px);
  max-width: 100%;
  margin: auto;
}
ul.album > li {
	max-width: 290px;
	width: calc(100% / var(--count));
	padding: 1px;
}
main > ul.album > li:nth-child(3) {
	margin-right: calc(100% / var(--count) * 2)
}
ul.album a {
  position: relative;
  display: block;
  aspect-ratio: 1;
  /* border: 2px solid #f3f3f3; */
  border-radius: 10px;
  /* overflow: hidden; */
  text-align: center;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 12px;
  white-space: pre-line;
}

main > ul.album img {object-fit: contain;aspect-ratio: 300 / 200;padding:3px;}

section > a {
	display: flex;gap: 10px;padding: 10px 10px;
}

section h1 {
    padding: 10px 0;
}

main > section > a > img {
    width: 96px;
    height: 96px;
    border-radius: 5px;
    box-shadow: 0 0 2px #ddd;
    object-fit: cover;
}

dl {
    border-radius: 10px;
    padding: 10px 0;
    --dt: 120;
    line-height: 1.2;
    font-size: 16px;
    font-weight: 600;
}

button.food {
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    text-align: left;
    padding: 10px;
    margin: 0 -10px;
    gap: 10px;
    background: none;
    --size: 116;
    z-index: 1;
    min-height: 116px;
    max-height: max-content;
}
button.food strong {
    display: block;
    white-space: pre-wrap;
    word-break: break-all;
}
p {
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
}
button.food img,
article.blind > form section img  {
    width: 96px;
    height: 96px;
    object-fit: cover;
    background: #fff;
    border-radius: 10px;
}

article.blind > form {
    max-width: min(404px, 100% - 20px);
    max-height: calc(100% - 20px);
    background: #fff;
    z-index: 10;
    height: fit-content;
    overflow-y: overlay;
    border-radius: 20px;
    text-align: left;
    padding: 10px;
}
article.blind form :not(img) + h1 {
    padding: 20px 40px 20px 0;
}

article.blind form section {
    position: relative;
    display: flex;
    justify-content: space-between;
    line-height: 1.4;
    text-align: left;
    padding: 10px;
    margin-bottom: 10px;
    gap: 10px;
    background: #f1f3f5;
    border-radius: 10px;
    align-items: flex-end;
}

article.blind form section > div {display:flex;gap: 5px;flex-direction: column;min-height: 120px;justify-content: space-between;}

article.blind form section button.delete {
    position: absolute;
    background: #fff var(--close) center / contain no-repeat;
    width: 24px;
    height: 24px;
    border: 4px solid #fff;
    padding: 0;
    min-width: auto;
    inset: 8px 10px auto auto;
    --size: 24;
}

article h2 {
    margin-top: 0;
    padding: 30px 0 10px;
}

article form > p {
    background: #f1f3f5;
    border-radius: 10px;
    padding: 10px;
    margin: 20px 0;
}

.orderCount {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 0;
    gap: 5px;
}

.orderCount button {
    background: #0AB356 !important;
    color: #fff;
    width: 36px;
    min-width: auto;
    border-radius: 50%;
    --size: 36;
}

.orderCount > span {
    min-width: 50px;
    text-align: center;
}


section .orderCount {
    justify-content: flex-start;
}
fieldset label:has([type=checkbox], [type=radio]) {
    width: 100%;
    border-radius: 5px;
}
article fieldset label {
    display: flex;
    justify-content: space-between;
}
article fieldset label strong {
    font-weight: normal;
    flex: 1;
    word-break: break-word;
}
article.blind form button.close {
    position: fixed;
    background: rgb(229 229 229 / 70%) var(--close) center no-repeat;
    height: 33px;
    width: 33px;
    border-radius: 50%;
    --size: 33;
    z-index: 10;
    margin-left: calc(min(404px, 100% - 20px) - 53px);
}

fieldset label [type=checkbox],
fieldset label [type=radio] {
	height: 24px;
	width: 24px;
	margin: 10px;
	border-radius: 50%;
	background: rgb(0 0 0 / 5%);
	color: #fff;
}
fieldset label :checked {
	background: #0ab356;
}

footer {
    position: sticky;
    bottom: 0;
}
footer > button {
    background: #0ab356 !important;
    color: #fff;
    line-height: 50px;
    width: 100%;
    border-radius: 15px;
    font-weight: bold;
    --size: 50;
    padding: 0;
}

#translate {
    bottom: 20px;
    position: fixed;
    border-radius: 0;
    width: 184px;
    height: 56px;
    color: #fff;
    display: flex;
    font-size: 12px;
    font-weight: bold;
    --size: 184;
    padding: 0 70px 0 35px;
    z-index: 100;
    align-items: center;
    background: url(/img/translate.svg) center no-repeat;
    justify-content: center;
}
#translate img {position: absolute;right: 26px;}
#translate + ul {
	box-shadow: 0 5px 20px rgb(0 0 0 / 10%);
	background: #14a54c;
	overflow: hidden overlay !important;
	position: fixed;
	bottom: 80px;
	border-radius: 5px;
	animation: opacity .3s;
	z-index: 1000;
	width: 184px;
}
#translate + ul button {
    position: relative;
    color: #fff;
    background: none;
    line-height: 44px;
    padding: 0 70px 0 35px;
    text-align: left;
    width: 100%;
    display: flex;
    font-weight: bold;
    font-size: 12px;
    justify-content: center;
}
#translate + ul button img {position: absolute;vertical-align: middle;right: 26px;top: 0;bottom: 0;margin: auto;}
#cart {
    margin-left: calc(min(100%, 768px) - 70px);
    bottom: 20px;
    position: fixed;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    background: #2c8434 url('data:image/svg+xml,<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.4 14.4c-.999 0-1.8.801-1.8 1.8a1.8 1.8 0 1 0 1.8-1.8ZM0 0v1.8h1.8l3.24 6.831-1.224 2.205a1.834 1.834 0 0 0-.216.864 1.8 1.8 0 0 0 1.8 1.8h10.8v-1.8H5.778a.225.225 0 0 1-.225-.225c0-.045.009-.081.027-.108L6.39 9.9h6.705a1.81 1.81 0 0 0 1.575-.927l3.222-5.823c.063-.144.108-.297.108-.45a.9.9 0 0 0-.9-.9H3.789L2.943 0M5.4 14.4c-.999 0-1.8.801-1.8 1.8a1.8 1.8 0 1 0 1.8-1.8Z" fill="%23d8f2e4"/></svg>') center no-repeat;
    color: #fff;
    display: flex;
    justify-content: flex-end;
    font-size: 12px;
    --size: 46;
    padding: 0;
    border: 1px solid #d8f2e4;
    z-index: 100;
}

#cart:before {
    content: attr(data-amount);
    position: absolute;
    border-radius: 12px;
    line-height: 21px;
    background: #0ab356;
    color: #fff;
    padding: 0 3px;
    min-width: 21px;
    z-index: -1;
}

#map {
  height: calc(100vh - 550px);
  border-radius: 20px;
}


.marker {
	width: 20px;
	height: 24px;
	background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" viewBox="0 0 10 12" fill="none"><path d="M8.53546 1.45565C6.58288 -0.485217 3.41712 -0.485217 1.46454 1.45565C1.00095 1.91332 0.632572 2.46002 0.381066 3.06361C0.129561 3.66721 0 4.31552 0 4.97043C0 5.62535 0.129561 6.27366 0.381066 6.87725C0.632572 7.48085 1.00095 8.02755 1.46454 8.48522L4.99969 12L8.53546 8.48522C8.99905 8.02755 9.36743 7.48085 9.61894 6.87725C9.87044 6.27366 10 5.62535 10 4.97043C10 4.31552 9.87044 3.66721 9.61894 3.06361C9.36743 2.46002 8.99905 1.91332 8.53546 1.45565ZM4.99969 6.63151C4.58217 6.63151 4.19028 6.4673 3.89464 6.16919C3.60197 5.87281 3.43761 5.47123 3.43761 5.05254C3.43761 4.63385 3.60197 4.23227 3.89464 3.93589C4.18965 3.63778 4.58217 3.47357 4.99969 3.47357C5.41721 3.47357 5.80972 3.63778 6.10473 3.93589C6.3974 4.23227 6.56177 4.63385 6.56177 5.05254C6.56177 5.47123 6.3974 5.87281 6.10473 6.16919C5.80972 6.4673 5.41721 6.63151 4.99969 6.63151Z" fill="%230AB356"/></svg>') center / contain;
}

input[readonly] {
    background: 0;
}

div.addressList {
    display: flex;
    width: calc(100% + 20px);
    background: #f1f3f5;
    margin: 0 -10px;
    border-radius: 18px 18px 0 0;
    padding-top: 2px;
}

label [type=file] {
    position: absolute;
    opacity: 0;
}
label:has([type=file]) {
    line-height: 50px;
    text-align: center;
    background-color: rgb(54 55 58 / 5%);
    border-radius: 18px;
    cursor: pointer;
    --size: 50;
}

#addrPhoto {
    max-height: 300px;
    width: fit-content;
    margin: auto;
    border-radius: 18px;
}

#usePoint {
    background: #fede19;
    font-weight: bold;
    padding: 0;
    line-height: 50px;
}

* {word-break: keep-all;}

#jusoList {
    position: relative;
    width: 100%;
}

#jusoList > div {
    position: absolute;
    background: #fff;
    border-radius: 18px;
    width: 100%;
    overflow-y: scroll;
    max-height: 280px;
    box-shadow: 0 0 30px rgb(0 0 0 / 10%);
    padding: 5px;
    min-height: 200px;
}
#jusoList button {background: #fff;text-align: left;padding: 5px;border-radius: 13px;--size: inherit;max-height: 40px;max-height: fit-content;font-size: 15px;min-height: 50px;width: 100%;}
#jusoList button:hover {background: rgb(230 230 236 / 50%);}
#jusoList button > em {
    color: #555;
    padding-top: 5px;
    display: block;
    font-size: 13px;
}

.card{
  border-radius:12px;
  box-shadow: 0 8px 30px rgba(30,30,30,0.08);
  /* max-width:720px; */
  width:100%;
  padding:20px 22px;
  display:flex;
  gap:18px;
  align-items:flex-start;
}
.card .content{
  flex:1 1 auto;
}
.card p{
  color:#6b6b6b;
  line-height:1.55;
  font-size:14px;
}

@media (max-width:520px){
  .card{padding:16px;gap:12px}
  .card p{font-size:13px}
}

#reqGps.blind h1 {text-align: center;background: #000;color: #fff;position: fixed;}