@font-face { font-family: 'en-voyage'; src: url('en-voyage.woff2') format('woff2'); font-weight: normal; }
	@font-face { font-family: 'en-voyage-bold'; src: url('en-voyage-bold.woff2') format('woff2'); font-weight: 800; }
	body { 
		background-color: #fdffea;
		padding: 10px;
		margin: 0;
		font-family: 'en-voyage', sans-serif;
	}
	h1, h2, h3, h4, h5 {
		font-family: 'en-voyage-bold', sans-serif;
	}
	.police {
		font-family: 'en-voyage-bold', sans-serif;
	}
	.voyage-grid {
		display: grid;
		gap: 20px;
		justify-content: center; 
		margin: 0 auto;
		width: 100%;
		padding-top: 20px;
		box-sizing: border-box;
	}
	@media (min-width: 1100px) {
		.voyage-grid { 
			grid-template-columns: repeat(3, minmax(0, 500px)); 
		}
	}
	@media (max-width: 1099px) and (min-width: 800px) {
		.voyage-grid { 
			grid-template-columns: repeat(2, minmax(0, 500px)); 
		}
	}
	@media (max-width: 799px) {
		.voyage-grid { 
			grid-template-columns: repeat(1, minmax(0, 500px)); 
		}
	}
	.voyage-card {
		width: 100%;
		max-width: 500px;
		aspect-ratio: 1 / 1; 
		position: relative;
		border: 2px solid #333;
		border-radius: 8px;
		overflow: hidden;
		text-decoration: none;
		display: block;
		background-size: cover;
		background-position: center;
		margin: 0 auto;
	}
	.card-overlay {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 65%;
		aspect-ratio: 1 / 1; 
		background-color: rgba(253, 255, 234, 0.80);
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		text-align: center;
		color: #333;
		box-sizing: border-box;
	}
	.card-overlay h2 {
		font-family: 'en-voyage-bold', sans-serif;
		font-weight: 800;
		font-size: clamp(2rem, 2.5vw, 3.5rem);
		margin-bottom: 0;
		color: #333;
	}
	.card-overlay h4 {
		font-family: 'en-voyage-bold', sans-serif;
		font-weight: 800;
		font-size: clamp(1.5rem, 2vw, 2.5rem);
		color: #333;
	}
	.voy-wrapper {
		display: flex;
		justify-content: center;
		padding: 20px 0;
	}
	.voy-grid {
		display: grid;
		gap: 20px;
		grid-template-columns: repeat(2, 500px);
	}
	.voy-block {
		width: 100%;
		height: 100%;
		padding: 10px 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		background-color: #fff;
	}
	.tal {
		text-align: left;
		align-items: left;
	}
	.tar {
		text-align: right;
		align-items: right;
	}
	.tac {
		text-align: center;
		align-items: center;
	}
	.voy-img-block {
		width: 500px;
		height: 500px;
		background-clip: padding-box; 
		box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.25);
		position: relative; 
		background-size: cover;
		background-position: center;
		border: 2px solid #333;
		border-radius: 8px;
	}
	.voy-block h1 { font-size: 3rem; margin-bottom: 0.2rem; }
	.voy-block h2 { font-size: 2rem; margin-bottom: 0.2rem; padding: 0 30px 0 30px; }
	.voy-block h3 { font-size: 1.5em; margin-bottom: 0.2rem; }
	.voy-block p { font-size: 1.1rem; line-height: 1.3; }
	@media (max-width: 1200px) {
		.voy-grid {
			grid-template-columns: 1fr;
		}
		.voy-block {
			width: 100%;
			max-width: 500px;
			height: auto;
			min-height: 500px;
		}
	}
	.img-caption {
		position: absolute;
		background-color: #ffffff;
		border: 2px solid #333;
		border-radius: 5px;
		z-index: 10;
		max-width: 85%;
		box-shadow: 0 4px 6px rgba(0,0,0,0.1);
	}
	.img-caption p {
		font-size: 0.8rem; 
		font-family: 'en-voyage', sans-serif;
	}
	.pos-tl { top: 8px; left: 6px; }
	.pos-tr { top: 8px; right: 6px; }
	.pos-bl { bottom: 7px; left: 6px; }
	.pos-br { bottom: 7px; right: 6px; }
	#emoji-picker {
		background: #BBB;
		display: flex;
		flex-wrap: wrap;
		gap: 5px;
		padding: 30px 0 30px 0;
		height: auto;
		overflow-y: auto;
		border-radius: 0 0 5px 5px;
	}
	.emoji-item {
		width: auto;
		height: 80px;
		padding: 5px;
		cursor: pointer;
		transition: transform 0.1s;
	}
	.emoji-item:hover {
		transform: scale(2);
	}
	.emoji-in {
		cursor: pointer;
		transition: transform 0.1s;
	}
	.emoji-in:hover {
		transform: scale(2);
		z-index: 50;
	}
	.tabs-container {
		overflow-x: auto;
		white-space: nowrap;
		padding-bottom: 5px;
	}
	.plus {
		 background: url('../pic/plus.jpg') no-repeat top center; background-size: 100% 100%; display: flex; width:250px; align-items: center; aspect-ratio:2/1; };
	}
	.emoji-tabs {
		display: flex; gap: 10px; margin-bottom: 5px;
	}
	.emoji-tab-link {
		padding: 3px;
		text-decoration: none;
		border-radius: 5px 5px 0 0;
		font-size: 0.8rem;
	}
	.tab-svg-active {
		background: #BBB;
		color: white !important;
	}
	.tab-png-active {
		background: #BBB;
		color: white !important;
	}
	.tab-svg-inactive {
		background: #e9ecef;
		color: #495057;
	}
	.tab-png-inactive {
		background: #dee2e6;
		color: #49507d;
	}
	#logo {
		width: 40px;
		transition: transform 0.2s;
	}
	#logo:hover {
		transform: scale(1.1);
	}
	.top {
		width: 40px;
		transition: transform 0.2s;
	}
	.top:hover {
		transform: scale(1.1);
	}