/* =========================================
TOP BAR
========================================= */

.topbar{
	display:flex;
	align-items:center; 
	gap:10px; 
    background: #fff; 
    padding: 0 20px; 
	height: 70px;
}
.topbar h1{
	font-size: 20px; 
	font-weight: 650;
}
.topbar .back-btn{
	width: 30px;
	aspect-ratio:1;
	display:flex;
	align-items:center; 
}
.topbar .back-btn img{
	width: 10px;
}

.logo{ 
	width: 140px;
}

.logo span{
	font-weight:500;
}

.top-icons{
	display:flex;
	gap:12px;
}

.icon-btn{
	width:40px;
	height:40px;
	border-radius:50%;
	background:rgba(255,255,255,.8);
	display:flex;
	align-items:center;
	justify-content:center;
} 



/* =========================
	footer
========================= */

.footer{
	margin-top:40px; 
	padding-top: 30px;
	padding-bottom: 20px;
	background: var(--bg);
}
.walk-page + .footer{
	margin-top: 0;
}


/* =========================
	brand
========================= */

.footer-brand{
	margin-bottom:20px;
}

.footer-logo{
	font-size:52px;
	font-weight:700;
	line-height:1;
	letter-spacing:-0.04em;
	color:#c4d600;
	font-style:italic;
}
.footer-logo-image{
	width: 160px;
}

.footer-brand p{
	margin-top:18px;
	font-size:15px; 
	color:#555;
	word-break:keep-all;
}


/* =========================
	info
========================= */

.footer-info{
	display:flex;
	flex-direction:column; 
}

.footer-row{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.footer-row:not(.inline){
	margin-bottom: 10px;
}

.footer-row.inline{
	flex-direction:row;
	align-items:flex-start;
	gap:14px;
}

.footer-row span{
	flex-shrink:0;
	font-size:13px;
	font-weight:700;
	color:#111;
}

.footer-row p{
	font-size:14px; 
	color:#555;
	word-break:keep-all;
}


/* =========================
	divider
========================= */

.footer-divider{
	width:100%;
	height:1px;
	margin:15px 0;
	background:rgba(0,0,0,0.08);
}


/* =========================
	links
========================= */

.footer-links{
	display:flex;
	flex-wrap:wrap;
	gap:12px 18px;
}

.footer-links a{
	position:relative;
	font-size:13px;
	font-weight:500; 
	color:#666;
	text-decoration:none;
}

.footer-links a:first-child{
	font-weight:700;
	color:#111;
}


/* =========================
	bottom
========================= */

.footer-bottom{
	margin-top:10px;
}

.footer-bottom p{
	font-size:12px; 
	color:#999; 
}

/* =========================================
BOTTOM NAV
========================================= */

.bottom-nav{
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height: 100px;
	padding:
		10px
		24px
		calc(10px + var(--safe-bottom));
	background:#fff; 
	border-top:1px solid rgba(0,0,0,.05);
	z-index:2;
}

.bottom-nav ul{
	display:grid;
	grid-template-columns:repeat(5,1fr);
	gap:20px;
}

.bottom-nav li{
	text-align:center;
}

.nav-link{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	font-size:.8rem;
	font-weight:600;
	color:#888;
}

.nav-icon{
	width:100%;
	max-width:56px;
	aspect-ratio:1;
	border-radius:14px;
	background:#f2f2f2;
	display:flex;
	align-items:center;
	justify-content:center; 
}
.nav-icon img{
	width: 30px;
	filter: grayscale(1) invert(1);
}
 
.nav-link.active{
	color:var(--primary);
}
.nav-link.active .nav-icon img{
	filter:none;
}

.nav-link.active .nav-icon{
	background:var(--bg);
}




/* =========================================
WEATHER ICON
========================================= */
.weather-icon{
	width:30px;
	aspect-ratio:1;
	filter: brightness(1.1);
	object-fit:contain;
}



/* =========================================
AGREE MODAL
========================================= */

.agree-modal{
	position:fixed;
	inset:0;

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

	z-index:1000;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:.3s;
}

.agree-modal.show{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* DIM */

.agree-modal-dim{
	position:absolute;
	inset:0;

	background:rgba(0,0,0,.48);
}

/* CONTENT */

.agree-modal-content{
	position:relative;

	width:calc(100% - 40px);
	max-width:360px;

	padding:30px 20px 20px;

	border-radius:20px;

	background:#fff;

	z-index:1;
}

/* CLOSE */

.agree-modal-close{
	position:absolute;
	top:16px;
	right:16px;

	width:34px;
	height:34px;

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

	font-size:1.5rem;
	font-weight:400;

	color:#111;
}

/* TEXT */

.agree-modal-title{
	margin-bottom:14px;
	line-height: 1;
	font-size:1.6rem;
	font-weight:650;
	letter-spacing:-.8px;
}

.agree-modal-subtitle{
	margin-bottom:4px;

	font-size:1.1rem;
	font-weight:650;
}

.agree-modal-description{
	margin-bottom:24px; 
	font-size:.95rem;
	font-weight:500;  
	color:#444;
}

/* CHECK */

.agree-check-wrap{
	margin-bottom:24px;
}

.agree-check-item{
	display:flex;
	align-items:center;
	justify-content:space-between;

	gap:10px;
}

.agree-check-left{
	display:flex;
	align-items:center;
	gap:10px;
}

.agree-check-item input{
	display:none;
}

/* CUSTOM CHECK */

.agree-check-icon{
	position:relative;

	width:18px;
	height:18px;

	border:1.5px solid #cfcfcf;
	border-radius:5px;

	flex-shrink:0;
}

.agree-check-icon::after{
	content:"";

	position:absolute;
	left:50%;
	top:50%;

	width:8px;
	height:5px;

	border-left:2px solid #0d6b5d;
	border-bottom:2px solid #0d6b5d;

	transform:
		translate(-50%,-60%)
		rotate(-45deg);

	opacity:0;
}

.agree-check-item input:checked
+ .agree-check-icon::after{
	opacity:1;
}

/* TEXT */

.agree-check-text{
	font-size:.96rem;
	font-weight:600;

	color:#222;
}

/* ALL */

.agree-check-item.all{
	padding-bottom:14px;
	margin-bottom:14px; 
	border-bottom:1px solid #ececec;
	justify-content:flex-start;
}

/* GROUP */

.agree-check-group{
	display:flex;
	flex-direction:column;
	gap:12px;
}

/* DETAIL */

.agree-detail-btn{
	font-size:.85rem;
	font-weight:600;

	color:#333;

	text-decoration:underline;
	text-underline-offset:2px;
}

/* BUTTON */

.agree-submit-btn{
	width:100%;
	height:52px;

	border-radius:10px;

	background:#0d6b5d;
	color:#fff;

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


/* =========================================
SHARE SHEET
========================================= */

.share-sheet{
	position:fixed;
	inset:0;

	display:flex;
	justify-content:center;

	z-index:900;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:.3s;
}

.share-sheet.show{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
}

/* DIM */

.share-sheet-dim{
	position:absolute;
	inset:0;

	background:rgba(0,0,0,.42);

	backdrop-filter:blur(2px);
}

/* CONTENT */

.share-sheet-content{
	position:absolute;
	left:50%;
	bottom:0;

	transform:
		translateX(-50%)
		translateY(100%);

	width:100%;
	max-width:430px;

	padding:
		14px
		20px
		calc(20px + env(safe-area-inset-bottom));

	border-radius:28px 28px 0 0;

	background:#fff;

	box-shadow:
		0 -10px 40px rgba(0,0,0,.08);

	transition:
		transform .45s cubic-bezier(.22,1,.36,1);
}

.share-sheet.show .share-sheet-content{
	transform:
		translateX(-50%)
		translateY(0);
}

/* HANDLE */

.share-sheet-handle{
	width:42px;
	height:5px;

	margin:0 auto 20px;

	border-radius:999px;

	background:#d7d7d7;
}

/* TITLE */

.share-sheet-title{
	margin-bottom:24px;

	font-size:1.1rem;
	font-weight:800;
	letter-spacing:-.4px;

	text-align:center;
}

/* MENU */

.share-menu{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px;
}

/* ITEM */

.share-menu-item{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
}

/* ICON */

.share-icon{
	width:62px;
	aspect-ratio:1;
	padding:15px;
	border-radius:20px;

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

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

	flex-shrink:0;
}

/* KAKAO */

.share-icon.kakao{
	background:#ffe812;
	color:#111;
}

/* LINK */

.share-icon.link{
	background:#f3f3f3;
}

/* INSTA */

.share-icon.insta{
	background:
		linear-gradient(
			135deg,
			#feda75 0%,
			#fa7e1e 25%,
			#d62976 50%,
			#962fbf 75%,
			#4f5bd5 100%
		);

	color:#fff;
}
.share-icon.insta img{
	filter:invert(1);
}

/* SAVE */

.share-icon.save{
	background:#111;
}
.share-icon.save img{
	filter:invert(1);
}

/* TEXT */

.share-menu-item span{
	font-size:.85rem;
	font-weight:600; 
	color:#333;
}

/* ACTIVE */

.share-menu-item:active{
	transform:scale(.96);
}


/* =========================================
LIVE ACTIVITY
========================================= */

.live-activity{
	position:fixed;
	left:50%;
	bottom:calc(18px + env(safe-area-inset-bottom));
	transform:translateX(-50%) translateY(20px);

	width:calc(100% - 24px);
	max-width:390px;

	padding:16px;
	border-radius:18px;

	background:rgba(255,255,255,.96);
	backdrop-filter:blur(30px);

	box-shadow:
		0 10px 40px rgba(0,0,0,.14),
		0 2px 10px rgba(0,0,0,.05);

	z-index:500;

	opacity:0;
	visibility:hidden;
	pointer-events:none;

	transition:
		opacity .35s ease,
		transform .35s cubic-bezier(.22,1,.36,1),
		visibility .35s ease;
}

.live-activity.show{
	opacity:1;
	visibility:visible;
	pointer-events:auto;
	transform:translateX(-50%) translateY(0);
}

.live-top{
	position:relative;
	display:grid;
	grid-template-columns:repeat(3,auto);
	gap:10px;

	padding-bottom:14px;
	margin-bottom:14px;

	border-bottom:1px solid rgba(0,0,0,.1);
}

.live-logo{ 
	width:100%; 
	margin-bottom: 10px; 
	display:flex; 
	justify-content:flex-end;
	
}
.live-logo img{
	width:100px;
}

.live-col{
	display:flex;
	flex-direction:column; 
	justify-content:flex-end;
	
}

.live-value{
	font-size:2rem;
	font-weight:700;
	line-height:1;
	letter-spacing:-1.5px;
	color:#0b6d5d;
}

.live-value.small{
	font-size:1.45rem;
	color:#111;
}

.live-label{
	margin-top:5px;
	font-size:.9rem;
	font-weight:600;
	color:#666;
}

.live-message{
	font-size:.9rem;
	line-height:1.45;
	text-align:center;
	word-break:keep-all;
	color:#333;
	margin-bottom:14px;
}

.live-bottom{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}

.live-btn{
	height:42px;
	border-radius:8px;
	background:#f2f2f2;
	font-weight:650;
	color:#666;
	transition:.25s;
}
 
.live-btn.primary{
	background:var(--primary-light);
	color:#111;
}
 
 


/* =========================================
PERMISSION
========================================= */
.permission-screen{
	position:absolute;
	inset:0;
	z-index:999;
	background:#fff;
	overflow:auto;
	transition:.45s;
}

.permission-screen.hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.permission-wrap{
	min-height:100%;
	padding:
		calc(40px + var(--safe-top))
		24px
		calc(30px + var(--safe-bottom));
	display:flex;
	flex-direction:column;
}

.permission-title{
	font-size:1.9rem;
	font-weight:700; 
	letter-spacing:-1px;
	margin-bottom:42px;
	line-height: 1.3;
}

.permission-list{
	display:flex;
	flex-direction:column;
	gap:28px;
	margin-bottom:40px;
}

.permission-item h3{
	font-size:1.35rem;
	font-weight:700;
	margin-bottom:8px;
}

.permission-item p{
	font-size:1rem; 
	color:#555;
}

.permission-desc{
	font-size:.95rem; 
	color:#666;
	margin-bottom:28px;
}

.permission-guide{
	padding-top:22px;
	border-top:1px solid #ddd;
	margin-top:auto;
}

.permission-bottom{
	padding-top:30px;
}

.agree-btn{
	width:100%;
	height:56px;
	border-radius:10px;
	background:#6f6f6f;
	color:#fff;
	font-size:1rem;
	font-weight:700;
}



/* =========================================
SPLASH
========================================= */


.splash-screen{
	position:absolute;
	inset:0;
	z-index:1000;
	background:#f3ecdc;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:.45s;
}

.splash-screen.hidden{
	opacity:0;
	visibility:hidden;
	pointer-events:none;
}

.splash-inner{
	width:100%;
	max-width:430px;
	padding:24px;
	text-align:center;
}

.splash-logo{   
	width: 160px;
	margin:0 auto 30px;
}

.splash-text{
	font-size:1rem;
	font-weight:500; 
}

.splash-title{
	font-size:1.5rem;
	font-weight:700;
}