/* 마을 레이아웃 및 상단 내비게이션 */
.town-wrapper { position: relative; } 
.town-nav-bar { border-left-color: #ffd700 !important; justify-content: space-between; }
.town-nav-title { color: #ffd700; }

/* 마을 메인 비주얼 영역 */
.town-visual-container {
    position: relative;
    height: 500px;
    border-radius: 8px;
    border: 1px solid #333;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

/* 배경 그라데이션 마스크 */
.town-mask-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%);
    pointer-events: none;
}

/* 하단 고정 내비게이션 바 */
.town-district-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
	border-radius: 0 0 8px 8px;
}

/* 메뉴 아이템 개별 요소 */
.town-menu-item {
    position: relative;
    flex: 1;
	box-sizing: border-box;
}
.town-menu-item:first-child {
	border-radius: 0 0 0 8px;
}
.town-menu-item:last-child {
	border-radius: 0 0 8px 0;
}

/* 1차 메뉴 (하단 바 버튼) */
.menu-1st {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    color: #fff;

    font-weight: 800;
    cursor: pointer;
    transition: background 0.2s;
    position: relative;
}
.menu-1st i {
	margin-right: 5px;
}

/* 2차 메뉴 */
.menu-2nd {
    position: absolute;
    bottom: 58px;
    left: 0;
    right: 0;
    background: rgba(20,20,20,.9);
    display: flex;
    flex-direction: column;

	transform-origin: bottom;
    transform: scaleY(0);
	will-change: transform;
    transition: transform 0.2s ease;
    pointer-events: none;
	
	backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* 마우스 오버 시 위로 슬라이드 */
.town-menu-item:hover .menu-2nd {
	transform-origin: bottom;
    transform: scaleY(1);
	transition: transform 0.2s ease;
    pointer-events: auto;
}

/* 2차 메뉴 내 링크 스타일 */
.menu-2nd a, .menu-2nd .menu-text {
    padding: 14px 20px;
    color: #ccc;
    text-decoration: none;
}

.menu-2nd a {
	border-bottom: 1px solid #333;
}

.menu-2nd a:last-child {
	border-bottom: none;
}

.menu-2nd a:hover {
	background: rgba(240,10,10,.5);
	color: #fff;
}

/* 구역별 카드 공통 및 색상 지정 */
.town-menu-item.shop 	{ background: rgba(20, 25, 30, 0.85); border-top: 3px solid #33c5ff; transition-delay: 0.2s; }
.town-menu-item.pub 	{ background: rgba(30, 25, 20, 0.85); border-top: 3px solid #ffd700; transition-delay: 0.2s; }
.town-menu-item.smithy 	{ background: rgba(30, 20, 20, 0.85); border-top: 3px solid #ff3333; transition-delay: 0.2s; }
.town-menu-item.public 	{ background: rgba(25, 20, 30, 0.85); border-top: 3px solid #a333ff; transition-delay: 0.2s; }
.town-menu-item.shop:hover,
.town-menu-item.pub:hover,
.town-menu-item.smithy:hover,
.town-menu-item.public:hover { border-top: 3px solid transparent; transition-delay: 0s; }
.town-menu-item.shop:hover .menu-1st 		{ color: #33c5ff; }
.town-menu-item.pub:hover  .menu-1st 		{ color: #ffd700; }
.town-menu-item.smithy:hover  .menu-1st 	{ color: #ff3333; }
.town-menu-item.public:hover  .menu-1st 	{ color: #a333ff; }

/* 구역 타이틀 스타일 */
.town-menu-item.shop .menu-2nd a:hover 				{ background: rgba(0, 128, 128, 0.5); }
.town-menu-item.pub .menu-2nd a:hover 				{ background: rgba(128, 128, 0, 0.5); }
.town-menu-item.smithy .menu-2nd a:hover 			{ background: rgba(128, 0, 0, 0.5); }
.town-menu-item.public .menu-2nd a:hover 			{ background: rgba(128, 0, 128, 0.5); }
.town-menu-item.shop .menu-2nd a:first-child		{ border-top: 3px solid #33c5ff; }
.town-menu-item.pub .menu-2nd a:first-child 		{ border-top: 3px solid #ffd700; }
.town-menu-item.smithy .menu-2nd a:first-child 		{ border-top: 3px solid #ff3333; }
.town-menu-item.public .menu-2nd a:first-child 		{ border-top: 3px solid #a333ff; }

/* 버튼 그룹 및 텍스트 줄바꿈 방지 */
.town-btn-group { display: flex; gap: 5px; white-space: nowrap; }
.town-btn-item { flex: 1; padding: 8px 0 !important; }

/* 마을 광장 게시판 (BBS) */
.town-bbs-section { margin-top: 20px; }
.town-bbs-section h4 { border-left-color: #33c5ff !important; }
.town-bbs-form { display: flex; gap: 10px; margin-bottom: 20px; }
.town-bbs-input { flex: 3; height: 45px !important; padding: 0 15px !important; border: 1px solid #444 !important; background: #000 !important; color: #fff !important; }
.town-bbs-submit { width: 120px; height: 45px !important; margin: 0 !important; font-weight: bold !important; }

/* BBS 로그 리스트 */
.town-bbs-log-box { height: 250px; background: rgba(0,0,0,0.3); padding: 10px; border: 1px solid #222; }
.town-bbs-row { padding: 8px; border-bottom: 1px solid #222; }
.town-bbs-name { color: #fff; }
.town-bbs-caret { color: #555; }
.town-bbs-time { color: #666; float: right; }

.town {
  padding-left	: 0px;
  background-image : url(../image/other/town01.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

.colosseum {
  padding-left	: 0px;
  background-image : url(../image/other/colosseum.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

.store {
  padding-left	: 0px;
  background-image : url(../image/other/store.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

.inn {
  padding-left	: 0px;
  background-image : url(../image/other/inn.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

.smith {
  padding-left	: 0px;
  background-image : url(../image/other/smith.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

.auction {
  padding-left	: 0px;
  background-image : url(../image/other/auction.jpg);
  background-position	: top center;
  background-repeat	: no-repeat;
}

/**/
.pagemenu {
	position:absolute;
	top:20px; left:20px;
	width: 40%;
	background:rgba(34,34,34,.85);
	padding: 20px;
	border-radius: 8px;
	border: 1px solid #444;
}
.pagemenu h4 {
	margin: 0 0 12px 0;
	padding: 0 0 5px 10px;
	border-left: 10px solid #33c5ff;
	border-bottom: 1px solid #444;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #33c5ff;
}
.pagemenu .pagesubmenu {
	display: flex;
	gap:10px;
	margin-top: 10px;
	justify-content: space-between;
}
.btn-link {
	display: flex;
	cursor:pointer;
	margin: 0;
	height: 35px;
	background: #333;
	border: 1px solid #555;
	border-radius: 4px;
	color: #eee;
	text-decoration: none;
	align-items: center;
	justify-content: center;
	flex: 1;
	font-weight: bold;
}
.btn-link:hover {
	background: #444;
	border-color: #33c5ff;
}
.btn-link.gray { color: #888; }

.auc-log {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-wrap: nowrap;
	margin-bottom: 4px;
	height: 1.5em;
}
.auc-log-time {
	color:#777; font-weight:normal;
}