@charset "utf-8";
/* ============================================================
   mp_layout_v1.css — 라이브몰프로 myadmin 공통 "레이아웃 + 단독페이지" 스킨
   2026-08-01
   ------------------------------------------------------------
   ① 본문 가로 100%
      common.css 의 body 규칙이  width:100% … padding:24px; width:1855px
      처럼 같은 규칙 안에서 뒤에 1855px 를 다시 선언한다(뒤가 이김).
      그래서 전 관리자 페이지 본문이 1855px 로 고정돼 있었다.
      ※ common.css 자체는 건드리지 않는다.
        되돌릴 땐 _include/header.asp 의 이 파일 link 한 줄만 지우면 원복된다.

   ② 좌측메뉴가 없는 단독/팝업 페이지(주문상세 등)를
      mp_page_v1.css(스코프: html.mpv2 .rightmenuWrap)와 같은 톤으로 맞춘다.
      단독 페이지는 .rightmenuWrap 이 없어 그 스킨이 걸리지 않았다.
      토큰(색·라운드·폰트)은 mp_page_v1.css 와 동일값을 쓴다.
   ============================================================ */

html.mpv2 {
	--mv-primary: #3b82f6;
	--mv-primary-d: #2f6fe0;
	--mv-text: #262626;
	--mv-sub: #64748b;
	--mv-muted: #a4adb2;
	--mv-line: #ebeef2;
	--mv-bg: #f8fafc;
	--mv-card: #ffffff;
	--mv-danger: #ef4444;
	--mv-r-card: 12px;
	--mv-r-ctrl: 8px;
	--mv-font: 'Pretendard Variable', Pretendard, system-ui, -apple-system, 'Malgun Gothic', sans-serif;
}

/* ---------- ① 본문 가로 100% ---------- */
html.mpv2 body {
	width: auto !important;
	max-width: none !important;
	display: block !important;
	box-sizing: border-box;
}
/* 좌측메뉴가 있는 일반 서브페이지는 너무 좁아지면 표가 깨지므로 하한만 둔다.
   (:has 미지원 브라우저에서는 하한 없이 동작 — 깨지지 않는다) */
html.mpv2 body:has(.rightmenuWrap) { min-width: 1600px; }	/* 2026-09-11 khs : 1280 -> 1600. 관리자(admin/css/common.css)와 같은 기준 */

@media print {
	html.mpv2 body { padding: 0 !important; min-width: 0 !important; background: #fff !important; }
}

/* ============================================================
   ② 단독 페이지 (주문상세 계열) — mp_page_v1 과 같은 톤
   ============================================================ */
html.mpv2 .mainTable {
	width: 100% !important;
	max-width: 100% !important;
	font-family: var(--mv-font);
}
html.mpv2 .mainTable td { word-break: break-word; }

/* ---------- 제목 ---------- */
/* ---------- 타이틀 위 여백 축소 (2026-08-01) ----------
   타이틀 위 공백은 세 겹이었다.
     ① common.css 의 body{padding:24px}
     ② .mainTable 인라인 style="padding:10px"
     ③ 타이틀 바로 위, 내용이 .hide(화면밖 배치)인 빈 래퍼 table 의 margin-bottom:20px
   ①은 .mainTable 이 있는 단독 페이지에서만 줄이고(다른 화면 영향 없음),
   ③은 어차피 안 보이는 표라 통째로 감춘다. */
html.mpv2 body:has(.mainTable) { padding-top: 12px !important; }
html.mpv2 .mainTable { padding-top: 0 !important; }
html.mpv2 .mainTable table:has(> tbody > tr.hide) { display: none !important; }
/* :has 미지원 브라우저 대비 — 그 빈 표는 항상 첫 자식이다 */
html.mpv2 .mainTable > tbody > tr > td > table:first-child { margin-bottom: 0 !important; }

/* 2026-08-01 : 요청으로 타이틀 박스(테두리·배경·좌측 액센트바) 제거 — 글자만 남긴다 */
html.mpv2 .mainTable .pageTit {
	box-sizing: border-box;
	display: block;
	margin: 0 0 12px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--mv-text);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.02em;
}
html.mpv2 .mainTable .pageTit::before { content: none; }
html.mpv2 .mainTable .pageTit span { font-size: 13px; font-weight: 400; color: var(--mv-muted); }

html.mpv2 .mainTable .iopTit,
html.mpv2 .mainTable .totalOrderTit,
html.mpv2 .mainTable .ordererTit,
html.mpv2 .mainTable .reciverTit,
html.mpv2 .mainTable .managerTit,
html.mpv2 .mainTable .orderCancleTit,
html.mpv2 .mainTable .partCancleTit,
html.mpv2 .mainTable .botCancleTit {
	margin: 22px 0 10px 0;
	padding: 0;
	color: var(--mv-text);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}
/* 2026-08-01 : 요청으로 「주문고객 정보 · 받는분 정보 · 관리자 메모」 위 여백 제거
   (앞에 붙어 있던 <br> 은 마크업에서 함께 제거했다) */
html.mpv2 .mainTable .ordererTit,
html.mpv2 .mainTable .reciverTit,
html.mpv2 .mainTable .managerTit { margin-top: 0 !important; }
html.mpv2 .mainTable .totalOrderTit { color: var(--mv-text); }

/* ---------- 회색 스캐폴딩(bgcolor + cellspacing) → 1px 라인 ---------- */
html.mpv2 .mainTable table[bgcolor] { background: transparent !important; }
html.mpv2 .mainTable td[bgcolor] { background: #fff !important; }

/* ---------- 표 : 라운딩 카드 ---------- */
html.mpv2 .mainTable .odTopTable,
html.mpv2 .mainTable .deliTable,
html.mpv2 .mainTable .iopTable,
html.mpv2 .mainTable .ordererTable,
html.mpv2 .mainTable .reciverTable,
html.mpv2 .mainTable .managerTable,
html.mpv2 .mainTable .orderCancleTable,
html.mpv2 .mainTable .partCancleTable,
html.mpv2 .mainTable .botCancleTable,
html.mpv2 .mainTable .totalOrderTable {
	width: 100%;
	margin-bottom: 14px;
	border: 1px solid var(--mv-line) !important;
	border-radius: var(--mv-r-card);
	background: var(--mv-card) !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
}
/* ★ overflow:hidden 으로 자르지 않는다(달력·레이어가 잘린다). 모서리는 셀에 준다. */
html.mpv2 .mainTable .odTopTable > tbody > tr:first-child > *:first-child,
html.mpv2 .mainTable .ordererTable > tbody > tr:first-child > *:first-child,
html.mpv2 .mainTable .reciverTable > tbody > tr:first-child > *:first-child,
html.mpv2 .mainTable .managerTable > tbody > tr:first-child > *:first-child,
html.mpv2 .mainTable .iopTable > tbody > tr:first-child > *:first-child { border-top-left-radius: var(--mv-r-card); }
html.mpv2 .mainTable .odTopTable > tbody > tr:first-child > *:last-child,
html.mpv2 .mainTable .ordererTable > tbody > tr:first-child > *:last-child,
html.mpv2 .mainTable .reciverTable > tbody > tr:first-child > *:last-child,
html.mpv2 .mainTable .managerTable > tbody > tr:first-child > *:last-child,
html.mpv2 .mainTable .iopTable > tbody > tr:first-child > *:last-child { border-top-right-radius: var(--mv-r-card); }
html.mpv2 .mainTable .odTopTable > tbody > tr:last-child > *:first-child,
html.mpv2 .mainTable .ordererTable > tbody > tr:last-child > *:first-child,
html.mpv2 .mainTable .reciverTable > tbody > tr:last-child > *:first-child,
html.mpv2 .mainTable .managerTable > tbody > tr:last-child > *:first-child,
html.mpv2 .mainTable .iopTable > tbody > tr:last-child > *:first-child { border-bottom-left-radius: var(--mv-r-card); }
html.mpv2 .mainTable .odTopTable > tbody > tr:last-child > *:last-child,
html.mpv2 .mainTable .ordererTable > tbody > tr:last-child > *:last-child,
html.mpv2 .mainTable .reciverTable > tbody > tr:last-child > *:last-child,
html.mpv2 .mainTable .managerTable > tbody > tr:last-child > *:last-child,
html.mpv2 .mainTable .iopTable > tbody > tr:last-child > *:last-child { border-bottom-right-radius: var(--mv-r-card); }

html.mpv2 .mainTable .ordererTable > tbody > tr > td,
html.mpv2 .mainTable .reciverTable > tbody > tr > td,
html.mpv2 .mainTable .managerTable > tbody > tr > td,
html.mpv2 .mainTable .orderCancleTable > tbody > tr > td,
html.mpv2 .mainTable .partCancleTable > tbody > tr > td,
html.mpv2 .mainTable .botCancleTable > tbody > tr > td {
	border: 0;
	border-bottom: 1px solid var(--mv-line);
	padding: 11px 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mv-text);
	background-clip: padding-box;
}
html.mpv2 .mainTable .ordererTable > tbody > tr:last-child > td,
html.mpv2 .mainTable .reciverTable > tbody > tr:last-child > td,
html.mpv2 .mainTable .managerTable > tbody > tr:last-child > td,
html.mpv2 .mainTable .orderCancleTable > tbody > tr:last-child > td,
html.mpv2 .mainTable .partCancleTable > tbody > tr:last-child > td,
html.mpv2 .mainTable .botCancleTable > tbody > tr:last-child > td { border-bottom: 0; }

/* 라벨 셀 */
html.mpv2 .mainTable .ordererTdTit,
html.mpv2 .mainTable .reciverTdTit,
html.mpv2 .mainTable .managerTdTit,
html.mpv2 .mainTable .orderCancleTdTit,
html.mpv2 .mainTable .partCancleTdTit,
html.mpv2 .mainTable .botCancleTdTit,
html.mpv2 .mainTable .iotTdTit {
	background: var(--mv-bg) !important;
	color: var(--mv-sub) !important;
	font-weight: 600;
	border-right: 1px solid var(--mv-line);
	white-space: nowrap;
}

/* 목록형 표 헤더 */
html.mpv2 .mainTable .odTopTable tr.odtTr > td,
html.mpv2 .mainTable .deliTable tr.deliFirstTr > td {
	background: var(--mv-bg) !important;
	color: var(--mv-sub) !important;
	font-weight: 600;
	border-bottom: 1px solid #e2e6ec;
	padding: 11px 8px;
}
html.mpv2 .mainTable .odTopTable tr.odtProdTr > td,
html.mpv2 .mainTable .deliTable > tbody > tr > td,
html.mpv2 .mainTable .iopTable > tbody > tr > td { padding: 10px 8px; font-size: 13px; }
html.mpv2 .mainTable .odTopTable tr.odtProdTr:hover > td,
html.mpv2 .mainTable .deliTable > tbody > tr:hover > td,
html.mpv2 .mainTable .iopTable > tbody > tr:hover > td { background: #fbfcfd !important; }

/* ---------- 총 주문금액 : 제목 왼쪽 / 금액 오른쪽 ----------
   원본은 한 칸 안에 "라벨 + 금액span" 을 넣고 td 를 통째로 right 정렬해서
   라벨까지 오른쪽으로 밀려 있었다. 셀을 flex 로 바꿔 라벨↔금액을 양끝으로 벌린다. */
/* 화면이 넓어도 라벨과 금액이 멀어지지 않게 폭을 잡고 오른쪽에 붙인다(주문 합계 관례).
   ★제목(총 주문 금액)도 같은 폭·같은 위치로 맞춰 표 바로 위에 오게 한다.
     안 그러면 제목만 화면 왼쪽 끝에 홀로 남는다. */
html.mpv2 .mainTable .totalOrderTit {
	box-sizing: border-box;
	width: 420px;
	max-width: 100%;
	margin: 22px 0 8px auto !important;
	padding: 0 2px;
	text-align: left;
}
html.mpv2 .mainTable .totalOrderTable {
	/* 제목과 표의 왼쪽 끝이 어긋나지 않도록 둘 다 같은 고정폭을 쓴다 */
	width: 420px !important;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: 0 !important;
	border: 1px solid #d9dee6 !important;
	border-radius: var(--mv-r-card);
	overflow: hidden;
}
html.mpv2 .mainTable .totalOrderTable > tbody > tr > td {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 42px;
	padding: 0 0 0 14px;
	border-bottom: 1px solid #e3e7ee;
	font-size: 13px;
	line-height: 1.5;
	text-align: left !important;
	color: var(--mv-sub);
	white-space: nowrap;
}
html.mpv2 .mainTable .totalOrderTable > tbody > tr:last-child > td { border-bottom: 0; }
/* 금액은 세로선으로 구분된 고정폭 칸에 — 자릿수가 세로로 맞는다 */
html.mpv2 .mainTable .totalOrderTable > tbody > tr > td > span {
	width: auto !important;
	min-width: 150px;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto;
	padding: 0 14px;
	border-left: 1px solid #e3e7ee;
	text-align: right;
	color: var(--mv-text);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* 합계 줄 강조 */
html.mpv2 .mainTable .totalOrderTable tr.totalPay > td {
	font-size: 14px;
	font-weight: 700;
	color: var(--mv-text);
	background: var(--mv-bg);
	border-top: 1px solid #d9dee6;
}
html.mpv2 .mainTable .totalOrderTable tr.totalPay > td > span { font-size: 15px; }
html.mpv2 .mainTable .totalOrderTable tr.totalPay > td > span { font-size: 18px; }
html.mpv2 .mainTable .totalOrderTable tr.totalPay > td > span,
html.mpv2 .mainTable .totalOrderTable tr.totalPay > td > span * { color: #b40808; }
/* 첫 줄 위 굵은 선 제거(카드 테두리와 겹침) */
html.mpv2 .mainTable .totalOrderTable .toFirstTr { border-top: 0 !important; }

/* ---------- 결제내역확인 : 라벨/값 정돈 ---------- */
html.mpv2 .mainTable .iopTable > tbody > tr > td { text-align: left !important; vertical-align: middle; }
html.mpv2 .mainTable .iopTable > tbody > tr > td.iotTdTit { text-align: left !important; }
html.mpv2 .mainTable .odCardInfo {
	margin-top: 5px;
	font-weight: 700;
	color: var(--mv-text);
	font-variant-numeric: tabular-nums;
}
html.mpv2 .mainTable .odCardSub { margin-left: 6px; font-weight: 400; color: var(--mv-muted); }

/* 표 안에 다시 들어있는 레이아웃용 표는 건드리지 않는다 */
html.mpv2 .mainTable .ordererTable table,
html.mpv2 .mainTable .reciverTable table,
html.mpv2 .mainTable .managerTable table,
html.mpv2 .mainTable .odTopTable table {
	border: 0 !important; border-radius: 0; background: none !important; margin-bottom: 0;
}
html.mpv2 .mainTable .ordererTable table > tbody > tr > td,
html.mpv2 .mainTable .reciverTable table > tbody > tr > td,
html.mpv2 .mainTable .managerTable table > tbody > tr > td,
html.mpv2 .mainTable .odTopTable table > tbody > tr > td {
	border: 0; padding: 3px 4px; background: none;
}

/* ---------- 입력 컨트롤 ---------- */
html.mpv2 .mainTable input[type='text'],
html.mpv2 .mainTable input[type='password'],
html.mpv2 .mainTable input.box1,
html.mpv2 .mainTable input.box2,
html.mpv2 .mainTable select,
html.mpv2 .mainTable textarea {
	border: 1px solid var(--mv-line);
	border-radius: var(--mv-r-ctrl);
	background-color: #fff;
	color: var(--mv-text);
	font-family: var(--mv-font);
	font-size: 13px;
	box-sizing: border-box;
	outline: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
html.mpv2 .mainTable input[type='text'],
html.mpv2 .mainTable input[type='password'],
html.mpv2 .mainTable input.box1,
html.mpv2 .mainTable select { height: 34px; padding: 0 10px; max-width: 100%; }
/* 인라인 고정폭(560/320px)을 무력화해 화면 폭을 따라가게 */
html.mpv2 .mainTable textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 9px 10px;
	line-height: 1.6;
}
html.mpv2 .mainTable input:focus,
html.mpv2 .mainTable select:focus,
html.mpv2 .mainTable textarea:focus {
	border-color: var(--mv-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
}
/* 옵션 표기 인라인 고정폭 해제 */
html.mpv2 .mainTable td div[style*="width:320px"],
html.mpv2 .mainTable td div[style*="width:270px"] { width: auto !important; max-width: 100%; }

/* ---------- 버튼 ---------- */
html.mpv2 .mainTable .btn_chk,
html.mpv2 .mainTable .btnOther,
html.mpv2 .mainTable .managerTableBTN {
	border-radius: var(--mv-r-ctrl);
	font-family: var(--mv-font);
	font-weight: 600;
	letter-spacing: -0.01em;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
html.mpv2 .mainTable .btn_chk { width: auto; min-width: 88px; height: 38px; padding: 0 18px; font-size: 13px; }
html.mpv2 .mainTable .btnOther { height: 38px; line-height: 36px; font-size: 13px !important; }
html.mpv2 .mainTable .btn_chk:hover,
html.mpv2 .mainTable .btnOther:hover,
html.mpv2 .mainTable .managerTableBTN:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(16, 24, 40, .12);
}
html.mpv2 .mainTable .btnOther:hover { border-color: var(--mv-primary); color: var(--mv-primary); }

/* ---------- 우편번호찾기 버튼 ---------- */
html.mpv2 .mainTable .findAdd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	min-width: 104px;
	height: 34px !important;
	line-height: 1 !important;
	padding: 0 14px;
	margin-left: 6px;
	border: 1px solid var(--mv-line) !important;
	border-radius: var(--mv-r-ctrl);
	background: #fff;
	color: var(--mv-sub);
	font-family: var(--mv-font);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
	vertical-align: middle;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, color .12s ease;
}
html.mpv2 .mainTable .findAdd:hover {
	border-color: var(--mv-primary) !important;
	color: var(--mv-primary);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(16, 24, 40, .12);
}

/* ---------- 관리자 메모 : textarea 가 칸 전체를 쓰도록 ----------
   원인: textarea 가 폭 지정이 없는 안쪽 레이아웃 table 안에 들어 있어
   shrink-to-fit 으로 줄어든다. 안쪽 table 을 100% 로 펴고
   textarea 셀이 남는 폭을 다 갖게 한다(버튼 셀은 최소폭). */
html.mpv2 .mainTable .managerTable > tbody > tr > td > table,
html.mpv2 .mainTable .orderCancleTable > tbody > tr > td > table,
html.mpv2 .mainTable .partCancleTable > tbody > tr > td > table,
html.mpv2 .mainTable .botCancleTable > tbody > tr > td > table { width: 100% !important; table-layout: auto; }
html.mpv2 .mainTable .managerTable > tbody > tr > td > table > tbody > tr > td:first-child { width: 100%; }
html.mpv2 .mainTable .managerTable > tbody > tr > td > table > tbody > tr > td + td { width: 1%; white-space: nowrap; }
/* 라벨열 폭 고정 — 값 칸이 최대한 넓어진다 */
html.mpv2 .mainTable .managerTable > tbody > tr > td.managerTdTit { width: 130px; }
html.mpv2 .mainTable .managerTable textarea { min-height: 84px; }
/* :has 지원 브라우저에서는 textarea 를 품은 모든 안쪽 표에 동일 적용 */
html.mpv2 .mainTable td > table:has(> tbody > tr > td > textarea) { width: 100% !important; }
html.mpv2 .mainTable td > table:has(textarea) > tbody > tr > td:has(> textarea) { width: 100%; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1280px) {
	html.mpv2 .mainTable .odTopTable { table-layout: auto !important; }
}

/* ---------- 인쇄 ---------- */
@media print {
	html.mpv2 .mainTable .btn_chk,
	html.mpv2 .mainTable .btnOther { display: none !important; }
}