@charset "utf-8";
/* ===========================================================================
   회원가입 (자체 구현) — 템나라 member 페이지 톤에 맞춘 스타일
   원본 member.css 를 덮어쓰기 위해 가장 마지막에 로드된다.
   팔레트는 common.css 에서 가져옴: #635bca 주색 / #1f2152 진한 네이비 /
   #616781 본문 회색 / #e6e6e8 경계선
   =========================================================================== */

/* ---------------------------------------------------------------- 4단계 표시 */
ol.join_steps {
	overflow: hidden;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid #e6e6e8;
}
ol.join_steps li {
	float: left;
	position: relative;
	width: 25%;
	padding: 0 0 14px;
	text-align: center;
	color: #a9afbd;
	font-size: 12px;
}
ol.join_steps li .num {
	display: inline-block;
	width: 30px;
	height: 30px;
	line-height: 30px;
	margin-right: 6px;
	border: 1px solid #e6e6e8;
	border-radius: 50%;
	background: #fff;
	color: #a9afbd;
	font-size: 11px;
	vertical-align: middle;
}
ol.join_steps li .nm { vertical-align: middle; }

ol.join_steps li.on { color: #635bca; font-weight: 700; }
ol.join_steps li.on .num {
	border-color: #635bca;
	background: #635bca;
	color: #fff;
}
ol.join_steps li.done { color: #616781; }
ol.join_steps li.done .num {
	border-color: #635bca;
	background: #fff;
	color: #635bca;
}

/* ---------------------------------------------------------------- 유형 선택 */
ul.join_types { overflow: hidden; margin: 0; padding: 0; list-style: none; }
ul.join_types > li {
	float: left;
	width: 47%;
	margin-right: 6%;
	padding: 28px 20px 24px;
	border: 1px solid #e6e6e8;
	background: #fff;
	text-align: center;
	box-sizing: border-box;
}
ul.join_types > li:last-child { margin-right: 0; }
ul.join_types h5 { margin: 0 0 6px; color: #1f2152; font-size: 20px; }
ul.join_types .who { margin: 0 0 18px; color: #616781; font-size: 13px; }
ul.join_types .what {
	margin: 0 0 22px;
	padding: 16px 0 0;
	border-top: 1px solid #e6e6e8;
	list-style: none;
	text-align: left;
}
ul.join_types .what li {
	padding: 4px 0 4px 14px;
	color: #616781;
	font-size: 12.5px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><circle cx='3' cy='3' r='2.2' fill='%23635bca'/></svg>") no-repeat 0 9px;
}
ul.join_types .btn_8type02 {
	display: inline-block;
	width: auto;
	min-width: 150px;
	margin: 0;
	padding: 0 20px;
	height: 42px;
	line-height: 42px;
	background: #635bca;
	border: 1px solid #635bca;
	color: #fff;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}
ul.join_types .btn_8type02:hover { background: #514aa8; border-color: #514aa8; }

/* ---------------------------------------------------------------- 약관 동의 */
ul.join_terms { margin: 0 0 18px; padding: 0; list-style: none; }
ul.join_terms > li {
	position: relative;
	padding: 14px 96px 14px 14px;
	border: 1px solid #e6e6e8;
	border-top: 0;
	background: #fff;
}
ul.join_terms > li:first-child { border-top: 1px solid #e6e6e8; }
ul.join_terms > li.all { background: #f9f9f9; padding-right: 14px; }
ul.join_terms > li.all p { margin: 4px 0 0 24px; color: #a9afbd; font-size: 12px; }
ul.join_terms label { display: block; cursor: pointer; color: #333b58; font-size: 13.5px; }
ul.join_terms label input { margin-right: 8px; vertical-align: -1px; }
ul.join_terms label b { color: #635bca; font-weight: 700; }
ul.join_terms .btn_view {
	position: absolute;
	top: 12px;
	right: 12px;
	padding: 0 10px;
	height: 26px;
	line-height: 24px;
	border: 1px solid #e6e6e8;
	background: #fff;
	color: #616781;
	font-size: 11.5px;
	cursor: pointer;
}
ul.join_terms .btn_view:hover { border-color: #635bca; color: #635bca; }
ul.join_terms .view_box {
	margin: 10px 0 0;
	padding: 12px 14px;
	max-height: 160px;
	overflow-y: auto;
	border: 1px solid #e6e6e8;
	background: #f9f9f9;
	color: #616781;
	font-size: 12px;
	line-height: 1.7;
}
ul.join_terms .view_box p { margin: 0 0 6px; }

/* ---------------------------------------------------------------- 정보 입력 */
table.join_table { width: 100%; border-collapse: collapse; border-top: 2px solid #635bca; }
table.join_table caption { position: absolute; left: -9999px; }
table.join_table th,
table.join_table td {
	padding: 14px 12px;
	border-bottom: 1px solid #e6e6e8;
	text-align: left;
	vertical-align: top;
	font-size: 13px;
}
table.join_table th {
	width: 130px;
	background: #f9f9f9;
	color: #333b58;
	font-weight: 700;
}
table.join_table th b { color: #635bca; }
table.join_table input[type="text"],
table.join_table input[type="password"] {
	width: 260px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #e6e6e8;
	background: #fff;
	color: #333b58;
	font-size: 13px;
	box-sizing: border-box;
}
table.join_table input:focus { border-color: #635bca; outline: none; }
table.join_table input.bad { border-color: #d64545; background: #fff7f7; }
table.join_table input.ok { border-color: #2f9e6b; }

.hint { margin: 6px 0 0; color: #a9afbd; font-size: 11.5px; }
.hint.bad { color: #d64545; }
.hint.ok { color: #2f9e6b; }

.btn_inline {
	margin-left: 6px;
	padding: 0 12px;
	height: 36px;
	vertical-align: top;
	border: 1px solid #635bca;
	background: #fff;
	color: #635bca;
	font-size: 12px;
	cursor: pointer;
}
.btn_inline:hover { background: #f2f1fb; }

/* ---------------------------------------------------------------- 하단 버튼 */
.join_actions { margin-top: 26px; text-align: center; }
.join_actions .btn_next,
.join_actions .btn_prev {
	display: inline-block;
	min-width: 150px;
	height: 46px;
	line-height: 46px;
	margin: 0 5px;
	padding: 0 22px;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
}
.join_actions .btn_next {
	border: 1px solid #635bca;
	background: #635bca;
	color: #fff;
}
.join_actions .btn_next:hover { background: #514aa8; border-color: #514aa8; }
.join_actions .btn_next:disabled {
	border-color: #e6e6e8;
	background: #e6e6e8;
	color: #a9afbd;
	cursor: not-allowed;
}
.join_actions .btn_prev {
	border: 1px solid #e6e6e8;
	background: #fff;
	color: #616781;
}
.join_actions .btn_prev:hover { border-color: #616781; }

/* ---------------------------------------------------------------- 완료 화면 */
.join_done { text-align: center; }
.join_done .big { margin: 10px 0 26px; color: #1f2152; font-size: 19px; }
.join_done .big b { color: #635bca; }
table.done_table { margin: 0 auto 22px; width: 420px; border-top-width: 1px; text-align: left; }
table.done_table th { width: 110px; }
table.done_table td { color: #616781; }

/* ---------------------------------------------------------------- 공통 안내 */
.join_note {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid #e6e6e8;
	background: #f9f9f9;
	color: #616781;
	font-size: 12.5px;
	line-height: 1.9;
}
.join_note.bad { border-color: #f0c6c6; background: #fff7f7; color: #d64545; }
.join_note b { color: #333b58; }
/* 안내문 안의 링크(이미 로그인 상태 안내 등) */
.join_note a { color: #635bca; font-weight: 700; text-decoration: underline; }

/* ---------------------------------------------------------------- 로그인 화면 */
.login_box { max-width: 460px; margin: 0 auto; }
.login_box table.join_table { border-top-width: 1px; }
.login_box table.join_table th { width: 104px; }
.login_box table.join_table input[type="text"],
.login_box table.join_table input[type="password"] { width: 100%; }

.login_keep { margin: 14px 0 0; color: #616781; font-size: 12.5px; }
.login_keep label { cursor: pointer; }
.login_keep input { margin-right: 6px; vertical-align: -1px; }

.login_box .join_actions .btn_next { width: 100%; min-width: 0; margin: 0; }

ul.login_links {
	margin: 20px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid #e6e6e8;
	list-style: none;
	text-align: center;
}
ul.login_links li { display: inline-block; }
ul.login_links li + li::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 10px;
	margin: 0 12px;
	background: #e6e6e8;
	vertical-align: -1px;
}
ul.login_links a { color: #616781; font-size: 12.5px; text-decoration: none; }
ul.login_links a:hover { color: #635bca; text-decoration: underline; }

/* ---------------------------------------------------------------- 마이페이지 */
.mypage_box { max-width: 620px; margin: 0 auto; }
.my_hello { margin: 0 0 20px; color: #1f2152; font-size: 17px; }
.my_hello b { color: #635bca; }
.mypage_box table.join_table { border-top-width: 1px; }
.mypage_box table.join_table th { width: 110px; }
.mypage_box table.join_table td { color: #616781; }

.my_point {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 16px 0 0;
	padding: 18px 20px;
	border: 1px solid #e6e6e8;
	background: #f9f9f9;
}
.my_point span { color: #616781; font-size: 13px; }
.my_point b { color: #635bca; font-size: 21px; }

.my_stats {
	display: flex;
	margin: 12px 0 0;
	border: 1px solid #e6e6e8;
	background: #fff;
}
.my_stats > div {
	flex: 1 1 0;
	padding: 16px 10px;
	text-align: center;
	border-right: 1px solid #e6e6e8;
}
.my_stats > div:last-child { border-right: 0; }
.my_stats span { display: block; margin-bottom: 6px; color: #a9afbd; font-size: 12px; }
.my_stats b { color: #333b58; font-size: 17px; }

/* ---------------------------------------------------------------- 마일리지 */
.mile_box { max-width: 640px; margin: 0 auto; }
.mj_sub { margin: 32px 0 10px; padding-top: 20px; border-top: 1px solid #e6e6e8; color: #1f2152; font-size: 15px; }
.mj_quick { margin: 12px 0 0; }
.mj_quick .btn_inline { margin: 0 6px 0 0; }
.mj_dim { color: #a9afbd; font-size: 12px; }
.mj_account { margin: 0; color: #616781; font-size: 13px; }
.mj_empty { padding: 26px 0 !important; color: #a9afbd !important; text-align: center !important; }
.mj_plus { color: #2f9e6b !important; font-weight: 700; }
.mj_minus { color: #d64545 !important; font-weight: 700; }
table.mj_log thead th { background: #f9f9f9; font-size: 12px; color: #333b58; }
table.mj_log td { font-size: 12.5px; }

/* ---------------------------------------------------------------- 거래 내역 */
ul.trade_tabs { overflow: hidden; margin: 0 0 18px; padding: 0; list-style: none; border-bottom: 1px solid #e6e6e8; }
ul.trade_tabs li { float: left; }
ul.trade_tabs li a { display: block; padding: 11px 22px; color: #616781; font-size: 13px; text-decoration: none; border-bottom: 2px solid transparent; }
ul.trade_tabs li.on a { color: #635bca; font-weight: 700; border-bottom-color: #635bca; }
table.trade_tbl { margin-top: 16px; }
table.trade_tbl thead th { background: #f9f9f9; font-size: 12px; color: #333b58; }

/* ---------------------------------------------------------------- 관리자 상품관리 */
.adm_box { max-width: 100%; }
.adm_cards { display: flex; gap: 12px; margin-bottom: 20px; }
.adm_card {
	flex: 1 1 0;
	padding: 16px 18px;
	border: 1px solid #e6e6e8;
	background: #fff;
}
.adm_card.mine { border-color: #cfc9f0; background: #faf9ff; }
.adm_card.sync { background: #f9f9f9; }
.adm_card span { display: block; color: #616781; font-size: 12px; }
.adm_card b { display: block; margin: 6px 0 4px; color: #1f2152; font-size: 24px; }
.adm_card.mine b { color: #635bca; }
.adm_card em { color: #a9afbd; font-size: 11.5px; font-style: normal; }

.adm_filter { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.adm_tabs { display: flex; border: 1px solid #e6e6e8; }
.adm_tab {
	padding: 0 16px; height: 34px;
	border: 0; border-right: 1px solid #e6e6e8;
	background: #fff; color: #616781; font-size: 12.5px; cursor: pointer;
}
.adm_tab:last-child { border-right: 0; }
.adm_tab.on { background: #635bca; color: #fff; font-weight: 700; }
.adm_search {
	width: 240px; height: 34px; padding: 0 10px;
	border: 1px solid #e6e6e8; background: #fff; color: #333b58; font-size: 13px;
	box-sizing: border-box;
}
.adm_search:focus { border-color: #635bca; outline: none; }

table.adm_tbl { font-size: 12.5px; }
table.adm_tbl thead th { background: #f9f9f9; font-size: 11.5px; color: #333b58; white-space: nowrap; }
table.adm_tbl td { padding: 11px 10px; }
.src_badge {
	display: inline-block; padding: 2px 8px; border-radius: 3px;
	font-size: 11px; font-weight: 700; white-space: nowrap;
}
.src-admin { background: #eceaf9; color: #514aa8; }
.src-member { background: #fff2e0; color: #b26a00; }

/* 상태 배지: 판매중 / 거래중 / 거래완료 ------------------------------- */
.st_badge {
	display: inline-block; padding: 2px 9px; border-radius: 3px;
	font-size: 11px; font-weight: 700; white-space: nowrap;
}
.st-active  { background: #eef7ee; color: #2f8f4e; }
.st-trading { background: #fff6e6; color: #c07a12; }
.st-done    { background: #eceef2; color: #6b7280; }
.st-hidden  { background: #f0f1f5; color: #9aa0aa; }
.st-soldout { background: #f0f1f5; color: #9aa0aa; }

/* 관리자: 자동 변동 실행 줄 + 거래 내역 패널 */
.adm_run {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 14px; padding: 10px 14px;
	border: 1px dashed #d8d5ee; background: #fbfaff; font-size: 12px; color: #616781;
}
.adm_run .mj_dim { font-size: 11.5px; }
.adm_trades { margin-top: 26px; border: 1px solid #e6e6e8; background: #fff; }
.adm_trades h3 {
	margin: 0; padding: 12px 16px; border-bottom: 1px solid #e6e6e8;
	font-size: 13px; color: #1f2152; background: #f9f9f9;
}
.adm_trades h3 em { margin-left: 8px; color: #a9afbd; font-size: 11.5px; font-style: normal; font-weight: 400; }
.adm_trades table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm_trades th, .adm_trades td { padding: 9px 12px; border-bottom: 1px solid #f0f0f2; text-align: left; }
.adm_trades thead th { background: #fcfcfd; font-size: 11.5px; color: #333b58; white-space: nowrap; }
.adm_trades .auto_tag { color: #a9afbd; font-size: 11px; }

/* ------------------------------------------------ 관리자 왼쪽 메뉴 (세로)
   사용자 요청: 「옆에다 세로 회원관리 기본관리 입출금관리 상품관리 세로 쭉
   내려오고 클릭하면 [해당]창이 보이게 하고. 주메인창은 안보이게 해줘」

   자리는 본문 왼쪽 `.aside` 기둥(전역 CSS 로 300px, float:left).
   실측(1600px): aside x=50 w=300 / .content 안쪽 padding 80px → 내용은 x=350 부터.
   그래서 300px 안에 세로로 쌓으면 본문을 침범하지 않는다.

   변천사: ①본문 위 가로탭 → ②왼쪽 세로 → ③상단바 오른쪽 가로 → ④왼쪽 세로(지금)
   되돌리기: tools/patch_admin_menu.py --restore */
.adm_nav { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid #e6e6e8; }
.adm_nav_tit {
	margin: 0 0 10px; font-size: 11.5px; font-weight: 700;
	color: #9aa0aa; letter-spacing: .06em;
}
/* 왼쪽에 세로로 '쭉' 내려오는 클릭 목록.
   왼쪽 3px 색띠가 지금 위치를 한 눈에 알려준다. */
.adm_nav a {
	display: block; padding: 11px 12px 11px 13px; margin-bottom: 3px;
	border-left: 3px solid transparent; border-radius: 6px;
	color: #616781; font-size: 13px; font-weight: 700;
	text-decoration: none; transition: background .12s, color .12s, border-color .12s;
}
.adm_nav a:hover { background: #f4f3fd; color: #635bca; border-left-color: #cfc9f2; }
.adm_nav a.on { background: #635bca; color: #fff; border-left-color: #3f37a8; }
.adm_nav a.on:hover { background: #574fbb; color: #fff; border-left-color: #322b8c; }
.adm_nav .nav_dot {
	display: inline-block; margin-left: 6px; padding: 0 6px;
	background: #e24b4b; color: #fff; border-radius: 9px;
	font-size: 10px; font-weight: 700; line-height: 16px; vertical-align: 1px;
}
.adm_nav a.on .nav_dot { background: #fff; color: #635bca; }

/* 좁은 화면에서는 왼쪽 기둥이 위로 올라가므로 메뉴도 가로로 눕힌다 */
@media (max-width: 1100px) {
	.adm_nav { display: flex; flex-wrap: wrap; gap: 4px; }
	.adm_nav_tit { width: 100%; margin-bottom: 4px; }
	.adm_nav a { margin-bottom: 0; border-left: 0; border-bottom: 3px solid transparent; }
	.adm_nav a:hover { border-bottom-color: #cfc9f2; }
	.adm_nav a.on { border-bottom-color: #3f37a8; }
}

/* ------------------------------------------------ VIP 등급 배지 (관리자 전용) */
.vip_badge {
	display: inline-block; padding: 2px 9px; border-radius: 3px;
	font-size: 11px; font-weight: 700; white-space: nowrap;
}
.vip_badge.vip0 { background: #f0f1f5; color: #9aa0aa; }
.vip_badge.vip1 { background: #eef4ff; color: #3a6fd8; }
.vip_badge.vip2 { background: #eaf6ee; color: #2f8f4e; }
.vip_badge.vip3 { background: #fff6e6; color: #c07a12; }
.vip_badge.vip4 { background: #fdeef0; color: #d1495b; }
.vip_badge.vip5 { background: #f3ecfd; color: #7a3fd1; }

.btn_primary { background: #635bca; border-color: #635bca; color: #fff; }
.btn_primary:hover { background: #514aa8; }

/* ------------------------------------------------ 회원 편집 패널 */
.mem_panel { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; background: rgba(24,26,40,.45); }
.mem_panel.open { display: block; }
.mem_panel_box {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: 720px; max-width: 96vw; background: #fff;
	box-shadow: -8px 0 32px rgba(0, 0, 0, .18);
	display: flex; flex-direction: column;
}
.mem_panel_head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 22px; border-bottom: 1px solid #e6e6e8; background: #faf9ff;
}
.mem_panel_head b { font-size: 15px; color: #1f2152; }
.mem_x { width: 30px; height: 30px; border: 0; background: transparent; font-size: 22px; line-height: 1; color: #9aa0aa; cursor: pointer; }
.mem_x:hover { color: #1f2152; }
.mem_panel_body { flex: 1; overflow-y: auto; padding: 18px 22px 40px; }

.mem_grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 12px; align-items: center; margin-bottom: 6px; }
.mem_grid > label { color: #616781; font-size: 12.5px; }
.mem_grid > div { font-size: 13px; color: #333b58; }

.mem_h4 { margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #eef0f5; font-size: 13px; color: #1f2152; }
.mem_h4 .mj_dim { font-weight: 400; font-size: 11.5px; }

.mem_actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.mem_actions .btn_inline { height: 34px; }
.mem_tbl td { vertical-align: top; }

.adm_pager { margin-top: 16px; text-align: center; }
.adm_pager .btn_inline { margin: 0 6px; }
.adm_pager .btn_inline:disabled { color: #c9ccd6; border-color: #e6e6e8; cursor: not-allowed; }

/* 관리자 상품관리: .content_wrap 이 1000px 고정이라 표가 눌린다.
   이 페이지만 넓혀준다.
   ★ 2026-10-18: 왼쪽 `.aside` 는 300px 인데 본문 margin-left 가 220px 이라
     **80px 겹쳤다**. 그래서 카드 첫 버튼(저장)이 왼쪽 메뉴 위에 얹혀 보였다.
     aside 폭 + 여백(20px) 으로 맞춘다. */
#member_con1 .content_wrap:has(.adm_box) { width: auto; max-width: 1500px; padding: 0 20px; }
#member_con1 .content_wrap:has(.adm_box) .content { width: auto; float: none; margin-left: 320px; }

/* 좁은 화면 */

/* 좁은 화면 */
@media (max-width: 760px) {
	ul.join_types > li { float: none; width: 100%; margin: 0 0 14px; }
	table.join_table th { width: 96px; }
	table.join_table input[type="text"],
	table.join_table input[type="password"] { width: 100%; }
	table.done_table { width: 100%; }
}

/* ============================================================
   휴대폰 / 태블릿 (폭 900px 이하)
   ------------------------------------------------------------
   ★ 이 페이지들만 viewport 가 `width=device-width` 다.
     미러 원본 페이지는 고정폭이라 서버가 `width=1200` 을 끼워 넣고
     화면 전체를 축소한다(글씨가 1/3 이 되어 못 읽는다).
     여기 페이지들은 우리가 만든 것이므로 폭을 **진짜로** 풀어준다.
     표식 `<!--tem-responsive-->` 가 있으면 서버가 셰임을 건너뛴다.

   원본 CSS 가 박아둔 고정폭:
     div.content_wrap { width:1000px }   div.aside { width:300px }
     div.content      { width:700px  }   #new_member_header .inner { width:1000px }
     #footer          { width:687px  }

   ★★ 원본 CSS 는 `<body>` 안에서 **join.css 뒤에** 로드된다
      (build_join.py 가 head 에 join.css, body 에 원본 CSS 를 넣는다).
      그래서 같은 선택자끼리는 **원본이 이긴다.** 고정폭을 풀려면
      선택자의 명시도를 한 단계 올려야 한다 → 앞에 `body` 를 붙인다.
      (실제로 `div#member_wrap div.aside` 만 썼더니 float:left 그대로여서
       카드가 27px 폭으로 찌그러졌다)
   ============================================================ */
@media (max-width: 900px) {
	/* ---- 헤더 / 푸터 ---- */
	body #new_member_header .inner { width: auto; padding: 0 14px; }
	body #new_member_header .gnb > li > a { font-size: 12px; letter-spacing: -.4px; }
	body div#member_wrap #footer { width: auto; padding: 40px 14px 56px; }

	/* ---- 본문 고정폭 풀기 (aside 를 위로 올리고 content 를 아래로) ---- */
	body div#member_wrap div#member_con1 { margin-top: 18px; }
	body div#member_wrap div.content_wrap,
	body #member_con1 .content_wrap:has(.adm_box) {
		width: auto; max-width: none;
		padding: 0 14px; box-sizing: border-box;
	}
	body div#member_wrap div.aside { float: none; width: auto; }
	body div#member_wrap div.content { float: none; width: auto; }
	body #member_con1 .content_wrap:has(.adm_box) .content { margin-left: 0; }

	/* ---- 왼쪽 큰 제목 ---- */
	body div#member_wrap div.aside h2.tit_content { font-size: 30px; line-height: 1.22; }
	body div#member_wrap div.aside p { margin-top: 12px; font-size: 12.5px; line-height: 1.6; }

	/* ---- 관리자 메뉴: 손가락으로 누르는 칩 (세로 목록 → 가로 줄바꿈) ----
	   휴대폰에서 세로 5칸은 본문을 너무 아래로 밀어낸다. */
	.adm_nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; }
	.adm_nav_tit { width: 100%; margin: 0 0 4px; }
	.adm_nav a {
		margin: 0; padding: 9px 13px; font-size: 13px; border-radius: 8px;
		border-left: 0; border-bottom: 3px solid transparent;
	}
	.adm_nav a:hover { border-bottom-color: #cfc9f2; }
	.adm_nav a.on, .adm_nav a.on:hover { border-bottom-color: #3f37a8; }

	/* ---- 요약 카드 2열 ---- */
	.adm_cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.adm_card { padding: 10px 12px; }
	.adm_card b { font-size: 19px; }

	/* ---- 넓은 표는 **가로 스크롤**. 칸을 찌그러뜨리면 아무것도 못 읽는다 ---- */
	.adm_box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.adm_box table { min-width: 860px; }

	/* ---- 회원 편집 패널: 오른쪽 720px → 화면 전체 ---- */
	.mem_panel_box { width: 100%; max-width: 100vw; }
	.mem_grid { grid-template-columns: 84px minmax(0, 1fr); }

	/* ---- 폼 박스들 ---- */
	.login_box, .mypage_box, .mile_box { max-width: none; }
	.join_actions { display: flex; flex-wrap: wrap; gap: 8px; }
	.join_actions .btn_next, .join_actions .btn_prev {
		flex: 1 1 130px; min-width: 0; margin: 0;
	}

	/* ---- 표 안의 입력칸은 폭을 넘지 않게 ---- */
	body table.join_table,
	body table.done_table { table-layout: fixed; width: 100%; }
	body table.join_table th,
	body table.join_table td { width: auto; min-width: 0; }
	body table.join_table input[type="text"],
	body table.join_table input[type="password"],
	body table.join_table select,
	body table.join_table textarea { width: 100%; box-sizing: border-box; }

	/* ---- 마일리지 내역처럼 표가 길어지면 **그 상자만** 가로 스크롤 ---- */
	body .mile_box,
	body .mypage_box { overflow-x: auto; -webkit-overflow-scrolling: touch; }

	/* ---- 필터 줄: 탭이 눌려서 '전체' 가 두 줄로 깨지지 않게 ----
	   탭은 줄이지 말고 가로 스크롤, 검색칸은 남는 폭만큼만. */
	.adm_tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 auto; }
	.adm_tab { flex: 0 0 auto; white-space: nowrap; padding: 0 13px; }
	.adm_filter { gap: 6px; }
	.adm_filter .adm_search,
	.adm_filter input[type="text"],
	.adm_filter select { max-width: 100%; }
	.adm_search { width: 100%; min-width: 0; }

	/* ---- 회원가입 단계 표시 ---- */
	ol.join_steps li { font-size: 11px; }
	ol.join_steps li .num { width: 24px; height: 24px; line-height: 24px; font-size: 12px; }
}


/* tem-admin-support-nav */
/* 관리자 메뉴 = 5개 고정. 상품상담/고객센터 관리는 그 아래 하위 항목으로 붙인다. */
.adm_nav a.adm_nav_sub { font-size: 12px; padding-left: 18px; color: #6b6f86;
  background: #fbfbfe; border-left-color: #eeeef6; }
.adm_nav a.adm_nav_sub::before { content: "↳"; margin-right: 5px; color: #a9adc0; }
.adm_nav a.adm_nav_sub:hover { background: #f4f3fd; color: #635bca; }
.adm_nav a.adm_nav_sub.on { background: #eae7fb; color: #4d478f; font-weight: 800;
  border-left-color: #b9b1ec; }