/*
 * 공용 한 장 목록 화면을 앱 틀에 — 경매(auctions.html) · 분양관리(contracts · wholesale-records · transfer-receive 목록).
 * (2026-10-15 사용자: "경매 탭이 다른 탭들(분양·개체관리)과 UI 구성 자체가 다름") — 개체(02/m02)·메이팅(matings/m-matings)과 같은 틀.
 *   html.app-d = 컴퓨터: 위 메뉴 줄(css/shell-desktop.css · 마크업 .shell > aside.side + header.top) · 본문 폭·여백·제목 줄 = 02·메이팅(.page)과 같게.
 *   html.app-m = 휴대폰: 아래 탭 줄(css/m-shell.css) · 머리 = 메이팅과 같은 큰 제목(28) + 오른쪽 [알림] · 본문 여백 16.
 *   틀 고르기 = js/app-frame-boot.js(<head>), 동작 = js/app-frame.js. 틀 없는 화면(받을 개체 ?id= 상세)은 html.app-frame 이 없어 옛 모양 그대로.
 * 이 파일은 화면 CSS(contract-pages · auction · wholesale) 뒤에 둔다 — 배치만, 공통 부품은 다시 칠하지 않는다.
 */

/* 틀 마크업 — 컴퓨터가 아니면 메뉴 줄을 숨기고, 틀 안이면 옛 "‹ 뒤로 / 매장 …" 머리를 숨긴다(요소·훅은 그대로) */
html:not(.app-d) .shell > .side,html:not(.app-d) .shell > .main > header.top{display:none!important;}
html.app-frame .cp-top{display:none!important;}

/* ---------- 컴퓨터 ---------- */
html.app-d .main > .cp-main{width:100%;max-width:var(--page-max);margin:0 auto;padding:var(--s4) var(--s8) var(--s16);gap:var(--s4);}
/* 제목 줄 = 02 .page-head 와 같은 자리(위 16 · 아래 합 24) — 제목 + 건수 한 줄, 오른쪽 주 버튼 하나 */
html.app-d .cp-main > .cp-head{margin:var(--s4) 0 var(--s2);align-items:flex-end;}
html.app-d .cp-head .page-title{font-size:var(--t-3xl);}
html.app-d .cp-head .page-sub{margin:var(--s2) 0 0;font-size:var(--t-lg);}
html.app-d .cp-head .cp-head-pri{align-self:flex-end;}
@media (max-width:600px){ html.app-d .main > .cp-main{padding-inline:var(--s2);} }

/* ---------- 휴대폰 ---------- */
html.app-m .cp-main{max-width:none;padding:0 var(--s4) var(--s6);gap:var(--s3);}
/* 머리 = [큰 제목 ······ 알림] / 건수 한 줄(있으면) — m-matings .top 과 같은 높이·글자 */
html.app-m .cp-main > .cp-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s1) var(--s2);
  min-height:64px;margin:0;padding-top:var(--s2);}
html.app-m .cp-head > .cp-head-t{display:contents;}
html.app-m .cp-head .page-title{grid-column:1;grid-row:1;min-width:0;font-size:var(--t-2xl);line-height:1.2;overflow-wrap:anywhere;}
html.app-m .cp-head > .ms-bell{grid-column:2;grid-row:1;margin:0;}
html.app-m .cp-head .page-sub{grid-column:1 / -1;grid-row:2;margin:0;font-size:var(--t-md);line-height:1.5;}
/* 머리 주 버튼(경매 열기 등)은 휴대폰에서 아래 탭 줄 가운데 큰 버튼이 대신한다 */
html.app-m .cp-head > .cp-sp,html.app-m .cp-head > .cp-head-pri,html.app-m .cp-head > :empty:not(.ms-bell){display:none!important;}

/* 목록 아래 한 번 하는 일 줄(분양관리 "계약서 정보") — 경매 "비회원 기록 가져오기"(.au-claim-entry)와 같은 모양의 행 하나 */
.fr-once{margin-top:var(--s2);background:var(--panel);border-radius:var(--r-xl);box-shadow:var(--sh-1);padding:var(--s1);}
.fr-once[hidden]{display:none!important;}

@media print{
  .shell > .side,.shell > .main > header.top,.ms-tabbar,.ms-fab,.fr-once{display:none!important;}
  html.app-d .main > .cp-main,html.app-m .cp-main{padding:0;max-width:none;}
}