/* 사용자 앱 보조 화면 공통 (2026-11-04 사용자 지시 "화면 중 데스크탑 사이즈 화면이 섞여있어. 화면비 구조 기본 사이즈로 모두 통일")
 * - 옛 PC 레이아웃(layouts/user-head, public/user.css, usr-* 클래스)에 있던 화면을 앱 레이아웃(layouts/user-app-head, 폭 430px)으로 옮긴 `-app` 뷰들이 함께 읽는 CSS.
 *   대상: 앱 관리 · 입찰 준비(목록·입력·삭제·일정) · 이용권(안내·구매 확인·내 이용권) · 주문(목록·상세) · 공지/이용 안내 · 저장 조건/사건 알림 ·
 *   알림함/관심 물건/알림 설정/최근 본 물건 · 지역 찾기 · 서비스 이용 안내 · 고객센터(안내·FAQ·문의 목록·상세·접수).
 * - v15 레이아웃(user-app-head, body.app--v15 회색 바탕) 하위 화면. user-tokens.css 의 토큰만 쓰고 색·크기 값을 따로 두지 않습니다. 인라인 style 없음(CSP).
 * - 클래스 이름은 pg-*. 앱 부품(app-pill 등)은 user-app.css 것을 그대로 씁니다. user.css 는 읽지 않습니다(바탕·폭 규칙이 부딪힘).
 * - 표(입찰 일정 달력)·긴 글은 430px 폭에서 가로로 넘치지 않게 줄바꿈 허용 + 표 감싸기만 하고, 열·정보를 숨기지 않습니다. */

.pg-main {
  padding-top: var(--space-4);
  overflow-wrap: anywhere;
}

/* ---------- 상자 · 제목 · 글 ---------- */
.pg-card {
  margin: 0 0 var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
}

.pg-card > :last-child {
  margin-bottom: 0;
}

.pg-lead {
  margin: var(--space-1) 0 var(--space-3);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-heavy);
  line-height: var(--font-leading-xl);
  letter-spacing: var(--font-tracking-heading);
}

.pg-sec {
  margin: var(--space-6) 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-section) solid var(--color-border-inverse);
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-xl);
}

.pg-main > .pg-sec:first-child,
.pg-card > .pg-sec:first-child {
  margin-top: 0;
}

.pg-sub {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-lg);
}

.pg-text {
  margin: 0 0 var(--space-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-relaxed);
}

.pg-muted {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.pg-muted--tight {
  margin-bottom: var(--space-1);
}

/* 회원이 쓴 글 (2026-10-30 사용자 "유저가 작성한 내용에 대해서는 어떠한 오차도 없이 저장되거나 보여져야 해", 옛 user.css .usr-text · .usr-text-block · .usr-text-line 과 같은 규칙)
 * - .pg-user-text: 제목 · 연락처 · 조건 이름처럼 한 덩어리 글 — 겹친 공백 · 탭을 그대로(pre-wrap), 띄어쓰기 없는 긴 글은 칸 안에서 줄바꿈,
 *   오른쪽→왼쪽 글 · 방향 문자가 둘레 글자 순서를 바꾸지 않게 따로 둠(isolate).
 * - .pg-textblock > p: 본문 한 줄씩(view-model lines). 빈 줄도 한 줄 높이로 남김. */
.pg-user-text {
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  white-space: pre-wrap;
}

.pg-textblock {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-relaxed);
  overflow-wrap: anywhere;
  unicode-bidi: isolate;
  white-space: pre-wrap;
}

.pg-textblock p {
  min-height: 1.6em;
  margin: 0;
  white-space: pre-wrap;
}

.pg-text a,
.pg-muted a,
.pg-textblock a,
.pg-check a {
  color: var(--color-text-primary);
  text-decoration: underline;
}

.pg-steps {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-relaxed);
}

.pg-steps li {
  margin-bottom: var(--space-2);
}

.pg-steps a {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

/* ---------- 알림 상자 ---------- */
.pg-alert,
.pg-notice,
.pg-warn {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-3_5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-md);
}

.pg-alert {
  background: var(--color-verdict-risk-bg);
  color: var(--color-verdict-risk-text);
}

.pg-notice {
  background: var(--color-info-bg);
  color: var(--color-text-primary);
}

.pg-warn {
  background: var(--color-verdict-caution-bg);
  color: var(--color-verdict-caution-text);
}

/* ---------- 목록 한 건 ---------- */
.pg-item {
  margin: 0 0 var(--space-3);
  padding: var(--space-3_5) var(--space-4);
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.pg-item > :last-child {
  margin-bottom: 0;
}

.pg-item__title {
  margin: 0 0 var(--space-1_5);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-lg);
}

.pg-item__title a {
  color: var(--color-text-primary);
  text-decoration: none;
}

.pg-item__meta {
  margin: 0 0 var(--space-1_5);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
}

.pg-item__meta time {
  font-variant-numeric: tabular-nums;
}

.pg-item__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

.pg-item .pg-btn {
  margin-top: var(--space-2);
}

/* 이름 · 값 줄 (결제 상세 · 구매 확인) */
.pg-dl {
  margin: 0 0 var(--space-3);
  padding: var(--space-1) 0;
}

.pg-dl__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2_5) 0;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-md);
}

.pg-dl__row:last-child {
  border-bottom: 0;
}

.pg-dl__row dt {
  flex: none;
  color: var(--color-text-secondary);
}

.pg-dl__row dd {
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: right;
}

/* ---------- 아래 이동 링크 줄 · 쪽 넘김 ---------- */
.pg-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.pg-links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
}

.pg-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}

.pg-pager a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding-inline: var(--space-2);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* 일정 달 이동 (이전 달 · 이번 달 · 다음 달) */
.pg-monthnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-3) 0;
  font-variant-numeric: tabular-nums;
}

.pg-monthnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
}

/* ---------- 버튼 ---------- */
.pg-btn,
.pg-main .usr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-hit-min);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-inverse);
  border-radius: var(--radius-md);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font: inherit;
  font-size: var(--font-size-md_5);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.pg-btn:active {
  background: var(--color-bg-inverse-pressed);
}

.pg-btn--line,
.pg-main .usr-btn--secondary {
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.pg-btn--danger {
  border-color: var(--color-brand-primary);
  background: var(--color-brand-primary);
}

.pg-btn--block {
  display: flex;
  width: 100%;
}

.pg-btn[disabled],
.pg-main .usr-btn[disabled] {
  border-color: var(--color-action-disabled);
  background: var(--color-action-disabled);
  color: var(--color-text-inverse);
  cursor: default;
}

.pg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

/* ---------- 입력 칸 ---------- */
.pg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.pg-field {
  display: grid;
  gap: var(--space-1_5);
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-md);
}

.pg-input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--layout-hit-min);
  padding: var(--space-2_5) var(--space-3_5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--font-size-lg);              /* 16px — 모바일 확대 방지 */
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-compact);
}

textarea.pg-input {
  min-height: calc(var(--layout-hit-min) * 3);
  line-height: var(--font-leading-md);
  resize: vertical;
}

.pg-input:focus {
  border-color: var(--color-border-inverse);
}

.pg-fieldset {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.pg-fieldset legend {
  padding: 0;
  margin-bottom: var(--space-1_5);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.pg-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2_5);
  min-height: var(--layout-hit-min);
  padding: var(--space-2) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-md);
}

.pg-check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--color-bg-inverse);
}

/* 검색 줄: 입력 칸 + 찾기 버튼 */
.pg-search {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.pg-search .pg-field {
  flex: 1 1 0;
  min-width: 0;
}

.pg-search .pg-btn {
  flex: none;
}

/* 분류 · 상태 거르기 (select + 버튼 + 입력 칸) */
.pg-filter {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}

/* ---------- 자주 묻는 질문 ---------- */
.pg-faq {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-4);
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.pg-faq summary {
  display: flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding: var(--space-2) 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-md);
  cursor: pointer;
}

.pg-faq[open] summary {
  border-bottom: 1px solid var(--color-border-divider);
}

.pg-faq p {
  margin: var(--space-3) 0;
  font-size: var(--font-size-md);
  line-height: var(--font-leading-relaxed);
}

/* ---------- 입찰 일정 달력 (430px 폭: 7칸 고정 폭, 넘치면 가로 스크롤) ---------- */
.pg-table-wrap {
  margin: var(--space-3) 0;
  overflow-x: auto;
}

.pg-calendar {
  width: 100%;
  min-width: 300px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-sm);
}

.pg-calendar caption {
  padding-bottom: var(--space-2);
  color: var(--color-text-secondary);
  text-align: left;
}

.pg-calendar th,
.pg-calendar td {
  padding: var(--space-1_5) var(--space-0_5);
  border: 1px solid var(--color-border-default);
  text-align: center;
}

.pg-calendar td {
  height: 3.4rem;
  vertical-align: top;
  background: var(--color-bg-surface);
}

.pg-calendar td span,
.pg-calendar td a {
  display: block;
}

.pg-calendar td a {
  margin-top: var(--space-0_5);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
  text-decoration: underline;
}

/* ---------- 앱 관리 기기 목록(스크립트가 li 를 채움) ---------- */
.pg-devices {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.pg-devices li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-divider);
  font-size: var(--font-size-md);
}

/* 지역 찾기 결과 */
.pg-regions {
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.pg-regions li {
  border-bottom: 1px solid var(--color-border-divider);
}

.pg-regions li:last-child {
  border-bottom: 0;
}

.pg-regions a,
.pg-regions span {
  display: flex;
  align-items: center;
  min-height: var(--layout-hit-min);
  padding: var(--space-2) 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--font-leading-md);
  text-decoration: none;
}

.pg-regions span {
  color: var(--color-text-secondary);
}

/* 본문 바로 아래 놓인 단독 버튼(목록 위 [새 문의 접수] 등)과 다음 내용 사이 */
.pg-main > .pg-btn {
  margin-bottom: var(--space-3);
}