@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

/* MATERIALS */


/* INTERFACE */


body{
	-webkit-text-size-adjust:100%;
	margin:0;
	padding:0;
	background-color:#fff;
	color:#333;
	font-family:"Noto Sans", sans-serif;
}

body>footer{
	padding:5%;
	text-align:center;
	background-color:#333;
}

body>footer img{
	width:80px;
	margin:0 0 50px;
}

body>footer small{
	font-family:Verdana, sans-serif;
	font-size:9px;
	color:#fff;
}

a{
	color:inherit;
	text-decoration:none;
}

.header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:12px;
	padding:12px 16px;
	background:#fff;
	border-bottom:1px solid #ddd;
	position:sticky;
	top:0;
	z-index:10;
}

.brand{
	font-weight:700;
}

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

.btn{
	background:#111;
	color:#fff;
	padding:10px 14px;
	text-decoration:none;
	border-radius:10px;
	border:0;
	cursor:pointer;
	font-size:14px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	justify-content:center;
}

.btn.sub{
	background:#f2f2f2;
	color:#111;
	border:1px solid #ddd;
}

.btn.up{
	background:#14adcc;
	color:#fff;
	border:none;
}

.wrap{
	max-width:1280px;
	margin:0 auto;
	padding:5% 5% 10%;
}

.hero{
	display:flex;
	justify-content:space-between;
	align-items:end;
	gap:16px;
	flex-wrap:wrap;
	margin-bottom:16px;
	padding:0 220px 30px 0;
	background-image:url("../img/pic01.png");
	background-repeat:no-repeat;
	background-size:200px auto;
	background-position:right bottom;
}

@media only screen and (max-width:600px){
	.hero{
		padding:0 0 180px;
		background-size:auto 150px;
		background-position:center bottom;
	}
}

.hero h1{
	margin:0 0 0.5em;
	font-size:clamp(28px,4vw,52px);
	font-weight:700;
	line-height:1.08;
	letter-spacing:-0.03em;
}

.hero p{
	margin:10px 0 0;
	color:#666;
	line-height:1.7;
}

.filter-bar{
	display:flex;
	gap:8px;
	flex-wrap:nowrap;
	overflow-x:auto;
	overflow-y:hidden;
	-webkit-overflow-scrolling:touch;
	margin:0 0 14px;
	padding:2px 0 8px;
	scrollbar-width:thin;
}

.filter-bar::-webkit-scrollbar{
	height:6px;
}

.filter-bar::-webkit-scrollbar-thumb{
	background:#d1d5db;
	border-radius:999px;
}

.filter-bar::-webkit-scrollbar-track{
	background:transparent;
}

.filter-chip{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:9px 12px;
	border:1px solid #ddd;
	border-radius:999px;
	background:#fff;
	color:#333;
	font-size:13px;
	white-space:nowrap;
	flex:0 0 auto;
}

.filter-chip.is-active{
	background:#111;
	color:#fff;
	border-color:#111;
}

.grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
	gap:4px;
}

.card{
	position:relative;
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	background:#e9e9e9;
	cursor:pointer;
}

.card img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.overlay{
	position:absolute;
	inset:auto 0 0 0;
	background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
	color:#fff;
	font-size:12px;
	padding:28px 10px 10px;
	opacity:0;
	transition:opacity .2s ease;
	text-align:left;
}

.card:hover .overlay{
	opacity:1;
}

.empty{
	padding:40px 20px;
	background:#fff;
	border:1px dashed #ddd;
	border-radius:18px;
	color:#666;
	text-align:center;
}

.form-card,
.admin-card{
	max-width:760px;
	margin:0 auto;
	background:#fff;
	border:1px solid #ddd;
	border-radius:24px;
	padding:20px;
}

.field{
	margin-bottom:14px;
}

label{
	display:block;
	font-size:14px;
	font-weight:700;
	margin-bottom:8px;
}

input[type=text],
input[type=file],
input[type=password],
input[type=datetime-local],
select,
textarea{
	width:100%;
	padding:12px 14px;
	border:1px solid #ddd;
	border-radius:12px;
	font-size:15px;
	background:#fff;
}

textarea{
	min-height:110px;
	resize:vertical;
	line-height:1.6;
}

.help{
	color:#666;
	font-size:12px;
	line-height:1.6;
	margin-top:6px;
}

.admin-list{
	display:grid;
	gap:12px;
	margin-top:16px;
}

.admin-item{
	display:grid;
	grid-template-columns:96px 1fr;
	gap:12px;
	background:#fff;
	border:1px solid #ddd;
	border-radius:16px;
	padding:10px;
}

.admin-item img{
	width:96px;
	height:96px;
	object-fit:cover;
	border-radius:10px;
	background:#eee;
}

.meta{
	font-size:12px;
	color:#666;
	line-height:1.6;
	margin-top:4px;
}

.comment{
	font-size:13px;
	color:#444;
	line-height:1.6;
	margin-top:6px;
	white-space:pre-wrap;
	word-break:break-word;
}

.modal{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.78);
	display:none;
	align-items:center;
	justify-content:center;
	padding:20px;
	z-index:100;
}

.modal.is-open{
	display:flex;
}

.modal-inner{
	width:min(980px,100%);
	max-height:90vh;
	overflow:auto;
	background:#fff;
	border-radius:20px;
	display:grid;
	grid-template-columns:minmax(0,1fr) 320px;
	overflow-y:auto;
	overflow-x:hidden;
	position:relative;
}



.modal-image-wrap{
	background:#111;
	position:relative;
	touch-action:pan-y;
}

.modal-image{
	display:block;
	width:100%;
	max-height:90vh;
	object-fit:contain;
	background:#111;
}

.modal-side{
	padding:18px;
	display:flex;
	flex-direction:column;
	gap:12px;
}

.modal-place{
	font-size:22px;
	font-weight:800;
	line-height:1.35;
}

.modal-close{
	position:absolute;
	top:14px;
	right:14px;
	background:rgba(255,255,255,.92);
	color:#111;
	border:0;
	border-radius:999px;
	width:40px;
	height:40px;
	cursor:pointer;
	font-size:20px;
	z-index:3;
}

.modal-nav{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:48px;
	height:48px;
	border-radius:999px;
	border:0;
	background:rgba(255,255,255,.92);
	color:#111;
	font-size:28px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
}

.modal-prev{
	left:14px;
}

.modal-next{
	right:14px;
}

.modal-nav.is-disabled{
	opacity:.35;
	cursor:default;
}

.modal-label{
	font-size:12px;
	color:#666;
	font-weight:700;
	letter-spacing:.04em;
}

.hidden{
	display:none;
}

#loadingIndicator{
	display:none;
	margin-top:12px;
	font-size:13px;
	color:#666;
}

.spinner{
	display:inline-block;
	width:14px;
	height:14px;
	border:2px solid #d1d5db;
	border-top-color:#111;
	border-radius:50%;
	animation:spin .8s linear infinite;
	vertical-align:-2px;
	margin-right:8px;
}

@keyframes spin{
	to{
		transform:rotate(360deg);
	}
}

@media (max-width:640px){

	.grid{
		grid-template-columns:repeat(3,1fr);
	}

	.admin-item{
		grid-template-columns:1fr;
	}

	.admin-item img{
		width:100%;
		height:auto;
		aspect-ratio:1/1;
	}

	.modal-inner{
		grid-template-columns:1fr;
	}

	.modal-image{
		max-height:58vh;
	}

	.modal-nav{
		width:42px;
		height:42px;
		font-size:24px;
	}
}

@media (max-width:640px){
  .modal{
    align-items:flex-start;
    overflow-y:auto;
  }

  .modal-inner{
    margin:20px 0;
    max-height:none;
    grid-template-columns:1fr;
  }

  .modal-image{
    max-height:none;
    height:auto;
  }
}