/* =========================================
DIARY PAGE
========================================= */
 

/* GROUP */

.diary-group{
	margin-bottom:30px;
}

.diary-date-title{
	margin-bottom:10px; 
	font-size:1.1rem;
	font-weight:600; 
}
.diary-group.hidden{
	display:none;
}

/* LIST */
.diary-page{   
}
.diary-list{
	display:flex;
	flex-direction:column;
	gap:10px; 
}

/* ITEM */

.diary-item{
	display:flex;
	align-items:center;
	gap:24px; 
	padding:10px;
	border-radius:16px;
	background:var(--bg);
}

.diary-feed .diary-thumb{
	flex-shrink:0;
	width:130px; 
	border-radius:12px;
	aspect-ratio:1.3;
	overflow:hidden; 
}

.diary-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}

/* CONTENT */

.diary-content{
	flex:1;
	min-width:0;
}

.diary-title{ 
	font-size:1.1rem;
	margin-bottom: 4px;
	font-weight:650; 

	color:#111;
}

.diary-meta{
	display:flex;
	flex-direction:column; 
}

.diary-meta li{
	font-size:.85rem;  
	color:#666;
	line-height: 1.4;
}

/* =========================================
DIARY WRITE
========================================= */

.diary-write-page{  }

/* SUMMARY */

.walk-summary-card{
	display:grid;
	grid-template-columns:repeat(3,1fr);

	padding:  12px;
	margin-bottom:18px;

	border-radius:10px;
	background:var(--bg);
}

.walk-summary-item{
	text-align:center;
}

.walk-summary-item span{
	display:block;
 

	font-size:.95rem;
	font-weight:500;

	color:#777;
}

.walk-summary-item strong{
	font-size:1.4rem;
	font-weight:650; 
}

/* PHOTO */

.diary-photo-section{
	margin-bottom:22px;
}

.diary-photo-main{
	position:relative;

	height:240px;

	border-radius:18px;
	overflow:hidden;

	margin-bottom:10px; 
}

.diary-photo-main img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.photo-delete-btn{
	position:absolute;
	top:12px;
	right:12px; 
	padding:10px;
	width:40px;
	height:40px; 
	border-radius:8px; 
	background:#111;   
	font-size:1rem;
	font-weight:700;
}
.photo-delete-btn img{
	filter:invert(1);
}
 

.diary-thumb-list{
	display:flex;
	align-items:center;
	gap:8px;

	overflow-x:auto;
}

.thumb-add-btn,
.diary-thumb{
	flex-shrink:0;

	width:58px;
	aspect-ratio:1;

	border-radius:12px;

	overflow:hidden;
}

.thumb-add-btn{
	background:#f1f1f1;

	font-size:1.7rem;
	font-weight:300;

	color:#888;
}

.diary-thumb{ 
}

.diary-thumb.active{
	border :2px solid var(--primary);
}

.diary-thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}
.hidden-file-input{
	display:none;
}
/* FORM */

.diary-form-section{
	display:flex;
	flex-direction:column;
	gap:18px;
}

.form-group{
	display:flex;
	flex-direction:column;
	gap:10px;
}

.form-label{
	font-size:1rem;
	font-weight:700;
}

.form-label span{
	color:#ff4a4a;
}

.form-input,
.form-textarea{
	width:100%;

	border:1px solid #d9d9d9;
	border-radius:12px;

	background:#fff;

	font-family:inherit;
}

.form-input{
	height:54px;
	padding:0 16px;

	font-size:1rem;
}

.textarea-wrap{
	position:relative;
}

.form-textarea{
	height:160px;

	padding:16px;
	padding-bottom:36px;

	font-size:1rem;
	line-height:1.65;

	resize:none;
}

.textarea-count{
	position:absolute;
	right:20px;
	bottom:10px;
	line-height: 1;
	font-size:.82rem; 
	color:#777;
}

/* BUTTON */

.diary-button-group{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;

	margin-top:26px;
}

.diary-btn{
	height:52px;

	border-radius:10px;

	font-size:1rem;
	font-weight:700;
}

.diary-btn.cancel{
	background:#fff;
	border:1px solid #cfcfcf;
	color:#111;
}

.diary-btn.submit{
	background:var(--primary);
	color:#fff;
}


.diary-more-btn{
	background:var(--primary);
	color:#fff;
	display:block;
	height:56px;
	border-radius:10px;
	width: 100%;
	font-size:1rem;
	font-weight:700;
}

/* =========================================
DIARY VIEW
========================================= */

.diary-view-page{ 
}

.diary-view-top{
	display:flex;
	align-items:center;
	justify-content:space-between;

	margin-bottom:12px;
}

.diary-view-right{
	display:flex;
	align-items:center;
	gap:12px;
}

.diary-view-date{
	font-size:1rem;  
	font-weight: 600;
}

.diary-view-weather{
	font-size:.85rem;
	font-weight:550;
	display:flex; align-items:center; 
}

.diary-share-btn{
	width:34px;
	height:34px;
	padding:8px;

	border-radius:8px;

	background:#f3f3f3;

	display:flex;
	align-items:center;
	justify-content:center;

	font-size:1rem;
	font-weight:700;

	color:#111;

	transition:.2s;
}

.diary-share-btn:active{
	transform:scale(.94);
} 

.diary-route-map{
	height:246px;

	margin-bottom:18px;

	border-radius:18px;
	overflow:hidden;
}

.diary-route-map img{
	width:100%;
	height:100%;
	object-fit:cover;
}