:root {
	color-scheme: light;
	--canvas: #ffffff;
	--page: #f5f5f4;
	--cloud: #f2f2f1;
	--hairline: #e3e3e1;
	--ink: #222222;
	--ink-strong: #111111;
	--ink-soft: #3f3f3f;
	--ash: #6a6a6a;
	--accent: #e0204f;
	--accent-press: #c4173f;
	--accent-shadow: rgba(196, 23, 63, 0.3);
	--note: #9a4f00;
	--error: #c13515;
	--open: #17803d;
	--focus: #222222;
	--icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--radius-xs: 6px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-full: 999px;
	--shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.06);
	--font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
	--icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-10.5a6.5 6.5 0 0 1 13 0C18.5 15.4 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.5' r='2.3'/%3E%3C/svg%3E");
	--icon-utensils: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3v6a2 2 0 0 0 4 0V3'/%3E%3Cpath d='M8 11v10'/%3E%3Cpath d='M17 21V3c-2.2 1.6-3.2 4.2-3.2 7.2V13H17'/%3E%3C/svg%3E");
	--icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
	--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");
	--icon-locate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
	--icon-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 3v5h5'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 21v-5h-5'/%3E%3C/svg%3E");
	--icon-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E");
	--icon-star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 2.8 5.7 6.2.9-4.5 4.4 1.1 6.2L12 17.3l-5.6 2.9 1.1-6.2L3 9.6l6.2-.9z'/%3E%3C/svg%3E");
	--icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.4 18a2 2 0 0 0 1.7 3h15.8a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
}

* {
	box-sizing: border-box;
}

/* 결과가 나와 스크롤바가 생겨도 화면이 옆으로 밀리지 않게 그 자리를 미리 비워 둬요 */
html {
	scrollbar-gutter: stable;
}

[hidden] {
	display: none !important;
}

body {
	margin: 0;
	font-family: var(--font);
	font-weight: 500;
	color: var(--ink);
	background: var(--page);
	-webkit-font-smoothing: antialiased;
	word-break: keep-all;
	text-wrap: pretty;
}

.tabs {
	display: flex;
	justify-content: center;
	gap: 4px;
	padding: 16px 16px 0;
}

.tabs a {
	padding: 10px 14px;
	border-bottom: 2px solid transparent;
	color: var(--ash);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease-out;
}

@media (hover: hover) {
	.tabs a:hover {
		color: var(--ink);
	}
}

.tabs a.active {
	color: var(--ink);
	border-bottom-color: var(--ink);
}

.tabs a:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.container {
	max-width: 760px;
	margin: 0 auto;
	padding: 8px 16px 32px;
}

.headline {
	margin: 20px 0 24px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	text-align: center;
	text-wrap: balance;
}

.choices {
	min-width: 0;
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.choices legend {
	margin: 0 0 8px;
	padding: 0;
	color: var(--ash);
	font-size: 14px;
	font-weight: 700;
}

.options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.options input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.options span {
	display: block;
	padding: 9px 16px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-full);
	background: var(--canvas);
	color: var(--ink-soft);
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, transform 0.1s ease-out;
}

@media (hover: hover) {
	.options span:hover {
		border-color: var(--ink);
	}
}

.options span:active {
	transform: scale(0.97);
}

.options input:checked + span {
	border-color: var(--ink);
	background: var(--ink);
	color: var(--canvas);
}

.options input:focus-visible + span {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 꺼진 칩은 마우스를 올리거나 눌러도 모양이 바뀌지 않아요 */
.options input:disabled + span {
	border-color: var(--hairline);
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

.result-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 220px;
	margin: 8px 0 20px;
	padding: 28px 20px;
	border-radius: var(--radius-lg);
	background: var(--canvas);
	box-shadow: var(--shadow-card);
	text-align: center;
}

.placeholder {
	margin: 0;
	color: var(--ash);
	font-size: 15px;
}

.menu-label {
	margin: 0;
	color: var(--ash);
	font-size: 14px;
	font-weight: 700;
}

.menu-name {
	margin: 6px 0 4px;
	font-size: 44px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.03em;
}

/* 슬롯머신(사용자 10-30): 세 줄 높이 창에서 메뉴 이름 줄을 위로 올려 보내요. 위아래 줄은 흐리게 */
.slot {
	--slot-row: 56px;
	width: 100%;
	height: calc(var(--slot-row) * 3);
	margin-top: 10px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(transparent 6%, #000 36%, #000 64%, transparent 94%);
	mask-image: linear-gradient(transparent 6%, #000 36%, #000 64%, transparent 94%);
}

.slot-item {
	overflow: hidden;
	height: var(--slot-row);
	margin: 0;
	font-size: 36px;
	font-weight: 800;
	line-height: var(--slot-row);
	letter-spacing: -0.03em;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 같은 줄을 두 번 이어 붙여서, 절반까지 올리면 처음과 같은 모습이에요 */
.slot.is-idle .slot-reel {
	animation: slot-drift calc(var(--slot-count) * 1.6s) linear infinite;
}

@keyframes slot-drift {
	to {
		transform: translateY(-50%);
	}
}

.menu-tags {
	margin: 0 0 4px;
	color: var(--ash);
	font-size: 14px;
}

.menu-actions {
	display: grid;
	justify-items: center;
	margin: 0 0 12px;
}

.text-button {
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ash);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: color 0.15s ease-out;
}

@media (hover: hover) {
	.text-button:hover:not(:disabled) {
		color: var(--ink);
	}
}

a.text-button {
	display: inline-flex;
	align-items: center;
}

.text-button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* '알렸어요'처럼 꺼진 글자 버튼은 밑줄을 빼서 더 못 누른다는 걸 보여 줘요. 글자색은 읽을 수 있게 그대로 둬요 */
.text-button:disabled {
	text-decoration: none;
	cursor: default;
}

.skipped-note {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	color: var(--ash);
	font-size: 13px;
}

.skipped-menus {
	width: 100%;
	margin: 0 0 12px;
	color: var(--ash);
	font-size: 13px;
}

.skipped-menus summary {
	width: fit-content;
	min-height: 44px;
	margin: 0 auto;
	padding: 12px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
}

.skipped-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.skipped-list li {
	display: flex;
	align-items: center;
	max-width: 100%;
	padding-left: 12px;
	border-radius: var(--radius-full);
	background: var(--cloud);
	color: var(--ink-soft);
	font-size: 14px;
}

.skipped-menu-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.skipped-restore {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ash);
	cursor: pointer;
}

.skipped-restore::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-close) center / contain no-repeat;
	mask: var(--icon-close) center / contain no-repeat;
}

.skipped-menus summary:focus-visible,
.skipped-restore:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	.skipped-menus summary:hover,
	.skipped-restore:hover {
		color: var(--ink);
	}
}

.nearby {
	width: 100%;
}

/* 위치 칸 하나가 찾기 단추 노릇을 해요(메뉴 추천·공무원 맛집). 누르면 장소 검색 창이 열리고, 고르면 바로 찾아요. 왼쪽 돋보기로 누를 수 있는 칸인 걸 보여 줘요 */
.nearby-form {
	position: relative;
	width: min(100%, 300px);
	margin: 0 auto;
	color: var(--ash);
}

.nearby-form::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 14px;
	width: 17px;
	height: 17px;
	background: currentColor;
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: var(--icon-search) center / contain no-repeat;
	mask: var(--icon-search) center / contain no-repeat;
}

#nearbyPlace,
#officialPlace,
#pollPlace {
	width: 100%;
	height: 48px;
	padding: 0 48px 0 40px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	transition: border-color 0.15s ease-out, box-shadow 0.15s ease-out;
}

#nearbyPlace::placeholder,
#officialPlace::placeholder,
#pollPlace::placeholder,
.panel input::placeholder,
.table-search::placeholder {
	color: var(--ash);
	opacity: 1;
}

#nearbyPlace:focus,
#officialPlace:focus,
#pollPlace:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}

#nearbyPlace[readonly],
#officialPlace[readonly],
#pollPlace[readonly] {
	cursor: pointer;
}

.place-picker {
	width: min(560px, calc(100vw - 32px));
	max-width: 100vw;
	height: min(720px, calc(100dvh - 32px));
	max-height: 100dvh;
	margin: auto;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--canvas);
	color: var(--ink);
	font-family: var(--font);
	box-shadow: var(--shadow-card);
}

.place-picker[open] {
	display: flex;
	flex-direction: column;
}

.place-picker::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.place-picker-head {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-bottom: 1px solid var(--hairline);
}

.place-picker-form {
	display: flex;
	flex: 1;
	gap: 8px;
	min-width: 0;
}

.place-picker-form input {
	flex: 1;
	min-width: 0;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
}

.place-picker-form input:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}

.place-picker-form button,
.place-picker-close {
	flex: none;
	height: 44px;
	padding: 0 14px;
	border: 0;
	border-radius: var(--radius-md);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.place-picker-form button {
	background: var(--ink);
	color: var(--canvas);
}

.place-picker-close {
	background: var(--cloud);
	color: var(--ink);
}

.place-picker-map {
	flex: 0 0 240px;
	background: var(--cloud);
}

.place-picker-map[hidden],
.place-picker-message[hidden] {
	display: none;
}

.place-picker-message {
	margin: 0;
	padding: 20px 16px;
	color: var(--ash);
	font-size: 15px;
	line-height: 1.5;
}

.place-picker-results {
	flex: 1;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.place-picker-results button {
	display: grid;
	grid-template-columns: 24px 1fr;
	gap: 2px 10px;
	width: 100%;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--hairline);
	background: none;
	color: var(--ink);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.place-picker-results button:active {
	background: var(--cloud);
}

.place-picker-results strong {
	font-size: 16px;
}

.place-pick-number,
.place-pin {
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: var(--radius-full);
	background: var(--accent);
	color: var(--canvas);
	font-size: 13px;
	font-weight: 700;
}

.place-pick-number {
	grid-row: span 2;
}

.place-pick-address {
	grid-column: 2;
	color: var(--ash);
	font-size: 14px;
}

.place-pin {
	padding: 0;
	border: 2px solid var(--canvas);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	font-family: var(--font);
	cursor: pointer;
}

@media (max-width: 600px) {
	.place-picker {
		width: 100vw;
		height: 100dvh;
		border-radius: 0;
	}
}

/* 현재 위치 단추: 위치 칸 안쪽 오른쪽 끝의 아이콘. 누르면 지금 있는 곳으로 바로 추천해요 */
.nearby-locate {
	position: absolute;
	top: 1px;
	right: 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	border-radius: 0 calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}

.nearby-locate::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--icon-locate) center / contain no-repeat;
	mask: var(--icon-locate) center / contain no-repeat;
}

@media (hover: hover) {
	.nearby-locate:hover:not(:disabled) {
		background: var(--cloud);
	}
}

.nearby-locate:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 0;
}

.nearby-locate:disabled {
	color: var(--ash);
	cursor: wait;
}

.restaurant-label::before,
.restaurant-walk::before {
	content: "";
	flex: none;
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* 추천 기준 칩(평점·거리): '추천 기준' 이름표 바로 옆에 작은 칩 두 개를 한 줄로 둬요.
   좁은 화면에서 필터 칩이 폭을 나눠 갖는 규칙(.options label)이 여기서는 칩을 늘리지 않게 덮어써요 */
.nearby-order {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 12px 0 0;
}

.nearby-order[hidden] {
	display: none;
}

.nearby-order-label {
	color: var(--ash);
	font-size: 13px;
	font-weight: 700;
}

.nearby-order .options {
	flex-wrap: nowrap;
	gap: 6px;
}

.nearby-order .options label {
	flex: none;
}

.nearby-order .options span {
	padding: 5px 12px;
	font-size: 13px;
}

/* 밥·면 칩: 식사일 때만 나라 아래에 이름표와 작은 칩을 한 줄로 둬요(추천 기준 칩과 같은 크기).
   legend 를 왼쪽에 띄우면 fieldset 의 특별한 자리에서 빠져 칩 옆에 놓여요(사파리는 flex 로는 옆에 안 놓여요).
   위아래 여백은 칩 테두리+안쪽 여백과 같게 해서 글자 줄을 맞춰요 */
.staple-choice {
	margin-top: -4px;
}

.staple-choice legend {
	float: left;
	margin: 0 8px 0 0;
	padding: 6px 0;
	font-size: 13px;
}

.staple-choice .options {
	flex-wrap: nowrap;
	gap: 6px;
}

.staple-choice .options label {
	flex: none;
}

.staple-choice .options span {
	padding: 5px 12px;
	font-size: 13px;
}

#nearbyResult {
	max-width: 560px;
	margin: 12px auto 0;
	font-size: 14px;
}

#nearbyResult a {
	color: var(--ink);
	font-weight: 600;
	text-decoration: none;
}

.nearby-note {
	margin: 12px 0 0;
	color: var(--note);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	text-wrap: balance;
}

.restaurant-card {
	margin: 12px 0 0;
	padding: 18px;
	border-radius: var(--radius-md);
	background: var(--cloud);
	text-align: left;
}

.restaurant-label {
	--icon: var(--icon-utensils);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--ash);
	font-size: 13px;
	font-weight: 700;
}

.restaurant-label::before {
	width: 15px;
	height: 15px;
}

.restaurant-name {
	margin: 6px 0 4px;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.02em;
}

/* 추천 상자 맨 위 줄: 가게 이름·즐겨찾기 별 왼쪽, '다른 가게' 단추 오른쪽 */
.restaurant-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.restaurant-head .restaurant-name {
	min-width: 0;
}

.another-button {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 4px;
	height: 36px;
	margin-top: 2px;
	padding: 0 12px;
	/* 흰 바탕 위에서 1px 연회색은 거의 안 보여서 먹색 2px */
	border: 2px solid var(--ink);
	border-radius: var(--radius-full);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

.another-button::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: var(--icon-refresh) center / contain no-repeat;
	mask: var(--icon-refresh) center / contain no-repeat;
}

@media (hover: hover) {
	.another-button:hover:not(:disabled) {
		background: var(--cloud);
	}
}

.another-button:disabled {
	border-color: var(--ash);
	color: var(--ash);
	cursor: wait;
}

.another-button:focus-visible,
.favorite-button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 즐겨찾기 별: 가게 이름 바로 뒤. 넣으면 채운 별 */
.favorite-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: 2px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: transparent;
	color: var(--ash);
	/* 가게 이름 글자의 세로 가운데에 맞춰요 */
	vertical-align: middle;
	margin-top: -3px;
	cursor: pointer;
}

.favorite-button::before {
	content: "";
	width: 20px;
	height: 20px;
	background: currentColor;
	-webkit-mask: var(--icon-star) center / contain no-repeat;
	mask: var(--icon-star) center / contain no-repeat;
}

.favorite-button[aria-pressed="true"] {
	color: var(--accent);
}

.favorite-button[aria-pressed="true"]::before {
	-webkit-mask-image: var(--icon-star-filled);
	mask-image: var(--icon-star-filled);
}

.others .favorite-button {
	width: 28px;
	height: 28px;
	margin-top: -2px;
}

.others .favorite-button::before {
	width: 16px;
	height: 16px;
}

/* 영업 상태: 추천 상자 평점 줄 끝 '영업 중'(초록)·'영업 종료'·'폐업'(빨강), 목록에는 닫은 것만 */
.open-status {
	color: var(--open);
}

.open-status.closed,
.open-tag {
	color: var(--error);
}

.open-tag {
	margin-left: 6px;
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
}

.login-dialog-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border-radius: var(--radius-sm);
	background: var(--ink);
	color: var(--canvas);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.login-dialog-link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.place-name-link {
	color: inherit;
	text-decoration: none;
}

@media (hover: hover) {
	.place-name-link:hover {
		text-decoration: underline;
	}
}

.place-name-link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.restaurant-walk {
	--icon: var(--icon-clock);
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
}

/* 구글 평점·리뷰 수: 가게 이름 옆에 이름보다 작게. 줄이 모자라면 통째로 다음 줄로 내려가요 */
.restaurant-name .restaurant-rating {
	display: inline-block;
	margin-left: 4px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	vertical-align: 2px;
}

.restaurant-info {
	margin: 0 0 4px;
	color: var(--ash);
	font-size: 13px;
}

/* 추천 상자의 오늘 영업시간 줄 */
.restaurant-hours {
	margin: 0 0 4px;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}

.restaurant-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

#nearbyResult .restaurant-links a,
#nearbyResult .restaurant-links button {
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
	#nearbyResult .restaurant-links a:hover,
	#nearbyResult .restaurant-links button:hover:not(:disabled) {
		border-color: var(--ink);
	}
}

/* '알렸어요'로 꺼진 버튼은 현재 위치 버튼이 꺼졌을 때처럼 글자만 보조색으로 바꿔요 */
#nearbyResult .restaurant-links button:disabled {
	color: var(--ash);
	cursor: default;
}

.others {
	margin-top: 20px;
	text-align: left;
}

.others-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0 0 6px;
	font-size: 15px;
	font-weight: 800;
}

.others ol {
	margin: 0;
	padding-left: 22px;
}

.others li {
	padding: 10px 0;
	border-bottom: 1px solid var(--hairline);
}

.others li:last-child {
	border-bottom: 0;
}

.others li::marker {
	color: var(--ash);
	font-size: 13px;
	font-weight: 600;
}

.others li::after {
	content: "";
	display: block;
	clear: both;
}

#nearbyResult .others a {
	font-size: 15px;
	font-weight: 700;
}

@media (hover: hover) {
	#nearbyResult .others a:hover {
		text-decoration: underline;
	}
}

.menu-tag {
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: var(--radius-xs);
	background: var(--cloud);
	color: var(--ash);
	font-size: 12px;
	font-style: normal;
	font-weight: 600;
}

/* 구글 평점: 다른 가까운 곳 목록에서 가게 이름 뒤에 붙어요. 평점이 없거나 리뷰가 적으면 '★ -' */
.rating-tag {
	margin-left: 6px;
	color: var(--ash);
	font-size: 12px;
	font-style: normal;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 공무원 단골 배지: 추천 식당 상자 안과 다른 가까운 곳 목록에 붙어요 */
#nearbyResult .official-badge {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 8px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-xs);
	background: var(--canvas);
	color: var(--ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	text-decoration: none;
}

#nearbyResult .others .official-badge {
	margin: 0 0 0 6px;
	font-size: 12px;
}

#nearbyResult .others span {
	float: right;
	color: var(--ash);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

/* 경고(⚠) 단추: 글자가 없을 때만 삼각형을 그리고 40px 정사각형이에요. '알렸어요'처럼 글자가 들어가면 글자 단추로 돌아가요 */
.report-button {
	display: inline-flex;
	align-items: center;
}

#nearbyResult .report-button:empty {
	justify-content: center;
	width: 40px;
	padding: 0;
}

.report-button:empty::before {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	-webkit-mask: var(--icon-alert) center / contain no-repeat;
	mask: var(--icon-alert) center / contain no-repeat;
}

/* 목록 제목줄 오른쪽 끝의 경고 단추 하나. 40px 터치 높이가 제목줄을 키우지 않게 위아래를 음수 여백으로 넣고,
   아이콘은 상자 오른쪽에 붙여 아래 도보 시간과 오른쪽 끝을 맞춰요 */
#nearbyResult .others-title .report-button {
	flex: none;
	margin: -10px 0;
	padding-right: 0;
}

#nearbyResult .others-title .report-button:empty {
	justify-content: flex-end;
}

/* 사유 고르는 창. 바깥을 눌렀는지 가리려고 안쪽 여백은 form 에 줘요 */
.report-dialog {
	width: min(320px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--canvas);
	color: var(--ink);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.report-dialog::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

/* 가게가 30곳이면 창이 화면보다 길어져서, 목록만 스크롤하고 제목과 '취소'는 남겨요 */
.report-dialog form {
	display: flex;
	flex-direction: column;
	max-height: calc(100dvh - 48px);
	padding: 20px 20px 12px;
	box-sizing: border-box;
}

.report-dialog-title {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 800;
	text-align: center;
	overflow-wrap: anywhere;
}

/* 창을 열 때 초점만 받는 제목이라 테두리를 그리지 않아요. Tab 을 누르면 사유 단추로 가요 */
.report-dialog-title:focus {
	outline: none;
}

.report-reasons {
	display: grid;
	gap: 8px;
	min-height: 0;
	overflow-y: auto;
}

.report-reasons button {
	height: 44px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
	.report-reasons button:hover {
		border-color: var(--ink);
	}
}

.report-reasons button:disabled {
	color: var(--ash);
	cursor: default;
}

.report-reasons button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.report-dialog .text-button {
	display: block;
	margin: 8px auto 0;
}

.nearby-footer {
	margin: 16px 0 0;
	color: var(--ash);
	font-size: 12px;
	line-height: 1.6;
}

#nearbyResult .nearby-footer > span {
	display: inline-block;
}

#nearbyResult .nearby-footer a {
	color: var(--ash);
	font-weight: 500;
	text-decoration: underline;
}

.nearby-message {
	color: var(--error);
	font-weight: 600;
	line-height: 1.5;
	text-wrap: balance;
}

/* '친구랑 같이 정하기': 결과 상자 맨 아래의 작은 알약 단추(글자 폭만큼, 40px). 지금 메뉴·위치·추천 식당을 담아 넘겨요.
   메뉴를 보여 줄 때만 보이고, 추천 전 슬롯·가게/메뉴 검색 목록·안내문일 때는 숨겨요. 추천 없이 가려면 위 탭의 '같이 정하기'를 써요.
   누르는 곳은 투명한 ::after 로 위아래 4px씩 넓혀 48px(사용자 11-04 '단추가 쓸데없이 커') */
.poll-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	margin: 16px auto 0;
	padding: 0 18px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-full);
	background: var(--canvas);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease-out;
}

.poll-link::after {
	content: "";
	position: absolute;
	inset: -4px 0;
}

@media (hover: hover) {
	.poll-link:hover {
		border-color: var(--ink);
	}
}

.poll-link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.primary {
	display: block;
	width: 180px;
	height: 50px;
	margin: 0 auto;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--accent);
	color: var(--canvas);
	font: inherit;
	font-size: 17px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease-out, transform 0.1s ease-out;
}

@media (hover: hover) {
	.primary:hover {
		background: var(--accent-press);
	}
}

.primary:active {
	transform: scale(0.97);
}

.primary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
}

.primary:disabled {
	background: var(--ash);
	cursor: wait;
}

/* 결과가 길어도 맨 아래까지 내리지 않고 바로 누를 수 있게 화면 아래에 붙여 둬요 */
.main-actions {
	position: sticky;
	bottom: 16px;
	z-index: 10;
	display: flex;
	gap: 8px;
	width: min(100%, 420px);
	margin: 0 auto;
}

#recommend {
	flex: 1;
	min-width: 0;
	width: auto;
	height: 56px;
	margin: 0;
	padding: 0 8px;
	white-space: nowrap;
	box-shadow: 0 8px 20px var(--accent-shadow);
}

/* 메뉴·가게 검색 칸: 평소에는 단추처럼 작은 알약이고, 누르면 '추천받기'와 다른 칸을 가리고 줄 전체로 넓어져요.
   두 칸과 '다시 추천받기'가 휴대폰 한 줄에 들어가게 칸은 108px, 글자는 15px이에요 */
.store-search {
	position: relative;
	flex: none;
	width: 108px;
	color: var(--ink);
}

.store-search::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 13px;
	width: 16px;
	height: 16px;
	background: currentColor;
	transform: translateY(-50%);
	pointer-events: none;
	-webkit-mask: var(--icon-search) center / contain no-repeat;
	mask: var(--icon-search) center / contain no-repeat;
}

.store-search input {
	width: 100%;
	height: 56px;
	padding: 0 10px 0 35px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-full);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	text-overflow: ellipsis;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

.store-search input::placeholder {
	color: var(--ink);
	opacity: 1;
}

.store-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

@media (hover: hover) {
	.store-search input:hover:not(:disabled) {
		border-color: var(--ink);
	}
}

.store-search input:focus {
	border-color: var(--ink);
	outline: none;
	font-weight: 500;
	cursor: text;
}

.store-search input:focus::placeholder {
	color: var(--ash);
}

.store-search input:disabled {
	box-shadow: none;
	cursor: wait;
}

.store-search:has(input:disabled),
.store-search input:disabled::placeholder {
	color: var(--ash);
}

/* 검색 칸에 글자를 치는 동안만 넓혀요. 크롬은 '추천받기'를 누르면 그 단추에 초점을 주어서,
   줄 전체의 :focus-within 으로 가리면 누른 '추천받기'가 사라져요 */
.main-actions:has(.store-search input:focus) #recommend,
.main-actions:has(.store-search input:focus) .store-search:not(:focus-within) {
	display: none;
}

.main-actions .store-search:focus-within {
	flex: 1;
}

/* 휴대폰에서는 '다시 추천받기'를 한 줄 전체로 두고, 메뉴 검색·가게 검색 칸을 그 아래 줄에 반씩 나눠 둬요.
   아래 줄은 44px로 낮춰서 화면 아래에 붙은 두 줄이 결과를 너무 가리지 않게 해요 */
@media (max-width: 480px) {
	.main-actions {
		flex-wrap: wrap;
	}

	#recommend {
		flex: 1 0 100%;
	}

	.store-search {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.store-search input {
		height: 44px;
	}
}

#recommend:disabled {
	box-shadow: none;
}

.secondary {
	height: 50px;
	padding: 0 24px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-full);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
	.secondary:hover {
		border-color: var(--ink);
	}
}

.secondary:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.small {
	padding: 4px 10px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease-out;
}

@media (hover: hover) {
	.small:hover {
		border-color: var(--ink);
	}
}

.small:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.small.danger {
	color: var(--error);
}

@media (hover: hover) {
	.small.danger:hover {
		border-color: var(--error);
	}
}

.note {
	color: var(--ash);
	font-size: 13px;
	text-align: center;
}

/* 관리자 화면은 제목 줄이 없어서, 추천 화면 제목과 같은 높이(탭 아래 28px)에서 시작해요 */
.admin-page {
	padding-top: 28px;
}

.panel {
	display: grid;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto 24px;
	padding: 20px;
	border-radius: var(--radius-lg);
	background: var(--canvas);
	box-shadow: var(--shadow-card);
}

.panel h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.panel label {
	display: grid;
	gap: 6px;
	font-size: 14px;
	font-weight: 700;
	text-wrap: balance;
}

/* 관리자 메뉴 폼의 종류 고르기: 식사·간식·술을 여러 개 고를 수 있어요 */
.kind-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	font-weight: 700;
}

.kind-checks legend {
	width: 100%;
	margin-bottom: 6px;
	padding: 0;
}

.panel .kind-checks label {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.kind-checks input {
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--ink);
}

.panel input[type="text"],
.panel input[type="email"],
.panel input[type="password"],
.panel input[type="search"],
.panel select {
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
}

.panel input[type="text"]:focus,
.panel input[type="email"]:focus,
.panel input[type="password"]:focus,
.panel input[type="search"]:focus,
.panel select:focus,
.table-search:focus {
	outline: none;
	border-color: var(--ink);
	box-shadow: 0 0 0 1px var(--ink);
}

.form-actions {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.form-actions .primary {
	margin: 0;
}

.message {
	min-height: 1em;
	margin: 0;
	font-size: 14px;
	text-align: center;
	text-wrap: balance;
}

.message.error {
	color: var(--error);
}

/* 로그인 카드는 메시지가 없을 때 빈 줄을 두지 않아요. 메뉴 폼은 저장 안내가 떠도 폼이 움직이지 않게 자리를 남겨 둬요 */
#loginMessage:empty {
	display: none;
}

/* 로그인 정보 줄은 바로 아래 폼 카드와 좌우 끝을 맞춰요 */
.manager-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
	max-width: 480px;
	margin: 0 auto 12px;
	font-size: 14px;
}

.panel-help {
	margin: 0;
	color: var(--ash);
	font-size: 13px;
	text-wrap: balance;
}

/* 가게 숨기기 카드는 빈 목록과 빈 안내 줄이 간격만 차지하지 않게 숨겨요 */
#hideMessage:empty,
#reportMessage:empty,
.place-list:empty {
	display: none;
}

.panel-subtitle {
	margin: 4px 0 0;
	font-size: 15px;
	font-weight: 800;
}

/* 미리보기 글이 나타나도 저장 버튼이 밀리지 않게 한 줄 자리를 남겨 둬요 */
.terms-preview {
	min-height: 1lh;
	margin: 0;
	color: var(--ash);
	font-size: 13px;
}

.search-row {
	display: flex;
	gap: 8px;
}

.search-row input {
	flex: 1;
	min-width: 0;
}

.search-row .secondary {
	height: 44px;
	padding: 0 18px;
}

.place-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.place-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--hairline);
}

.place-list li:last-child {
	border-bottom: 0;
}

.place-name {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
}

.place-address,
.place-meta {
	margin: 2px 0 0;
	color: var(--ash);
	font-size: 12px;
}

/* 알림 한 줄에는 버튼이 둘('숨기기'·'지우기')이라 줄이 좁아도 세로로 쌓이지 않게 묶어요 */
.place-actions {
	display: flex;
	flex: none;
	gap: 6px;
}

.place-state {
	flex: none;
	margin: 0;
	color: var(--ash);
	font-size: 13px;
}

.table-search {
	width: 100%;
	height: 44px;
	margin: 0 0 12px;
	padding: 0 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
}

/* 찾기 칸 끝의 브라우저 기본 지우기(×) 표시는 파란색이라 디자인 색과 맞지 않아서 숨겨요 */
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.list-title {
	font-size: 18px;
	font-weight: 800;
}

.table-wrap {
	overflow-x: auto;
	border-radius: var(--radius-md);
	background: var(--canvas);
	box-shadow: var(--shadow-card);
}

/* 칸 폭을 정해 두어서, 메뉴를 찾아 줄이 줄어도 칸과 버튼이 움직이지 않아요. 남는 폭은 제외어 칸이 가져요.
   휴대폰에서는 표가 600px보다 좁아지지 않고 옆으로 밀어서 봐요 */
.menu-table {
	width: 100%;
	min-width: 600px;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 14px;
}

.menu-table th:nth-child(1) {
	width: 84px;
}

.menu-table th:nth-child(2) {
	width: 36px;
}

.menu-table th:nth-child(3) {
	width: 52px;
}

.menu-table th:nth-child(4) {
	width: 35%;
}

.menu-table th:nth-child(6) {
	width: 104px;
}

.menu-table th,
.menu-table td {
	padding: 8px 4px;
	border-bottom: 1px solid var(--hairline);
	text-align: left;
	white-space: nowrap;
}

.menu-table th {
	color: var(--ash);
	font-size: 13px;
}

.menu-table td.terms {
	color: var(--ash);
	font-size: 13px;
	white-space: normal;
}

/* 긴 메뉴 이름은 칸 안에서 줄을 바꿔요 */
.menu-table td:nth-child(1) {
	white-space: normal;
	overflow-wrap: anywhere;
}

.menu-table td:nth-child(6) {
	text-align: right;
}

.menu-table td.empty {
	padding: 16px 4px;
	color: var(--ash);
	text-align: center;
}

@media (max-width: 480px) {
	.headline {
		font-size: 21px;
	}

	.options {
		gap: 6px;
	}

	.options label {
		flex: 1 0 auto;
	}

	/* 좌우 여백은 최소값이고 남는 폭은 칩끼리 나눠 가져서, 320px 화면에서도 한 줄에 들어가요 */
	.options span {
		padding: 11px 4px;
		font-size: 14px;
		text-align: center;
	}

	.menu-name {
		font-size: 36px;
	}

	.slot {
		--slot-row: 48px;
	}

	.slot-item {
		font-size: 30px;
	}

	.result-box {
		padding: 24px 16px;
	}

	#nearbyResult .restaurant-links a,
	#nearbyResult .restaurant-links button {
		padding: 0 10px;
	}

	#nearbyResult .others span {
		float: none;
		display: block;
		margin-top: 2px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.options span:active,
	.primary:active {
		transform: none;
	}

	.slot.is-idle .slot-reel {
		animation: none;
	}
}

#nearbyResult a:focus-visible,
#nearbyResult .restaurant-links button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

/* 내 계정: 로그인·회원가입 바꾸기 탭, 즐겨찾기·최근 본 가게 목록 */
.auth-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 4px;
	border-radius: var(--radius-sm);
	background: var(--cloud);
}

.auth-switch button {
	height: 40px;
	border: 0;
	border-radius: var(--radius-xs);
	background: transparent;
	color: var(--ash);
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.auth-switch button[aria-selected="true"] {
	background: var(--canvas);
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.auth-switch button:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

.auth-form {
	display: grid;
	gap: 12px;
}

.auth-form[hidden] {
	display: none;
}

#loginMessage:empty,
#signupMessage:empty {
	display: none;
}

.member-actions {
	display: flex;
	flex: none;
	gap: 6px;
}

a.small {
	color: var(--ink);
	text-decoration: none;
}

.panel-count {
	color: var(--ash);
	font-size: 14px;
	font-weight: 600;
}

.account-page .place-name {
	color: var(--ink);
	text-decoration: none;
}

/* 기본으로 뺄 메뉴 고르기: 메뉴 고르는 칸과 '넣기' 단추 한 줄 */
.exclude-form {
	display: flex;
	gap: 8px;
	margin: 0 0 10px;
}

.exclude-form select {
	flex: 1;
	min-width: 0;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-md);
	background: var(--canvas);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}

@media (hover: hover) {
	.account-page .place-name:hover {
		text-decoration: underline;
	}
}

.account-delete {
	margin: 0;
	text-align: center;
}

/* 공무원 맛집 */
.official-tab-link {
	white-space: nowrap;
}

.official-page {
	padding-bottom: 32px;
}

.official-header .headline {
	margin-bottom: 8px;
}

.official-intro {
	max-width: 560px;
	margin: 0 auto 24px;
	color: var(--ash);
	font-size: 14px;
	line-height: 1.6;
	text-align: center;
	text-wrap: balance;
}

.official-source-link {
	display: inline-block;
	color: var(--ash);
	font-weight: 600;
	text-underline-offset: 3px;
}

.official-search,
.official-results {
	border-radius: var(--radius-lg);
	background: var(--canvas);
	box-shadow: var(--shadow-card);
}

.official-search {
	display: grid;
	gap: 8px;
	margin-bottom: 20px;
	padding: 20px;
}

.official-search > label {
	font-size: 14px;
	font-weight: 700;
}

/* 메뉴 추천의 위치 칸(.nearby-form)을 그대로 쓰고, 카드 폭에 맞춰 넓혀요.
   메뉴 추천도 공무원 맛집처럼 위치 칸을 결과 밖 조건 칩 아래에 둘러요(사용자 10-30) */
.official-search .nearby-form,
.place-choice .nearby-form {
	width: 100%;
}

.place-note {
	margin: 6px 0 0;
	color: var(--error);
	font-size: 13px;
}

.official-source-link:focus-visible,
.official-map-link:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 2px;
}

@media (hover: hover) {
	.official-links a:hover {
		border-color: var(--ink);
	}
}

.official-results {
	padding: 20px;
}

.official-filter {
	margin: 4px 0 0;
}

.official-filter legend {
	margin-bottom: 6px;
	font-size: 13px;
}

.official-order {
	margin: 12px 0 0;
}

.official-results-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.official-results h2 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}

.official-results .text-button {
	flex: none;
}

.official-status {
	margin: 8px 0 0;
	color: var(--ash);
	font-size: 13px;
	line-height: 1.5;
	text-wrap: balance;
}

.official-status[data-state="error"] {
	color: var(--error);
}

.official-status[data-state="note"] {
	color: var(--note);
	font-weight: 600;
}

.official-list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.official-pick {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--hairline);
}

.official-pick:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.official-rank {
	color: var(--ash);
	font-size: 13px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 22px;
}

.official-pick-heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.official-pick h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.official-address {
	margin: 4px 0 0;
	color: var(--ash);
	font-size: 13px;
	line-height: 1.5;
}

.official-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.official-chip {
	padding: 2px 8px;
	border-radius: var(--radius-xs);
	background: var(--cloud);
	color: var(--ash);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
}

.official-category {
	color: var(--ink-soft);
}

.official-distance {
	color: var(--ink);
	font-weight: 700;
}

.official-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.official-map-link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border: 1px solid var(--hairline);
	border-radius: var(--radius-sm);
	background: var(--canvas);
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease-out;
}

@media (max-width: 480px) {
	.tabs {
		gap: 0;
		padding-right: 8px;
		padding-left: 8px;
	}

	.official-tab-link {
		padding-right: 10px;
		padding-left: 10px;
		font-size: 14px;
	}

	.official-search,
	.official-results {
		padding: 16px;
	}

	.official-pick {
		grid-template-columns: 24px minmax(0, 1fr);
		gap: 6px;
	}

	.official-pick h3 {
		font-size: 17px;
	}

	.official-map-link {
		flex: 1 1 auto;
		justify-content: center;
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* 휴대폰 최적화: iOS·안드로이드 기준(누르는 곳 44px 이상, 입력칸 16px 이상, 글자 13px 이상)에 맞춰요.
   칩·단추는 보이는 크기를 글자에 맞게 작게 두고, 누르는 곳만 투명한 ::after 로 44px까지 넓혀요(앱들이 쓰는 방식).
   다른 규칙보다 뒤에 두어서 같은 무게의 선택자면 이쪽이 이겨요 */
@media (max-width: 480px) {
	/* iOS 사파리는 16px보다 작은 입력칸을 누르면 화면을 확대해서, 휴대폰에서는 모든 입력칸을 16px로 둬요.
	   칸마다 따로 정한 글자 크기(위치 칸 등)보다 앞서야 해서 !important 를 써요 */
	input:not([type="radio"]):not([type="checkbox"]),
	select,
	textarea {
		font-size: 16px !important;
	}

	.tabs a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* 필터 칩: 보이는 높이 36px, 글자 14px. 누르는 곳은 위아래 4px씩 넓혀 44px */
	.options label {
		position: relative;
	}

	.options label::after {
		content: "";
		position: absolute;
		inset: -4px 0;
	}

	.options span {
		padding-top: 8px;
		padding-bottom: 8px;
		font-size: 14px;
	}

	.text-button {
		height: 44px;
		font-size: 14px;
	}

	/* 추천 기준 칩은 더 작게 보이는 32px(13px 글자). 누르는 곳은 위아래 6px씩 넓혀 44px */
	.nearby-order .options label::after {
		inset: -6px 0;
	}

	.nearby-order .options span {
		padding: 6px 12px;
		font-size: 13px;
	}

	/* 밥·면 칩은 보이는 29px. 누르는 곳은 위아래 8px씩 넓혀 45px(나라 칩과는 12px 떨어져 안 겹쳐요) */
	.staple-choice legend {
		padding: 7px 0;
	}

	.staple-choice .options label::after {
		inset: -8px 0;
	}

	.staple-choice .options span {
		padding: 6px 12px;
		font-size: 13px;
	}

	/* 추천 식당 상자 단추: 보이는 높이 40px, 글자 길이만큼. 누르는 곳은 위아래 2px씩 넓혀 44px */
	#nearbyResult .restaurant-links a,
	#nearbyResult .restaurant-links button {
		position: relative;
	}

	#nearbyResult .restaurant-links a::after,
	#nearbyResult .restaurant-links button::after {
		content: "";
		position: absolute;
		/* ::after 는 테두리 안쪽에서 재서 1px 테두리만큼 더 빼요 */
		inset: -3px -1px;
	}

	/* '다른 가게'(보임 36px)와 즐겨찾기 별(보임 32px·목록 28px)도 누르는 곳만 44px로 */
	.another-button,
	.favorite-button {
		position: relative;
	}

	.another-button::after,
	.favorite-button::after {
		content: "";
		position: absolute;
		/* '다른 가게'는 2px 테두리 안쪽에서 재서 그만큼 더 빼요 */
		inset: -6px -2px;
	}

	.favorite-button::after {
		inset: -6px;
	}

	.others .favorite-button::after {
		inset: -8px -4px;
	}

	/* 글줄 안의 가게 이름·출처 링크는 줄 높이를 바꾸지 않고 누르는 곳만 위아래로 넓혀요 */
	.place-name-link,
	.official-source-link,
	.nearby-footer a {
		padding-block: 8px;
		margin-block: -8px;
	}

	.menu-tag,
	.rating-tag,
	.open-tag,
	#nearbyResult .official-badge,
	#nearbyResult .others .official-badge,
	.official-chip,
	.place-meta {
		font-size: 13px;
	}

	.nearby-footer {
		font-size: 13px;
		line-height: 1.7;
	}

	.official-intro {
		font-size: 15px;
	}

	/* 공무원 맛집의 가격·순서 칩은 폰에서 줄을 바꿔 모두 보여요(사용자 10-30: 옆으로 미는 줄은 끝 칩이 잘려 보였음) */
	.official-filter .options label {
		flex: none;
	}

	.official-filter .options span {
		padding-right: 16px;
		padding-left: 16px;
	}

	.official-filter legend {
		font-size: 14px;
	}

	/* 화면 아래에 붙은 단추 줄이 아이폰 홈 막대와 겹치지 않게 해요 */
	.main-actions {
		bottom: calc(16px + env(safe-area-inset-bottom));
	}
}