:root {
			--ink: #171511;
			--muted: #6c6256;
			--paper: #fbf7ec;
			--page-bg: #f4ead9;
			--panel: #fffaf0;
			--line: rgba(23, 21, 17, 0.13);
			--shadow: 0 22px 60px rgba(45, 34, 17, 0.18);
			--green: #28634c;
			--red: #bd3f2a;
		}

		* {
			box-sizing: border-box;
		}

		body {
			margin: 0;
			min-height: 100vh;
			color: var(--ink);
			font-family: Manrope, sans-serif;
			background: var(--page-bg);
		}

		.app-shell {
			min-height: 100vh;
			display: grid;
			grid-template-columns: minmax(0, 1fr) 460px;
		}

		.album-area {
			position: relative;
			padding: 28px;
		}

		.topbar {
			position: sticky;
			top: 0;
			z-index: 10;
			display: flex;
			align-items: end;
			justify-content: space-between;
			gap: 18px;
			padding: 0 0 22px;
			background: linear-gradient(180deg, rgba(244, 234, 217, 1) 0%, rgba(244, 234, 217, 0.88) 64%, rgba(244, 234, 217, 0) 100%);
			transition: padding 180ms ease, background 180ms ease, box-shadow 180ms ease;
		}

		.topbar.is-compact {
			padding: 12px 0 16px;
			background: linear-gradient(180deg, rgba(244, 234, 217, 1) 0%, rgba(244, 234, 217, 0.92) 58%, rgba(244, 234, 217, 0) 100%);
		}

		h1 {
			max-width: 690px;
			margin: 0;
			color: #4a3020;
			font-family: Fraunces, serif;
			font-size: clamp(2.25rem, 5vw, 5.6rem);
			line-height: 0.9;
			letter-spacing: 0;
			transition: font-size 180ms ease, line-height 180ms ease;
		}

		.topbar.is-compact h1 {
			font-size: clamp(1.75rem, 2.4vw, 2.65rem);
			line-height: 1;
		}

		.kicker {
			margin: 0 0 10px;
			color: #7a4f28;
			font-size: clamp(1.1rem, 1.8vw, 1.4rem);
			font-weight: 800;
			letter-spacing: 0;
			max-height: 40px;
			opacity: 1;
			transform: translateY(0);
			transition: max-height 180ms ease, margin 180ms ease, opacity 140ms ease, transform 180ms ease;
		}

		.topbar.is-compact .kicker {
			max-height: 0;
			margin: 0;
			opacity: 0;
			transform: translateY(-6px);
			overflow: hidden;
		}

		.controls {
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;
			justify-content: flex-end;
		}

		.chip {
			border: 1px solid rgba(122, 79, 40, 0.28);
			border-radius: 999px;
			padding: 9px 13px;
			background: rgba(255, 250, 240, 0.34);
			color: #5b432d;
			font: inherit;
			font-size: 0.82rem;
			font-weight: 800;
			cursor: pointer;
		}

		.chip.active {
			border-color: rgba(40, 99, 76, 0.52);
			background: rgba(40, 99, 76, 0.88);
			color: #fffaf0;
		}

		.map-toggle,
		.map-popup-close,
		.detail-popup-close {
			display: none;
		}

		.language-select {
			border: 1px solid rgba(122, 79, 40, 0.28);
			border-radius: 999px;
			padding: 9px 32px 9px 13px;
			background: rgba(255, 250, 240, 0.34);
			color: #5b432d;
			font: inherit;
			font-size: 0.82rem;
			font-weight: 800;
			cursor: pointer;
		}

		.location-status {
			display: none;
			flex-basis: 100%;
			margin: 6px 0 0;
			color: var(--muted);
			font-size: 0.78rem;
			font-weight: 800;
			text-align: right;
		}

		.album-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(max(170px, calc((100% - 70px) / 6)), 1fr));
			grid-auto-flow: dense;
			gap: 14px;
			align-items: stretch;
		}

		.load-sentinel {
			height: 1px;
		}

		.card-loading {
			position: fixed;
			left: 24px;
			bottom: 24px;
			z-index: 20;
			display: none;
			align-items: center;
			gap: 10px;
			padding: 12px 14px;
			border: 1px solid rgba(255, 250, 240, 0.62);
			border-radius: 8px;
			background: rgba(23, 21, 17, 0.82);
			color: #fffaf0;
			box-shadow: 0 16px 34px rgba(23, 21, 17, 0.22);
			font-size: 0.8rem;
			font-weight: 900;
		}

		.card-loading.visible {
			display: flex;
		}

		.loading-dot {
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background: var(--red);
			box-shadow: 14px 0 0 var(--green), 28px 0 0 #f7c46c;
			animation: pulseDots 900ms ease-in-out infinite alternate;
		}

		@keyframes pulseDots {
			from {
				opacity: 0.45;
				transform: translateY(1px);
			}

			to {
				opacity: 1;
				transform: translateY(-1px);
			}
		}

		.food-card {
			min-height: 260px;
			position: relative;
			display: flex;
			align-items: end;
			overflow: hidden;
			border: 0;
			border-radius: 8px;
			padding: 0;
			color: #fff;
			text-align: left;
			cursor: pointer;
			box-shadow: 0 12px 28px rgba(34, 24, 12, 0.16);
			isolation: isolate;
			transform: translateY(0);
			transition: transform 180ms ease, box-shadow 180ms ease;
		}

		.food-card::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 0;
			background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.08) 62%, rgba(0, 0, 0, 0.56));
			pointer-events: none;
		}

		.food-card.has-photo .photo-art {
			display: none;
		}

		.photo-image {
			position: absolute;
			inset: 0;
			z-index: -1;
			width: 100%;
			height: 100%;
			object-fit: cover;
			filter: saturate(1.05) contrast(1.02);
			transform: scale(1.03);
		}

		.food-card:nth-child(3n + 1) {
			min-height: 350px;
			grid-row: span 2;
		}

		.food-card:nth-child(5n + 2) {
			min-height: 305px;
		}

		.food-card:hover,
		.food-card:focus-visible {
			transform: translateY(-4px);
			box-shadow: 0 24px 50px rgba(34, 24, 12, 0.26);
			outline: none;
		}

		.photo-art {
			position: absolute;
			inset: 0;
			background:
				radial-gradient(circle at 36% 34%, color-mix(in srgb, var(--tone) 92%, white), transparent 0 17%, transparent 18%),
				radial-gradient(circle at 64% 46%, color-mix(in srgb, var(--accent) 72%, black), transparent 0 14%, transparent 15%),
				radial-gradient(circle at 48% 66%, color-mix(in srgb, var(--tone) 70%, white), transparent 0 21%, transparent 22%),
				linear-gradient(145deg, color-mix(in srgb, var(--accent) 72%, black), var(--tone));
			filter: saturate(1.08) contrast(1.02);
			transform: scale(1.04);
		}

		.photo-art::before {
			content: "";
			position: absolute;
			inset: 10% 12%;
			border: 18px solid rgba(255, 255, 255, 0.16);
			border-radius: 50%;
			transform: rotate(-11deg);
		}

		.photo-art::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, transparent 24%, rgba(0, 0, 0, 0.12) 48%, rgba(0, 0, 0, 0.76));
		}

		.card-content {
			position: relative;
			z-index: 2;
			width: 100%;
			padding: 12px;
		}

		.card-meta {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 8px;
			margin-bottom: 8px;
			font-size: 0.72rem;
			font-weight: 800;
			text-transform: uppercase;
		}

		.source-pill {
			max-width: 48%;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			border-radius: 999px;
			padding: 5px 8px;
			background: rgba(255, 255, 255, 0.20);
		}

		.dish-name {
			margin: 0;
			font-family: Fraunces, serif;
			font-size: clamp(1rem, 1.25vw, 1.35rem);
			line-height: 1.02;
			letter-spacing: 0;
		}

		.restaurant-name {
			margin: 4px 0 0;
			color: rgba(255, 255, 255, 0.72);
			font-size: 0.72rem;
			font-weight: 800;
		}

		.detail-panel {
			position: sticky;
			top: 0;
			height: 100vh;
			padding: 20px;
			border-left: 1px solid var(--line);
			background: rgba(255, 250, 240, 0.86);
			backdrop-filter: blur(18px);
			overflow-y: auto;
		}

		.panel-card {
			min-height: calc(100vh - 40px);
			display: flex;
			flex-direction: column;
			gap: 18px;
			border: 1px solid var(--line);
			border-radius: 8px;
			padding: 18px;
			background: var(--panel);
			box-shadow: var(--shadow);
		}

		.map-card {
			position: relative;
			min-height: 360px;
			border: 1px solid var(--line);
			border-radius: 8px;
			overflow: hidden;
			background: #e7dfd0;
		}

		.map-search {
			position: absolute;
			top: 12px;
			left: 12px;
			right: 12px;
			z-index: 5;
			display: flex;
			gap: 8px;
			padding: 8px;
			border: 1px solid rgba(23, 21, 17, 0.12);
			border-radius: 8px;
			background: rgba(255, 250, 240, 0.94);
			box-shadow: 0 10px 24px rgba(23, 21, 17, 0.16);
		}

		.map-search input {
			min-width: 0;
			flex: 1;
			border: 0;
			background: transparent;
			color: var(--ink);
			font: inherit;
			font-size: 0.82rem;
			font-weight: 800;
			outline: none;
		}

		.map-search button {
			border: 0;
			border-radius: 6px;
			padding: 8px 10px;
			background: var(--green);
			color: #fffaf0;
			font: inherit;
			font-size: 0.76rem;
			font-weight: 900;
			cursor: pointer;
		}

		.time-buffer-select {
			display: none;
			border: 1px solid var(--line);
			border-radius: 999px;
			padding: 9px 28px 9px 13px;
			background: rgba(255, 250, 240, 0.72);
			color: var(--ink);
			font: inherit;
			font-size: 0.82rem;
			font-weight: 800;
			cursor: pointer;
		}

		.time-buffer-select.visible {
			display: inline-flex;
		}

		.district-map {
			height: 360px;
			width: 100%;
		}

		.map-loading {
			position: absolute;
			inset: 0;
			z-index: 4;
			display: none;
			align-items: center;
			justify-content: center;
			padding: 20px;
			background: rgba(23, 21, 17, 0.22);
			pointer-events: none;
		}

		.map-loading.visible {
			display: flex;
		}

		.loading-popup {
			display: flex;
			align-items: center;
			gap: 10px;
			max-width: 240px;
			padding: 12px 14px;
			border: 1px solid rgba(255, 250, 240, 0.7);
			border-radius: 8px;
			background: rgba(23, 21, 17, 0.86);
			color: #fffaf0;
			box-shadow: 0 16px 34px rgba(23, 21, 17, 0.24);
			font-size: 0.82rem;
			font-weight: 900;
			text-align: left;
		}

		.map-fallback {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			padding: 16px;
			color: var(--muted);
			font-size: 0.82rem;
			font-weight: 800;
			text-align: center;
		}

		.panel-photo {
			min-height: 250px;
			border-radius: 8px;
			background:
				radial-gradient(circle at 38% 38%, var(--panel-tone, #f7c46c), transparent 0 18%, transparent 19%),
				radial-gradient(circle at 62% 58%, var(--panel-accent, #e86f3d), transparent 0 20%, transparent 21%),
				linear-gradient(145deg, var(--panel-accent, #e86f3d), var(--panel-tone, #f7c46c));
			position: relative;
			overflow: hidden;
				background-position: center;
				background-size: cover;
		}

		.panel-photo::after {
				content: attr(data-empty-label);
			position: absolute;
			right: 12px;
			bottom: 12px;
			border-radius: 999px;
			padding: 7px 10px;
			background: rgba(0, 0, 0, 0.52);
			color: #fff;
			font-size: 0.76rem;
			font-weight: 800;
		}

		.panel-photo.has-photo::after {
			content: attr(data-photo-label);
		}

		.panel-title {
			margin: 0;
			font-family: Fraunces, serif;
			font-size: 2.35rem;
			line-height: 0.95;
			letter-spacing: 0;
		}

		.panel-subtitle {
			margin: -8px 0 0;
			color: var(--muted);
			font-weight: 800;
		}

		.detail-list {
			display: grid;
			gap: 10px;
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.detail-list li {
			display: flex;
			justify-content: space-between;
			gap: 14px;
			border-bottom: 1px solid var(--line);
			padding-bottom: 10px;
			color: var(--muted);
			font-size: 0.92rem;
		}

		.detail-list strong {
			color: var(--ink);
		}

		.cta-row {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 10px;
			margin-top: auto;
		}

		.cta {
			border: 0;
			border-radius: 8px;
			padding: 13px 14px;
			color: #fff;
			background: var(--green);
			font: inherit;
			font-weight: 900;
			text-align: center;
			text-decoration: none;
		}

		.cta.secondary {
			border: 1px solid var(--line);
			color: var(--ink);
			background: transparent;
		}

		.cta.disabled {
			pointer-events: none;
			opacity: 0.48;
		}

		@media (max-width: 1280px) {
			.topbar {
				align-items: start;
				flex-direction: column;
			}

			.controls {
				justify-content: flex-start;
			}
		}

		@media (max-width: 980px) {
			.app-shell {
				display: block;
			}

			.album-area {
				padding: 18px;
			}

			.map-toggle {
				display: inline-flex;
			}

			.location-status {
				text-align: left;
			}

			.album-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: 10px;
			}

			.food-card,
			.food-card:nth-child(3n + 1),
			.food-card:nth-child(5n + 2) {
				min-height: 235px;
				grid-row: span 1;
			}

			.detail-panel {
				position: fixed;
				inset: auto 0 0;
				z-index: 30;
				height: min(78vh, 680px);
				padding: 12px;
				border-left: 0;
				border-top: 1px solid var(--line);
				transform: translateY(100%);
				transition: transform 220ms ease;
			}

			.detail-panel.open {
				transform: translateY(0);
			}

			body.map-open .detail-panel {
				inset: 0;
				z-index: 80;
				height: 100vh;
				transform: translateY(0);
				background: transparent;
				border-top: 0;
				pointer-events: none;
			}

			.panel-card {
				position: relative;
				min-height: auto;
				padding-top: 48px;
			}

			.detail-popup-close {
				position: absolute;
				top: 12px;
				right: 12px;
				display: inline-flex;
				border: 0;
				border-radius: 999px;
				padding: 8px 11px;
				background: var(--ink);
				color: var(--paper);
				font: inherit;
				font-size: 0.76rem;
				font-weight: 900;
				cursor: pointer;
			}

			body.map-open .detail-popup-close {
				display: none;
			}

			.panel-photo {
				display: none;
			}

			.map-card {
				display: none;
			}

			body.map-open .map-card {
				position: fixed;
				inset: 12px;
				z-index: 70;
				display: block;
				min-height: auto;
				box-shadow: 0 26px 70px rgba(23, 21, 17, 0.34);
				pointer-events: auto;
			}

			body.map-open::before {
				content: "";
				position: fixed;
				inset: 0;
				z-index: 60;
				background: rgba(23, 21, 17, 0.42);
			}

			.map-popup-close {
				position: absolute;
				top: 10px;
				right: 10px;
				z-index: 8;
				display: inline-flex;
				border: 0;
				border-radius: 999px;
				padding: 8px 11px;
				background: var(--ink);
				color: var(--paper);
				font: inherit;
				font-size: 0.76rem;
				font-weight: 900;
			}

			.map-search {
				top: 52px;
			}

			.district-map {
				height: calc(100vh - 24px);
			}
		}