/* =========================================
TITLE
========================================= */
.page-sub-title{font-size:22px;	font-weight:650;	text-align:center;	margin:30px 0 20px;}
.section-title{font-weight: 600; font-size: 20px; margin : 20px 0 10px;}

/* =========================================
PAGINATION
========================================= */
.pagination{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:50px;}
.pagination a{font-size:16px; text-decoration:none; width:32px;aspect-ratio:1; border-radius:8px; display:flex;align-items:center;justify-content:center; line-height: 1;}
.pagination a.active{ background:var(--primary); color: #fff; font-weight: 650;} 


/* =========================================
BTN
========================================= */
.btn-group{display:flex; gap: 12px;   margin-top: 26px;}
.btn-write{display:flex;align-items:center;justify-content:center;height:56px;border-radius:8px;background:#efefef;color:#111;font-size:18px;font-weight:650;text-decoration:none;}
.btn{	width:100%;	height:56px; line-height: 1;	display:flex;	align-items:center;	justify-content:center;	border-radius:10px;	font-size:1.1rem;	font-weight:650;transition:.25s;}
.btn-primary{	background:var(--primary);	border:1px solid var(--primary);	color:#fff;}
.btn-outline{	background:#fff;	border:1px solid var(--primary);	color:var(--primary);}
.btn-light{	background:#f1f1f1;	border:1px solid #f1f1f1;	color:#222;}
.btn-lime{	background:#b7c650; color:#fff;}
.btn:disabled{	opacity:.5;	pointer-events:none;}
 

/* =========================================
ICON
========================================= */
.reward-icon{display:inline-block;width: 20px; aspect-ratio:1; background: url('../../assets/images/icon/coin.png') no-repeat center center / cover;} 
.lock-icon{display:inline-block;width: 20px; aspect-ratio:1; background: url('../../assets/images/icon/lock.png') no-repeat center center / cover;}
.icon-image{display:inline-block;width: 20px; aspect-ratio:1; background: url('../../assets/images/icon/image.png') no-repeat center center / cover;} 

/* =========================================
TAB
========================================= */
.tab-nav{display:flex;height:60px;border-bottom:1px solid #ddd; border-top:1px solid #ddd; margin-bottom: 40px;  }
.tab-nav a,
.tab-nav button{flex:1;font-size:18px;font-weight:600;background:none;border:0;position:relative; display:flex; align-items:center; justify-content:center; text-align: center;  padding-bottom: 2px;}
.tab-nav a.active,
.tab-nav button.active{color: var(--primary); font-weight: 650;}
.tab-nav a.active::after,
.tab-nav button.active::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--primary);}


/* =========================================
SEARCH
========================================= */
.search-form{position:relative; margin-bottom: 20px;}
.search-form input{width:100%;height:52px;padding:0 50px 0 20px;border:0;border-radius:999px;background:#f5f5f5;}
.search-form button{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:none;border:0;padding:0; width: 24px; aspect-ratio:1; background: url('../../../assets/images/icon/search.png') no-repeat center center / contain;}

 
/* =========================================
FORM
========================================= */ 
.board-form{padding:20px 0 0;}
.form-group + .form-group{margin-top:14px;} 
.form-group.required{position:relative;}
.form-group.required::after{content:"*";position:absolute;top:14px; line-height: 1;right:14px;color:#ff3b30;font-weight:650;  }
.form-group{display:flex;flex-direction:column;	gap:10px;}
.form-label{	font-size:1rem;	font-weight:650;}
.form-label span{	color:#ff4a4a;}
.form-input{	width:100%;	height:56px;	padding:0 16px;	border:1px solid #d7d7d7;	border-radius:10px;	background:#fff;	font-size:1rem;	font-family:inherit;}
.form-input[readonly]{background: #f5f5f5; color: #999;}
.form-desc{ padding-left:4px;font-size:.875rem;color:#333; } 
.date-range{display:flex;align-items:center;gap:10px;}
.date-field{position:relative;flex:1;}
.date-field::after{content:""; width: 22px; aspect-ratio:1; background: url('../../../assets/images/icon/calendar.png') no-repeat center center / contain;position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none; }
.date-field .form-input{padding-right:40px;}
.date-field input[type="date"]::-webkit-calendar-picker-indicator{	position:absolute;	top:0;	left:0;	width:100%;	height:100%;	opacity:0;	cursor:pointer;
}  
.file-btn, .file-label{display:flex;align-items:center;justify-content:center;min-width:90px;height:34px;border:1px solid #cfcfcf;background:#f8f8f8;font-size:14px;}
.file-name{margin-left:12px;font-size:14px;color:#666;}
.form-guide{margin-top:8px;font-size:13px;color:#666;}
.form-textarea{width:100%;height:400px;padding:16px;border:1px solid #dcdcdc;resize:none;font-size:15px;border-radius:8px;}
.file-box{margin-top:20px;}
.file-upload,
.file-view{display:flex;align-items:center;height:52px;padding:0 10px;border:1px solid #ddd; border-radius:8px;background: #fff;} 
.file-upload input{display:none;}
.file-content{flex:1;padding:16px;}
  
.form-select{	appearance:none;	-webkit-appearance:none;-moz-appearance:none;	padding-right:50px;	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23222' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")	#fff	no-repeat		right 16px center;}


/* =========================================
BOARD
========================================= */

.board-list-page{min-height:70dvh; }  
.board-list-page .board-list{display:grid;grid-template-columns:repeat(2,1fr);gap:32px 12px; }
.board-list-page .board-item{display:block;text-decoration:none;color:#111;}
.board-list-page .thumb{overflow:hidden;border-radius:8px;background:#f5f5f5;aspect-ratio:1;}
.board-list-page .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.board-list-page .info{padding-top:12px;}
.board-list-page .info h3{font-size:16px;font-weight:650;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:keep-all;}
.board-list-page .info p{margin-top:6px;font-size:13px;color:#888;} 

.board-write-page{min-height:100dvh; }
.board-view-page{min-height:100dvh;  } 
.board-view-head{text-align:center; margin-top: 20px;}
.board-view-title{font-size:28px;font-weight:600;line-height:1.4;word-break:keep-all;}
.board-view-date{margin-top:14px;font-size:16px;color:#444;}

.board-view-content{margin-top:40px;}
.board-view-content img{width:100%;display:block;}
 
.board-btns{display:flex;flex-direction:column;gap:8px;margin-top:30px;}
.board-btns a,
.board-btns button{display:flex; align-items:center; justify-content:center; text-align: center;}   
.board-prev-next{margin-top:40px;border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
.board-nav-item{display:flex; font-size: 14px;}
.board-nav-item + .board-nav-item{border-top:1px solid #ddd;}
.board-nav-label{width:120px;flex-shrink:0;padding:14px 8px;  }
.board-nav-content{flex:1;padding:14px 8px;color:#555;}


/* =========================================
STATUS BADGE
========================================= */
.status-badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	margin-bottom: 10px;

	min-width:56px;
	height:24px;

	padding:0 10px;

	border-radius:999px;

	font-size:.75rem;
	font-weight:600;
	line-height:1;
}
 
.status-badge.recruiting{
	color:var(--primary);
	background:#e6efed;
	border:1px solid var(--primary);
}
 
.status-badge.closed{
	color:#d97706;
	background:#fff5e6;
	border:1px solid #f0c36d;
}
 

.status-badge.ended{
	color:#666;
	background:#f1f1f1;
	border:1px solid #ddd;
}

/* =========================================
TOP BAR
========================================= */ 
.topbar{
	display:flex;
	align-items:center; 
	gap:10px; 
	height:calc(70px + env(safe-area-inset-top)); 
    padding:  20px;  
	padding-top:calc(20px + env(safe-area-inset-top));
	box-sizing:border-box;
}
.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:650;
	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:650;
	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:650;
	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:calc(100px + env(safe-area-inset-bottom));
	padding:0 24px env(safe-area-inset-bottom); 
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff; 
	border-top:1px solid rgba(0,0,0,.05);
	box-sizing:border-box;
	z-index:2;
}

.bottom-nav ul{
	width: 100%;
	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 BOX
========================================= */

.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:flex-start;
	gap:8px;
}

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

/* CUSTOM CHECK */

.agree-check-icon{
	position:relative; 
	width:22px;
	aspect-ratio:1;

	border:1px solid #ddd;
	background: #fff;
	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 var(--primary);
	border-bottom:2px solid var(--primary);

	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;  
	color:#222;
	line-height: 22px;
}

/* ALL */

.agree-check-item.all{
	padding-bottom:14px;
	margin-bottom:14px; 
	border-bottom:1px solid #ddd;
	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:var(--primary);
	color:#fff;

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


/* =========================================
RADIO
========================================= */

.radio-item{
	display:flex;
	align-items:center;
	gap:10px;

	cursor:pointer;
	margin-bottom: 10px;
}

.radio-item input{
	display:none;
}

.radio-mark{
	position:relative;

	width:22px;
	aspect-ratio:1;
	background: #fff;
	border:1px solid #ccc;
	border-radius:50%;

	flex-shrink:0;

	transition:.2s;
}

.radio-mark:after{
	content:"";

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

	width:10px;
	height:10px;

	border-radius:50%;

	background:var(--primary);

	transform:translate(-50%,-50%) scale(0);

	transition:.2s;
}

.radio-item input:checked + .radio-mark{ 
}

.radio-item input:checked + .radio-mark:after{
	transform:translate(-50%,-50%) scale(1);
}

.radio-label{
	font-size:1rem;
	line-height:1.4;
}


/* =========================================
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:650;
	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:650;

	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:650;
	line-height:1; 
	color:var(--primary);
}

.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: 40px 24px 30px; 
	padding-bottom: calc(env(safe-area-inset-bottom) + 30px);
	display:flex;
	flex-direction:column;
}

.permission-title{
	font-size:1.9rem;
	font-weight:650; 
	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:650;
	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:650;
}



/* =========================================
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:650;
}

/* =========================================
CALLENDAR HEAD
========================================= */

.record-period{
	display:flex;
	align-items:center;
	justify-content:space-between;

	margin-bottom:20px;
}

.record-period-btn{
	width:32px;
	height:32px; 
	border:0;
	border-radius:10px; 
	background:#fff; 
	border:1px solid #ddd;
	display:flex;
	align-items:center;
	justify-content:center;
	background-repeat:no-repeat;
	background-size:20px;
	background-position:center center;
}

.record-period-btn.prev{
	background-image:url('../../assets/images/icon/prev.svg');
}
.record-period-btn.next{
	background-image:url('../../assets/images/icon/next.svg');
}


.record-period-title{
	font-size:1.75rem;
	font-weight:650;
}
 

/* =========================================
CALLENDAR TAB
========================================= */

.record-type{
	display:flex;
	margin-top:40px;

	background:#f5f5f5;
	border-radius:999px;

	padding:6px;
}

.record-type-btn{
	flex:1;

	height:40px;

	border:0;
	background:none;

	border-radius:999px;

	font-size:.95rem;
}

.record-type-btn.active{
	background:var(--primary);
	color:#fff;
}



/* =========================================
TABLE
========================================= */
.data-table-wrap{
	margin-top:20px; 
}

.data-table{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
	border-top:2px solid #ddd; 
}

.data-table th{
	height:42px;  
	vertical-align: middle;
	font-size:.9rem;
	font-weight:650;
	color:#222;  
	border-bottom:1px solid #ddd;
	word-break:break-all;
}

.data-table td{
	padding:14px 2px; 
	border-bottom:1px solid #ddd; 
	text-align:center; 
	font-size:.85rem;
	color:#222;
	vertical-align:middle;
	word-break:break-all;
} 

.data-table td.positive{
	font-weight:650;
	color:var(--primary);
}

.data-table td.negative{
	font-weight:650;
	color:#e74c3c;
}

.data-table td.empty{
	color:#999;
}


/* =========================================
INFO BOX
========================================= */
.info-box{
	padding:20px;
	background:#f5f5f5;
	border-radius:16px;
}

.info-row:not(:last-child){
	margin-bottom:18px;
}

.info-label{
	display:block;

	margin-bottom:4px;

	font-size:.875rem;
	font-weight:600;

	color:#666;
}

.info-value{
	display:flex;
	flex-wrap:wrap;
	gap:10px;

	font-size:1.05rem;
	font-weight:600;
	line-height:1.4;
	color:#222;
}
.info-value strong{
	font-weight: 700;
	color:var(--primary);
}
.info-title{
	margin:24px 0 10px;
	font-size:18px;
	font-weight:650;
}
 
.amount-value{
	font-size:1.6rem;
	font-weight:650;
	color:var(--primary);
}

.participant-badge{
	display:inline-flex; 
	padding:4px 10px; 
	border-radius:999px; 
	background:#fff;
	color:var(--primary);
	border:1px solid var(--primary);

	font-size:.8rem;
	font-weight:650;
}

.participant-info{
	margin-top:10px;
	margin-bottom:15px;
}

/* =========================================
PAYMENT
========================================= */
.payment-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
}

.payment-row:not(:first-child) {
	margin-top:12px;
	padding-top:12px;
	border-top:1px solid #ddd;
}

.payment-label{
	font-size:.9rem;
	color:#666;
}

.payment-value{
	font-size:.95rem;
	font-weight:500; 
}

.payment-row.total{
	margin-top:4px;
	padding-top:8px;
}

.payment-price{
	font-size:1.3rem;
	font-weight:650;
	color:var(--primary);
	line-height: 1.2;
}




/* =========================================
BOTTOM SHEET
========================================= */
.point-sheet{
	position:absolute;
	left:20px;
	right:20px; 
	bottom:calc(120px + env(safe-area-inset-bottom));
	background:#fff;
	border-radius:14px;
	box-shadow:0 4px 16px rgba(0,0,0,.12);
	overflow:hidden;
}

.point-toggle{
	width:100%;
	height:64px;
	padding:0 30px 0 14px;
	border:0;
	background:none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	cursor:pointer;
}

.point-summary{
	display:flex;
	align-items:center;
	gap:4px;
}

.point-summary .label{ 
	width: 40px;
	aspect-ratio:1;
	border-radius:10px;
	overflow:hidden;
	border:1px solid #ddd;
	margin-right: 5px;
}

.point-summary .point{
	font-size:18px;
	font-weight:650;
	color:#111;
}

.point-summary .unit{
	font-size:12px;
	color:#888;
}

.arrow{
	width:10px;
	height:10px;
	border-right:2px solid #222;
	border-bottom:2px solid #222; 
	transform:rotate(-135deg);
	transition:.3s;
	margin-top: 2px;
}

.point-content{
	max-height:0;
	overflow:hidden;
	padding:0 16px;
	transition:max-height .3s ease,padding .3s ease;
	display:flex; align-items:center;
	gap:10px;
}

.point-sheet.active .point-content{
	max-height:200px;
	padding: 0 16px 10px;
	
}

.point-sheet.active .arrow{
	transform:rotate(45deg);
	margin-top: 0;
}

.event-name{
	font-size:14px;
	color:#555;
	margin-bottom:4px;
}

.point-info{
	display:flex;
	align-items:flex-end;
	gap:4px;
	margin-bottom:8px;
}

.point-info strong{
	font-size:24px;
	font-weight:650;
	color:var(--primary);
	line-height: 1.1;
} 



/* =========================================
COMPLETE CONTENT
========================================= */
.complete-box{  text-align: center; margin:30px 0;}
.complete-icon{position:relative;	width:40px;	height:40px;	margin:0 auto  ;border-radius:50%;	background:var(--primary);}
.complete-icon:before{	content:"";	position:absolute;	left:14px;	top:08px;	width:7px;	height:14px;	border-right:4px solid #fff;	border-bottom:4px solid #fff;	transform:rotate(45deg);}




/* =========================================
NAV
========================================= */
.nav-menu-dim{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	opacity:0;
	visibility:hidden;
	transition:.3s;
	z-index:9998;
}

.nav-menu{
	position:absolute;
	top:0;
	right:-100%;
	width:88%;
	max-width:360px;
	height:100dvh;
	background:#fff;
	z-index:9999;
	transition:.35s cubic-bezier(.22,.61,.36,1);
}

.nav-menu.active{
	right:0;
}

.nav-menu.active + .nav-menu-dim,
.nav-menu-dim.active{
	opacity:1;
	visibility:visible;
}

.nav-menu-inner{
	display:flex;
	flex-direction:column;
	height:100%;
	padding:24px;
	padding-top:calc(24px + env(safe-area-inset-bottom));
	padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

.nav-menu-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding-bottom:20px; 
}

.nav-menu-head .menu-logo{ 
	width: 140px;
}

.nav-menu-close{
	width:44px;
	aspect-ratio:1;
	border:0;
	background:none;
	padding:0;
	cursor:pointer; 
	position:relative;
}

.nav-menu-close::before,
.nav-menu-close::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 2px;
    background: #000;
    transform-origin: center;
}

.nav-menu-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-menu-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.nav-menu-profile{ 
	padding:18px 20px; 
	border:1px solid #ddd;
	border-radius:16px;
	display:flex;
	align-items:center;
	gap:14px;
}

.nav-menu-profile strong{
	display:block;
	font-size:18px;
	font-weight:650;  
}

.nav-menu-profile p{ 
	color:#666;
} 
.nav-menu-list{
	margin-top:30px;
}
 

.nav-menu-list a{
	display:flex;
	align-items:center;
	gap:14px;
	padding:10px 0;
	border-radius:14px;
	transition:.2s;
}
 

.nav-menu-list .icon{
	width:56px;
	aspect-ratio:1; 
	border-radius:12px;
	background: #f5f5f5; 
	display:flex;
	align-items:center;
	justify-content:center;
	flex-shrink:0;
}
.nav-menu-list .menu01{
	background: #fff5e8;
}
.nav-menu-list .menu02{
	background: #e8f9ee;
}
.nav-menu-list .menu03{
	background: #fbf6e5;
}
.nav-menu-list .menu04{
	background: #f1effd;
}
.nav-menu-list .menu05{
	background: #f9edf9;
}

.nav-menu-list span{
	font-size:18px;
	font-weight:600;
	color:#222;
}

.nav-menu-bottom{
	margin-top:auto;
	padding-top:20px;
	border-top:1px solid #e5e5e5; 
}

.btn-logout{
	display:flex;
	align-items:center;
	gap:14px; 
}

.user-icon{
	width:44px;
	aspect-ratio:1;
	border-radius:50%;
	background:#f1f1f1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.user-icon img{
	filter: grayscale(1) invert(1);
	width: 24px;
}

.btn-logout span{
	font-size:18px;
	font-weight:600;
	color:#222;
} 



/* ===========================
    Alert Modal
=========================== */

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

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

    padding:20px;

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

    opacity:0;
    visibility:hidden;

    transition:.25s;

    z-index:9999;
}

.alert-modal.active{
    opacity:1;
    visibility:visible;
}


.alert-modal__box{

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

    background:#fff;

    border-radius:14px;

    padding:24px 20px 16px;

    box-sizing:border-box;

    box-shadow:
    0 6px 24px rgba(0,0,0,.12);
}


.alert-modal__text{

    margin:0;
	text-align: center;
    font-size:15px;
    font-weight:500; 

    color:#333;
}


.alert-modal__btns{

    display:flex;
    justify-content:flex-end;
    justify-content: center;
    gap:8px;

    margin-top:24px;
}


.alert-btn{

    /* min-width:64px; */
	width: 100%;
    height:36px;
	line-height: 1;

    padding:0 16px;

    border-radius:8px;

    font-size:14px;
    font-weight:600;

    cursor:pointer;

    transition:.2s;
}


.alert-btn.cancel{

    border:1px solid #d7d7d7;

    background:#fff;

    color:#555;
}


.alert-btn.confirm{

    border:none;

    /* background:#7a7a7a; */
	background: var(--primary);
    color:#fff;
}